/* Vertù Design Studio — Direction F, "Liquid Glass"
   Objects in light, seen through glass. */

:root {
  --ground: #EEF0F2;
  --ground-2: #E4E7EA;
  --ink: #0E1013;
  --ink-2: #50565E;          /* 6.4:1 on --ground */
  --ink-g2: #30353B;         /* secondary text on glass: ≥ 5:1 even over black under the frost */
  /* GLASS CLARITY: the knobs. Lower number = more see-through. Every light panel uses one of the three
     levels below; every dark panel one of the two dark levels. Change a number here and the whole site follows.
     (Before the "glass-clearer" pass: strong .84, medium .64, light .42, dark-strong .70, dark-medium .64.) */
  --glass-rgb: 250,251,252;
  --glass-a-strong: .48;      /* big text panels over busy pictures: process, contact, booking, captions, chips */
  --glass-a-medium: .34;      /* hero slab, shelf, film caption, nav when scrolled */
  --glass-a-light: .20;       /* nav at rest, logo wall frame, empty frames */
  --glass-dark-rgb: 14,16,19;
  --glass-dark-a-strong: .46; /* dark quote and label glass over photos */
  --glass-dark-a-medium: .40;
  --glass-tint-a: .62;        /* peak of the soft local tint right behind a text block (fades to nothing at the panel edge) */
  --glass-edge-a: .5;         /* inner top highlight */
  --glass-border-a: .34;      /* 1px glass border */
  --glass-tint: radial-gradient(ellipse 92% 82% at 42% 52%, rgba(255,255,255,var(--glass-tint-a)) 0%, rgba(255,255,255,calc(var(--glass-tint-a) * .5)) 58%, rgba(255,255,255,0) 100%);
  --glass-tint-dark: radial-gradient(ellipse 92% 82% at 42% 52%, rgba(10,13,17,calc(var(--glass-tint-a) * .85)) 0%, rgba(10,13,17,calc(var(--glass-tint-a) * .4)) 60%, rgba(10,13,17,0) 100%);
  --glass: rgba(255,255,255,0.26);
  --glass-text: rgba(255,255,255,0.40);   /* frost + tint used wherever glass carries text */
  --glass-edge: rgba(255,255,255,var(--glass-edge-a));
  --glass-dark: rgba(14,16,19,0.26);
  --glass-dark-text: rgba(14,16,19,0.40);
  --signal: #FF4D12;
  --hair: rgba(14,16,19,0.14);
  --hair-strong: rgba(14,16,19,0.32);

  --f-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --f-dot: "Doto", "Geist Mono", ui-monospace, monospace;

  /* TYPE SCALE: one set of sizes for the whole site. Mono labels 12px (tracking .08em), captions 13, UI text 15,
     secondary paragraphs 16, body 17 (line-height 1.6), then lede, item headings and the fluid display sizes. */
  --fs-micro: 0.75rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-small: 1rem;
  --fs-body: 1.0625rem;
  --fs-body-lg: 1.125rem;
  --fs-lede: clamp(1.0625rem, 0.6vw + 0.7rem, 1.25rem);
  --fs-lede-lg: clamp(1.25rem, 1.2vw + 0.65rem, 1.625rem);
  --fs-h4: 1.25rem;
  --fs-h3-sm: 1.5rem;
  --fs-h3: clamp(1.75rem, 2.6vw, 2.75rem);
  --fs-h2-sm: clamp(2.25rem, 3.6vw, 3.75rem);
  --fs-h2: clamp(2.6rem, 5.6vw, 6rem);
  --fs-display: clamp(2.8rem, 4.3vw, 5rem);
  --ls-display: -0.03em;     /* display headings */
  --ls-mono: 0.08em;         /* mono labels */

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;
  --gutter: clamp(20px, 3.3vw, 48px);
  --maxw: 1440px;
  --section: clamp(96px, 11vw, 160px);        /* the one vertical rhythm: space above every section */
  --inset: clamp(64px, 7.5vw, 112px);          /* padding inside full-width panels (photo and dark sections) */
  --head-gap: clamp(40px, 4.6vw, 72px);        /* section header to its content */
  --nav-clear: 96px;                           /* below the fixed nav; anchors land here */
  --btn-h: 44px;                               /* every button and pill control */
  --r-panel: clamp(24px, 2.4vw, 32px);         /* inset dark and photo panels */
  --r-xl: clamp(20px, 2.2vw, 32px);
  --r-l: 22px;
  --r-m: 16px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow-glass: inset 0 1px 0 var(--glass-edge), inset 0 -1px 1px rgba(255,255,255,.14), 0 1px 2px rgba(14,16,19,.05), 0 8px 24px rgba(14,16,19,.09);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--nav-clear); }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--f-sans); font-size: var(--fs-body); line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11"; font-variant-numeric: tabular-nums;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul[role="list"], ol[role="list"] { list-style: none; }
h1, h2, h3, h4 { text-wrap: balance; font-weight: 600; line-height: 1.12; }
p { text-wrap: pretty; }
/* Focus rings: the outline follows each element's own shape (pills stay pills); white on dark panels. */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.glass--dark :focus-visible, .proof :focus-visible, .site-foot :focus-visible { outline-color: #fff; }
::selection { background: rgba(255,77,18,.22); }

.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 16px; }
.nw { white-space: nowrap; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* Type voices ------------------------------------------------------------ */
.doto { font-family: var(--f-dot); font-weight: 800; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.micro { font-family: var(--f-mono); font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--ls-mono); text-transform: uppercase; line-height: 1.4; }
.display { font-size: var(--fs-display); font-weight: 600; letter-spacing: var(--ls-display); line-height: 0.98; text-wrap: balance; }
.h-section { font-size: var(--fs-h2); font-weight: 600; letter-spacing: var(--ls-display); line-height: 0.96; text-wrap: balance; }
.h-section--sm { font-size: var(--fs-h2-sm); }

/* Glass ------------------------------------------------------------------ */
.glass {
  position: relative; isolation: isolate;
  background: var(--glass);
  border: 1px solid rgba(255,255,255,var(--glass-border-a));
  box-shadow: var(--shadow-glass);
}
.glass::before { /* specular sheen, top-left to transparent */
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.09) 30%, rgba(255,255,255,0) 58%);
}
.glass--text { background: var(--glass-text); }
.glass--dark {
  background: var(--glass-dark-text); color: #fff;
  border-color: rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 1px rgba(255,255,255,.06), 0 12px 30px rgba(0,0,0,.26);
}
.glass--dark::before { background: linear-gradient(135deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.03) 32%, rgba(255,255,255,0) 60%); }
/* A highlight that follows the pointer across larger slabs: the liquid part of the glass. */
[data-sheen]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: radial-gradient(360px circle at var(--mx, 18%) var(--my, 0%), rgba(255,255,255,.28), rgba(255,255,255,0) 62%);
  opacity: var(--sheen, .55); transition: opacity .6s var(--ease);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .glass--text { background: rgba(246,247,248,.95); }
  .glass--dark { background: rgba(18,20,24,.92); }
}

/* Buttons ----------------------------------------------------------------
   One system: 44px high, pill radius, 15px medium text. Ink is the primary (a thin inner highlight on its top edge),
   clear is the secondary on light glass, glass is the secondary on dark panels. Hover lifts 1px, press settles,
   keyboard focus gets the ring from :focus-visible. The same classes style the enquiry form, the preview bar and the 3D buttons. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--btn-h); padding: 0 22px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--f-sans); font-size: var(--fs-sm); font-weight: 500; line-height: 1; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: transform .3s var(--ease), background-color .25s, border-color .25s, box-shadow .3s var(--ease), color .25s;
}
.btn svg { width: 16px; height: 16px; flex: none; transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn--ink {
  background: var(--ink); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.05), 0 1px 2px rgba(14,16,19,.2), 0 10px 22px -8px rgba(14,16,19,.4);
}
.btn--ink:hover { transform: translateY(-1px); background: #1c2026; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.06), 0 2px 4px rgba(14,16,19,.2), 0 14px 28px -8px rgba(14,16,19,.45); }
.btn--clear { background: rgba(255,255,255,.55); border-color: rgba(14,16,19,.16); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.btn--clear:hover { transform: translateY(-1px); background: rgba(255,255,255,.88); border-color: rgba(14,16,19,.32); }
.btn--glass { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.24); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.btn--glass:hover { transform: translateY(-1px); background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); }
.btn--sm { padding: 0 18px; }   /* same height as every other button; only the side padding is tighter */
.sig { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px rgba(255,77,18,.18); flex: none; }

/* Header pill ------------------------------------------------------------- */
.site-head { position: fixed; z-index: 50; top: 14px; left: 0; right: 0; padding-inline: var(--gutter); pointer-events: none; }
.head-pill {
  pointer-events: auto; max-width: 1180px; margin: 0 auto; height: 64px; border-radius: 999px;
  display: flex; align-items: center; gap: var(--s3); padding: 0 10px 0 22px;
}
.site-head.is-scrolled .head-pill { background: rgba(var(--glass-rgb), var(--glass-a-medium)); box-shadow: var(--shadow-glass); }
/* The lockup: the V mark (inline SVG, always crisp) beside "Vertù" in the display face and a small mono "Design Studio". */
.brand, .foot-brand { display: inline-flex; align-items: center; gap: 11px; flex: none; border-radius: 12px; text-decoration: none; color: var(--ink); }
.brand-mark { width: 27px; height: 23px; flex: none; }
.brand-text { display: grid; gap: 4px; line-height: 1; }
.brand-name { font-family: var(--f-sans); font-weight: 500; font-size: 1.4375rem; letter-spacing: -0.045em; line-height: .95; }
.brand-sub { font-family: var(--f-mono); font-weight: 500; font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-g2); line-height: 1; white-space: nowrap; }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 4px; list-style: none; }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
  font-size: var(--fs-sm); font-weight: 500; text-decoration: none; color: var(--ink); transition: background-color .25s;
}
.nav a:hover { background: rgba(255,255,255,.5); }
.head-cta { flex: none; }
.menu-btn { display: none; }
.menu-sheet { display: none; }

/* Hero: live 3D stage ------------------------------------------------------ */
.hero { position: relative; height: max(720px, 100svh); max-height: 1180px; overflow: hidden; background: var(--ground); }
.hero-stage { position: absolute; inset: 0; }
.hero { --hz: 60%; --hl: 3; --h1: clamp(2.8rem, min(5.9vw, 11.5svh), 6.5rem); }
.stage-bg { /* a daylight cyclorama: pale wall, horizon, darker reflective floor, and coloured light pooling where the glass sits.
   The floor, its grid and the coloured light all dissolve into the page ground over the last stretch (the mask), so the
   stage has no bottom edge: the next section simply starts on the same colour. */
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(36% 34% at 17% 76%, rgba(64,140,255,.42), rgba(64,140,255,0) 70%),
    radial-gradient(22% 24% at 35% 86%, rgba(255,77,18,.28), rgba(255,77,18,0) 70%),
    radial-gradient(46% 22% at 70% 62%, rgba(255,255,255,.85), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #F7F8FA 0%, #EDF0F3 calc(var(--hz) - 20%), #E0E4E9 calc(var(--hz) - 2%), #CBD2D9 calc(var(--hz) + 3%), #C0C7CF calc(var(--hz) + 14%), #BFC7CF 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 68%, rgba(0,0,0,.55) 86%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 68%, rgba(0,0,0,.55) 86%, transparent 100%);
}
.stage-bg::after { /* the floor's soft reflection band just under the horizon */
  content: ""; position: absolute; left: 0; right: 0; top: calc(var(--hz) + 1%); height: 8%;
  background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0));
}
.stage-floor { /* a turntable floor grid in perspective: the studio's measuring plane */
  position: absolute; left: -30%; right: -30%; top: var(--hz); bottom: -10%;
  background-image:
    linear-gradient(rgba(14,16,19,.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,16,19,.11) 1px, transparent 1px);
  background-size: 72px 72px; background-position: center top;
  transform: perspective(700px) rotateX(62deg); transform-origin: 50% 0%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 55%, transparent 92%);
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 55%, transparent 92%);
}
/* The car's stage is the free space right of the glass card and below the headline: its top edge follows the headline
   (--h1 is its size, --hl how many lines), its bottom edge sits near the floor of the hero. The readout is up at the top right,
   so nothing else ever sits in the stage. */
