/* ==========================================================================
   Sacred Lasers — design system
   Built to JD3's design language: bone-on-black, condensed gothic display,
   photography carries the colour. Deliberately avoids the Impeccable
   anti-patterns that flagged on the Squarespace build:
     gradient-text · ai-color-palette (cyan-on-dark) · dark-glow · bounce-easing
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Surface. Near-black, not pure #000, so real black photography reads as
     an intentional edge rather than blending into the page. */
  --ink:            #050505;
  --ink-raised:     #121212;
  --panel:          rgba(33, 33, 33, 0.6);
  --hairline:       rgba(237, 226, 226, 0.14);
  --hairline-solid: #262626;

  /* Type. Warm bone rather than pure white — softer against photography and
     the single most characteristic JD3 move. */
  --bone:        #ede2e2;
  --bone-dim:    rgba(237, 226, 226, 0.66);
  --bone-faint:  rgba(237, 226, 226, 0.44);

  /* One accent, used sparingly and never as a gradient or a glow. */
  --accent:      #ede2e2;
  --accent-ink:  #050505;

  --font-display: "Special Gothic Expanded One", "Special Gothic",
                  "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Rethink Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type scale — ratios stay above 1.25 between steps so the hierarchy never
     reads flat. Fluid so the jump survives down to phone widths. */
  --step-display: clamp(3.25rem, 9vw, 5.6rem);   /* ~52 → 90px  */
  --step-h2:      clamp(2.25rem, 6vw, 4.25rem);  /* ~36 → 68px  */
  --step-h3:      clamp(1.5rem, 3vw, 2.25rem);   /* ~24 → 36px  */
  --step-h4:      1.2rem;                        /* 19.2px      */
  --step-body:    1.0625rem;                     /* 17px        */
  --step-small:   0.9375rem;                     /* 15px — never below 12 */

  --measure: 68ch;

  --gap-xs: 0.5rem;
  --gap-s:  1rem;
  --gap-m:  2rem;
  --gap-l:  4rem;
  --gap-xl: 7rem;

  --shell: 1440px;
  --pad:   clamp(1.25rem, 5vw, 4.5rem);

  /* Exponential easing. Real objects decelerate; nothing here bounces. */
  --ease: cubic-bezier(0.165, 0.84, 0.44, 1);
  --dur:  0.4s;
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.005em;   /* restrained — no extreme negative tracking */
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--step-display); }
h2 { font-size: var(--step-h2); }
h3 { font-size: var(--step-h3); line-height: 1.05; }
h4 { font-size: var(--step-h4); line-height: 1.2; letter-spacing: 0.01em; }

p { margin: 0 0 1.15em; max-width: var(--measure); }

a { color: inherit; text-underline-offset: 0.22em; }

/* --- Layout ------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section { padding-block: var(--gap-xl); }
.section--tight { padding-block: var(--gap-l); }

/* Varied rhythm — equal spacing everywhere reads mechanical. */
.section + .section { padding-top: calc(var(--gap-xl) * 0.72); }

.rule { height: 1px; background: var(--hairline); border: 0; margin: 0; }

/* --- Skip link ---------------------------------------------------------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--bone); color: var(--ink);
  padding: 0.75rem 1.25rem; font-weight: 600;
}
.skip:focus { left: 0; }

/* --- Header ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(5, 5, 5, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap-m);
  min-height: 76px;
}

.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.brand img { width: 42px; height: auto; }
/* The logo artwork is black; invert it to read on the dark surface. */
.brand img.is-inverted { filter: invert(1); }
.brand__word {
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.02em;
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }

.nav a {
  font-size: var(--step-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--bone-dim);
  padding-block: 0.5rem;
  transition: color var(--dur) var(--ease);
}
.nav a:hover,
.nav a[aria-current="page"] { color: var(--bone); }

.nav__cta {
  color: var(--accent-ink) !important;
  background: var(--accent);
  padding: 0.6rem 1.15rem;
  border-radius: 2px;
}

.nav-toggle { display: none; }

