/* ==========================================================================
   1Table Studio — Design tokens
   ========================================================================== */
@import url('https://api.fontshare.com/v2/css?f[]=switzer@400,500,600,700,800,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500&display=swap');

:root {
  --black: #13131a;
  --white: #fbfbfb;
  --off-white: #f4f4f2;
  --sky: #1aaefc;
  --sky-tint: #eaf6ff;
  --lime: #b2ff00;
  --lime-soft: #eaf3ab;
  --lime-soft-ink: #55611c;
  --violet: #8455ea;
  --coral: #ff7a59;
  --pink: #f2a8d9;
  --yellow: #fef073;
  --green: #69b16a;
  --orange: #f2921d;
  --line: #dcdcd6;
  --text-muted: #13131a;

  --font: "Switzer", "Helvetica Neue", Arial, sans-serif;
  --font-label: "Manrope", "Helvetica Neue", Arial, sans-serif;

  /* Type scale */
  --fs-hero: clamp(2.5rem, 8vw, 6rem);
  --fs-h2: clamp(2.1rem, 5.8vw, 3.9rem);
  --fs-h3: clamp(1.3rem, 2.4vw, 1.75rem);
  --fs-lead: clamp(1.0625rem, 1.5vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-tag: 0.8125rem;

  /* Line-height & letter-spacing ratios measured from reference site */
  --lh-display: 0.86;
  --lh-heading: 0.92;
  --lh-body: 1.3;
  --lh-ui: 1.3;
  --lh-label: 1.35;

  --ls-display: -0.045em;
  --ls-heading: -0.045em;
  --ls-body: -0.01em;
  --ls-ui: -0.015em;
  --ls-label: 0.02em;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 7.5rem;

  --container: 1360px;
  --container-narrow: 900px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;

  --radius-pill: 999px;
  --radius-media: 20px;
  --border-btn: 1.5px solid var(--black);
}

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

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

@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;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--white);
  color: var(--black);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  text-wrap: pretty;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--gutter); }

section { position: relative; background: var(--white); color: var(--black); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 3px;
}

/* section modifiers now share the same light theme; kept for markup compatibility */
.section-black, .section-lime, .section-white { background: var(--white); color: var(--black); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -60px;
  background: var(--sky);
  color: var(--black);
  padding: 0.75rem 1.25rem;
  z-index: 1000;
  font-weight: 700;
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top: 1rem; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--fs-tag);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: var(--lh-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow.centered { text-align: center; width: 100%; }

/* ==========================================================================
   Buttons — pill, solid border, matches reference site mechanic
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.9em 1.7em;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-ui);
  border-radius: var(--radius-pill);
  border: var(--border-btn);
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: scale(0.96); }

.btn-primary {
  position: relative;
  overflow: hidden;
  z-index: 0;
  background: var(--white);
  color: var(--black);
  border-color: var(--black);
}
.btn-primary::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -60%;
  height: 180%;
  background: var(--sky);
  border-radius: 45%;
  transform: translateY(70%);
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
}
.btn-primary:hover::before,
.btn-primary:focus-visible::before {
  transform: translateY(0%);
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary::before { transition: none; }
}

.btn-ghost { background: var(--white); color: var(--black); border-color: var(--black); }
.btn-ghost:hover { background: var(--black); color: var(--white); }

.btn-outline { background: transparent; color: var(--black); border-color: var(--black); }
.btn-outline:hover { background: var(--black); color: var(--white); }

/* ==========================================================================
   Header — logo + pill nav (Say hello / Menu)
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--gutter);
  /* No background/blur — instead of softening or tinting whatever
     scrolls underneath, the header just isn't there while scrolling down
     (see .is-hidden, toggled in main.js), and snaps back the moment you
     scroll up looking for it. Nothing to collide with either way. */
  background: transparent;
  transition: padding var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.site-header.is-hidden {
  transform: translateY(-100%);
}
/* Anchor jumps (nav clicks) still need their own clearance so landing
   content doesn't sit flush against the header's lower edge. */
#top, #services, #work, #contact, #how-we-work, #process, #how-we-make-it-happen {
  scroll-margin-top: 100px;
}
.site-header.is-compact {
  padding-block: var(--space-2);
}

.brand-logo { height: 24px; width: auto; transition: filter var(--dur-base) var(--ease-out); }
.site-header.on-dark .brand-logo { filter: invert(1); }

.header-actions { display: flex; align-items: center; gap: var(--space-2); }

.back-link-row { padding-top: calc(var(--space-8) + 2rem); padding-bottom: var(--space-3); }
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.back-link:hover { color: var(--black); }