.viewer { position: absolute; left: 38%; width: 62%; top: calc(132px + 34px + var(--h1) * var(--hl) * .96 + 6px); bottom: 48px; touch-action: pan-y; }
.cs-hero .viewer { top: 150px; bottom: 56px; }
.viewer-poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 80%, transparent 100%), linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 80%, transparent 100%), linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-composite: intersect;
  transition: opacity 1.4s var(--ease), transform 2.4s var(--ease), filter 1.4s var(--ease);
}
.viewer model-viewer { opacity: 0; transition: opacity 1.6s var(--ease) .1s; }
.viewer.is-live model-viewer { opacity: 1; }
.viewer.is-fitting model-viewer { opacity: 0 !important; transition: none !important; }   /* while the car is being framed it is not shown ... */
.viewer.is-fitting .viewer-poster { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }   /* ... and the poster picture stays up until it is */
.viewer.is-live .viewer-poster { opacity: 0; transform: scale(1.04); filter: blur(10px); }
.viewer.is-loading .viewer-poster { filter: saturate(.9); }
.btn-3d {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  display: inline-flex; align-items: center; gap: 10px; min-height: var(--btn-h); padding: 0 22px 0 16px; border-radius: 999px;
  background: var(--glass-text); color: var(--ink); font-weight: 500; font-size: var(--fs-sm); cursor: pointer;
  transition: opacity .5s, transform .35s var(--ease);
}
.btn-3d svg { width: 22px; height: 22px; }
.btn-3d:hover { transform: translate(-50%, -50%) scale(1.03); }
.viewer.is-loading .btn-3d, .viewer.is-live .btn-3d { opacity: 0; pointer-events: none; }
html.js .viewer[data-autostart]:not(.is-failed):not(.is-manual) .btn-3d { opacity: 0; pointer-events: none; }
.viewer.is-failed .btn-3d { opacity: 1; pointer-events: auto; }
.ar-pill {
  position: absolute; right: 12px; top: 12px; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,var(--glass-border-a));
  background: rgba(var(--glass-rgb), var(--glass-a-strong));
  box-shadow: var(--shadow-glass); font: 500 0.875rem/1 var(--f-sans); color: var(--ink); cursor: pointer;
}
.ar-pill svg { width: 18px; height: 18px; }

.hero-stage::after { /* the light sweep: a soft band of studio light crossing the stage once on load */
  content: ""; position: absolute; inset: -10% -40%; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(104deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.55) 47%, rgba(255,255,255,.9) 50%, rgba(255,255,255,.55) 53%, rgba(255,255,255,0) 62%);
  mix-blend-mode: overlay; transform: translate3d(-60%, 0, 0);
}
.hero-stage.is-sweep::after { animation: sweep 2.6s cubic-bezier(.45,.05,.25,1) .15s 1 both; }
@keyframes sweep {
  0% { opacity: 0; transform: translate3d(-60%, 0, 0); }
  18% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(60%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) { .hero-stage::after { display: none; } }

/* readout */
.readout {
  position: absolute; right: var(--gutter); top: 108px; z-index: 4; width: 340px;
  border-radius: var(--r-l); padding: 14px 18px 12px;
}
/* Mid widths (961–1320px): a long headline would run under the top-right readout, so the readout drops to the
   bottom right of the hero and the car's stage ends above it. */
@media (min-width: 961px) and (max-width: 1320px) {
  .hero .readout { top: auto; bottom: 40px; width: 300px; }
  .hero .viewer { bottom: 150px; }
}

.ro-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--hair); }
.ro-name { font-family: var(--f-dot); font-weight: 800; font-size: var(--fs-small); letter-spacing: .04em; text-transform: uppercase; }
.ro-status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--ink-g2); }
.ro-led { width: 7px; height: 7px; border-radius: 50%; background: #9aa0a7; box-shadow: 0 0 0 3px rgba(14,16,19,.06); }
.ro-led.is-on, [data-state="live"] .ro-led { background: var(--signal); box-shadow: 0 0 0 3px rgba(255,77,18,.18), 0 0 10px rgba(255,77,18,.6); }
.ro-angle { min-width: 0; color: var(--ink); }
.ro-angle:not(:empty) { padding-left: 8px; margin-left: 2px; border-left: 1px solid var(--hair-strong); min-width: 46px; }
.readout:not([data-state="live"]) .ro-angle { display: none; }
[data-state="loading"] .ro-led { background: var(--signal); animation: blink 1s steps(2, end) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.ro-dims { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0 10px; }
.ro-dims div { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 2px; }
.ro-dims dt { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--ink-g2); }
.ro-dims dd { display: flex; align-items: baseline; gap: 6px; }
.ro-dims .doto { font-size: var(--fs-h3-sm); line-height: 1.05; }
.ro-dims small { font-family: var(--f-mono); font-size: var(--fs-micro); color: var(--ink-g2); }
.ro-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid var(--hair); }
.ro-hint { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: var(--fs-micro); color: var(--ink-g2); }
.ro-hint svg { width: 20px; height: 20px; }
.ro-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -10px 0; font-size: var(--fs-sm); font-weight: 500; text-decoration: none; }
.ro-link svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.ro-link:hover svg { transform: translateX(3px); }

/* headline: big on the stage, the rest on a glass slab over the coloured floor light */
.hero-copy { position: absolute; z-index: 5; left: var(--gutter); right: var(--gutter); top: 132px; bottom: var(--gutter); display: flex; flex-direction: column; pointer-events: none; }
.hero-copy > * { pointer-events: auto; }
.hero-h1 { font-size: var(--h1); line-height: .96; letter-spacing: var(--ls-display); pointer-events: none !important; text-wrap: initial; }
.hero-h1 .l { display: block; text-wrap: balance; }
.hero-slab {
  background: rgba(255,255,255,.5);
  margin-top: auto; width: min(600px, calc(44vw - var(--gutter) * 1.6));
  border-radius: calc(var(--r-xl) + 4px); padding: clamp(28px, 2.7vw, 40px);
}
.hero-kicker { color: var(--ink-g2); margin-bottom: 18px; }
.hero-row { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(24px, 2.2vw, 32px); }
.lede { font-size: var(--fs-lede); line-height: 1.5; color: var(--ink-g2); max-width: 30em; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ticker { display: flex; align-items: center; gap: 18px; margin-top: clamp(20px, 2.2vw, 30px); border-top: 1px solid var(--hair); height: 54px; }
.ticker-label { font-family: var(--f-dot); font-weight: 800; font-size: var(--fs-sm); letter-spacing: .06em; text-transform: uppercase; flex: none; }
.ticker-window { overflow: hidden; flex: 1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker-track { display: flex; width: max-content; animation: ticker 70s linear infinite; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker-list { display: flex; list-style: none; flex: none; }
.ticker-list li { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-g2); white-space: nowrap; padding-right: 34px; position: relative; }
.ticker-list li::after { content: ""; position: absolute; right: 15px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: rgba(14,16,19,.3); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Work --------------------------------------------------------------------- */
.work { padding-top: var(--section); }
.work-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto; grid-template-areas: "title intro count"; column-gap: var(--s5); align-items: end; margin-bottom: var(--head-gap); }
.work-head .h-section { grid-area: title; }
.work-intro { grid-area: intro; max-width: 32em; font-size: var(--fs-lede); color: var(--ink-2); line-height: 1.5; }
.work-count { grid-area: count; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; color: var(--ink); }
.work-count .doto { font-size: clamp(3.5rem, 6.4vw, 6.75rem); line-height: .8; letter-spacing: -.02em; }
.work-count .micro { color: var(--ink-2); }

.filters-bar { position: sticky; top: 90px; z-index: 30; display: flex; justify-content: center; padding: 0 var(--gutter); margin-bottom: var(--s4); pointer-events: none; }
.filters { pointer-events: auto; display: flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.68); }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--btn-h); padding: 0 16px; border: 0; border-radius: 999px;
  background: transparent; font-size: var(--fs-sm); font-weight: 500; cursor: pointer; color: var(--ink);
  transition: background-color .3s, color .3s, box-shadow .3s;
}
.chip .doto { font-size: var(--fs-sm); color: var(--ink-g2); font-weight: 600; }
.chip:hover { background: rgba(255,255,255,.5); }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 6px 18px rgba(14,16,19,.2); }
.chip[aria-pressed="true"] .doto { color: var(--signal); }

.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); padding-inline: var(--gutter); max-width: 1680px; margin: 0 auto; }
.feature:not(.feature--half) { grid-column: 1 / -1; }
.feature--half .feature-media { aspect-ratio: 1 / 1.02; max-height: none; }
.feature { position: relative; }
.feature[hidden], .card[hidden] { display: none; }
.feature-media {
  position: relative; overflow: hidden; border-radius: var(--r-xl); aspect-ratio: 16 / 9; max-height: 92svh; width: 100%;
  background: #dfe2e5; transform: scale(var(--s, 1)); transform-origin: 50% 0;
  box-shadow: 0 24px 48px -30px rgba(14,16,19,.32);
}
.feature-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vid-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: opacity .9s var(--ease); }
.feature-video, .vid-poster { transform: scale(1.012); transition: scale .8s var(--ease); }
.vid-poster { transition: opacity .9s var(--ease), scale .8s var(--ease); }
.is-rolling > .vid-poster { opacity: 0; }
@media (hover: hover) { .feature-media:hover .feature-video, .feature-media:hover .vid-poster { scale: 1.03; } }
/* Where the film is cropped: each project sets --focus (from the database); centre by default. */
.feature-video, .vid-poster { object-position: var(--focus, 50% 50%); }
.vid-toggle {
  position: absolute; z-index: 2; right: clamp(16px, 2vw, 28px); top: clamp(16px, 2vw, 28px);
  width: var(--btn-h); height: var(--btn-h); border-radius: 50%; display: grid; place-items: center; cursor: pointer; padding: 0;
  background: rgba(255,255,255,.62);
}
.vid-toggle svg { width: 16px; height: 16px; grid-area: 1 / 1; }
.vid-toggle .i-play { display: none; }
.vid-toggle.is-paused .i-play { display: block; }
.vid-toggle.is-paused .i-pause { display: none; }
/* The film caption: sector, title, one line, then the actions. Narrow, so more of the film shows. */
.feature-cap {
  position: absolute; z-index: 2; left: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px);
  width: min(400px, calc(100% - 32px)); border-radius: var(--r-l); padding: 24px 24px 22px;
}
.feature--right .feature-cap { left: auto; right: clamp(16px, 2vw, 28px); }
.cap-top { display: flex; align-items: center; gap: 12px; color: var(--ink-g2); margin-bottom: 14px; }
.idx { font-size: var(--fs-body-lg); line-height: 1; color: var(--ink); }
.cap-top .idx { padding-right: 12px; border-right: 1px solid var(--hair-strong); }
.h-feature { font-size: clamp(1.75rem, 2.3vw, 2.375rem); letter-spacing: var(--ls-display); line-height: 1.02; margin-bottom: 10px; }
.feature-cap > p { color: var(--ink-g2); font-size: var(--fs-sm); line-height: 1.5; }
.cap-link { display: inline-flex; align-items: center; gap: 8px; min-height: var(--btn-h); font-weight: 500; font-size: var(--fs-sm); text-decoration: none; }
.cap-link svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.cap-link:hover svg { transform: translateX(4px); }
.cap-link::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); }

