/* ==========================================================================
   TheCompany.design — design tokens, resets, base type
   Built from /docs (DESIGN_HANDOFF, PAGES, COMPONENTS, ANIMATIONS, RESPONSIVE,
   ASSETS, INTERACTIONS, CONTENT). The approved prototype file referenced by
   CLAUDE.md as "source of truth #1" was not present in this repo — everything
   here is built from the /docs package per the fallback rule in CLAUDE.md.
   ========================================================================== */

:root {
  --bg: #0B0B0C;
  --bg-deep: #0A0A0B;
  --bg-deepest: #09090A;
  --ink: #EDE9E2;
  --accent: #C0552C;
  --gutter: clamp(18px, 4vw, 56px);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.4, 0, .6, 1);
  --ease-rail: cubic-bezier(.7, 0, .3, 1);

  /* Deliberate, documented deviation from DESIGN_HANDOFF.md §3.5's measured
     blur(20px) saturate(150%): the nav pill is fixed/pinned for the whole
     page (CLAUDE.md rule #9), so this backdrop-filter repaints continuously
     on every scroll frame site-wide. User A/B'd 20px vs 10px live via
     DevTools and confirmed 10px feels noticeably smoother, so it's now the
     shipped value — saturate left at the spec's 150%, no reported issue
     with it. See DESIGN_HANDOFF.md §3.5 for the full note. */
  --nav-blur-radius: 10px;
  --nav-blur-saturate: 150%;
}

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

html {
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  /* The browser's own scroll-anchoring can nudge scrollY on a late layout
     shift (e.g. a web font swapping in at the hero's huge clamp() display
     sizes) to "preserve" what's visually in view — exactly the kind of
     silent, unrequested scroll this page works hard elsewhere to prevent
     (js/main.js guardAgainstLateScrollDrift). Opt out globally. */
  overflow-anchor: none;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Archivo', Helvetica, sans-serif;
  font-weight: 300;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }

a {
  color: inherit;
  text-decoration: none;
}
a:hover, a:focus-visible { color: var(--accent); }

img { display: block; max-width: 100%; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}

::selection { background: var(--accent); color: #0B0B0C; }

:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

.accent-italic {
  color: var(--accent);
  font-style: italic;
}

.arrow { display: inline-block; }

.eyebrow {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(237, 233, 226, .36);
}

/* ==========================================================================
   Global fixed layers
   ========================================================================== */

/* Grain — fixed full-viewport texture, z-60 */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 60;
  opacity: .055;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Custom cursor dot — desktop pointer only, z-70 */
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--accent);
  z-index: 70;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width .45s var(--ease-out-expo), height .45s var(--ease-out-expo),
    opacity .4s ease, transform .17s var(--ease-out-expo);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.cursor-dot.is-active { opacity: 1; }
.cursor-dot .cursor-label {
  opacity: 0;
  font-family: 'Archivo', sans-serif;
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #0B0B0C;
  transition: opacity .3s ease;
}
.cursor-dot.is-view {
  width: 82px;
  height: 82px;
}
.cursor-dot.is-view .cursor-label { opacity: 1; }
.cursor-dot.is-hidden { opacity: 0; }

@media (hover: none), (pointer: coarse) {
  .cursor-dot { display: none; }
}

/* ==========================================================================
   Welcome / preloader overlay — z-90
   ========================================================================== */

.welcome {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bg-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Belt-and-suspenders alongside the JS scroll lock in main.js: iOS Safari
     can still let a touch-drag scroll the real document underneath a fixed
     full-viewport overlay even with overflow:hidden on html/body. */
  touch-action: none;
  /* Matches the card-exit easing (cubic-bezier(.83,0,.17,1), see the
     .welcome-frame comment above) rather than the site-wide ease-out-expo
     token, so the overlay fade and the collapsing cards it's fading out
     read as one continuous motion instead of two curves at a handoff.
     Kept short (.5s, down from 1.1s): this fade only starts once every
     card/letter has already fully finished exiting (see main.js), so
     there's nothing left for a longer fade to usefully hide — it was
     only adding perceived delay before the (already-animating) hero
     becomes visible underneath. */
  transition: opacity .5s cubic-bezier(.83, 0, .17, 1);
}
.welcome.is-exiting { opacity: 0; pointer-events: none; }
.welcome.is-done { display: none; }

