/* Aire — site.css
   The design system and pages from Paper "Branding 2.0" → Aire Website:
     Desktop — Home A (Coming Soon), Desktop — Services (Home A) · B Index, Desktop — About (Home A) · A Cards,
     Mobile — A · Work Hidden, Mobile — About us, Mobile — Services, and the Project Form boards,
   each in its "· Light" board and its dark twin, re-skinned on 10/17/2026 with the Primary Design System
   (brand.ai): warm neutrals, seven image-sampled sub-accents, Suisse Intl for everything.
   The palette maps one-to-one onto the Paper --brandai-color-* tokens; the semantic colours (--bg, --ink, ...)
   are set per mode on top of it. The theme is <html data-mode="light|dark">: light unless the visitor chose dark,
   set by the head script and site.js and remembered.
   The lead magnet pages and the Spec Work page still run on style.css; nothing here touches them. */

@font-face { font-family: "Suisse Intl"; src: url("fonts/suisse-intl-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Suisse Intl"; src: url("fonts/suisse-intl-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  /* the Primary Design System palette (Paper --brandai-color-*) */
  --brandai-color-off-white: #F7F5F2;
  --brandai-color-light-grey: #EBE9E6;
  --brandai-color-border: #D2D2D2;
  --brandai-color-grey: #BBBAB3;
  --brandai-color-mid-grey: #A8A39F;
  --brandai-color-dark-grey: #8C877D;
  --brandai-color-black: #1B1B1B;
  --brandai-color-white: #FFFFFF;
  --brandai-color-dark-bg: #0A0A0A;
  --brandai-color-dark-panel: #0E0E0E;
  --brandai-color-dark-surface: #141414;
  --brandai-color-dark-raised: #1B1B1B;
  --brandai-color-dark-glass: #FFFFFF26;
  --brandai-color-dark-glass-hover: #FFFFFF40;
  --brandai-color-dark-rule: #FFFFFF66;
  --brandai-color-dark-ink-muted: #8C877D;
  --brandai-color-dark-ink: #F7F5F2;
  --brandai-color-scramble: #1B1B1B1A;        /* the hover scramble: the light ink at 10% */
  --brandai-color-dark-scramble: #FFFFFF1A;   /* the hover scramble: white at 10% */
  /* sub-accents: project tiles and cursor tags. Text on iris and lagoon is off-white, on the rest black. */
  --brandai-color-lagoon: #4B7E8C;
  --brandai-color-bloom: #C7748B;
  --brandai-color-petal: #8A84BA;
  --brandai-color-iris: #3268AC;
  --brandai-color-clay: #DAA594;
  --brandai-color-meadow: #B4BB62;
  /* type (Paper --brandai-font-sans, --brandai-text-*, --brandai-leading-*, --brandai-tracking-*, --brandai-button-*) */
  --font-suisse: "Suisse Intl", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text-14: 14px;  --leading-18: 18px;
  --text-22: 22px;  --leading-28: 28px;
  --text-13-5: 13.5px; --leading-17: 17px;
  --tracking: -0.02em;          /* --brandai-tracking-heading: all running text */
  --tracking-display: -0.03em;  /* the index names and the mobile brief titles */
  --tracking-hero: -0.04em;     /* the 54px display headlines */
  --tracking-button: -0.31px;   /* --brandai-button-tracking */
  /* space and shape (unchanged: 40 tall buttons, pill 40, small 8, tile 10, 16 inline) */
  --pd3: 4px; --pd2: 8px; --pd: 16px;
  --br2: 8px; --radius-sm: 10px; --radius-pill: 40px;
  --sidebar-w: 397px;
  --edge: transparent;          /* cards, panels, tiles and the form sheet have no edge line: a smooth finish */
  --ease-out: cubic-bezier(.22, .8, .2, 1);
  /* derived: these follow --ink in either mode */
  --ink-72: color-mix(in srgb, var(--ink) 72%, transparent);
  --ink-40: color-mix(in srgb, var(--ink) 40%, transparent);
}

/* light, the default: the "· Light" boards (Paper Primary Design System) */
:root, :root[data-mode="light"] {
  color-scheme: light;
  --bg: var(--brandai-color-off-white);
  --panel: var(--brandai-color-white);            /* hero panel */
  --card: var(--brandai-color-white);             /* sidebar cards, pills */
  --card-in-panel: var(--brandai-color-off-white);/* tiles and quote cards on the hero panel */
  --card-active: var(--brandai-color-light-grey); /* card and tile hover */
  --surface: var(--brandai-color-white);          /* the form sheet, mobile cards and tiles */
  --block: var(--brandai-color-light-grey);       /* the mobile About / Services panels */
  --chip: var(--brandai-color-light-grey);
  --chip-hover: var(--brandai-color-border);
  --surface-hover: var(--brandai-color-border);
  --menu: var(--brandai-color-border);            /* the brief's select menu */
  --control: var(--brandai-color-black);
  --control-hover: color-mix(in srgb, var(--brandai-color-black) 65%, transparent);
  --control-glyph: var(--brandai-color-off-white);
  --hairline: color-mix(in srgb, var(--brandai-color-black) 10%, transparent); /* rules and the select menu only */
  --hairline-strong: var(--hairline);
  --hairline-sheet: var(--hairline);
  --rule: color-mix(in srgb, var(--brandai-color-black) 20%, transparent);
  --ring-track: var(--brandai-color-border);
  --card-glow: radial-gradient(ellipse 76% 130% at 24% 65%, #FFFFFF 0%, #E9E9E9 100%);
  --ink: var(--brandai-color-black);
  --ink-muted: color-mix(in srgb, var(--brandai-color-black) 70%, transparent);
  --icon-muted: var(--brandai-color-dark-grey);
  --on-ink: var(--brandai-color-off-white);       /* type on ink fills */
  --glyph: var(--brandai-color-scramble);         /* the hover-scramble glyphs: the ink at 10% (alpha, not opacity) */
  --glow: rgba(67, 67, 67, 0.05);
  --figure-filter: invert(1);
  --toggle-knob-x: 0px;
}
/* dark: the dark boards (Paper Primary Design System · Dark, --brandai-color-dark-*) */
:root[data-mode="dark"] {
  color-scheme: dark;
  --bg: var(--brandai-color-dark-bg);
  --panel: var(--brandai-color-dark-panel);      /* flat: no glow in dark mode */
  --card: var(--brandai-color-dark-surface);
  --card-in-panel: var(--brandai-color-dark-surface);
  --card-active: var(--brandai-color-dark-raised);/* not on the boards: one step above the cards */
  --surface: var(--brandai-color-dark-surface);
  --block: var(--brandai-color-dark-surface);
  --chip: var(--brandai-color-dark-glass);
  --chip-hover: var(--brandai-color-dark-glass-hover);
  --surface-hover: var(--brandai-color-dark-glass-hover);
  --menu: #4F4F4F;                                /* the board's glass-hover over the sheet, made opaque */
  --control: var(--brandai-color-dark-glass);
  --control-hover: var(--brandai-color-dark-glass-hover);
  --control-glyph: var(--brandai-color-dark-ink);
  --hairline: color-mix(in srgb, var(--brandai-color-dark-ink) 8%, transparent);
  --hairline-strong: var(--hairline);
  --hairline-sheet: color-mix(in srgb, var(--brandai-color-dark-ink) 12%, transparent);
  --rule: color-mix(in srgb, var(--brandai-color-dark-ink) 20%, transparent);
  --ring-track: var(--brandai-color-dark-rule);
  --card-glow: radial-gradient(ellipse 76% 130% at 24% 65%, #6B6B6B 0%, #393939 100%);
  --ink: var(--brandai-color-dark-ink);
  --ink-muted: var(--brandai-color-dark-ink-muted);
  --icon-muted: var(--brandai-color-dark-ink-muted);
  --on-ink: var(--brandai-color-dark-bg);
  --glyph: var(--brandai-color-dark-scramble);    /* the hover-scramble glyphs: white at 10% (alpha, not opacity) */
  --glow: transparent;                            /* the hero panel is one flat colour */
  --figure-filter: none;
  --toggle-knob-x: 24px;
}
/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-suisse);
  font-size: var(--text-14);
  line-height: var(--leading-18);
  font-weight: 400;
  letter-spacing: var(--tracking);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
:root[data-mode-ready] body,
:root[data-mode-ready] .card, :root[data-mode-ready] .pill, :root[data-mode-ready] .tile,
:root[data-mode-ready] .hero, :root[data-mode-ready] .toggle, :root[data-mode-ready] .toggle-knob {
  transition: background-color 400ms ease, color 400ms ease, border-color 400ms ease, transform 400ms var(--ease-out);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, svg { display: block; }
h1, h2, h3, p, figure, blockquote { margin: 0; font-weight: inherit; }
h1, h2, h3 { font-size: inherit; line-height: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

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

/* which layout shows: the desktop boards from 1025px, the mobile boards below (Paper --breakpoint-1025) */
@media (min-width: 1025px) { .only-mobile { display: none !important; } }
@media (max-width: 1024px) { .only-desktop { display: none !important; } }

/* ---------- components ---------- */
/* pills: 40 tall, radius 40, 16 inline; labels on the button tokens (Paper "Coming Soon", "Start a Project", "Back") */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pd2);
  height: 40px; padding-inline: var(--pd); flex-shrink: 0;
  border-radius: var(--radius-pill);
  font-size: var(--text-14); line-height: var(--leading-18); font-weight: 400; letter-spacing: var(--tracking-button); white-space: nowrap;
}
.pill--card { background: var(--card); border: 1px solid var(--edge); }
.pill--chip { background: var(--chip); }
.pill--chip:hover { background: var(--chip-hover); }
.pill--ink { background: var(--ink); color: var(--on-ink); }
.pill--ink:hover { opacity: 0.86; }
.pill svg { flex-shrink: 0; }

/* theme toggle (Paper "Theme Toggle"): 62×38 track, 32px knob; the knob sits left in light, right in dark */
.toggle {
  position: relative; display: flex; align-items: center; flex-shrink: 0;
  width: 62px; height: 38px; padding: 3px; border-radius: 38px;
  background: var(--control);
}
.toggle-knob {
  width: 32px; height: 32px; border-radius: 50%; background: var(--chip);
  transform: translateX(var(--toggle-knob-x));
}

/* cards (Paper sidebar cards): radius 10, padding 16, no edge line (--edge) */
.card {
  position: relative; display: flex; gap: 12px;
  padding: var(--pd); border-radius: var(--radius-sm);
  background: var(--card); border: 1px solid var(--edge);
  overflow: hidden;
}
.card-text { display: flex; flex-direction: column; min-width: 0; }
.card-title { color: var(--ink); }
.card-sub { color: var(--ink-muted); }
a.card:hover { background: var(--card-active); }
.card--about { flex-direction: column; gap: 0; }
.card--project { height: 98px; }
.tile-mark {
  display: flex; align-items: center; justify-content: center;
  width: 65px; height: 65px; flex-shrink: 0; border-radius: var(--radius-sm);
  color: var(--brandai-color-black); font-size: 20px; line-height: 24px; font-weight: 400;
}
.tile-mark--iris { background: var(--brandai-color-iris); color: var(--brandai-color-off-white); }
.tile-mark--clay { background: var(--brandai-color-clay); }
.tile-mark--bloom { background: var(--brandai-color-bloom); }
.tile-mark--meadow { background: var(--brandai-color-meadow); }
.tile-mark--petal { background: var(--brandai-color-petal); }
.tile-mark--ink { background: var(--ink); color: var(--on-ink); }
.card--glow::before { content: ""; position: absolute; inset: 0; background: var(--card-glow); opacity: 0.4; }
.card--glow > * { position: relative; }
.card--dim { opacity: 0.68; }

/* the work list while it's coming soon: blurred, with the gloss chip over it */
.work { position: relative; display: flex; flex-direction: column; gap: 8px; }
.work-list { display: flex; flex-direction: column; gap: 8px; }
.work.is-coming-soon .work-list { filter: blur(9px); pointer-events: none; user-select: none; }
.deck { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 2px; }
.deck span { display: block; height: 10px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: var(--card); border: 1px solid var(--edge); opacity: 0.5; }
.deck span:first-child { width: calc(100% - 24px); }
.deck span:last-child { width: calc(100% - 48px); height: 8px; opacity: 0.25; }
/* The chip starts over the middle of the list (--cs-drop down from its top), rides up with the scroll until it is
   centred in the view, then holds there while the cards pass under it: a zero-height sticky row ahead of the list. */
.coming-soon { --cs-drop: 300px; display: none; position: sticky; top: calc(50vh - 30px - var(--cs-drop)); z-index: 5; height: 0; margin-bottom: -8px; pointer-events: none; }
.work.is-coming-soon .coming-soon { display: block; }
.sidebar .coming-soon { top: calc(50vh - 38px - var(--cs-drop)); } /* the sidebar's 8px top padding moves its sticky line */
.coming-soon img { position: absolute; left: 50%; top: var(--cs-drop); width: 224px; height: 60px; transform: translateX(-50%) rotate(-3deg); }
/* room past the end of the list, so there is enough scroll for the chip to reach the centre and hold a moment */
.sidebar:has(.work.is-coming-soon) .sb-cards { padding-bottom: max(0px, calc(50vh - 260px)); }
.m-page:has(.work.is-coming-soon) { padding-bottom: max(8px, calc(50vh - 260px)); }
/* the deck at the sidebar's bottom edge (motion.js): later cards tuck behind earlier ones */
.sb-cards .card { transform-origin: 50% 100%; will-change: transform; }
.card--about { z-index: 2; }
.sb-cards .work-list { position: relative; z-index: 1; }
.coming-soon .cs-light { display: none; }
:root[data-mode="light"] .coming-soon .cs-dark { display: none; }
:root[data-mode="light"] .coming-soon .cs-light { display: block; }

/* page tiles (Paper "Nav Tiles"): 52 tall, label left, ↗ right */
.tiles { display: flex; gap: 8px; }
.tile {
  flex: 1 1 0; display: flex; align-items: center; justify-content: space-between;
  height: 52px; padding-inline: var(--pd);
  border-radius: var(--radius-sm); background: var(--card); border: 1px solid var(--edge);
}
.tile:hover { background: var(--card-active); }
.tile svg { color: var(--icon-muted); flex-shrink: 0; }
.hero .tile { background: var(--card-in-panel); }
.hero .tile:hover { background: var(--card-active); }


/* floating cursors: the Aire app library cursors with name chips. Decorative only. */
.cursors { position: absolute; inset: 0; pointer-events: none; }
/* --fx/--fy/--fr are the float offsets motion.js loops; the design's own angle stays in --r */
.cur {
  --fx: 0px; --fy: 0px; --fr: 0deg;
  position: absolute; width: var(--s); height: var(--s); transform-origin: 0 0;
  transform: translate(var(--fx), var(--fy)) rotate(calc(var(--r, 0deg) + var(--fr)));
}
.cur .cursor-svg { width: 100%; height: 100%; }
.cur-chip {
  position: absolute; left: 70%; top: 85%;
  display: flex; align-items: center; height: 28px; padding: 0 9px; border-radius: 8px;
  font-size: 14px; line-height: 17px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap;
}
.cur-chip--you { background: var(--ink); color: var(--on-ink); }
.cur-chip--client { background: var(--brandai-color-petal); color: var(--brandai-color-black); }
.cur-chip--aire { background: var(--brandai-color-bloom); color: var(--brandai-color-black); }

/* the live cursor (partials/site-cursor.html, moved by motion.js): replaces the system cursor on mouse devices */
html.has-cursor, html.has-cursor * { cursor: none !important; }
.site-cursor, .site-cursor-tag { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; opacity: 0; transition: opacity 160ms ease; }
html:not(.has-cursor) .site-cursor, html:not(.has-cursor) .site-cursor-tag { display: none; }
html.cursor-on .site-cursor, html.cursor-on .site-cursor-tag { opacity: 1; }
.sc-icon { position: absolute; display: none; width: 30px; height: 30px; }
.sc-icon .cursor-svg { width: 100%; height: 100%; transition: transform 120ms ease; }
.site-cursor[data-state="default"] .sc-icon--default, .site-cursor[data-state="pointer"] .sc-icon--pointer,
.site-cursor[data-state="text"] .sc-icon--text, .site-cursor[data-state="grab"] .sc-icon--grab { display: block; }
/* each icon sits so its hotspot is the pointer: the arrow's tip, the fingertip, the centre of the I-beam and hand */
.sc-icon--default { left: -7.5px; top: -5px; }
.sc-icon--pointer { left: -11.5px; top: -6px; }
.sc-icon--text, .sc-icon--grab { left: -15px; top: -15px; }
.site-cursor.is-down .cursor-svg { transform: scale(0.88); }
.site-cursor-tag .cur-chip { left: 16px; top: 20px; height: 24px; padding: 0 8px; border-radius: 7px; font-size: 13px; line-height: 16px; pointer-events: none; }

/* the hover scramble (motion.js): the headlines rest as plain words; letters under the pointer swap to glyphs in Suisse
   Intl Medium in --glyph and settle back to the ink. Each headline line is held to one row of fixed height,
   so a wider scramble overflows sideways (centred) instead of wrapping, and the lines below never move */
.ch.is-scr { font-weight: 500; color: var(--glyph); }
[data-scramble] { display: block; }
.line { display: block; height: 1lh; white-space: nowrap; }
.line br { display: none; }
.headline .line, .m-headline .line { width: max-content; margin-left: 50%; transform: translateX(-50%); }

/* page moves: motion.js blurs these in; hidden until it starts so nothing flashes (the head script drops the class after 2.5s regardless) */
html.is-entering :is(.hero-top > *, .identity > *, .index-row, .quote-card, .m-page > .controls, .m-identity > *, .m-page > .tiles, .m-page > .work, .m-head > *, .m-block, .m-cta, .confirmed-inner > *) { opacity: 0; }
.identity picture, .m-identity picture { display: block; }

/* service / deliverable pills */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-pill { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px; background: var(--chip); font-size: 13px; line-height: 16px; white-space: nowrap; }
.tag { display: inline-flex; align-self: flex-start; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--surface-hover); font-size: 12px; line-height: 16px; white-space: nowrap; }

/* ---------- desktop shell: sidebar + hero panel (Paper "Desktop — Home A") ---------- */
.shell { display: flex; align-items: flex-start; min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; flex: 0 0 var(--sidebar-w); width: var(--sidebar-w);
  height: 100vh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  padding: 8px 0 8px 8px;
}
.sidebar::-webkit-scrollbar { display: none; }
.sb-top { display: flex; flex-direction: column; height: 278px; }
.controls { display: flex; align-items: center; justify-content: space-between; }
.clock { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: var(--text-22); line-height: var(--leading-28); }
.sb-cards { display: flex; flex-direction: column; gap: 8px; }

.main { flex: 1 1 auto; min-width: 0; padding: 8px; }
.hero {
  position: relative; display: flex; flex-direction: column;
  min-height: calc(100vh - 16px);
  border-radius: var(--br2); background: var(--panel); border: 1px solid var(--edge);
  overflow: hidden;
}
.hero-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 55% 45% at 50% 36%, var(--glow) 0%, transparent 70%); }
.hero--page .hero-glow { background: radial-gradient(ellipse 55% 38% at 50% 22%, var(--glow) 0%, transparent 70%); }
.hero-top { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 24px 24px 0; }
.hero-top:has(> :only-child) { justify-content: flex-end; }