.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.9em 1.4em;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--ls-ui);
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--black);
  background: var(--white);
  color: var(--black);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.menu-btn:hover { background: var(--black); color: var(--white); }
.menu-btn .bars { display: inline-flex; flex-direction: column; gap: 3px; width: 14px; }
.menu-btn .bars span { height: 1.5px; background: currentColor; display: block; }

/* Full-screen menu overlay */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: var(--white);
  color: var(--black);
  z-index: 600;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--gutter);
  transform: translateY(-100%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.menu-overlay.is-open { transform: translateY(0); }
.menu-overlay-top {
  position: absolute;
  top: var(--space-3);
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.menu-close {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--black);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.menu-overlay nav ul { display: flex; flex-direction: column; gap: var(--space-1); }
.menu-overlay nav a {
  font-size: clamp(2.25rem, 11vw, 4.5rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  transition: color var(--dur-fast) var(--ease-out);
}
.menu-overlay nav a:hover { color: var(--sky); }
.menu-overlay .menu-footer {
  margin-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* ==========================================================================
   Hero — centered stack: headline / media / lead / CTA
   ========================================================================== */
.hero {
  padding-top: calc(var(--space-8) + 2rem);
  padding-bottom: var(--space-6);
  text-align: center;
}
.hero-inner { display: flex; flex-direction: column; align-items: center; }
.hero-eyebrow {
  margin-bottom: var(--space-3);
  font-size: clamp(var(--fs-tag), 1.1vw, 1rem);
}

.hero h1 {
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  text-wrap: balance;
  max-width: 23ch;
}
.hero h1 .accent {
  color: var(--black);
  transition: color var(--dur-base) var(--ease-out);
  cursor: default;
}
.hero h1 .accent:hover,
.hero h1 .accent.is-revealed { color: var(--sky); }
@media (hover: none) {
  .hero h1 .accent { color: var(--sky); }
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

/* Oval divider — marks the seam between sections, echoes the logo mark */
.section-divider-oval {
  display: flex;
  justify-content: center;
  padding-block: var(--space-5);
}
.section-divider-oval img {
  width: 52px;
  height: auto;
  animation: bob 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .section-divider-oval img { animation: none; }
}

/* Hero — fanned card spread; JS animates cards out from behind the
   center card as the visitor scrolls. CSS lays out the fanned-out
   resting position so the page still looks intentional with JS off. */
.hero-fan {
  position: relative;
  margin-top: 3rem;
  width: min(760px, 96vw);
  height: clamp(190px, 25vw, 260px);
  z-index: 5;
}
.fan-card {
  --card-w: clamp(105px, 14vw, 175px);
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--card-w);
  margin-left: calc(var(--card-w) / -2);
  aspect-ratio: 3 / 4;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 16px 26px rgba(19, 19, 26, 0.22);
  background: var(--off-white);
  transform-origin: 50% 50%;
}
.fan-card img { width: 100%; height: 100%; object-fit: cover; }

.fan-card[data-i="0"] { z-index: 19; }
.fan-card[data-i="-1"] { z-index: 18; }
.fan-card[data-i="1"] { z-index: 17; }
.fan-card[data-i="-2"] { z-index: 16; }
.fan-card[data-i="2"] { z-index: 15; }

/* Resting scattered position (no-JS / reduced-motion fallback) —
   two of the five cards lift well up so they overlap the headline text
   above; the rest sit lower. JS drives the scroll-linked version of
   this same layout — see js/animations.js */
.fan-card[data-i="0"]  { transform: translate(0, -12px) rotate(-3deg) scale(1.12); }
.fan-card[data-i="-1"] { transform: translate(-14vw, 22px) rotate(13deg) scale(1); }
.fan-card[data-i="1"]  { transform: translate(14vw, -95px) rotate(-19deg) scale(1.02); }
.fan-card[data-i="-2"] { transform: translate(-30vw, -70px) rotate(-17deg) scale(0.92); }
.fan-card[data-i="2"]  { transform: translate(31vw, 18px) rotate(25deg) scale(0.9); }

/* Split-text scroll reveal (GSAP-driven; plain text if JS unavailable) */
.split-mask { display: inline-block; overflow: hidden; vertical-align: top; }
.split-inner { display: inline-block; will-change: transform, opacity; }

.hero-lead {
  max-width: 65ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--text-muted);
  margin-top: var(--space-4);
}

.hero-ctas { margin-top: var(--space-4); }

.hero-meta {
  margin-top: var(--space-5);
  font-family: var(--font-label);
  font-size: var(--fs-tag);
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* Marquee */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding-block: var(--space-2);
  margin-top: var(--space-6);
}
.marquee-track { display: flex; width: max-content; animation: marquee 26s linear infinite; }
.marquee-track span {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-h3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-heading);
  padding-right: var(--space-4);
  color: var(--black);
  white-space: nowrap;
}
.marquee-track span::after { content: "/"; color: var(--sky); margin-left: var(--space-4); font-weight: 500; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Cursor-follow CTA pill — replaces the default cursor over "How We Work"
   and "How We Make It Happen" with a badge sized like the header buttons;
   click anywhere in those sections to open the contact modal. */
.cursor-follow {
  position: fixed;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9em 1.7em;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--ls-ui);
  white-space: nowrap;
  border-radius: var(--radius-pill);
  border: var(--border-btn);
  background: var(--white);
  color: var(--black);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
  z-index: 400;
}
.cursor-follow.is-active { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cursor-follow .cf-arrow { display: none; width: 18px; height: 18px; }
.cursor-follow.is-link { padding: 1em; }
.cursor-follow.is-link .cf-label { display: none; }
.cursor-follow.is-link .cf-arrow { display: inline-flex; }
@media (hover: none), (pointer: coarse) { .cursor-follow { display: none; } }

/* ==========================================================================
   Full-bleed statement section (photo + scrim, still readable in light theme)
   ========================================================================== */
.statement {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
  position: relative;
  padding: var(--space-7) var(--gutter);
}
.statement::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(19,19,26,0.45), rgba(19,19,26,0.78));
}
.statement-inner {
  position: relative;
  z-index: 1;
  max-width: 20ch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.statement h2 {
  font-size: var(--fs-hero);
  font-weight: 900;
  line-height: var(--lh-display);
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  text-wrap: balance;
  color: var(--white);
}
.statement p {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--white);
  opacity: 0.9;
  max-width: 46ch;
}

.statement--positioning {
  background-position: center 42%;
  align-items: flex-start;
  padding-top: calc(var(--space-8) + 2rem);
  z-index: 1;
}
/* This photo's top is open sky, much brighter than the CTA photo's shaded
   treeline, so the shared scrim needs a bit more strength here for the
   header logo to stay legible at the same level as the "join us" section. */
.statement--positioning::before {
  background: linear-gradient(180deg, rgba(19, 19, 26, 0.58), rgba(19, 19, 26, 0.78));
}

/* Explicit (not auto) z-index guarantees this always paints above the
   footer's z-index:-1 immediately below it, regardless of any stacking
   context quirks introduced by scroll-linked transforms on ancestors. */
.statement--cta { z-index: 0; }
.statement--cta .statement-inner { max-width: 780px; width: 100%; }

/* Scoped via the sibling combinator so this only ever matches on
   how-it-works.html (the only page where #contact is preceded by the
   blue "Same engine" section) — index.html's #contact keeps its plain
   default reveal untouched.
   NEGATIVE z-index is deliberately avoided here: an element with z-index
   below 0 paints behind its own containing block's hit-testable layer, so
   a real click at that point resolves to the ancestor (<main>) instead of
   drilling down into #contact's own children — its "Get In Touch" button
   became permanently unclickable. Giving the section that should appear
   in FRONT (#how-we-make-it-happen) an explicit higher z-index achieves
   the same visual stacking with only non-negative values, keeping every
   descendant normally clickable. */
#how-we-make-it-happen ~ #contact { z-index: 0; }
.cta-dark-overlay {
  position: absolute;
  inset: 0;
  background: var(--black);
  opacity: 0.55;
  pointer-events: none;
}
.statement--positioning .statement-inner {
  max-width: 820px;
  width: 100%;
}
.statement--positioning .muted { color: var(--white); }
.statement--positioning .positioning-note { color: var(--white); opacity: 1; }

.statement--services .statement-inner {
  max-width: 900px;
  width: 100%;
  align-items: stretch;
  text-align: left;
}
.statement--services .eyebrow { color: var(--white); text-align: center; }
.statement--services h2 {
  font-size: var(--fs-h2);
  text-align: center;
}
.services-list-photo { border-top: 1px solid rgba(251, 251, 251, 0.3); }
.services-list-photo .service-row {
  padding-block: var(--space-4);
  border-bottom: 1px solid rgba(251, 251, 251, 0.3);
}
.services-list-photo .service-row .tag { color: var(--sky); }
.services-list-photo .service-row h3 {
  font-size: var(--fs-h3);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--ls-heading);
  color: var(--white);
}
.services-list-photo .service-row p {
  color: rgba(251, 251, 251, 0.8);
  max-width: 60ch;
  font-size: var(--fs-body);
  opacity: 1;
}
.services-list-photo .creator-count { color: var(--white); }
.services-list-photo .chip { background: rgba(251, 251, 251, 0.9); }