.welcome-stack {
  position: relative;
  width: clamp(132px, 14vw, 196px);
  aspect-ratio: 5 / 6;
  transform-origin: 50% 46%;
}

/*
 * Card motion replicated from https://the-company-six.vercel.app/ welcome
 * screen. Verified two ways: (1) reading its shipped GSAP timeline in
 * assets/index-*.js, (2) live in a real browser tab — cross-checked
 * against a frozen mid-load DOM snapshot whose computed transform/opacity
 * matched the source's declared initial .set() values exactly, and a
 * screenshot mid-entrance showing several translucent, differently
 * scaled/rotated cards at once (not an opaque flat stack).
 * That reference stacks N cards exactly on top of each other — no x/y
 * translation at all. Cards start INVISIBLE and tiny, not visible-and-flat:
 *   initial: gsap.set('.preloader-image-wrapper', {scale:.15, rotation:0,
 *     opacity:0, clipPath:'inset(45% round 16px)'})
 *   entrance: gsap.timeline({defaults:{ease:'power4.out'}})
 *     .to('.preloader-image-wrapper', {scale:1, opacity:.8,
 *       clipPath:'inset(0% round 8px)', rotation:i=>angle[i],
 *       duration:1.5, stagger:.15}, 0.2)
 *   exit (starts while the hold is still playing):
 *     .to('.preloader-image-wrapper', {scale:.1, rotation:0,
 *       clipPath:'inset(50% round 16px)', opacity:0, duration:1.1,
 *       ease:'power4.inOut', stagger:{each:.08, from:'end'}}, 2.8)
 * So each card doesn't sit flat-and-visible before fanning — it grows,
 * fades in and rotates to its fan angle all at once, staggered .15s apart
 * (now 1.3s/.13s, see below), so several cards are mid-transition
 * (translucent, at different sizes/angles) together rather than a single
 * opaque stack that then rotates open.
 * power4 in GSAP is quintic, approximated below with the standard
 * easeOutQuint / easeInOutQuint cubic-bezier curves (an exact quintic
 * curve isn't expressible as a single CSS cubic-bezier). Reference uses
 * 6 cards at roughly 5° steps (-12… 12); adapted to our 5 frames at
 * 5° steps (-10… 10) to keep the same symmetric-fan feel.
 *
 * The reference also animates clipPath (inset(45%→0%) in, inset(0%→50%)
 * out) alongside scale/opacity/rotation — this is NOT decorative detail:
 * the exit's inset(50%) is a zero-area clip (50%+50% consumes the whole
 * box), a real "iris closing" collapse, and the entrance's 45%→0% adds a
 * progressive unfurling reveal on top of the scale-up that pure scaling
 * alone doesn't produce. A prior pass dropped this entirely to fix a real
 * stutter (animating a *rounded* clip-path — round() forces path
 * rasterization — on 5 elements at once, alongside transform+opacity, isn't
 * reliably compositor-only) but that reasoning wrongly treated the
 * animated *reveal* as equivalent to just its start/end snapshots, and
 * visibly flattened the effect into a plain zoom. Restored below, minus
 * round(): border-radius + overflow:hidden already gives real rounded
 * corners at every moment regardless of the clip-path's own corners, so
 * dropping round() from the *animated* clip shape (plain axis-aligned
 * inset(), far cheaper to rasterize) loses no visible roundedness while
 * keeping the actual performance fix.
 */
.welcome-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: clamp(10px, 1.1vw, 16px);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .55);
  opacity: 0;
  transform: rotate(0deg) scale(.15);
  clip-path: inset(45%);
  will-change: transform, opacity, clip-path;
  transition: transform 1.3s cubic-bezier(.22, 1, .36, 1),
    opacity 1.3s cubic-bezier(.22, 1, .36, 1),
    clip-path 1.3s cubic-bezier(.22, 1, .36, 1);
}
.welcome-frame img { width: 100%; height: 100%; object-fit: cover; }

