/* ============================================================================
   PAGE: OUR APPROACH (our-approach.html)
   Sections: title + 2D route hero · authority copy with
             gradient chips + arch frame with orbits · sliding-doors process ·
             flashlight statement
   Every pattern here is unique to this page (see README → "No repeated sections").
   ============================================================================ */

/* Registered so they can be animated / interpolated smoothly */
@property --open   { syntax: "<number>";     inherits: true;  initial-value: 0; }
@property --lx     { syntax: "<percentage>"; inherits: true;  initial-value: 30%; }
@property --ly     { syntax: "<percentage>"; inherits: true;  initial-value: 40%; }

@layer sections {

  /* ===================== HERO: TITLE + 2D ROUTE ===================== */
  .abt-hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding-block: calc(var(--header-h) + 2.5rem) clamp(5rem, 9vw, 8rem);
  }
  .abt-hero__grid { display: grid; gap: 2rem; align-items: center; }
  @media (min-width: 900px) { .abt-hero__grid { grid-template-columns: 1.1fr .9fr; gap: 4rem; min-block-size: min(70svh, 40rem); } }
  /* Same type as the service-page heroes */
  .abt-hero__title {
    font-size: clamp(2.8rem, 1.4rem + 5.6vw, 6.6rem);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: .96;
  }
  .abt-hero__title em { color: var(--accent); font-weight: inherit; }

  .abt-hero__art { position: relative; justify-self: center; inline-size: min(100%, 30rem); }
  .abt-hero__art::before {             /* soft brand glow behind the drawing */
    content: "";
    position: absolute;
    inset: 12% 10%;
    z-index: -1;
    border-radius: var(--blob);
    background: var(--grad-brand);
    filter: blur(50px);
    opacity: .25;
  }
  .route { display: block; inline-size: 100%; block-size: auto; overflow: visible; }
  .route__ring { fill: none; stroke: var(--ink-mute); stroke-width: 2; }
  .route__ring--dash { stroke: var(--k-amber); stroke-dasharray: 4 10; opacity: .8; }
  .route__track { fill: none; stroke: var(--ink-mute); stroke-width: 14; stroke-linecap: round; }
  .route__line { fill: none; stroke: url(#routeFire); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
  .route__node circle:first-child { fill: var(--surface-solid); stroke: var(--line); stroke-width: 3; }
  .route__core { fill: var(--k-magenta); }
  .route__node[style*="--d:1"] .route__core { fill: var(--k-orange); }
  .route__pole { stroke: var(--line); stroke-width: 4; stroke-linecap: round; }
  .route__pennant { fill: var(--k-amber); stroke: var(--line); stroke-width: 3; stroke-linejoin: round; }
  .route__base { fill: var(--line); }
  .route__node, .route__flag { transform-box: fill-box; transform-origin: center; }
  .route__pennant { transform-box: fill-box; transform-origin: 0 50%; }

  .abt-hero__surface {
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    z-index: 0;
    inline-size: 100%;
    block-size: clamp(2.5rem, 6vw, 5rem);
    fill: var(--bg-alt);
  }

  /* ===================== AUTHORITY + TEAM ===================== */
  .authority { background: var(--bg-alt); }
  .authority__head { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
  .authority__title {
    font-size: var(--fs-xl);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1;
    max-inline-size: 18ch;
  }
  .authority__title em { font-family: var(--font-serif); font-weight: inherit; color: var(--accent); }

  .authority__grid { display: grid; gap: clamp(3.5rem, 7vw, 6rem); align-items: start; }
  @media (min-width: 900px) { .authority__grid { grid-template-columns: 1.1fr .9fr; } }

  .authority__lead { font-size: var(--fs-lg); line-height: 1.5; letter-spacing: -.01em; }

  /* Gradient chips: the bold phrases fill with the brand gradient in turn */
  .chip {
    font-weight: 700;
    padding: .02em .3em;
    margin-inline: -.3em -.2em;
    border-radius: .5em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background: var(--grad-brand) no-repeat 0 0 / 0% 100%;
    /* text turns light only once the fill has passed under it */
    transition: background-size .9s var(--ease-out), color .35s;
    transition-delay: calc(var(--i, 0) * 260ms + 200ms), calc(var(--i, 0) * 260ms + 650ms);
  }
  .authority__lead > .chip:first-child { margin-inline-start: 0; }
  .chip.is-on, .no-js .chip { background-size: 100% 100%; color: #fbf6ee; }

  .team { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 2rem; border-top: 2px solid var(--line); color: var(--ink-soft); }
  .team p + p { margin-top: 1rem; }
  .team__title {
    font-size: var(--fs-xl);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--ink);
    margin-bottom: 1.4rem;
  }

  /* Arch photo frame */
  .arch {
    position: relative;
    justify-self: center;
    inline-size: min(100%, 30rem);
    margin: clamp(2rem, 6vw, 5rem) 1.5rem 1.5rem 0;
  }
  .arch__frame {
    position: relative;
    z-index: 1;
    aspect-ratio: 4 / 5;
    border-radius: 999px 999px var(--radius) var(--radius);
    overflow: hidden;
    background: var(--grad-k);
    box-shadow: var(--shadow-soft);
  }
  /* Portrait photo in the arch: keep the shield centred */
  .arch__frame img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 52% 50%; }
  .arch__outline {
    position: absolute;
    z-index: 0;
    inset: 1.2rem -1.2rem -1.2rem 1.2rem;
    inline-size: 100%;
    block-size: 100%;
    overflow: visible;
  }
  /* Dash longer than the whole outline at any size, so "drawing" it is just offset → 0.
     (pathLength + non-scaling-stroke would compute the dashes wrong and draw it in pieces.) */
  .arch__outline path { fill: none; stroke: var(--line); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 2400; stroke-dashoffset: 0; }

  /* Orbits behind the arch; satellites pass "behind" the photo */
  .arch__orbits { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; }
  .orbit {
    position: absolute;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1.5px dashed var(--ink-mute);
  }
  .orbit--a { inline-size: 118%; }
  .orbit--b { inline-size: 142%; border-style: solid; border-color: color-mix(in oklab, var(--accent) 30%, transparent); }
  .orbit--c { inline-size: 166%; }
  .orbit i { position: absolute; inset: 0; rotate: calc(var(--n, 0) * 1turn / var(--count, 1)); }
  .orbit i::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    inline-size: var(--size, .9rem);
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    background: var(--dot, var(--grad-fire));
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--bg-alt) 80%, transparent);
  }
  .orbit--a { --count: 2; }
  .orbit--b { --count: 1; --size: 1.4rem; --dot: var(--grad-k); }
  .orbit--c { --count: 3; --size: .7rem; --dot: var(--k-orange); }
  .orbit i:nth-child(2) { --n: 1; }
  .orbit i:nth-child(3) { --n: 2; }
  @media (max-width: 699px) {
    /* Narrower arch, centred (no right offset), so the widest orbit (136%) fits the screen */
    .arch { inline-size: min(78%, 30rem); margin-inline: auto; }
    .orbit--a { inline-size: 108%; }
    .orbit--b { inline-size: 122%; }
    .orbit--c { inline-size: 136%; }
  }

  /* ===================== A PROVEN PROCESS: SLIDING DOORS ===================== */
  /* Default (mobile, reduced motion): photo above the copy, no pinning */
  .doors { padding-block: var(--section); }
  .doors__stage {
    display: grid;
    gap: clamp(2rem, 5vw, 3rem);
    width: min(100% - var(--gutter) * 2, 1280px);
    margin-inline: auto;
  }
  .doors__leaf--r { display: none; }
  .doors__leaf--l {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--radius) var(--radius) 4rem var(--radius);
    background: var(--grad-k);
  }
  /* Focal point = the glowing check mark + fingertip (left of centre) */
  .doors__leaf img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 45% 45%; }

  .doors__title {
    font-size: var(--fs-2xl);
    font-weight: 700;
    letter-spacing: -.05em;
    line-height: .95;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  }
  .doors__accent {
    font-family: var(--font-serif);
    font-style: normal;
    font-weight: 400;
    letter-spacing: -.01em;
    color: var(--k-orange);
    text-decoration: underline;
    text-decoration-thickness: .06em;
    text-underline-offset: .12em;
    text-decoration-color: var(--k-amber);
  }
  .doors__text { display: grid; gap: 1.1rem; color: var(--ink-soft); font-size: var(--fs-md); }
  @media (min-width: 800px) { .doors__text { grid-template-columns: 1fr 1fr; gap: 3rem; } }

  /* Pinned "doors" (wide screens with motion allowed) */
  @media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
    .doors { block-size: 240svh; padding: 0; }
    .doors__stage {
      position: sticky;
      top: 0;
      width: auto;
      block-size: 100svh;
      overflow: hidden;
      display: grid;
      place-items: center;
      perspective: 1600px;
    }
    .doors__leaf {
      position: absolute;
      z-index: 2;
      inset-block: 0;
      inline-size: 50%;
      overflow: hidden;
      border-radius: 0;
      aspect-ratio: auto;
      background: var(--grad-k);
      will-change: transform;
    }
    .doors__leaf--l {
      display: block;
      left: 0;
      transform-origin: left center;
      transform: translateX(calc(var(--open) * -125%)) rotateY(calc(var(--open) * 28deg));
      box-shadow: inset -2px 0 0 var(--k-amber);
    }
    .doors__leaf--r {
      display: block;
      right: 0;
      transform-origin: right center;
      transform: translateX(calc(var(--open) * 125%)) rotateY(calc(var(--open) * -28deg));
      box-shadow: inset 2px 0 0 var(--k-amber);
    }
    /* Each leaf shows its own half of one full-width photo.
       200% of a half-width leaf = exactly the stage width. (100vw would include
       the scrollbar, so the two halves would be offset by its width at the seam.) */
    .doors__leaf img { position: absolute; inset-block: 0; inline-size: 200%; max-inline-size: none; block-size: 100%; }
    .doors__leaf--l img { left: 0; }
    .doors__leaf--r img { right: 0; }

    .doors__room {
      inline-size: min(100% - var(--gutter) * 2, 64rem);
      text-align: center;
      opacity: calc(var(--open) * 1.4 - .2);
      scale: calc(.9 + var(--open) * .1);
    }
    .doors__title { margin-inline: auto; }
    .doors__text { text-align: start; }

    @supports (animation-timeline: view()) {
      .doors {
        animation: doors-open linear both;
        animation-timeline: view();
        animation-range: contain 4% contain 72%;
      }
    }
  }
  @keyframes doors-open { from { --open: 0; } to { --open: 1; } }

  /* ===================== FLASHLIGHT STATEMENT ===================== */
  .flashlight { padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem); }
  .flashlight__inner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(3.5rem, 9vw, 9rem) clamp(1.5rem, 6vw, 7rem);
    border-radius: clamp(2rem, 6vw, 5rem) var(--radius) clamp(2rem, 6vw, 5rem) var(--radius);
    background: #120c24;
    box-shadow: inset 0 0 0 1px rgb(245 238 228 / .1), var(--shadow-soft);
    color: #f5eee4;
    text-align: center;
  }
  /* Soft halo that travels with the light */
  .flashlight__inner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle clamp(10rem, 28vw, 24rem) at var(--lx) var(--ly), rgb(242 107 42 / .32), rgb(156 10 94 / .18) 45%, transparent 70%);
  }
  .flashlight__eyebrow { color: var(--k-amber); justify-content: center; }
  .flashlight__text {
    font-size: clamp(1.7rem, 1rem + 3vw, 3.6rem);
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1.15;
    max-inline-size: 26ch;
    margin-inline: auto;
    /* Base text is ~65% visible; the light brings it to full brightness */
    color: transparent;
    background: radial-gradient(circle clamp(8rem, 22vw, 18rem) at var(--lx) var(--ly), #fffaf2 0%, #fbd9a0 35%, rgb(245 238 228 / .66) 70%) no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
  }
  .flashlight__u {
    font-family: var(--font-serif);
    font-style: normal;
    font-weight: 400;
    letter-spacing: -.01em;
    text-decoration: underline;
    text-decoration-thickness: .05em;
    text-underline-offset: .14em;
    text-decoration-color: rgb(245 238 228 / .6);
  }
  .flashlight__u--fire { text-decoration-color: var(--k-orange); }
}

