/* Creative Conceptz website. Built on Design System v02.
   The orange full stop grows into the page's one big circle, travels through every section
   and lands as the last full stop on the site. Every image is the same card: 16px corners,
   the same shadow, the same hover. All sizes and gaps below come from the tokens in :root. */

@font-face { font-family: "Garet"; src: url("/assets/fonts/Garet-Book.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Garet"; src: url("/assets/fonts/Garet-Heavy.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/assets/fonts/Roboto-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/assets/fonts/Roboto-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light;
  --paper: #F3F5F7;
  --ink: #1E1E1E;
  --orange: #FFA542;
  --orange-soft: #FCB466;
  --slate: #4B5962;
  --line-grey: #E3E3E3;

  --font-garet: "Garet", system-ui, sans-serif;
  --font-roboto: "Roboto", system-ui, sans-serif;

  --margin-web: clamp(1.25rem, 5vw, 6rem);
  --gutter-web: clamp(1rem, 2vw, 2rem);
  --header-h: 96px;
  --section-space: clamp(6rem, 14vh, 12rem);
  --content-max: 1920px;
  --tb: 74px;

  /* type scale */
  --t-h1: clamp(2.75rem, min(6vw, 12vh), 6.5rem);
  --t-title: clamp(2.5rem, 4.6vw, 5rem);
  --t-h2: clamp(2rem, 3.8vw, 4rem);
  --t-h3: clamp(1.25rem, 1.8vw, 1.625rem);
  --t-lead: clamp(1.125rem, 1.45vw, 1.375rem);
  --t-small: .9375rem;
  --t-cap: .8125rem;
  /* spacing scale */
  --space-section: clamp(4.5rem, 11vh, 8rem);
  --space-block: clamp(2.5rem, 6vh, 4rem);
  --space-stack: 1.25rem;
  --r-card: 16px;
  --card-shadow: 0 18px 34px -14px rgba(30, 30, 30, .34);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); scroll-padding-top: 0; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-roboto); font-size: 1.0625rem; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

html.home { overscroll-behavior-x: none; }

/* ---------- Type ---------- */
.dot { display: inline-block; width: .13em; height: .13em; border-radius: 50%; background: var(--orange); margin-left: .05em; vertical-align: baseline; flex: none; }
.stop { color: var(--orange); }
.d-reg, .d-hollow, .d-xb { font-family: var(--font-garet); text-transform: uppercase; letter-spacing: -.075em; line-height: .95; }
.d-reg { font-weight: 400; }
.d-hollow { font-weight: 800; color: transparent; -webkit-text-stroke: 2px var(--ink); }
.d-xb { font-weight: 800; }
.display { font-size: clamp(3.25rem, min(9vw, 18vh), 10rem); }
.h1 { font-family: var(--font-garet); font-weight: 800; letter-spacing: -.02em; font-size: var(--t-h2); line-height: 1; text-wrap: balance; }
.h2 { font-family: var(--font-garet); font-weight: 800; font-size: clamp(1.625rem, 3vw, 3rem); line-height: 1.05; text-wrap: balance; }
.h3 { font-family: var(--font-garet); font-weight: 800; font-size: var(--t-h3); line-height: 1.15; }
.sub { font-weight: 700; font-size: .75rem; line-height: 1.2; letter-spacing: .18em; text-transform: uppercase; }
.label { font-size: .75rem; line-height: 1.2; letter-spacing: .18em; text-transform: uppercase; }
.tag { font-size: .75rem; line-height: 1.5; letter-spacing: .15em; text-transform: uppercase; color: var(--slate); }
.body { max-width: 34em; }
.wordmark { font-family: var(--font-garet); font-weight: 800; line-height: .95; font-size: clamp(2.25rem, 3.4vw, 3.5rem); }

/* ---------- Controls ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; overflow: hidden; font-weight: 700; font-size: .8125rem; letter-spacing: .15em; text-transform: uppercase; line-height: 1; padding: 1.05em 1.9em; border-radius: 9999px; border: 1.5px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; text-decoration: none; font-family: inherit; white-space: nowrap; }
.btn, .wb-view { transition: scale .14s ease-out; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; background: radial-gradient(circle 70px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 100%); opacity: 0; transition: opacity .25s; }
@media (hover: hover) and (pointer: fine) { .btn:hover::after { opacity: 1; } }
.btn:active, .wb-view:active { scale: .97; }
.btn--line { background: transparent; color: var(--ink); }
.btn--paper { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn-rest { display: flex; align-items: center; justify-content: center; gap: .625rem; }
.btn-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); transition: transform .3s, background-color .3s; }
.btn-text { display: inline-block; transition: transform .3s, opacity .3s; }
.btn-hover { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: .5rem; color: var(--ink); opacity: 0; transform: translateX(3rem); transition: transform .3s, opacity .3s; }
.btn-hover svg { flex: none; width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn:focus-visible .btn-dot { transform: scale(100.8); background: var(--orange-soft); }
.btn:focus-visible .btn-text { transform: translateX(3rem); opacity: 0; }
.btn:focus-visible .btn-hover { transform: none; opacity: 1; }
@media (hover: hover) {
  .btn:hover .btn-dot { transform: scale(100.8); background: var(--orange-soft); }
  .btn:hover .btn-text { transform: translateX(3rem); opacity: 0; }
  .btn:hover .btn-hover { transform: none; opacity: 1; }
}
.link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.link:hover { text-decoration-thickness: 2px; }

/* ---------- Header: logo left, three links stacked right ---------- */
.hdr { position: fixed; inset: 0 0 auto; z-index: 20; height: var(--header-h); display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; padding: 1.25rem var(--margin-web) 0; background: var(--paper); color: var(--ink); }
.hdr-mark { text-decoration: none; font-family: var(--font-garet); font-weight: 800; font-size: 1.625rem; line-height: 1; }
.nav { display: flex; align-items: center; gap: clamp(.5rem, 1.2vw, 1.125rem); }
.nav a, .nav-trigger { display: flex; align-items: center; gap: .4em; font-family: var(--font-garet); font-weight: 800; font-size: 1.125rem; line-height: 1.12; letter-spacing: -.01em; text-transform: uppercase; text-decoration: none; padding-block: .06em; }
.nav a::before, .nav-trigger::before { content: ""; width: .36em; height: .36em; border-radius: 50%; background: var(--orange); transform: scale(0); transition: transform .2s; }
.nav a:hover::before, .nav a:focus-visible::before, .nav a[aria-current]::before, .nav-trigger:hover::before, .nav-trigger:focus-visible::before, .nav-trigger[aria-current]::before, .nav-group.is-open .nav-trigger::before { transform: scale(1); }
/* Language switch, right of the stacked links */
.hdr-right { display: flex; align-items: center; gap: clamp(.75rem, 1.6vw, 1.5rem); }
.lang { --lang-w: 76px; --lang-h: 34px; --lang-inset: 3px; position: relative; flex: none; display: grid; grid-template-columns: 1fr 1fr; align-items: center; width: var(--lang-w); height: var(--lang-h); border-radius: 9999px; background: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); font-family: var(--font-garet); font-weight: 800; font-size: .75rem; line-height: 1; text-transform: uppercase; cursor: pointer; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.lang-thumb { position: absolute; left: 0; top: var(--lang-inset); width: calc(var(--lang-w) / 2 - var(--lang-inset)); height: calc(var(--lang-h) - var(--lang-inset) * 2); border-radius: 9999px; background: var(--orange); transform: translateX(var(--lang-inset)); }
html[lang^="nl"] .lang-thumb { transform: translateX(calc(var(--lang-w) / 2)); }
.lang a { position: relative; z-index: 1; display: grid; place-items: center; height: 100%; color: var(--paper); text-decoration: none; transition: color .2s; pointer-events: auto; }
.lang a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 9999px; }
.lang a:first-of-type { color: var(--ink); }
.lang.is-nl a:first-of-type { color: var(--paper); }
.lang.is-nl a:last-of-type { color: var(--ink); }
html[lang^="nl"] .lang:not(.ready) a:first-of-type { color: var(--paper); }
html[lang^="nl"] .lang:not(.ready) a:last-of-type { color: var(--ink); }
/* Services dropdown: opens to the left of the stacked links */
.nav a, .nav-trigger, .hdr-mark { white-space: nowrap; }
.nav-trigger { padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.nav-group { position: relative; display: flex; justify-content: flex-end; }
.nav-drop { position: absolute; left: 50%; top: calc(100% + .625rem); transform: translateX(-50%); z-index: 2; display: grid; gap: .125rem; width: max-content; padding: .625rem; border-radius: var(--r-card); background: #fff; color: var(--ink); box-shadow: var(--card-shadow), 0 0 0 1px rgba(30, 30, 30, .06); visibility: hidden; opacity: 0; }
.nav-drop::after { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: .75rem; }
.nav .nav-drop a { justify-content: flex-start; padding: .5rem .625rem; border-radius: 8px; color: var(--ink); font-family: var(--font-roboto); font-weight: 700; font-size: .9375rem; line-height: 1.2; letter-spacing: 0; text-transform: none; }
.nav .nav-drop a:hover, .nav .nav-drop a:focus-visible { background: var(--paper); }
.nav .nav-drop a::before { display: none; }
.nav-group.is-open .nav-drop, .nav-group:focus-within .nav-drop { visibility: visible; opacity: 1; }
@media (hover: hover) { .nav-group:hover .nav-drop { visibility: visible; opacity: 1; } }
html.home .hdr { background: transparent; pointer-events: none; }
html.home .hdr > * { pointer-events: auto; }
html.home[data-hero-tone="light"]:not(.past-hero) .hdr { color: var(--paper); }
.hdr { transition: color .2s; }
html.home.wall-on .hdr, html.home.hdr-solid .hdr { background: var(--paper); }

/* ---------- The travelling circle ---------- */
.circle { position: fixed; left: 0; top: 0; width: 1000px; height: 1000px; border-radius: 50%; background: var(--orange-soft); transform-origin: 0 0; will-change: transform; z-index: 0; pointer-events: none; }
.circle.is-mark { background: var(--orange); }
html:not(.js) .circle { display: none; }
main { position: relative; z-index: 1; overflow-x: clip; }
.nb { white-space: nowrap; }
.stop-at { position: absolute; aspect-ratio: 1; border-radius: 50%; pointer-events: none; visibility: hidden; }

/* ---------- Scenes: pinned while scroll plays them ---------- */
.scene { position: relative; }
.scene--studio { height: 385vh; }
.scene--about { height: 160vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; padding-inline: var(--margin-web); }

/* Opening: a drawn product, one camera pulling back, photos at set moments */
.intro-in { display: grid; gap: clamp(.875rem, 2vh, 1.25rem); justify-items: start; max-width: 32em; font-size: clamp(.9375rem, 1.15vw, 1.0625rem); line-height: 1.5; }
.intro-title { margin: 0 0 .25rem; font-family: var(--font-garet); font-weight: 800; letter-spacing: -.02em; font-size: var(--t-h2); line-height: 1; white-space: nowrap; }


.cap-title { margin: 0; font-family: var(--font-garet); font-weight: 800; font-size: clamp(2.25rem, min(4.4vw, 8.5vh), 5rem); line-height: 1; text-wrap: balance; }
.cap-sub { font-size: var(--t-lead); line-height: 1.4; max-width: 28em; }

/* Hero: ball pit behind, headline in front */
.hero-pit { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--paper); }
.hero-balls { position: absolute; inset: 0; touch-action: pan-y; }
html:not(.js) .hero-balls { display: none; }
.hero-copy { position: absolute; left: var(--margin-web); right: var(--margin-web); top: 36vh; display: grid; gap: clamp(1rem, 2.4vh, 1.5rem); pointer-events: none; }
.hero-title { font-size: 4.3vw; line-height: 1; }
.hero-copy .tech-text-canvas { pointer-events: auto; }
.hero-copy .cap-sub { max-width: none; }
.hero-cta { pointer-events: auto; justify-self: start; margin-top: .25rem; }
.hero-pit .cue { opacity: 1; z-index: 1; position: absolute; left: var(--margin-web); bottom: calc(var(--tb) + .5rem); }
@media (max-height: 760px) { .hero-pit .cue { display: none; } }

/* Marks: drawn on the product in the first seconds */

/* Case studies: cards come up the page, then the row runs sideways */
.scene--row { --ct: clamp(2.25rem, min(5vw, 9vh), 5rem); --cap-h: 3.25rem; --card-h: calc(100vh - var(--header-h) - var(--ct) - 1rem - var(--tb) - var(--cap-h) - 1rem); --card-w: clamp(200px, calc(var(--card-h) * .4), 300px); }
.scene--row .stage { display: flex; align-items: center; justify-content: space-between; gap: var(--gutter-web); padding: var(--header-h) var(--margin-web) var(--tb); }
.scene--row .stop-at { right: 7vw; top: 50%; margin-top: calc(min(44vw, 72vh) / -2); width: min(44vw, 72vh); }
.row-head { position: relative; }
.case-head { flex: none; display: grid; gap: 1rem; justify-items: start; }
.scene--open { --card-w: clamp(150px, min(calc(var(--card-h) * .8), 17vw), 400px); }
.scene--open .case-track { gap: 1.75vw; }
.scene--open .stop-at { right: auto; left: 50%; top: calc(var(--card-w) * .625); margin-left: calc(min(44vw, 72vh) / -2); }
.scene--case { --card-w: clamp(150px, min(calc(var(--card-h) * .4), 15.5vw), 300px); }
.scene--open .row-head { flex: 1 1 0; min-width: 0; max-width: 34em; }
.row-wrap { position: relative; flex: none; }
.row-count { display: none; font-size: .75rem; font-weight: 700; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.case-title { font-family: var(--font-garet); font-weight: 800; font-size: var(--t-h2); line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.case-hint { font-size: .9375rem; color: var(--slate); }
.case-track { position: relative; flex: none; display: flex; align-items: flex-start; gap: clamp(1rem, 2vw, 1.75rem); width: max-content; will-change: transform; }
.case-card { flex: none; width: var(--card-w); }
.case-cap { min-height: var(--cap-h); padding-top: .625rem; font-family: var(--font-garet); font-weight: 800; font-size: .9375rem; line-height: 1.2; }
.case-cap a { text-decoration: none; }
.case-cap a:hover, .case-cap a:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--orange); text-underline-offset: 4px; }
html:not(.js) .case-card:nth-child(n+5) { display: none; }
html:not(.js) .wall-grid { position: static; }
html:not(.js) .wall-card { aspect-ratio: 4 / 5; }

/* Flip card */
.flip-card { --fc-radius: var(--r-card); --fc-glare: .22; position: relative; display: block; width: var(--card-w); height: calc(var(--card-w) * 1.25); border-radius: var(--fc-radius); cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.flip-card[data-dragging] { cursor: grabbing; }
.flip-card__shadow { position: absolute; inset: 12% 9% -4%; border-radius: var(--fc-radius); background: rgba(30, 30, 30, .34); filter: blur(22px); pointer-events: none; }
.flip-card__rotor { position: absolute; inset: 0; transform-style: preserve-3d; }
.flip-card__face { position: absolute; inset: 0; overflow: hidden; border-radius: var(--fc-radius); background: var(--slate); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-card__face--front img, .cardvid { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.flip-card__face [hidden] { display: none !important; }
.wall-card.is-draw .flip-card__face--front img { object-fit: contain; background: #fff; }
.flip-card__face--back { transform: rotateY(180deg); background: var(--ink); color: var(--paper); padding: .875rem; display: flex; flex-direction: column; gap: .5rem; cursor: grab; }
.flip-card__glare { position: absolute; inset: 0; background: radial-gradient(circle farthest-side at var(--fc-gx, 50%) var(--fc-gy, 50%), rgba(255, 255, 255, var(--fc-glare)) 0%, rgba(255, 255, 255, 0) 100%); opacity: var(--fc-sheen, 0); pointer-events: none; }
.flip-card__btn { position: absolute; inset: 0; padding: 0; border: 0; background: none; border-radius: var(--fc-radius); pointer-events: none; z-index: 2; }
.fb-num { font-size: .75rem; font-weight: 700; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.fb-tag { display: none; }
.fb-title { margin: 0; font-family: var(--font-garet); font-weight: 800; font-size: 1rem; line-height: 1.12; }
.fb-lede { font-size: .8125rem; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
.fb-meta { margin-top: auto; display: grid; font-size: .75rem; line-height: 1.35; }
.fb-meta div { display: flex; gap: .5rem; }
.fb-meta div:nth-child(2) { display: none; }
.fb-meta dt { color: #C9D1D6; }
.fb-link { align-self: stretch; background: var(--paper); color: var(--ink); border-color: var(--paper); padding-inline: .5rem; font-size: .6875rem; letter-spacing: .1em; }
.flip-card__face--back :focus-visible { outline-color: var(--paper); }
.flip-card[data-fade] .flip-card__face--back { transform: none; visibility: hidden; }
.flip-card[data-fade][data-flipped] .flip-card__face--back { visibility: visible; }
.flip-card[data-fade][data-flipped] .flip-card__face--front { visibility: hidden; }

/* Image wall */
.scene--wall .stage { padding: 0; }
.wall-grid { position: absolute; inset: var(--header-h) 16px calc(var(--tb) + 12px); display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.wall-card { min-width: 0; min-height: 0; }
.flip-card--wall { --fc-radius: 16px; width: 100%; height: 100%; }
.flip-card--wall .flip-card__face { background: var(--line-grey); }
.flip-card--wall .flip-card__face--back { padding: calc(var(--wc, 170px) * .08); gap: .25em; font-size: clamp(10px, calc(var(--wc, 170px) * .074), 14px); }
.wb.flip-card__face--back { background: var(--ink); color: var(--paper); justify-content: flex-end; line-height: 1.2; }
.wb-title { margin: 0; font-family: var(--font-garet); font-weight: 800; font-size: 1.1em; line-height: 1.1; }
.wb-what { font-size: .95em; color: #C9D1D6; }
.wb-view { align-self: flex-start; margin-top: .5em; padding: .45em .8em; border: 0; border-radius: 9999px; background: var(--orange); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }

/* Enlarged image: the same card, with the project on it */
.lb { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: clamp(.75rem, 3vmin, 2.5rem); border: 0; background: transparent; overflow: hidden; }
.lb[open] { display: grid; place-items: center; }
.lb::backdrop { background: rgba(12, 24, 33, .82); }
.lb-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 26rem); width: min(100%, 1320px); height: min(100%, 860px); overflow: hidden; border-radius: var(--r-card); background: var(--paper); color: var(--ink); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); }
.lb-media { min-height: 0; background: #fff; }
.lb-media img, .lb-media video { width: 100%; height: 100%; object-fit: contain; display: block; }
.lb-media [hidden] { display: none; }
.lb-desc:empty { display: none; }
.lb-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.lb-info { min-height: 100%; display: flex; flex-direction: column; gap: var(--space-stack); padding: clamp(1.5rem, 2.6vw, 2.5rem); }
.lb-title { margin: 0; font-family: var(--font-garet); font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1.05; text-wrap: balance; }
.lb-what { font-size: var(--t-lead); line-height: 1.35; }
.lb-meta { display: grid; gap: .875rem; padding-top: var(--space-stack); border-top: 1px solid var(--line-grey); }
.lb-meta dt { font-weight: 700; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: .25rem; }
.lb-meta dd { font-size: var(--t-small); line-height: 1.4; }
.lb-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: .625rem; padding-top: .5rem; }
.wt { display: flex; align-items: flex-end; font-family: var(--font-garet); font-weight: 800; line-height: 1.05; letter-spacing: -.01em; padding: calc(var(--wc, 170px) * .09); font-size: clamp(11px, calc(var(--wc, 170px) * .105), 22px); }
.flip-card--wall .wt--soft { background: var(--orange-soft); color: var(--ink); }
.flip-card--wall .wt--ink { background: var(--ink); color: var(--paper); }
.flip-card--wall .wt--line { background: #fff; color: var(--ink); }
.flip-card--wall .flip-card__face--back.wt--back { background: var(--orange); color: var(--ink); padding: calc(var(--wc, 170px) * .09); font-size: clamp(11px, calc(var(--wc, 170px) * .1), 20px); justify-content: flex-end; }

.hint-touch { display: none; }
@media (hover: none) { .hint-touch { display: inline; } .hint-mouse { display: none; } }

/* Reduced motion: an ordinary sideways row */
html.rm .scene--row { height: auto; }
html.rm .scene--row .stage { position: relative; height: auto; overflow: visible; padding-bottom: 3rem; }
html.rm .scene--row .stage { flex-wrap: wrap; }
html.rm .case-track { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; padding-block: .5rem; }
html.rm .case-card { scroll-snap-align: center; }

/* Hero text */
.tech-host { position: relative; display: block; touch-action: pan-y; }
.pg-hero-copy .tech-host, .cs-title .tech-host, .story-rail .tech-host, .rv-head .tech-host { justify-self: stretch; width: 100%; }

/* TiltedCard touches: a light edge that follows the cursor, and the caption tag */
.cc-edge { --edge-rgb: 255, 255, 255; position: absolute; inset: 0; z-index: 7; box-sizing: border-box; padding: 1.5px; border-radius: inherit; background: radial-gradient(farthest-side circle at var(--ex, 50%) var(--ey, 50%), rgba(var(--edge-rgb), .95) 0%, rgba(var(--edge-rgb), .7) 25%, rgba(var(--edge-rgb), .25) 55%, rgba(var(--edge-rgb), 0) 85%); -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 exclude, linear-gradient(#000 0 0); opacity: var(--edge, 0); pointer-events: none; }
.flip-card__face--back .cc-edge { background: radial-gradient(farthest-side circle at var(--ex-back, 50%) var(--ey, 50%), rgba(var(--edge-rgb), .95) 0%, rgba(var(--edge-rgb), .7) 25%, rgba(var(--edge-rgb), .25) 55%, rgba(var(--edge-rgb), 0) 85%); }
/* On pale surfaces white would not show, so the light is the brand orange */
.btn--line .cc-edge, .btn--paper .cc-edge, .say .cc-edge, .rv:not(.rv--lead) .cc-edge, .flip-card--plan .flip-card__face--front .cc-edge, .wt--line .cc-edge { --edge-rgb: 255, 165, 66; }
.cc-tip { position: fixed; left: 0; top: 0; z-index: 30; margin: 16px 0 0 14px; padding: 5px 9px; border-radius: 7px; background: #fff; color: var(--ink); box-shadow: 0 0 0 1px rgba(24, 24, 27, .08), 0 8px 18px -8px rgba(0, 0, 0, .45); font-size: 12px; font-weight: 700; line-height: 16px; white-space: nowrap; opacity: 0; pointer-events: none; transform-origin: 0 0; will-change: transform, opacity; }
@media (hover: none) { .cc-tip { display: none; } }
.tech-text-canvas { touch-action: pan-y; user-select: none; }
.tech-on .tech-fallback { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Timeline bar */
.world-bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; padding: .25rem var(--margin-web) .625rem; pointer-events: none; }
.world-bottom button { pointer-events: auto; }
/* The line: runs the width of the bar and always shows the exact place between chapters */
.tl-line { position: relative; height: 2px; margin-bottom: 2px; background: rgba(30, 30, 30, .16); }
.tl-fill { position: absolute; inset: 0; background: var(--ink); transform: scaleX(.1); transform-origin: 0 50%; }
.tl-head { position: absolute; left: -6px; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2px var(--paper); }
html.foot-under-bar .tl-line { background: rgba(243, 245, 247, .25); }
html.foot-under-bar .tl-fill { background: var(--paper); }
html.foot-under-bar .tl-head { box-shadow: 0 0 0 2px #0C1821; }
html:not(.js) .world-bottom { display: none; }
.chapter-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 4px; }
.chapter-nav button { border: 0; background: transparent; padding: 8px 4px; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink); font: inherit; font-weight: 700; font-size: .875rem; line-height: 1.3; cursor: pointer; font-variant-numeric: tabular-nums; }
.chapter-nav button[aria-current] { color: var(--ink); }
.chapter-nav button { border-radius: 9999px; }
.chapter-nav button .chip { padding: .2em .75em; border-radius: 9999px; white-space: nowrap; }
.chapter-nav button[aria-current] .chip { background: var(--orange); color: var(--ink); }

/* Studio: three words, one object */
.scene--studio .stop-at, .cube-wrap { right: 7vw; top: 50%; margin-top: calc(min(44vw, 72vh) / -2); width: min(44vw, 72vh); }
.cube-wrap { position: absolute; aspect-ratio: 1; display: grid; place-items: center; perspective: 1400px; pointer-events: none; }
.words { position: absolute; left: var(--margin-web); top: calc(50% + (var(--header-h) - var(--tb)) / 2); transform: translateY(-50%); display: grid; gap: clamp(1.5rem, 4vh, 2.5rem); justify-items: start; }
.word-list { display: grid; }
.word-btns { display: grid; grid-template-columns: repeat(2, max-content); gap: .5rem; }
.word-btns .btn { justify-content: center; }
.word { font-family: var(--font-garet); font-weight: 800; font-size: clamp(3rem, min(7.6vw, 11.5vh), 8.5rem); line-height: 1.02; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px var(--ink); white-space: nowrap; }
.word.is-on { color: var(--ink); }

.cube { --w: min(25vw, 40vh); --h: calc(var(--w) * .5); --d: calc(var(--w) * .72); --g: calc(var(--w) * .42); --ex: 0; --s: 1; --rx: -24deg; --ry: -34deg; position: relative; width: var(--w); height: var(--h); transform-style: preserve-3d; transform: scale(var(--s)) rotateX(var(--rx)) rotateY(var(--ry)); }
.face { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; background-color: #5E8F70; background-image: repeating-linear-gradient(0deg, transparent 0 calc(var(--tile) - 2px), #E9EEE6 calc(var(--tile) - 2px) var(--tile)), repeating-linear-gradient(90deg, transparent 0 calc(var(--tile) - 2px), #E9EEE6 calc(var(--tile) - 2px) var(--tile)); --tile: calc(var(--w) / 8); backface-visibility: visible; }
.face::before { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2px var(--line-grey); opacity: var(--ex); transform: translateZ(1px); }
.face::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--g) * var(--ex)); border-top: 2px dotted var(--slate); transform-origin: 0 0; transform: rotateY(90deg); opacity: var(--ex); }
.f-front, .f-back { width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2); }
.f-left, .f-right { width: var(--d); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--d) / -2); }
.f-top, .f-bottom { width: var(--w); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--w) / -2); }
.f-front { background-color: #5E8F70; transform: translateZ(calc(var(--d) / 2 + var(--g) * var(--ex))); }
.f-back { background-color: #31513F; transform: rotateY(180deg) translateZ(calc(var(--d) / 2 + var(--g) * var(--ex))); }
.f-right { background-color: #2A4436; transform: rotateY(90deg) translateZ(calc(var(--w) / 2 + var(--g) * var(--ex))); }
.f-left { background-color: #4C7A5D; transform: rotateY(-90deg) translateZ(calc(var(--w) / 2 + var(--g) * var(--ex))); }
.f-top { background-color: #74A585; transform: rotateX(90deg) translateZ(calc(var(--h) / 2 + var(--g) * var(--ex))); }
.f-bottom { background-color: #23392D; transform: rotateX(-90deg) translateZ(calc(var(--h) / 2 + var(--g) * var(--ex))); }

/* About: the founder rises in front of the circle */
.about-a { right: 20vw; bottom: 22vh; width: 16vmin; }
.about-b { right: -6vw; bottom: -14vh; width: min(50vw, 92vh); }
.about-pic { position: absolute; right: 6vw; bottom: var(--tb); height: min(76vh, 56vw); width: auto; max-width: none; }
.about-text { position: absolute; left: var(--margin-web); top: calc(50% + (var(--header-h) - var(--tb)) / 2); transform: translateY(-50%); width: 46vw; display: grid; gap: clamp(.875rem, 2.4vh, 1.5rem); justify-items: start; }
.about-line { display: block; }
.about-text .h1 { font-size: clamp(2.25rem, min(5vw, 8.5vh), 5rem); }
/* Testimonial card under the founder button: lifted off the page, not shouting */
.say { margin: 0; width: min(100%, 32em); padding: 1rem 1.125rem .75rem; border-radius: var(--r-card); background: #fff; box-shadow: 0 14px 30px -14px rgba(30, 30, 30, .32), 0 0 0 1px rgba(30, 30, 30, .05); cursor: pointer; font-size: var(--t-small); line-height: 1.4; }
.say-stack { display: grid; }
.say-item { grid-area: 1 / 1; display: grid; gap: .5rem; align-content: start; }
.say blockquote { margin: 0; }
.say figcaption { font-size: var(--t-cap); font-weight: 700; color: var(--slate); }
.say-pips { display: flex; gap: .375rem; margin-top: .625rem; }
.say-pips i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-grey); }
.say-pips i.is-on { background: var(--orange); }

/* ---------- Site footer: the opposite colour to the page ---------- */
.site-foot { --sf: #0C1821; position: relative; background: var(--sf); color: var(--paper); --sf-gap: clamp(2.5rem, 6vh, 4rem); padding: clamp(3.5rem, 8vh, 5.5rem) var(--margin-web) 1.5rem; display: grid; gap: var(--sf-gap); }
html.home .site-foot { min-height: 80vh; min-height: 80svh; padding-top: calc(var(--header-h) + .25rem); padding-bottom: calc(.75rem + var(--tb)); --sf-gap: clamp(1rem, 2.5vh, 1.75rem); align-content: space-between; }
.sf-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem var(--gutter-web); align-items: start; }
.sf-pitch { display: grid; gap: clamp(1.5rem, 4vh, 2.5rem); width: fit-content; max-width: 100%; align-content: start; }
.sf-line { font-family: var(--font-garet); font-weight: 800; letter-spacing: -.03em; line-height: .98; font-size: clamp(2.75rem, 6vw, 6.5rem); }
.sf-line { white-space: nowrap; }
.sf-contact { width: 0; min-width: 100%; display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; gap: 1rem .75rem; padding-top: clamp(1.25rem, 2.5vh, 1.75rem); border-top: 1px solid #33424D; }
.sf-tag { margin-bottom: .625rem; font-size: .6875rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(243, 245, 247, .55); }
.sf-email { position: relative; display: inline-flex; align-items: center; gap: .5rem; padding-bottom: .375rem; font-family: var(--font-garet); font-weight: 400; font-size: clamp(.9375rem, 1.12vw, 1.3125rem); line-height: 1.1; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
.sf-email::before, .sf-email::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(243, 245, 247, .28); }
.sf-email::after { height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.sf-email:hover::after, .sf-email:focus-visible::after { transform: scaleX(1); }
.sf-contact svg { flex: none; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s, color .25s; }
.sf-email svg { width: .8em; height: .8em; color: var(--orange); }
.sf-email:hover svg, .sf-email:focus-visible svg { transform: translate(2px, -2px); }
.sf-mail, .sf-social { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
.sf-social-btns { display: flex; gap: .375rem; }
.btn--quiet { min-height: 34px; padding: .6em 1.15em; border-width: 1px; border-color: rgba(243, 245, 247, .28); background: transparent; color: rgba(243, 245, 247, .85); font-size: .625rem; letter-spacing: .12em; }
.btn--quiet .btn-dot { width: 6px; height: 6px; }
.btn--quiet .btn-rest { gap: .4375rem; }
.sf-links { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem var(--gutter-web); padding-top: 1.5rem; border-top: 1px solid #33424D; font-size: .9375rem; }
.sf-links-main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem var(--gutter-web); }
.sf-col ul { display: grid; gap: .4375rem; list-style: none; margin: 0; padding: 0; }
.sf-col a { text-decoration: none; }
.sf-col a:hover, .sf-col a:focus-visible { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 4px; }
.sf-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem; margin-top: calc(1.5rem - var(--sf-gap)); padding-top: 1rem; border-top: 1px solid #33424D; font-size: .8125rem; color: rgba(243, 245, 247, .7); }
.sf-legal { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.sf-bottom a { text-decoration: none; }
.sf-bottom a:hover { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 4px; }
.site-foot :focus-visible { outline-color: var(--paper); }
.form { display: grid; gap: 1.5rem; }
.field { display: block; }
.field-name { display: block; font-size: .875rem; margin-bottom: .25rem; }
.input { width: 100%; font: inherit; color: inherit; background: transparent; border: 0; border-bottom: 1.5px solid currentColor; border-radius: 0; padding: .4rem 0 .6rem; resize: vertical; }
.hp { position: absolute; left: -9999px; }
.form-status { font-size: .9375rem; min-height: 1.5em; }
.stop-mark { width: .13em; height: .13em; display: inline-block; vertical-align: baseline; margin-left: .05em; border-radius: 50%; background: var(--orange); }
html.js.home .site-foot .stop-mark { background: transparent; }
html.js.home.landed .site-foot .stop-mark { background: var(--orange); }
html.circle-front .circle { z-index: 5; }
html.foot-under-header .hdr { color: var(--paper); background: #0C1821; }
html.foot-under-bar .chapter-nav button { color: var(--paper); }
html.foot-under-bar .chapter-nav button .chip { color: var(--paper); }
html.foot-under-bar .chapter-nav button[aria-current] .chip { color: var(--ink); }

/* No script: show everything, unpinned */
html:not(.js) .scene { height: auto; }
html:not(.js) .stage { position: relative; height: auto; min-height: 100vh; overflow: visible; display: grid; gap: 2rem; padding-block: var(--header-h) 3rem; }
html:not(.js) .cap, html:not(.js) .words, html:not(.js) .about-text { position: static; width: auto; margin: 0; transform: none; opacity: 1; }
html:not(.js) .scene--row .stage { display: block; }
html:not(.js) .case-track { width: auto; overflow-x: auto; }
html:not(.js) .flip-card__btn, html:not(.js) .flip-card__face--back { display: none; }
html:not(.js) .gfx, html:not(.js) .shot-2, html:not(.js) .post, html:not(.js) .wall, html:not(.js) .marks, html:not(.js) .cue { display: none; }
html:not(.js) .cap { visibility: visible; }
html:not(.js) .scene--open .stage { display: block; }
html:not(.js) .about-line { opacity: 1; }

/* ---------- Inner pages: same layout family as the existing site, new branding, no animation ---------- */
html:not(.home) *, html:not(.home) *::before, html:not(.home) *::after { transition: none !important; animation: none !important; }
/* The one exception: the button hover */
@media (prefers-reduced-motion: no-preference) {
  html:not(.home) .btn .btn-dot { transition: transform .3s, background-color .3s !important; }
  html:not(.home) .btn .btn-text, html:not(.home) .btn .btn-hover { transition: transform .3s, opacity .3s !important; }
}
.page { padding-top: var(--header-h); }
.page > * { padding-inline: var(--margin-web); }
.sect-label { display: flex; align-items: center; gap: .625rem; font-weight: 700; }
.sect-label::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--orange); flex: none; }
.page-title { margin: 0; font-family: var(--font-garet); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-size: var(--t-title); text-wrap: balance; }
.page-title--big { font-size: var(--t-h1); }
.lead { font-size: var(--t-lead); line-height: 1.4; max-width: 32em; }
.cs-num { font-family: var(--font-garet); font-weight: 400; font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1; font-variant-numeric: tabular-nums; }

/* Generic bands */
.band { padding-block: var(--space-section); }
.band--dark { background: #0C1821; color: var(--paper); }
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem var(--gutter-web); align-items: start; }
.split > div:first-child { grid-column: 1 / span 6; display: grid; gap: 1.5rem; }
.split > :nth-child(2) { grid-column: 8 / span 5; }
.split-text { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.5; }

/* Page hero: copy left, picture right to the edge */
.pg-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gutter-web); min-height: calc(100vh - var(--header-h)); align-items: center; padding-block: var(--space-block); }
.pg-hero-copy { display: grid; gap: var(--space-stack); align-content: center; justify-items: start; }
.pg-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.pg-hero-img { display: grid; gap: .625rem; justify-items: end; }
.pg-hero-img .flip-card { width: min(100%, calc((100vh - var(--header-h) - var(--space-block) * 2 - 2rem) * .8)); aspect-ratio: 4 / 5; height: auto; }
.card-hint { font-size: var(--t-small); color: var(--slate); }

/* The card: every image on every page */
.card { position: relative; display: block; border-radius: var(--r-card); }
.card__in { position: relative; display: block; height: 100%; overflow: hidden; border-radius: var(--r-card); background: #fff; box-shadow: var(--card-shadow); will-change: transform; }
.card__in > img { width: 100%; }
/* An image card sized by its picture, with text about it on the dark back */
.flip-card--img { width: 100%; height: auto; container-type: inline-size; }
.flip-card--img .flip-card__rotor { position: relative; inset: auto; }
.flip-card--img .flip-card__face--front { position: relative; inset: auto; display: block; background: #fff; }
.flip-card--img .flip-card__face > img { display: block; width: 100%; height: auto; }
.flip-card--plan .flip-card__face > img { object-fit: contain; }
.flip-card--img .flip-card__face--back { justify-content: flex-end; gap: .5em; padding: clamp(1rem, 6cqw, 2.25rem); background: var(--ink); color: var(--paper); }
.fi-proj { font-size: clamp(.75rem, 2.4cqw, .9375rem); color: #C9D1D6; }
.fi-title { margin: 0; font-family: var(--font-garet); font-weight: 800; letter-spacing: -.01em; font-size: clamp(1.0625rem, 5cqw, 2rem); line-height: 1.1; }
.fi-text { font-size: clamp(.8125rem, 2.8cqw, 1.125rem); line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 9; overflow: hidden; }
.pg-hero-img .flip-card--img .flip-card__rotor { position: absolute; inset: 0; }
.pg-hero-img .flip-card--img .flip-card__face--front { position: absolute; inset: 0; }
.pg-hero-img .flip-card--img .flip-card__face > img { height: 100%; object-fit: cover; }
.flip-card--fill { width: 100%; height: 100%; }
.flip-card__face > img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.flip-card--fill .flip-card__face { background: var(--line-grey); }
.flip-card--fill .flip-card__face--back { transform: rotateY(180deg); padding: 0; }

/* Service pages */
.sv-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-stack) var(--gutter-web); align-items: start; }
.sv-row > .h1 { grid-column: 1 / span 5; }
.sv-copy, .sv-row > .faq { grid-column: 7 / span 6; display: grid; gap: var(--space-stack); }
.sv-copy { font-size: var(--t-lead); line-height: 1.45; max-width: 36em; }
.ab-how > .h1 + .cs-index { margin-top: var(--space-block); padding-bottom: 0; }
.lab-stay .h3 { max-width: 30em; }
/* Questions */
.faq { display: grid; }
.faq-item { border-top: 1px solid var(--line-grey); }
.faq-item:last-child { border-bottom: 1px solid var(--line-grey); }
.faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.125rem; cursor: pointer; list-style: none; font-family: var(--font-garet); font-weight: 800; font-size: var(--t-h3); line-height: 1.2; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; flex: none; width: .625rem; height: .625rem; border-radius: 50%; background: var(--line-grey); }
.faq-item[open] summary::after { background: var(--orange); }
.faq-item p { padding-bottom: 1.25rem; max-width: 42em; }
.faq-page { padding-bottom: var(--space-section); }
.faq-more { font-size: var(--t-small); }
.sv-row > .faq-more { grid-column: 7 / span 6; }
.legal { display: grid; gap: var(--space-block); max-width: 46em; padding-bottom: var(--space-section); }
.legal .lead { max-width: none; }
.legal-date { color: var(--slate); margin-top: calc(var(--space-block) * -.5); }
.legal-part { display: grid; gap: .75rem; }
.legal-part ul { list-style: disc; padding-left: 1.25em; display: grid; gap: .25rem; }
.nf { justify-items: start; }
.nf-btns { display: flex; flex-wrap: wrap; gap: .75rem; }
/* Pricing */
.prices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter-web); padding-bottom: var(--space-section); }
.flip-card--price { width: 100%; height: auto; }
.flip-card--price .flip-card__rotor { position: relative; inset: auto; height: 100%; }
.flip-card--price .flip-card__face--front { position: relative; inset: auto; height: 100%; display: flex; flex-direction: column; gap: .75rem; padding: clamp(1.25rem, 2vw, 2rem); background: #fff; color: var(--ink); }
.flip-card--price .flip-card__face--back { padding: 0; background: var(--line-grey); }
.flip-card--price .flip-card__face--back img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.price { margin: 0; }
.flip-card--price { min-height: clamp(280px, 25vw, 400px); }
.price--lead { grid-column: 1 / -1; min-height: clamp(280px, 26vw, 400px); }
.price-name { margin: 0; font-family: var(--font-garet); font-weight: 800; font-size: clamp(1.125rem, 1.6vw, 1.625rem); line-height: 1.15; }
.price-desc { min-height: 2.9em; font-size: var(--t-small); line-height: 1.45; }
.price-from { margin-top: auto; display: grid; gap: .25rem; }
.price-pre { font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.price-num { font-family: var(--font-garet); font-weight: 800; font-size: clamp(1.625rem, 2.5vw, 2.75rem); line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.price-per { font-size: .45em; letter-spacing: 0; }
.flip-card--price.price--lead .flip-card__face--front { background: var(--ink); color: var(--paper); }
.price--lead .price-pre { color: var(--line-grey); }
.price--lead .price-num { color: var(--orange); font-size: clamp(2.5rem, 5.5vw, 5.5rem); }
.price--lead .price-name { font-size: clamp(1.5rem, 3vw, 3rem); }
.price--lead .price-desc { font-size: var(--t-lead); min-height: 0; }
.flip-card--price.price--lead .flip-card__face--front { padding: clamp(1.5rem, 3vw, 3rem); }
.price-note { grid-column: 1 / -1; font-size: var(--t-lead); line-height: 1.4; margin-top: var(--space-stack); }
.price:not(.price--lead) .cc-edge { --edge-rgb: 255, 165, 66; }

/* Case study index */
.idx-head { display: grid; gap: var(--space-stack); padding-block: var(--space-block); }
.idx-head .tech-host { justify-self: stretch; width: 100%; }
.cs-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-block) var(--gutter-web); padding-bottom: var(--space-section); }
.idx-card { display: grid; gap: .625rem; align-content: start; }
.cs-index .flip-card { width: 100%; height: auto; aspect-ratio: 4 / 5; margin-bottom: .5rem; }
.cs-index .fb-title { font-size: var(--t-h3); }
.cs-index .fb-lede { font-size: var(--t-small); -webkit-line-clamp: 8; }
.cs-index .flip-card__face--back { padding: clamp(1rem, 2vw, 1.75rem); }
.cs-index .flip-card--fill .flip-card__face--back { padding: 0; }
.idx-tag { font-size: var(--t-cap); color: var(--slate); }
.idx-title { margin: 0; font-family: var(--font-garet); font-weight: 800; font-size: var(--t-h3); line-height: 1.15; }
.idx-title a { text-decoration: none; }
.idx-title a:hover, .idx-title a:focus-visible { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.idx-sum { font-size: var(--t-small); line-height: 1.45; }

/* Case studies */
.cs-strip { padding-block: var(--space-stack); border-bottom: 1px solid var(--line-grey); }
.cs-strip-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gutter-web); margin-top: 1rem; }
.cs-pick { display: grid; gap: .5rem; text-decoration: none; padding-bottom: .625rem; border-bottom: 2px solid transparent; }
.cs-pick[aria-current] { border-bottom-color: var(--orange); }
.cs-pick-img { --r-card: 10px; --card-shadow: 0 8px 16px -8px rgba(30, 30, 30, .3); aspect-ratio: 16 / 10; }
.cs-pick-img img { width: 100%; height: 100%; object-fit: cover; }
.cs-pick-title { font-family: var(--font-garet); font-weight: 800; font-size: .9375rem; line-height: 1.2; }
.cs-pick:hover .cs-pick-title { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.cs-pick-tag { font-size: .8125rem; line-height: 1.3; color: var(--slate); }
.cs-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter-web); row-gap: 2rem; align-items: start; padding-block: var(--space-block); }
.cs-title { grid-column: 1 / span 7; display: grid; gap: var(--space-stack); }
.cs-img { grid-column: 8 / span 5; }
.cs-img { display: grid; gap: .625rem; }
.cs-img .flip-card__face > img { aspect-ratio: 4 / 5; object-fit: cover; }
.cs-img .cardvid { aspect-ratio: 4 / 5; height: auto; }
.cs-img--contain .flip-card__face > img { object-fit: contain; }
.meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: .5rem; border-block: 1px solid var(--line-grey); }
.meta > div { padding: 1rem 1rem 1rem 0; }
.meta > div + div { border-left: 1px solid var(--line-grey); padding-left: 1rem; }
.meta dt { font-weight: 700; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: .5rem; }
.meta dd { font-size: var(--t-small); line-height: 1.4; white-space: pre-line; }
.cs-section { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-stack) var(--gutter-web); padding-block: var(--space-block); border-top: 1px solid var(--line-grey); align-items: start; }
.cs-section > .cs-num { grid-column: 1; }
.cs-copy { grid-column: 2 / span 4; display: grid; gap: 1rem; align-content: start; }
.cs-copy .lede { font-family: var(--font-garet); font-weight: 800; font-size: var(--t-h3); line-height: 1.2; }
.cs-list { display: grid; gap: .375rem; }
.cs-list li { position: relative; padding-left: 1.125rem; }
.cs-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.cs-specs { display: grid; grid-template-columns: auto 1fr; gap: .375rem 1.25rem; font-size: var(--t-small); }
.cs-specs dt { color: var(--slate); }
.cs-media { grid-column: 7 / span 6; display: grid; gap: var(--gutter-web); }
.cs-media--many .flip-card__face > img { aspect-ratio: 4 / 5; object-fit: cover; }
.cs-media--many .flip-card--plan .flip-card__face > img { object-fit: contain; }
.cs-media--many { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-media--many .cs-caption { grid-column: 1 / -1; }
.cs-caption { font-size: var(--t-small); color: var(--slate); }
.cs-pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter-web); padding-block: var(--space-block); border-top: 1px solid var(--line-grey); }
.cs-pager a { display: grid; gap: .625rem; text-decoration: none; }
.cs-pager a:last-child { text-align: right; justify-items: end; }
.cs-pager-title { font-family: var(--font-garet); font-weight: 800; font-size: var(--t-h3); line-height: 1.15; }
.cs-pager a:hover .cs-pager-title { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Studio */
.svc-cols { list-style: none; padding: 0; margin: var(--space-block) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.svc-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc-cols--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ab-what-left { grid-column: 1 / span 6; display: grid; gap: var(--space-stack); align-content: start; }
.ab-quad { list-style: none; padding: 0; margin-top: .5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.ab-quad .btn { width: 100%; padding-inline: .75rem; font-size: .6875rem; letter-spacing: .1em; }
.ab-what > .ab-what-img { grid-column: 7 / -1; align-self: stretch; display: grid; }
.ab-what-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: clamp(.5rem, .9vw, .875rem); }
.ab-what-grid .flip-card--img { height: 100%; }
.ab-what-grid .flip-card__rotor { position: absolute; inset: 0; }
.ab-what-grid .flip-card__face--front { position: absolute; inset: 0; display: block; }
.ab-what-grid .flip-card__face--front > img { height: 100%; object-fit: cover; }
.ab-what-grid .flip-card--plan .flip-card__face--front > img { object-fit: contain; }
.ab-what-grid .cardvid { height: 100%; }
.ab-what-grid .fi-title { font-size: clamp(.9375rem, 1.2vw, 1.125rem); }
.ab-what-grid .fi-text { font-size: var(--t-small); }
.ab-what-grid .flip-card__face--back { padding: clamp(.75rem, 1.2vw, 1.25rem); }
@media (max-width: 1023px) { .ab-what-grid .flip-card--img { aspect-ratio: 1; height: auto; } }

/* How we work: five steps on one line */
.ab-how--steps { padding-block: calc(var(--space-section) * 1.2); }
.how-steps { --how-pad: clamp(1rem, 1.5vw, 1.75rem); --how-rail: 2.5rem; list-style: none; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.25rem, .6vw, .75rem); margin: var(--space-block) 0 0; padding: var(--how-rail) 0 0; }
.how-steps::before { content: ""; position: absolute; left: 0; right: 0; top: .3125rem; height: 1px; background: var(--line-grey); }
.how-step { position: relative; display: grid; gap: 1.25rem; align-content: start; padding: var(--how-pad); border: 1px solid transparent; border-radius: var(--r-card); transition: background-color .25s, border-color .25s, box-shadow .25s; }
.how-step::before { content: ""; position: absolute; top: calc(var(--how-rail) * -1); left: var(--how-pad); width: .625rem; height: .625rem; border-radius: 50%; background: var(--orange-soft); transition: background-color .25s, box-shadow .25s; }
.how-step .cs-num { opacity: .5; transition: opacity .25s; }
.how-step .h3 { font-size: clamp(1.125rem, 1.5vw, 1.5rem); transition: transform .25s; }
.how-step p { font-size: var(--t-small); line-height: 1.55; }
@media (hover: hover) {
  .how-step:hover { background: #fff; border-color: rgba(30, 30, 30, .16); box-shadow: 0 10px 28px rgba(30, 30, 30, .06); }
  .how-step:hover::before { background: var(--orange); box-shadow: 0 0 0 4px rgba(255, 165, 66, .2); }
  .how-step:hover .cs-num { opacity: 1; }
  .how-step:hover .h3 { transform: translateX(2px); }
}
@media (max-width: 1023px) {
  .how-steps { grid-template-columns: minmax(0, 1fr); gap: .5rem; padding: 0 0 0 1.5rem; }
  .how-steps::before { left: .3125rem; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .how-step::before { top: calc(var(--how-pad) + .5rem); left: calc(-1.5rem - 1px); }
}
@media (max-width: 1280px) {
  html .ab-quad li .btn { min-height: 38px; padding-inline: .375rem; font-size: .625rem; letter-spacing: .04em; }
  .ab-quad .btn-rest { gap: .375rem; }
}
.svc-col h3 a { text-decoration: none; }
.svc-col h3 a:hover, .svc-col h3 a:focus-visible { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.svc-col { display: flex; flex-direction: column; gap: 1rem; padding-inline: var(--gutter-web); border-left: 1px solid var(--line-grey); }
.svc-col:first-child { padding-left: 0; border-left: 0; }
.svc-col:last-child { padding-right: 0; }
.svc-col .flip-card--img { margin-top: auto; }
.svc-col .flip-card__face > img { aspect-ratio: 4 / 5; object-fit: cover; }
.svc-list { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: var(--t-small); color: var(--slate); padding-bottom: .5rem; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; }
.step { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: 1rem; padding-block: 1.5rem; border-top: 1px solid var(--line-grey); }
.step:first-child { border-top: 0; padding-top: 0; }
.step .h3 { margin-bottom: .375rem; }

/* About */
.ab-figure { position: relative; overflow: hidden; align-self: stretch; min-height: 60vh; }
.ab-figure img { position: absolute; left: 50%; bottom: 0; height: 94%; width: auto; max-width: none; transform: translateX(-50%); }
.ab-circle { position: absolute; left: 50%; bottom: -14%; width: min(100%, 76vh); aspect-ratio: 1; border-radius: 50%; background: var(--orange-soft); transform: translateX(-50%); }
.ab-story { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem var(--gutter-web); align-items: center; }
.ab-story > div { grid-column: 1 / span 6; display: grid; gap: 1.25rem; max-width: 40em; }
.ab-story img { grid-column: 8 / span 5; width: 100%; height: auto; }

/* About page sections */
.pg-hero-img img[alt^="Creative Conceptz, shelving"] { object-position: 82% 50%; }
.ab-who, .ab-what { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-block) var(--gutter-web); align-items: start; }
.ab-who > div:first-child { grid-column: 1 / span 5; display: grid; gap: var(--space-stack); }
.ab-who-copy { grid-column: 6 / span 3; display: grid; gap: var(--space-stack); justify-items: start; }
.ab-who-img { grid-column: 9 / span 4; }
.ab-how { border-top: 1px solid var(--line-grey); }
.ab-how .svc-col img { aspect-ratio: 4 / 5; }
.ab-founder { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-block) var(--gutter-web); align-items: stretch; padding-block-end: 0; border-top: 1px solid var(--line-grey); }
.ab-founder-copy { grid-column: 1 / span 6; display: grid; gap: var(--space-stack); align-content: center; justify-items: start; max-width: 40em; padding-bottom: var(--space-section); }
.nowrap { white-space: nowrap; }
@media (min-width: 1024px) {
  .ab-founder { position: relative; overflow: hidden; min-height: clamp(620px, 92vh, 1100px); align-items: center; }
  .ab-founder-copy { position: relative; z-index: 2; grid-column: 1 / span 6; max-width: min(42vw, 40em); padding-bottom: var(--space-block); }
  .ab-founder .ab-figure { position: absolute; right: 0; top: var(--space-block); bottom: 0; width: 56%; min-height: 0; overflow: visible; z-index: 1; }
}
.ab-founder .ab-circle { left: 50%; bottom: -14%; width: min(90%, 82vh); transform: translateX(-50%); }
.ab-founder .ab-figure img { left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; max-width: 100%; object-fit: contain; object-position: center bottom; transform: none; }
/* Reviews: real client words, the loudest band on the page */
.reviews { background: var(--orange-soft); color: var(--ink); padding-block: var(--space-section); display: grid; gap: var(--space-block); }
.reviews .dot { background: var(--ink); }
.rv-head { display: grid; gap: var(--space-stack); }
.rv-title { margin: 0; font-family: var(--font-garet); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-size: var(--t-h1); max-width: 14em; text-wrap: balance; }
.rv-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter-web); }
.rv { margin: 0; grid-column: 7 / span 6; }
.rv--lead { grid-column: 1 / span 6; grid-row: span 2; }
.rv .card__in { display: flex; flex-direction: column; gap: var(--space-stack); padding: clamp(1.5rem, 2.4vw, 2.5rem); background: var(--paper); box-shadow: var(--card-shadow); }
.rv blockquote { margin: 0; font-size: var(--t-lead); line-height: 1.4; }
.rv figcaption { margin-top: auto; font-weight: 700; font-size: var(--t-small); }
.rv-mark { flex: none; width: 2.25rem; height: auto; fill: var(--orange); }
.rv--lead .card__in { background: var(--ink); color: var(--paper); }
.rv--lead blockquote { font-family: var(--font-garet); font-weight: 800; font-size: clamp(1.5rem, 2.5vw, 2.5rem); line-height: 1.15; letter-spacing: -.01em; }
.rv--lead .rv-mark { width: 3.5rem; }


/* Our story */
.story { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-block) var(--gutter-web); padding-block: var(--space-block) var(--space-section); align-items: start; }
.story-rail { grid-column: 1 / span 5; display: grid; gap: var(--space-stack); }
.story-desc { font-size: var(--t-lead); line-height: 1.4; max-width: 26em; padding-top: var(--space-stack); border-top: 1px solid var(--line-grey); }
.story-built { display: grid; gap: .875rem; padding-top: var(--space-stack); border-top: 1px solid var(--line-grey); }
.story-built ul { display: grid; gap: .375rem; }
.story-body { grid-column: 7 / span 6; display: grid; gap: var(--space-stack); font-size: 1.0625rem; line-height: 1.6; max-width: 40em; }
.story-body hr { width: 3rem; margin: 1rem 0; border: 0; border-top: 1px solid var(--slate); }
.story-list { display: grid; gap: .5rem; }
.story-list li { position: relative; padding-left: 1.125rem; }
.story-list li::before { content: ""; position: absolute; left: 0; top: .65em; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.story-pull { font-family: var(--font-garet); font-weight: 800; font-size: var(--t-h3); line-height: 1.15; }
.story-desc { font-weight: 400; }
.story-film { display: grid; gap: .625rem; margin: .5rem 0; }
.story-film video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--fc-radius, 16px); background: var(--ink); }
.story-film figcaption { font-size: .875rem; color: var(--slate); }
@media (min-width: 1024px) and (min-height: 920px) { .story-rail { position: sticky; top: 5rem; } }
.story-acts { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: var(--space-stack); }

/* Lab */
.lab-projects { display: grid; gap: var(--space-block); padding-top: var(--space-block); }
.lab-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter-web); }
.lab-card { display: grid; gap: .375rem; padding: 0 0 .75rem; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.lab-card[aria-pressed="true"] { border-bottom-color: var(--orange); }
.lab-card-img { aspect-ratio: 16 / 10; margin-bottom: .5rem; }
.lab-card-img img { width: 100%; height: 100%; object-fit: cover; }
.lab-card-title { font-family: var(--font-garet); font-weight: 800; font-size: var(--t-h3); line-height: 1.2; }
.lab-card:hover .lab-card-title { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.lab-num { font-variant-numeric: tabular-nums; }
.lab-card-cat, .lab-cat { font-size: var(--t-small); color: var(--slate); }
.lab-status { font-size: .8125rem; font-weight: 700; color: var(--slate); }
.lab-status[data-state="released"] { color: var(--ink); }
.lab-status[data-state="released"]::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: .375rem; border-radius: 50%; background: var(--orange); vertical-align: .1em; }
.lab-detail { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-block) var(--gutter-web); padding-top: var(--space-block); border-top: 1px solid var(--line-grey); align-items: start; }
.lab-media { grid-column: 1 / span 7; display: grid; gap: .75rem; }
.lab-main { aspect-ratio: 5 / 4; }
.lab-main .flip-card__face > img { object-fit: contain; }
.lab-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: .5rem; }
.lab-thumbs button { padding: 0; border: 2px solid transparent; border-radius: 10px; background: var(--line-grey); aspect-ratio: 1; cursor: pointer; overflow: hidden; min-height: 44px; }
.lab-thumbs button[aria-pressed="true"] { border-color: var(--orange); }
.lab-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.lab-info { grid-column: 8 / span 5; display: grid; gap: var(--space-stack); justify-items: start; }
.lab-eyebrow { font-size: var(--t-small); }
.lab-meta { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem var(--gutter-web); padding-top: var(--space-stack); border-top: 1px solid var(--line-grey); }
.lab-meta dt { font-weight: 700; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: .375rem; }
.lab-meta dd { font-size: var(--t-small); line-height: 1.4; }
.lab-stay { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; border-top: 1px solid var(--line-grey); padding-block: var(--space-block); }