.wf1 img { object-position: 50% 40%; filter: grayscale(.28) brightness(.80); }
.wf2 img { object-position: 50% 45%; filter: grayscale(.28) brightness(.82); }
.wf3 img { object-position: 50% 50%; filter: grayscale(.28) brightness(.84); }
.wf4 img { object-position: 50% 45%; filter: grayscale(.28) brightness(.86); }
.wf5 img { object-position: 50% 45%; filter: grayscale(.28) brightness(.72); }

.wf1.is-in { transform: rotate(-10deg) scale(1); opacity: .8; clip-path: inset(0%); }
.wf2.is-in { transform: rotate(-5deg) scale(1); opacity: .8; clip-path: inset(0%); }
.wf3.is-in { transform: rotate(0deg) scale(1); opacity: .8; clip-path: inset(0%); }
.wf4.is-in { transform: rotate(5deg) scale(1); opacity: .8; clip-path: inset(0%); }
.wf5.is-in { transform: rotate(10deg) scale(1); opacity: .8; clip-path: inset(0%); }

.welcome-frame.is-receding {
  transform: rotate(0deg) scale(.1);
  opacity: 0;
  clip-path: inset(50%);
  transition: transform .95s cubic-bezier(.83, 0, .17, 1),
    opacity .95s cubic-bezier(.83, 0, .17, 1),
    clip-path .95s cubic-bezier(.83, 0, .17, 1);
}

/*
 * Wordmark reveal replicated from https://the-company-six.vercel.app/, same
 * verification method as the card motion above. Source (assets/index-*.js):
 *   gsap.set('.preloader-letter', {yPercent:110})
 *   e.to('.preloader-letter', {yPercent:0, duration:1.2,
 *     stagger:{each:.08, from:'random'}}, 0.6)  // inherits timeline's power4.out
 * Confirmed live: a zoomed capture mid-reveal showed "H", "P", "O", "M", "A",
 * "N", "Y" already risen while "T", "E", the space and "C" were still
 * hidden — i.e. genuinely randomized per-letter order, not left-to-right —
 * with no fade/blur/scale on the letters themselves, just a clean vertical
 * mask-rise (translateY, matching GSAP's yPercent). The whole word shares
 * ONE overflow-hidden mask (not one per letter); each letter is an
 * inline-block span translated independently within it.
 *
 * Exit (source, easy to miss — it's coded between the entrance tweens and
 * the card-exit tween, not after them):
 *   e.to('.preloader-letter', {yPercent:-110, duration:.9,
 *     ease:'power4.inOut', stagger:{each:.04, from:'end'}}, 2.9)
 * i.e. letters CONTINUE rising in the same direction, straight through and
 * out the top of the same mask, rather than reversing back down — starting
 * just 0.1s after the cards' own exit tween (positioned at 2.8s), so the
 * two read as one synchronized motion. Confirmed live: a mid-exit capture
 * showed thin clipped letter remnants (only the bottom sliver of each
 * glyph, cut off from the top by the mask) alongside a mid-collapse card.
 * Exit stagger is DOM order (not the entrance's shuffled order), from the
 * end, matching the card exit's own "topmost/last exits first" pattern.
 */
