/* ══ PORTED FROM THE INITIATE CONSULTING BUILD ═══════════════════════════
   Same components, LES tokens. What came across: the sticky flip-card stack,
   the numbered journey list, the counter grid, the video card with its cue,
   the 3D icon stage with its glare, the fixed topo wash, the lightbox and
   the tilt. What did not: Initiate's purple/paper palette, its serif display
   and its mountain photography — all replaced by ours.                    */

/* ── fixed topo wash ─────────────────────────────────────────────────────
   A single fixed texture layer over the whole document at very low opacity.
   On a dark site it does what grain alone cannot: it gives large flat areas
   a surface, so panels read as material rather than as empty divs. */
.topo-wash{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.05;mix-blend-mode:screen;
  background:url(../media/texture/crimson-a.webp) center/cover no-repeat;filter:grayscale(1) contrast(1.4)}

/* ── image loading ───────────────────────────────────────────────────────
   Every img sits on its own LQIP. The placeholder is blurred and scaled up
   slightly so its edges never show, and the real file fades in on decode. */
img[data-lqip]{background-size:cover;background-position:center;background-repeat:no-repeat}
.ld{position:relative;overflow:hidden;background:var(--surface)}
.ld>img{opacity:0;transition:opacity .55s var(--ease)}
.ld>img.is-loaded,.ld>img[data-instant]{opacity:1}
.ld::before{content:"";position:absolute;inset:-6%;background:inherit;background-image:var(--lqip);
  background-size:cover;background-position:center;filter:blur(18px) saturate(1.2);transform:scale(1.06);
  opacity:1;transition:opacity .6s var(--ease)}
.ld.is-done::before{opacity:0}

/* ── counters ────────────────────────────────────────────────────────────
   Initiate's stat grid: auto-fit columns on a hairline, number in display
   face, label in mono beneath. */
.counters{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  background:var(--hairline);border:1px solid var(--hairline);border-radius:12px;overflow:hidden}
.counters div{background:var(--surface);padding:clamp(1.4rem,3vw,2.2rem)}
.counters b{display:block;font-family:var(--font-display);font-variation-settings:'wdth' 75,'wght' 700;
  font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1;color:var(--crimson-live);letter-spacing:-.02em}
.counters span{display:block;margin-top:.6rem;font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);line-height:1.5}

/* ── journey list ────────────────────────────────────────────────────────
   Counter-numbered rows that slide right and warm on hover. Initiate used it
   for engagement stages; here it carries departmental responsibilities. */
.journey{list-style:none;counter-reset:j;margin:0;padding:0;border-top:1px solid var(--hairline-2)}
.journey li{counter-increment:j;display:grid;gap:.25rem 1.4rem;grid-template-columns:2.8rem 1fr;
  padding:1.3rem .6rem;border-bottom:1px solid var(--hairline);color:var(--muted);
  transition:padding-left .35s var(--ease),background .35s var(--ease),color .35s var(--ease)}
.journey li::before{content:counter(j,decimal-leading-zero);font-family:var(--font-mono);font-size:.72rem;
  letter-spacing:.1em;color:var(--crimson-live);padding-top:.35em}
.journey li:hover{padding-left:1.5rem;background:rgba(181,31,50,.09);color:var(--ivory)}

/* ── sticky flip-card stack ──────────────────────────────────────────────
   Initiate's best component. Cards stick in sequence at descending offsets so
   they pile up as you scroll, and each flips on its Y axis to reveal detail.
   Used here for objectives and values, which are exactly the shape it wants:
   a title you scan and a paragraph you only read if you care. */
.flipdeck{display:grid;gap:clamp(1rem,2vw,1.6rem)}
.flipcard{position:sticky;top:calc(6rem + var(--i) * 14px);perspective:2200px;z-index:calc(var(--i) + 1)}
.flip-inner{position:relative;transform-style:preserve-3d;
  transition:transform .85s cubic-bezier(.16,1,.3,1);min-height:clamp(300px,38vh,420px)}
.flip-inner.is-flipped{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border:1px solid var(--hairline);border-radius:18px;padding:clamp(1.6rem,3.4vw,2.8rem);
  display:grid;align-content:space-between;gap:1.2rem;cursor:pointer;
  background:linear-gradient(150deg,rgba(38,12,18,.92),rgba(11,9,10,.96));
  transition:border-color .4s var(--ease)}
.flip-face:hover{border-color:var(--hairline-2)}
.flip-face .num{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;color:var(--crimson-live)}
.flip-face h3{font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:1.02;max-width:16ch}
.flip-face .cue{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:.6rem}
.flip-face .cue i{width:22px;height:22px;border:1px solid var(--hairline-2);border-radius:50%;
  display:grid;place-items:center;font-style:normal;font-size:.7rem;transition:background .4s var(--ease)}