/* grid of eleven */
.grid { list-style: none; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(340px, 33vw, 560px); gap: var(--s3); margin-top: var(--s3); }
.s4 { grid-column: span 4; } .s5 { grid-column: span 5; } .s6 { grid-column: span 6; } .s7 { grid-column: span 7; } .s8 { grid-column: span 8; }
.grid.is-filtered .card { grid-column: span 6; }
.card { position: relative; min-width: 0; }
.card-link { position: relative; display: block; height: 100%; text-decoration: none; color: var(--ink); border-radius: var(--r-xl); transition: transform .5s var(--ease), box-shadow .5s var(--ease); box-shadow: 0 1px 2px rgba(14,16,19,.06), 0 14px 32px -24px rgba(14,16,19,.4); }
.card-media { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: #dde0e3; }
/* PARALLAX FRAMES: a picture that moves inside its frame (cards, views, next project, process) is built TALLER than the
   frame (8% extra above and below) and the script keeps its travel inside that margin, so no edge of the frame is ever
   left uncovered. With no script, on touch, or with reduced motion it simply sits centered at the same size. */
.card-media img, img[data-parallax] {
  position: absolute; left: 0; top: -8%; width: 100%; height: 116%; max-width: none; object-fit: cover;
  transform: translate3d(0, var(--py, 0px), 0); transition: scale .8s var(--ease);
}
.card-cap {
  position: absolute; left: 14px; bottom: 14px; max-width: calc(100% - 28px); z-index: 2;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  padding: 12px 12px 12px 16px; border-radius: 18px;
  transition: background-color .5s var(--ease), transform .5s var(--ease);
}
.card-cap .idx { align-self: start; padding-top: 2px; }
.cap-txt { display: grid; gap: 2px; min-width: 0; }
.card-name { font-size: var(--fs-body-lg); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.card-meta { font-size: var(--fs-xs); color: var(--ink-g2); line-height: 1.35; }
.card-arrow { width: 36px; height: 36px; padding: 10px; border-radius: 50%; background: rgba(14,16,19,.06); transition: background-color .4s, color .4s, transform .4s var(--ease); }
.card-arrow--down { transform: rotate(90deg); }
@media (hover: hover) {
  .card-link:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(14,16,19,.06), 0 24px 44px -26px rgba(14,16,19,.42); }
  .card-link:hover .card-cap { background: rgba(255,255,255,.94); transform: translateY(-3px); }
  .card-link:hover .card-arrow { background: var(--ink); color: #fff; }
  .card-link:hover .card-arrow--down { transform: rotate(90deg) translateX(2px); }
  .card-link:hover .card-media img { scale: 1.03; }
}
.card-link:focus-visible { outline-offset: 4px; }
.card-link:focus-visible .card-cap { transform: translateY(-3px); }
.card-link:focus-visible .card-media img { scale: 1.03; }

/* The cutaway (Decant) ------------------------------------------------------- */
.cutaway { position: relative; margin-top: var(--section); padding: var(--inset) 0; overflow: hidden; }
.cut-bg { position: absolute; inset: 0; }
.cut-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform: scale(1.06); }
.cut-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(238,240,242,.35), rgba(238,240,242,0) 30%, rgba(238,240,242,0) 70%, rgba(238,240,242,.45)); }
.shelf { border-radius: calc(var(--r-xl) + 6px); padding: clamp(24px, 3.4vw, 56px); background: rgba(255,255,255,.64); }
.shelf-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s5); align-items: end; padding-bottom: var(--s4); border-bottom: 1px solid var(--hair); }
.shelf-head .micro { color: var(--ink-g2); margin-bottom: 14px; }
.shelf-text { color: var(--ink-g2); max-width: 36em; }
.sections { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s4); }
.sec figure { display: grid; }
.sec-img { position: relative; aspect-ratio: 3 / 4.6; }
.sec-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 46% 50%; filter: drop-shadow(0 18px 24px rgba(14,16,19,.18)); }
.sec-letter { position: absolute; left: 0; top: 0; font-size: var(--fs-h3-sm); line-height: 1; z-index: 1; }
.sec-img::after { content: ""; position: absolute; left: -13px; right: -13px; bottom: 0; height: 12px; border-radius: 3px; background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.45)); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(14,16,19,.08), 0 14px 24px -12px rgba(14,16,19,.3); }
.pin { position: absolute; left: var(--x); top: var(--y); bottom: 0; width: 1px; background: var(--ink); z-index: 2; }
.pin::before { content: ""; position: absolute; left: -5px; top: -5px; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--ink); background: rgba(255,255,255,.9); box-sizing: border-box; }
.pin::after { content: ""; position: absolute; left: -2px; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--signal); }
.sec figcaption span { display: block; margin-left: var(--x); padding: 18px 0 0 10px; border-left: 1px solid var(--ink); font-family: var(--f-mono); font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--ls-mono); text-transform: uppercase; line-height: 1.35; }
.spec-rows { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--hair); }
.spec-rows div { display: grid; gap: 6px; }
.spec-rows dt { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--ink-g2); }
.spec-rows dd { font-family: var(--f-mono); font-size: var(--fs-sm); line-height: 1.45; }

/* Services ------------------------------------------------------------------ */
.services { padding-top: var(--section); }
.svc-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); align-items: end; margin-bottom: var(--head-gap); }
.svc-lede { font-size: var(--fs-lede-lg); line-height: 1.35; letter-spacing: -0.01em; max-width: 26em; }
.svc-statement { display: grid; gap: var(--s3); }
.svc-proof { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); max-width: 34em; }
.svc-proof-by { display: block; margin-top: 6px; font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--ink-g2); }
.svc-list { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); border-top: 1px solid var(--hair-strong); }
.svc-list li { padding-top: var(--s3); position: relative; }
.svc-list li::before { content: ""; position: absolute; top: -1px; left: 0; width: 40px; height: 1px; background: var(--ink); }
.svc-list .idx { display: block; font-size: var(--fs-small); color: var(--ink-2); margin-bottom: var(--s4); }
.svc-list h3 { font-size: var(--fs-h3-sm); letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 12px; }
.svc-list p { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.55; max-width: 26em; }
.svc-list--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.svc-list--5 > li { grid-column: span 2; }
.svc-list--5 > li:nth-child(n+4) { grid-column: span 3; }
.svc-list p + .svc-points { margin-top: 16px; }
.svc-points { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; }
.svc-list .svc-points li { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--hair); background: rgba(255,255,255,.34); color: var(--ink-2); font-size: var(--fs-xs); font-weight: 500; line-height: 1.25; letter-spacing: 0; }
.svc-list .svc-points li::before { content: none; }


/* Capabilities: three airy columns of quiet tags (outline pills, no fill), so the long lists read as texture and the four services stay the headline */
.caps { display: grid; grid-template-columns: minmax(0, .8fr) repeat(3, minmax(0, 1.1fr)); gap: var(--s5) clamp(32px, 4vw, 64px); margin-top: calc(var(--section) * .7); padding-top: var(--s5); border-top: 1px solid var(--hair); }
.caps-title { font-size: var(--fs-h3-sm); font-weight: 500; letter-spacing: var(--ls-display); color: var(--ink); }
.caps-col h4 { color: var(--ink-2); margin-bottom: 18px; font-weight: 500; }
.caps-col ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.caps-col li { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--hair); background: rgba(255,255,255,.34); color: var(--ink-2); font-size: var(--fs-xs); font-weight: 500; line-height: 1.25; letter-spacing: 0; }

/* Proof -------------------------------------------------------------------- */
.proof { position: relative; margin: var(--section) auto 0; width: min(calc(100% - 2 * var(--gutter)), 1680px); padding: var(--inset) 0; color: #fff; overflow: hidden; background: #111418; border-radius: var(--r-panel); }
.proof-bg { position: absolute; inset: -40px; }
.proof-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; filter: blur(6px) saturate(1.15); transform: scale(1.06); }
.proof-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,14,20,.62), rgba(10,14,20,.28) 45%, rgba(10,14,20,.6)); }
.proof .wrap { position: relative; padding-inline: clamp(24px, 4vw, 64px); }
.proof-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s5); align-items: end; margin-bottom: var(--head-gap); }
.numbers { display: flex; gap: clamp(24px, 4vw, 64px); }
.numbers div { display: flex; flex-direction: column-reverse; gap: 8px; }
.numbers dd { font-size: clamp(3.5rem, 7vw, 7.5rem); line-height: .8; }
.numbers dt { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-mono); text-transform: uppercase; color: rgba(255,255,255,.82); }
.quotes { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.quote { border-radius: var(--r-l); padding: clamp(24px, 2.6vw, 40px); display: flex; flex-direction: column; justify-content: space-between; gap: var(--s4); }
.quote blockquote p { font-size: var(--fs-lede); line-height: 1.45; letter-spacing: -0.012em; }
.who { display: flex; flex-direction: column; gap: 2px; padding-top: var(--s2); border-top: 1px solid rgba(255,255,255,.18); }
.who-name { font-weight: 600; }
.who-role { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-mono); text-transform: uppercase; color: rgba(255,255,255,.8); }
.proof-note { margin-top: var(--s3); color: rgba(255,255,255,.72); }

/* Studio --------------------------------------------------------------------- */
.studio { padding-top: var(--section); }
.studio-top { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s6); align-items: end; }
.studio-kicker { color: var(--ink-2); margin-bottom: var(--s4); font-weight: 500; }
.statement { font-size: clamp(2.2rem, 4.4vw, 4.75rem); font-weight: 600; letter-spacing: var(--ls-display); line-height: 0.98; text-wrap: balance; }
.studio-fig figcaption { margin-top: 14px; color: var(--ink-2); }
.split-frame { position: relative; border-radius: var(--r-xl); overflow: hidden; background: #000; aspect-ratio: 1349 / 1229; }
.split-frame img { width: 100%; height: 100%; object-fit: cover; }
.split-label { position: absolute; top: 18px; padding: 8px 14px; border-radius: 999px; font-family: var(--f-mono); font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--ls-mono); text-transform: uppercase; }
.split-label--l { left: 18px; } .split-label--r { right: 18px; }
.studio-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid var(--hair-strong); }
.studio-text { display: grid; align-content: start; gap: 1em; max-width: 34em; color: var(--ink-2); font-size: var(--fs-body-lg); }
.studio-text p:first-child { color: var(--ink); }
.founder { display: grid; gap: 4px; margin-top: var(--s2); color: var(--ink) !important; font-weight: 600; font-size: var(--fs-h4); letter-spacing: -0.02em; }
.founder .micro { color: var(--ink-2); font-weight: 500; letter-spacing: var(--ls-mono); }
.who-we h3 { font-size: var(--fs-h3-sm); letter-spacing: -0.03em; margin-bottom: var(--s3); }
.who-we ul { list-style: none; display: grid; }
.who-we li { padding: 16px 0; border-top: 1px solid var(--hair); color: var(--ink-2); line-height: 1.5; }
.who-we li strong { display: block; color: var(--ink); font-weight: 600; font-size: var(--fs-body-lg); letter-spacing: -0.015em; margin-bottom: 2px; }
.who-close { padding-top: 16px; border-top: 1px solid var(--hair); font-weight: 500; }

/* Book a call ---------------------------------------------------------------- */
.contact { position: relative; margin-top: var(--section); padding: var(--inset) 0; overflow: hidden; }
.contact-bg { position: absolute; inset: 0; }
.contact-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; animation: drift 38s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.14) translate3d(-2%, -1%, 0); } }
.contact-grid { position: relative; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr); gap: var(--s3); align-items: start; }
.contact-info { border-radius: var(--r-xl); padding: clamp(24px, 3vw, 44px); }
.contact-lede { margin-top: var(--s3); color: var(--ink-g2); max-width: 28em; }
.contact-list { display: grid; margin-top: var(--s4); }
.contact-list div { display: grid; grid-template-columns: 132px 1fr; gap: var(--s2); padding: 14px 0; border-top: 1px solid var(--hair); }
.contact-list dt { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--ink-g2); padding-top: 3px; }
.contact-list dd { font-size: var(--fs-small); line-height: 1.5; }
.contact-list a { font-weight: 500; }
.booking { border-radius: var(--r-xl); padding: clamp(20px, 2.6vw, 36px); background: rgba(255,255,255,.72); }
.booking-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding-bottom: var(--s2); margin-bottom: var(--s3); border-bottom: 1px solid var(--hair); color: var(--ink-g2); }