/* the identity block: figure, glyph headline, floating cursors */
.identity { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; padding: 48px 24px; }
/* the home hero centres on the whole panel, not just the space under the Start a Project bar (64px), then lifts a
   touch for the optical centre: 88px more padding below than above moves the group up 44px */
.hero:not(.hero--page) .identity { padding: 24px 24px 112px; }
.figure { width: 104px; height: auto; filter: var(--figure-filter); }
/* the headline scales with the hero panel (1100px wide on the 1513px board) and stops at the board size. The box keeps
   the earlier 50px (48px) unit, which the cursor positions are measured in; the headline itself is 54/58 on it */
.headline-box { position: relative; width: 19.2em; max-width: 100%; font-size: clamp(28px, calc((100vw - 413px) / 22), 50px); }
.hl-page { width: 18.75em; font-size: clamp(28px, calc((100vw - 413px) * 0.04364), 48px); }
.headline {
  font-size: 1.08em; line-height: 1.0741; font-weight: 500; letter-spacing: var(--tracking-hero);
  text-align: center; color: var(--ink);
}
.hl-page .headline { font-size: 1.125em; }
.headline .br-d { display: inline; }
.subline { max-width: 520px; text-align: center; font-size: 18px; line-height: 24px; color: var(--ink-muted); }
.identity .tiles { width: 560px; max-width: 100%; padding-top: 24px; }
.identity--page { gap: 20px; padding: 40px 24px 64px; }