@media (min-width: 800px) {
  .services-list-photo .service-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-2); align-items: start; }
  .services-list-photo .service-row > *:not(.row-top) { grid-column: 2; }
}

/* ==========================================================================
   Section heading pattern
   ========================================================================== */
.section-pad { padding-block: var(--space-8); }
.section-pad--tight { padding-top: var(--space-5); }
.section-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); max-width: 60ch; }
#services .section-head { margin-bottom: var(--space-2); }
.section-head.centered { margin-inline: auto; text-align: center; max-width: 44ch; }
.section-head.centered.wide-heading { max-width: min(92vw, 900px); }
.section-head h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-transform: uppercase;
  text-wrap: balance;
}
.section-head p { font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--text-muted); }

/* Shift heading — each line alternates edge-to-edge instead of sitting
   dead-center, so the block reads as centered overall but not static */
.shift-heading { display: flex; flex-direction: column; gap: 0.1em; }
.shift-heading .line { display: block; }
.shift-heading .line-left { text-align: left; align-self: flex-start; }
.shift-heading .line-right { text-align: right; align-self: flex-end; }

/* ==========================================================================
   Services
   ========================================================================== */
.services-reveal-trigger { text-align: center; margin-top: var(--space-5); }

/* ==========================================================================
   Clients strip
   ========================================================================== */