@media (max-width: 767px) {
  .hero-title { font-size: 11.5vw; }
}

@media (max-width: 1023px) {
  .intro-in { max-width: none; }
  .intro { left: var(--margin-web); right: var(--margin-web); width: auto; bottom: auto; display: block; padding: calc(var(--header-h) + .25rem) 0 0; }
  .intro-in { gap: .75rem; font-size: var(--t-small); line-height: 1.45; }
  .st-cap { font-size: .8125rem; }
  .chapter-nav button .chip { padding-inline: .35em; font-size: clamp(.5625rem, 2.5vw, .75rem); }
}

/* ---------- Tablet and down ---------- */
@media (max-width: 1023px) {
  :root { --header-h: 84px; }
  .hdr { padding-top: 1rem; }
  .hdr-mark { font-size: 1.375rem; }
  .nav a, .nav-trigger { font-size: .9375rem; }
  .hdr-right { gap: .75rem; }
  .sv-row > .h1, .sv-copy, .sv-row > .faq, .sv-row > .faq-more { grid-column: 1 / -1; }
  .svc-cols--3 { grid-template-columns: minmax(0, 1fr); }
  .prices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: .5rem; }
  .hero .label { display: none; }

  .cap { top: calc(var(--header-h) + 2vh); transform: none; width: auto; right: var(--margin-web); }
  .cap-title { font-size: clamp(1.875rem, 8.4vw, 3.25rem); }
  .cap-sub { font-size: 1rem; }
  .hero-copy { top: calc(var(--header-h) + 9vh); }
  .cue { display: none; }
  html.marks-in .m-line { width: 20px; }

  /* Card rows: one card at a time, swipe sideways */
  .scene--row { --card-w: min(76vw, 300px); height: auto; }
  .scene--open, .scene--case { --card-w: min(76vw, 300px); }
  .scene--row .stage { position: relative; height: auto; display: block; overflow: visible; padding: calc(var(--header-h) + .5rem) 0 clamp(2rem, 5vh, 3rem); }
  .scene--row .stop-at { display: none; }
  .scene--open .row-head { max-width: none; }
  .row-head { padding-inline: var(--margin-web); }
  .case-track { display: flex; width: auto; gap: .75rem; margin-top: 1.25rem; padding: .25rem calc((100vw - var(--card-w)) / 2) .25rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; will-change: auto; }
  .case-track::-webkit-scrollbar { display: none; }
  .case-card { scroll-snap-align: center; scroll-snap-stop: always; }
  .case-cap { min-height: 0; }
  .row-count { display: block; text-align: center; margin-top: .25rem; }
  .flip-card { touch-action: pan-x pan-y; }
  .flip-card__shadow { display: none; }
  .flip-card--wall { --fc-radius: 10px; }
  .flip-card--wall { touch-action: pan-y; }
  .world-bottom { padding-inline: .5rem; }
  .chapter-nav { gap: 0; }
  .chapter-nav button { font-size: .75rem; gap: 4px; padding-inline: 0; }

  .scene--studio .stop-at, .cube-wrap { right: -8vw; top: auto; bottom: 3vh; margin: 0; width: min(96vw, 52vh); }
  .cube { --w: min(50vw, 26vh); }
  .words { top: calc(var(--header-h) + 1vh); right: var(--margin-web); transform: none; gap: .75rem; }
  .word-btns { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: .375rem; }
  .word-btns .btn { background: var(--paper); min-height: 38px; padding-inline: .375rem; font-size: .625rem; letter-spacing: .04em; }
  .word-btns .btn-rest { gap: .375rem; }
  .word { font-size: clamp(2.5rem, min(12.5vw, 7.2vh), 5rem); -webkit-text-stroke-width: 1.25px; }

  .about-a { right: 30vw; bottom: 16vh; width: 24vw; }
  .about-b { right: -22vw; bottom: 0; width: min(104vw, 62vh); }
  .about-pic { right: 3vw; height: 38vh; }
  .about-text { top: calc(var(--header-h) + 1vh); transform: none; width: auto; right: var(--margin-web); gap: .75rem; }
  .say { font-size: var(--t-cap); padding: .75rem .875rem .625rem; }
  .say figcaption { font-size: .75rem; }
  .about-text .h1 { font-size: clamp(1.875rem, 8.4vw, 3.25rem); }
  .word { letter-spacing: -.03em; }

  .sf-grid { grid-template-columns: minmax(0, 1fr); }
  .sf-line { font-size: clamp(2.5rem, 11.4vw, 6rem); }
  .sf-pitch { width: auto; }
  .sf-contact { width: auto; min-width: 0; }
  .sf-links { grid-template-columns: minmax(0, 1fr); }

  .pg-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; row-gap: var(--space-block); }
  .pg-hero-img { justify-items: start; }
  .pg-hero-img .flip-card { width: 100%; max-width: 30rem; }
  .card__in { box-shadow: none; will-change: auto; }
  .rv .card__in { box-shadow: none; }
  .rv, .rv--lead { grid-column: 1 / -1; grid-row: auto; }
  .lb-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 46%) minmax(0, 1fr); }
  .lb-actions { margin-top: 0; }
  .ab-figure { min-height: 0; height: 110vw; max-height: 70vh; margin-inline: calc(var(--margin-web) * -1); }
  .split > div:first-child, .split > :nth-child(2) { grid-column: 1 / -1; }
  .cs-strip-row { display: flex; overflow-x: auto; scroll-snap-type: x proximity; margin-inline: calc(var(--margin-web) * -1); padding-inline: var(--margin-web); }
  .cs-strip-row li { flex: none; width: 42vw; max-width: 15rem; scroll-snap-align: start; }
  .cs-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-title, .cs-img { grid-column: 1 / -1; }
  .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meta > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .meta > div:nth-child(n+3) { border-top: 1px solid var(--line-grey); }
  .cs-section > .cs-num, .cs-copy, .cs-media { grid-column: 1 / -1; }
  .cs-pager-title { font-size: 1.125rem; }
  .svc-cols { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
  .svc-col, .svc-col:first-child, .svc-col:last-child { padding: 0; border: 0; }
  .ab-story > div, .ab-story img { grid-column: 1 / -1; }
  .ab-who > *, .ab-what > *, .ab-founder > *, .ab-founder .ab-figure, .story-rail, .story-body, .lab-media, .lab-info { grid-column: 1 / -1 !important; }
  .ab-founder { overflow: hidden; }
  .ab-founder .ab-figure { min-height: 0; margin-inline: 0; }
  .ab-founder .ab-circle { width: min(92%, 62vh); bottom: -12%; }
  .lab-rail { display: flex; overflow-x: auto; scroll-snap-type: x proximity; margin-inline: calc(var(--margin-web) * -1); padding-inline: var(--margin-web); }
  .lab-card { flex: none; width: 62vw; max-width: 18rem; scroll-snap-align: start; }
}