/* cursor positions on the desktop headline, in em of the 50px headline (Paper x / 50) */
.hl-home .cur--you      { --s: 0.8em;  --r: -6deg; left: -0.6em;  top: -1.32em; }
.hl-home .cur--client   { --s: 0.8em;  --r: 8deg;  left: 18em;    top: -1.56em; }
.hl-home .cur--text     { --s: 0.72em; --r: -10deg; left: -1.4em; top: 1.44em; }
.hl-home .cur--grab     { --s: 0.8em;  --r: 10deg; left: 19.8em;  top: 1.2em; }
.hl-home .cur--cross    { --s: 0.64em; --r: 0deg;  left: 2.6em;   top: 4em; }
.hl-home .cur--aire     { --s: 0.8em;  --r: -8deg; left: 16.24em; top: 3.96em; }
.hl-page .cur--you      { --s: 0.833em; --r: -6deg; top: -1.208em; }
.hl-page .cur--client   { --s: 0.833em; --r: 8deg;  top: -1.042em; }
.hl-page .cur--cross    { --s: 0.625em; --r: 0deg;  top: 1.917em; }
.hl-services .cur--you { left: 1.875em; }  .hl-services .cur--client { left: 16.04em; }  .hl-services .cur--cross { left: 0.833em; }
.hl-about .cur--you    { left: 0.833em; }  .hl-about .cur--client    { left: 17.08em; }  .hl-about .cur--cross    { left: 1.458em; }
.headline-box .cur-chip { font-size: 0.28em; height: 2em; padding: 0 0.65em; line-height: 1.2; border-radius: 0.57em; }