.clients-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3) var(--space-5); padding-block: var(--space-3); }
.clients-row span {
  font-size: clamp(1.1rem, 2.6vw, 1.6rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--ls-heading);
  color: var(--text-muted);
}

/* ==========================================================================
   The Problem (rule-divided columns)
   ========================================================================== */
.problem-grid { display: grid; gap: var(--space-5); border-top: 1px solid var(--line); padding-top: var(--space-5); }
.problem-card { display: grid; gap: var(--space-3); }
.problem-card .index { font-family: var(--font-label); font-size: 1.05rem; color: var(--sky); font-weight: 500; letter-spacing: 0.02em; margin-bottom: -1.2rem; }
.problem-card h3 { font-size: var(--fs-h3); font-weight: 800; text-transform: uppercase; letter-spacing: var(--ls-heading); }
.problem-card p { color: var(--text-muted); max-width: 46ch; font-size: var(--fs-lead); line-height: var(--lh-body); }
.problem-card mark { background: none; color: var(--black); font-weight: 800; text-decoration: none; }

@media (min-width: 900px) {
  .problem-grid { grid-template-columns: repeat(3, 1fr); }
  .problem-card { padding-right: var(--space-4); border-right: 1px solid var(--line); }
  .problem-card:last-child { border-right: none; }
}


/* ==========================================================================
   Positioning (centered statements)
   ========================================================================== */
.positioning-stack { display: grid; gap: var(--space-6); text-align: center; }
.positioning-statement { display: flex; flex-direction: column; align-items: center; }
.positioning-statement h2 {
  font-size: clamp(2.25rem, 6.5vw, 4.75rem);
  font-weight: 800;
  line-height: var(--lh-heading);
  text-transform: uppercase;
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
  max-width: 34ch;
}
.positioning-note { max-width: 68ch; font-size: var(--fs-lead); line-height: var(--lh-body); margin-top: var(--space-3); color: var(--text-muted); }

/* ==========================================================================
   How we work
   ========================================================================== */
#problem { padding-bottom: var(--space-5); }
#how-we-work { background: var(--sky); padding-top: var(--space-6); }
#how-we-work .section-head { max-width: min(90vw, 820px); }

.work-stats { display: grid; gap: var(--space-4); text-align: center; }
.work-stat { display: grid; gap: 0.5rem; justify-items: center; }
.work-stat .num { font-family: var(--font-label); font-size: 1.5rem; color: var(--black); opacity: 0.7; font-weight: 300; }
.work-stat h3 { font-size: 1.25rem; font-weight: 700; text-transform: uppercase; max-width: 20ch; letter-spacing: var(--ls-heading); }

