/* =============================================================
   0. Font
   Self-hosted rather than fetched from Google: that cost two extra
   origins (fonts.googleapis.com for the CSS, fonts.gstatic.com for the
   file), each needing its own DNS and TLS handshake before any text
   could render. One variable file covers 400-700.
   ============================================================= */
@font-face {
  font-family: "Inter Tight";
  src: url("/fonts/inter-tight-latin.woff2") format("woff2");
  font-weight: 400 700;      /* variable: one file, the whole range */
  font-style: normal;
  font-display: swap;        /* text is readable immediately, swaps when ready */
  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;
}

/* =============================================================
   [NAME] Studio: styles
   Tokens below are defaults; script.js overrides them at runtime
   from content.json → theme.
   ============================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  --accent: #FF3B0F;
  --dark: #0B0B0B;
  --light: #EDEDEB;
  --card: #FFFFFF;
  --grey: #8C8C8C;
  --font-display: "Neue Haas Grotesk Display Pro", "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Neue Haas Grotesk Text Pro", "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --radius: 24px;

  /* Type scale. Three steps below body, each a clear jump rather than the
     12/13/14/15/16 ramp this replaced — five sizes ~1.08x apart read as
     accidental, not as hierarchy. */
  --text-label: .75rem;   /* 12px — uppercase labels, ordinals, counters */
  --text-meta: .875rem;   /* 14px — captions, metadata, secondary lines */
  --text-body: 1rem;      /* 16px — body copy */
  --text-card-title: clamp(1.375rem, 2.1vw, 1.8rem);  /* Process and Why cards share one role */

  /* Derived. Mid-grey alone fails AA on off-white, so text greys are mixed toward --dark. */
  --radius-card: calc(var(--radius) * .6);
  --muted: color-mix(in srgb, var(--grey) 65%, var(--dark));    /* ≈ 5.4:1 on --light */
  --muted-lg: color-mix(in srgb, var(--grey) 85%, var(--dark)); /* ≈ 3.7:1, large text only */
  --line: color-mix(in srgb, var(--dark) 12%, transparent);
  --line-dark: color-mix(in srgb, var(--light) 18%, transparent);
  --glass: color-mix(in srgb, var(--light) 9%, transparent);
  --glass-line: color-mix(in srgb, var(--light) 16%, transparent);

  --ease: cubic-bezier(.2, .7, .2, 1);
  --track: -.04em;
  --gap: clamp(8px, 1.6vw, 24px);         /* frame offset from viewport */
  --gutter: clamp(1rem, 3.2vw, 2.75rem);  /* inner horizontal padding */
  /* Section rhythm. One value everywhere gives an even drumbeat and no
     hierarchy: a section that continues the previous thought should sit
     closer to it than one that starts a new movement. */
  --section: clamp(4.5rem, 9vw, 8.5rem);        /* new movement */
  --section-tight: clamp(2.5rem, 5vw, 4.5rem);  /* continues the one above */
  --section-loose: clamp(6rem, 12vw, 11rem);    /* a beat before it lands */
  --shadow: 0 1px 2px rgba(11, 11, 11, .04), 0 18px 40px -18px rgba(11, 11, 11, .18);
  color-scheme: light;
}

@supports not (color: color-mix(in srgb, red, blue)) {
  :root {
    --muted: #5F5F5F; --muted-lg: #797979;
    --line: rgba(11, 11, 11, .12); --line-dark: rgba(237, 237, 235, .18);
    --glass: rgba(237, 237, 235, .09); --glass-line: rgba(237, 237, 235, .16);
  }
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--dark);
  color: var(--dark);
  font: 400 1rem/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.no-scroll { overflow: hidden; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
sup { line-height: 0; }
main:focus { outline: none; }

:focus-visible { outline: 2px solid var(--focus, var(--dark)); outline-offset: 3px; }
.on-dark { --focus: var(--accent); }

.sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; top: 1rem; left: 1rem; z-index: 100;
  padding: .75rem 1.25rem; border-radius: 999px;
  background: var(--light); color: var(--dark); font-weight: 500;
  transform: translateY(-200%); transition: transform .2s var(--ease);
}
.skip:focus { transform: none; }

