/* Hallmark · route: studied-DNA · macrostructure: Marquee Hero (home) / Index-First (services) / Workbench (VORLAN) / Long Document (about, careers copy)
 * theme: studied-DNA (tokens.css) · enrichment: CSS gradient sphere + concentric rings (Tier A) · nav: N1a + mobile sheet · footer: email-first statement
 * Follows the linked style: monochrome parchment/ink, sharp cards, 10px controls, all-caps stacked display type, tiny tracked labels, no shadows.
 * Motion is added at the owner's request: transform/opacity/filter only, JS-gated reveals that never hide content without JS,
 * full prefers-reduced-motion fallback. Deliberate departures from Hallmark/Uncodixfy defaults are the ones the style itself requires
 * (uppercase tracked labels, gradient sphere, display line-height 0.9).
 * Hallmark · pre-emit critique: P4 H5 E4 S4 R4 V4
 * contrast: pass (40-41) · tokens: pass (48) · responsive: pass (34, 49-52) · honest: pass (46) · chrome: pass (47) */

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

html { overflow-x: hidden; overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-parchment);
  color: var(--color-ink);
  font-family: var(--font);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--color-ink); text-decoration: underline; text-decoration-thickness: var(--rule-w); text-underline-offset: 0.2em; transition: opacity var(--dur-micro) var(--ease-out); }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; }
.on-ink :focus-visible, .foot :focus-visible { outline-color: var(--color-on-ink); }

h1, h2, h3, h4 { margin: 0; font-family: var(--font); font-weight: 400; font-style: normal; overflow-wrap: anywhere; min-width: 0; }
p { margin: 0; }
p + p { margin-top: var(--sp-15); }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
dd { margin: 0; }

main { position: relative; overflow: hidden; overflow: clip; }

.container { width: 100%; max-width: var(--page-max); margin: 0 auto; padding-inline: var(--page-gutter); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.skip-link { position: absolute; left: var(--sp-15); top: -6rem; z-index: var(--z-skip); background: var(--color-ink); color: var(--color-on-ink); padding: var(--sp-12) var(--sp-19); border-radius: var(--radius-control); }
.skip-link:focus { top: var(--sp-12); }

/* ---------- Type roles from the style ---------- */
.label { font-size: var(--text-caption); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-caption); line-height: 1.4; }
.display { font-size: var(--text-display); line-height: var(--lh-display); letter-spacing: var(--track-display); text-transform: uppercase; text-wrap: balance; }
.heading { font-size: var(--text-heading); line-height: var(--lh-heading); letter-spacing: var(--track-display); text-transform: uppercase; text-wrap: balance; }
.heading-sm { font-size: var(--text-heading-sm); line-height: var(--lh-tight); letter-spacing: var(--track-display); text-transform: uppercase; text-wrap: balance; }
.subheading { font-size: var(--text-subheading); line-height: var(--lh-tight); letter-spacing: 0.01em; text-wrap: balance; }
.body-sm { font-size: var(--text-body-sm); }
.lede { font-size: var(--text-body); line-height: 1.5; max-width: 52ch; }
.muted { color: var(--color-ink-2); }
.on-ink .muted, .foot .muted { color: var(--color-on-ink-2); }

.hair { height: var(--rule-w); background: var(--color-ash); transform-origin: left; }
.on-ink .hair { background: var(--color-ink-line); }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: var(--z-nav); background: var(--color-parchment); border-bottom: var(--rule-w) solid transparent; transition: border-color var(--dur-short) var(--ease-out); }
.nav.is-scrolled { border-bottom-color: var(--color-ash); }
.nav__inner { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--sp-30); min-height: var(--nav-h); }
.nav__brand { display: inline-flex; align-items: center; gap: var(--sp-12); color: var(--color-ink); text-decoration: none; font-size: var(--text-body-sm); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-caption); line-height: 1.2; white-space: nowrap; }
.nav__brand img { border-radius: var(--radius-control); transition: transform var(--dur-short) var(--ease-out); }
.nav__brand:hover img { transform: rotate(-6deg); }
.nav__brand .brand-name, .foot__brand .brand-name { font-family: var(--font-brand); font-weight: 900; letter-spacing: 0.01em; line-height: 1.05; }
.nav__links { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-5) var(--sp-30); margin-left: auto; }
.nav__link { position: relative; display: inline-block; padding-block: var(--sp-15); color: var(--color-ink); text-decoration: none; font-size: var(--text-caption); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-caption); white-space: nowrap; }
.nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: var(--sp-8); height: var(--rule-w); background: var(--color-ink); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-short) var(--ease-out); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__toggle { display: none; margin-left: auto; min-height: 2.75rem; padding: 0 var(--sp-19); align-items: center; gap: var(--sp-8); border: var(--rule-w) solid var(--color-ink); border-radius: var(--radius-control); background: transparent; color: var(--color-ink); font: inherit; font-size: var(--text-caption); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-caption); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.nav__toggle:hover, .nav__toggle[aria-expanded="true"] { background: var(--color-ink); color: var(--color-parchment); }