@media (min-width: 700px) { .work-stats { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   What we do
   ========================================================================== */
.feature-grid { display: grid; gap: var(--space-5); }
.feature-item { display: grid; gap: var(--space-1); }
.feature-item .icon { width: 36px; height: 36px; color: var(--sky); margin-bottom: var(--space-1); }
.feature-item h3 { font-size: 1.2rem; font-weight: 800; text-transform: uppercase; letter-spacing: var(--ls-heading); }
.feature-item p { color: var(--text-muted); max-width: 40ch; font-size: var(--fs-lead); line-height: var(--lh-body); }

.creator-stats {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}
/* The [hidden] attribute is only display:none by default via the browser's
   user-agent stylesheet — an author rule like the display:flex above wins
   over it regardless of selector specificity, since author styles always
   beat user-agent ones. This explicit override restores real hiding. */
.creator-stats[hidden] { display: none; }
.creator-count {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: var(--ls-heading);
  white-space: nowrap;
}
.creator-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.creator-cats .chip {
  display: inline-flex; align-items: center;
  font-size: var(--fs-tag); font-weight: 700;
  padding: 0.35em 0.85em; border-radius: var(--radius-pill);
  background: var(--white); color: var(--black); border: 1.5px solid var(--black);
}

.locations-strip {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: center;
}
.locations-strip strong { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--ls-label); }
.locations-strip .tag {
  display: inline-flex; align-items: center;
  font-size: var(--fs-small); font-weight: 700;
  padding: 0.4em 0.9em; border-radius: var(--radius-pill);
  background: var(--lime-soft); color: var(--lime-soft-ink);
}

@media (min-width: 700px) { .feature-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-5); } }

/* ==========================================================================
   Services (clean list rows, no boxes)
   ========================================================================== */
.services-list { border-top: 1px solid var(--line); }
.service-row { display: grid; gap: var(--space-2); padding-block: var(--space-4); border-bottom: 1px solid var(--line); }
.service-row .row-top { display: flex; align-items: baseline; gap: var(--space-3); }
.service-row .tag { font-size: var(--fs-small); color: var(--sky); font-weight: 700; }
.service-row h3 { font-size: var(--fs-h3); font-weight: 800; text-transform: uppercase; letter-spacing: var(--ls-heading); }
.service-row p { color: var(--text-muted); max-width: 60ch; font-size: var(--fs-lead); line-height: var(--lh-body); }

@media (min-width: 800px) {
  .service-row { grid-template-columns: 1fr 1.4fr; align-items: start; }
  .service-row .row-top { grid-column: 1; }
}

#services { background: var(--sky); position: relative; overflow: hidden; }

/* Scoped via the sibling combinator so this only ever matches Services
   directly following the positioning photo (the only place it occurs).
   NEGATIVE z-index is deliberately avoided: it would paint #services
   behind its own containing block's hit-testable layer, making anything
   clickable inside it (now or in future) unreachable by real clicks — the
   ancestor intercepts the hit first. .statement--positioning gets the
   explicit higher z-index instead, achieving the same visual stacking
   with only non-negative values. */
.statement--positioning ~ #services { z-index: 0; }
.services-dark-overlay {
  position: absolute;
  inset: 0;
  background: var(--black);
  opacity: 0.55;
  pointer-events: none;
}
#services .container { position: relative; z-index: 1; }

/* Services — titles run together as one big bold poster line (numbers as
   small inline prefixes), instead of three cards or panels competing for
   attention. A smaller detail area below swaps in the description for
   whichever title is hovered, focused or tapped — bold and huge for the
   names themselves, small and secondary for the copy that "appears". */
.services-poster-line {
  font-size: clamp(2.25rem, 5.5vw, 4.5rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: var(--ls-heading);
  text-wrap: pretty;
  color: var(--black);
}
.service-title {
  display: inline;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-out);
}
.service-title:hover,
.service-title:focus-visible,
.service-title.is-active {
  color: var(--white);
}
.service-title:focus-visible { outline: 2px solid var(--black); outline-offset: 6px; }
.service-title-num {
  /* Primary font (not the secondary label font) — the reference sets its
     numbers in the same bold display face as the words themselves, just
     smaller, so it still reads as one unified poster line rather than a
     number "tag" stuck on the front. */
  font-family: var(--font);
  font-size: 0.42em;
  font-weight: 800;
  line-height: 1;
  /* text-top aligns to the top of the line box, which sits above the
     word's actual cap-height (extra ascender space from the huge display
     font) — nudging down with a relative offset flushes the number's top
     edge with the top of the letters next to it, matching the reference. */
  vertical-align: text-top;
  position: relative;
  top: 0.3em;
  /* Always black, independent of the title's own color — it shouldn't
     turn white along with an active/hovered title, just dim/brighten. */
  color: var(--black);
  opacity: 0.5;
  margin-right: 0.06em;
  transition: opacity var(--dur-base) var(--ease-out);
}
.service-title:hover .service-title-num,
.service-title:focus-visible .service-title-num,
.service-title.is-active .service-title-num {
  opacity: 1;
}

