/* ==========================================================================
   Self-hosted webfonts

   Instrument Serif, Inter and JetBrains Mono, all SIL Open Font License 1.1,
   which permits redistribution. Served from this domain rather than from
   Google so no visitor IP address is sent to a third party and no consent
   banner is needed. Latin and Latin Extended subsets only.

   Inter and JetBrains Mono are variable fonts: every weight below is served
   by one file, so the extra weights cost no extra download.
   ========================================================================== */

@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/instrument-serif-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/instrument-serif-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/instrument-serif-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/instrument-serif-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   THINKING COLLECTIVE — Design System
   Palette: North Atlantic green + matte ivory
   Deliberately distinct from client work in the portfolio (Kinesis, Sushi Dojo)
   ========================================================================== */

:root {
  /* --- Ground: matte ivory cream (primary) ------------------------------- */
  --ground:      #F4EFE3;  /* page ground                                   */
  --ground-2:    #EBE3D2;  /* alternating band, quiet fills                 */
  --surface:     #EBE3D2;  /* cards, panels, raised surfaces                */
  --surface-hi:  #E2D9C4;  /* hover / active surface                        */
  --line:        #DDD4C1;  /* decorative hairline (carries no meaning)      */
  --line-strong: #6E8A7E;  /* meaningful borders          3.27:1 on ground  */

  /* --- Figure: North Atlantic green (text + highlight) -------------------- */
  --ink:         #07302A;  /* primary type               12.49:1 on ground  */
  --ink-2:       #2C544A;  /* secondary type              7.40:1 on ground  */
  --muted:       #496B60;  /* meta, captions              5.15:1 on ground  */

  /* --- Accents ----------------------------------------------------------- */
  --accent:      #0B5F49;  /* links, focus, ORGANIC tag   6.66:1 on ground  */
  --ai:          #7A5A12;  /* AI tag, placeholder flags   5.55:1 on ground  */

  /* Artwork mount. Fixed white in every context so client work is never
     tinted by the section it happens to sit in. */
  --plate:       #FFFFFF;

  /* --- Type -------------------------------------------------------------- */
  --display: 'Instrument Serif', 'Times New Roman', Times, serif;
  --sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid type scale */
  --t-mega:  clamp(3rem, 9vw, 8.5rem);
  --t-h1:    clamp(2.5rem, 6.5vw, 5.5rem);
  --t-h2:    clamp(2rem, 4.4vw, 3.5rem);
  --t-h3:    clamp(1.375rem, 2.2vw, 1.875rem);
  --t-h4:    clamp(1.125rem, 1.5vw, 1.3125rem);
  --t-lede:  clamp(1.0625rem, 1.6vw, 1.375rem);
  --t-body:  1rem;
  --t-sm:    0.9375rem;
  --t-meta:  0.75rem;

  /* --- Space (4/8 rhythm) ------------------------------------------------ */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;
  --section: clamp(72px, 11vw, 148px);
  --gut:     clamp(20px, 5vw, 64px);
  --maxw:    1280px;
  --readw:   64ch;

  /* --- Motion ------------------------------------------------------------ */
  --e-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --e-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast:  180ms;
  --d-base:  280ms;
  --d-slow:  620ms;

  /* --- Layering ----------------------------------------------------------- */
  --z-base: 0; --z-raised: 10; --z-sticky: 40; --z-overlay: 100; --z-top: 1000;

  --radius: 3px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sticky header clearance for in-page anchors */
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* Long tokens (URLs, IDs) reflow rather than blowing out the layout */
.wrap-any { overflow-wrap: anywhere; }

/* --- Focus: visible, high contrast, never removed ------------------------ */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: var(--z-top);
  background: var(--accent);
  color: var(--ground);
  padding: var(--s-3) var(--s-5);
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: top var(--d-fast) var(--e-out);
}
.skip-link:focus { top: var(--s-4); }

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: clamp(48px, 7vw, 88px); }
.section--invert { background: var(--ground); color: var(--ink); }

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

/* Inverted surfaces — green bands and the footer.
   These redefine the palette tokens rather than restyling each component, so
   everything nested inside adapts on its own and stays AA-compliant. */