/* ---------- Buttons and links ---------- */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-12); min-height: 2.75rem; padding: 0 var(--sp-19); border: var(--rule-w) solid var(--color-ink); border-radius: var(--radius-control); background: transparent; color: var(--color-ink); font: inherit; font-size: var(--text-caption); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-caption); text-decoration: none; white-space: nowrap; cursor: pointer; transition: color var(--dur-short) var(--ease-out); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-ink); transform: translateY(101%); transition: transform 0.45s var(--ease-out); }
.btn:hover, .btn:focus-visible { color: var(--color-parchment); text-decoration: none; }
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn__arrow { display: inline-block; transition: transform var(--dur-short) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(5px); }
.btn:active { opacity: 0.85; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--solid { background: var(--color-ink); color: var(--color-parchment); }
.btn--solid::before { background: var(--color-parchment); }
.btn--solid:hover, .btn--solid:focus-visible { color: var(--color-ink); }
.btn--light { border-color: var(--color-on-ink); color: var(--color-on-ink); }
.btn--light::before { background: var(--color-on-ink); }
.btn--light:hover, .btn--light:focus-visible { color: var(--color-ink); }
.btn--sm { min-height: 2.5rem; padding: 0 var(--sp-15); }

/* Contact CTA: animated iridescent border ring (the sphere's colours) plus a soft pulsing glow. */
.nav__cta { border-color: transparent; background: var(--color-parchment); box-shadow: 0 0 14px 1px var(--glow-pink); animation: cta-glow 3.2s var(--ease-in-out) infinite alternate; }
.nav__cta::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 2px; pointer-events: none; background: conic-gradient(from var(--glow-angle), var(--sphere-yellow), var(--sphere-pink), var(--sphere-blue), var(--sphere-white), var(--sphere-yellow)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: glow-spin 4s linear infinite; }
@keyframes glow-spin { to { --glow-angle: 360deg; } }
@keyframes cta-glow { from { box-shadow: 0 0 10px 0 var(--glow-pink), 0 0 22px 2px var(--glow-blue); } to { box-shadow: 0 0 16px 2px var(--glow-yellow), 0 0 30px 4px var(--glow-pink); } }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-12); margin-top: var(--sp-32); }

/* Ghost text link: underline reveals on interaction, arrow trails */
.tlink { display: inline-flex; align-items: center; gap: var(--sp-8); padding-block: var(--sp-12); color: inherit; text-decoration: none; font-size: var(--text-body-sm); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-caption); background: linear-gradient(currentColor, currentColor) left calc(100% - 0.6rem) / 0 var(--rule-w) no-repeat; transition: background-size var(--dur-short) var(--ease-out); }
.tlink:hover, .tlink:focus-visible { background-size: 100% var(--rule-w); text-decoration: none; }
.tlink .btn__arrow { transition: transform var(--dur-short) var(--ease-out); }
.tlink:hover .btn__arrow { transform: translateX(5px); }