/* booking calendar (shared helper markup) */
.bk { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); }
.bk-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.bk-month { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.025em; }
.bk-nav { display: flex; gap: 6px; }
.bk-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(14,16,19,.16); background: rgba(255,255,255,.6); cursor: pointer; font-size: var(--fs-small); transition: background-color .25s, border-color .25s; }
.bk-nav button:hover:not(:disabled) { background: #fff; border-color: rgba(14,16,19,.35); }
.bk-nav button:disabled { opacity: .35; cursor: default; }
.bk-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.bk-dow { text-align: center; font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--ink-g2); padding: 6px 0 8px; }
.bk-day {
  position: relative; aspect-ratio: 1; min-height: 44px; border: 1px solid transparent; border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,.72); font-size: var(--fs-sm); font-weight: 500; font-variant-numeric: tabular-nums;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--ease);
}
.bk-day:hover:not(:disabled) { border-color: var(--ink); background: #fff; }
.bk-day:disabled { background: transparent; color: #5f656d; cursor: default; text-decoration: line-through; text-decoration-color: rgba(14,16,19,.25); }
.bk-day.is-today::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--signal); }
.bk-day.is-selected { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: 0 6px 16px rgba(14,16,19,.25); }
.bk-day.is-selected.is-today::after { background: #fff; }
.bk-pad { aspect-ratio: 1; }
.bk-side { display: flex; flex-direction: column; gap: 12px; }
.bk-date { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.025em; padding-bottom: 2px; }
.bk-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.bk-slot { min-height: 44px; border-radius: 999px; border: 1px solid rgba(14,16,19,.18); background: rgba(255,255,255,.72); cursor: pointer; font-family: var(--f-mono); font-size: var(--fs-sm); font-weight: 500; transition: background-color .2s, border-color .2s, color .2s; }
.bk-slot:hover { border-color: var(--ink); background: #fff; }
.bk-slot.is-selected { background: var(--ink); color: #fff; border-color: var(--ink); }
.bk-tz { font-size: var(--fs-xs); color: var(--ink-g2); line-height: 1.45; }
.bk-confirm { margin-top: auto; min-height: var(--btn-h); border-radius: 999px; border: 0; background: var(--ink); color: #fff; font-weight: 500; font-size: var(--fs-sm); cursor: pointer; padding: 0 18px; transition: background-color .25s, transform .3s var(--ease), box-shadow .3s; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 22px -8px rgba(14,16,19,.4); }
.bk-confirm:hover:not(:disabled) { transform: translateY(-1px); background: #1d2026; }
.bk-confirm:disabled { background: rgba(14,16,19,.1); color: #444a51; box-shadow: none; cursor: default; }
.bk-note { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-mono); color: var(--ink-g2); line-height: 1.45; }
.bk button:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* Footer: the closing moment. An inset dark card: the closing call to action, clean link columns, the legal line,
   and an oversized wordmark that bleeds off the bottom edge in a faint tint. */
.site-foot { margin-top: var(--section); padding: 0 var(--gutter) clamp(12px, 1.5vw, 20px); font-size: var(--fs-sm); }
.page-home .site-foot { margin-top: clamp(12px, 1.5vw, 20px); }
.foot-card {
  position: relative; isolation: isolate; overflow: hidden; max-width: 1680px; margin: 0 auto; border-radius: var(--r-panel); color: #fff;
  background:
    radial-gradient(60% 70% at 10% 0%, rgba(64,140,255,.18), rgba(64,140,255,0) 70%),
    radial-gradient(44% 60% at 100% 100%, rgba(255,77,18,.12), rgba(255,77,18,0) 70%),
    #0E1013;
  container-type: inline-size;
}
.foot-inner { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: clamp(40px, 5vw, 80px) clamp(24px, 4vw, 64px) 0; }
.foot-cta { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "link" "side"; gap: clamp(32px, 4.4vw, 64px) 0; }
.foot-brand { grid-area: brand; justify-self: start; color: #fff; }
.foot-brand .brand-sub { color: rgba(255,255,255,.62); }
.foot-cta-link {
  grid-area: link; justify-self: start; display: block; max-width: 100%;
  color: #fff; text-decoration: none; font-size: clamp(2.5rem, 8.1vw, 8.5rem); font-weight: 500; letter-spacing: var(--ls-display); line-height: 1;
  border-radius: 16px;
}
.foot-cta-text { text-wrap: balance; }
/* the arrow follows the last word, wherever the line breaks */
.foot-cta-arrow { display: inline-grid; place-items: center; width: .6em; height: .6em; margin-left: .22em; vertical-align: .02em; border-radius: 50%; background: #fff; color: var(--ink); transition: transform .5s var(--ease); }
.foot-cta-arrow svg { width: 42%; height: 42%; transition: transform .45s var(--ease); }
@media (hover: hover) {
  .foot-cta-link:hover .foot-cta-arrow { transform: scale(1.06); }
  .foot-cta-link:hover .foot-cta-arrow svg { transform: translateX(.08em); }
}
.foot-cta-side { grid-area: side; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; color: rgba(255,255,255,.7); font-size: var(--fs-body); line-height: 1.5; }
.foot-cta-side p { max-width: 26em; }
.foot-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: var(--s5); margin-top: clamp(56px, 7vw, 104px); padding-top: var(--s5); border-top: 1px solid rgba(255,255,255,.14); }
.foot-col { display: grid; gap: 4px; align-content: start; color: rgba(255,255,255,.64); }
.foot-col > p:not(.foot-name):not(.foot-label) { max-width: 24em; line-height: 1.5; }
.foot-name { color: #fff; font-weight: 600; font-size: var(--fs-body-lg); letter-spacing: -0.02em; margin-bottom: 4px; }
.foot-label { color: rgba(255,255,255,.46); margin-bottom: 8px; }
.foot-col ul { list-style: none; display: grid; }
.foot-col a { display: inline-flex; align-items: center; min-height: 40px; color: rgba(255,255,255,.88); text-decoration: none; transition: color .25s; }
.foot-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.foot-base { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin-top: clamp(40px, 5vw, 72px); padding: var(--s2) 0; border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.58); }
.foot-base a { display: inline-flex; align-items: center; min-height: var(--btn-h); color: rgba(255,255,255,.88); text-decoration: none; transition: color .25s; }
.foot-base a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.foot-links { display: inline-flex; gap: var(--s3); }
/* The wordmark: set in the display face, as wide as the card, only its upper part shows; the rest runs off the bottom edge. */
.foot-word {
  position: relative; z-index: 0; margin: clamp(4px, 1vw, 16px) 0 0; height: .5em; overflow: hidden; text-align: center; white-space: nowrap; user-select: none; pointer-events: none;
  font-family: var(--f-sans); font-weight: 600; font-size: 38vw; font-size: calc(100cqw * .385); letter-spacing: -0.055em; line-height: .84; color: rgba(255,255,255,.075);
  -webkit-mask-image: linear-gradient(180deg, #000 20%, rgba(0,0,0,.2) 100%); mask-image: linear-gradient(180deg, #000 20%, rgba(0,0,0,.2) 100%);
}

/* Case study (Pinnacle V12) ------------------------------------------------------ */
.cs-slab { padding-bottom: clamp(22px, 2.2vw, 32px); }
.cs-slab .lede { margin-top: 0 !important; }
.cs-slab-meta { color: var(--ink-g2); margin: 12px 0 20px; }
.cs-title { font-size: clamp(3.4rem, 8.4vw, 9rem); font-weight: 600; letter-spacing: var(--ls-display); line-height: .9; margin-left: -0.04em; pointer-events: none !important; }
.hero-kicker a { display: inline-block; padding: 12px 0; margin: -12px 0; color: var(--ink); text-underline-offset: 4px; }

.cs-facts { margin-top: clamp(56px, 6vw, 96px); }
/* Overview, part 1: the facts. One aligned row; --facts (set in the template) is how many there are, so two facts are two equal
   columns, not two thirds of a row. */
.facts { display: grid; grid-template-columns: repeat(var(--facts, 3), minmax(0, 1fr)); gap: var(--s4) clamp(32px, 4vw, 64px); border-top: 1px solid var(--hair-strong); }
.facts div { padding-top: var(--s3); position: relative; }
.facts div::before { content: ""; position: absolute; top: -1px; left: 0; width: 40px; height: 1px; background: var(--ink); }
.facts dt { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--ink-2); margin-bottom: 10px; }
.facts dd { font-size: var(--fs-h4); font-weight: 500; letter-spacing: -0.015em; line-height: 1.3; }

.cs-film { margin-top: var(--section); }
.cs-film-media { position: relative; aspect-ratio: 16 / 9; max-height: 100svh; width: 100%; overflow: hidden; background: #0e1013; }
.cs-film-media .feature-video, .cs-film-media .vid-poster { object-position: var(--focus, 50% 50%); }
.cs-film-cap { position: absolute; left: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px); display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-radius: 999px; font-size: var(--fs-small); font-weight: 500; z-index: 2; }
.cs-film-cap .doto { font-size: var(--fs-small); padding-right: 14px; border-right: 1px solid var(--hair-strong); }

.cs-split { margin: var(--section) auto 0; width: min(calc(100% - 2 * var(--gutter)), 1680px); background: #000; color: #fff; padding-top: var(--inset); overflow: hidden; border-radius: var(--r-panel); }
.cs-split-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); align-items: end; }
.cs-split-head p { color: rgba(255,255,255,.78); max-width: 30em; font-size: var(--fs-body-lg); }
.split-stage { position: relative; margin-top: clamp(16px, 2vw, 32px); }
.split-stage img { width: 100%; }
.seam { position: absolute; left: 50%; top: 10%; bottom: 10%; width: 1px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.45) 20%, rgba(255,255,255,.45) 80%, transparent); }
.split-stage .split-label { top: 9%; }
.split-stage .split-label--l { left: auto; right: calc(50% + 14px); }
.split-stage .split-label--r { left: calc(50% + 14px); right: auto; }

.cs-gallery { margin-top: var(--section); }
.views-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); margin-bottom: var(--s4); }
.views-head .micro { color: var(--ink-2); }
.views { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s3); }
.view { position: relative; min-width: 0; }
.view-img { position: relative; overflow: hidden; border-radius: var(--r-xl); background: #e2e5e8; }
.view-img img { object-fit: cover; }
.view-img img:not([data-parallax]) { width: 100%; height: 100%; }
.v-side { grid-column: 1 / -1; } .v-side .view-img { aspect-ratio: 21 / 9; }
.v-side img { object-position: 50% 62%; }
.v-front, .v-rear { grid-column: span 6; } .v-front .view-img, .v-rear .view-img { aspect-ratio: 16 / 10; }
.v-plan { grid-column: span 8; } .plan-img { aspect-ratio: 1672 / 941; }
.v-reartop { grid-column: span 4; } .v-reartop .view-img { aspect-ratio: 0.87; }
.view-chip { position: absolute; left: 16px; top: 16px; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 500; z-index: 2; }
.view-chip .doto { font-size: var(--fs-sm); color: var(--ink-g2); }
.dim { position: absolute; color: var(--ink); z-index: 1; }
.dim b { font-family: var(--f-mono); font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--ls-mono); background: rgba(255,255,255,.82); padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.dim-l { left: 12%; right: 11.5%; top: 88%; border-top: 1px solid currentColor; display: flex; justify-content: center; }
.dim-l::before, .dim-l::after { content: ""; position: absolute; top: -6px; width: 1px; height: 11px; background: currentColor; }
.dim-l::before { left: 0; } .dim-l::after { right: 0; }
.dim-l b { transform: translateY(-50%); }
.dim-w { top: 19.5%; bottom: 21%; left: 93%; border-left: 1px solid currentColor; display: flex; align-items: center; }
.dim-w::before, .dim-w::after { content: ""; position: absolute; left: -6px; width: 11px; height: 1px; background: currentColor; }
.dim-w::before { top: 0; } .dim-w::after { bottom: 0; }
.dim-w b { transform: translateX(-50%) rotate(-90deg); }
.plan-dims { display: grid; grid-template-columns: repeat(3, auto) 1fr; gap: var(--s4); margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair); }
.plan-dims div { display: grid; gap: 4px; }
.plan-dims dt { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--ink-2); }
.plan-dims dd { font-family: var(--f-mono); font-size: var(--fs-small); font-weight: 500; }
.plan-note { justify-self: end; text-align: right; }
.plan-note dd { font-family: var(--f-sans); font-size: var(--fs-sm); font-weight: 400; color: var(--ink-2); }