/* services index (Paper "Services Index", Desktop — Services · B) */
.index { position: relative; display: flex; flex-direction: column; padding: 0 24px 24px; }
.index-row { display: flex; align-items: flex-start; gap: 24px; padding: 22px 8px; border-top: 1px solid var(--hairline-strong); }
.index-row:last-child { border-bottom: 1px solid var(--hairline-strong); }
.index-num { width: 48px; flex-shrink: 0; padding-top: 8px; color: var(--ink-muted); }
.index-name { width: 300px; flex-shrink: 0; font-size: 32px; line-height: 36px; font-weight: 500; letter-spacing: var(--tracking-display); }
.index-desc { flex: 1; padding-top: 4px; font-size: 15px; line-height: 21px; color: var(--ink-72); }
.index-chips { width: 250px; flex-shrink: 0; padding-top: 2px; }

/* testimonial cards (Desktop — About · A) */
.quotes { position: relative; display: flex; gap: 8px; padding: 0 15px 15px; }
.quote-card {
  flex: 1 1 0; display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  min-height: 344px; padding: 18px; border-radius: var(--br2);
  background: var(--card-in-panel); border: 1px solid var(--edge);
}
.quote-head { display: flex; align-items: center; justify-content: space-between; }
.quote-top { display: flex; flex-direction: column; gap: 16px; }
.quote-head .tag { height: 26px; background: var(--chip); line-height: 15px; }
.quote-text { font-size: 20px; line-height: 26px; }
.quote-by { display: flex; flex-direction: column; }