/* ---------- 3. Backdrop + device frame ---------- */
/* Blur a tiny copy of the image and scale it up: same look as a full-screen
   blur(60px) for a fraction of the paint cost. */
.backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--dark); }
.backdrop::before {
  content: ""; position: absolute; top: -10%; left: -10%; width: 12%; height: 12%;
  background: var(--hero-img, none) center / cover no-repeat;
  filter: blur(5px) brightness(.38) saturate(1.25);
  transform: scale(10); transform-origin: 0 0;
}
.frame {
  position: relative;
  /* No max-width: the side gaps stay equal to the top gap at every width.
     A cap here would be absorbed by the auto margins and show up as side
     gaps far wider than the top one on large monitors.
     env() is 0 where there's no notch, so this is exactly `var(--gap)` on
     desktop; on a notched phone the frame backs off far enough to clear the
     Dynamic Island / home indicator while the blurred backdrop stays
     edge-to-edge behind it. */
  --frame-side: max(var(--gap), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  width: calc(100% - var(--frame-side) * 2);
  margin: max(var(--gap), env(safe-area-inset-top, 0px)) auto max(var(--gap), env(safe-area-inset-bottom, 0px));
  background: var(--light);
  border-radius: var(--radius);
  overflow: clip;
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .06);
}

/* ---------- 4. Shared components ---------- */
.label {
  display: flex; align-items: center; gap: .75rem;
  font: 500 var(--text-label)/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
}
.motif { color: var(--accent); letter-spacing: .04em; }
.counter { font: 500 var(--text-label)/1 var(--font-body); letter-spacing: .08em; color: var(--muted); }
.sec-head {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding-bottom: 1rem; margin-bottom: clamp(2rem, 4.5vw, 4rem);
  border-bottom: 1px solid var(--line);
}
.display {
  max-width: 16ch;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  font: 500 clamp(2.25rem, 5.2vw, 4.75rem)/1 var(--font-display);
  letter-spacing: var(--track);
  text-wrap: balance;
}
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0 clamp(2rem, 5vw, 5rem); align-items: start; }
.split > .display { position: sticky; top: 2rem; }

.card {
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: clamp(1.25rem, 2.2vw, 2rem);
}
.card__label {
  font: 500 var(--text-label)/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.i { width: 1em; height: 1em; flex: none; }

/* Pill buttons */
.btn {
  display: inline-flex; align-items: center; gap: 1rem;
  min-height: 52px; padding: 6px 6px 6px 1.5rem; border-radius: 999px;
  font: 500 1rem/1 var(--font-body); letter-spacing: -.01em;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.btn__icon {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  transition: transform .45s var(--ease), background-color .35s var(--ease), color .35s var(--ease);
}
.btn__icon .i { width: 18px; height: 18px; }
.btn--accent { background: var(--accent); color: var(--dark); }
.btn--accent .btn__icon { background: var(--dark); color: var(--light); }
.btn--accent:hover { background: var(--light); }
.btn--accent:hover .btn__icon { transform: rotate(45deg); }
.btn--outline { box-shadow: inset 0 0 0 1px var(--dark); }
.btn--outline .btn__icon { background: var(--dark); color: var(--light); }
.btn--outline:hover { background: var(--dark); color: var(--light); }
.btn--outline:hover .btn__icon { background: var(--light); color: var(--dark); transform: translateX(3px); }

/* Image placeholders (CSS gradients) */
.ph { display: block; width: 100%; }

/* Uploaded logos: drawn as a mask in currentColor, so one file suits light and dark sections */
.logo-img {
  display: inline-block; vertical-align: middle; background: currentColor;
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat;
}

/* ---------- 5. Motion ---------- */
[data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity .6s var(--ease) var(--d, 0s), transform .6s var(--ease) var(--d, 0s);
}
[data-reveal].is-in { opacity: 1; transform: none; }

.wordmark .line {
  display: block; opacity: 0; transform: translateY(40%);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--i) * 120ms + 100ms);
}
.is-ready .wordmark .line { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], .wordmark .line { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; }
}