@media (max-width: 1023px) and (max-height: 700px) {
  .about-pic { height: 27vh; }
  .say { font-size: .75rem; line-height: 1.3; }
}

@media (max-width: 599px) {
  .cs-index, .prices { grid-template-columns: minmax(0, 1fr); }
}

/* Too narrow for one line: the menu sits behind a button */
.menu-btn { display: none; }
@media (max-width: 760px) {
  :root { --header-h: 76px; }
  .hdr-right { gap: .625rem; }
  .lang { --lang-w: 64px; --lang-h: 28px; font-size: .625rem; }
  .menu-btn { display: inline-flex; align-items: center; min-height: 44px; margin-top: -8px; padding: 0 .25rem; border: 0; background: none; color: inherit; font-family: var(--font-garet); font-weight: 800; font-size: .9375rem; letter-spacing: -.01em; text-transform: uppercase; cursor: pointer; }
  .menu-c { display: none; }
  .menu-btn[aria-expanded="true"] .menu-o { display: none; }
  .menu-btn[aria-expanded="true"] .menu-c { display: inline; }
  .hdr-right { align-items: flex-start; }
  .nav { position: fixed; inset: var(--header-h) 0 0; z-index: 19; display: flex; flex-direction: column; align-items: flex-start; gap: .375rem; padding: 1.5rem var(--margin-web) 2rem; overflow-y: auto; background: var(--paper); color: var(--ink); pointer-events: auto; visibility: hidden; opacity: 0; transition: opacity .2s, visibility .2s; }
  html:not(.js) .nav { position: static; visibility: visible; opacity: 1; padding: 0; background: none; color: inherit; align-items: flex-end; gap: 0; }
  html:not(.menu-open) .nav, html:not(.menu-open) .nav * { pointer-events: none; }
  html.menu-open .nav { visibility: visible; opacity: 1; }
  html.menu-open, html.menu-open body { overflow: hidden; }
  html.menu-open .hdr { background: var(--paper); color: var(--ink); }
  .nav a { min-height: 44px; font-size: 1.75rem; }
  .nav > a { position: relative; gap: 0; }
  .nav > a::before { position: absolute; left: -.6em; top: 50%; margin-top: -.18em; }
  html.menu-open .hdr { z-index: 100; }
  .nav-group { display: block; width: 100%; padding-bottom: .875rem; margin-bottom: .5rem; border-bottom: 1px solid var(--line-grey); }
  .nav-trigger { pointer-events: none; font-family: var(--font-roboto); font-weight: 700; font-size: .75rem; letter-spacing: .18em; color: var(--slate); margin-bottom: .375rem; }
  .nav-trigger::before { display: none; }
  .nav-drop { position: static; transform: none; width: auto; padding: 0; visibility: inherit; opacity: 1; background: none; box-shadow: none; }
  .nav-drop::after { display: none; }
  .nav .nav-drop a { min-height: 44px; padding: .25rem 0; font-size: 1.125rem; }
  .nav .nav-drop a:hover, .nav .nav-drop a:focus-visible { background: none; }
}