.section--invert,
.footer,
.masthead .nav[data-open="true"] {
  --ground:      #072A23;
  --ground-2:    #041915;
  --surface:     #0C3B31;
  --surface-hi:  #114A3D;
  --line:        #1B5346;
  --line-strong: #9CC2B2;
  --ink:         #F4EFE3;   /* 13.41:1 on the green ground */
  --ink-2:       #DCD5C4;   /* 10.52:1 */
  --muted:       #9CC2B2;   /*  7.90:1 */
  --accent:      #69D3A8;   /*  8.42:1 */
  --ai:          #D8B26A;   /*  7.69:1 */
}

/* A deeper ground, for when an inverted band sits directly against another. */
.section--deep { --ground: #041915; }

/* Section heading pattern: eyebrow / title / lede ------------------------- */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--s-5);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--muted);
  flex: none;
}
.section--invert .eyebrow::before { background: var(--muted); }

.sec-head { max-width: 44ch; margin-bottom: clamp(40px, 5vw, 72px); }
.sec-head h2 { font-size: var(--t-h2); }
.sec-head .lede { margin-top: var(--s-5); }

.lede {
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 58ch;
}

.muted { color: var(--muted); }

/* ==========================================================================
   Header / navigation
   ========================================================================== */

.masthead {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 72px;
}

.brandmark {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  font-family: var(--display);
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}
.brandmark__glyph { flex: none; }
.brandmark__glyph circle, .brandmark__glyph path { transition: stroke var(--d-base) var(--e-out); }
.brandmark:hover .brandmark__glyph circle { stroke: var(--accent); }

.nav { display: flex; align-items: center; gap: clamp(var(--s-5), 2.5vw, var(--s-7)); }

.nav a {
  font-size: var(--t-sm);
  color: var(--ink-2);
  padding: var(--s-3) 0;
  position: relative;
  transition: color var(--d-fast) var(--e-out);
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 6px;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-base) var(--e-out);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--muted); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--muted);
  color: var(--ink);
  border-radius: var(--radius);
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--d-fast) var(--e-out);
}
.nav-toggle:hover { background: var(--surface); }

/* ==========================================================================
   Buttons & links
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 48px;
  padding: var(--s-3) var(--s-6);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--d-base) var(--e-out),
              color var(--d-base) var(--e-out),
              border-color var(--d-base) var(--e-out),
              transform var(--d-fast) var(--e-out);
}
.btn:active { transform: scale(0.98); }

.btn--solid { background: var(--accent); color: var(--ground); }
.btn--solid:hover { background: var(--ink); }

.btn--ghost { border-color: var(--muted); color: var(--ink); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--surface); }


.btn svg { flex: none; transition: transform var(--d-base) var(--e-out); }
.btn:hover svg { transform: translateX(3px); }

/* Inline text link */
.tlink {
  color: var(--accent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  /* Vertical padding does not shift inline layout but does grow the hit area
     past the 24px pointer-target minimum. */
  padding-block: 3px;
  transition: border-color var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}
.tlink:hover { border-color: var(--accent); color: var(--ink); }

/* ==========================================================================
   Hero
   ========================================================================== */

/* Full-bleed image band. The photograph is a studio-produced environment
   plate carrying no client branding, so it reads as atmosphere rather than as
   someone else's campaign. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(72px, 11vw, 152px) clamp(56px, 7vw, 104px);
  min-height: clamp(520px, 76vh, 860px);
  display: flex;
  align-items: center;
}

.hero__inner { width: 100%; }

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../assets/img/hero-room.jpg") center 42% / cover no-repeat;
}

/* Cream veil. Its job is warming the cool photograph into the brand palette,
   not rescuing legibility: the darkest pixel behind the headline already gives
   6.3:1 against --ink unveiled, so this stays light and lets the room read. */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(101deg,
      color-mix(in srgb, var(--ground) 62%, transparent) 0%,
      color-mix(in srgb, var(--ground) 44%, transparent) 42%,
      color-mix(in srgb, var(--ground) 20%, transparent) 74%,
      color-mix(in srgb, var(--ground) 10%, transparent) 100%),
    linear-gradient(to bottom,
      color-mix(in srgb, var(--ground) 28%, transparent) 0%,
      transparent 20%,
      transparent 74%,
      var(--ground) 100%);
}