.welcome-wordmark {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  text-align: center;
  transform: translate(0, -50%);
  font-family: 'Bodoni Moda', serif;
  font-size: clamp(1.9rem, 7vw, 5.6rem);
  letter-spacing: -.03em;
  line-height: 1;
  white-space: nowrap;
  /*
   * The wordmark is much wider than the card stack it's centered on top
   * of, so a large stretch of it necessarily crosses the busy card photos.
   * A static ink color can't guarantee contrast there — light letter
   * strokes wash out over the images' own light regions (monitor/window
   * highlights etc), reading as if the card is "covering" the text even
   * though it's correctly painted on top (verified via elementsFromPoint —
   * this was a legibility issue, not a stacking bug).
   * The reference site solves this with mix-blend-mode:difference on this
   * row; tried that here first, but difference blending against detailed,
   * highly-varied photographic content (rather than the reference's likely
   * more uniform backdrops) produced noisy, unpredictable results instead
   * of reliable contrast — checked live and it didn't read as clearly
   * better. A tuned text-shadow halo is more predictable here: it darkens
   * the area immediately around every glyph regardless of the specific
   * backdrop pixel underneath, so it holds up against local bright spots
   * (a monitor screen, a window) the way a single blend-mode calculation
   * can't guarantee.
   */
  text-shadow: 0 0 4px rgba(10, 10, 11, .95), 0 0 14px rgba(10, 10, 11, .95), 0 0 34px rgba(10, 10, 11, .85), 0 2px 6px rgba(10, 10, 11, .9);
}
.wordmark-mask { display: inline-flex; overflow: hidden; }
.wordmark-letter {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);
}
.welcome-wordmark.is-in .wordmark-letter { transform: translateY(0); }
.welcome-wordmark.is-out .wordmark-letter {
  transform: translateY(-110%);
  /* opacity is a defensive second guarantee alongside the transform: even
     if any transform/clip edge case ever left a sliver visibly uncleared,
     it's also fully transparent by the same moment, so nothing can remain
     visible as a stray fragment once the exit transition completes. */
  opacity: 0;
  transition: transform .9s cubic-bezier(.83, 0, .17, 1),
    opacity .9s cubic-bezier(.83, 0, .17, 1);
}
.wordmark-letter.accent { color: var(--accent); font-style: italic; }

/* ==========================================================================
   Header / nav pill — z-52
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 52;
  padding: 16px clamp(14px, 3vw, 34px);
}

.nav-pill {
  max-width: 1220px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 999px;
  padding: 9px 9px 9px 22px;
  border: 1px solid rgba(237, 233, 226, .09);
  background: rgba(11, 11, 12, .22);
  -webkit-backdrop-filter: blur(var(--nav-blur-radius)) saturate(var(--nav-blur-saturate));
  backdrop-filter: blur(var(--nav-blur-radius)) saturate(var(--nav-blur-saturate));
  box-shadow: none;
  transition: background .6s ease, border-color .6s ease, box-shadow .6s ease;
}
.site-header.is-past .nav-pill {
  background: rgba(11, 11, 12, .62);
  border-color: rgba(237, 233, 226, .14);
  box-shadow: 0 18px 50px -30px rgba(0, 0, 0, .9);
}

.wordmark {
  display: inline-flex;
  align-items: center;
}
/* uploads/thecompany-design-logo.png is the icon-only mark, 344x281
   (~1.22:1); rendered as a mask over background-color (not an <img>) so the
   click color-flash below can animate a real background-color transition
   instead of an approximate CSS filter. Height-constrained so it scales
   down for the tighter mobile nav-pill below. */
.logo-mark {
  display: block;
  height: 34px;
  width: auto;
  aspect-ratio: 344 / 281;
  background-color: var(--ink);
  -webkit-mask-image: url("../uploads/thecompany-design-logo.png");
  mask-image: url("../uploads/thecompany-design-logo.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color .35s ease;
}
.logo-mark.is-flash {
  background-color: var(--accent);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 30px);
}
.nav-links a {
  padding: 10px 0;
  font-family: 'Archivo', sans-serif;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(237, 233, 226, .72);
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--accent); }

.cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  font-family: 'Archivo', sans-serif;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cta-pill--nav {
  padding: 12px 20px;
  background: rgba(237, 233, 226, .06);
  border: 1px solid rgba(237, 233, 226, .14);
  transition: background .45s ease, border-color .45s ease, color .45s ease;
}
.cta-pill--nav:hover, .cta-pill--nav:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: #0B0B0C;
}

.menu-button {
  display: none;
  width: 46px;
  height: 46px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
}
.menu-button .bar {
  background: var(--accent);
  height: 2px;
  border-radius: 2px;
  transition: transform .4s var(--ease-out-expo), width .4s var(--ease-out-expo);
}
.menu-button .bar-1 { width: 26px; }
.menu-button .bar-2 { width: 17px; }
.menu-button[aria-expanded="true"] .bar-1,
.menu-button[aria-expanded="true"] .bar-2 {
  width: 26px;
}
.menu-button[aria-expanded="true"] .bar-1 { transform: translateY(4.5px) rotate(9deg); }
.menu-button[aria-expanded="true"] .bar-2 { transform: translateY(-4.5px) rotate(-9deg); }