/* narrower desktops: the index and quote rows tighten before the mobile layout takes over */
@media (max-width: 1280px) {
  .index-row { display: grid; grid-template-columns: 48px 1fr; column-gap: 24px; row-gap: 12px; }
  .index-num { grid-row: 1 / span 3; }
  .index-name, .index-chips { width: auto; }
  .index-desc { max-width: 600px; padding-top: 0; }
  .quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
  .quote-card { min-height: 300px; }
  .quote-text { font-size: 18px; line-height: 24px; }
}

/* ---------- mobile (Paper "Mobile — A · Work Hidden", "Mobile — About us", "Mobile — Services") ---------- */
.m-page { display: flex; flex-direction: column; gap: 8px; padding: 8px; min-height: 100vh; }
.m-page .controls { padding: 0; }
.m-page .card, .m-page .tile, .m-page .deck span { background: var(--surface); border: 0; }
.m-page .tile:hover { background: var(--surface-hover); }
.m-page .work-list { gap: 8px; }
.m-identity { position: relative; display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 48px 0 56px; }
.m-identity .figure { width: 57px; }
.m-headline-box { position: relative; width: 342px; max-width: 100%; margin-inline: auto; }
.m-headline { font-size: var(--text-22); line-height: var(--leading-28); font-weight: 500; text-align: center; letter-spacing: var(--tracking); }
.m-headline .br-d { display: none; }
.m-headline-box .cur-chip { height: 24px; padding: 0 8px; border-radius: 7px; font-size: 13px; line-height: 16px; }
.m-headline-box .cur--you    { --s: 30px; --r: -6deg; left: -10px; top: -54px; }
.m-headline-box .cur--client { --s: 30px; --r: 8deg;  left: 258px; top: -64px; }
.m-headline-box .cur--text   { --s: 28px; --r: -10deg; left: -18px; top: 40px; }
.m-headline-box .cur--grab   { --s: 30px; --r: 10deg; left: 334px; top: 30px; }
.m-headline-box .cur--cross  { --s: 26px; --r: 0deg;  left: 40px; top: 118px; }
.m-headline-box .cur--aire   { --s: 30px; --r: -8deg; left: 226px; top: 108px; }
.m-page .work { padding-bottom: 8px; }