/* Narrow screens put the text over the middle of the frame, so the veil covers
   the full width instead of fading out to the right. */
@media (max-width: 860px) {
  .hero__bg::after {
    background:
      linear-gradient(to bottom,
        color-mix(in srgb, var(--ground) 58%, transparent) 0%,
        color-mix(in srgb, var(--ground) 50%, transparent) 60%,
        var(--ground) 100%);
  }
}

.hero__foot { border-top-color: var(--line-strong); }

.hero__title {
  font-size: var(--t-h1);
  max-width: 15ch;
  margin-bottom: var(--s-7);
}
.hero__title em {
  font-style: italic;
  color: var(--accent);
}

.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-7);
  padding-top: var(--s-7);
  border-top: 1px solid var(--line);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* The hero lede shares a row with the CTAs — hold it narrow enough that the
   two sit side by side at desktop instead of wrapping onto separate rows. */
.hero__foot .lede { max-width: 44ch; }

/* Featured artifact strip -------------------------------------------------- */
.strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}
.strip figure { margin: 0; }
.strip .plate { aspect-ratio: 4 / 5; }
.strip figcaption {
  margin-top: var(--s-3);
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ==========================================================================
   Utility
   ========================================================================== */

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

/* ==========================================================================
   Plate — the frame every piece of client work sits in
   Keeps warm-neutral (Kinesis) and stark b/w (Sushi Dojo) work legible
   against the studio's own green ground without either fighting it.
   ========================================================================== */

.plate {
  background: var(--plate);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(7, 48, 42, 0.14);
}
.plate img, .plate video { width: 100%; height: 100%; object-fit: cover; display: block; }
.plate--contain { padding: clamp(var(--s-5), 3vw, var(--s-8)); }
.plate--contain img { object-fit: contain; height: 100%; }
.plate--ink { background: #101010; box-shadow: inset 0 0 0 1px rgba(244, 239, 227, 0.12); }
/* For artwork supplied on a white ground — matches the mount to the file
   so the piece reads as one sheet rather than a square inside a square. */
.plate--white { background: var(--plate); }

/* ==========================================================================
   Work cards
   ========================================================================== */

.work-list { display: grid; gap: clamp(var(--s-7), 6vw, var(--s-9)); }

.work-card { display: block; position: relative; }

.work-card__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(var(--s-5), 4vw, var(--s-8));
  align-items: center;
}
.work-card:nth-child(even) .work-card__grid > .work-card__media { order: 2; }

.work-card__media { position: relative; overflow: hidden; border-radius: var(--radius); }
/* Portrait: the campaign frames are full-length figures, and a 4:3 crop
   reduces them to a torso band. */
.work-card__media .plate { aspect-ratio: 4 / 5; }
.work-card__media img {
  transition: transform var(--d-slow) var(--e-out);
}
.work-card:hover .work-card__media img,
.work-card:focus-visible .work-card__media img { transform: scale(1.035); }

.work-card__index {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.2em;
  color: var(--muted);
  display: block;
  margin-bottom: var(--s-4);
}
.work-card__title {
  font-size: var(--t-h2);
  margin-bottom: var(--s-4);
  transition: color var(--d-base) var(--e-out);
}
.work-card:hover .work-card__title { color: var(--accent); }

.tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.tag {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px var(--s-3);
  white-space: nowrap;
}

.work-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-6);
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.work-card__more svg { transition: transform var(--d-base) var(--e-out); }
.work-card:hover .work-card__more svg { transform: translateX(4px); }

/* ==========================================================================
   Method — organic vs AI (the studio's differentiator)
   ========================================================================== */

.method { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }

.method__col {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(var(--s-5), 3.2vw, var(--s-8));
  display: flex;
  flex-direction: column;
}
.method__col--organic { border-top: 2px solid var(--accent); }
.method__col--ai      { border-top: 2px solid var(--ai); }