/* ==========================================================================
   Mobile menu — z-51 (hidden above 700px)
   ========================================================================== */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 51;
  display: none;
  background: rgba(9, 9, 10, .97);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  padding: 96px 22px 34px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 6px;
  opacity: 0;
  transition: opacity .5s ease;
}
.mobile-menu.is-open { display: flex; }
.mobile-menu.is-visible { opacity: 1; }

.mobile-menu-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mobile-menu-links a {
  font-family: 'Bodoni Moda', serif;
  font-size: 13vw;
  line-height: 1.16;
  letter-spacing: -.03em;
}

.mobile-menu-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(237, 233, 226, .4);
}

/* ==========================================================================
   Mobile bottom CTA bar — z-48 (hidden above 700px)
   ========================================================================== */

.mobile-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 48;
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 22px 22px 26px;
  background: rgba(11, 11, 12, .82);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(237, 233, 226, .12);
  font-family: 'Archivo', sans-serif;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .6s ease, transform .7s var(--ease-out-expo);
}
.mobile-cta-bar .arrow { color: var(--accent); }
.mobile-cta-bar.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ==========================================================================
   Work counter — fixed bottom-left, z-45
   ========================================================================== */

.work-counter {
  position: fixed;
  left: var(--gutter);
  bottom: 30px;
  z-index: 45;
  display: flex;
  gap: 6px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .6s ease;
}
.work-counter.is-visible { opacity: 1; }
.work-counter-index { color: var(--accent); }
.work-counter-total { color: rgba(237, 233, 226, .5); }

/* ==========================================================================
   01 — Hero
   ========================================================================== */

.hero {
  position: relative;
  height: 100svh;
  overflow: hidden;
  background: var(--bg-deep);
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.6s var(--ease-out-expo) .15s;
}
body.is-hero-ready .hero-backdrop { clip-path: inset(0% 0 0 0); }

.hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 52% at 56% 40%, rgba(237, 233, 226, .055), transparent 72%);
}
.hero-scrim { position: absolute; inset: 0; pointer-events: none; }
.hero-scrim-a {
  background: linear-gradient(178deg, transparent 0%, rgba(11, 11, 12, .16) 44%, rgba(10, 10, 11, .72) 76%, rgba(9, 9, 10, .95) 100%);
}
.hero-scrim-b {
  background: radial-gradient(120% 74% at 20% 100%, rgba(6, 6, 7, .9), rgba(9, 9, 10, .4) 46%, transparent 74%);
}

.coord-label {
  display: none;
  position: absolute;
  right: var(--gutter);
  top: 27%;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: .2em;
  color: rgba(237, 233, 226, .34);
}
@media (min-width: 701px) and (min-height: 780px) {
  .coord-label { display: block; }
}

.hero-type {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0 var(--gutter) clamp(34px, 7vh, 74px);
  will-change: transform, opacity;
}

.hero-h1 {
  font-family: 'Bodoni Moda', serif;
  font-size: clamp(3.4rem, 13.5vw, 15rem);
  line-height: .86;
  letter-spacing: -.035em;
}
.hero-line2 { padding-left: 12vw; }
.hero-h1 em { font-style: italic; color: var(--accent); }

.mask { display: block; overflow: hidden; }
.rise {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1.5s var(--ease-out-expo);
}
body.is-hero-ready .rise { transform: translateY(0); }

.hero-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(24px, 4vh, 46px);
  opacity: 0;
  transition: opacity 1.4s ease 1.1s;
}
body.is-hero-ready .hero-meta { opacity: 1; }