/* ---------- Sections ---------- */
.section { position: relative; padding-block: var(--section-pad); }
.section--tight { padding-block: var(--sp-76); }
.on-ink { background: var(--color-ink); color: var(--color-on-ink); }
.on-ink a { color: var(--color-on-ink); }
.section-head { display: grid; gap: var(--sp-19); max-width: 60rem; margin-bottom: var(--sp-46); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-24); row-gap: var(--sp-46); align-items: start; }
.c-1-7 { grid-column: 1 / span 7; min-width: 0; }
.c-1-6 { grid-column: 1 / span 6; min-width: 0; }
.c-1-5 { grid-column: 1 / span 5; min-width: 0; }
.c-1-4 { grid-column: 1 / span 4; min-width: 0; }
.c-5-4 { grid-column: 5 / span 4; min-width: 0; }
.c-8-5 { grid-column: 8 / span 5; min-width: 0; }
.c-7-6 { grid-column: 7 / span 6; min-width: 0; }
.c-9-4 { grid-column: 9 / span 4; min-width: 0; }
.c-1-12 { grid-column: 1 / -1; min-width: 0; }
.center-y { align-items: center; }
.stack { display: grid; gap: var(--sp-24); }
.stack-sm { display: grid; gap: var(--sp-12); }
.mt-24 { margin-top: var(--sp-24); }
.mt-46 { margin-top: var(--sp-46); }

/* ---------- Hero: gradient sphere + rings ---------- */
.hero { position: relative; padding-block: var(--sp-76) var(--sp-76); min-height: min(48rem, calc(100svh - var(--nav-h))); display: flex; flex-direction: column; justify-content: center; }
.hero__art { position: absolute; z-index: 0; top: 50%; right: max(-6vw, -5rem); width: min(600px, 62vw); aspect-ratio: 1; translate: 0 calc(-50% + var(--parallax, 0px)); opacity: var(--art-opacity, 1); animation: drift 14s var(--ease-in-out) infinite alternate; pointer-events: none; will-change: translate, transform; }
.hero__sphere { position: absolute; inset: 0; border-radius: 50%; background: var(--sphere-gradient); animation: shimmer 9s var(--ease-in-out) infinite alternate, morph 11s var(--ease-in-out) infinite, breathe 7s var(--ease-in-out) infinite alternate; }
.hero__ring { position: absolute; border-radius: 50%; border: var(--rule-w) solid var(--color-ash); animation: ring 10s var(--ease-in-out) infinite alternate; }
.hero__ring--1 { inset: -9%; }
.hero__ring--2 { inset: -24%; animation-delay: -3s; }
.hero__ring--3 { inset: -42%; animation-delay: -6s; }
.hero__inner { position: relative; z-index: var(--z-base); display: grid; gap: var(--sp-32); }
.hero h1 { max-width: 12ch; }
.hero .line { display: block; overflow: hidden; padding-block: 0.03em; }
.hero .line > span { display: block; animation: rise 1s var(--ease-out) both; }
.hero .line:nth-child(2) > span { animation-delay: 90ms; }
.hero .line:nth-child(3) > span { animation-delay: 180ms; }
.hero__lede { max-width: 44ch; animation: fade-up 1s var(--ease-out) 350ms both; }
.hero .btn-row { animation: fade-up 1s var(--ease-out) 480ms both; margin-top: 0; }
.hero__label { animation: fade-up 0.8s var(--ease-out) both; }
.scroll-cue { position: absolute; z-index: var(--z-base); left: var(--page-gutter); bottom: var(--sp-30); display: inline-flex; align-items: center; gap: var(--sp-8); color: var(--color-ink); text-decoration: none; }
.scroll-cue span:last-child { display: inline-block; animation: nudge 1.8s var(--ease-in-out) infinite; }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; border-block: var(--rule-w) solid var(--color-ash); padding-block: var(--sp-24); }
.marquee__track { display: flex; width: max-content; animation: marquee 50s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; flex-shrink: 0; align-items: center; gap: var(--sp-46); padding-right: var(--sp-46); }
.marquee__item { font-size: var(--text-heading-sm); line-height: 1; text-transform: uppercase; letter-spacing: var(--track-display); white-space: nowrap; }
.marquee__dot { flex-shrink: 0; width: 0.75rem; height: 0.75rem; border: var(--rule-w) solid var(--color-ink); border-radius: 50%; }

/* ---------- Statement ---------- */
.statement { font-size: var(--text-heading-sm); line-height: 1.1; letter-spacing: -0.005em; max-width: 26ch; text-wrap: balance; }