.method__head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); }
.method__head h3 {
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
}
.method__col--organic .method__head h3, .method__col--organic .method__head svg { color: var(--accent); }
.method__col--ai .method__head h3, .method__col--ai .method__head svg { color: var(--ai); }

.method__what { font-size: var(--t-h3); font-family: var(--display); line-height: 1.15; margin-bottom: var(--s-4); }
.method__scope { color: var(--muted); font-size: var(--t-sm); margin-bottom: var(--s-6); }

.method__quality {
  border-left: 2px solid var(--line);
  padding-left: var(--s-5);
  margin-bottom: var(--s-6);
}
.method__rule { height: 1px; background: var(--line); border: 0; margin: 0 0 var(--s-5); }
.method__quality dt {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-3);
}
.method__quality dd { margin: 0; color: var(--ink-2); font-size: var(--t-sm); }
.method__quality dd strong { color: var(--ink); font-weight: 500; }

.benefits { display: grid; gap: var(--s-4); margin-top: auto; }
.benefits li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--s-3);
  font-size: var(--t-sm);
  color: var(--ink-2);
  line-height: 1.55;
}
.benefits svg { margin-top: 5px; flex: none; }
.method__col--organic .benefits svg { color: var(--accent); }
.method__col--ai .benefits svg { color: var(--ai); }

.method__note {
  margin-top: var(--s-7);
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}
.method__note p { max-width: 76ch; color: var(--ink-2); }
.method__note strong { color: var(--ink); font-weight: 500; }

/* ==========================================================================
   Asset ledger — per-project organic/AI declaration
   ========================================================================== */

.ledger { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }

.ledger__col {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}
.ledger__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ledger__col--organic .ledger__head { color: var(--accent); border-bottom-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.ledger__col--ai .ledger__head      { color: var(--ai); border-bottom-color: color-mix(in srgb, var(--ai) 35%, transparent); }
.ledger__count { margin-left: auto; color: var(--muted); letter-spacing: 0.08em; }

.ledger__list li {
  padding: var(--s-3) var(--s-5);
  font-size: var(--t-sm);
  color: var(--ink-2);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
}
.ledger__list li:last-child { border-bottom: 0; }
.ledger__list li::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  flex: none;
  transform: translateY(-2px);
}
.ledger__col--organic .ledger__list li::before { background: var(--accent); }
.ledger__col--ai .ledger__list li::before      { background: var(--ai); }

/* ==========================================================================
   Process
   ========================================================================== */

.steps { display: grid; gap: 0; border-top: 1px solid var(--line); }

.step {
  display: grid;
  grid-template-columns: 96px 1.1fr 1.4fr;
  gap: var(--s-5);
  padding-block: clamp(var(--s-5), 3vw, var(--s-7));
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.step__num {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.16em;
  color: var(--muted);
  padding-top: 8px;
}
.step__title { font-size: var(--t-h3); }
.step__body { color: var(--ink-2); font-size: var(--t-sm); max-width: 54ch; }

/* ==========================================================================
   Services
   ========================================================================== */

.services { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }

.service {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(var(--s-5), 3vw, var(--s-8));
  background: var(--surface);
}
.service__title { font-size: var(--t-h3); margin-bottom: var(--s-4); }
.service__lede { color: var(--ink-2); font-size: var(--t-sm); margin-bottom: var(--s-6); }
.service__label {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-4);
}
.service__items { display: grid; gap: var(--s-3); }
.service__items li {
  font-size: var(--t-sm);
  color: var(--ink-2);
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: var(--s-3);
  align-items: baseline;
}
.service__items li::before { content: '—'; color: var(--muted); }

.engage { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); margin-top: var(--s-6); }
.engage__item { border-top: 1px solid var(--line); padding-top: var(--s-5); }
.engage__name {
  font-family: var(--display);
  font-size: var(--t-h4);
  margin-bottom: var(--s-2);
  display: block;
}
.engage__meta {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: var(--s-3);
}
.engage__body { font-size: var(--t-sm); color: var(--ink-2); }

/* ==========================================================================
   Browser frame — a screenshot reads as a website, not a picture of one.
   ========================================================================== */