/* ---------- 6. Top bar ---------- */
.topbar {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  padding: 1.25rem var(--gutter);
  font-size: var(--text-meta);
}
.topbar--over { position: absolute; inset: 0 0 auto; color: var(--light); }
.logo { justify-self: start; font: 600 1.25rem/1 var(--font-display); letter-spacing: -.03em; }
.logo sup { margin-left: .1em; font-size: .55em; color: var(--accent); }
.logo__img { height: 22px; }
.status { display: flex; align-items: center; gap: .6rem; white-space: nowrap; }
.status__email { display: flex; align-items: center; gap: .6rem; opacity: .75; transition: opacity .3s; }
.status__email::before { content: ""; width: 1px; height: 12px; background: currentColor; opacity: .5; }
.status__email:hover { opacity: 1; }
.dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.dot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit;
  animation: pulse 2s var(--ease) infinite;
}
@keyframes pulse { to { transform: scale(3); opacity: 0; } }
.where { justify-self: end; display: flex; align-items: center; gap: 1.25rem; white-space: nowrap; }
.clock { font-variant-numeric: tabular-nums; opacity: .75; }
.burger {
  display: grid; place-content: center; gap: 5px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--dark); color: var(--light);
  transition: background-color .3s var(--ease);
}
.topbar--over .burger {
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.burger span { display: block; width: 16px; height: 1.5px; background: currentColor; transition: transform .35s var(--ease); }
.burger:hover span:first-child { transform: translateX(-3px); }
.burger:hover span:last-child { transform: translateX(3px); }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(640px, calc(100svh - var(--gap) * 2), 1000px);
  background: var(--dark); color: var(--light);
}
.hero__media { position: absolute; inset: -12% 0 0; z-index: -2; will-change: transform; }
.hero__img, .hero__media .ph { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
.hero__shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(11, 11, 11, .6) 0, rgba(11, 11, 11, 0) 26%, rgba(11, 11, 11, .12) 55%, rgba(11, 11, 11, .88) 100%),
    linear-gradient(90deg, rgba(11, 11, 11, .45), rgba(11, 11, 11, 0) 55%);
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  grid-template-areas: ". aside" "word word" "foot foot";
  align-items: end; gap: clamp(1.5rem, 3vw, 2.5rem) 2rem;
  padding: clamp(7rem, 16vh, 10rem) var(--gutter) clamp(1.25rem, 2vw, 1.75rem);
}
.wordmark {
  grid-area: word;
  margin-left: -.05em;
  font: 500 clamp(4.25rem, 16.8vw, 17.5rem)/.8 var(--font-display);
  letter-spacing: var(--track);
}
.line--indent { padding-left: .9em; }
.wordmark--logo { margin-left: 0; line-height: 0; }
.wordmark__logo { display: block; width: 100%; height: auto; }
.mark {
  position: relative; top: -1.55em;
  margin-left: .06em;
  font-size: .2em; font-weight: 500; letter-spacing: 0;
  color: var(--accent);
}
.hero__aside { grid-area: aside; display: grid; gap: 1.25rem; justify-items: start; }
.hero__aside > * { width: 100%; }
.hero__desc { font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 1.55; text-wrap: pretty; }
.rule { height: 1px; margin: 0; border: 0; background: var(--line-dark); }
.hero__foot {
  grid-area: foot;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding-top: 1.25rem; border-top: 1px solid var(--line-dark);
}
.copy { display: flex; gap: .75rem; font-size: var(--text-meta); opacity: .85; }
.rating {
  display: flex; align-items: center; gap: .7rem;
  padding: 5px 1.1rem 5px 5px; border-radius: 999px;
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-line);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  font-size: var(--text-meta);
}
.rating__g { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; }
.rating__g svg { width: 18px; height: 18px; }
.rating__score { font-size: 1rem; font-weight: 600; }
.stars { display: flex; gap: 2px; color: var(--accent); }
.star { width: 13px; height: 13px; opacity: .3; }
.star.on { opacity: 1; }
.rating__label { opacity: .8; }

/* ---------- 8. Sections (shared) ---------- */
.sec { padding: var(--section) var(--gutter) 0; scroll-margin-top: 1rem; }

/* Results reads as the evidence for Pricing, and Case studies as the evidence
   for Results, so those two hug what they answer. Why us continues Process for
   the same reason. */
#proof, #work, #why { padding-top: var(--section-tight); }
/* The motto is an interlude and the closing band is the finish; both want air
   around them rather than the standard beat. */