.cs-next { margin-top: var(--section); padding-inline: var(--gutter); }
.next-link { position: relative; display: block; max-width: 1680px; margin: 0 auto; height: max(420px, calc((min(100vw, 1680px) - 2 * var(--gutter)) / 2.4)); border-radius: var(--r-xl); overflow: hidden; color: var(--ink); text-decoration: none; background: #111; }
.next-media { position: absolute; inset: 0; overflow: hidden; }
.next-media img { object-fit: cover; object-position: 50% 60%; }
.next-cap { position: absolute; left: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px); width: min(500px, calc(100% - 32px)); display: grid; gap: 10px; padding: 22px 24px 14px; border-radius: var(--r-l); }
.next-cap .micro { color: var(--ink-g2); }
.next-title { font-size: var(--fs-h3); font-weight: 600; letter-spacing: var(--ls-display); line-height: 1.02; }
.next-line { font-size: var(--fs-small); color: var(--ink-g2); line-height: 1.5; }
.next-link:hover .cap-link svg { transform: translateX(4px); }

.cs-cta { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s5); align-items: end; margin-top: var(--section); }
.cs-cta-side { display: grid; gap: var(--s3); }
.cs-cta-side p { font-size: var(--fs-lede); color: var(--ink-2); max-width: 28em; }
.cs-cta .actions { flex-wrap: wrap; }

@media (max-width: 960px) {
  .cs-slab { width: auto; }
  .facts { row-gap: var(--s4); }
  .cs-split-head { grid-template-columns: 1fr; gap: var(--s3); }
  .v-front, .v-rear, .v-plan, .v-reartop { grid-column: 1 / -1; }
  .v-reartop .view-img { aspect-ratio: 16 / 10; }
  .cs-film-media { aspect-ratio: auto; max-height: none; }
  .cs-film-media .feature-video, .cs-film-media .vid-poster { object-position: 50% 50%; }
  .next-link { height: auto; display: flex; flex-direction: column; background: #fff; }
  .next-media { position: relative; aspect-ratio: 16 / 10; }
  .next-cap { position: relative; left: auto; bottom: auto; width: auto; margin: -56px 12px 12px; }
  .cs-cta { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .facts { grid-template-columns: 1fr; }
  .v-side .view-img { aspect-ratio: 16 / 10; }
  .plan-dims { grid-template-columns: repeat(3, auto); }
  .plan-note { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .dim b { font-size: var(--fs-micro); padding: 2px 5px; }
  .split-stage .split-label { top: 4%; }
  .cs-film-cap { right: 16px; border-radius: 18px; }
}

/* View in 3D (work captions) ---------------------------------------------------- */
.cap-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
.cap-actions .btn--sm { padding: 0 16px; }
.cap-3d svg { width: 20px; height: 20px; }
.cap-3d[hidden] { display: none; }
/* the "View in 3D" pill that floats on a grid card (a glass pill; the film cards use the plain .btn--clear button) */
.card-3d {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--btn-h); padding: 0 16px 0 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,var(--glass-border-a)); font-family: var(--f-sans); font-size: var(--fs-sm); font-weight: 500; color: var(--ink);
  transition: background-color .25s, transform .3s var(--ease);
}
.card-3d:hover { background: rgba(255,255,255,.92); transform: translateY(-1px); }

.m3d { padding: 0; border: 0; background: transparent; width: min(1240px, calc(100vw - 2 * var(--gutter))); max-width: none; max-height: none; height: min(780px, calc(100svh - 48px)); overflow: visible; color: var(--ink); }
.m3d::backdrop { background: rgba(14,16,19,.28); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.m3d[open] { animation: m3d-in .6s var(--ease) both; }
@keyframes m3d-in { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
.m3d-panel { height: 100%; border-radius: calc(var(--r-xl) + 6px); display: grid; grid-template-rows: auto 1fr auto; overflow: hidden;
  background: linear-gradient(180deg, rgba(247,248,250,.86) 0%, rgba(230,234,238,.86) 58%, rgba(196,204,212,.9) 100%); }
.m3d-head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; padding: 20px 20px 0 28px; }
.m3d-head .micro { grid-column: 1; display: inline-flex; align-items: center; gap: 8px; color: var(--ink-g2); }
.m3d-title { grid-column: 1; font-size: var(--fs-h3); letter-spacing: var(--ls-display); line-height: 1; }
.m3d-close { grid-column: 2; grid-row: 1 / span 2; width: var(--btn-h); height: var(--btn-h); border-radius: 50%; border: 1px solid rgba(14,16,19,.14); background: rgba(255,255,255,.7); cursor: pointer; display: grid; place-items: center; }
.m3d-close svg { width: 16px; height: 16px; }
.m3d-close:hover { background: #fff; }
.m3d-stage { position: relative; min-height: 0; touch-action: pan-y; }
.m3d-stage .viewer-poster { -webkit-mask-image: none; mask-image: none; object-fit: contain; }
.m3d-stage .btn-3d { opacity: 1; }
.m3d-stage.is-live .btn-3d { opacity: 0; pointer-events: none; }
.m3d-stage.is-loading .btn-3d { pointer-events: none; }
.m3d-stage.is-live .viewer-poster { opacity: 0; }
.m3d-stage model-viewer { opacity: 0; transition: opacity 1.2s var(--ease); }
.m3d-stage.is-live model-viewer { opacity: 1; }
.m3d-hint { display: flex; align-items: center; gap: 8px; padding: 0 28px 20px; color: var(--ink-g2); }
.m3d-hint svg { width: 20px; height: 20px; }

/* How we work -------------------------------------------------------------------- */
.process { position: relative; margin-top: var(--section); padding-bottom: clamp(20px, 3vw, 40px); }
.process-bg { position: relative; height: clamp(380px, 40vw, 640px); border-radius: var(--r-xl); overflow: hidden; }
.process-bg img { object-position: 50% 45%; }
.process .wrap { position: relative; }
.process-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); align-items: end; margin-bottom: var(--head-gap); }
.process-head p { color: var(--ink-2); font-size: var(--fs-lede); line-height: 1.5; max-width: 32em; }
.path { position: relative; margin: -120px clamp(28px, 4vw, 64px) 0; border-radius: var(--r-xl); padding: clamp(22px, 2.4vw, 34px) clamp(22px, 2.4vw, 34px) clamp(26px, 2.6vw, 38px); background: rgba(255,255,255,.66); }
.path-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); color: var(--ink-g2); margin-bottom: 26px; }
.path-count { color: var(--ink-g2); }
.path-count .doto { font-size: var(--fs-body-lg); color: var(--ink); }
.path-list { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0 18px; position: relative; padding-top: 34px; }
.path-rail { position: absolute; left: clamp(22px, 2.4vw, 34px); right: clamp(22px, 2.4vw, 34px); top: calc(clamp(22px, 2.4vw, 34px) + 52px); height: 1px; background: var(--hair-strong); }
.path-rail i { position: absolute; left: 0; top: -0.5px; height: 2px; width: 100%; transform: scaleX(var(--p, 1)); transform-origin: 0 50%; background: var(--ink); border-radius: 2px; }
.path-list li { position: relative; }
.path-list li::before { content: ""; position: absolute; left: 0; top: -40px; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 1.5px solid var(--ink); box-sizing: border-box; transition: background-color .4s, border-color .4s, box-shadow .4s; z-index: 1; }
.path-list li.is-on::before { background: var(--ink); }
.path-list li:last-child.is-on::before { background: var(--signal); border-color: var(--signal); box-shadow: 0 0 0 4px rgba(255,77,18,.18); }
.p-n { display: block; font-size: var(--fs-small); color: var(--ink-g2); margin-bottom: 8px; }
.path-list h3 { font-size: var(--fs-body); letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 12px; min-height: 2.4em; }
.p-get { font-size: var(--fs-xs); line-height: 1.45; color: var(--ink-g2); }
.p-get span { display: block; font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--ink); margin-bottom: 4px; }

/* Clients wall ------------------------------------------------------------------- */
.clients { position: relative; margin-top: var(--section); }
.clients::before { /* light pooling behind the glass so the wall has something to frost (kept inside the section, so it fades out and is never cut) */
  content: ""; position: absolute; left: 0; right: 0; top: 24%; bottom: 0; pointer-events: none;
  background:
    radial-gradient(34% 42% at 18% 58%, rgba(64,140,255,.26), rgba(64,140,255,0) 70%),
    radial-gradient(26% 38% at 84% 40%, rgba(255,77,18,.15), rgba(255,77,18,0) 70%),
    radial-gradient(40% 38% at 55% 66%, rgba(120,200,190,.16), rgba(120,200,190,0) 70%);
}
.clients .wrap { position: relative; }
.clients-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); align-items: end; margin-bottom: var(--head-gap); }
.clients-head p { color: var(--ink-2); font-size: var(--fs-lede); line-height: 1.5; max-width: 32em; }
.wall { border-radius: calc(var(--r-xl) + 6px); padding: 8px; background: rgba(255,255,255,.38); }
.wall-grid { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; border-radius: var(--r-xl); overflow: hidden; background: rgba(14,16,19,.07); }
.cell { position: relative; display: grid; grid-template-rows: 1fr auto; min-height: clamp(150px, 12vw, 190px); padding: 14px 16px 12px; background: rgba(255,255,255,.62); transition: background-color .5s var(--ease); }
.cell-mark { position: relative; display: grid; place-items: center; }
.cell-mark img { grid-area: 1 / 1; height: auto; max-width: 100%; transition: opacity .5s var(--ease), transform .6s var(--ease); }
.cell .lg { opacity: .86; }
.cell .lg-c { opacity: 0; }
.wm { display: grid; justify-items: center; gap: 3px; color: var(--ink); opacity: .86; transition: opacity .5s var(--ease); }
.wm-main { font-weight: 700; font-size: 1.5rem; letter-spacing: -0.035em; line-height: .9; text-transform: uppercase; }
.wm-sub { font-family: var(--f-mono); font-weight: 500; font-size: 0.5625rem; letter-spacing: .32em; line-height: 1; text-transform: uppercase; margin-right: -.32em; }
@media (hover: hover) { .cell:hover .wm { opacity: 1; } }
.cell-type { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; text-align: center; color: var(--ink); opacity: .86; max-width: 9em; }
.cell-type--long { font-size: 1.0625rem; }
.cell-cap { font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-g2); line-height: 1.3; }
.cell--count { place-items: start; grid-template-rows: 1fr auto auto; grid-column: span var(--sp6, 1); }   /* fills the rest of the last row (the spans are counted in home.php) */
.cell--count .cc-n { font-size: clamp(3rem, 4.4vw, 4.25rem); line-height: .9; align-self: center; }
.cell--count .cc-codes { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: .06em; line-height: 1.5; color: var(--ink-g2); margin-top: 4px; overflow-wrap: anywhere; }
@media (hover: hover) {
  .cell:hover { background: rgba(255,255,255,.92); }
  .cell:hover .lg { opacity: 0; }
  .cell:hover .lg-c { opacity: 1; transform: scale(1.04); }
  .cell:hover .cell-type { opacity: 1; }
}
.wm { display: grid; justify-items: center; gap: 4px; color: var(--ink); opacity: .7; transition: opacity .4s var(--ease); }
.wm-main { font-weight: 700; font-size: calc(1.1875rem * var(--lt, 1)); letter-spacing: -0.035em; line-height: .9; text-transform: uppercase; white-space: nowrap; }
.wm-sub { font-family: var(--f-mono); font-weight: 500; font-size: calc(0.5625rem * var(--lt, 1)); letter-spacing: .28em; line-height: 1; text-transform: uppercase; margin-right: -.28em; white-space: nowrap; }
@media (hover: hover) { .cell:hover .lg, .cell:hover .wm { opacity: 1; } }
.cell:focus-within .lg, .cell:focus-within .wm { opacity: 1; }