/* ---------- Index rows (services) ---------- */
.index { border-top: var(--rule-w) solid var(--color-ink); }
.index__row { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 0.5fr) minmax(0, 4.5fr) minmax(0, 5fr) auto; column-gap: var(--sp-24); align-items: center; padding-block: var(--sp-30); border-bottom: var(--rule-w) solid var(--color-ash); transition: color var(--dur-short) var(--ease-out); }
.index__row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-ink); transform: scaleY(0); transform-origin: bottom; transition: transform 0.5s var(--ease-out); }
.index__row:hover, .index__row:focus-within { color: var(--color-parchment); }
.index__row:hover::before, .index__row:focus-within::before { transform: scaleY(1); }
.index__name { font-size: var(--text-heading-sm); line-height: 1; text-transform: uppercase; letter-spacing: var(--track-display); transition: transform 0.5s var(--ease-out); }
.index__name a { color: inherit; text-decoration: none; }
.index__name a::after { content: ""; position: absolute; inset: 0; }
.index__row:hover .index__name { transform: translateX(var(--sp-15)); }
.index__desc { font-size: var(--text-body-sm); }
.index__arrow { font-size: var(--text-subheading); line-height: 1; transition: transform 0.5s var(--ease-out); }
.index__row:hover .index__arrow { transform: translateX(var(--sp-8)); }

/* ---------- Photos (monochrome until hover) ---------- */
.photo { margin: 0; min-width: 0; }
.photo__frame { position: relative; overflow: hidden; background: var(--color-stone); }
.photo__frame picture { position: absolute; inset: 0; }
.photo__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter 0.8s var(--ease-out), transform 1.2s var(--ease-out); }
.photo__frame:hover img { filter: none; transform: scale(1.04); }
.ar-4-3 { aspect-ratio: 4 / 3; }
.ar-3-2 { aspect-ratio: 3 / 2; }
.ar-4-5 { aspect-ratio: 4 / 5; }
.ar-16-10 { aspect-ratio: 16 / 10; }
.ar-fill { aspect-ratio: auto; min-height: 28rem; height: 100%; }
.about-media { align-self: stretch; display: flex; }
.about-media .photo { flex: 1; display: flex; flex-direction: column; }
.about-media .photo__frame { flex: 1; }
.photo figcaption { margin-top: var(--sp-12); font-size: var(--text-body-sm); color: var(--color-ink-2); }
.on-ink .photo figcaption { color: var(--color-on-ink-2); }

/* ---------- Work card + product screenshots: white surface, grid overlay ---------- */
.work { background-color: var(--color-paper); background-image: linear-gradient(to right, var(--color-parchment) 1px, transparent 1px), linear-gradient(to bottom, var(--color-parchment) 1px, transparent 1px); background-size: 48px 48px; padding: var(--sp-30); }
.work__title { font-size: var(--text-heading); line-height: var(--lh-heading); text-transform: uppercase; letter-spacing: var(--track-display); }
.shot { margin: 0; min-width: 0; overflow: hidden; }
.shot img { width: 100%; border: var(--rule-w) solid var(--color-ash); transition: transform 1.2s var(--ease-out); }
.shot:hover img { transform: scale(1.02); }
.work--shot { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--sp-30); align-items: start; }
.work--shot h3 { font-size: var(--text-subheading); line-height: var(--lh-tight); text-transform: uppercase; letter-spacing: var(--track-display); }
.bench { display: grid; gap: var(--sp-30); }

/* ---------- Cells: hairline-divided white cells ---------- */
.cells { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--rule-w); background: var(--color-ash); border: var(--rule-w) solid var(--color-ash); }
.cells--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cells--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cell { display: flex; align-items: center; justify-content: center; min-height: 8rem; padding: var(--sp-19); background: var(--color-paper); text-align: center; font-size: var(--text-body-sm); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-caption); transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.cell:hover { background: var(--color-ink); color: var(--color-parchment); }
.cell--text { display: grid; align-content: start; justify-content: stretch; gap: var(--sp-12); min-height: 11rem; padding: var(--sp-30); text-align: left; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: var(--text-body); }
.cell--text h3 { font-size: var(--text-subheading); line-height: var(--lh-tight); text-transform: uppercase; letter-spacing: var(--track-display); font-weight: 400; }
.cell--text p { font-size: var(--text-body-sm); color: var(--color-ink-2); transition: color var(--dur-short) var(--ease-out); }
.cell--text:hover p { color: var(--color-on-ink-2); }