/* --- Buttons ------------------------------------------------------------ */
/* Flat, high-contrast, no gradient fill and no coloured halo. */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-body);
  font-size: var(--step-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  padding: 1rem 1.9rem;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.btn--primary { background: var(--bone); color: var(--ink); }
.btn--primary:hover { background: #fff; transform: translateY(-2px); }

.btn--ghost { border-color: var(--hairline); color: var(--bone); }
.btn--ghost:hover { border-color: var(--bone); background: rgba(237, 226, 226, 0.06); }

/* --- Hero --------------------------------------------------------------- */
.hero { position: relative; min-height: min(88vh, 860px); display: grid; }

.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Flat scrim, not a coloured radial spotlight. Guarantees text contrast. */
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
              rgba(5, 5, 5, 0.55) 0%,
              rgba(5, 5, 5, 0.45) 45%,
              rgba(5, 5, 5, 0.92) 100%);
}

.hero__body {
  position: relative;
  align-self: end;
  padding-bottom: var(--gap-xl);
  width: 100%;
}

/* Wide enough that the line breaks fall where the copy says they do,
   not wherever the balancer decides. */
.hero h1 { max-width: 24ch; text-wrap: pretty; }

.hero__lede {
  margin-top: var(--gap-m);
  font-size: 1.15rem;
  color: var(--bone-dim);
  max-width: 46ch;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--gap-s); margin-top: var(--gap-m); }

/* --- Section heads ------------------------------------------------------ */
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--gap-m); flex-wrap: wrap;
  margin-bottom: var(--gap-l);
}
.section-head p { color: var(--bone-dim); margin: 0; max-width: 52ch; }

/* --- Package / card grid ------------------------------------------------ */
/* Single-level cards — no card nested inside another card. */
.grid { display: grid; gap: var(--gap-m); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.card { display: flex; flex-direction: column; text-decoration: none; }

.card__media {
  overflow: hidden;
  background: var(--ink-raised);
  aspect-ratio: 4 / 3;
  margin-bottom: 1.25rem;
}
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.card:hover .card__media img { transform: scale(1.03); }

.card h3 { margin-bottom: 0.6rem; }
.card p { color: var(--bone-dim); font-size: var(--step-small); margin: 0; }

/* --- Gallery ------------------------------------------------------------ */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2px; }
.tile { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--ink-raised); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.tile:hover img { transform: scale(1.04); }

.tile__label {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 1.5rem 1.25rem 1.1rem;
  background: linear-gradient(180deg, transparent, rgba(5, 5, 5, 0.85));
  font-family: var(--font-display);
  font-size: 1rem; text-transform: uppercase; letter-spacing: 0.02em;
}

/* --- Split ------------------------------------------------------------- */
.split { display: grid; gap: var(--gap-l); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1.1fr 1fr; gap: var(--gap-xl); } }

/* --- Forms -------------------------------------------------------------- */
.field { margin-bottom: 1.25rem; }
.field label {
  display: block; margin-bottom: 0.5rem;
  font-size: var(--step-small); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--bone-dim);
}
.field input, .field textarea, .field select {
  width: 100%;
  background: var(--ink-raised);
  border: 1px solid var(--hairline);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: var(--step-body);
  padding: 0.9rem 1rem;
  border-radius: 2px;
  transition: border-color var(--dur) var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--bone);
}
.field textarea { min-height: 160px; resize: vertical; }

:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }

/* --- Contact meta ------------------------------------------------------- */
.meta-list { list-style: none; margin: 0; padding: 0; }
.meta-list li { padding-block: 1rem; border-bottom: 1px solid var(--hairline); }
.meta-list a { color: var(--bone); }
.meta-list .k {
  display: block; font-size: 0.8125rem; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--bone-faint); margin-bottom: 0.35rem;
}

/* --- Footer ------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--hairline); padding-block: var(--gap-l) var(--gap-m); }

.footer-grid {
  display: grid; gap: var(--gap-l);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: var(--gap-l);
}

/* Footer column labels are h3 so the outline never skips a level; they are
   styled down to label size rather than demoted semantically. */