/* ===================== MOTION ===================== */
@layer motion {
  @keyframes route-draw { from { stroke-dashoffset: 1; } }
  @keyframes route-pop  { from { scale: 0; } }
  @keyframes route-wave { 50% { scale: .82 1; } }
  @keyframes orbit-spin { to { rotate: 1turn; } }
  @keyframes wander {
    0%   { --lx: 18%; --ly: 30%; }
    30%  { --lx: 70%; --ly: 25%; }
    60%  { --lx: 82%; --ly: 72%; }
    100% { --lx: 26%; --ly: 70%; }
  }
  @keyframes stretch-in { from { letter-spacing: -.12em; font-weight: 300; opacity: .2; } }

  @media (prefers-reduced-motion: no-preference) {
    /* Hero route: line draws, milestones pop in order, the flag keeps waving */
    .route__line { animation: route-draw 1.8s var(--ease-out) .5s both; }
    .route__node { animation: route-pop .6s var(--ease-spring) both; animation-delay: calc(.4s + var(--d) * .7s); }
    .route__flag { animation: route-pop .7s var(--ease-spring) 2s both; }
    .route__pennant { animation: route-wave 2.6s ease-in-out 2.7s infinite; }
    .route__ring--dash { transform-box: view-box; transform-origin: 250px 215px; animation: orbit-spin 60s linear infinite; }

    .orbit--a { animation: orbit-spin 26s linear infinite; }
    .orbit--b { animation: orbit-spin 38s linear infinite reverse; }
    .orbit--c { animation: orbit-spin 54s linear infinite; }

    /* Arch: curtain wipe from the bottom + photo settles, outline draws */
    .is-ready .arch .arch__frame { clip-path: inset(100% 0 0 0 round 999px 999px var(--radius) var(--radius)); transition: clip-path 1.4s var(--ease-out); }
    .is-ready .arch .arch__frame img { scale: 1.25; transition: scale 1.8s var(--ease-out); }
    .is-ready .arch.is-in .arch__frame { clip-path: inset(0 0 0 0 round 999px 999px var(--radius) var(--radius)); }
    .is-ready .arch.is-in .arch__frame img { scale: 1; }
    .is-ready .arch .arch__outline path { stroke-dashoffset: 2400; transition: stroke-dashoffset 1.6s var(--ease-out) .5s; }
    .is-ready .arch.is-in .arch__outline path { stroke-dashoffset: 0; }

    /* "An Exceptional Team": letters expand and gain weight */
    .team.is-in .team__title { animation: stretch-in 1.2s var(--ease-out) .2s both; }

    /* Flashlight wanders on its own until the pointer takes over */
    .flashlight__inner:not(.is-tracking) { animation: wander 12s ease-in-out infinite alternate; }
  }
}