/* ==========================================================================
   FORGYEN — Our Approach (homepage section 4)
   Builds on main.css tokens. Scoped to .approach.

   Desktop (≥1200px): one layered SVG route rising from lower left to upper
   right. The SVG and the five stage anchors share a 1280×660 coordinate
   system inside an element with the same aspect ratio, so the nodes stay
   on the curve at every width.

   Below 1200px: a winding vertical route. Each stage carries the curve
   segment to the next node in an SVG that is a fixed 80px wide (x stays in
   real pixels) and stretches only vertically to the stage's height, so the
   segments always meet the node centres, whatever the text length.

   Structure: 1 Section & backdrop · 2 Intro · 3 Desktop route · 4 Nodes
              5 Stage text · 6 Reveal · 7 Responsive
   ========================================================================== */

/* 1. Section & backdrop -------------------------------------------------- */
.approach {
  --ap-node: 78px;
  --ap-pin: 30px;

  position: relative;
  isolation: isolate;
  overflow: clip;
  scroll-margin-top: var(--fg-header-h);
  padding: clamp(80px, 8vw, 112px) 0 clamp(48px, 4vw, 72px);
  background:
    radial-gradient(40% 46% at 82% 30%, rgba(233, 176, 128, 0.22), transparent 70%),
    radial-gradient(38% 40% at 14% 22%, rgba(255, 255, 255, 0.55), transparent 72%),
    radial-gradient(50% 40% at 50% 100%, rgba(214, 160, 118, 0.12), transparent 70%),
    linear-gradient(180deg, #FBF6F1 0%, #F6EADF 34%, #F2E3D4 100%);
}

.approach__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.approach__sweeps {
  width: 100%;
  height: 100%;
  max-width: none;
  fill: none;
  stroke: rgba(11, 19, 32, 0.06);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.approach__sweeps .is-copper { stroke: rgba(184, 115, 51, 0.16); }
.approach__sweeps .is-faint { opacity: 0.6; }

.approach__bead {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #FFE6CC, #E3A26C 35%, #9A5627);
  box-shadow: 0 6px 10px -4px rgba(110, 58, 20, 0.35);
}
.approach__bead.is-navy {
  width: 6px;
  height: 6px;
  background: radial-gradient(circle at 36% 30%, #A9BCCD, #284A63 45%, #0B1320);
  box-shadow: none;
}
.approach__bead--a { left: 2.5%; top: 64%; }
.approach__bead--b { right: 4%; top: 74%; width: 20px; height: 20px; }
.approach__bead--c { right: 9%; top: 58%; }

/* 2. Intro --------------------------------------------------------------- */
.approach__title {
  margin: 0;
  color: var(--fg-navy-950);
  font-size: clamp(2.375rem, 0.9rem + 3.6vw, 4.25rem);   /* 38 → 68 */
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.036em;
}
.approach__accent {
  color: var(--fg-copper);
  background: linear-gradient(180deg, #CC8650, #A35A28);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.approach__mark {
  display: block;
  width: 44px;
  height: 2px;
  margin: 24px 0 22px;
  border-radius: 2px;
  background: var(--fg-copper);
  opacity: 0.85;
}
.approach__lead {
  margin: 0;
  max-width: 16em;
  color: var(--fg-text-muted);
  font-size: clamp(1.125rem, 0.75rem + 0.9vw, 1.5rem);   /* 18 → 24 */
  line-height: 1.42;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

/* 3. Desktop route ------------------------------------------------------- */
.approach__stage-area {
  position: relative;
  aspect-ratio: 1280 / 660;
  container-type: inline-size;
}
.approach__intro {
  position: absolute;
  top: 1%;
  left: 0;
  width: 37%;
  z-index: 1;
}
.approach__route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
}
/* layered line: soft warmth · shadow · copper core · fine highlight */
.approach__route-lead   { stroke: url(#ap-lead); stroke-width: 2; }
.approach__route-echo   { stroke: rgba(184, 115, 51, 0.38); stroke-width: 1.3; stroke-dasharray: 0.5 7; }
.approach__route-glow   { stroke: rgba(214, 150, 100, 0.34); stroke-width: 12; }
.approach__route-shadow { stroke: rgba(110, 60, 25, 0.26); stroke-width: 3.4; transform: translateY(2.2px); }
.approach__route-line   { stroke: url(#ap-route); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 0; }
.approach__route-hi     { stroke: rgba(255, 240, 224, 0.8); stroke-width: 0.9; transform: translateY(-0.9px); }
.approach__defs { position: absolute; }

/* 4. Nodes --------------------------------------------------------------- */
.approach__stages {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.approach__stage {                         /* zero-size anchor on the curve */
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 0;
  height: 0;
}
.approach__seg { display: none; }

/* pin from the node up to its label */
.approach__stage::before {
  content: "";
  position: absolute;
  left: -0.5px;
  bottom: calc(var(--ap-node) / 2 + 2px);
  width: 1px;
  height: var(--ap-pin);
  background: linear-gradient(180deg, rgba(184, 115, 51, 0.8), rgba(184, 115, 51, 0.3));
}
.approach__stage::after {
  content: "";
  position: absolute;
  left: -3.5px;
  bottom: calc(var(--ap-node) / 2 + var(--ap-pin) - 2px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #FFE6CC, #D58E50 45%, #8E5424);
}

.approach__node {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--ap-node);
  height: var(--ap-node);
  translate: -50% -50%;
  border-radius: 50%;
  /* layered ivory: lit top-left, warm under-surface */
  background:
    radial-gradient(circle at 36% 26%, #FFFFFF 0%, rgba(255, 255, 255, 0) 46%),
    radial-gradient(circle at 50% 50%, #FDF9F4 0%, #F8EFE6 62%, #EFDDCB 100%);
  box-shadow:
    inset 0 0 0 1px rgba(184, 115, 51, 0.34),
    inset 0 2px 2px rgba(255, 255, 255, 0.95),
    inset 0 -8px 14px -8px rgba(184, 115, 51, 0.28),
    0 0 0 7px rgba(255, 250, 245, 0.55),
    0 0 0 8px rgba(184, 115, 51, 0.1),
    0 18px 30px -16px rgba(110, 66, 30, 0.5),
    0 4px 10px -6px rgba(110, 66, 30, 0.22);
  color: var(--fg-navy-800);
}
.approach__node::before {                 /* fine dotted orbit */
  content: "";
  position: absolute;
  inset: -17px;
  border-radius: 50%;
  border: 1px dashed rgba(184, 115, 51, 0.22);
}
.approach__node svg {
  position: relative;
  width: 44%;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.approach__node .accent { stroke: var(--fg-copper); }
.approach__stage:nth-child(n+4) .approach__node { color: #A9622E; }   /* action stages read in copper */

/* 5. Stage text ---------------------------------------------------------- */
.approach__content {
  position: absolute;
  left: -3.44cqi;                           /* 44 of 1280 units */
  bottom: calc(var(--ap-node) / 2 + var(--ap-pin) + 14px);
  width: 12cqi;
}
.approach__stage:last-child .approach__content { width: 15.6cqi; }
/* faint architectural guide from each label down toward the route */
.approach__content::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 6px;
  height: calc(100% + 44px);
  width: 1px;
  background: linear-gradient(180deg, rgba(184, 115, 51, 0.22), rgba(184, 115, 51, 0));
}

.approach__num {
  display: block;
  color: var(--fg-copper-700);
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1;
}
.approach__num::after {
  content: "";
  display: block;
  width: 28px;
  height: 1.5px;
  margin: 11px 0 13px;
  background: currentColor;
  opacity: 0.6;
}
.approach__name {
  margin: 0;
  color: var(--fg-navy-950);
  font-size: clamp(1.125rem, 0.7rem + 0.7vw, 1.375rem);   /* 18 → 22 */
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.022em;
}
.approach__desc {
  margin: 9px 0 0;
  color: var(--fg-text-muted);
  font-size: 0.96875rem;
  line-height: 1.5;
  text-wrap: pretty;
}

/* 6. Reveal (JS + motion only) ------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready .approach .approach__intro,
  .reveal-ready .approach .approach__stage {
    opacity: 0;
    transition: opacity 560ms var(--fg-ease), transform 560ms var(--fg-ease);
  }
  .reveal-ready .approach .approach__intro { transform: translateY(14px); }
  .reveal-ready .approach .approach__route-line { stroke-dashoffset: 1; transition: stroke-dashoffset 1500ms var(--fg-ease) 200ms; }
  .reveal-ready .approach .approach__route-glow,
  .reveal-ready .approach .approach__route-shadow,
  .reveal-ready .approach .approach__route-hi,
  .reveal-ready .approach .approach__route-echo,
  .reveal-ready .approach .approach__route-tip { opacity: 0; transition: opacity 900ms var(--fg-ease) 1100ms; }

  .reveal-ready .approach.is-visible .approach__intro { opacity: 1; transform: none; }
  .reveal-ready .approach.is-visible .approach__route-line { stroke-dashoffset: 0; }
  .reveal-ready .approach.is-visible .approach__route-glow,
  .reveal-ready .approach.is-visible .approach__route-shadow,
  .reveal-ready .approach.is-visible .approach__route-hi,
  .reveal-ready .approach.is-visible .approach__route-echo,
  .reveal-ready .approach.is-visible .approach__route-tip { opacity: 1; }
  .reveal-ready .approach.is-visible .approach__stage {
    opacity: 1;
    transition-delay: calc(300ms + var(--i) * 240ms);   /* follows the line as it draws */
  }
}

/* 7. Responsive ---------------------------------------------------------- */

/* Below 1200px the diagonal would crowd its labels: a winding vertical route */
@media (max-width: 1199px) {
  .approach { --ap-node: 44px; --ap-node-off: 6px; --ap-gap: 26px; --ap-col: 80px; }

  .approach__stage-area {
    aspect-ratio: auto;
    container-type: normal;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: 40px 56px;
    align-items: start;
  }
  .approach__intro { position: static; width: auto; }
  .approach__route { display: none; }

  .approach__stages {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    gap: var(--ap-gap);
  }
  .approach__stage {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    display: grid;
    grid-template-columns: var(--ap-col) minmax(0, 1fr);
    column-gap: 10px;
    align-items: start;
  }
  .approach__stage::before,
  .approach__stage::after { display: none; }

  /* the winding route: this stage's node centre → the next node's centre */
  .approach__seg {
    display: block;
    position: absolute;
    z-index: 0;
    left: 0;
    top: calc(var(--ap-node) / 2 + var(--ap-node-off));   /* from the node centre */
    width: 80px;                            /* = viewBox width: x stays in true pixels */
    height: calc(100% + var(--ap-gap));
    overflow: visible;
    fill: none;
    stroke-linecap: round;
  }
  .approach__seg--end { height: 58px; }
  .approach__seg path { vector-effect: non-scaling-stroke; }
  .approach__seg-under { stroke: rgba(214, 150, 100, 0.2); stroke-width: 5; }
  .approach__seg-line { stroke: #C4804A; stroke-width: 2.2; }
  .approach__stage:nth-child(1) .approach__seg-line { stroke: #D9A47A; }
  .approach__stage:nth-child(2) .approach__seg-line { stroke: #CF9465; }
  .approach__stage:nth-child(3) .approach__seg-line { stroke: #C4834F; }
  .approach__stage:nth-child(4) .approach__seg-line { stroke: #B8733F; }
  .approach__stage:nth-child(5) .approach__seg-line { stroke: #AA6431; }

  .approach__node {
    grid-column: 1;
    position: relative;
    margin: var(--ap-node-off) 0 0 var(--nx);   /* centre sits between number and title */
    translate: none;
    box-shadow:
      inset 0 0 0 1px rgba(184, 115, 51, 0.32),
      inset 0 2px 2px rgba(255, 255, 255, 0.95),
      inset 0 -5px 9px -6px rgba(184, 115, 51, 0.26),
      0 0 0 4px rgba(250, 242, 234, 0.85),
      0 0 0 5px rgba(184, 115, 51, 0.08),
      0 8px 16px -10px rgba(110, 66, 30, 0.42);
  }
  .approach__node::before { inset: -8px; border-color: rgba(184, 115, 51, 0.14); }
  .approach__node svg { width: 46%; }

  .approach__content,
  .approach__stage:last-child .approach__content {
    grid-column: 2;
    position: static;
    width: auto;
    padding-top: 2px;
  }
  .approach__content::before { display: none; }
  .approach__num { font-size: 1rem; }
  .approach__num::after { width: 22px; margin: 8px 0 8px; }
  .approach__desc { max-width: 30em; }
}

/* Phones: intro on top, compact winding journey below */
@media (max-width: 767px) {
  .approach { --ap-gap: 20px; --ap-col: 76px; padding: 56px 0 60px; }

  .approach__stage-area { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .approach__title { font-size: min(2.625rem, 10.6vw); }
  .approach__mark { margin: 16px 0 14px; width: 40px; }
  .approach__lead { max-width: none; font-size: 1.0625rem; line-height: 1.5; }

  .approach__stage { column-gap: 8px; }
  .approach__num { font-size: 0.875rem; }
  .approach__num::after { width: 18px; margin: 6px 0 6px; }
  .approach__name { font-size: 1.0625rem; }
  .approach__desc { margin-top: 4px; font-size: 0.9375rem; line-height: 1.45; }

  .approach__sweeps .is-faint { display: none; }
  .approach__bead--a,
  .approach__bead--c { display: none; }
  .approach__bead--b { top: 7%; right: 7%; width: 12px; height: 12px; }
}