#story, #cta { padding-top: var(--section-loose); }

/* ---------- 9. Our story ---------- */
.story__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  gap: 2rem clamp(2rem, 5vw, 5rem); align-items: start;
}
.founder {
  display: flex; align-items: center; gap: .875rem; justify-self: start;
  padding: 6px 1.25rem 6px 6px; border-radius: 999px;
  background: var(--card); box-shadow: var(--shadow);
}
.founder__img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.founder__name { font-size: var(--text-body); font-weight: 600; line-height: 1.25; }
.founder__title { font-size: var(--text-meta); color: var(--muted); }
.story__body { display: grid; gap: clamp(2rem, 4vw, 3rem); justify-items: start; }
.statement {
  font: 500 clamp(1.75rem, 3.7vw, 3.5rem)/1.06 var(--font-display);
  letter-spacing: -.035em; text-wrap: pretty;
}
.statement .muted { color: var(--muted-lg); }

/* ---------- 10. Proof row ---------- */
.proof__grid { display: grid; grid-template-columns: 1fr 1.35fr 1fr; gap: clamp(.75rem, 1.4vw, 1.25rem); }
.proof__grid > .card { display: flex; flex-direction: column; gap: 1.25rem; min-height: 360px; }
.stat__num {
  margin-top: auto;
  font: 500 clamp(4.5rem, 9vw, 8.5rem)/.85 var(--font-display);
  letter-spacing: -.05em; font-variant-numeric: tabular-nums;
}
.stat__num .accent { color: var(--accent); }
.card__text { max-width: 30ch; color: var(--muted); }
.stat__more { display: grid; gap: .55rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.stat__more li { display: flex; align-items: baseline; gap: .75rem; font-size: var(--text-meta); line-height: 1.3; color: var(--muted); }
.stat__more strong { flex: none; min-width: 3.25rem; font: 600 1.125rem/1 var(--font-display); letter-spacing: -.02em; color: var(--dark); }
.quote__glyph { display: block; height: .42em; font: 600 5.5rem/1 var(--font-display); color: var(--accent); }
.quote blockquote { font: 500 clamp(1.125rem, 1.55vw, 1.5rem)/1.3 var(--font-display); letter-spacing: -.02em; }
.quote figcaption { margin-top: auto; display: grid; font-size: var(--text-meta); }
.quote figcaption span { color: var(--muted); }
.logos__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-top: auto; }
.logos__grid li {
  display: grid; place-items: center; aspect-ratio: 16 / 9; padding: .5rem;
  border: 1px solid var(--line); border-radius: 10px;
  font: 600 1rem/1 var(--font-display); letter-spacing: -.03em; text-align: center;
}
.logos__grid img { width: auto; max-height: 28px; }

/* ---------- 11. Work showcase ---------- */
.display--tight { margin-bottom: 1.25rem; }
.work__intro { max-width: 56ch; margin-bottom: clamp(2rem, 4vw, 3.5rem); color: var(--muted); font-size: clamp(1rem, 1.2vw, 1.125rem); }
.work__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem) clamp(.75rem, 1.4vw, 1.25rem); }
.project__link { display: block; border-radius: var(--radius-card); }
.project__media {
  position: relative; overflow: clip; aspect-ratio: 4 / 3;
  border-radius: var(--radius-card); background: var(--grey);
}
.project__img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.project__arrow {
  position: absolute; top: 1rem; right: 1rem;
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--card); color: var(--dark);
  opacity: 0; transform: scale(.6) rotate(-45deg);
  transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.project__arrow .i { width: 20px; height: 20px; }
.project__link:hover .project__img, .project__link:focus-visible .project__img { transform: scale(1.04); }
.project__link:hover .project__arrow, .project__link:focus-visible .project__arrow { opacity: 1; transform: none; }
@media (hover: none) { .project__arrow { opacity: 1; transform: none; } }
.project__meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-top: 1rem; }
.project__title { font: 500 clamp(1.25rem, 1.8vw, 1.625rem)/1.2 var(--font-display); letter-spacing: -.025em; }
.project__cat, .project__year { font-size: var(--text-meta); color: var(--muted); }
.project__year { font-variant-numeric: tabular-nums; }

