/* Aire — Founding Install.
   The home page mirrors the Paper file "Website 2.0" → Website → V2 (Home Desktop / Home Mobile);
   the rest came from "Aire Design Hub" → Website Explorations, "Founding Install — Desktop v2" / "— Mobile". The nl-* layout came from the retired
   "Newsletter — Desktop" / "— Mobile" boards and now carries the lead magnet pages.
   Tokens are the Paper design tokens, one-to-one. */

@font-face {
  font-family: "Schmalfette Grotesk";
  src: url("fonts/SchmalfetteGrotesk-BoldCondensed.woff2") format("woff2");
  font-weight: 700;
  font-stretch: condensed;
  font-display: swap;
}

:root {
  --color-bg: #FFFFFF;
  --color-bg-inverse: #000000;
  --color-ink: #000000;
  --color-ink-inverse: #FFFFFF;
  --color-black-05: rgb(0 0 0 / 5%);
  --color-black-10: rgb(0 0 0 / 10%);
  --color-black-20: rgb(48 47 44 / 20%);
  --color-black-40: rgb(0 0 0 / 40%);
  --color-black-60: rgb(0 0 0 / 60%);
  --color-input-border: #CECECE;
  --color-accent: #FFC603;
  --color-accent-dark: #EF0207;
  --color-card-dark: #1A1919;
  --color-card-light: #FBFBFB;
  --color-card-light-border: #CECDCC;
  --color-rule: #E5E5E5;
  /* V2 dark band: the problem section's ground, its type, the muted greys and the progress track */
  --color-ground-dark: #080807;
  --color-paper: #E8E8E3;
  --color-stone: #938F8A;
  --color-track: #393632;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --font-display: "Schmalfette Grotesk", "Anton", Impact, "Arial Narrow", sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-system: "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --text-caps-sm: 14px;
  --text-p-sm: 14px;
  --text-caps-md: 16px;
  --text-button: 16px;
  --text-p-body: 17px;
  --text-p-lg: 20px;
  --text-h4: 24px;
  --text-p-xl: 24px;
  --text-h3: 32px;
  --text-p-hero: 32px;
  --text-h2: 40px;
  --text-h1: 56px;
  --text-d3: 120px;
  --text-d2: 200px;

  --tracking-tight: -0.02em;
  --tracking-body: -0.01em;
  --tracking-caps: 0.16em;
  --leading-display: 0.75;
  --leading-body: 1.5;

  --radius-card: 8px;
  --radius-pill: 999px;
  --container-max: 1360px;

  --theme-ms: 600ms;
  --theme-ease: cubic-bezier(0.4, 0, 0.2, 1);

  --section-pad: 120px;
  --section-pad-x: 40px;
  /* Side padding that holds content to the 1360px container Our Services, Our Mission, the FAQ and
     the footer use: 40px until the screen is wider than that, then whatever centres it. */
  --gutter: max(var(--section-pad-x), calc((100% - var(--container-max)) / 2));
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* No visible scrollbar anywhere on the site (John, 2026-09-24); the page still scrolls by wheel, touch and keys. */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-p-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
/* Text selection wears the two accents: yellow ground with red type on light sections,
   red ground with yellow type on dark ones. */
::selection { background: var(--color-accent); color: var(--color-accent-dark); }
[data-theme="dark"] ::selection, .nav--dark ::selection { background: var(--color-accent-dark); color: var(--color-accent); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type helpers ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: condensed;
  line-height: var(--leading-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-body);
}
.eyebrow {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: var(--tracking-caps);
  line-height: 1;
  text-transform: uppercase;
}
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding-inline: 24px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-inverse); color: var(--color-ink-inverse);
  font-size: var(--text-button); font-weight: 400; letter-spacing: 0; line-height: 1;
  white-space: nowrap;
  transition: transform 160ms ease, opacity 160ms ease;
}
.btn:hover { opacity: 0.86; }
.btn:active { transform: scale(0.98); }
.btn--sm { height: 36px; padding-inline: 16px; }
.btn--light { background: var(--color-bg); color: var(--color-ink); font-weight: 500; }
.btn--outline { height: 40px; padding-inline: 16px; background: var(--color-bg-inverse); color: var(--color-ink-inverse); border: 1px solid var(--color-ink-inverse); font-size: var(--text-caps-sm); transition: background 200ms ease, color 200ms ease; }
.btn--outline:hover { background: var(--color-bg); color: var(--color-ink); opacity: 1; }