.browser {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(7, 48, 42, 0.14);
}
.section--invert .browser { box-shadow: inset 0 0 0 1px rgba(244, 239, 227, 0.16); }

.browser__bar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 10px var(--s-4);
  background: var(--surface-hi);
  border-bottom: 1px solid var(--line);
}
.browser__dots { display: flex; gap: 6px; flex: none; }
.browser__dots span {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.55;
}
.browser__url {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.browser img { display: block; width: 100%; height: auto; }

/* ==========================================================================
   Mark feature — a designer's board rather than a slide: the lockup at size,
   with the parts annotated down the side.
   ========================================================================== */

.mark-feature {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: clamp(var(--s-5), 3.5vw, var(--s-8));
  align-items: start;
}

.mark-feature__side { display: grid; gap: var(--s-6); }

.mark-note { border-left: 2px solid var(--line-strong); padding-left: var(--s-5); }
.mark-note__k {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-3);
}
.mark-note p { font-size: var(--t-sm); color: var(--ink-2); }

/* The crest sits small beside its own note, at seal scale. */
.mark-seal {
  width: clamp(96px, 12vw, 140px);
  aspect-ratio: 1 / 1;
  background: var(--plate);
  border-radius: var(--radius);
  padding: var(--s-4);
  box-shadow: inset 0 0 0 1px rgba(7, 48, 42, 0.14);
}
.mark-seal img { width: 100%; height: 100%; object-fit: contain; }

/* ==========================================================================
   Compare — two artworks set against each other so the argument between them
   is visible rather than described.
   ========================================================================== */

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--s-5), 3vw, var(--s-7)); }

.compare__item { display: flex; flex-direction: column; gap: var(--s-4); }

.compare__label {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.compare__label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.compare__item--key .compare__label { color: var(--accent); }
.compare__item--key .compare__label::after { background: color-mix(in srgb, var(--accent) 45%, transparent); }

.compare .plate { aspect-ratio: 4 / 3; }
.compare figcaption { margin-top: 0; }

/* A plain list of the ways a system breaks. */
.rules-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3) var(--s-6);
  margin: var(--s-5) 0;
}
.rules-list li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: var(--s-3);
  align-items: baseline;
  font-size: var(--t-sm);
  color: var(--ink-2);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.rules-list li::before {
  content: "";
  width: 6px; height: 1px;
  background: var(--muted);
  transform: translateY(-3px);
}

/* ==========================================================================
   Capabilities — what the studio makes, as a scannable grid rather than
   two long prose columns.
   ========================================================================== */

.caps { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }

.cap {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(var(--s-5), 3vw, var(--s-7));
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: border-color var(--d-base) var(--e-out);
}
.cap:hover { border-color: var(--accent); }

.cap__num {
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.cap__title { font-size: var(--t-h3); }
.cap__body { font-size: var(--t-sm); color: var(--ink-2); }

/* Three plain facts about delivery, given the weight of a spec sheet. */
.delivery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.delivery__k {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-3);
}
.delivery__v {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.2;
}

/* ==========================================================================
   Partners
   ========================================================================== */

.partners { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }

.partner {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(var(--s-5), 3vw, var(--s-7));
  background: var(--surface);
}
.partner__portrait {
  aspect-ratio: 1 / 1;
  width: 84px;
  border-radius: 50%;
  background: var(--surface-hi);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  margin-bottom: var(--s-5);
  color: var(--muted);
  font-family: var(--display);
  font-size: 1.5rem;
}
.partner__name { font-size: var(--t-h3); margin-bottom: var(--s-2); }
.partner__role {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: var(--s-5);
}
.partner__bio { color: var(--ink-2); font-size: var(--t-sm); }

/* Placeholder flag — remove the class once real copy is in */
.is-placeholder { position: relative; }
.is-placeholder::after {
  content: 'PLACEHOLDER';
  position: absolute;
  top: var(--s-4); right: var(--s-4);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ai);
  border: 1px dashed color-mix(in srgb, var(--ai) 55%, transparent);
  border-radius: 2px;
  padding: 3px 7px;
  pointer-events: none;
}

/* ==========================================================================
   Contact
   ========================================================================== */