/* ---------- Steps and principles ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-46) var(--sp-24); }
.steps li { display: grid; gap: var(--sp-12); align-content: start; padding-top: var(--sp-19); border-top: var(--rule-w) solid var(--color-ink); }
.steps h3 { font-size: var(--text-subheading); line-height: var(--lh-tight); text-transform: uppercase; letter-spacing: var(--track-display); }
.steps p { font-size: var(--text-body-sm); color: var(--color-ink-2); }
.on-ink .steps li { border-top-color: var(--color-on-ink); }
.on-ink .steps p { color: var(--color-on-ink-2); }

/* ---------- Definition list ---------- */
.facts { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); border-top: var(--rule-w) solid var(--color-ink); }
.facts dt, .facts dd { padding-block: var(--sp-15); border-bottom: var(--rule-w) solid var(--color-ash); }
.facts dt { font-size: var(--text-caption); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-caption); padding-top: var(--sp-19); }
.facts dd { font-size: var(--text-body-sm); }

/* ---------- Ticks list ---------- */
.ticks { display: grid; gap: var(--sp-12); }
.ticks li { position: relative; padding-left: var(--sp-30); font-size: var(--text-body-sm); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: var(--sp-19); height: var(--rule-w); background: currentColor; }

/* ---------- Detail rows (services page) ---------- */
.detail { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-24); row-gap: var(--sp-24); padding-block: var(--sp-76); border-top: var(--rule-w) solid var(--color-ash); }
.detail:first-of-type { border-top: 0; padding-top: 0; }
.detail__title { grid-column: 1 / span 5; min-width: 0; display: grid; gap: var(--sp-12); align-content: start; }
.detail__body { grid-column: 7 / span 6; min-width: 0; display: grid; gap: var(--sp-24); }
.detail__body p { color: var(--color-ink-2); }
.detail__body h3 { font-size: var(--text-subheading); line-height: var(--lh-tight); text-transform: uppercase; letter-spacing: var(--track-display); margin-top: var(--sp-15); }

