/* ==========================================================================
   Fortune Group — services: spec cards with animated line drawings
   ========================================================================== */
.gf-svc {
  --s-ink: #1b1f24;
  --s-soft: #5a636d;
  --s-line: rgba(27, 31, 36, 0.1);
  --s-mist: #f3f5f7;
  --s-red: #d90a0a;
  --s-grad: linear-gradient(100deg, #ff3b2f 0%, #d90a0a 45%, #7e0606 100%);
  --s-font: "Archivo", "Manrope", system-ui, sans-serif;
  --s-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  padding: clamp(72px, 9vw, 130px) 0;
  background:
    radial-gradient(50% 40% at 50% 0%, rgba(217, 10, 10, 0.05), rgba(217, 10, 10, 0) 70%),
    linear-gradient(180deg, #fff 0%, var(--s-mist) 100%);
  overflow: hidden;
}

/* heading */
.gf-svc__head { max-width: 860px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.gf-svc__eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font: 600 15px/1 var(--s-font);
  color: var(--s-red);
  margin-bottom: 18px;
}
.gf-svc__eyebrow::before, .gf-svc__eyebrow::after { content: ""; width: 34px; height: 2px; background: var(--s-grad); }
.gf-svc__eyebrow::after { transform: scaleX(-1); }
.gf-svc .gf-svc__title {
  margin: 0;
  font-family: var(--s-font);
  font-variation-settings: "wdth" 112;
  font-weight: 800;
  font-size: clamp(30px, 3.6vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--s-ink);
  text-transform: none;
}

/* grid + the laser that sweeps across it once */
.gf-svc__rail { position: relative; }
.gf-svc__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin: 0; padding: 0; list-style: none;
}
.gf-svc__laser {
  position: absolute; top: -12px; bottom: -12px; left: 0;
  width: 2px; z-index: 3;
  background: linear-gradient(180deg, rgba(255, 59, 47, 0), #ff3b2f 12%, #d90a0a 88%, rgba(217, 10, 10, 0));
  box-shadow: 0 0 14px 3px rgba(255, 40, 20, 0.5), 0 0 40px 8px rgba(217, 10, 10, 0.2);
  opacity: 0; pointer-events: none;
}
.gf-svc.is-in .gf-svc__laser { animation: gf-svc-sweep 1.6s cubic-bezier(0.55, 0.05, 0.35, 1) both; }
@keyframes gf-svc-sweep {
  0% { left: 0; opacity: 0; }
  8% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* card */
.gf-svc-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 22px 22px 24px;
  background: #fff;
  border: 1px solid var(--s-line);
  border-radius: 20px;
  isolation: isolate;
  transition: transform 0.45s var(--s-ease), box-shadow 0.45s var(--s-ease), border-color 0.3s;
  /* hidden until the laser passes */
  clip-path: inset(0 100% 0 0 round 20px);
}
.gf-svc.is-in .gf-svc-card {
  clip-path: inset(0 0 0 0 round 20px);
  transition: clip-path 0.7s var(--s-ease) calc(var(--d) * 0.28s + 0.1s), transform 0.45s var(--s-ease), box-shadow 0.45s var(--s-ease), border-color 0.3s;
}
.gf-svc-card::before { /* machinist grid that appears on hover */
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background-image:
    linear-gradient(rgba(27, 31, 36, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 31, 36, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
  opacity: 0;
  transition: opacity 0.4s;
}
.gf-svc-card::after { /* red edge that draws along the top */
  content: "";
  position: absolute; left: 20px; right: 20px; top: -1px;
  height: 2px; border-radius: 2px;
  background: var(--s-grad);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.5s var(--s-ease);
}
.gf-svc-card:hover, .gf-svc-card:focus-within {
  transform: translateY(-6px);
  border-color: rgba(217, 10, 10, 0.25);
  box-shadow: 0 30px 60px -34px rgba(27, 31, 36, 0.45), 0 18px 40px -30px rgba(217, 10, 10, 0.5);
}
.gf-svc-card:hover::before, .gf-svc-card:focus-within::before { opacity: 1; }
.gf-svc-card:hover::after, .gf-svc-card:focus-within::after { transform: scaleX(1); }

/* line drawing */
.gf-svc-card__art {
  display: block;
  width: 100%; height: auto;
  margin: 0 0 18px;
  padding: 10px 6px 4px;
  border-radius: 14px;
  background: var(--s-mist);
  overflow: visible;
}
.gf-svc-card__art .ln {
  fill: none;
  stroke: var(--s-ink);
  stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.gf-svc-card__art .acc { stroke: var(--s-red); stroke-width: 2.2; }
.gf-svc.is-in .gf-svc-card__art .ln {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.3s var(--s-ease) calc(var(--d) * 0.28s + 0.35s);
}
.gf-svc.is-in .gf-svc-card__art .acc { transition-delay: calc(var(--d) * 0.28s + 0.95s); }

/* process motion on hover */
.gf-svc-card:hover .run, .gf-svc-card:focus-within .run { stroke-dasharray: 0.06 0.04; animation: gf-svc-run 0.9s linear infinite; }
.gf-svc-card:hover .ram, .gf-svc-card:focus-within .ram { animation: gf-svc-ram 1.1s cubic-bezier(0.7, 0, 0.3, 1) infinite; }
.gf-svc-card:hover .pulse, .gf-svc-card:focus-within .pulse { animation: gf-svc-pulse 1.1s ease-out infinite; }
.gf-svc-card:hover .wave, .gf-svc-card:focus-within .wave { animation: gf-svc-wave 1.4s ease-in-out infinite; }
.gf-svc-card:hover .beam, .gf-svc-card:focus-within .beam { animation: gf-svc-beam 0.12s steps(2) infinite; filter: drop-shadow(0 0 4px rgba(255, 40, 20, 0.9)); }
@keyframes gf-svc-run { to { stroke-dashoffset: -0.1; } }
@keyframes gf-svc-ram { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(18px); } 55% { transform: translateY(18px); } }
@keyframes gf-svc-pulse { 0%, 40% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
@keyframes gf-svc-wave { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-6px); opacity: 0.55; } }
@keyframes gf-svc-beam { 50% { opacity: 0.6; } }

/* spec + text */
.gf-svc-card__spec { display: grid; gap: 4px; margin-bottom: 16px; }
.gf-svc-card__spec b {
  font-family: var(--s-font);
  font-variation-settings: "wdth" 112;
  font-weight: 800;
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--s-ink);
  transition: color 0.3s;
}
.gf-svc-card:hover .gf-svc-card__spec b {
  background: var(--s-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.gf-svc-card__spec span { font-size: 13px; color: var(--s-soft); }
.gf-svc .gf-svc-card__name {
  margin: 0 0 10px;
  padding-top: 14px;
  border-top: 1px solid var(--s-line);
  font: 700 19px/1.25 var(--s-font);
  letter-spacing: -0.01em;
}
.gf-svc .gf-svc-card__name a { color: var(--s-ink); text-decoration: none; }
.gf-svc .gf-svc-card__name a::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 20px; } /* whole card is clickable */
.gf-svc .gf-svc-card__name span { font-size: 13px; font-weight: 600; color: var(--s-soft); }
.gf-svc-card:hover .gf-svc-card__name a { color: var(--s-red); }
.gf-svc-card__text { margin: 0 0 18px; font-size: 14px; line-height: 1.65; color: var(--s-soft); }
.gf-svc-card__more {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 14px/1 var(--s-font);
  color: var(--s-ink);
}
.gf-svc-card__more::after {
  content: "";
  width: 22px; height: 2px;
  background: var(--s-grad);
  transform-origin: 0 50%;
  transition: width 0.35s var(--s-ease);
}
.gf-svc-card:hover .gf-svc-card__more { color: var(--s-red); }
.gf-svc-card:hover .gf-svc-card__more::after { width: 40px; }
.gf-svc .gf-svc-card__name a:focus-visible { outline: none; }
.gf-svc-card:has(a:focus-visible) { outline: 3px solid rgba(217, 10, 10, 0.4); outline-offset: 3px; }

/* footer button */
.gf-svc__foot { margin-top: clamp(36px, 4vw, 56px); text-align: center; }
.gf-svc__all {
  display: inline-flex; align-items: center;
  height: 54px; padding: 0 30px;
  border-radius: 999px;
  background: var(--s-grad);
  color: #fff;
  font: 700 16px/1 var(--s-font);
  text-decoration: none;
  box-shadow: 0 16px 34px -16px rgba(217, 10, 10, 0.8);
  transition: transform 0.25s var(--s-ease), box-shadow 0.25s;
}
.gf-svc__all:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 20px 38px -16px rgba(217, 10, 10, 0.95); }

/* responsive */
@media (max-width: 1280px) {
  .gf-svc__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .gf-svc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .gf-svc__laser { display: none; }
}
@media (max-width: 560px) {
  .gf-svc__grid { grid-template-columns: 1fr; }
  .gf-svc-card__art { max-height: 150px; }
}

/* no JS / reduced motion: show everything */
.no-js .gf-svc-card, .gf-svc.is-static .gf-svc-card, .gf-svc.is-done .gf-svc-card { clip-path: none; }
.no-js .gf-svc-card__art .ln, .gf-svc.is-static .gf-svc-card__art .ln { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .gf-svc-card { clip-path: none !important; transition: none !important; }
  .gf-svc-card__art .ln { stroke-dashoffset: 0 !important; transition: none !important; }
  .gf-svc-card .run, .gf-svc-card .ram, .gf-svc-card .pulse, .gf-svc-card .wave, .gf-svc-card .beam { animation: none !important; }
}

/* ==========================================================================
   v2 — square tiles; description slides up on hover
   ========================================================================== */
.gf-svc__grid { gap: 16px; }
.gf-svc-card {
  aspect-ratio: 1 / 1;
  padding: 20px;
  border-radius: 6px;
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
}
.gf-svc.is-in .gf-svc-card { clip-path: inset(0 0 0 0); }
.gf-svc .gf-svc-card__name a::after { border-radius: 6px; }
.gf-svc-card::after { left: 0; right: 0; top: 0; border-radius: 0; }
.gf-svc-card__art { flex: 1 1 auto; min-height: 0; margin-bottom: 14px; border-radius: 4px; }
.gf-svc-card__spec { margin-bottom: 12px; }
.gf-svc .gf-svc-card__name { margin: 0; padding-top: 12px; font-size: 18px; }

/* the panel that covers the tile on hover / focus */
.gf-svc-card__panel {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 14px;
  padding: 22px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 20px 20px,
    var(--s-grad);
  color: #fff;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.55s var(--s-ease);
  pointer-events: none;
}
.gf-svc-card:hover .gf-svc-card__panel,
.gf-svc-card:focus-within .gf-svc-card__panel { clip-path: inset(0 0 0 0); }
.gf-svc-card__panel .gf-svc-card__text { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.92); }
.gf-svc-card__panel .gf-svc-card__more { margin: 0; color: #fff; }
.gf-svc-card__panel .gf-svc-card__more::after { background: #fff; }
.gf-svc-card:hover .gf-svc-card__panel .gf-svc-card__more { color: #fff; }
/* the name sits above the panel so it stays readable */
.gf-svc .gf-svc-card__name { position: relative; z-index: 2; transition: color 0.3s, border-color 0.3s, transform 0.45s var(--s-ease); }
.gf-svc-card:hover .gf-svc-card__name, .gf-svc-card:focus-within .gf-svc-card__name { border-color: rgba(255, 255, 255, 0.3); }
.gf-svc-card:hover .gf-svc-card__name a, .gf-svc-card:focus-within .gf-svc-card__name a,
.gf-svc-card:hover .gf-svc-card__name span { color: #fff; }
/* when the panel is up, the name moves to the top and the text sits under it */
.gf-svc-card:hover { transform: translateY(-4px); }

/* mid-size laptops: 3 tiles a row are big enough for the text */
@media (min-width: 1281px) and (max-width: 1440px) {
  .gf-svc-card__panel .gf-svc-card__text { font-size: 13px; line-height: 1.5; }
}
/* tablets and phones: no hover, so drop the square and show the text */
@media (max-width: 860px), (hover: none) {
  .gf-svc-card { aspect-ratio: auto; }
  .gf-svc-card__art { flex: none; }
  .gf-svc-card__panel {
    position: static; clip-path: none; padding: 12px 0 0; background: none; color: inherit; pointer-events: auto;
  }
  .gf-svc-card__panel .gf-svc-card__text { color: var(--s-soft); }
  .gf-svc-card__panel .gf-svc-card__more, .gf-svc-card:hover .gf-svc-card__panel .gf-svc-card__more { color: var(--s-ink); }
  .gf-svc-card__panel .gf-svc-card__more::after { background: var(--s-grad); }
  .gf-svc-card:hover .gf-svc-card__name a, .gf-svc-card:focus-within .gf-svc-card__name a { color: var(--s-red); }
  .gf-svc-card:hover .gf-svc-card__name, .gf-svc-card:focus-within .gf-svc-card__name { transform: none; border-color: var(--s-line); }
}
/* panel text sits above the service name, which stays pinned at the bottom of the tile */
@media (min-width: 861px) and (hover: hover) {
  .gf-svc-card__panel { justify-content: flex-start; padding: 20px 20px 66px; gap: 10px; }
  .gf-svc-card__panel .gf-svc-card__text { font-size: 13px; line-height: 1.5; }
}
@media (min-width: 1281px) and (hover: hover) {
  .gf-svc-card__panel .gf-svc-card__more { display: none; }
}
/* centre an incomplete last row (5 tiles in rows of 3 or 2) */
.gf-svc__grid { display: flex; flex-wrap: wrap; justify-content: center; }
.gf-svc-card { flex: 0 0 calc((100% - 64px) / 5); }
@media (max-width: 1280px) { .gf-svc-card { flex-basis: calc((100% - 32px) / 3); } }
@media (max-width: 860px) { .gf-svc-card { flex-basis: calc((100% - 14px) / 2); } }
@media (max-width: 560px) { .gf-svc-card { flex-basis: 100%; } }

/* heading on two lines: "Comprehensive Manufacturing Services," / "Unmatched Engineering Expertise" */
.gf-svc__head { max-width: 1180px; }
.gf-svc .gf-svc__title { font-size: clamp(26px, 3.1vw, 48px); line-height: 1.08; }
@media (min-width: 992px) { .gf-svc .gf-svc__title { font-variation-settings: "wdth" 104; } }