.contact__title { font-size: var(--t-h1); max-width: 14ch; margin-bottom: var(--s-7); }

.contact__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
  border-top: 1px solid var(--line);
  padding-top: var(--s-7);
}
.contact__label {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: var(--s-4);
}
.contact__value {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.25;
  display: inline-block;
}
a.contact__value {
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  transition: color var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out);
}
a.contact__value:hover { color: var(--accent); border-color: var(--accent); }

/* ==========================================================================
   Footer
   ========================================================================== */

.footer { background: var(--ground); color: var(--ink); padding-block: var(--s-8) var(--s-7); }
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
  margin-top: var(--s-7);
}
.footer__note {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  color: var(--muted);
}
.footer__nav { display: flex; flex-wrap: wrap; gap: var(--s-6); }
.footer__nav a {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: var(--s-2) 0;
  transition: color var(--d-fast) var(--e-out);
}
.footer__nav a:hover { color: var(--accent); }

/* ==========================================================================
   Case study pages
   ========================================================================== */

.case-hero { padding-block: clamp(48px, 7vw, 96px) clamp(40px, 5vw, 64px); }
.case-hero__title { font-size: var(--t-h1); max-width: 13ch; margin-bottom: var(--s-6); }

.crumb {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-6);
  padding: var(--s-2) 0;
  transition: color var(--d-fast) var(--e-out);
}
.crumb:hover { color: var(--accent); }
.crumb svg { transition: transform var(--d-base) var(--e-out); }
.crumb:hover svg { transform: translateX(-3px); }

.spec {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
  border-top: 1px solid var(--line);
  padding-top: var(--s-6);
  margin-top: var(--s-7);
}
.spec dt {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-3);
}
.spec dd { margin: 0; font-size: var(--t-sm); color: var(--ink); }

/* Prose block ------------------------------------------------------------- */
.prose { max-width: var(--readw); display: grid; gap: var(--s-5); }
.prose p { color: var(--ink-2); }
.prose p.first { font-size: var(--t-lede); color: var(--ink); line-height: 1.55; }

.split {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(var(--s-6), 5vw, var(--s-9));
  align-items: start;
}

/* Figures & galleries ------------------------------------------------------ */
figure { margin: 0; }

figcaption {
  margin-top: var(--s-4);
  font-size: var(--t-sm);
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: baseline;
  max-width: 62ch;
}

/* Origin badge — every asset declares how it was made.
   Colour is supported by an icon and a text label, never carries meaning alone. */
.origin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 4px 9px;
  white-space: nowrap;
  flex: none;
}
.origin--organic { color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.origin--ai      { color: var(--ai); border: 1px solid color-mix(in srgb, var(--ai) 45%, transparent); }
.origin svg { flex: none; }

.gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-5); }
.g-3  { grid-column: span 3; }
.g-4  { grid-column: span 4; }
.g-6  { grid-column: span 6; }
.g-8  { grid-column: span 8; }
.g-12 { grid-column: span 12; }

.ratio-1   .plate { aspect-ratio: 1 / 1; }
.ratio-45  .plate { aspect-ratio: 4 / 5; }
.ratio-34  .plate { aspect-ratio: 3 / 4; }
.ratio-43  .plate { aspect-ratio: 4 / 3; }
.ratio-169 .plate { aspect-ratio: 16 / 9; }
.ratio-916 .plate { aspect-ratio: 9 / 16; }
.ratio-auto .plate { aspect-ratio: auto; }

/* Client palette swatches (case study content, not studio brand) ----------- */
.swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-4); }
.swatch__chip {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(7, 48, 42, 0.16);
}
.swatch__name {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: var(--s-3);
  display: block;
}
.swatch__hex { font-family: var(--mono); font-size: var(--t-meta); color: var(--muted); display: block; }