/* ---------- FAQ ---------- */
.faq { border-top: var(--rule-w) solid var(--color-ink); }
.faq details { border-bottom: var(--rule-w) solid var(--color-ash); }
.faq summary { position: relative; cursor: pointer; list-style: none; padding: var(--sp-30) var(--sp-46) var(--sp-30) 0; transition: padding-left var(--dur-short) var(--ease-out); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { padding-left: var(--sp-12); }
.faq summary h3 { font-size: var(--text-subheading); line-height: var(--lh-tight); letter-spacing: 0; }
.faq summary::after { content: "+"; position: absolute; right: var(--sp-5); top: 50%; margin-top: -0.6em; font-size: var(--text-subheading); line-height: 1; transition: transform var(--dur-short) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { max-width: 62ch; padding: 0 var(--sp-46) var(--sp-30) 0; color: var(--color-ink-2); }
.faq details[open] p { animation: fade-up 0.5s var(--ease-out) both; }

/* ---------- Page head (inner pages) ---------- */
.page-head { position: relative; padding-block: var(--sp-76) var(--sp-46); }
.page-head__inner { position: relative; z-index: var(--z-base); display: grid; gap: var(--sp-24); }
.page-head h1 { max-width: 16ch; }
.page-head .lede { margin-top: var(--sp-5); }
.page-head__art { position: absolute; z-index: 0; top: 50%; right: max(-10vw, -8rem); width: min(360px, 40vw); aspect-ratio: 1; translate: 0 calc(-50% + var(--parallax, 0px)); opacity: var(--art-opacity, 1); animation: drift 14s var(--ease-in-out) infinite alternate; pointer-events: none; will-change: translate, transform; }
.crumbs { font-size: var(--text-caption); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-caption); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.crumbs li + li::before { content: "/"; margin-right: var(--sp-8); color: var(--color-ink-2); }
.crumbs a { display: inline-block; padding-block: var(--sp-8); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ---------- Prose ---------- */
.prose { max-width: var(--measure); display: grid; gap: var(--sp-19); }
.prose h2 { font-size: var(--text-heading-sm); line-height: var(--lh-tight); text-transform: uppercase; letter-spacing: var(--track-display); margin-top: var(--sp-46); }
.prose h2:first-child { margin-top: 0; }
.prose p strong { font-weight: 700; }

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--sp-24); max-width: 44rem; }
.field { display: grid; gap: var(--sp-8); }
.field label, .field .field__label { font-size: var(--text-caption); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-caption); }
.field .opt { font-weight: 400; color: var(--color-ink-2); text-transform: none; letter-spacing: 0; }
.field input, .field select, .field textarea { width: 100%; min-height: 3rem; padding: var(--sp-12) var(--sp-15); border: var(--rule-w) solid var(--color-ink); border-radius: var(--radius-control); background: var(--color-paper); color: var(--color-ink); font: inherit; font-size: var(--text-body); outline: 2px solid transparent; outline-offset: 1px; transition: background-color var(--dur-short) var(--ease-out); }
.field textarea { min-height: 10rem; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { background: var(--color-parchment); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-color: var(--color-ink); background: var(--color-paper); }
.field input:disabled, .field select:disabled, .field textarea:disabled { opacity: 0.5; cursor: not-allowed; }
.field input[type="file"] { padding: var(--sp-8); cursor: pointer; }
.field input[type="file"]::file-selector-button { margin-right: var(--sp-15); min-height: 2rem; padding: 0 var(--sp-15); border: var(--rule-w) solid var(--color-ink); border-radius: var(--radius-control); background: transparent; color: var(--color-ink); font: inherit; font-size: var(--text-caption); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-caption); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.field input[type="file"]::file-selector-button:hover { background: var(--color-ink); color: var(--color-parchment); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-24); }
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: var(--sp-12); }
.field--check input { width: 1.25rem; min-height: 1.25rem; height: 1.25rem; margin-top: 0.2rem; accent-color: var(--color-ink); }
.field--check label { font-size: var(--text-body-sm); font-weight: 400; text-transform: none; letter-spacing: 0; }
.hp { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.form-status { min-height: 1.5em; font-size: var(--text-body-sm); }
.form-status[data-state="error"] { color: var(--color-error); font-weight: 600; }
.form-status[data-state="ok"] { color: var(--color-success); font-weight: 600; }
.hint { font-size: var(--text-body-sm); color: var(--color-ink-2); }

/* ---------- Footer: email first, quick links ---------- */
.foot { background: var(--color-ink); color: var(--color-on-ink); padding-block: var(--sp-76) var(--sp-30); }
.foot a { color: var(--color-on-ink); text-decoration: none; }
.foot__lead { display: grid; gap: var(--sp-19); margin-bottom: var(--sp-76); }
.foot__email { display: inline-block; font-size: clamp(1.5rem, 0.6rem + 5.2vw, 4.375rem); line-height: var(--lh-heading); text-transform: uppercase; letter-spacing: var(--track-display); overflow-wrap: anywhere; background: linear-gradient(currentColor, currentColor) left bottom / 0 var(--rule-w) no-repeat; transition: background-size 0.6s var(--ease-out); }
.foot__email:hover, .foot__email:focus-visible { background-size: 100% var(--rule-w); }
.foot__cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-24); row-gap: var(--sp-46); padding-top: var(--sp-46); border-top: var(--rule-w) solid var(--color-ink-line); }
.foot__brandcol { grid-column: 1 / span 4; display: grid; gap: var(--sp-19); align-content: start; }
.foot__brand { display: inline-flex; align-items: center; gap: var(--sp-12); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-caption); font-size: var(--text-body-sm); }
.foot__brand img { border-radius: var(--radius-control); }
.foot__col { display: grid; gap: var(--sp-4); align-content: start; }
.foot__col--quick { grid-column: 5 / span 2; }
.foot__col--services { grid-column: 7 / span 3; }
.foot__col--else { grid-column: 10 / span 3; }
.foot__col h2 { margin-bottom: var(--sp-12); font-size: var(--text-caption); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-caption); color: var(--color-on-ink-2); }
.foot__col a { display: inline-block; padding-block: var(--sp-12); font-size: var(--text-body-sm); background: linear-gradient(currentColor, currentColor) left calc(100% - 0.3rem) / 0 var(--rule-w) no-repeat; transition: background-size var(--dur-short) var(--ease-out); justify-self: start; }
.foot__col a:hover, .foot__col a:focus-visible { background-size: 100% var(--rule-w); }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-12) var(--sp-30); margin-top: var(--sp-76); padding-top: var(--sp-19); border-top: var(--rule-w) solid var(--color-ink-line); font-size: var(--text-body-sm); color: var(--color-on-ink-2); }
.foot__base a { color: var(--color-on-ink-2); padding-block: var(--sp-8); }
.foot__base a:hover { color: var(--color-on-ink); }