.m-head { display: flex; flex-direction: column; gap: 16px; padding: 48px 16px 40px; }
.m-intro { font-size: var(--text-22); line-height: var(--leading-28); font-weight: 500; }
.m-blocks { display: flex; flex-direction: column; gap: 8px; }
.m-block { display: flex; flex-direction: column; gap: 24px; padding: 16px 16px 24px; border-radius: var(--br2); background: var(--block); }
.m-block-head { display: flex; align-items: center; justify-content: space-between; }
.m-block-text { font-size: var(--text-22); line-height: var(--leading-28); }
.m-block-list { display: flex; flex-direction: column; padding-top: 16px; color: var(--ink-muted); }
.m-block-head .t-muted, .m-quote-top .t-muted { flex-shrink: 0; }
.m-quote { gap: 48px; }
.m-quote .quote-by { display: flex; flex-direction: column; }
.m-quote-top { display: flex; flex-direction: column; gap: 16px; }
.m-cta { padding: 24px 0 16px; }
/* the small-radius button (Paper DS Buttons "04 · Inverted, small radius") */
.btn-block {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; padding-inline: var(--pd);
  border-radius: var(--br2); background: var(--ink); color: var(--on-ink);
  font-size: var(--text-13-5); line-height: var(--leading-17); letter-spacing: var(--tracking-button);
}
.btn-block:hover { opacity: 0.86; }

/* tablets get the mobile boards as a centred column rather than stretched edge to edge */
@media (min-width: 700px) and (max-width: 1024px) {
  .m-page { max-width: 600px; margin-inline: auto; }
}
@media (max-width: 380px) {
  .m-headline-box .cur--grab { left: auto; right: -14px; }
  .m-headline-box .cur--client { left: auto; right: 54px; }
}