/* Testimonials with logos, and where the clients are --------------------------------- */
.q-top { display: flex; align-items: center; min-height: 54px; }
.q-logo { height: auto; filter: brightness(0) invert(1); opacity: .92; }
.quote blockquote { flex: 1; }
.where { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid rgba(255,255,255,.22); }
.where-title { color: rgba(255,255,255,.82); font-weight: 500; }
.worldmap { margin-top: var(--s4); padding: clamp(10px, 2.2vw, 32px); border-radius: var(--r-xl); background: rgba(8,11,15,.66); border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); }
.wm-stage { position: relative; }
.wm-svg { display: block; width: 100%; height: auto; }
.wm-dots { fill: none; stroke: rgba(255,255,255,.24); stroke-width: .6; stroke-linecap: round; stroke-dasharray: 0 1; }
.wm-dots--on { stroke: rgba(255,255,255,.8); stroke-width: .78; }
.wm-pin { position: absolute; width: 0; height: 0; z-index: 1; }
.wm-pin:hover, .wm-pin:focus-within, .wm-pin.is-open { z-index: 6; }
.wm-dot { position: absolute; left: 0; top: 0; width: 28px; height: 28px; margin: -14px 0 0 -14px; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.wm-dot i { width: 9px; height: 9px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px rgba(255,77,18,.28), 0 0 12px 3px rgba(255,77,18,.75); transition: transform .3s var(--ease); }
.wm-dot:focus-visible { outline: 2px solid #fff; outline-offset: 0; }
.wm-pin:hover .wm-dot i, .wm-pin.is-open .wm-dot i, .wm-dot:focus-visible i { transform: scale(1.35); }
@keyframes wm-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,77,18,.5), 0 0 12px 3px rgba(255,77,18,.75); } 100% { box-shadow: 0 0 0 12px rgba(255,77,18,0), 0 0 12px 3px rgba(255,77,18,.75); } }
@media (prefers-reduced-motion: no-preference) { .wm-dot i { animation: wm-pulse 2.8s ease-out infinite; } }
.wm-card { position: absolute; left: 0; bottom: 18px; transform: translate(calc(-50% + var(--wm-shift, 0px)), 6px); display: grid; gap: 3px; width: max-content; max-width: min(260px, 70vw); padding: 10px 14px; border-radius: 16px; font-size: var(--fs-sm); line-height: 1.4; text-align: left; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s; }
.wm-card strong { font-weight: 600; letter-spacing: -0.01em; }
.wm-card span { color: rgba(255,255,255,.84); }
.wm-pin[data-below] .wm-card { bottom: auto; top: 18px; }
.wm-pin:hover .wm-card, .wm-pin:focus-within .wm-card, .wm-pin.is-open .wm-card { opacity: 1; visibility: visible; transition-delay: 0s; transform: translate(calc(-50% + var(--wm-shift, 0px)), 0); }
.where-list { display: none; list-style: none; margin-top: var(--s4); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.where-list li { display: grid; gap: 6px; align-content: start; }
.where-list .doto { font-size: 2rem; line-height: .85; }
.w-name { font-weight: 600; font-size: var(--fs-body-lg); letter-spacing: -0.015em; margin-top: 4px; }
.w-who { font-size: var(--fs-sm); line-height: 1.45; color: rgba(255,255,255,.82); max-width: 18em; }

/* Founder beside the booking panel --------------------------------------------------- */
.founder-card { display: flex; align-items: center; gap: 14px; margin-top: var(--s3); padding: 12px 14px; border-radius: 18px; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.7); box-shadow: inset 0 1px 0 #fff; }
.founder-mark { width: 52px; height: 52px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--ink); color: #fff; box-shadow: 0 6px 16px rgba(14,16,19,.2); }
.founder-mark svg { width: 26px; height: 22px; }
.founder-card p { display: grid; gap: 2px; }
.f-name { font-weight: 600; font-size: var(--fs-body-lg); letter-spacing: -0.02em; }
.f-role { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--ink-g2); }

/* Case study overview, part 2: the engagement. The label sits above the lead (no empty left column), the lead is large and
   set to a comfortable line length, and the blocks below it are equal columns: 2 blocks = 2 equal columns, 3 = 3, 4 = 2 by 2. */
.cs-text { display: block; margin-top: calc(var(--section) * .6); }
.cs-intro { display: grid; gap: var(--s3); }
.cs-label { color: var(--ink-2); }
.cs-lead { max-width: 62ch; font-size: clamp(1.875rem, 3.1vw, 3.125rem); font-weight: 500; letter-spacing: var(--ls-display); line-height: 1.12; text-wrap: balance; }
.cs-more { display: grid; gap: var(--s2); max-width: 66ch; margin-top: var(--s2); color: var(--ink-2); }
.cs-more p { font-size: var(--fs-body-lg); line-height: 1.6; }
.eng { display: grid; grid-template-columns: repeat(var(--eng-cols, 3), minmax(0, 1fr)); gap: var(--s5) clamp(32px, 4vw, 64px); margin-top: calc(var(--section) * .6); border-top: 1px solid var(--hair-strong); }
.eng-col { position: relative; padding-top: var(--s4); display: grid; gap: 16px; align-content: start; }
.eng-col::before { content: ""; position: absolute; top: -1px; left: 0; width: 40px; height: 1px; background: var(--ink); }
.eng-n { display: flex; align-items: baseline; gap: 12px; color: var(--ink-2); }
.eng-n .doto { font-size: var(--fs-body-lg); color: var(--ink); }
.eng-col h3 { font-size: clamp(1.5rem, 2vw, 1.875rem); font-weight: 600; letter-spacing: var(--ls-display); line-height: 1.12; max-width: 22em; text-wrap: balance; }
.eng-col > p { color: var(--ink-2); line-height: 1.6; max-width: 34em; }
.eng-text { display: grid; gap: var(--s2); max-width: 34em; color: var(--ink-2); font-size: var(--fs-body-lg); }
.eng-text p { line-height: 1.6; }
.eng-col h3 + .eng-text { margin-top: 0; }
.eng-list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.eng-list li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--hair-strong); font-size: var(--fs-sm); font-weight: 500; }
.eng-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.eng-actions .btn svg { width: 20px; height: 20px; }
.eng-ar-note { color: var(--ink-2); }
.eng-note { color: var(--ink-2); }
.eng-dims { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--s4); padding-top: 16px; border-top: 1px solid var(--hair); }
.eng-dims div { display: grid; gap: 4px; }
.eng-dims dt { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--ink-2); }
.eng-dims dd { font-family: var(--f-mono); font-size: var(--fs-small); font-weight: 500; }

@media (max-width: 1199px) {
  .path { margin: var(--s3) 0 0; }
}
@media (max-width: 1180px) {
  .path-list { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 28px; padding-top: 0; }
  .path-list li { padding-top: 26px; }
  .path-list li::before { top: 0; }
  .path-rail { display: none; }
  .wall-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wall-grid .cell--count { grid-column: span var(--sp4, 2); }
}
@media (max-width: 960px) {
  .process-head, .clients-head { grid-template-columns: 1fr; gap: var(--s3); }
  .process-bg { height: 56vw; }
  .eng { grid-template-columns: 1fr; gap: var(--s5); margin-top: var(--s6); }
  .m3d { height: min(640px, calc(100svh - 32px)); }
}
@media (max-width: 600px) {
  .path { padding: 22px 18px; }
  .path-head { margin-bottom: 18px; }
  .path-list { grid-template-columns: 1fr; row-gap: 0; }
  .path-list li { display: grid; grid-template-columns: 30px 1fr; column-gap: 8px; padding: 0 0 18px 30px; }
  .path-list li::before { top: 3px; }
  .path-list li:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 18px; bottom: 2px; width: 1px; background: var(--hair-strong); }
  .path-list li.is-on:not(:last-child)::after { background: var(--ink); }
  .p-n { grid-row: 1 / span 2; margin: 0; }
  .path-list h3 { min-height: 0; margin-bottom: 6px; }
  .wall { padding: 6px; }
  .wall-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wall-grid .cell--count { grid-column: span var(--sp3, 1); }
  .wall-grid .cell { min-height: 112px; padding: 10px 8px 8px; }
  .wall-grid .cell-mark img { max-width: 88%; transform: scale(.82); }
  .wall-grid .wm { transform: scale(.78); }
  .wall-grid .cell-cap { font-size: 0.75rem; letter-spacing: .02em; text-transform: none; font-family: var(--f-sans); }
  .cell--count .cc-n { font-size: 2.5rem; }
  .cell { min-height: 128px; padding: 12px; }
  .cell-mark img { max-width: 82%; }
  .cell-type { font-size: 1.0625rem; }
  .wm-main { font-size: calc(1rem * var(--lt, 1)); }
  .wm-sub { display: none; }   /* the full name stays in the accessible label; the phone shows the main word on one line */
  .q-top { min-height: 44px; }
  .q-logo { transform: scale(.85); transform-origin: left center; }
  .where-list { display: grid; grid-template-columns: 1fr 1fr; row-gap: var(--s4); }
  .where-list .doto { font-size: 1.75rem; }
  .worldmap { padding: 8px; }
  .wm-dot { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
  .wm-dot i { width: 7px; height: 7px; }
  .m3d { width: calc(100vw - 20px); }
  .m3d-head { padding: 16px 14px 0 20px; }
  .m3d-hint { padding: 0 20px 16px; }
}

/* Motion: reveal states exist only once JS is confirmed running ------------------ */
html.js .is-pre { opacity: 0; transform: translate3d(0, 16px, 0); }
html.js .is-in { opacity: 1; transform: none; transition: opacity .5s ease-out, transform .5s ease-out; }