.footer-grid h3 {
  font-size: 0.875rem; line-height: 1.2; letter-spacing: 0.1em;
  color: var(--bone-faint); margin-bottom: 1.25rem;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.icon-row { display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: center; }
/* Plain white marks. No per-icon hue-rotate filter chain. */
.icon-row img {
  width: 26px; height: 26px;
  filter: invert(1);
  opacity: 0.66;
  transition: opacity var(--dur) var(--ease);
}
.icon-row a:hover img { opacity: 1; }

.partner-row { display: flex; flex-wrap: wrap; gap: 1.75rem; align-items: center; }
.partner-row img { max-height: 26px; width: auto; filter: invert(1); opacity: 0.5;
                   transition: opacity var(--dur) var(--ease); }
.partner-row a:hover img { opacity: 0.9; }

.colophon {
  display: flex; justify-content: space-between; gap: var(--gap-s); flex-wrap: wrap;
  padding-top: var(--gap-m); border-top: 1px solid var(--hairline);
  font-size: var(--step-small); color: var(--bone-faint);
}
.colophon a { color: var(--bone-faint); }
.colophon a:hover { color: var(--bone); }

/* --- Mobile nav --------------------------------------------------------- */
@media (max-width: 860px) {
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 1px solid var(--hairline); color: var(--bone);
    width: 44px; height: 44px; border-radius: 2px; cursor: pointer;
  }
  .nav {
    /* Fill the whole viewport below the header so page content never shows
       through behind the open menu. The header's backdrop-filter makes it the
       containing block for fixed descendants, so `bottom: 0` would collapse —
       use an explicit height instead. */
    position: fixed; inset: 76px 0 auto 0;
    height: calc(100svh - 76px);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink);
    padding: var(--pad);
    padding-bottom: calc(var(--pad) + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    display: none;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding-block: 1rem; border-bottom: 1px solid var(--hairline); font-size: 1.05rem; }
  .nav__cta { text-align: center; margin-top: var(--gap-s); border-bottom: 0; }
}

/* --- Motion ------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal[data-shown="true"] {
  opacity: 1; transform: none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Motion layer
   Modelled on JD3's scroll behaviour: a pinned hero, blur-to-sharp entrances,
   images that settle from oversize, and staggered reveals.

   Built on CSS scroll-driven animations (animation-timeline). Where the
   browser doesn't support them, or the visitor prefers reduced motion,
   everything is simply visible and static — content is never hidden at rest.
   ========================================================================== */

/* --- Pinned hero -------------------------------------------------------- */
.hero-scroll { position: relative; height: 210vh; }

.hero-pin {
  position: sticky; top: 0;
  height: 100vh; min-height: 560px;
  display: grid; overflow: hidden;
}

.hero-pin .hero__media { position: absolute; inset: 0; }
.hero-pin .hero__media img { width: 100%; height: 100%; object-fit: cover; }

.hero-pin .hero__body {
  position: relative; align-self: end;
  width: 100%; padding-bottom: clamp(3rem, 9vh, 7rem);
}

/* --- Keyframes ---------------------------------------------------------- */
@keyframes settle {          /* oversize → true size */
  from { transform: scale(1.28); }
  to   { transform: scale(1); }
}
@keyframes resolve {         /* JD3's blur-in */
  from { opacity: 0; filter: blur(18px); transform: scale(1.06) translateY(14px); }
  to   { opacity: 1; filter: blur(0);    transform: none; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(34px); }
  to   { opacity: 1; transform: none; }
}
@keyframes drift {           /* slow parallax push while pinned */
  from { transform: scale(1) translateY(0); }
  to   { transform: scale(1.16) translateY(-3%); }
}
@keyframes recede {          /* hero copy leaves as you scroll past */
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-40px); filter: blur(6px); }
}

/* --- Applied only where supported, and only if motion is welcome -------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* The hero's animations are driven by the hero track itself, not the
       whole page — so timing is identical however long the page below is. */
    .hero-scroll { view-timeline: --hero block; }

    /* Hero photo drifts for the whole pinned run. */
    .hero-pin .hero__media img {
      animation: drift linear both;
      animation-timeline: --hero;
      animation-range: cover 0% cover 100%;
      transform-origin: 50% 60%;
    }

    /* Lede + buttons resolve in on load (headline lines use the mask). */
    .hero-pin .hero__lede,
    .hero-pin .hero__actions {
      animation: resolve 1s var(--ease) both;
    }
    .hero-pin .hero__lede    { animation-delay: 0.34s; }
    .hero-pin .hero__actions { animation-delay: 0.46s; }

    /* The composition recedes during the last stretch of the pin. */
    .hero-pin .hero__body {
      animation: recede linear both;
      animation-timeline: --hero;
      animation-range: cover 58% cover 92%;
    }

    /* Everything below reveals on entry. */
    .reveal {
      animation: rise 0.9s var(--ease) both;
      animation-timeline: view();
      animation-range: entry 0% entry 62%;
    }

    /* Photos settle from oversize as they come up. */
    .card__media img,
    .tile img,
    .figure-tilt img {
      animation: settle linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 55%;
    }

    /* Stagger within a row. */
    .grid > *:nth-child(2) .card__media img { animation-delay: 0.04s; }
    .grid > *:nth-child(3) .card__media img { animation-delay: 0.08s; }
  }
}