/* ---------- project brief (Paper "Project Form — 01…07", "07 Sending"), restyled; markup and app.js unchanged ---------- */
.brief { position: fixed; inset: 0; z-index: 100; font-family: var(--font-suisse); }
.brief[hidden] { display: none; }
.brief-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: brief-fade 640ms ease both; }
.brief-modal {
  position: absolute; inset: 40px; display: flex; flex-direction: column; overflow: hidden; margin: 0;
  background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius-sm);
  color: var(--ink);
  animation: brief-rise 760ms var(--ease-out) 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(--chip); z-index: 2; }
.brief-progress-fill { width: 14.3%; height: 4px; background: var(--ink); transition: width 640ms var(--ease-out); }
.brief-top { position: absolute; top: 20px; left: 24px; right: 24px; z-index: 3; display: flex; align-items: center; justify-content: flex-end; pointer-events: none; }
.brief-top > * { pointer-events: auto; }
.brief-count { margin-right: auto; color: var(--ink-muted); font-size: var(--text-14); line-height: var(--leading-18); }
.brief-close { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--control); color: var(--control-glyph); transition: background 160ms ease; }
.brief-close:hover { background: var(--control-hover); }
.brief-body { position: relative; flex: 1; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; padding: 124px 40px 120px; }
.brief-step { display: none; width: 960px; max-width: 100%; margin: 0 auto; flex-direction: column; gap: 36px; }
.brief-step.is-active { display: flex; }
.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 var(--ease-out) 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(n+4), .brief-step.slide-down > :nth-child(n+4) { animation-delay: 360ms; }
@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-ico-m { display: none; }
.brief-heading { display: flex; flex-direction: column; gap: 10px; }
.brief-title { font-size: 54px; line-height: 58px; font-weight: 500; letter-spacing: var(--tracking-hero); }
.brief-sub { font-size: 16px; line-height: 21px; color: var(--ink-muted); }
.brief-fields { display: flex; flex-direction: column; gap: 28px; width: 100%; }
.brief-field { position: relative; display: flex; flex-direction: column; gap: 10px; width: 100%; }
.brief-label { font-size: var(--text-14); line-height: var(--leading-18); font-weight: 400; color: var(--ink); }
.brief-input {
  width: 100%; padding: 0 0 10px; margin: 0;
  border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: transparent;
  font-family: inherit; font-size: var(--text-22); line-height: var(--leading-28); letter-spacing: var(--tracking); color: var(--ink);
  transition: border-color 200ms ease;
}
.brief-input::placeholder { color: var(--ink-40); opacity: 1; }
.brief-input:focus { outline: none; border-bottom-color: var(--ink); }
.brief-textarea { min-height: 88px; resize: none; }
.brief-phone { display: flex; align-items: flex-end; gap: 12px; width: 100%; }
.brief-prefix { position: relative; display: flex; align-items: center; gap: 6px; flex-shrink: 0; padding-bottom: 10px; border-bottom: 1px solid var(--rule); font-size: var(--text-22); line-height: var(--leading-28); color: var(--ink); cursor: pointer; }
.brief-prefix svg { color: var(--icon-muted); }
.brief-prefix select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.brief-prefix:focus-within { border-bottom-color: var(--ink); }
.brief-phone .brief-input { flex: 1; min-width: 0; }
.brief-error { display: none; font-size: 13px; line-height: 18px; color: var(--brandai-color-bloom); }
.is-error > .brief-error, .is-error .brief-error { display: block; }
.brief-field.is-error .brief-input, .brief-field.is-error .brief-prefix, .brief-field.is-error .brief-select-trigger { border-bottom-color: var(--brandai-color-bloom); }
.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(--rule); font-size: var(--text-22); line-height: var(--leading-28); color: var(--ink-40); text-align: left; transition: border-color 200ms ease; }
.brief-select-trigger svg { color: var(--ink); flex-shrink: 0; transition: transform 200ms ease; }
.brief-select-trigger[aria-expanded="true"], .brief-select-trigger:focus-visible { outline: none; border-bottom-color: var(--ink); }
.brief-select-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.brief-select.has-value .brief-select-trigger { color: var(--ink); }
.brief-select-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 3; width: 100%; max-width: 240px; margin: 0; padding: 6px; list-style: none; background: var(--menu); border: 1px solid var(--hairline-sheet); border-radius: var(--br2); box-shadow: 0 16px 40px rgb(0 0 0 / 28%); animation: brief-fade 140ms ease both; }
.brief-select-menu button { display: flex; align-items: center; width: 100%; height: 36px; padding: 0 12px; border-radius: 6px; font-size: var(--text-14); line-height: var(--leading-18); 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(--chip); outline: none; }
.brief-choices { position: relative; display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 720px; }
.brief-choice { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--br2); background: var(--chip); font-size: 18px; line-height: 24px; text-align: left; color: var(--ink); transition: border-color 140ms ease, background 140ms ease, transform 140ms ease; }
.brief-choice:hover { background: var(--chip-hover); }
.brief-choice:active { transform: scale(0.995); }
.brief-key { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; border: 1px solid var(--rule); border-radius: 50%; font-size: 12px; font-weight: 500; line-height: 14px; letter-spacing: var(--tracking); color: var(--ink-muted); transition: background 140ms ease, color 140ms ease; }
.brief-choice[aria-checked="true"] { border-color: var(--ink); }
.brief-choice[aria-checked="true"] .brief-key { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.brief-choices.is-error .brief-choice { border-color: var(--brandai-color-bloom); }
.brief-other { max-width: 720px; animation: brief-step-up 480ms var(--ease-out) backwards; }
.brief-actions { display: flex; align-items: center; gap: 14px; }
.brief .btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding-inline: 18px; border-radius: var(--radius-pill); background: var(--ink); color: var(--on-ink); font-size: var(--text-14); line-height: var(--leading-18); font-weight: 400; letter-spacing: var(--tracking-button); }
.brief .btn:hover { opacity: 0.86; }
.brief-hint { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.brief-alert { margin: -12px 0 0; padding: 0; list-style: none; color: var(--brandai-color-bloom); font-size: 14px; line-height: 20px; }
.brief-foot { position: absolute; right: 24px; bottom: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; z-index: 3; }
.brief-next--mobile { display: none !important; }
.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(--br2); background: var(--ink); color: var(--on-ink); transition: background 160ms ease, color 160ms ease; }
.brief-nav-btn:disabled { background: var(--chip); color: var(--icon-muted); cursor: default; }
.brief-sending { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; background: var(--surface); animation: brief-fade 200ms ease both; }
.brief-sending[hidden] { display: none; }
.brief-sending-ring { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ring-track); border-top-color: var(--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: 54px; line-height: 58px; font-weight: 500; letter-spacing: var(--tracking-hero); }
.brief-sending-sub { font-size: 16px; line-height: 21px; color: var(--ink-muted); }
.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; }
.brief-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@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); } }