/* ---------- 12. Services ---------- */
.services__list { border-top: 1px solid var(--line); }
.service {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1.1fr); gap: .5rem 2rem; align-items: baseline;
  padding: clamp(1.25rem, 2.4vw, 2rem) 0; border-bottom: 1px solid var(--line);
}
.service__n { font-size: var(--text-label); letter-spacing: .06em; color: var(--muted); }
.service__title {
  font: 500 clamp(1.5rem, 2.6vw, 2.375rem)/1.05 var(--font-display); letter-spacing: -.035em;
  transition: transform .5s var(--ease);
}
.service:hover .service__title { transform: translateX(.5rem); }
.service__desc { max-width: 42ch; color: var(--muted); }
.service__tags { grid-column: 3; font-size: var(--text-meta); letter-spacing: .02em; color: var(--muted); }

/* ---------- 12b. Pricing ---------- */
.pricing__body { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); justify-items: start; }
.pricing__note { max-width: 56ch; }
.pricing__note p { margin-top: .75rem; font: 500 clamp(1.05rem, 1.4vw, 1.25rem)/1.4 var(--font-display); letter-spacing: -.01em; }

/* ---------- 12c. Why us ---------- */
.why__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.75rem, 1.4vw, 1.25rem); }
.why__item { display: flex; flex-direction: column; gap: .75rem; min-height: 230px; }
.why__item::before { content: ""; width: 28px; height: 2px; background: var(--accent); }
.why__title { margin-top: .5rem; font: 500 var(--text-card-title)/1.1 var(--font-display); letter-spacing: -.03em; }
.why__item p { max-width: 54ch; margin-top: auto; color: var(--muted); }

/* ---------- 13. Process ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.75rem, 1.4vw, 1.25rem); }
.step { display: flex; flex-direction: column; gap: .75rem; min-height: 300px; }
.step::before { content: ""; width: 28px; height: 2px; background: var(--accent); }
.step__n { font-size: var(--text-label); letter-spacing: .06em; color: var(--muted); }
.step__title { margin-top: .5rem; font: 500 var(--text-card-title)/1.1 var(--font-display); letter-spacing: -.03em; }
.step p { margin-top: auto; color: var(--muted); }

/* ---------- 14. FAQ ---------- */
.faq__list { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.5rem 0; cursor: pointer; list-style: none;
  font: 500 clamp(1.125rem, 1.6vw, 1.375rem)/1.3 var(--font-display); letter-spacing: -.02em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa__icon {
  position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.qa__icon::before, .qa__icon::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.5px;
  background: currentColor; transform: translate(-50%, -50%);
}
.qa__icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .4s var(--ease); }
.qa[open] .qa__icon { background: var(--dark); color: var(--light); }
.qa[open] .qa__icon::after { transform: translate(-50%, -50%); }
.qa summary:hover .qa__icon { box-shadow: inset 0 0 0 1px var(--dark); }
.qa__a { max-width: 60ch; padding: 0 3.5rem 1.5rem 0; color: var(--muted); }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .qa::details-content { height: 0; overflow: clip; transition: height .5s var(--ease), content-visibility .5s allow-discrete; }
  .qa[open]::details-content { height: auto; }
}

/* ---------- 15. CTA band ---------- */
.cta__band {
  position: relative; isolation: isolate; overflow: clip;
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  padding: clamp(1.75rem, 5vw, 4.5rem) clamp(1.5rem, 5vw, 4.5rem) clamp(2rem, 6vw, 5rem);
  border-radius: calc(var(--radius) * .8);
  background: var(--dark); color: var(--light);
}
.cta__band::before {
  content: ""; position: absolute; z-index: -1;
  right: -15%; bottom: -70%; width: 75%; aspect-ratio: 1;
  background: radial-gradient(closest-side, var(--accent), transparent);
  opacity: .5;
}
.cta__band .sec-head { margin: 0; border-color: var(--line-dark); }
.cta__band .counter { color: var(--grey); }
.cta__headline {
  max-width: 14ch;
  font: 500 clamp(2.5rem, 7vw, 7rem)/.92 var(--font-display);
  letter-spacing: -.045em; text-wrap: balance;
}
.cta__body { max-width: 48ch; line-height: 1.6; margin-top: calc(clamp(2rem, 4vw, 3.5rem) * -.5); font-size: clamp(1rem, 1.3vw, 1.125rem); color: color-mix(in srgb, var(--light) 78%, transparent); }
.cta__row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.cta__mail { padding-bottom: 2px; border-bottom: 1px solid var(--line-dark); font-size: clamp(1rem, 1.4vw, 1.25rem); transition: border-color .3s; }
.cta__mail:hover { border-color: var(--light); }