/* --- Editorial layout --------------------------------------------------- */
/* Alternating offsets and a slight tilt — the thing that stops a page
   reading like a stack of equal boxes. */
.grid--3 > .card:nth-child(even) { margin-top: clamp(0rem, 5vw, 4.5rem); }

.figure-tilt { transform: rotate(-2.4deg); }
.figure-tilt:nth-of-type(even) { transform: rotate(1.8deg); }

.section-head--stack { display: block; }
.section-head--stack h2 { max-width: 16ch; margin-bottom: var(--gap-s); }

.lead-in {
  font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bone-faint); margin-bottom: 1.25rem; display: block;
}

.count {
  font-family: var(--font-display); font-size: 0.9rem;
  color: var(--bone-faint); letter-spacing: 0.04em;
}

/* Full-bleed band that breaks the container rhythm. */
.band { position: relative; overflow: hidden; }
.band img { width: 100%; height: clamp(340px, 52vh, 620px); object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  .hero-scroll { height: auto; }
  .hero-pin { position: relative; height: auto; min-height: 78vh; }
  .figure-tilt, .figure-tilt:nth-of-type(even) { transform: none; }
}

/* ==========================================================================
   V2 components — statement pieces
   ========================================================================== */

/* Cross-page fades via the View Transitions API — free, no JS. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

::selection { background: var(--bone); color: var(--ink); }

/* --- Masked headline reveal --------------------------------------------- */
.masked .line { display: block; overflow: hidden; }
.masked .line__inner { display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes line-up {
    from { transform: translateY(110%); }
    to   { transform: translateY(0); }
  }
  .masked .line__inner {
    animation: line-up 0.9s var(--ease) both;
    animation-delay: calc(0.09s + var(--i, 0) * 0.11s);
  }
}

/* --- Manifesto ----------------------------------------------------------- */
.manifesto {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  line-height: 1.32;
  max-width: 30ch;
  margin: 0;
  color: var(--bone);
}

/* --- Sticky-stacking work cards ----------------------------------------- */
.stack { display: grid; gap: var(--gap-m); }

.stack-card {
  position: sticky;
  top: calc(86px + var(--n, 0) * 14px);
  display: grid;
  grid-template-columns: 1fr;
  background: var(--ink-raised);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  overflow: hidden;
  min-height: min(66vh, 620px);
}
@media (min-width: 860px) {
  .stack-card { grid-template-columns: 1.35fr 1fr; }
}

.stack-card__media { position: relative; min-height: 300px; }
.stack-card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}

.stack-card__copy {
  align-self: end;
  padding: clamp(1.5rem, 3vw, 3rem);
}
.stack-card__copy h3 { margin-bottom: 0.75rem; }
.stack-card__copy p { color: var(--bone-dim); margin: 0; }

/* Breathing room below the stack so the last card can un-stick. */
.stack { padding-bottom: var(--gap-l); }

/* --- Alternating feature rows -------------------------------------------- */
.features { display: grid; gap: var(--gap-xl); }

.feature {
  display: grid; gap: var(--gap-m);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 860px) {
  .feature { grid-template-columns: 1.2fr 1fr; gap: var(--gap-xl); }
  .feature--flip .feature__media { order: 2; }
  /* slight vertical offset so rows don't sit on one axis */
  .feature--flip { transform: translateY(clamp(0px, 2vw, 26px)); }
}