.services-detail {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(19, 19, 26, 0.2);
}
.services-detail-text {
  font-family: var(--font-label);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--black);
  opacity: 0.85;
  max-width: 62ch;
  transition: opacity 0.25s var(--ease-out);
}
.services-detail-text.is-swapping { opacity: 0; }
.services-detail .creator-stats {
  transition: opacity 0.25s var(--ease-out);
}
.services-detail .creator-stats.is-swapping { opacity: 0; }

/* ==========================================================================
   Process — orbiting engine visual
   ========================================================================== */
.engine {
  position: relative;
  width: min(720px, 94vw);
  height: clamp(220px, 30vw, 320px);
  margin: 0 auto var(--space-7);
}
/* Desktop: oval sits beside the intro text instead of stacked below it.
   Mobile keeps the original stacked layout (no override needed there). */
@media (min-width: 900px) {
  #process .container {
    display: flex;
    align-items: center;
    gap: var(--space-6);
  }
  #process .section-head {
    flex: 1 1 42%;
    margin-bottom: 0;
  }
  #process .engine {
    flex: 1 1 54%;
    width: auto;
    margin: 0;
  }
}
.engine-track {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.engine-orbit { position: absolute; inset: 0; }
.engine-node {
  position: absolute;
  top: 0;
  left: 0;
  width: 1.7em;
  height: 1.7em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* Solid disc sits on top of the track line and visually "punches" the
     gap at each number — simpler and more reliable than trimming the
     stroke's own path to leave a gap. */
  background: var(--white);
  color: var(--black);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  letter-spacing: var(--ls-heading);
  line-height: 1;
  transform: translate(-50%, -50%) scale(1);
  cursor: pointer;
  border: none;
  padding: 0;
  font-family: inherit;
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.engine-node:hover,
.engine-node:focus-visible,
.engine-node.is-active {
  transform: translate(-50%, -50%) scale(1.18);
  color: var(--sky);
  text-shadow: 0 2px 6px rgba(19, 19, 26, 0.18);
}

.engine-detail {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 66%;
  margin: 0 auto;
  pointer-events: none;
}
.engine-detail-num {
  font-family: var(--font-label);
  font-size: var(--fs-tag);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--engine-active-color, var(--sky));
  transition: color var(--dur-base) var(--ease-out);
}
.engine-detail-title {
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--ls-heading);
  margin-top: 0.35rem;
}
.engine-detail-desc {
  color: var(--text-muted);
  font-size: clamp(0.7rem, 1.6vw, 0.9rem);
  line-height: var(--lh-body);
  margin-top: 0.4rem;
  max-width: 42ch;
}

.process-scroller { display: grid; gap: var(--space-5); }
.process-step { display: grid; gap: 0.5rem; }
.process-step .step-num { font-size: var(--fs-h3); font-weight: 800; color: var(--sky); }
.process-step h3 { font-size: 1.05rem; font-weight: 800; text-transform: uppercase; letter-spacing: var(--ls-heading); }
.process-step p { color: var(--text-muted); font-size: var(--fs-small); line-height: var(--lh-body); }

@media (min-width: 1000px) {
  .process-scroller { grid-template-columns: repeat(5, 1fr); }
  .process-step { padding-right: var(--space-3); border-right: 1px solid var(--line); }
  .process-step:last-child { border-right: none; }
}

/* ==========================================================================
   Levels (rule-divided, no boxes)
   ========================================================================== */
#how-we-make-it-happen { background: var(--sky); position: relative; z-index: 1; }
#how-we-make-it-happen .eyebrow,
#how-we-make-it-happen .levels-note { color: var(--black); opacity: 0.75; }
#how-we-make-it-happen .section-head p { color: var(--black); }
#how-we-make-it-happen .levels-grid { border-top-color: rgba(19, 19, 26, 0.2); }
#how-we-make-it-happen .level-card { border-right-color: rgba(19, 19, 26, 0.2) !important; }
#how-we-make-it-happen .level-card p { color: var(--black); }
#how-we-make-it-happen .level-tag { background: var(--white); color: var(--black); }
#how-we-make-it-happen .level-card.is-featured .level-tag { background: var(--black); color: var(--sky); }

.levels-note { font-size: var(--fs-small); color: var(--text-muted); font-weight: 700; margin-bottom: var(--space-5); }
/* align-items: start stops grid's default stretch — without it, every
   card was forced to match the tallest card's height (Elevated's longer
   paragraph), and the leftover space landed unevenly inside each card,
   throwing the tag/title/body rows out of alignment across the three. */