/* ---------- 16. Footer ---------- */
.footer { padding: var(--section) var(--gutter) 1.5rem; }
.footer__top {
  display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.2fr); gap: 2rem;
  padding-bottom: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--line);
}
.footer__logo { font: 600 1.5rem/1 var(--font-display); letter-spacing: -.03em; }
.footer__logo sup { font-size: .55em; color: var(--accent); }
.footer__tag { max-width: 34ch; margin-top: 1rem; color: var(--muted); }
.footer__h {
  margin-bottom: 1rem;
  font: 500 var(--text-label)/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.footer ul { display: grid; gap: .5rem; }
.footer ul a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--ease); }
.footer ul a:hover { background-size: 100% 1px; }
.footer__giant {
  overflow: clip; white-space: nowrap;
  margin-left: -.05em; padding: .14em 0 .06em;
  font: 500 clamp(4rem, 19vw, 20rem)/.9 var(--font-display); letter-spacing: -.055em;
}
.footer__giant sup { position: relative; top: -1.6em; font-size: .2em; letter-spacing: 0; color: var(--accent); }
.footer__giant:has(.footer__giant-logo) { margin-left: 0; padding: clamp(1.5rem, 4vw, 3rem) 0 1.5rem; line-height: 0; }
.footer__giant-logo { display: block; width: 100%; height: auto; }
.footer__logo-img { height: 26px; }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding-top: 1.5rem; border-top: 1px solid var(--line);
  font-size: var(--text-meta); color: var(--muted);
}
.footer__top-link { display: inline-flex; align-items: center; gap: .4rem; color: var(--dark); }
.footer__top-link:hover .i { transform: translateY(-2px); }
.footer__top-link .i { transition: transform .3s var(--ease); }

/* ---------- 17. Menu overlay ---------- */
.menu {
  position: fixed; inset: 0; z-index: 50;
  display: flex; justify-content: flex-end; padding: var(--gap);
  background: rgba(11, 11, 11, .55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .4s var(--ease);
  --focus: var(--accent);
}
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; }
.menu__panel {
  display: flex; flex-direction: column; gap: 2rem;
  width: min(480px, 100%); overflow: auto;
  padding: 1.5rem clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--radius);
  background: var(--dark); color: var(--light);
  transform: translateX(32px); transition: transform .5s var(--ease);
}
.menu.is-open .menu__panel { transform: none; }
.menu__top { display: flex; justify-content: space-between; align-items: center; }
.menu__close {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line-dark); transition: background-color .3s;
}
.menu__close:hover { background: var(--glass); }
.menu__close .i { width: 20px; height: 20px; }
.menu__links { display: grid; gap: .25rem; }
.menu__links a {
  display: flex; align-items: baseline; gap: 1rem; padding: .2rem 0;
  font: 500 clamp(2rem, 5vw, 3rem)/1.1 var(--font-display); letter-spacing: var(--track);
  transition: color .3s var(--ease), transform .4s var(--ease);
}
.menu__links a:hover { color: var(--accent); transform: translateX(6px); }
.menu__n { font: 500 var(--text-label)/1 var(--font-body); letter-spacing: .06em; color: var(--grey); }
.menu__foot { display: grid; gap: 1rem; margin-top: auto; padding-top: 1.5rem; border-top: 1px solid var(--line-dark); }
.menu__email { font-size: 1.125rem; }
.menu__social { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; color: var(--grey); }
.menu__social a:hover { color: var(--light); }