.hero-meta-left, .hero-meta-right {
  font-family: 'Archivo', sans-serif;
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(237, 233, 226, .42);
}
.hero-meta-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.scroll-rail {
  position: relative;
  display: inline-block;
  width: 1px;
  height: 40px;
  background: rgba(237, 233, 226, .18);
  overflow: hidden;
}
.rail-bar {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 40%;
  background: var(--accent);
  animation: hair 2.8s var(--ease-rail) infinite;
}
/*
 * translateY(±100%) here is relative to the bar's OWN height (40% of the
 * 40px track = 16px), not the track's — so the old ±100% only ever moved
 * it 16px total, well short of the 40px track, making it look like it
 * stalls around the middle instead of reaching the bottom. Fixed distances
 * below travel the bar's full own height (16px) above the track to its
 * full own height below the track's far edge (40px), i.e. the complete
 * trackHeight + barHeight span, so it enters fully hidden above and exits
 * fully hidden below before the loop restarts. Tied to the 40px/40% values
 * above — update both together if either changes.
 */
@keyframes hair {
  0% { transform: translateY(-16px); }
  100% { transform: translateY(40px); }
}

/* ==========================================================================
   02 — Work
   ========================================================================== */

.work-cover {
  position: relative;
  display: block;
  height: 100svh;
  overflow: hidden;
  border-top: 1px solid rgba(237, 233, 226, .09);
  cursor: default;
}

.work-cover-img {
  position: absolute;
  inset: -8% 0;
  overflow: hidden;
}
.work-cover-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 44%;
  filter: grayscale(.3) contrast(1.05) brightness(.84);
  transition: filter 1s var(--ease-out-expo);
  /* pre-promote to its own compositor layer so the JS-driven scroll
     parallax (translate3d, written every frame) doesn't force a layer
     promotion the first time it runs, right as the hero hands off to
     the work section. */
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .work-cover:hover .work-cover-img img {
    filter: grayscale(.1) contrast(1.06) brightness(1.06);
  }
}

.work-cover-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(11, 11, 12, .2) 0%, rgba(11, 11, 12, .62) 52%, rgba(11, 11, 12, .93) 100%);
}

.work-cover-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(84px, 12vh, 130px) var(--gutter) clamp(56px, 8vh, 90px);
}