.levels-grid { display: grid; gap: var(--space-5); border-top: 1px solid var(--line); padding-top: var(--space-5); align-items: start; }
.level-card { display: grid; gap: var(--space-3); }
.level-card.is-featured .level-tag { background: var(--sky); color: var(--black); }
.level-tag {
  display: inline-flex; align-self: flex-start;
  font-size: var(--fs-tag); font-weight: 700; text-transform: uppercase;
  padding: 0.3em 0.9em; border-radius: var(--radius-pill);
  background: var(--white); color: var(--black); border: 1.5px solid var(--black);
}
/* text-wrap: normal overrides the sitewide "pretty" orphan-prevention pass
   (inherited from body) — these titles are one or two short words with
   nothing to protect against wrapping, and "pretty" was reserving a
   slightly different line-box height per title, throwing the three cards'
   titles out of vertical alignment with each other. */
.level-card h3 { font-size: 1.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: var(--ls-heading); text-wrap: wrap; }
.level-card p { color: var(--text-muted); font-size: var(--fs-lead); line-height: var(--lh-body); }
.level-card .level-turnaround {
  font-family: var(--font-label);
  font-size: var(--fs-tag);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: var(--space-2);
  border-top: 2px solid var(--black);
}
.levels-reassurance {
  text-align: center;
  margin-top: var(--space-6);
  font-size: var(--fs-lead);
  font-weight: 600;
}

@media (min-width: 900px) {
  .levels-grid { grid-template-columns: repeat(3, 1fr); }
  .level-card { padding-right: var(--space-4); border-right: 1px solid var(--line); }
  .level-card:last-child { border-right: none; }
}

/* ==========================================================================
   Work / Portfolio
   ========================================================================== */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (min-width: 700px) { .work-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .work-grid { grid-template-columns: repeat(4, 1fr); } }

.work-card {
  position: relative;
  aspect-ratio: 9 / 14;
  border-radius: 10px;
  overflow: hidden;
  background: var(--off-white);
  cursor: pointer;
  border: 7px solid transparent;
  padding: 0;
  box-shadow: 0 20px 40px rgba(19, 19, 26, 0.2);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.work-card:hover, .work-card:focus-visible {
  border-color: var(--sky);
  transform: translateY(-4px) scale(1.06);
  z-index: 2;
}
/* The rest of the grid steps back a little so the hovered/focused card
   reads as the featured one, not just outlined. */
.work-grid:has(.work-card:hover) .work-card:not(:hover),
.work-grid:has(.work-card:focus-visible) .work-card:not(:focus-visible) {
  transform: scale(0.94);
}
.work-card img, .work-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.work-card .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(19,19,26,0) 40%, rgba(19,19,26,0.85) 100%);
  transition: opacity var(--dur-base) var(--ease-out);
}
.work-card .meta { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-2); display: grid; gap: 0.25rem; text-align: left; }
.work-card .brand { font-size: 0.95rem; font-weight: 800; text-transform: uppercase; letter-spacing: var(--ls-heading); color: var(--white); }
.work-card .desc { font-size: var(--fs-tag); color: #e2e2e2; }
.work-card .play {
  position: absolute; top: var(--space-2); right: var(--space-2);
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--sky); color: var(--black);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-fast) var(--ease-out);
}
.work-card .play svg { width: 16px; height: 16px; }
.work-card:hover .play, .work-card:focus-visible .play { transform: scale(1.12); }
.work-card.is-playing .play, .work-card.is-playing .scrim { opacity: 0; pointer-events: none; }
.work-card video { display: none; }
.work-card.is-playing video { display: block; }
.work-card.is-playing img { display: none; }

/* ==========================================================================
   Contact (form + details)
   ========================================================================== */