/* ---------- announcement + nav ---------- */
.announce {
  display: flex; align-items: center; justify-content: center;
  height: 38px; padding: 12px 20px;
  background: var(--color-bg-inverse); color: var(--color-ink-inverse);
  font-size: var(--text-caps-sm);
}
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px;
  background: var(--color-bg); color: var(--color-ink);
  border-bottom: 1px solid var(--color-black-20);
  transition: background 260ms ease, color 260ms ease, border-color 260ms ease;
}
/* Follows the section under it: dark sections flip the bar to black. */
.nav--dark { background: var(--color-bg-inverse); color: var(--color-ink-inverse); border-bottom-color: rgb(255 255 255 / 16%); transition: none; } /* goes black the instant a dark section is under it; eases back to white */
.nav--dark .btn { background: var(--color-bg); color: var(--color-ink); }
.nav .btn { transition: background 260ms ease, color 260ms ease, transform 160ms ease, opacity 160ms ease; }
.brand { display: flex; align-items: center; height: 26px; }
/* The cycling logo: every exploration mark stacked in one slot; JS shows one at a time. */
.logo-cycle { position: relative; display: block; height: 26px; width: 92px; }
.logo-cycle img {
  position: absolute; left: 0; top: 0; height: 100%; width: 100%;
  object-fit: contain; object-position: left center;
  opacity: 0;
}
.logo-cycle img.is-on { opacity: 1; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a {
  font-size: var(--text-caps-sm); font-weight: 500; letter-spacing: var(--tracking-body);
  line-height: 1; text-transform: uppercase;
}
.nav-links a:hover { opacity: 0.6; }
.nav-menu-btn { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; }
/* V2 bar (Paper "Navbar" in Hero — 005B): logo in a 250px slot, sentence-case links at 20px, a 44px pill.
   No rule under it in either theme, and half the board's 28px above and below (John, 2026-09-24). */
.nav--v2 { padding: 14px var(--gutter); border-bottom: 0; } /* the bar spans the screen; its contents keep to the container */
.nav--v2 .brand { flex: 0 0 250px; height: 34px; }
.nav--v2 .logo-cycle { width: 95px; height: 34px; }
.nav--v2 .nav-links { flex: 1 1 auto; gap: 36px; }
/* Bar type: Helvetica Neue Medium at -3% tracking, links and pill alike (John, 2026-09-24). */
.nav--v2 .nav-links a, .nav--v2 .nav-cta { font-family: var(--font-body); font-weight: 500; letter-spacing: -0.03em; }
.nav--v2 .nav-links a { font-size: var(--text-p-lg); text-transform: none; }
.nav--v2 .nav-cta { flex-shrink: 0; padding-inline: 22px; }
.nav-menu {
  position: fixed; inset: 0; z-index: 60;
  display: none; flex-direction: column; justify-content: space-between;
  padding: 24px 20px 40px;
  /* dark glass on every page: the white glass lost the white links on the dark home page (John, 2026-09-24) */
  background: rgb(13 13 13 / 72%); color: var(--color-ink-inverse);
  -webkit-backdrop-filter: blur(28px) saturate(140%); backdrop-filter: blur(28px) saturate(140%);
}
.nav-menu.is-open { display: flex; animation: menu-in 320ms ease both; }
@keyframes menu-in { from { opacity: 0; } to { opacity: 1; } }
.nav-menu.is-open .nav-menu-list a {
  animation: link-up 520ms cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(120ms + var(--i, 0) * 70ms);
}
@keyframes link-up {
  from { opacity: 0; transform: translateY(40px); filter: blur(10px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.nav-menu.is-open .btn { animation: link-up 520ms cubic-bezier(.2, .8, .2, 1) both; animation-delay: 520ms; }
@media (prefers-reduced-motion: reduce) { .nav-menu.is-open, .nav-menu.is-open .nav-menu-list a, .nav-menu.is-open .btn { animation: none; } }
.nav-menu-top { display: flex; align-items: center; justify-content: space-between; }
.nav-menu-list { display: flex; flex-direction: column; gap: 8px; }
.nav-menu-list a { font-family: var(--font-display); font-weight: 700; font-stretch: condensed; font-size: 64px; line-height: 0.9; text-transform: uppercase; }
.nav-menu .btn { align-self: flex-start; background: var(--color-bg); color: var(--color-ink); }

/* ---------- page theme (home) ----------
   darkroomagency.com's move: one background behind the whole page, the sections transparent over it.
   app.js sets <html data-page-theme> from the [data-theme] section on the viewport's midline (with an
   80px dead zone), and the page eases between white and near-black over 600ms. The bar flips with it.
   data-theme-ready arrives after the first sync, so a reload mid-page lands on the right theme without
   animating into it. */
html[data-page-theme] { --page-bg: var(--color-bg); --page-ink: var(--color-ink); background-color: var(--page-bg); }
html[data-page-theme="dark"] { --page-bg: #0D0D0D; --page-ink: var(--color-ink-inverse); --color-rule: #262626; } /* the services grid on the dark page: a quiet line, not a bright one (John, 2026-09-24) */
html[data-page-theme] body { background: transparent; color: var(--page-ink); }
/* ScrollSmoother moves #smooth-content by transform, so the bar is fixed outside it and the content
   starts under it. With the smoother off (reduced motion) the same layout holds. GSAP does the easing,
   so the browser's own smooth scroll comes off while it runs. */
html[data-page-theme] { --nav-h: 72px; }
html[data-page-theme] .nav--v2 { position: fixed; top: 0; left: 0; right: 0; }
html[data-page-theme] #smooth-content { padding-top: var(--nav-h); }
html.has-smoother { scroll-behavior: auto; }
html[data-page-theme] :is(.hero, .problem, .services, .about, .faq, .cta, .footer),
html[data-page-theme] .services .section-heading { background: transparent; color: inherit; }
html[data-page-theme="dark"] .problem { color: var(--color-paper); } /* V2's paper white for the problem copy */
html[data-page-theme] .nav--v2, html[data-page-theme] .nav--v2.nav--dark { background: var(--page-bg); color: var(--page-ink); }
html[data-theme-ready] { transition: background-color var(--theme-ms) var(--theme-ease); }
html[data-theme-ready] body, html[data-theme-ready] .problem { transition: color var(--theme-ms) var(--theme-ease); }
html[data-theme-ready] :is(.svc-feature, .svc-cards, .svc-card) { transition: border-color var(--theme-ms) var(--theme-ease), background 200ms ease; }
html[data-theme-ready] .nav--v2, html[data-theme-ready] .nav--v2.nav--dark { transition: background-color var(--theme-ms) var(--theme-ease), color var(--theme-ms) var(--theme-ease); }
html[data-theme-ready] .nav--v2 .btn { transition: background-color var(--theme-ms) var(--theme-ease), color var(--theme-ms) var(--theme-ease), transform 160ms ease, opacity 160ms ease; }
@media (prefers-reduced-motion: reduce) {
  html[data-theme-ready], html[data-theme-ready] body, html[data-theme-ready] .problem,
  html[data-theme-ready] .nav--v2, html[data-theme-ready] .nav--v2.nav--dark, html[data-theme-ready] .nav--v2 .btn { transition: none; }
}

/* ---------- hero ----------
   V2 "Hero — 005B Light": three lines of display type with two pictures and the wax seal set in the
   line, a foot row at the bottom. Everything in the headline is sized in em off one font size, so the
   pictures scale with the words: 190px at 1440x900, capped by the viewport height on short screens. */
.hero {
  display: flex; flex-direction: column;
  min-height: calc(100vh - 72px); min-height: calc(100svh - 72px); /* under the 72px bar */
  background: var(--color-bg);
}
.hero-title { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 24px 20px 40px; font-weight: 700; }
.hero-lines {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-family: var(--font-display); font-stretch: condensed; font-weight: 700;
  /* width, height, and the container: the widest line ("We design [pic] Creative") runs 5.38em, so it
     never grows past the 1360px every other section keeps to */
  font-size: min(13.2vw, 21.1svh, calc(var(--container-max) / 5.4)); line-height: var(--leading-display); text-transform: uppercase; letter-spacing: 0;
}
.hero-lines--narrow { display: none; }
.hero-line { display: flex; align-items: baseline; gap: 0.095em; white-space: nowrap; }
.hero-tile { display: block; flex-shrink: 0; width: 0.579em; height: 0.726em; overflow: hidden; }
.hero-tile img { width: 100%; height: 100%; object-fit: cover; }
.hero-seal { display: flex; align-items: center; justify-content: center; align-self: stretch; flex-shrink: 0; width: 0.758em; }
.hero-seal img { flex-shrink: 0; width: 0.895em; max-width: none; height: auto; rotate: -8deg; }
.hero-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; padding: 0 var(--gutter) 32px; }
.now-building { display: flex; align-items: center; gap: 10px; flex-shrink: 0; width: 360px; }
.now-bars { display: flex; gap: 2px; height: 30px; }
.now-bars i { width: 2px; background: currentColor; }
.now-building > span:last-child { font-size: var(--text-p-sm); line-height: 1.2; color: #999999; }
/* The shimmer, after libraries.dev/orbs' "Solving....": a soft band about a third of the label wide
   sweeps left to right in 1s, then the label rests grey for 1s. On white the band is the page ink
   (black), so it reads the way the reference's light band reads on dark; it goes white with the page. */
.now-label {
  background: linear-gradient(90deg, #999999 35%, var(--page-ink, var(--color-ink)) 50%, #999999 65%) 100% 0 / 300% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: now-shimmer 2s linear infinite; /* the reference moves at an even pace, about a letter a frame */
}
@keyframes now-shimmer { 0% { background-position: 100% 0; } 50%, 100% { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .now-label { animation: none; background: none; -webkit-text-fill-color: currentColor; } }
.hero-blurb { width: 460px; max-width: 100%; /* 425 in Paper; Helvetica Neue sets wider than the board's Suisse, and this keeps its two lines */ font-size: var(--text-p-sm); line-height: 1.25; }

/* ---------- problem ----------
   V2 "Problem Section — New": the client stories on the left, the problem copy on the right, on the
   dark band. The copy starts dim and fills in letter by letter as it scrolls ([data-reveal] below). */
.problem {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 40px;
  padding: var(--section-pad) var(--gutter) 155px;
  background: var(--color-ground-dark); color: var(--color-paper);
}
.problem-copy { display: flex; flex-direction: column; gap: 56px; flex: 0 1 800px; min-width: 0; }
.problem-paras { display: flex; flex-direction: column; gap: 44px; }
.problem-paras p { font-size: var(--text-h2); line-height: 1.1; letter-spacing: -0.03em; }
.founder { display: flex; align-items: center; gap: 11px; }
.founder-photo { width: 40px; height: 40px; border-radius: var(--radius-pill); object-fit: cover; flex-shrink: 0; }
.founder-who { display: flex; flex-direction: column; gap: 2px; font-size: 17px; line-height: 1.3; letter-spacing: 0; color: var(--color-stone); }

/* The stories: one at a time, stacked in one grid cell so the column never changes height.
   The bar is split in thirds; the lit third is the story showing and fills across its dwell. */
.stories { display: flex; flex-direction: column; flex: 0 0 440px; min-width: 0; }
.stories-progress { position: relative; height: 1px; overflow: hidden; background: var(--color-track); }
.stories-fill {
  position: absolute; top: 0; bottom: 0;
  left: calc(100% * var(--story-i, 0) / var(--story-n, 3)); width: calc(100% / var(--story-n, 3));
  background: currentColor; transform-origin: left center;
  transition: left 420ms ease;
}
.stories.is-running .stories-fill { animation: story-progress var(--story-dwell, 7000ms) linear forwards; }
.stories.is-paused .stories-fill { animation-play-state: paused; }
@keyframes story-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.stories-controls { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; }
.stories-arrows { display: flex; gap: 12px; }
.stories-arrows button { display: flex; width: 20px; height: 20px; color: inherit; transition: opacity 160ms ease; }
.stories-arrows button:hover { opacity: 0.6; }
.stories-arrows svg { width: 20px; height: 20px; }
.stories-count, .stories-tag { font-family: var(--font-mono); font-size: 14px; line-height: 1.3; color: var(--color-stone); }
.stories-count { letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.stories-tag { padding-top: 48px; letter-spacing: 0.02em; text-transform: uppercase; }
.stories-stage { display: grid; padding-top: 40px; }
.story {
  grid-area: 1 / 1; display: flex; flex-direction: column; gap: 48px; margin: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 420ms ease, visibility 0s linear 420ms;
}
.story.is-active { opacity: 1; visibility: visible; transition: opacity 420ms ease, visibility 0s; }
.story-quote { font-size: 28px; line-height: 1.28; letter-spacing: -0.02em; }
.story-by { display: flex; align-items: center; gap: 16px; }
.story-avatar { display: flex; align-items: center; justify-content: center; flex: 0 0 64px; width: 64px; height: 64px; border-radius: var(--radius-pill); overflow: hidden; }
.story-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* a brand mark sits inside a ruled circle rather than filling it, the way a photo does */
.story-avatar--mark { border: 1px solid rgb(232 232 227 / 20%); }
.story-avatar--mark img { width: 40px; height: 40px; object-fit: contain; }
.story-who { display: flex; flex-direction: column; gap: 4px; color: var(--color-stone); letter-spacing: var(--tracking-tight); line-height: 1.2; }
.story-name { font-size: 19.2px; }
.story-role { font-size: var(--text-p-body); }
@media (prefers-reduced-motion: reduce) {
  .story, .stories-fill { transition: none; }
  .stories-fill, .stories.is-running .stories-fill { animation: none; transform: none; }
}

/* ---------- selected work ---------- */
.work {
  display: flex; flex-direction: column; align-items: center; gap: 48px;
  padding: var(--section-pad) 64px;
  background: var(--color-bg-inverse); color: var(--color-ink-inverse);
}
.section-heading { font-size: var(--text-d3); text-align: center; padding-bottom: 40px; }
.work-cards { display: flex; gap: 10px; width: 100%; max-width: 1312px; }
.work-card {
  position: relative; flex: 1 1 0; height: 372px; overflow: hidden;
  border-radius: 12px; background: var(--color-card-dark);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 16px;
  transition: background 400ms ease, color 400ms ease;
}
.work-card-head { display: flex; flex-direction: column; gap: 2px; }
.work-card-title { font-size: var(--text-p-body); font-weight: 500; }
.work-card-sub { font-size: var(--text-p-sm); color: rgb(255 255 255 / 60%); }
.work-card-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; width: 100%; }
.work-figure { display: flex; flex-direction: column; gap: 16px; flex: 0 0 auto; }
.work-figure .eyebrow { font-size: 8px; font-weight: 500; color: rgb(255 255 255 / 50%); white-space: nowrap; }
.work-figure .display { font-size: var(--text-d3); white-space: nowrap; }
/* Logo slot: percentage width + padding-top ratio hack, so the mark scales with the card and never squeezes the figure. */
.logo-slot { position: relative; flex: 0 0 auto; align-self: flex-end; }
.logo-slot svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.logo-slot--sult { width: 51.7%; padding-top: 18.43%; }
.logo-slot--sollos { width: 32.15%; padding-top: 32.15%; }
/* default state: monochrome marks */
.work-card .mark-sult path { fill: #E6E6E6; }
.work-card .mark-sollos .c-orange { fill: #E6E6E6; }
.work-card .mark-sollos .c-yellow { fill: #FFFFFF; }
.work-card .mark-sollos .c-teal { fill: #8C8C8C; }
/* hover state ("Selected Work Section — Card Selected"): brand ground + true colours.
   .is-hover mirrors :hover so touch devices and tests can reach the same state. */
.work-card--sult:hover, .work-card--sult.is-hover { background: linear-gradient(160deg, #DBFF3D 0%, #CDFF00 48%, #B4E300 100%); color: var(--color-ink); }
.work-card--sult:hover .work-card-sub, .work-card--sult.is-hover .work-card-sub { color: rgb(0 0 0 / 65%); }
.work-card--sult:hover .work-figure .eyebrow, .work-card--sult.is-hover .work-figure .eyebrow { color: rgb(0 0 0 / 60%); }
.work-card--sult:hover .mark-sult path, .work-card--sult.is-hover .mark-sult path { fill: #000000; }
.work-card--sollos:hover, .work-card--sollos.is-hover { background: linear-gradient(160deg, #37727E 0%, #2A5E69 50%, #1E4750 100%); }
.work-card--sollos:hover .mark-sollos .c-orange, .work-card--sollos.is-hover .mark-sollos .c-orange { fill: #ED7A31; }
.work-card--sollos:hover .mark-sollos .c-yellow, .work-card--sollos.is-hover .mark-sollos .c-yellow { fill: #F8D049; }
.work-card--sollos:hover .mark-sollos .c-teal, .work-card--sollos.is-hover .mark-sollos .c-teal { fill: #57818B; }
.work-card .mark-sollos path { transition: fill 400ms ease; }
.work-card .mark-sult path { transition: fill 400ms ease; }

/* ---------- services ---------- */
.services {
  display: flex; flex-direction: column; align-items: center;
  padding: var(--section-pad) var(--section-pad-x);
  background: var(--color-bg);
}
.services .section-heading { color: var(--color-ink); }
.services-grid { width: 96%; max-width: var(--container-max); margin-top: 34px; }
.svc-feature {
  transition: background 200ms ease;
  display: grid; grid-template-columns: 1fr 2fr;
  border-top: 1px solid var(--color-rule); border-left: 1px solid var(--color-rule); border-right: 1px solid var(--color-rule);
}
.svc-copy { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 24px; }
.svc-title { font-family: var(--font-system); font-weight: 400; font-size: var(--text-h2); line-height: 1.1; letter-spacing: -1.12px; }
.svc-desc { font-family: var(--font-system); font-weight: 400; font-size: 17px; line-height: 1.5; }
.svc-art { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 2 / 1; width: 100%; }
.svc-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--color-rule); border-left: 1px solid var(--color-rule);
}
.svc-card { display: flex; flex-direction: column; border-right: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); transition: background 200ms ease; }
.svc-card:hover, .svc-feature:hover { background: #F7F7F7; }
.svc-card .svc-art { aspect-ratio: 1 / 1; }
.svc-card .svc-copy { flex-direction: row; align-items: center; justify-content: space-between; }
.svc-card .svc-title { font-size: var(--text-h4); letter-spacing: -0.48px; line-height: 1.4; }
/* The word + its sticker. The mark is anchored to the word's box, exactly as framed in Paper. */
.svc-word { position: relative; width: fit-content; }
.svc-word .display { font-size: var(--text-d3); white-space: nowrap; }
.svc-card .svc-word .display { font-size: 64px; }
.svc-mark { position: absolute; transform-origin: 0 0; display: block; }
.svc-mark img { width: 100%; height: 100%; display: block; }
.svc-mark--samsung { left: -54.463px; top: -9.596px; width: 102px; height: 44px; rotate: 343.77deg; }
.svc-mark--ikea { left: -26.5px; top: -14.68px; width: 61px; height: 28px; rotate: 348.38deg; }
.svc-mark--hotwheels { left: -52.5px; top: -5.68px; width: 96px; height: 28px; rotate: 346.96deg; }
.svc-mark--lego { left: -32px; top: -4.68px; width: 58px; height: 28px; rotate: 335.63deg; }

/* ---------- CTA ---------- */
.cta { display: flex; flex-direction: column; align-items: center; padding: var(--section-pad) 20px; background: var(--color-bg-inverse); color: var(--color-ink-inverse); }
.cta-inner { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 480px; max-width: 100%; }
.cta-heading { display: flex; flex-direction: column; gap: 10px; text-align: center; }
.cta-kicker { font-size: var(--text-h1); }
.cta-display { font-size: var(--text-d2); }
.cta-inner > p:not(.display) { width: 362px; max-width: 100%; margin-bottom: 25px; font-family: var(--font-system); text-align: center; line-height: 1.5; }
.cta .btn { margin-top: 8px; }

/* ---------- about ---------- */
.about { padding-top: var(--section-pad); overflow: hidden; background: var(--color-bg); }
.about-row { display: flex; flex-wrap: wrap; width: 96%; max-width: var(--container-max); margin-inline: auto; }
.about-heading { flex: 0 0 50%; max-width: 50%; padding-inline: 20px; }
.about-heading .cta-kicker, .about-heading .cta-display { display: block; text-align: left; }
.about-copy { flex: 0 0 41.67%; max-width: 41.67%; padding-inline: 20px; }
.about-lead { margin-bottom: 40px; font-family: var(--font-system); font-size: var(--text-h2); line-height: 1.1; letter-spacing: -0.8px; }
.about-body { margin-bottom: 34px; font-family: var(--font-system); font-size: 17px; line-height: 1.3; white-space: pre-line; }
.marquee { display: flex; width: 100%; margin-top: 200px; margin-bottom: 16px; overflow: hidden; cursor: grab; user-select: none; touch-action: pan-y; }
.marquee.is-dragging { cursor: grabbing; }
.marquee-track { display: flex; flex-shrink: 0; will-change: transform; }
.marquee-group { display: flex; gap: 16px; padding-right: 16px; }
.marquee-group .tile { position: relative; display: block; height: 362px; flex-shrink: 0; }
.marquee-group img { height: 362px; width: auto; display: block; filter: grayscale(1); -webkit-user-drag: none; pointer-events: none; }
.marquee-group .tile.is-colour img { filter: grayscale(0); }

/* ---------- FAQ ---------- */
.faq { display: flex; flex-direction: column; align-items: center; padding: var(--section-pad) var(--section-pad-x); background: var(--color-bg); }
.faq-inner { width: 100%; max-width: var(--container-max); }
.faq-title { padding-bottom: 48px; font-size: var(--text-h1); font-weight: 500; letter-spacing: var(--tracking-tight); line-height: 1.1; }
.faq-item { border-top: 1px solid var(--color-black-20); }
.faq-item:last-child { border-bottom: 1px solid var(--color-black-20); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; padding: 24px 0; text-align: left;
  font-size: var(--text-p-body); font-weight: 500; letter-spacing: var(--tracking-body); line-height: 1.5;
}
.faq-chev {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border: 0; border-radius: var(--radius-card); /* no ruled square (John, 2026-09-24) */
  transition: transform 240ms ease;
}
.faq-item.is-open .faq-chev { transform: rotate(180deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 280ms ease; }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { max-width: 800px; padding-bottom: 24px; color: var(--color-black-60); }

/* ---------- footer ---------- */
.footer { display: flex; flex-direction: column; align-items: center; padding: 80px 40px 32px; background: var(--color-bg-inverse); color: var(--color-ink-inverse); }
.footer-inner { display: flex; flex-direction: column; gap: 64px; width: 100%; max-width: var(--container-max); }
.footer-top { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; }
.footer-cols { display: flex; gap: 40px; }
.footer-col { display: flex; flex-direction: column; gap: 20px; width: 280px; }
.footer-col h3 { font-size: var(--text-caps-sm); font-weight: 500; letter-spacing: var(--tracking-caps); line-height: 1; text-transform: uppercase; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; list-style: none; }
.footer-col a { font-size: var(--text-caps-md); color: rgb(255 255 255 / 72%); }
.footer-col a:hover { color: var(--color-ink-inverse); }
.footer-brand { display: flex; align-items: flex-end; flex-direction: column; width: 280px; }
.footer-brand .logo-cycle { height: 34px; width: 120px; }
.footer-brand .logo-cycle img { object-position: right center; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; border-top: 1px solid rgb(255 255 255 / 16%); }
.footer-bottom p { font-size: var(--text-p-sm); color: rgb(255 255 255 / 60%); }
.socials { display: flex; align-items: center; gap: 20px; }
.socials a { display: block; width: 20px; height: 20px; }
.socials svg { width: 20px; height: 20px; }

/* ---------- lead magnet page layout (nl-*, from the retired newsletter page) ---------- */
.nl-hero { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 820px; background: var(--color-bg-inverse); color: var(--color-ink-inverse); }
/* The opening hero fills the viewport under the sticky nav, content centred in it. */
.nl-hero:not(.nl-close) { height: auto; min-height: calc(100svh - 69px); padding: 80px 0; }
.nl-inner { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 560px; max-width: 96%; }
.nl-heading { display: flex; flex-direction: column; gap: 10px; align-self: stretch; text-align: center; }
.nl-kicker { font-size: var(--text-h1); }
.nl-display { position: relative; font-size: var(--text-d2); }
.nl-sub { width: 492px; max-width: 100%; margin-bottom: 25px; font-family: var(--font-system); text-align: center; line-height: 1.5; }
/* Kit forms (the project brief and the lead magnet pop-up). Kit's script drives submit, spinner and messages. */
.formkit-form { max-width: none; width: 100%; }
.formkit-submit { position: relative; }
.formkit-spinner { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; gap: 4px; }
.formkit-spinner > div { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: kit-bounce 1.4s infinite ease-in-out both; }
.formkit-spinner > div:nth-child(1) { animation-delay: -0.32s; }
.formkit-spinner > div:nth-child(2) { animation-delay: -0.16s; }
@keyframes kit-bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }
.formkit-submit[data-active] .formkit-spinner { display: flex; }
.formkit-submit[data-active] > span { opacity: 0; }
.formkit-alert { list-style: none; margin: 0; padding: 0; font-family: var(--font-system); font-size: 15px; line-height: 1.5; text-align: center; }
.formkit-alert:empty { display: none; }
.formkit-alert-error { margin-bottom: 12px; color: #FF9C8A; }
.formkit-alert-success { padding: 16px 0; font-size: var(--text-p-lg); color: var(--color-ink-inverse); }
.sticker { position: absolute; transform-origin: 0 0; }
.sticker--close { right: 57px; top: -38.898px; width: 110px; height: 36.5px; rotate: 23.42deg; }
.nl-word { position: relative; display: inline-block; }
/* The cycling mark sits upright, centred directly above the word. */
.logo-cycle--sticker { position: absolute; left: 50%; top: -48px; width: 110px; height: 37px; transform: translateX(-50%); }
.logo-cycle--sticker img { object-position: center; }

.nl-copy { padding: var(--section-pad) 20px; background: var(--color-bg); }
.nl-copy p { max-width: 860px; margin-inline: auto; font-family: var(--font-system); font-size: var(--text-h3); line-height: 1.2; letter-spacing: -0.64px; text-align: center; white-space: pre-line; }

.nl-grid { display: flex; flex-direction: column; align-items: center; padding: var(--section-pad) 64px; background: var(--color-bg); }
.nl-grid .section-heading { padding-bottom: 0; font-size: var(--text-d2); color: #0C0A08; }
.cards-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; max-width: 1312px; margin-top: 64px; }
.card {
  transition: background 200ms ease;
  display: flex; flex-direction: column; justify-content: space-between;
  aspect-ratio: 1.58416 / 1; padding: 24px;
  background: var(--color-card-light); border: 1px solid var(--color-card-light-border); border-radius: 18px;
  color: #0C0A08; font-family: var(--font-system);
}
.card:hover { background: #F2F2F2; }
.card-top { display: flex; align-items: center; justify-content: space-between; }
.card-top h3 { font-size: 24px; font-weight: 400; line-height: 28px; white-space: nowrap; }
.card-icon { padding: 8px; border-radius: 12px; }
.card-icon .material-icons-outlined { font-size: 24px; line-height: 24px; color: #0C0A08; }
.card p { max-width: 340px; font-size: 16px; line-height: 1.5; }

/* ---------- progressive bitmap load ----------
   A canvas sits over the image while the ladder runs (32 → 64 → 128 → 256 → full),
   hard-edged blocks anchored to the image's top-left. */
.abl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges; pointer-events: none; z-index: 1; }
.abl-hidden { visibility: hidden; }

/* ---------- confirmation pages (full-screen, /brief-confirmed and /lm-confirmed) ----------
   The Paper "Project Form — 08 Success" state taken out of its modal and given the whole viewport. */
.btn--ghost { background: transparent; color: var(--color-ink); border: 1px solid var(--color-black-20); }
.btn--ghost:hover { opacity: 1; border-color: var(--color-ink); }
.page-confirmed { min-height: 100svh; display: flex; flex-direction: column; }
.confirmed { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 96px 24px; }
.confirmed-brand { position: absolute; top: 24px; left: 24px; display: flex; align-items: center; height: 26px; }
.confirmed-mark { width: 73px; height: 26px; }
.confirmed-actions .btn:not(.btn--ghost) { font-weight: 500; }
.confirmed-actions .btn--ghost { gap: 10px; }
.confirmed-actions .btn svg { flex-shrink: 0; }
.confirmed-inner { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 720px; max-width: 100%; }
.confirmed-badge { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-ink-inverse); }
.confirmed-heading { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.confirmed-kicker { font-size: var(--text-h1); }
.confirmed-display { font-size: var(--text-d2); }
.confirmed-sub { width: 404px; max-width: 100%; font-size: var(--text-p-lg); text-align: center; color: var(--color-black-60); }
.confirmed-actions { display: flex; align-items: center; gap: 12px; padding-top: 8px; }
.confirmed-foot { position: absolute; bottom: 24px; left: 24px; font-size: var(--text-caps-sm); color: var(--color-black-60); }

/* ---------- project brief modal ----------
   Mirrors the Paper "Project Form — 01…07" desktop and mobile boards: one question per step,
   Enter or Next moves on once the step is filled in, arrows bottom-right step back and forward. */
.brief { position: fixed; inset: 0; z-index: 100; }
.brief-backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 72%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: brief-fade 640ms ease both; }
/* The sheet settles in out of a blur: soft and slow rather than a snap. Fill-mode backwards so
   the blur/transform is gone from the computed style once it lands (crisp text, no stray layer). */
.brief-modal {
  position: absolute; inset: 40px; width: auto; max-width: none; display: flex; flex-direction: column;
  background: var(--color-bg); color: var(--color-ink); border-radius: 12px; overflow: hidden;
  animation: brief-rise 760ms cubic-bezier(.22, .8, .2, 1) backwards;
}
@keyframes brief-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes brief-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes brief-rise { from { opacity: 0; transform: translateY(28px) scale(0.98); filter: blur(16px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes brief-sink { from { opacity: 1; transform: none; filter: blur(0); } to { opacity: 0; transform: translateY(20px) scale(0.985); filter: blur(14px); } }
.brief.is-closing .brief-backdrop { animation: brief-fade-out 420ms ease forwards; }
.brief.is-closing .brief-modal { animation: brief-sink 420ms cubic-bezier(.4, 0, .6, 1) forwards; }
.brief.is-closing { pointer-events: none; }
.brief-progress { position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--color-black-10); z-index: 2; }
.brief-progress-fill { width: 14.3%; height: 4px; background: var(--color-ink); transition: width 640ms cubic-bezier(.22, .8, .2, 1); }
.brief-top { position: absolute; top: 24px; right: 24px; z-index: 2; }
.brief-close { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-card); transition: background 160ms ease; }
.brief-close:hover { background: var(--color-black-05); }
.brief-body { position: relative; flex: 1; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; padding: 88px 40px; }
.brief-step { display: none; width: 960px; max-width: 100%; margin: auto; flex-direction: column; gap: 40px; }
.brief-step.is-active { display: flex; }
/* Changing step: the finished step lifts away and blurs out (frozen in place, out of the flow)
   while the next one blurs in from below, title first and each block a beat behind.
   Going back runs the same thing downward. Fill-mode backwards on the incoming blocks so the
   filter/transform leave the computed style once they land. */
.brief-step.is-leaving { display: flex; position: absolute; left: 40px; right: 40px; margin: 0 auto; pointer-events: none; z-index: 0; }
.brief-step.leave-up { animation: brief-step-leave-up 560ms cubic-bezier(.4, 0, .2, 1) forwards; }
.brief-step.leave-down { animation: brief-step-leave-down 560ms cubic-bezier(.4, 0, .2, 1) forwards; }
.brief-step.slide-up > *, .brief-step.slide-down > * { animation: brief-step-up 680ms cubic-bezier(.22, .8, .2, 1) backwards; animation-delay: 120ms; }
.brief-step.slide-down > * { animation-name: brief-step-down; }
.brief-step.slide-up > :nth-child(2), .brief-step.slide-down > :nth-child(2) { animation-delay: 200ms; }
.brief-step.slide-up > :nth-child(3), .brief-step.slide-down > :nth-child(3) { animation-delay: 280ms; }
.brief-step.slide-up > :nth-child(4), .brief-step.slide-down > :nth-child(4) { animation-delay: 360ms; }
.brief-step.slide-up > :nth-child(n+5), .brief-step.slide-down > :nth-child(n+5) { animation-delay: 440ms; }
@keyframes brief-step-up { from { opacity: 0; transform: translateY(36px); filter: blur(12px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes brief-step-down { from { opacity: 0; transform: translateY(-36px); filter: blur(12px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes brief-step-leave-up { from { opacity: 1; transform: none; filter: blur(0); } to { opacity: 0; transform: translateY(-36px); filter: blur(12px); } }
@keyframes brief-step-leave-down { from { opacity: 1; transform: none; filter: blur(0); } to { opacity: 0; transform: translateY(36px); filter: blur(12px); } }
.brief-step[data-step="2"], .brief-step[data-step="3"], .brief-step[data-step="4"], .brief-step[data-step="5"], .brief-step[data-step="6"], .brief-step[data-step="7"] { gap: 48px; }
/* Paper 03 Bottleneck vs 03 (Other selected): the step tightens once the Other field is open */
.brief-step[data-step="3"]:has(> .brief-other:not([hidden])), .brief-step[data-step="4"]:has(> .brief-other:not([hidden])) { gap: 40px; }
/* Each icon comes in two cuts: the desktop boards' and the mobile boards' (round caps, their own sizes) */
.brief-ico-m { display: none; }
.brief-heading { display: flex; flex-direction: column; gap: 12px; }
.brief-title { font-size: var(--text-h1); line-height: 1; letter-spacing: 0; }
.brief-sub { font-size: var(--text-p-lg); line-height: 1.5; color: var(--color-black-60); }
.brief-fields { display: flex; flex-direction: column; gap: 40px; width: 100%; }
.brief-fields--tight { gap: 24px; }
.brief-field { position: relative; display: flex; flex-direction: column; gap: 12px; width: 100%; }
.brief-label { font-size: var(--text-p-lg); font-weight: 500; line-height: 1.5; }
.brief-input {
  width: 100%; padding: 0 0 10px; border: 0; border-bottom: 1px solid var(--color-black-20); border-radius: 0; background: none;
  font-family: var(--font-body); font-size: 32px; line-height: 1.2; letter-spacing: var(--tracking-body); color: var(--color-ink);
  transition: border-color 200ms ease;
}
.brief-input::placeholder { color: var(--color-black-40); opacity: 1; }
.brief-input:focus { outline: none; border-bottom: 2px solid var(--color-ink); padding-bottom: 9px; }
.brief-textarea { min-height: 96px; resize: vertical; }
.brief-phone { display: flex; align-items: flex-end; gap: 16px; width: 100%; }
.brief-prefix { position: relative; display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding-bottom: 10px; border-bottom: 1px solid var(--color-black-20); font-size: 32px; line-height: 1.2; color: var(--color-ink); cursor: pointer; }
.brief-prefix svg { color: var(--color-black-40); }
.brief-prefix select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.brief-prefix:focus-within { border-bottom: 2px solid var(--color-ink); padding-bottom: 9px; }
.brief-phone .brief-input { flex: 1; min-width: 0; }
.brief-error { display: none; font-size: var(--text-caps-sm); line-height: 1.4; color: var(--color-accent-dark); }
.is-error > .brief-error, .is-error .brief-error { display: block; }
.brief-field.is-error .brief-input, .brief-field.is-error .brief-prefix { border-bottom-color: var(--color-accent-dark); }
.brief-field.is-error .brief-select-trigger { border-bottom-color: var(--color-accent-dark); }
/* dropdown */
.brief-select { position: relative; }
.brief-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 0 0 10px; border-bottom: 1px solid var(--color-black-20); font-size: 32px; line-height: 1.2; letter-spacing: var(--tracking-body); color: var(--color-black-40); text-align: left; transition: border-color 200ms ease; }
.brief-select-trigger svg { color: var(--color-ink); flex-shrink: 0; transition: transform 200ms ease; }
.brief-select-trigger[aria-expanded="true"], .brief-select-trigger:focus-visible { outline: none; border-bottom: 2px solid var(--color-ink); padding-bottom: 9px; }
.brief-select-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.brief-select.has-value .brief-select-trigger { color: var(--color-ink); }
.brief-select-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 3; width: 100%; max-width: 420px; margin: 0; padding: 8px; list-style: none; background: var(--color-bg); border: 1px solid var(--color-black-20); border-radius: 12px; box-shadow: 0 12px 32px rgb(0 0 0 / 10%); animation: brief-fade 140ms ease both; }
.brief-select-menu button { display: flex; align-items: center; width: 100%; height: 44px; padding: 0 12px; border-radius: var(--radius-card); font-size: var(--text-p-body); line-height: 1.5; letter-spacing: var(--tracking-body); text-align: left; transition: background 120ms ease; }
.brief-select-menu button:hover, .brief-select-menu button:focus-visible, .brief-select-menu button[aria-selected="true"] { background: var(--color-black-05); outline: none; }
/* multiple choice */
.brief-choices { position: relative; display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 720px; }
.brief-choice { display: flex; align-items: center; gap: 14px; width: 100%; padding: 15px 17px; border: 1px solid var(--color-black-20); border-radius: 12px; background: var(--color-bg); font-size: var(--text-p-lg); line-height: 1.5; letter-spacing: var(--tracking-body); text-align: left; color: var(--color-ink); transition: border-color 140ms ease, background 140ms ease, transform 140ms ease; }
.brief-choice:hover { background: var(--color-black-05); }
.brief-choice:active { transform: scale(0.995); }
.brief-choice:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.brief-key { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border: 1px solid var(--color-black-20); border-radius: var(--radius-pill); font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0; transition: background 140ms ease, color 140ms ease; }
.brief-choice[aria-checked="true"] { padding: 14px 16px; border: 2px solid var(--color-ink); }
.brief-choice[aria-checked="true"] .brief-key { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-ink-inverse); }
.brief-choices.is-error .brief-choice { border-color: var(--color-accent-dark); }
.brief-other { max-width: 720px; animation: brief-step-up 480ms cubic-bezier(.22, .8, .2, 1) backwards; }
/* actions + nav */
.brief-actions { display: flex; align-items: center; gap: 16px; }
.brief .btn { font-weight: 500; }
.brief-hint { font-size: var(--text-caps-sm); line-height: 1.5; color: var(--color-black-40); }
.brief-alert { margin: -24px 0 0; color: var(--color-accent-dark); font-family: var(--font-body); }
.brief-foot { position: absolute; right: 32px; bottom: 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brief-next--mobile { display: none; }
.brief-nav { display: flex; gap: 4px; }
.brief-nav-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-card); background: var(--color-ink); color: var(--color-ink-inverse); transition: background 160ms ease, color 160ms ease; }
.brief-nav-btn:disabled { background: var(--color-black-10); color: var(--color-black-40); cursor: default; }
/* sending state (Paper "Project Form — 07 Sending"): takes over the modal the instant Submit is pressed, until the page moves to /brief-confirmed */
.brief-sending { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; background: var(--color-bg); animation: brief-fade 200ms ease both; }
.brief-sending-ring { width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--color-black-10); border-top-color: var(--color-ink); animation: brief-spin 900ms linear infinite; }
@keyframes brief-spin { to { transform: rotate(360deg); } }
.brief-sending-text { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.brief-sending-title { font-size: var(--text-h1); line-height: 1; letter-spacing: 0; }
.brief-sending-sub { font-size: var(--text-p-lg); line-height: 1.5; color: var(--color-black-60); }
.brief.is-sending .brief-progress-fill { animation: brief-pulse 1.2s ease-in-out infinite; }
@keyframes brief-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.brief.is-sending .brief-close, .brief.is-sending .brief-foot { visibility: hidden; }
body.brief-open { overflow: hidden; }
/* the brief's honeypot: a field no person sees or tabs into; /api/brief drops anything that fills it */
.brief-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* ---------- lead magnet pop-up ----------
   Mirrors the Paper "Lead Magnet Pop-up" boards: the project brief cut to two steps, first name
   and email, then the bottleneck question. Same sheet, fields, choices, arrows and keyboard. */
.btn--lg { height: 56px; padding-inline: 32px; }
.brief--lm .brief-step[data-step="2"] { gap: 40px; }
@keyframes brief-rise-mobile { from { opacity: 0; transform: translateY(32px); filter: blur(16px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes brief-sink-mobile { from { opacity: 1; transform: none; filter: blur(0); } to { opacity: 0; transform: translateY(24px); filter: blur(14px); } }
@media (prefers-reduced-motion: reduce) { .brief-backdrop, .brief-modal, .brief.is-closing .brief-backdrop, .brief.is-closing .brief-modal, .brief-step.slide-up > *, .brief-step.slide-down > *, .brief-step.leave-up, .brief-step.leave-down, .brief-other, .brief-select-menu, .brief-sending, .brief.is-sending .brief-progress-fill { animation: none; } }

/* ---------- scroll reveal for long copy ----------
   Each letter starts dim and fills to full opacity as the paragraph moves up the viewport. */
[data-reveal] .rv { opacity: 0.28; }
@media (prefers-reduced-motion: reduce) { [data-reveal] .rv { opacity: 1; } }

/* ---------- mobile ---------- */
@media (max-width: 767px) {
  :root { --section-pad: 80px; --section-pad-x: 20px; }
  .nav { padding: 12px 20px; }
  .nav-links { display: none; }
  .nav-menu-btn { display: flex; }

  /* V2 mobile: a 76px bar with the pill and a two-line menu; the five-line headline at 104px on a 390 screen */
  .nav--v2 { padding: 10px 20px; gap: 12px; }
  .nav--v2 .brand { flex: 0 0 auto; height: 28px; }
  .nav--v2 .logo-cycle { width: 78px; height: 28px; }
  .nav--v2 .nav-cta { height: 34px; margin-left: auto; padding-inline: 16px; font-size: var(--text-p-sm); }
  .nav--v2 .nav-menu-btn { width: 36px; height: 36px; margin-right: -8px; }

  html[data-page-theme] { --nav-h: 56px; }
  .hero { min-height: calc(100vh - 56px); min-height: calc(100svh - 56px); }
  .hero-title { padding: 24px 12px 40px; }
  .hero-lines { font-size: min(26.67vw, 12.3svh); }
  .hero-lines--wide { display: none; }
  .hero-lines--narrow { display: flex; }
  .hero-lines--narrow .hero-line:first-child { gap: 0.096em; }
  .hero-lines--narrow .hero-tile { width: 0.692em; height: 0.817em; }
  .hero-lines--narrow .hero-tile--can { height: 0.865em; }
  .hero-lines--narrow .hero-line--seal { gap: 0.077em; }
  .hero-lines--narrow .hero-seal { width: 0.846em; }
  .hero-lines--narrow .hero-seal img { width: 0.885em; }
  .hero-foot { flex-direction: column-reverse; gap: 14px; padding: 0 20px 28px; }
  .now-building { width: auto; }
  .now-bars { height: 22px; }
  .now-building > span:last-child { font-size: 12px; }
  .hero-blurb { width: 100%; font-size: var(--text-p-body-mobile, 14px); line-height: 1.3; }

  .problem { flex-direction: column; gap: 72px; padding: var(--section-pad) 20px 88px; }
  .problem-copy { order: -1; flex: none; width: 100%; gap: 40px; }
  .problem-paras { gap: 28px; }
  .problem-paras p { font-size: 25.6px; line-height: 1.15; letter-spacing: -0.02em; }
  .founder-who { font-size: 14px; }
  .stories { flex: none; width: 100%; }
  .stories-count { font-size: 14px; }
  .stories-tag { padding-top: 32px; font-size: 12px; }
  .stories-stage { padding-top: 28px; }
  .story { gap: 32px; }
  .story-quote { font-size: 20.8px; line-height: 1.3; }
  .story-by { gap: 14px; }
  .story-avatar { flex-basis: 52px; width: 52px; height: 52px; }
  .story-avatar--mark img { width: 32px; height: 32px; }
  .story-name { font-size: 16px; }
  .story-role { font-size: 14px; }

  .work { padding: var(--section-pad) 20px; gap: 24px; }
  .section-heading { font-size: 64px; padding-bottom: 24px; }
  .work-cards { flex-direction: column; gap: 16px; }
  .work-card { flex: none; height: 340px; }
  .work-figure .eyebrow { font-size: 6px; }
  .work-figure .display { font-size: var(--text-h1); }

  .services-grid { width: 100%; }
  .svc-feature { display: flex; flex-direction: column; border-right: 1px solid var(--color-rule); }
  .svc-feature .svc-art { order: -1; aspect-ratio: auto; height: 300px; padding-inline: 16px; overflow: hidden; }
  .svc-cards { grid-template-columns: 1fr; }
  .svc-card .svc-art { aspect-ratio: auto; height: 300px; }
  .svc-word .display, .svc-card .svc-word .display { font-size: 48px; }
  /* the desktop anchors scaled to the 48px word, so each sticker keeps its desktop relationship to the word's top-left */
  .svc-mark--samsung { left: -39px; top: -9px; width: 65px; height: 28px; }
  .svc-mark--ikea { left: -24px; top: -14px; }
  .svc-mark--hotwheels { left: -43px; top: -7px; }
  .svc-mark--lego { left: -28px; top: -6.5px; }
  /* Service copy on phones: the real system font (SF on iOS) at regular weight, as the Paper mobile
     board has it. "SF Pro Display" is not a family iOS exposes to CSS, so without this the phone
     fell through to Helvetica Neue, whose regular reads a step heavier. */
  .svc-title, .svc-desc { font-family: -apple-system, system-ui, var(--font-system); font-weight: 300; } /* one step under regular: on the phone regular still read as semibold */
  /* one size for all four service titles on mobile: the feature matches the cards */
  .svc-title, .svc-feature .svc-title { font-size: var(--text-h4); letter-spacing: -0.48px; line-height: 1.4; }

  .cta-inner { width: 100%; }
  .cta-kicker { font-size: 32px; }
  .cta-display { font-size: 80px; }
  .cta-inner > p:not(.display) { width: 100%; }

  .about-row { width: 100%; padding-inline: 15px; }
  .about-heading, .about-copy { flex: 0 0 100%; max-width: 100%; }
  .about-heading { margin-bottom: 24px; }
  .about-lead { margin-bottom: 24px; font-size: 25.6px; }
  .marquee { margin-top: 64px; }

  .faq-title { padding-bottom: 24px; font-size: 32px; }

  .footer { padding: 64px 20px 24px; }
  .footer-top { flex-direction: column; gap: 40px; }
  .footer-cols { flex-direction: column; gap: 32px; }
  .footer-col { width: 100%; }
  .footer-brand { width: 100%; align-items: flex-end; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }

  .nl-hero { height: auto; padding: 80px 0; }
  .nl-hero:not(.nl-close) { min-height: calc(100svh - 65px); }
  .nl-inner { width: 100%; max-width: 96%; }
  .nl-kicker { font-size: 32px; }
  .nl-display { font-size: 80px; }
  .nl-sub { width: 100%; }
  .sticker--close { right: 76px; top: -19px; width: 60px; height: 20px; }
  .logo-cycle--sticker { top: -31px; width: 66px; height: 22px; }
  .nl-copy p { font-size: 22.4px; }
  .nl-grid { padding: var(--section-pad) 20px; }
  .nl-grid .section-heading { font-size: 80px; }
  .cards-grid { grid-template-columns: 1fr; margin-top: 40px; }
  .confirmed { padding: 72px 24px; }
  .confirmed-brand { top: 20px; left: 20px; height: 22px; }
  .confirmed-mark { width: 62px; height: 22px; }
  .confirmed-inner { gap: 28px; }
  .confirmed-badge { width: 48px; height: 48px; }
  .confirmed-badge svg { width: 22px; height: 22px; }
  .confirmed-heading { gap: 6px; }
  .confirmed-kicker { font-size: 32px; }
  .confirmed-display { font-size: min(120px, 32vw); }
  .confirmed-sub { width: 100%; max-width: 320px; font-size: 16px; }
  .confirmed-actions { flex-direction: column; gap: 10px; width: 100%; }
  .confirmed-actions .btn { width: 100%; height: 48px; }
  .confirmed-foot { bottom: 20px; left: 20px; }

  /* project brief: full-screen sheet */
  .brief-modal { inset: 0; border-radius: 0; animation: brief-rise-mobile 720ms cubic-bezier(.22, .8, .2, 1) backwards; }
  .brief.is-closing .brief-modal { animation: brief-sink-mobile 400ms cubic-bezier(.4, 0, .6, 1) forwards; }
  .brief-step.is-leaving { left: 24px; right: 24px; }
  .brief-top { position: static; display: flex; justify-content: flex-end; align-items: center; height: 56px; padding: 0 16px; margin-top: 4px; flex-shrink: 0; }
  .brief-body { padding: 8px 24px 24px; }
  .brief-step { margin: 0; gap: 32px; }
  .brief-step[data-step="2"] { gap: 32px; } /* Paper mobile 02 Brand keeps 01's 32 */
  .brief-step[data-step="3"], .brief-step[data-step="4"], .brief-step[data-step="5"], .brief-step[data-step="6"], .brief-step[data-step="7"] { gap: 28px; }
  .brief-step[data-step="3"]:has(> .brief-other:not([hidden])), .brief-step[data-step="4"]:has(> .brief-other:not([hidden])) { gap: 24px; } /* Paper mobile 03 (Other selected) */
  .brief-ico-d { display: none; }
  .brief-ico-m { display: block; }
  .brief-heading { gap: 10px; }
  .brief-title { font-size: var(--text-h2); }
  .brief-sub { font-size: var(--text-button); }
  .brief-fields { gap: 24px; }
  .brief-fields--tight { gap: 20px; }
  .brief-field { gap: 6px; }
  .brief-label { font-size: var(--text-button); }
  .brief-input, .brief-prefix, .brief-select-trigger { font-size: var(--text-h4); padding-bottom: 9px; }
  .brief-input:focus, .brief-prefix:focus-within, .brief-select-trigger[aria-expanded="true"], .brief-select-trigger:focus-visible { padding-bottom: 8px; }
  .brief-phone { gap: 12px; }
  .brief-prefix { gap: 4px; }
  .brief-select-menu { display: flex; flex-direction: column; gap: 2px; max-width: none; box-shadow: 0 12px 32px rgb(0 0 0 / 8%); }
  .brief-select-menu button { height: auto; padding: 12px 14px; line-height: 1; }
  .brief-choices { gap: 10px; }
  .brief-choice { gap: 12px; padding: 13px 14px; font-size: var(--text-p-body); line-height: 1.3; }
  .brief-choice[aria-checked="true"] { padding: 12px 13px; }
  .brief-key { width: 24px; height: 24px; font-size: 11px; }
  .brief-actions { display: none; }
  .brief-alert { margin: 0; }
  .brief-foot { position: static; flex-shrink: 0; padding: 16px 24px 28px; }
  .brief-next--mobile { display: inline-flex; padding-inline: 22px; }
  .brief-sending { gap: 28px; }
  .brief-sending-ring { width: 48px; height: 48px; }
  .brief-sending-title { font-size: var(--text-h2); }
  .brief-sending-sub { font-size: var(--text-button); max-width: 280px; }
  .btn--lg { height: 52px; padding-inline: 28px; }
  .brief--lm .brief-step[data-step="2"] { gap: 24px; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .section-heading { font-size: 88px; }
  .work-figure .display { font-size: 88px; }
  .svc-word .display { font-size: 88px; }
  .svc-card .svc-word .display { font-size: 48px; }
  .cta-display, .about-heading .cta-display, .nl-display, .nl-grid .section-heading, .confirmed-display { font-size: 140px; }
  .footer-col { width: 200px; }
  .nav--v2 { padding-inline: 24px; }
  .nav--v2 .brand { flex-basis: 150px; }
  .nav--v2 .nav-links { gap: 24px; }
  .nav--v2 .nav-links a { font-size: var(--text-p-body); }
  /* the stories stack under the copy until there is room for both columns */
  .problem { flex-direction: column; gap: 72px; }
  .problem-copy { order: -1; flex: none; width: 100%; max-width: 800px; }
  .problem-paras p { font-size: 32px; }
  .stories { flex: none; width: 100%; max-width: 560px; }
}

/* ---------- work page: work.airecompany.co (Paper: Portfolio Desktop — Masonry) ----------
   Black page, a bar with the cycling mark, the title dead centre and the brief button, then the
   masonry: 5px gutters and 5px corners, four columns on desktop, three on tablets, two on phones. */
body.work-page { background: var(--color-bg-inverse); color: var(--color-ink-inverse); --work-nav-h: 110px; }
/* The bar is fixed (the grid scrolls under it inside the ScrollSmoother wrapper); the grid starts
   below it. --work-nav-h is the bar's height at each size: 24px padding + the 62px title on desktop. */
.nav--work { position: fixed; top: 0; left: 0; right: 0; padding: 24px 16px; border-bottom: 0; }
.work-page #smooth-content { padding-top: var(--work-nav-h); }
.nav--work .brand, .work-nav-end { flex: 1 1 0; min-width: 0; }
.nav--work .brand { height: 34px; }
.nav--work .logo-cycle { width: 95px; height: 34px; }
.work-title {
  flex-shrink: 0;
  font-family: var(--font-display); font-weight: 700; font-stretch: condensed;
  font-size: 62px; line-height: 1; letter-spacing: 0; text-transform: uppercase; white-space: nowrap;
}
.work-nav-end { display: flex; justify-content: flex-end; }
.nav--work .nav-cta { padding-inline: 22px; letter-spacing: -0.03em; }
.work-grid { display: flex; align-items: flex-start; gap: 5px; padding: 0 5px 5px; }
.work-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.work-col img { width: 100%; height: auto; border-radius: 5px; background: #111; }
/* Reveal (work.js): blurred, faded and 40px low until the image has loaded and scrolled into view,
   then it settles; work.js staggers the images in a batch left to right. */
html.work-anim .work-col img {
  opacity: 0; transform: translateY(40px); filter: blur(14px);
  transition: opacity 900ms cubic-bezier(.2, .8, .2, 1), transform 900ms cubic-bezier(.2, .8, .2, 1), filter 900ms cubic-bezier(.2, .8, .2, 1);
}
html.work-anim .work-col img.is-in { opacity: 1; transform: none; filter: none; }
@media (min-width: 768px) and (max-width: 1099px) {
  body.work-page { --work-nav-h: 96px; }
  .work-title { font-size: 48px; }
}
@media (max-width: 767px) {
  body.work-page { --work-nav-h: 58px; }
  .nav--work { padding: 12px; gap: 8px; }
  .nav--work .brand { height: 28px; }
  .nav--work .logo-cycle { width: 78px; height: 28px; }
  .work-title { font-size: 32px; }
  .nav--work .nav-cta { height: 34px; padding-inline: 14px; font-size: var(--text-p-sm); }
}