.work-meta {
  display: flex;
  justify-content: space-between;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.work-meta-left { color: rgba(237, 233, 226, .7); }
.work-meta-right { color: rgba(237, 233, 226, .38); }

.work-title-mask { overflow: hidden; }
.work-title {
  font-family: 'Bodoni Moda', serif;
  font-size: clamp(2.9rem, 11vw, 12rem);
  line-height: .88;
  letter-spacing: -.035em;
  text-indent: var(--indent, 0);
  transform: translateY(102%);
  transition: transform 1.35s var(--ease-out-expo);
}
.work-cover.title-in .work-title { transform: translateY(0); }

.work-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.work-line {
  font-family: 'Bodoni Moda', serif;
  font-style: italic;
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  color: rgba(237, 233, 226, .82);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.1s ease .25s, transform 1.1s var(--ease-out-expo) .25s;
}
.work-tag {
  font-family: 'Archivo', sans-serif;
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  transition: opacity 1.1s ease .4s;
  white-space: nowrap;
}
.work-cover.content-in .work-line { opacity: 1; transform: translateY(0); }
.work-cover.content-in .work-tag { opacity: 1; }

/* ==========================================================================
   03 — Approach
   ========================================================================== */

.approach {
  position: relative;
  min-height: 130svh;
  display: flex;
  align-items: center;
  padding: clamp(90px, 18vh, 220px) var(--gutter);
  border-top: 1px solid rgba(237, 233, 226, .09);
}

.approach-sentence {
  max-width: 22ch;
  font-family: 'Bodoni Moda', serif;
  font-size: clamp(2.3rem, 7.4vw, 7.6rem);
  line-height: 1;
  letter-spacing: -.03em;
}
.aw { opacity: .12; transition: opacity .5s ease; }
.aw.accent-italic { color: var(--accent); font-style: italic; }

.approach-eyebrow {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(40px, 8vh, 90px);
  color: rgba(237, 233, 226, .32);
}

/* ==========================================================================
   04 — Capabilities
   ========================================================================== */

.capabilities {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  border-top: 1px solid rgba(237, 233, 226, .09);
}

.capabilities-inner {
  padding: clamp(80px, 12vh, 140px) var(--gutter) clamp(40px, 8vh, 90px);
}

.capability-list { margin-top: clamp(26px, 5vh, 54px); }

.capability-row-wrap {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s ease, transform .9s var(--ease-out-expo);
}
.capability-row-wrap.is-revealed { opacity: 1; transform: translateY(0); }

.capability-row {
  display: flex;
  align-items: center;
  width: 100%;
  gap: clamp(14px, 3vw, 44px);
  padding: clamp(9px, 1.6vh, 18px) 0;
  cursor: default;
  text-align: left;
  transition: opacity .55s ease;
}

.capability-pair {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.capability-num {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: .1em;
  color: rgba(237, 233, 226, .5);
  transition: color .55s ease;
}
.capability-name {
  font-family: 'Bodoni Moda', serif;
  font-size: clamp(1.9rem, 6.6vw, 6rem);
  line-height: .98;
  letter-spacing: -.03em;
  color: var(--ink);
  display: inline-block;
  transition: color .55s ease, transform .7s var(--ease-out-expo), font-style 0s;
}
.capability-line {
  font-family: 'Bodoni Moda', serif;
  font-style: italic;
  font-size: clamp(.9rem, 1.5vw, 1.35rem);
  color: rgba(237, 233, 226, .7);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity .6s ease, transform .7s var(--ease-out-expo);
}

.capability-list.has-active .capability-row { opacity: .26; }
.capability-list.has-active .capability-row.is-active { opacity: 1; }
.capability-row.is-active .capability-num { color: var(--accent); }
.capability-row.is-active .capability-name {
  color: var(--accent);
  font-style: italic;
  transform: translateX(clamp(10px, 2vw, 30px));
}
.capability-row.is-active .capability-line {
  opacity: 1;
  transform: translateX(0);
}

/* ==========================================================================
   05 — Studio
   ========================================================================== */

.studio {
  padding: clamp(90px, 18vh, 210px) var(--gutter);
  border-top: 1px solid rgba(237, 233, 226, .09);
}

.studio-inner {
  max-width: 1220px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.1s ease, transform 1.1s var(--ease-out-expo);
}
.studio-inner.is-revealed { opacity: 1; transform: translateY(0); }

.studio-statement {
  margin-top: clamp(34px, 6vh, 64px);
  max-width: 20ch;
  font-family: 'Bodoni Moda', serif;
  font-size: clamp(1.9rem, 6vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -.028em;
}

.studio-divider {
  margin-top: clamp(46px, 9vh, 100px);
  padding-top: 22px;
  border-top: 1px solid rgba(237, 233, 226, .12);
  display: flex;
  justify-content: space-between;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(237, 233, 226, .4);
}

/* ==========================================================================
   06 — Final CTA + Footer
   ========================================================================== */

.final-cta {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: clamp(90px, 14vh, 170px) var(--gutter) 0;
  border-top: 1px solid rgba(237, 233, 226, .09);
}

.final-cta-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 58% at 68% 38%, rgba(192, 85, 44, .13), transparent 70%);
  pointer-events: none;
}

.final-cta-h2 {
  position: relative;
  font-family: 'Bodoni Moda', serif;
  font-size: clamp(3rem, 15vw, 16rem);
  line-height: .84;
  letter-spacing: -.04em;
  transform: translateY(30%);
  opacity: .001;
  transition: transform 1.4s var(--ease-out-expo), opacity 1.2s ease;
}
.final-cta-h2.is-revealed { transform: translateY(0); opacity: 1; }
.final-line { display: block; }
.final-line-2 { padding-left: 14vw; }

.final-cta-row {
  position: relative;
  margin-top: clamp(36px, 7vh, 80px);
  display: flex;
  align-items: center;
  gap: 26px;
}

.cta-pill--final {
  padding: 18px 30px;
  background: transparent;
  border: 1px solid rgba(237, 233, 226, .28);
  transition: background .5s ease, border-color .5s ease, color .5s ease, transform .5s var(--ease-out-expo);
}
.cta-pill--final:hover, .cta-pill--final:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: #0B0B0C;
}