@media (max-width: 375px) {
  .hdr { gap: .5rem; }
  .hdr-mark { font-size: 1.1875rem; }
}

@media (max-width: 479px) {
  .label { letter-spacing: .22em; font-size: .75rem; }
  .d-hollow { -webkit-text-stroke-width: 1.5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* Card whose back shows a second image */
.flip-card--img .flip-card__face--back.fi-has-img { padding: clamp(1rem, 6cqw, 2.25rem); }
.fi-back-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fi-has-img::before { content: ""; position: absolute; inset: 40% 0 0; z-index: 1; background: linear-gradient(transparent, rgba(12, 24, 33, .85)); pointer-events: none; }
.fi-has-img .fi-title { position: relative; z-index: 2; }

/* Footer: cookie settings reads as a link */
.sf-cookie { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.sf-cookie:hover { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 4px; }

/* Cookie bar */
.cookie-bar { position: fixed; left: 16px; bottom: 16px; z-index: 90; display: grid; gap: .75rem; width: min(380px, calc(100vw - 32px)); padding: 1rem 1.125rem; border-radius: 14px; background: #0C1821; color: var(--paper); font-size: .875rem; line-height: 1.4; box-shadow: 0 12px 32px rgba(12, 24, 33, .28); }
.cookie-bar[hidden] { display: none; }
.cookie-bar p { margin: 0; }
.cookie-bar a { color: inherit; text-underline-offset: 3px; }
.cookie-acts { display: flex; gap: .5rem; }
.cookie-acts button { min-height: 40px; padding: 0 1.125rem; border-radius: 999px; border: 1px solid rgba(243, 245, 247, .35); background: transparent; color: inherit; font: inherit; font-weight: 700; font-size: .8125rem; cursor: pointer; }
.cookie-acts [data-cookie="yes"] { border-color: var(--paper); background: var(--paper); color: var(--ink); }
.cookie-acts button:hover { border-color: var(--orange); }

/* Longer service headings */
.page-title--big.page-title--long { font-size: clamp(2rem, 4.25vw, 4.5rem); }
@media (max-width: 760px) { .page-title--big.page-title--long { font-size: min(2.25rem, 7.6vw); } }

/* Phones: footer links get a comfortable tap area */
@media (max-width: 760px) {
  .sf-col ul { gap: 0; }
  .sf-col a, .sf-legal a, .sf-cookie { display: inline-flex; align-items: center; min-height: 44px; }
  .sf-legal { gap: 0 1.25rem; }
  .btn--quiet { min-height: 44px; }
}

/* Launch package: the back is a quote prompt, not an image */
.flip-card--price.price--lead .price-back { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1rem; padding: clamp(1.5rem, 3vw, 3rem); background: var(--ink); color: var(--paper); }
.price-back .btn { text-transform: none; letter-spacing: 0; max-width: 100%; }

/* Phones and tablets: page content never runs behind the logo on the home page */
html.hdr-phone:not(.foot-under-header) .hdr { background: var(--paper); }
/* Phones: the chapter bar steps aside once the footer and form are on screen */
.world-bottom { transition: opacity .2s; }
@media (max-width: 760px) { html.foot-under-bar .world-bottom { opacity: 0; pointer-events: none; } }

/* Phones and tablets: the founder photo sits in front of the testimonials */
@media (max-width: 1023px) { .about-pic { z-index: 2; pointer-events: none; } }

/* Enquiry button: says what is happening, and answers when the form has gone */
.btn[data-send] { transition: scale .14s ease-out, background-color .3s, border-color .3s, color .3s, min-width .3s; }
.btn[data-send="sending"], .btn[data-send="sent"], .btn[data-send="failed"] { cursor: default; }
.btn[data-send="sending"] .btn-send-label::after { content: ""; display: inline-block; width: 1.5em; text-align: left; animation: send-dots 1.1s steps(1) infinite; }
.btn[data-send="sent"] { background: var(--orange); border-color: var(--orange); color: var(--ink); animation: send-pop .55s cubic-bezier(.2, 1.6, .4, 1); }
.btn[data-send="failed"] { background: transparent; border-color: var(--paper); color: var(--paper); animation: send-shake .45s ease-in-out; }
.btn[data-send="sent"] .btn-send-label::before { content: ""; display: inline-block; width: .8em; height: .42em; margin-right: .7em; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.2em) rotate(-45deg); }
@keyframes send-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
@keyframes send-pop { 0% { scale: .92; } 55% { scale: 1.08; } 100% { scale: 1; } }
@keyframes send-shake { 0%, 100% { translate: 0; } 20% { translate: -6px; } 40% { translate: 5px; } 60% { translate: -3px; } 80% { translate: 2px; } }
.form-status.is-sent { font-weight: 700; font-size: 1.0625rem; color: var(--orange); animation: send-rise .4s ease-out; }
.form-status.is-failed { font-weight: 700; animation: send-rise .4s ease-out; }
@keyframes send-rise { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
.confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 200; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .btn[data-send], .form-status.is-sent, .form-status.is-failed { animation: none !important; } .btn[data-send="sending"] .btn-send-label::after { animation: none; content: "..."; } }

/* Touch screens: a card at rest is flat. It looks the same, but the browser no longer keeps 3D layers for it while the page scrolls */
.flip-card[data-rest] .flip-card__rotor { transform-style: flat; }
.flip-card[data-rest] .flip-card__face { backface-visibility: visible; -webkit-backface-visibility: visible; }
.flip-card[data-rest]:not([data-flipped]) .flip-card__face--back { visibility: hidden; }
.flip-card[data-rest][data-flipped] .flip-card__face--front { visibility: hidden; }
.flip-card[data-rest] .flip-card__face.flip-card__face--back { transform: none; }

@media (hover: none) {
  /* The same soft shadow, painted once instead of blurred again on every frame */
  .flip-card__shadow { filter: none; box-shadow: 0 0 44px rgba(30, 30, 30, .34); }
  /* The wall moves only while it is being dealt, and those frames reuse the painted image */
  .scene--wall.is-dealing .wall-card { will-change: transform, opacity; }
}
@media (max-width: 1023px) {
  .case-track { will-change: auto; }
}
/* Phones: a pinned section uses the same height as its length */
@media (hover: none) and (max-width: 1023px) {
  .scene--studio { height: 385svh; }
  .scene--about { height: 160svh; }
}

/* Phones: pinned sections are fixed only while pinned (see buildPins) */
html.pin-fixed .scene--wall .stage, html.pin-fixed .scene--studio .stage, html.pin-fixed .scene--about .stage { position: absolute; top: 0; left: 0; right: 0; }
html.pin-fixed .scene--wall .stage[data-pin="on"], html.pin-fixed .scene--studio .stage[data-pin="on"], html.pin-fixed .scene--about .stage[data-pin="on"] { position: fixed; }
html.pin-fixed .scene--wall .stage[data-pin="after"], html.pin-fixed .scene--studio .stage[data-pin="after"], html.pin-fixed .scene--about .stage[data-pin="after"] { top: auto; bottom: 0; }

/* Phones: the founder photo a little larger. It grows downwards to the timeline labels and out to the screen edge, so it covers no more of the testimonial */
@media (max-width: 599px) {
  .about-pic { right: 0; bottom: calc(var(--tb) - 24px); height: calc(38vh + 24px); }
}
@media (max-width: 599px) and (max-height: 700px) {
  .about-pic { height: calc(27vh + 24px); }
}