/* ---------- Motion ---------- */
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes shimmer { from { --sphere-angle: 212deg; } 50% { --sphere-angle: 262deg; } to { --sphere-angle: 318deg; } }
@keyframes drift { from { transform: translate(0, -18px) rotate(-2deg); } 50% { transform: translate(-16px, 8px) rotate(1deg); } to { transform: translate(12px, 20px) rotate(3deg); } }
@keyframes breathe { from { transform: scale(0.97); } to { transform: scale(1.04); } }
@keyframes morph { 0%, 100% { border-radius: 50%; } 33% { border-radius: 54% 46% 51% 49% / 47% 54% 46% 53%; } 66% { border-radius: 46% 54% 48% 52% / 53% 46% 54% 47%; } }
@keyframes ring { from { transform: scale(0.985); opacity: 0.7; } to { transform: scale(1.015); opacity: 1; } }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 220ms var(--ease-out) both vt-out; }
::view-transition-new(root) { animation: 360ms var(--ease-out) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  /* Content is only hidden once JS has confirmed it can reveal it. */
  .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .js .hair.reveal { opacity: 1; transform: scaleX(0); transition: transform 1.3s var(--ease-out); }
  .js .hair.reveal.is-in { transform: none; }
  .js .img-reveal { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease-out); }
  .js .img-reveal.is-in { clip-path: inset(0); }
  .stagger > .reveal:nth-child(2) { transition-delay: 80ms; }
  .stagger > .reveal:nth-child(3) { transition-delay: 160ms; }
  .stagger > .reveal:nth-child(4) { transition-delay: 240ms; }
  .stagger > .reveal:nth-child(5) { transition-delay: 320ms; }
  .stagger > .reveal:nth-child(6) { transition-delay: 400ms; }
  .stagger > .reveal:nth-child(7) { transition-delay: 480ms; }
  .stagger > .reveal:nth-child(8) { transition-delay: 560ms; }
  .stagger > .reveal:nth-child(9) { transition-delay: 640ms; }
  .stagger > .reveal:nth-child(10) { transition-delay: 720ms; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .marquee__track { animation: none !important; }
  .hero__art, .page-head__art { translate: 0 -50%; opacity: 1; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 60rem) {
  .grid, .detail { grid-template-columns: minmax(0, 1fr); }
  .c-1-7, .c-1-6, .c-1-5, .c-1-4, .c-5-4, .c-8-5, .c-7-6, .c-9-4, .detail__title, .detail__body { grid-column: 1 / -1; }
  .work--shot { grid-template-columns: minmax(0, 1fr); }
  .cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cells--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .index__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--sp-8); }
  .index__num { grid-column: 1 / -1; }
  .index__desc { grid-column: 1 / 2; }
  .foot__brandcol { grid-column: 1 / -1; }
  .foot__col--quick, .foot__col--services, .foot__col--else { grid-column: span 6; }
  .hero__art { width: min(420px, 78vw); right: -12vw; opacity: calc(var(--art-opacity, 1) * 0.9); }
  .page-head__art { width: min(300px, 60vw); right: -16vw; top: 44%; }
  .ar-fill { min-height: 0; height: auto; aspect-ratio: 16 / 10; }
  .about-media { display: block; }
  .about-media .photo { display: block; }
  .about-media .photo__frame { flex: none; }
  .js .nav__toggle { display: inline-flex; flex: none; margin-left: var(--sp-12); }
  .js .nav__inner { flex-wrap: nowrap; height: var(--nav-h); min-height: 0; column-gap: 0; }
  .js .nav__brand { flex: 1 1 auto; min-width: 0; }
  .nav__links { width: 100%; margin-left: 0; padding-bottom: var(--sp-12); }
  .js .nav__links { display: none; position: absolute; top: 100%; left: 0; right: 0; width: auto; margin: 0; padding: var(--sp-12) var(--page-gutter) var(--sp-24); background: var(--color-parchment); border-bottom: var(--rule-w) solid var(--color-ash); }
  .js .nav__links.is-open { display: flex; flex-direction: column; align-items: flex-start; gap: 0; animation: menu-in 0.35s var(--ease-out) both; }
  .js .nav__links.is-open .nav__link { padding-block: var(--sp-15); font-size: var(--text-body-sm); }
  .nav__cta { margin-top: var(--sp-12); }
}