/* ---------- 18. Responsive: 1024 / 768 / 390 ---------- */
@media (max-width: 1024px) {
  .status__email { display: none; }
  .proof__grid { grid-template-columns: 1fr 1fr; }
  .proof__grid > .logos { grid-column: 1 / -1; min-height: 0; }
  .logos__grid { grid-template-columns: repeat(3, 1fr); }
  .logos__grid li { aspect-ratio: 3 / 1; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step { min-height: 240px; }
  .split { grid-template-columns: 1fr; }
  .split > .display { position: static; }
  .footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .topbar { grid-template-columns: 1fr auto; }
  .status, .where__place { display: none; }
  .hero__inner { grid-template-columns: 1fr; grid-template-areas: "word" "aside" "foot"; }
  .story__grid { grid-template-columns: 1fr; }
  /* minmax(0, …), never a bare 1fr: the implied `auto` minimum is the card's
     min-content width, which lets a card grow the column past its container
     and push the whole grid off the right edge. */
  .work__grid { grid-template-columns: minmax(0, 1fr); }
  .service { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .service__desc, .service__tags { grid-column: 2; }
  .why__grid { grid-template-columns: 1fr; }
  .why__item { min-height: 0; }
  .qa__a { padding-right: 0; }
}

@media (max-width: 480px) {
  .frame { border-radius: calc(var(--radius) * .7); }
  .proof__grid, .steps { grid-template-columns: 1fr; }
  .proof__grid > .card { min-height: 0; }
  .stat__num { margin-top: 1rem; }
  .logos__grid { grid-template-columns: repeat(2, 1fr); }
  .step { min-height: 0; }
  .step p { margin-top: 0; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .hero__foot { flex-direction: column; align-items: flex-start; }
  .btn { width: 100%; justify-content: space-between; }
  .story__body .btn, .cta__row .btn { width: auto; }
}

/* =============================================================
   19. Mobile & touch adaptation
   Adaptation, not scaling: the phone layout reclaims horizontal
   space the desktop grid can afford to spend, and every affordance
   that relied on hover gets a press state instead.
   ============================================================= */

/* ---------- Narrow phones: reclaim horizontal space ----------
   Content-driven breakpoint: below ~560px the desktop habit of
   reserving a left column for ordinals costs more than it gives. */
@media (max-width: 560px) {
  /* Project card: the year fought the title for width and wrapped mid-word
     ("2024-/now"). Plain flex-wrap rather than grid with display:contents:
     the title block takes the whole line, the year wraps beneath it. Nothing
     here has a min-content floor, so it cannot widen the card. */
  .project__meta { flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; }
  .project__meta > div { flex: 1 1 100%; min-width: 0; }
  .project__year { margin-left: auto; }
  .project__title, .project__cat { min-width: 0; overflow-wrap: anywhere; }

  /* Services: the ordinal keeps its place beside the title, but the
     description spans the full width instead of sitting in a column
     indented ~68px from the edge. */
  .service { grid-template-columns: auto minmax(0, 1fr); gap: .3rem .75rem; }
  .service__desc, .service__tags { grid-column: 1 / -1; }

}

/* ---------- Landscape phones ----------
   The hero's 640px floor is taller than the whole viewport when the
   phone is on its side, so the first screen becomes a dead zone. */
@media (orientation: landscape) and (max-height: 540px) {
  .hero { min-height: calc(100svh - var(--gap) * 2); }
  .hero__inner { padding-top: clamp(4rem, 14vh, 6rem); }
  .menu__panel { padding-block: 1rem; }
  .menu__links a { font-size: clamp(1.5rem, 6vh, 2.25rem); }
}

/* ---------- Touch input ----------
   Keyed to the pointer, not the screen: a touchscreen laptop gets
   these too, and a small window on a desktop doesn't. */
@media (pointer: coarse) {
  /* 44px minimum tap target. These were 20–27px tall: real links
     people are expected to hit with a thumb. */
  .footer__top-link,
  .cta__mail,
  .menu__email,
  .status__email {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  /* Full-width rows: "FAQs" is only 36px of text, but the whole row
     should accept the tap, the way a native list does. */
  .footer ul a { display: flex; align-items: center; width: 100%; min-height: 44px; }
  .footer ul { gap: 0; }

  .logo { display: inline-flex; align-items: center; min-height: 44px; }

  /* Spread the footer columns out so adjacent links aren't a coin flip. */
  .footer__top { row-gap: 2.5rem; }
}

/* ---------- No hover available ----------
   Every hover affordance on this page is decorative except the project
   arrow (already handled above). What touch lacks is press feedback,
   so add it rather than leaving taps feeling inert. */
@media (hover: none) {
  html { -webkit-tap-highlight-color: color-mix(in srgb, var(--accent) 18%, transparent); }

  .btn, .project__link, .qa summary, .studio-link,
  .footer ul a, .menu__links a, .logos__grid li {
    transition: transform .18s var(--ease), opacity .18s var(--ease);
  }
  .btn:active, .project__link:active, .menu__links a:active { transform: scale(.985); }
  .qa summary:active, .footer ul a:active { opacity: .6; }

  /* Underline the footer links permanently: the hover-reveal underline
     was the only thing marking them as links, and it never fires. */
  .footer ul a { background-size: 100% 1px; opacity: .85; }
}

/* ---------- Horizontal overflow safety net ----------
   `overflow: clip` needs Safari 16+. Older iOS ignores it outright, so
   anything wider than the frame escapes and scrolls the whole document
   sideways — the page then reads as "cut off on the right" even though
   every element is individually the right size.

   `hidden` is used instead of `clip` only at <=1024px, because `hidden`
   makes the frame a scroll container and would stop the sticky section
   headings working; those are static below this breakpoint anyway. */
@media (max-width: 1024px) {
  html, body { overflow-x: hidden; }
  .frame { overflow: hidden; max-width: 100%; }
}

/* =============================================================
   20. Loading screen
   Covers the first paint of a visit, then fades to the site.
   Markup ships with the page; site.js only runs it when the
   inline head script set html[data-intro="run"].
   ============================================================= */

.intro {
  display: none;
  position: fixed; inset: 0; z-index: 90;
  overflow: hidden;
  background: var(--dark);
}
/* Shown from the very first paint, before site.js has parsed, so the page
   underneath is never briefly visible. */
html[data-intro="run"] .intro, .intro.is-active { display: block; }

/* Hold the page still underneath while the intro owns the screen. */
html[data-intro="run"] body { overflow: hidden; }

.intro__frames { position: absolute; inset: 0; }
/* Stacked in order: each switches on at its own mark and stays on beneath the
   next, so a hard cut can never land on a frame of empty background. */
.intro__frames img {
  position: absolute; inset: 0; z-index: var(--i);
  width: 100%; height: 100%; object-fit: cover;
  visibility: hidden;
}
.intro.is-running .intro__frames img {
  animation: intro-frame 1ms linear forwards;
  animation-delay: calc(var(--i) * var(--frame, 500ms));
}
@keyframes intro-frame { to { visibility: visible; } }

.intro__shade { position: absolute; inset: 0; z-index: 11; }

.intro__mark { position: absolute; inset: 0; z-index: 12; display: grid; place-items: center; pointer-events: none; }
.intro__logo, .intro__name { transform: scale(.92); }
.intro__logo { display: block; width: clamp(10rem, 42vw, 30rem); color: var(--light); }
.intro__name {
  font: 600 clamp(2.5rem, 9vw, 6rem)/1 var(--font-display);
  letter-spacing: var(--track); color: var(--light);
}
/* One steady grow across the whole run, not per image. */
.intro.is-running .intro__logo, .intro.is-running .intro__name {
  animation: intro-grow var(--run, 2s) linear forwards;
}
@keyframes intro-grow { from { transform: scale(.92); } to { transform: scale(1.06); } }

.intro__skip {
  position: absolute; z-index: 13;
  right: max(1.25rem, env(safe-area-inset-right, 0px));
  bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
  min-height: 44px; padding: 0 1.1rem; border-radius: 999px;
  background: var(--glass); color: var(--light);
  box-shadow: inset 0 0 0 1px var(--glass-line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font: 500 .875rem/1 var(--font-body); cursor: pointer;
}
.intro__skip:hover { background: color-mix(in srgb, var(--light) 18%, transparent); }

.intro.is-leaving { animation: intro-out .6s var(--ease) forwards; pointer-events: none; }
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }

/* Belt and braces: the head script already declines to run under reduced
   motion, but if the overlay is ever on screen it must not animate. */
@media (prefers-reduced-motion: reduce) {
  .intro { display: none !important; }
}