.final-cta-email {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(237, 233, 226, .4);
}
.final-cta-email:hover, .final-cta-email:focus-visible { color: var(--accent); }

.site-footer {
  margin-top: auto;
  padding: clamp(50px, 9vh, 100px) 0 26px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(237, 233, 226, .34);
}

/* ==========================================================================
   Mobile — single breakpoint at 700px (RESPONSIVE.md, verbatim overrides)
   ========================================================================== */

@media (max-width: 700px) {

  /* Header / nav */
  .site-header { padding: 12px 14px; }
  .nav-pill { padding: 7px 14px; align-items: center; }
  .wordmark { padding: 0; align-items: center; }
  .logo-mark { height: 26px; }
  .nav-links, .cta-pill--nav { display: none; }
  .menu-button { display: flex; }

  /* Mobile CTA bar */
  .mobile-cta-bar { display: flex; }

  /* Work counter */
  .work-counter { left: 22px; bottom: 88px; }

  /* Hero */
  .hero-h1 { font-size: 16.5vw; line-height: .9; }
  .hero-line2 { padding-left: 8vw; }
  .hero-meta {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 22px;
    margin-top: 34px;
  }
  .hero-meta-left, .hero-meta-right { font-size: 11px; }

  /* Work covers */
  .work-cover-content { padding: 96px 22px 40px; }
  .work-title {
    font-size: 15vw;
    line-height: .94;
    text-indent: 0;
  }
  .work-bottom { flex-direction: column; align-items: flex-start; gap: 18px; }
  .work-line { font-size: 1.15rem; max-width: 22ch; }
  .work-tag {
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid rgba(237, 233, 226, .14);
    padding-top: 16px;
    font-size: 11px;
  }
  .work-cover-img img { object-position: 62% 45%; }
  /* Parallax transform cleared to none on touch/mobile in JS — do not re-enable */

  /* Approach */
  .approach { min-height: 108svh; padding: 100px 22px; }
  .approach-sentence { font-size: 12vw; max-width: 14ch; }

  /* Capabilities */
  .capability-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 15px 0;
    border-top: 1px solid rgba(237, 233, 226, .1);
  }
  .capability-name { font-size: 11.5vw; }
  .capability-row.is-active .capability-name { transform: none; }
  .capability-line {
    white-space: normal;
    font-size: 1.05rem;
    padding-left: 30px;
    transform: none;
  }
  .capability-row.is-active .capability-line { transform: none; }

  /* Studio */
  .studio-inner { max-width: none; }
  .studio-statement { font-size: 10.5vw; max-width: 13ch; margin-top: 26px; }
  .studio-divider {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 44px;
    padding-top: 20px;
  }

  /* Final CTA / footer */
  .final-cta-h2 { font-size: 19vw; line-height: .9; }
  .final-line-2 { padding-left: 10vw; }
  .cta-pill--final {
    width: 100%;
    justify-content: space-between;
    padding: 21px 26px;
    font-size: 11px;
  }
  .final-cta-row { flex-wrap: wrap; }
  .site-footer { flex-direction: column; gap: 12px; padding: 70px 0 96px; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .rail-bar { animation: none; }
}

/* Also applied via JS (html.reduced-motion) so the compressed welcome timeline
   (ANIMATIONS.md § A) lines up with correspondingly short transitions instead
   of running the full-length durations on a fast-forwarded schedule. Hero
   entrance (§ B) collapses to an instant end state, as documented. */
html.reduced-motion .welcome-frame,
html.reduced-motion .welcome-frame.is-receding,
html.reduced-motion .wordmark-letter,
html.reduced-motion .welcome {
  transition-duration: .2s;
}
html.reduced-motion .hero-backdrop,
html.reduced-motion .rise,
html.reduced-motion .hero-meta {
  transition-duration: .01s;
  transition-delay: 0s;
}
html.reduced-motion .work-cover-img img { transition-duration: .2s; }
html.reduced-motion [data-parallax-img] { transform: none !important; }