@media (max-width: 40rem) {
  .hero { min-height: 0; padding-block: var(--sp-46) var(--sp-76); }
  .steps, .cells, .cells--2, .cells--3, .field-row { grid-template-columns: minmax(0, 1fr); }
  .cells--tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts dt { padding-bottom: 0; border-bottom: 0; }
  .foot__col--quick, .foot__col--services, .foot__col--else { grid-column: 1 / -1; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .work { padding: var(--sp-19); background-size: 32px 32px; }
  .scroll-cue { display: none; }
}

/* ---------- Utilities and closing statement link ---------- */
.pt-0 { padding-top: 0; }
.pt-46 { padding-top: var(--sp-46); }
.mt-0 { margin-top: 0; }
.gap-24 { row-gap: var(--sp-24); }
.cta-big { display: inline-block; justify-self: start; max-width: 100%; font-size: clamp(1.375rem, 0.3rem + 5vw, 4.375rem); line-height: var(--lh-heading); text-transform: uppercase; letter-spacing: var(--track-display); text-decoration: none; overflow-wrap: anywhere; background: linear-gradient(currentColor, currentColor) left bottom / 0 var(--rule-w) no-repeat; transition: background-size 0.7s var(--ease-out); }
.cta-big:hover, .cta-big:focus-visible { background-size: 100% var(--rule-w); text-decoration: none; }
.cta-big span { display: inline-block; transition: transform var(--dur-short) var(--ease-out); }
.cta-big:hover span { transform: translateX(var(--sp-12)); }
.on-ink .cta-big { color: var(--color-on-ink); }
.cta-big--sm { font-size: clamp(1.25rem, 0.3rem + 3.6vw, 2.875rem); }

/* Index rows on dark sections: visible rule + inverted hover */
.on-ink .index { border-top-color: var(--color-on-ink-2); }
.on-ink .index__row { border-bottom-color: var(--color-ink-line); }
.on-ink .index__row::before { background: var(--color-parchment); }
.on-ink .index__row:hover, .on-ink .index__row:focus-within { color: var(--color-ink); }

/* Phones: the company name becomes a compact two-line lockup so logo and Menu always share one centreline. */
@media (max-width: 30rem) {
  .nav__brand .brand-name { font-size: 0.8125rem; white-space: normal; }
  .nav__brand .brand-tail { display: block; }
}
/* Tablet landscape / small laptop: keep the wordmark from crowding the links. */
@media (min-width: 60.0625rem) and (max-width: 75rem) {
  .nav__brand .brand-name { font-size: 0.8125rem; }
}
/* Very small screens (folded phones): tighten the lockup so it stays on two lines. */
@media (max-width: 20rem) {
  .nav__brand .brand-name { font-size: 0.6875rem; }
  .nav__toggle { padding-inline: var(--sp-12); }
}

/* ---------- Navbar on black (ink) ---------- */
.nav { background: var(--color-ink); color: var(--color-on-ink); }
.nav.is-scrolled { border-bottom-color: var(--color-ink-line); }
.nav :focus-visible { outline-color: var(--color-on-ink); }
.nav__brand, .nav__brand:hover { color: var(--color-on-ink); }
.nav__link { color: var(--color-on-ink); }
.nav__link::after { background: var(--color-on-ink); }
.nav__toggle { border-color: var(--color-on-ink); color: var(--color-on-ink); }
.nav__toggle:hover, .nav__toggle[aria-expanded="true"] { background: var(--color-on-ink); color: var(--color-ink); }
.nav__cta { background: transparent; color: var(--color-on-ink); }
.nav__cta::before { background: var(--color-on-ink); }
.nav__cta:hover, .nav__cta:focus-visible { color: var(--color-ink); }
@media (max-width: 60rem) {
  .js .nav__links { background: var(--color-ink); border-bottom-color: var(--color-ink-line); }
}