.contact-wrap { display: grid; gap: var(--space-6); }
.contact-intro h2 { font-size: var(--fs-h2); font-weight: 800; text-transform: uppercase; line-height: var(--lh-heading); letter-spacing: var(--ls-heading); text-wrap: balance; max-width: 24ch; }
.contact-intro p { margin-top: var(--space-2); font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--text-muted); max-width: 42ch; }
.contact-direct { margin-top: var(--space-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.contact-email { font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 800; border-bottom: 2px solid var(--sky); }

.contact-form { display: grid; gap: var(--space-3); }
.form-field { display: grid; gap: 0.4rem; }
.form-field label { font-size: var(--fs-small); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-label); }
.form-field input, .form-field textarea {
  font-family: var(--font);
  font-size: var(--fs-body);
  padding: 0.9em 1em;
  border: 1.5px solid var(--black);
  border-radius: 14px;
  background: var(--white);
  color: var(--black);
  resize: vertical;
}
.form-field input:focus, .form-field textarea:focus { border-color: var(--sky); }
.form-field textarea { min-height: 120px; }
.form-note { font-size: var(--fs-tag); color: var(--text-muted); }
.form-status { font-size: var(--fs-small); font-weight: 700; min-height: 1.2em; }

@media (min-width: 900px) { .contact-wrap { grid-template-columns: 1fr 1fr; align-items: start; } }

/* Contact modal — opens only when "Get In Touch" is pressed */
.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.contact-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.contact-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(19, 19, 26, 0.6);
}
.contact-modal-panel {
  position: relative;
  background: var(--white);
  color: var(--black);
  width: min(560px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 14px;
  padding: var(--space-5);
  transform: translateY(24px) scale(0.98);
  transition: transform var(--dur-slow) var(--ease-out);
}
.contact-modal.is-open .contact-modal-panel { transform: translateY(0) scale(1); }
.contact-modal-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--black);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-modal-panel h2 { font-size: var(--fs-h3); font-weight: 800; text-transform: uppercase; letter-spacing: var(--ls-heading); max-width: 22ch; margin-top: 0.5rem; }
.contact-modal-sub { color: var(--text-muted); margin-top: var(--space-2); }
.contact-modal-panel .contact-direct { margin-bottom: var(--space-4); }
.contact-modal-panel .contact-email { font-size: 1.25rem; }
@media (prefers-reduced-motion: reduce) {
  .contact-modal, .contact-modal-panel { transition: none; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { padding-block: var(--space-6) var(--space-4); border-top: 1px solid var(--line); background: var(--off-white); }
.footer-grid { display: grid; gap: var(--space-5); }
.footer-brand img { height: 26px; }
.footer-brand p { color: var(--text-muted); margin-top: var(--space-2); max-width: 32ch; font-size: var(--fs-small); line-height: var(--lh-body); }
.footer-nav { display: grid; gap: var(--space-1); }
.footer-nav a { font-size: var(--fs-small); color: var(--text-muted); transition: color var(--dur-fast) var(--ease-out); }
.footer-nav a:hover { color: var(--sky); }
.footer-bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2);
  font-size: var(--fs-tag); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--ls-label);
}

@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }

.site-footer--blue {
  background: var(--sky);
  border-top: none;
  /* Top padding is taller than the overlap below on purpose — the overlap
     itself only eats the first 64px, so this leaves a clear strip of pure
     blue between the shadowed seam and the logo/nav row instead of them
     sitting flush against it. */
  padding-top: calc(var(--space-6) + 28px);
  padding-bottom: var(--space-6);
  position: relative;
  /* Non-negative (see the main { z-index: 1 } rule below) — a negative
     value here paints the footer behind <body>'s own hit-testable layer,
     so real clicks on anything inside it (nav links, Instagram, email)
     resolve to <body> instead of drilling down to the actual link. <main>
     gets the explicit higher z-index instead, giving the same "photo
     sits in front of the footer" stacking with only non-negative values. */
  z-index: 0;
  overflow: hidden;
  /* Permanently pulled up in normal flow (not just via transform) so the
     CTA photo above keeps overlapping the footer's top edge even at rest,
     without leaving a gap of empty page below the footer — a
     transform-only offset would shift the footer visually without
     shrinking the page's actual scroll height, leaving that gap. 64px,
     less than the top padding above, so the overlap ends with room to
     spare before the logo/nav row, not flush against it. */
  margin-top: -64px;
}
main {
  position: relative;
  z-index: 1;
}
.footer-dark-overlay {
  position: absolute;
  inset: 0;
  /* Darkest at the top (the seam under the photo), fading to fully
     transparent by roughly where the physical overlap above ends (64px of
     ~294px total footer height, ~22%) — the shadow should only ever cover
     the zone actually hidden under the photo, never bleed further down
     and darken real content like the logo/nav row that sits in the clear. */
  background: linear-gradient(180deg, var(--black), transparent 22%);
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
}
.site-footer--blue .container { position: relative; z-index: 2; }
.footer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.footer-logo img { height: 32px; }
.footer-nav-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.footer-nav-inline a {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--black);
  opacity: 0.75;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.footer-nav-inline a:hover { opacity: 1; }
.footer-social {
  display: flex;
  gap: var(--space-4);
}
.footer-social a {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--black);
  border-bottom: 1.5px solid var(--black);
}
.site-footer--blue .footer-bottom {
  border-top-color: rgba(19, 19, 26, 0.2);
  color: var(--black);
  opacity: 0.7;
}

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* Each section/chapter slides up into place as it scrolls, scrubbed
   directly to scroll position by GSAP ScrollTrigger (see animations.js).
   This class is only a no-JS/no-GSAP fallback so sections aren't stuck
   invisible; the animated path never touches CSS transitions. */
.chapter-visible { opacity: 1; transform: none; }