.feature__media { overflow: hidden; border-radius: 4px; aspect-ratio: 4 / 3; }
.feature__media img { width: 100%; height: 100%; object-fit: cover; }

.feature__copy h3 { margin-bottom: 1rem; }
.feature__copy p { color: var(--bone-dim); margin: 0; max-width: 44ch; }

/* --- Parallax band -------------------------------------------------------- */
.band { position: relative; overflow: hidden; }
.band img {
  width: 100%;
  height: clamp(380px, 62vh, 700px);
  object-fit: cover;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes band-parallax {
      from { transform: scale(1.18) translateY(-4%); }
      to   { transform: scale(1.18) translateY(4%); }
    }
    .band img {
      animation: band-parallax linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}

/* --- Giant outro ---------------------------------------------------------- */
.outro {
  padding-block: var(--gap-xl) calc(var(--gap-xl) * 1.1);
  border-top: 1px solid var(--hairline);
}
.outro__title {
  font-size: clamp(3rem, 10vw, 7.5rem);
  line-height: 0.92;
  margin-bottom: var(--gap-l);
  max-width: 12ch;
}

/* --- Footer partner logos ------------------------------------------------- */
.partner-row img {
  max-height: 30px; width: auto;
  filter: grayscale(1) invert(1) brightness(1.4);
  opacity: 0.55;
  transition: opacity var(--dur) var(--ease);
}
.partner-row a:hover img { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .stack-card { position: relative; top: auto; }
  .feature--flip { transform: none; }
}

/* ==========================================================================
   Page-open sequence
   JD3's recorded entrance, rebuilt: a curtain lifts off the page, the hero
   photo resolves from blur(20px)/scale(1.1), then the headline lines rise.
   Pure CSS; skipped entirely under reduced motion.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  @keyframes curtain-lift {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-101%); }
  }
  body::after {
    content: "";
    position: fixed; inset: 0; z-index: 200;
    background: var(--ink);
    pointer-events: none;
    animation: curtain-lift 0.85s cubic-bezier(0.77, 0, 0.175, 1) 0.3s both;
  }

  @keyframes hero-open {
    from { opacity: 0; filter: blur(20px); transform: scale(1.1); }
    to   { opacity: 1; filter: blur(0);    transform: scale(1); }
  }
  /* Runs once on load; the scroll-driven drift takes over from scale(1). */
  .hero-pin .hero__media { animation: hero-open 1.3s var(--ease) 0.25s both; }

  /* Headline waits for the curtain. */
  .masked .line__inner {
    animation-delay: calc(0.75s + var(--i, 0) * 0.12s);
  }
  .hero-pin .hero__lede    { animation-delay: 1.05s; }
  .hero-pin .hero__actions { animation-delay: 1.18s; }
}

/* ==========================================================================
   Alignment + rhythm pass
   ========================================================================== */

/* One horizontal grid: header, hero copy, sections and footer all sit on
   the same --pad rail via .shell. Hero bottom aligns to the same unit. */
.hero-pin .hero__body { padding-bottom: calc(var(--pad) * 1.1); }

/* One radius token everywhere an image sits in a container. */
:root { --radius: 4px; }
.card__media, .feature__media, .stack-card, .tile, .band--inset { border-radius: var(--radius); }

/* Gallery tiles: consistent gutter, aligned to the shell rail. */
.tiles { gap: var(--gap-s); }
.tile { border-radius: var(--radius); }

/* Header: fixed height, vertically centered content, consistent on all pages. */
.site-header__inner { min-height: 80px; }
.brand img { width: 40px; height: 40px; object-fit: contain; }

/* Footer: clearer rhythm — more air above, tighter internal spacing,
   consistent icon sizing, everything on the shell rail. */
.site-footer { padding-block: calc(var(--gap-xl) * 0.85) var(--gap-m); }
.footer-grid { gap: var(--gap-l) var(--gap-m); margin-bottom: calc(var(--gap-l) * 0.9); }
.icon-row { gap: 1rem; }
.icon-row img { width: 24px; height: 24px; }
.partner-row { gap: 1.5rem; }
.partner-row img { max-height: 28px; }
.meta-list li { padding-block: 0.85rem; }
.meta-list li:first-child { padding-top: 0; }