/* Tablet ------------------------------------------------------------------------ */
@media (max-width: 1180px) {
  .nav a { padding: 0 12px; }
  .hero-row { flex-direction: column; align-items: flex-start; gap: var(--s3); }
  .svc-list, .svc-list--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s5); }
  .svc-list--5 > li, .svc-list--5 > li:nth-child(n+4) { grid-column: auto; }
  .caps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .caps-title { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
  .nav { display: none; }
  .head-cta { margin-left: auto; }
  .menu-btn {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; flex: none; text-decoration: none;
    background: rgba(14,16,19,.06);
  }
  .menu-btn i, .menu-btn i::before { display: block; width: 16px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform .35s var(--ease); }
  .menu-btn i { position: relative; transform: translateY(-3px); }
  .menu-btn i::before { content: ""; position: absolute; left: 0; top: 6px; }
  .menu-btn[aria-expanded="true"] i { transform: rotate(45deg); }
  .menu-btn[aria-expanded="true"] i::before { transform: translateY(-6px) rotate(-90deg); }
  .menu-sheet { display: block; pointer-events: auto; max-width: 1180px; margin: 8px auto 0; border-radius: 26px; padding: 8px; }
  .menu-sheet[hidden] { display: none; }
  .menu-sheet ul { list-style: none; display: grid; }
  .menu-sheet a { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 0 16px; border-radius: 18px; font-size: var(--fs-h3-sm); font-weight: 600; letter-spacing: -0.03em; text-decoration: none; }
  .menu-sheet a:hover { background: rgba(255,255,255,.55); }
  .menu-sheet .doto { font-size: var(--fs-sm); color: var(--ink-g2); width: 24px; }

  /* hero becomes a stacked composition */
  .hero { height: auto; max-height: none; overflow: visible; padding-bottom: 16px; }
  .hero-stage { position: relative; height: clamp(400px, 62svh, 620px); overflow: hidden; }
  .hero { --hz: 57%; }
  .viewer, .cs-hero .viewer { left: 0; width: auto; right: 0; top: 76px; bottom: 178px; }   /* the stage ends above the readout card */
  .nw { white-space: normal; }
  .readout { left: var(--gutter); right: var(--gutter); top: auto; bottom: 68px; width: auto; padding: 10px 14px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; }
  .ro-top { padding: 0; border: 0; }
  .ro-dims { grid-column: 1 / -1; grid-row: 2; display: flex; justify-content: space-between; padding: 4px 0 0; }
  .ro-dims div { flex-direction: column-reverse; align-items: flex-start; }
  .ro-dims .doto { font-size: var(--fs-h4); }
  .ro-dims dt { font-size: var(--fs-micro); }
  .ro-foot { display: none; }
  .hero {
    background:
      radial-gradient(60% 26% at 10% 66%, rgba(64,140,255,.34), rgba(64,140,255,0) 70%),
      radial-gradient(50% 16% at 95% 76%, rgba(255,77,18,.2), rgba(255,77,18,0) 70%),
      linear-gradient(180deg, #BFC7CF 0%, #D2D7DD 38%, var(--ground) 100%);
    padding-bottom: 40px;
  }
  .hero-copy {
    position: relative; left: auto; right: auto; top: auto; bottom: auto; display: block; pointer-events: auto; isolation: isolate;
    margin: -56px var(--gutter) 0; padding: 22px 20px 0; border-radius: 26px;
    border: 1px solid rgba(255,255,255,var(--glass-border-a)); box-shadow: var(--shadow-glass);
  }
  .hero-copy::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.08) 30%, rgba(255,255,255,0) 58%); }
  .hero-h1 .l { display: block; text-wrap: balance; }
  .hero-slab, .cs-slab { width: auto; margin-top: 22px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hero-slab::before, .hero-slab::after { display: none; }
  .cs-slab { padding-bottom: 22px; }
  .hero-row { flex-direction: column; align-items: stretch; }
  .actions { flex-wrap: wrap; }

  .work-head { grid-template-columns: 1fr; grid-template-areas: "count" "title" "intro"; }
  .work-count { flex-direction: row; align-items: baseline; gap: 12px; }
  .filters-bar { position: static; justify-content: flex-start; }
  .filters-bar { padding: 0; }
  .filters {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    width: 100%; border-radius: 0; padding: 4px var(--gutter); gap: 6px; background: none; border: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 36px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 36px), transparent 100%);
  }
  .filters::-webkit-scrollbar { display: none; }
  .filters::before, .filters::after { display: none; }
  .filters .chip { flex: none; scroll-snap-align: start; scroll-margin-left: var(--gutter); white-space: nowrap; background: rgba(var(--glass-rgb), var(--glass-a-strong)); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(14,16,19,.06); }
  .filters .chip[aria-pressed="true"] { background: var(--ink); }

  .features { grid-template-columns: 1fr; }
  .feature-media, .feature--half .feature-media { aspect-ratio: auto; height: auto; max-height: none; display: flex; flex-direction: column; background: #fff; }
  .feature-video { position: relative; inset: auto; aspect-ratio: 16 / 10; height: auto; }
  .vid-poster { inset: 0 0 auto 0; height: auto; aspect-ratio: 16 / 10; }
  .feature-media, .feature--half .feature-media { background: transparent; }
  .feature-media, .feature--half .feature-media { border-radius: var(--r-xl); overflow: visible; box-shadow: none; }
  .feature-video, .vid-poster { border-radius: var(--r-xl); }
  .feature-cap, .feature--right .feature-cap {
    position: relative; z-index: 3; left: auto; right: auto; bottom: auto; width: auto; margin: -24px 12px 0; padding: 18px 20px 14px;
  }
  .feature-video { padding-bottom: 0; }
  .feature-cap > p { color: var(--ink); }
  .feature-cap .h-feature { margin-bottom: 8px; }
  .feature-cap .cap-top { margin-bottom: 10px; }
  .cap-actions { margin-top: 16px; }

  .grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: var(--s2); }
  .grid .card, .grid.is-filtered .card { grid-column: auto; }
  .card-link { height: auto; aspect-ratio: 4 / 4.3; }
  .card.s8 .card-link, .card.s7 .card-link { aspect-ratio: 4 / 3.4; }

  .shelf-head { grid-template-columns: 1fr; gap: var(--s3); }
  .sections { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s4); }
  .spec-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .svc-head { grid-template-columns: 1fr; gap: var(--s3); }
  .proof-head { grid-template-columns: 1fr; }
  .quotes { grid-template-columns: 1fr; }
  .studio-top, .studio-body { grid-template-columns: 1fr; gap: var(--s5); }
  .contact-grid { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s5); }
  .foot-col:first-child { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .head-pill { height: 60px; padding: 0 8px 0 16px; gap: 8px; }
  .site-head { top: 10px; }
  /* phone nav: the lockup keeps the mark and "Vertù"; "Design Studio" is dropped. The call-to-action pill is compact (smaller type and
     padding, same wording) and every hit area stays 44px high. */
  .viewer, .cs-hero .viewer { bottom: 190px; }
  .brand-mark { width: 24px; height: 20px; }
  .brand-name { font-size: 1.3125rem; }
  .brand-sub { display: none; }
  .head-cta { padding: 0 12px; gap: 7px; font-size: var(--fs-xs); letter-spacing: 0; }
  .head-cta .sig { width: 6px; height: 6px; box-shadow: 0 0 0 2px rgba(255,77,18,.18); }
  .hero-kicker { margin-bottom: 14px; }
  .actions .btn { flex: 1 1 auto; }
  .ticker { height: 50px; gap: 12px; }
  .ticker-label { font-size: var(--fs-xs); }
  .svc-list, .svc-list--5 { grid-template-columns: 1fr; row-gap: var(--s4); }
  .svc-list .idx { margin-bottom: var(--s2); }
  .caps { grid-template-columns: 1fr; gap: var(--s4); }
  .numbers { justify-content: space-between; }
  .feature-video, .vid-poster { aspect-ratio: 16 / 10; }
  #p-pinnacle .feature-video, #p-pinnacle .vid-poster { object-position: 50% 50%; }
  .contact-list div { grid-template-columns: 1fr; gap: 4px; }
  .bk { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s4) var(--s3); }
  .foot-col a { overflow-wrap: anywhere; }
  .foot-base { flex-direction: column; align-items: flex-start; gap: 0; }
}
/* very small phones (320): the pill and the mark give up a little more room so nothing wraps or overflows */
@media (max-width: 360px) {
  .foot-cols { grid-template-columns: 1fr; }
  .head-pill { padding: 0 6px 0 12px; gap: 6px; }
  .brand, .foot-brand { gap: 8px; }
  .brand-mark { width: 22px; height: 18.7px; }
  .brand-name { font-size: var(--fs-body-lg); }
  .head-cta { padding: 0 10px; gap: 6px; font-size: var(--fs-micro); }
  .head-cta .sig { display: none; }
}

/* Reduced motion: no drift, no ticker, no parallax ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .ticker { height: auto; padding: 12px 0; align-items: flex-start; }
  .ticker-window { -webkit-mask-image: none; mask-image: none; }
  .ticker-track { animation: none; width: auto; }
  .ticker-list { flex-wrap: wrap; row-gap: 4px; }
  .ticker-list[aria-hidden="true"] { display: none; }
  .contact-bg img { animation: none; transform: scale(1.04); }
  .feature-media { transform: none !important; }
  .card-media img, .stages-img img { transform: none !important; }
  html.js .is-pre { opacity: 1; transform: none; }
  * { transition-duration: .01ms !important; }
  html.js .is-in { transition: none !important; }
}

/* The one orchestrated moment: glass settles over the stage as the car arrives. */
@keyframes rise { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } }
html.js .hero-slab, html.js .hero-h1 { animation: rise 1.2s var(--ease) .1s both; }
html.js .hero-slab { animation-delay: .25s; }
html.js .readout { animation: rise 1.2s var(--ease) .4s both; }
@media (prefers-reduced-motion: reduce) { html.js .hero-slab, html.js .hero-h1, html.js .readout { animation: none; } }

.m3d-stage model-viewer::part(default-progress-bar){display:none}

/* ------------------------------------------------------------------
   Additions for the live site (not in the static design): the enquiry form,
   the "Book a call" link when a Microsoft Bookings page is set, the admin preview bar,
   the 404 page and the extra paragraphs on a case study.
   ------------------------------------------------------------------ */
.booking-live { display: grid; gap: var(--s3); align-content: start; justify-items: start; padding-top: var(--s2); }
.booking-live p { max-width: 38ch; color: var(--ink-g2); }

.enquiry-wrap { margin-top: var(--s3); }
.enquiry { border-radius: var(--r-xl); padding: clamp(20px, 2.6vw, 36px); display: grid; gap: var(--s3); }
.enq-title { font-size: var(--fs-h3-sm); letter-spacing: -0.03em; }
.enq-intro { margin-top: -10px; color: var(--ink-2); font-size: var(--fs-small); }
.enq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2) var(--s3); }
.enq-grid label { display: grid; gap: 6px; font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--ink-g2); }
.enq-grid .enq-wide { grid-column: 1 / -1; }
.enq-grid input, .enq-grid textarea {
  font: inherit; font-family: var(--f-sans); font-size: var(--fs-small); letter-spacing: 0; text-transform: none; color: var(--ink);
  width: 100%; min-height: 48px; padding: 12px 16px; border-radius: var(--r-m);
  border: 1px solid rgba(14,16,19,.2); background: rgba(255,255,255,.78);
}
.enq-grid textarea { resize: vertical; min-height: 120px; }
.enq-grid input:focus-visible, .enq-grid textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; background: #fff; }
.enquiry .btn { justify-self: start; border: 0; cursor: pointer; }
.enq-msg { padding: 12px 16px; border-radius: var(--r-m); font-weight: 500; }
.enq-msg.is-ok { background: rgba(255,255,255,.9); border: 1px solid rgba(14,16,19,.2); }
.enq-msg.is-bad { background: #fff; border: 1px solid #b3261e; color: #8c1a13; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 900px) { .enq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .enq-grid { grid-template-columns: 1fr; } }

.preview-bar {
  position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 90; max-width: calc(100vw - 32px); margin: 0;
  display: inline-flex; align-items: center; min-height: var(--btn-h); padding: 0 18px; border-radius: 999px; background: var(--ink); color: #fff;
  font-size: var(--fs-xs); font-weight: 500; line-height: 1.3; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 24px -8px rgba(14,16,19,.45);
}


.nf { min-height: 70svh; display: grid; align-content: center; gap: var(--s3); padding-top: 160px; padding-bottom: var(--s7); }
.nf-text { color: var(--ink-2); font-size: var(--fs-lede); }

/* Privacy page */
.legal { padding-top: 160px; padding-bottom: var(--s7); max-width: 760px; display: grid; gap: var(--s2); }
.legal h2 { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.02em; margin-top: var(--s3); }
.legal p, .legal li { color: var(--ink-2); line-height: 1.6; }
.legal ul { padding-left: 1.2em; display: grid; gap: 8px; }
.legal-lede { font-size: var(--fs-lede); }
.legal a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }
.legal .actions { margin-top: var(--s3); }
.foot-links { display: inline-flex; gap: var(--s3); }