/* Video -------------------------------------------------------------------- */
.video-block { position: relative; border-radius: var(--radius); overflow: hidden; }
.video-block video { width: 100%; display: block; background: #101010; }
.video-fallback { margin: 0; padding: var(--s-5); background: var(--surface);
  color: var(--ink-2); font-size: var(--t-sm); }

/* Pull quote --------------------------------------------------------------- */
.pull {
  border-left: 2px solid var(--accent);
  padding-left: clamp(var(--s-5), 3vw, var(--s-7));
  max-width: 34ch;
}
.pull p { font-family: var(--display); font-size: var(--t-h3); line-height: 1.25; }
.pull cite {
  display: block;
  margin-top: var(--s-4);
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-style: normal;
}

/* Next project ------------------------------------------------------------- */
.next {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-6);
  align-items: center;
  padding-block: clamp(var(--s-7), 6vw, var(--s-9));
  border-top: 1px solid var(--line);
}
.next__label {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: var(--s-4);
}
.next__title { font-size: var(--t-h2); transition: color var(--d-base) var(--e-out); }
.next:hover .next__title { color: var(--accent); }

/* ==========================================================================
   Scroll reveal — progressive enhancement.
   Content is fully visible by default; JS opts in to the animated start state,
   so no-JS and reduced-motion users always see finished, readable content.
   ========================================================================== */

.js-reveal.reveal-ready {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
}
.js-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--d-slow) var(--e-out),
              transform var(--d-slow) var(--e-out);
  transition-delay: var(--reveal-delay, 0ms);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  .strip { grid-template-columns: repeat(2, 1fr); }
  .spec { grid-template-columns: repeat(2, 1fr); }
  .swatches { grid-template-columns: repeat(3, 1fr); }
  .step { grid-template-columns: 64px 1fr; }
  .step__body { grid-column: 2; }
  .contact__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  html { scroll-padding-top: 80px; }

  .nav-toggle { display: inline-flex; }

  .nav {
    position: fixed;
    inset: 64px 0 auto 0;
    z-index: var(--z-overlay);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ground);
    border-bottom: 1px solid var(--line);
    padding: var(--s-4) var(--gut) var(--s-6);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--d-base) var(--e-out),
                transform var(--d-base) var(--e-out),
                visibility var(--d-base);
  }
  .nav[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
  .nav a {
    padding: var(--s-4) 0;
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--line);
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  .nav a::after { display: none; }

  .work-card__grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .work-card:nth-child(even) .work-card__grid > .work-card__media { order: 0; }

  .method, .ledger, .services, .partners, .split, .caps, .compare,
  .mark-feature { grid-template-columns: 1fr; }
  .rules-list { grid-template-columns: 1fr; }
  .delivery { grid-template-columns: 1fr; gap: var(--s-5); }
  .engage { grid-template-columns: 1fr; gap: var(--s-4); }

  .g-3, .g-4, .g-6, .g-8 { grid-column: span 12; }
  .g-6.keep-half, .g-4.keep-half, .g-3.keep-half { grid-column: span 6; }

  .next { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .strip { grid-template-columns: 1fr 1fr; }
  .spec, .contact__grid { grid-template-columns: 1fr; }
  .swatches { grid-template-columns: repeat(2, 1fr); }
  .step { grid-template-columns: 1fr; gap: var(--s-3); }
  .step__body { grid-column: 1; }
  .hero__foot { flex-direction: column; align-items: flex-start; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .g-6.keep-half, .g-4.keep-half, .g-3.keep-half { grid-column: span 12; }
}

/* ==========================================================================
   Reduced motion — render everything in its final, readable state
   ========================================================================== */

@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;
    scroll-behavior: auto !important;
  }
  .js-reveal.reveal-ready { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  .masthead, .nav-toggle, .footer__nav { display: none; }
  body { background: #fff; color: #000; }
  .plate { box-shadow: none; border: 1px solid #ccc; }
}

/* ==========================================================================
   PACKAGE PAGE
   Single-page offer for the $200 starter package. Reuses every token and
   component from the portfolio so the two read as one studio.
   ========================================================================== */

/* --- Offer hero ----------------------------------------------------------- */
.offer-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(56px, 8vw, 104px) clamp(40px, 5vw, 72px);
}
.offer-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../assets/img/hero-room.jpg") center 42% / cover no-repeat;
}
.offer-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(103deg,
      color-mix(in srgb, var(--ground) 78%, transparent) 0%,
      color-mix(in srgb, var(--ground) 58%, transparent) 46%,
      color-mix(in srgb, var(--ground) 26%, transparent) 100%),
    linear-gradient(to bottom, transparent 55%, var(--ground) 100%);
}
@media (max-width: 860px) {
  .offer-hero__bg::after {
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--ground) 72%, transparent) 0%,
      color-mix(in srgb, var(--ground) 62%, transparent) 55%,
      var(--ground) 100%);
  }
}