/* Sticky-stack cards butt cleanly against the section head above them. */
.stack { row-gap: var(--gap-m); }
.stack-card__media { min-height: clamp(260px, 40vh, 420px); }

/* ==========================================================================
   Gallery mosaic + lightbox
   ========================================================================== */

/* Dense editorial grid: most tiles are square-ish, but a repeating pattern
   promotes some to wide or tall so the wall reads as composed, not boxed. */
.mosaic {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-rows: 240px;
  grid-auto-flow: dense;
  gap: var(--gap-s);
}
.mosaic__tile { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); }
.mosaic__tile:nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; }
.mosaic__tile:nth-child(6n + 4) { grid-row: span 2; }
.mosaic__tile:nth-child(8n + 6) { grid-column: span 2; }
@media (max-width: 640px) {
  .mosaic { grid-auto-rows: 180px; }
  .mosaic__tile:nth-child(n) { grid-column: auto; grid-row: auto; }
  .mosaic__tile:nth-child(3n + 1) { grid-row: span 2; }
}

.mosaic__open {
  display: block; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: zoom-in;
}
.mosaic__open img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.mosaic__tile:hover .mosaic__open img { transform: scale(1.03); }

.mosaic .tile__label { pointer-events: none; }

/* Photos settle on entry, same as the rest of the site. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .mosaic__open img {
      animation: settle linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
    }
  }
}

/* --- Lightbox ------------------------------------------------------------ */
.lightbox {
  border: 0; padding: 0; margin: auto;
  width: min(94vw, 1500px); height: min(92vh, 1000px);
  background: transparent;
}
.lightbox::backdrop { background: rgba(5, 5, 5, 0.92); backdrop-filter: blur(6px); }

.lightbox figure {
  margin: 0; width: 100%; height: 100%;
  display: grid; grid-template-rows: 1fr auto; gap: 0.75rem;
}
.lightbox img {
  width: 100%; height: 100%; object-fit: contain;
}
.lightbox figcaption {
  text-align: center;
  font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--bone); font-size: 1rem;
  padding-bottom: 0.5rem;
}

.lightbox__close,
.lightbox__nav {
  position: fixed; z-index: 5;
  background: rgba(18, 18, 18, 0.8);
  border: 1px solid var(--hairline);
  color: var(--bone);
  width: 52px; height: 52px; border-radius: 50%;
  font-size: 1.3rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lightbox__close:hover, .lightbox__nav:hover { background: var(--ink-raised); border-color: var(--bone); }
.lightbox__close { top: 1.25rem; right: 1.25rem; }
.lightbox__nav--prev { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 1.25rem; top: 50%; transform: translateY(-50%); }

@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] figure { animation: resolve 0.45s var(--ease) both; }
}

/* ==========================================================================
   Footer scale correction — labels and marks were undersized for the space
   ========================================================================== */
.footer-grid h3 { font-size: 1rem; margin-bottom: 1.5rem; }
.icon-row { gap: 1.25rem; }
.icon-row img { width: 34px; height: 34px; }
.partner-row { gap: 2rem; align-items: center; }
.partner-row img { max-height: 44px; max-width: 150px; object-fit: contain; }
.meta-list { font-size: 1.05rem; }

/* ==========================================================================
   Gallery v3 — cinematic sequence
   ========================================================================== */

/* --- Full-viewport stacking panels --------------------------------------- */
.panels { position: relative; }

.panel {
  position: sticky; top: 0;
  height: 100vh; min-height: 540px;
  overflow: hidden;
}
.panel__open {
  display: block; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: zoom-in;
}
.panel__open img {
  width: 100%; height: 100%; object-fit: cover;
}
/* Scrim so the caption always reads. */
.panel::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5,5,5,0.25) 0%, transparent 35%,
              transparent 55%, rgba(5,5,5,0.78) 100%);
}
.panel__meta {
  position: absolute; inset-inline: 0; bottom: 0;
  padding-bottom: clamp(2rem, 6vh, 4rem);
  pointer-events: none;
  z-index: 2;
}
.panel__index {
  display: block;
  font-family: var(--font-body); font-weight: 600;
  font-size: 0.8125rem; letter-spacing: 0.14em;
  color: var(--bone-dim); margin-bottom: 0.75rem;
}
.panel__meta h2 { font-size: clamp(1.75rem, 4.5vw, 3.25rem); }