.flip-face:hover .cue i{background:var(--crimson)}
.flip-back{transform:rotateY(180deg);background:linear-gradient(150deg,rgba(142,20,31,.35),rgba(11,9,10,.97))}
.flip-back p{color:var(--ivory);font-size:1.0625rem;line-height:1.6;max-width:52ch;align-self:center}
@media(prefers-reduced-motion:reduce){.flipcard{position:static;top:auto}
  .flip-inner{min-height:0;transform:none!important}
  .flip-face{position:static;backface-visibility:visible}
  .flip-back{transform:none;margin-top:1rem}}

/* ── video card ──────────────────────────────────────────────────────────
   Initiate's vcard: a wide rounded panel with looping footage behind a veil,
   a title, and a mono cue in the corner. Used here for the four projects. */
.vcard{position:relative;display:block;width:100%;border:1px solid var(--hairline);border-radius:22px;
  overflow:hidden;aspect-ratio:21/9;background:var(--surface);isolation:isolate;
  transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s ease,border-color .35s ease}
.vcard:hover{transform:translateY(-4px);box-shadow:0 30px 60px -40px rgba(142,20,31,.75);border-color:var(--hairline-2)}
.vcard img,.vcard video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  filter:grayscale(.45) brightness(.5) contrast(1.08);transition:filter .6s var(--ease),transform 1.4s var(--ease);transform:scale(1.04)}
.vcard:hover img,.vcard:hover video{filter:grayscale(0) brightness(.62);transform:scale(1)}
.vcard-veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(11,9,10,.9),rgba(11,9,10,.35) 62%,rgba(11,9,10,.7))}
.vcard-body{position:relative;height:100%;padding:clamp(1.4rem,3vw,2.6rem);display:grid;align-content:space-between;gap:1rem}
.vcard-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.vcard-title{font-size:clamp(1.8rem,5vw,4rem);line-height:.9;max-width:14ch}
.vcard-desc{color:var(--muted);max-width:46ch;font-size:.9375rem}
.vcard-cue{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.vcard:hover .vcard-cue{color:var(--rose)}
@media(max-width:760px){.vcard{aspect-ratio:4/5}}

/* ── 3D icon stage ───────────────────────────────────────────────────────
   Initiate's i3d: an icon on a perspective stage with a screen-blended glare
   sweep and a soft contact shadow. */
.i3d{position:relative;aspect-ratio:1;perspective:900px;perspective-origin:50% 45%;display:grid;place-items:center}
.i3d svg{width:58%;transform:rotateX(14deg) rotateZ(-6deg);transition:transform .7s var(--ease)}
.i3d:hover svg{transform:rotateX(0) rotateZ(0) scale(1.06)}
.i3d svg path{fill:none;stroke:var(--crimson-live);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.i3d-glare{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.16;
  background:radial-gradient(58% 52% at 32% 22%,rgba(255,255,255,.6),transparent 72%)}
.i3d-shadow{position:absolute;left:22%;right:22%;bottom:10%;height:14%;border-radius:50%;
  background:rgba(142,20,31,.5);filter:blur(18px)}

/* ── lightbox ────────────────────────────────────────────────────────────
   Click any gallery frame to open it full-bleed with prev/next and a counter. */
.lb{position:fixed;inset:0;z-index:960;background:rgba(6,4,5,.94);backdrop-filter:blur(10px);
  display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.lb.is-open{opacity:1;visibility:visible}
.lb figure{max-width:min(92vw,1400px);max-height:84vh;display:grid;gap:1rem}
.lb img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:8px}
.lb figcaption{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lb button{position:absolute;width:48px;height:48px;border:1px solid var(--hairline-2);border-radius:50%;
  display:grid;place-items:center;transition:background .35s var(--ease)}
.lb button:hover{background:var(--crimson)}
.lb .lb-close{top:1.4rem;right:1.4rem}
.lb .lb-prev{left:1.4rem;top:50%;translate:0 -50%}
.lb .lb-next{right:1.4rem;top:50%;translate:0 -50%}
.gallery figure,.hof .pic{cursor:zoom-in}

/* ── tilt ────────────────────────────────────────────────────────────────
   Pointer-tracked rotation, capped low. Above about 8° it stops reading as
   depth and starts reading as a gimmick. */
.tilt{transform-style:preserve-3d;transition:transform .5s var(--ease)}
.tilt.is-tilting{transition:transform .08s linear}

/* ── page hero (secondary pages) ─────────────────────────────────────────
   Initiate's page-hero: shorter than the home hero, video behind, title and
   lede stacked left, a mono kicker above. */
.page-hero{position:relative;min-height:78svh;display:grid;align-content:end;gap:1.1rem;
  padding:9rem var(--gutter) clamp(2.5rem,6vh,4rem);isolation:isolate;overflow:hidden}
.page-hero>video,.page-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(11,9,10,.72),rgba(11,9,10,.35) 45%,var(--ink))}
.page-hero h1{font-size:clamp(1.9rem,5vw,4.4rem);line-height:.94;letter-spacing:-.022em;max-width:20ch;overflow-wrap:normal;hyphens:none}
.page-hero .lede{max-width:56ch}
.page-hero .kicker{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}