.price-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ground) 80%, transparent);
  margin-bottom: var(--s-5);
}
.price-chip__num {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  line-height: 1;
  color: var(--accent);
}
.price-chip__label {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Marquee -------------------------------------------------------------- */
.marquee {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  padding-block: var(--s-6);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track {
  display: flex;
  gap: var(--s-4);
  width: max-content;
  animation: marquee 64s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

.marquee__item {
  flex: none;
  width: clamp(180px, 22vw, 280px);
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--plate);
  box-shadow: inset 0 0 0 1px rgba(7, 48, 42, 0.14);
}
.marquee__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

@keyframes marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* --- What you get --------------------------------------------------------- */
.deliver { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }

.deliver__item {
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: clamp(var(--s-5), 3vw, var(--s-7));
  background: var(--surface);
}
.deliver__n {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.75rem, 6vw, 4rem);
  line-height: 0.9;
  color: var(--accent);
  margin-bottom: var(--s-4);
}
.deliver__k {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-3);
}
.deliver__body { font-size: var(--t-sm); color: var(--ink-2); }

/* --- Guarantee ------------------------------------------------------------ */
.guarantee { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--s-5), 4vw, var(--s-8)); align-items: center; }
.guarantee__mark {
  font-family: var(--display);
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  line-height: 1.05;
}

/* --- Ladder --------------------------------------------------------------- */
.ladder { display: grid; gap: 0; border-top: 1px solid var(--line); }
.rung {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  gap: var(--s-5);
  align-items: baseline;
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--line);
}
.rung--now { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.rung__price {
  font-family: var(--display);
  font-size: var(--t-h3);
  color: var(--ink);
}
.rung--now .rung__price { color: var(--accent); }
.rung__name { font-family: var(--display); font-size: var(--t-h4); display: block; margin-bottom: var(--s-2); }
.rung__body { font-size: var(--t-sm); color: var(--ink-2); }
.rung__tag {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

/* --- FAQ ------------------------------------------------------------------ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding-block: var(--s-5);
  cursor: pointer;
  font-family: var(--display);
  font-size: var(--t-h4);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--mono);
  font-size: 1.25rem;
  color: var(--accent);
  flex: none;
  transition: transform var(--d-base) var(--e-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__body { padding-bottom: var(--s-5); font-size: var(--t-sm); color: var(--ink-2); max-width: 68ch; }

/* --- Showcase lightbox ---------------------------------------------------- */
.shot { cursor: zoom-in; border: 0; padding: 0; background: none; display: block; width: 100%; }

/* A closed <dialog> is display:none by default. Only take over the display
   property while it is open, or the close button floats on the page. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-top);
  padding: var(--gut);
  background: color-mix(in srgb, #041915 92%, transparent);
  border: 0;
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: color-mix(in srgb, #041915 92%, transparent); }
.lightbox img { max-width: min(1100px, 92vw); max-height: 84vh; width: auto; height: auto; border-radius: var(--radius); }
.lightbox__cap {
  margin-top: var(--s-4);
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9CC2B2;
  text-align: center;
}
.lightbox__close {
  position: absolute;
  top: var(--s-5); right: var(--s-5);
  min-width: 44px; min-height: 44px;
  border-radius: 999px;
  border: 1px solid #9CC2B2;
  background: transparent;
  color: #F4EFE3;
  font: inherit;
  cursor: pointer;
}
.lightbox__close:hover { border-color: #69D3A8; color: #69D3A8; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1024px) {
  .deliver { grid-template-columns: 1fr; }
  .rung { grid-template-columns: 110px 1fr; }
  .rung__tag { grid-column: 2; }
}
@media (max-width: 860px) {
  .guarantee { grid-template-columns: 1fr; }
}