/* Each incoming panel's photo settles as it takes the screen. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .panel__open img {
      animation: settle linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
    .panel__meta {
      animation: rise 0.1s linear both;
      animation-timeline: view();
      animation-range: entry 60% entry 95%;
    }
  }
}

/* --- Horizontal film strip ------------------------------------------------ */
/* Base version (all browsers, touch): a snap-scrolling horizontal row. */
.hstrip__pin { position: relative; padding-block: var(--gap-l); }
.hstrip__head { margin-bottom: var(--gap-m); }

.hstrip__track {
  display: flex; gap: var(--gap-m);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: var(--pad);
  scrollbar-width: none;
}
.hstrip__track::-webkit-scrollbar { display: none; }

.strip__item { flex: 0 0 auto; margin: 0; scroll-snap-align: center; }
.strip__open {
  display: block; padding: 0; border: 0; background: none; cursor: zoom-in;
  height: min(62vh, 560px);
  overflow: hidden; border-radius: var(--radius);
}
.strip__open img {
  height: 100%; width: auto; max-width: 82vw;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.strip__item:hover .strip__open img { transform: scale(1.02); }
.strip__item figcaption {
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--bone-dim);
}

/* Enhanced version: vertical scroll scrubs the strip sideways. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 861px) {
    .hstrip { height: 280vh; view-timeline: --strip block; }
    .hstrip__pin {
      position: sticky; top: 0;
      height: 100vh; min-height: 540px;
      display: grid; align-content: center; gap: var(--gap-m);
      overflow: hidden;
      padding-block: 0;
    }
    @keyframes strip-scrub {
      from { transform: translateX(0); }
      to   { transform: translateX(calc(-100% + 100vw - var(--pad) * 2)); }
    }
    .hstrip__track {
      overflow: visible;
      scroll-snap-type: none;
      width: max-content;
      animation: strip-scrub linear both;
      animation-timeline: --strip;
      animation-range: cover 12% cover 88%;
    }
  }
}

/* Legacy mosaic styles stay for any future page that wants a grid. */

/* ==========================================================================
   Mobile engineering pass
   ========================================================================== */

/* Small-viewport units: 100vh overshoots on phones while the browser chrome
   is visible. svh tracks the real visible height, so pinned sections never
   hide their captions behind the URL bar. vh stays as the fallback. */
.hero-pin { height: 100vh; height: 100svh; }
.panel { height: 100vh; height: 100svh; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 861px) {
    .hstrip__pin { height: 100vh; height: 100svh; }
  }
}

/* Phones: no pinned hero at all. A pin runway makes the first thumb-scroll
   feel stuck (the page "doesn't move" until the runway is spent), so the hero
   is exactly one screen and scrolls away like everything else. */
@media (max-width: 640px) {
  :root { --gap-xl: 4rem; --gap-l: 2.75rem; }   /* tighter vertical rhythm */

  .hero-scroll { height: auto; }
  .hero-pin { position: relative; min-height: auto; }
  .hero-pin .hero__body { padding-bottom: clamp(2rem, 6vh, 3.5rem); }

  .section-head { margin-bottom: var(--gap-m); }
  .features { gap: var(--gap-l); }
  .stack { padding-bottom: var(--gap-m); }
  .outro { padding-block: var(--gap-l) calc(var(--gap-l) * 1.3); }
  .outro__title { font-size: clamp(2.5rem, 13vw, 4rem); margin-bottom: var(--gap-m); }

  .hstrip { height: auto; }             /* strip is swipeable on touch anyway */
  .stack-card { top: calc(70px + var(--n, 0) * 8px); min-height: auto; }
  .stack-card__media { min-height: 230px; }
  .lightbox__nav { width: 44px; height: 44px; }
  .lightbox__nav--prev { left: 0.5rem; }
  .lightbox__nav--next { right: 0.5rem; }
}

.aside-img { margin-bottom: var(--gap-m); }

/* Grid children may not shrink below their content's intrinsic width by
   default — a full-res <img> in a column silently forces the whole page
   wider than the screen. Cap both. */
.split > * { min-width: 0; }
.split aside img { width: 100%; height: auto; }