/* phones: the brief is a full-screen sheet (Paper "Project Form Mobile — 01…07") */
@media (max-width: 767px) {
  .brief-modal { inset: 0; border-radius: 0; border: 0; animation: brief-rise-mobile 720ms var(--ease-out) backwards; }
  .brief.is-closing .brief-modal { animation: brief-sink-mobile 400ms cubic-bezier(.4, 0, .6, 1) forwards; }
  .brief-top { position: static; height: 56px; padding: 0 16px 0 24px; margin-top: 4px; flex-shrink: 0; }
  .brief-body { padding: 8px 24px 24px; }
  .brief-step { margin: 0; gap: 28px; }
  .brief-step.is-leaving { left: 24px; right: 24px; }
  .brief-ico-d { display: none; }
  .brief-ico-m { display: block; }
  .brief-title, .brief-sending-title { font-size: 40px; line-height: 44px; letter-spacing: var(--tracking-display); }
  .brief-input, .brief-select-trigger, .brief-prefix { font-size: 20px; line-height: 26px; }
  .brief-choice { min-height: 52px; font-size: 16px; line-height: 22px; }
  .brief-hint { display: none; }
  .brief-actions { display: none; }
  .brief-foot { position: static; padding: 14px 24px 20px; flex-shrink: 0; }
  .brief-next--mobile { display: inline-flex !important; }
}

/* ---------- /brief-confirmed (Paper "Project Form — 08 Success") ---------- */
.confirmed { min-height: 100vh; padding: 40px; display: flex; }
.confirmed-card {
  flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius-sm);
}
.confirmed-inner { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 40px 24px; }
.confirmed-title { font-size: 54px; line-height: 58px; font-weight: 500; letter-spacing: var(--tracking-hero); }
.confirmed-sub { max-width: 640px; font-size: 16px; line-height: 21px; color: var(--ink-muted); }
.confirmed-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding-top: 8px; }
.confirmed-actions .pill { padding-inline: 18px; }
.confirmed-actions .pill--chip svg { color: var(--brandai-color-bloom); }
@media (max-width: 767px) {
  .confirmed { padding: 0; }
  .confirmed-card { border: 0; border-radius: 0; }
  .confirmed-title { font-size: 40px; line-height: 44px; letter-spacing: var(--tracking-display); }
  .confirmed-actions { flex-direction: column; align-self: stretch; }
  .confirmed-actions .pill { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .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; }
}