/* WhatsApp: the link under "Book a call", and a small glass pill on phones only */
.wa-prefer { color: var(--ink-g2); font-size: var(--fs-small); }
.mail-prefer { margin-top: 6px; overflow-wrap: anywhere; }
.wa-prefer a, .contact-list a[href^="https://wa.me"] { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.wa-float { display: none; }
@media (max-width: 700px) {
  .wa-float {
    display: inline-flex; align-items: center; gap: 8px; position: fixed; z-index: 40;
    right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
    min-height: 44px; padding: 0 16px 0 14px; border-radius: 999px; color: var(--ink);
    font-size: var(--fs-sm); font-weight: 500; letter-spacing: -0.005em; text-decoration: none;
    /* only after the visitor has scrolled past the hero (glass.js adds .is-in) */
    opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none;
    transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
  }
  .wa-float.is-in { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .3s ease, transform .3s ease, visibility 0s; }
  @media (prefers-reduced-motion: reduce) { .wa-float, .wa-float.is-in { transition: none; transform: none; } }
  .wa-float svg { flex: none; }
  .wa-float:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  /* hidden while the 3D overlay or the phone menu is open */
  body:has(dialog[open]) .wa-float, body:has([data-menu]:not([hidden])) .wa-float { display: none; }
}

/* Working with us: the rules that apply to every project, in a glass slab beside the booking section */
.working-wrap { position: relative; margin-bottom: var(--s3); }
.working { border-radius: var(--r-xl); padding: clamp(24px, 3vw, 44px); display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr); gap: var(--s3) var(--s5); align-items: start; }
.working-title { font-size: var(--fs-h2-sm); font-weight: 600; letter-spacing: var(--ls-display); line-height: 0.95; }
.working-head { display: grid; gap: var(--s2); }
.working-intro { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); max-width: 28em; }
.working-list { list-style: none; display: grid; }
.working-list li { display: grid; grid-template-columns: 40px 1fr; gap: var(--s2); padding: 14px 0; border-top: 1px solid var(--hair); font-size: var(--fs-small); line-height: 1.5; }
.working-list li:first-child { border-top: 0; padding-top: 0; }
.working-list .doto { font-size: var(--fs-sm); color: var(--ink-g2); padding-top: 1px; }
@media (max-width: 960px) { .working { grid-template-columns: 1fr; } }
.booking > .wa-prefer { margin-top: var(--s3); }

/* Booking heading: break as "Book an intro call / with Jinen" */
#contact-title { text-wrap: balance; }
#contact-title .nb { white-space: nowrap; }
/* Anchors land below the fixed nav: html's scroll-padding-top (--nav-clear) is the base, and each target adds a small offset so its
   heading, not the empty padding above it, sits just under the nav. Sections that start with the page rhythm's padding pull
   that padding up out of the way. */
.work, .services, .studio { scroll-margin-top: calc(12px - var(--section)); }
.clients, .process, .proof, .cs-split, .cs-cta, .cs-next, .cs-gallery, .feature, .card, [id^="p-"] { scroll-margin-top: 12px; }
.cutaway { scroll-margin-top: calc(12px - var(--inset)); }
#contact { scroll-margin-top: 16px; }
#views-title, #cs-title, #next-title { scroll-margin-top: 12px; }
.site-foot { scroll-margin-top: 0; }
/* Phone eyebrow: at 480px and below only the location line shows; the studio name stays for screen readers */
@media (max-width: 480px) {
  .hero-kicker .kick-studio { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}


/* Performance pass: lighter glass -------------------------------------------------------------------
   Real blur (backdrop-filter) is kept for the few panels that sit over moving pictures: the nav, the hero
   slab, the film caption, the cutaway shelf, the phone menu and the WhatsApp pill. Everything else is the same
   glass drawn without blur: a more opaque tint, the specular sheen (::before) and an inner edge highlight.
   Blur is capped at 14px and saturate() is used on the nav and two panels only. Nothing that carries a
   backdrop-filter is transitioned or animated. */
.head-pill, .hero-slab, .shelf, .feature-cap, .menu-sheet, .m3d-panel, .wa-float {
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.head-pill { -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); }
.hero-slab { -webkit-backdrop-filter: none; backdrop-filter: none; }   /* wide screens only; on tablets and phones the slab is bare and .hero-copy is the glass */
@media (max-width: 960px) { .hero-copy { -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); } }
@media (min-width: 961px) { .hero-slab { -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); } }
.shelf { -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
/* Panel backgrounds: one soft local tint (--glass-tint) sits behind the text, the rest of the panel is a thin,
   see-through frost, so the picture shows at the edges. The alphas are the three knobs in :root. */
.glass:not(.glass--dark) { border-color: rgba(255,255,255,var(--glass-border-a)); }
.working, .contact-info, .booking, .enquiry, .path { background: var(--glass-tint), rgba(var(--glass-rgb), calc(var(--glass-a-strong) + .08)); }   /* over the drifting contact and process pictures: a touch firmer */
.card-3d { background: var(--glass-tint), rgba(var(--glass-rgb), calc(var(--glass-a-strong) + .16)); }
.card-cap, .vid-toggle, .readout, .btn-3d, .cs-film-cap, .next-cap, .view-chip { background: var(--glass-tint), rgba(var(--glass-rgb), var(--glass-a-strong)); }
.filters { background: var(--glass-tint), rgba(var(--glass-rgb), var(--glass-a-strong)); }
.wall { background: rgba(var(--glass-rgb), var(--glass-a-light)); }
.cell { background: rgba(var(--glass-rgb), var(--glass-a-medium)); }
@media (hover: hover) { .cell:hover { background: rgba(var(--glass-rgb), calc(var(--glass-a-strong) + .2)); } }
.hero-slab, .shelf { background: var(--glass-tint), rgba(var(--glass-rgb), var(--glass-a-medium)); }
.feature-cap { background: var(--glass-tint), rgba(var(--glass-rgb), var(--glass-a-strong)); }   /* sits on film that can be dark (Barchetta) */
@media (max-width: 960px) { .hero-copy { background: var(--glass-tint), rgba(var(--glass-rgb), var(--glass-a-medium)); } }   /* wide screens: .hero-copy is only a layout wrapper, the slab is the glass */
.menu-sheet, .wa-float { background: var(--glass-tint), rgba(var(--glass-rgb), var(--glass-a-strong)); }
.m3d-panel { background: var(--glass-tint), rgba(var(--glass-rgb), var(--glass-a-strong)); }
.head-pill { background: rgba(var(--glass-rgb), var(--glass-a-light)); }
.site-head.is-scrolled .head-pill { background: var(--glass-tint), rgba(var(--glass-rgb), var(--glass-a-medium)); }
.split-label.glass--dark { background: var(--glass-tint-dark), rgba(var(--glass-dark-rgb), var(--glass-dark-a-strong)); }
.quote.glass--dark { background: var(--glass-tint-dark), rgba(var(--glass-dark-rgb), var(--glass-dark-a-medium)); }
.founder-card { background: rgba(var(--glass-rgb), var(--glass-a-medium)); border-color: rgba(255,255,255,var(--glass-border-a)); }
.bk-day, .bk-slot, .dim b { background: rgba(var(--glass-rgb), var(--glass-a-strong)); }
.enq-grid input, .enq-grid textarea { background: rgba(255,255,255,.6); }
.btn--clear { background: rgba(255,255,255,.4); }
.glass:not(.glass--dark):not(.head-pill):not(.hero-slab):not(.shelf):not(.feature-cap):not(.menu-sheet):not(.m3d-panel):not(.wa-float) {
  box-shadow: inset 0 1px 0 rgba(255,255,255,calc(var(--glass-edge-a) + .15)), inset 0 0 0 1px rgba(255,255,255,.2), inset 0 -1px 1px rgba(255,255,255,.2), 0 1px 2px rgba(14,16,19,.06), 0 8px 22px -8px rgba(14,16,19,.13);
}
@media (hover: hover) {
  .card-link:hover .card-cap { background: var(--glass-tint), rgba(var(--glass-rgb), calc(var(--glass-a-strong) + .2)); }
}

/* Sections below the first screen are skipped by the browser until they come near; the remembered size
   keeps the scroll bar steady, and the first estimate is the measured height. */
.clients { content-visibility: auto; contain-intrinsic-size: auto 640px; }
.cutaway { content-visibility: auto; contain-intrinsic-size: auto 1100px; }
.services { content-visibility: auto; contain-intrinsic-size: auto 990px; }
.process { content-visibility: auto; contain-intrinsic-size: auto 1010px; }
.proof { content-visibility: auto; contain-intrinsic-size: auto 1460px; }
.studio { content-visibility: auto; contain-intrinsic-size: auto 1280px; }
.contact { content-visibility: auto; contain-intrinsic-size: auto 1830px; }
.site-foot { content-visibility: auto; contain-intrinsic-size: auto 1180px; }
@media (max-width: 900px) {
  .clients { contain-intrinsic-size: auto 680px; }
  .cutaway { contain-intrinsic-size: auto 1650px; }
  .services { contain-intrinsic-size: auto 1300px; }
  .process { contain-intrinsic-size: auto 1300px; }
  .proof { contain-intrinsic-size: auto 2100px; }
  .studio { contain-intrinsic-size: auto 1950px; }
  .contact { contain-intrinsic-size: auto 2250px; }
  .site-foot { contain-intrinsic-size: auto 950px; }
}
@media (max-width: 600px) {
  .cutaway { contain-intrinsic-size: auto 1320px; }
  .services { contain-intrinsic-size: auto 1890px; }
  .process { contain-intrinsic-size: auto 1360px; }
  .proof { contain-intrinsic-size: auto 2470px; }
  .studio { contain-intrinsic-size: auto 2000px; }
  .contact { contain-intrinsic-size: auto 3010px; }
  .site-foot { contain-intrinsic-size: auto 920px; }
}

/* Phones: no backdrop blur at all except the nav and the WhatsApp pill; the tints are firmer instead. */
@media (max-width: 700px) {
  html .glass:not(.head-pill):not(.wa-float), html .hero-copy, html .feature-cap, html .shelf, html .m3d-panel, html .menu-sheet {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html .m3d::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(14,16,19,.5); }
  /* no blur here, so the phone levels sit a little above the desktop ones (they were .72 to .97 before) */
  :root { --glass-a-strong: .56; --glass-a-medium: .46; --glass-a-light: .28; --glass-dark-a-strong: .52; --glass-dark-a-medium: .48; }
  html .hero-slab.glass, html .cs-slab.glass { background: none; }
  html .menu-sheet { background: var(--glass-tint), rgba(var(--glass-rgb), .8); }
  html .m3d-panel { background: linear-gradient(180deg, rgba(247,248,250,.92) 0%, rgba(230,234,238,.9) 58%, rgba(196,204,212,.88) 100%); }
}

/* Visitors who asked for less transparency get none. */
@media (prefers-reduced-transparency: reduce) {
  html *, html *::before, html *::after, html ::backdrop { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  html .glass, html .glass--text { background: rgba(246,247,248,.97); }
  html .glass--dark { background: rgba(18,20,24,.94); }
  html .hero-slab, html .hero-copy, html .shelf, html .feature-cap, html .head-pill, html .wa-float, html .filters, html .wall, html .card-cap, html .spec-tag, html .vid-toggle { background: rgba(246,247,248,.97); }
  html .m3d::backdrop { background: rgba(14,16,19,.55); }
}

/* Class-A proof under the services ------------------------------------------------------ */
.classa { margin-top: var(--s6); padding: clamp(10px, 1.4vw, 16px); border-radius: calc(var(--r-xl) + 4px); display: grid; grid-template-columns: minmax(0, 1.453fr) minmax(0, 1.164fr); gap: clamp(10px, 1.4vw, 16px); }   /* the two pictures' own proportions, so they sit at the same height uncropped */
.classa-title { grid-column: 1 / -1; padding: 6px 8px 0; color: var(--ink-g2); }
.classa figure { position: relative; margin: 0; border-radius: var(--r-xl); overflow: hidden; background: #9e9e9e; }
.classa img { display: block; width: 100%; height: auto; }
.classa figcaption { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 8px 14px; border-radius: 999px; font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-mono); text-transform: uppercase; line-height: 1.3; color: var(--ink); background: var(--glass-tint), rgba(var(--glass-rgb), var(--glass-a-strong)); border: 1px solid rgba(255,255,255,var(--glass-border-a)); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); }
@media (max-width: 600px) { .classa { grid-template-columns: 1fr; } }