/* MVSR GROUP: engineering editorial. The logo's charcoal, blue and red; a tall serif voice over a tight sans; dark stages for
   real product screens, light pages for reading. Motion clarifies flow and stays on transform and opacity. */
@font-face { font-family: "Inter Tight"; src: url("../assets/fonts/inter-tight-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../assets/fonts/instrument-serif.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../assets/fonts/instrument-serif-italic.woff2") format("woff2"); font-style: italic; font-display: swap; }
:root {
  --ink: #292d35; --ink-2: #22252c; --char: #292d35; --bg: #f4f5f6; --bg-2: #e9ebee; --paper: #fff; --line: #d6d9de; --line-d: rgba(255,255,255,.14);
  --muted: #5a606c; --muted-d: #a7adb9; --blue: #1054a1; --blue-l: #5d9bea; --red: #e83951; --on-d: #f4f5f6;
  --serif: "Instrument Serif", Georgia, serif; --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pad: clamp(20px, 5vw, 72px); --max: 1280px; --ease: cubic-bezier(.16, 1, .3, 1); --slow: .9s; --fast: .25s; --r-l: 22px; --r-m: 14px;
}
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
.top { view-transition-name: top; }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { margin: 0; background: var(--bg); color: var(--char); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
main a:not([class]) { color: var(--blue); text-underline-offset: 3px; }
.dark a:not([class]), .hero a:not([class]) { color: var(--blue-l); }
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -.012em; line-height: 1.1; }
h2 { font-size: clamp(32px, 4.4vw, 58px); }
.hero-title, .sub-title { text-wrap: balance; }
h2 em, h1 em { font: italic 400 1.08em/1 var(--serif); letter-spacing: -.01em; }
p { margin: 0; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--blue-l); outline-offset: 3px; border-radius: 6px; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 30; background: #fff; color: var(--char); padding: 10px 16px; border-radius: 10px; }
.skip:focus { top: 12px; }
.section-head .eyebrow::before, .split .eyebrow::before, .proof .eyebrow::before, .case-copy .eyebrow::before { content: ""; display: inline-block; width: 22px; height: 2px; background: var(--red); margin-right: 10px; vertical-align: 4px; }
.eyebrow { font-size: 13.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--muted); margin-bottom: 18px; }
.eyebrow a { color: inherit; }
.dark .eyebrow, .hero .eyebrow { color: var(--muted-d); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); margin-right: 9px; vertical-align: 1px; }
.num { font: italic 400 20px/1 var(--serif); color: var(--char); }
.dark .num, .hero .num { color: var(--muted-d); }
.muted { color: var(--muted); } .small { font-size: 14px; }
.lead { font-size: clamp(18px, 1.9vw, 22px); line-height: 1.5; max-width: 34em; color: var(--muted); }
.dark .lead, .hero .lead { color: var(--muted-d); }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent; background: var(--blue); color: #fff; font: 500 16px var(--sans); letter-spacing: .005em; text-decoration: none; cursor: pointer; transition: transform var(--fast) var(--ease), background var(--fast), border-color var(--fast); }
.btn span { transition: transform var(--fast) var(--ease); }
.btn:hover { background: #0c4483; } .btn:hover span { transform: translateX(4px); } .btn:active { transform: scale(.98); }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: 14.5px; }
.btn-light { background: var(--on-d); color: var(--ink); } .btn-light:hover { background: #fff; }
.btn-ghost { background: transparent; color: var(--on-d); border-color: var(--line-d); } .btn-ghost:hover { background: rgba(255,255,255,.08); }
.btn-ghost-dark { background: transparent; color: var(--char); border-color: var(--line); } .btn-ghost-dark:hover { background: var(--bg-2); }

/* header */
.top { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; gap: 22px; padding: 14px max(var(--pad), calc((100vw - var(--max)) / 2)); color: var(--char); transition: background var(--fast), box-shadow var(--fast); }
.on-dark .top { color: var(--on-d); }
.top.scrolled { background: #f4f5f6; box-shadow: 0 1px 0 var(--line); color: var(--char); }
.top.scrolled.over-dark { background: #292d35; box-shadow: 0 1px 0 var(--line-d); color: var(--on-d); }
.mark { display: inline-flex; align-items: center; gap: 11px; font-weight: 600; letter-spacing: .02em; text-decoration: none; font-size: 15.5px; }
.mark img { width: 40px; height: 40px; border-radius: 50%; background: #fff; }
.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; text-decoration: none; font-size: 15.5px; position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--fast) var(--ease); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
.menu { display: none; }
.menu summary { list-style: none; width: 46px; height: 46px; display: grid; place-content: center; gap: 6px; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { display: block; width: 22px; height: 1.6px; background: currentColor; transition: transform var(--fast) var(--ease); }
.menu[open] summary span:first-child { transform: translateY(3.8px) rotate(45deg); } .menu[open] summary span:last-child { transform: translateY(-3.8px) rotate(-45deg); }
.menu-sheet { position: absolute; left: 12px; right: 12px; top: 68px; background: var(--paper); color: var(--char); border-radius: var(--r-l); padding: 12px; box-shadow: 0 24px 60px -20px rgba(20,22,27,.45); display: grid; }
.menu-sheet a { padding: 14px 12px; text-decoration: none; font-size: 18px; border-radius: 10px; } .menu-sheet a:hover { background: var(--bg); }
@media (max-width: 820px) { .nav { display: none; } .top > .btn { margin-left: auto; } .menu { display: block; } }
@media (max-width: 420px) { .top > .btn { display: none; } .menu { margin-left: auto; } }

/* hero: a dark stage holding the real product */
.hero { position: relative; background: var(--ink); color: var(--on-d); padding: clamp(104px, 13vh, 132px) var(--pad) clamp(40px, 6vw, 72px); overflow: clip; isolation: isolate; }
.hero-glow { position: absolute; inset: -20% -10% auto; height: 90%; z-index: -1; background: radial-gradient(40% 50% at 78% 22%, rgba(16,84,161,.55), transparent 70%), radial-gradient(26% 34% at 18% 8%, rgba(232,57,81,.17), transparent 70%); }
.hero-copy, .tour, .hero-note { max-width: var(--max); margin-inline: auto; }
.hero-title { font-size: clamp(42px, 6.2vw, 88px); line-height: 1.02; letter-spacing: -.02em; margin-bottom: 22px; }
.stop { color: var(--red); font-weight: 400; }
.line { display: block; overflow: hidden; padding-bottom: .09em; margin-bottom: -.09em; }
.line > span { display: block; }
.js .hero-title .line > span { animation: rise var(--slow) var(--ease) both; }
.js .hero-title .line:nth-child(2) > span { animation-delay: .08s; } .js .hero-title .line:nth-child(3) > span { animation-delay: .16s; }
@keyframes rise { from { transform: translateY(105%); } }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-note { margin-top: 18px; font-size: 14px; color: var(--muted-d); }

/* the tour */
.tour { margin-top: clamp(30px, 4vw, 48px); }
.tour-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin-bottom: 14px; }
@media (max-width: 640px) { .tour-tabs { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); padding-right: 40px; } .tour-tabs button { min-height: 44px; padding: 0 14px; } }
.tour-tabs::-webkit-scrollbar { display: none; }
.tour-tabs button { position: relative; flex: none; min-height: 46px; padding: 0 18px; border: 0; background: none; color: var(--muted-d); font: 500 15px var(--sans); cursor: pointer; border-radius: 10px; overflow: hidden; transition: color var(--fast), background var(--fast); }
.tour-tabs button:hover { color: var(--on-d); }
.tour-tabs button[aria-selected="true"] { color: var(--on-d); background: rgba(255,255,255,.08); }
.tour-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--blue-l); transform: scaleX(0); transform-origin: left; }
.tour.run [aria-selected="true"] .tour-bar { animation: fill 6s linear both; }
@keyframes fill { to { transform: scaleX(1); } }
.tour-frame { border-radius: var(--r-l); border: 1px solid var(--line-d); background: var(--ink-2); overflow: hidden; box-shadow: 0 50px 120px -40px rgba(16,84,161,.5); }
.tour-chrome { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line-d); font-size: 12.5px; color: var(--muted-d); }
.tour-chrome i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.18); }
.tour-chrome span { margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tour-panes { aspect-ratio: 2 / 1.12; position: relative; }
.tour-pane { margin: 0; position: absolute; inset: 0; display: flex; flex-direction: column; animation: fadein .55s var(--ease) both; }
@keyframes fadein { from { opacity: 0; clip-path: inset(0 0 0 7%); filter: blur(3px); } to { opacity: 1; clip-path: inset(0); filter: blur(0); } }
.tour-pane picture { display: contents; }
.tour-pane img { width: 100%; flex: 1; min-height: 0; object-fit: cover; object-position: top left; }
.tour-pane.is-phone { background: radial-gradient(60% 80% at 50% 0, rgba(16,84,161,.4), transparent); }
.tour-pane.is-phone img { object-fit: contain; object-position: center top; padding: 18px 0 0; }
.tour-cap { margin: 0; padding: 13px 18px; font-size: 15px; color: var(--on-d); background: rgba(20,22,27,.92); border-top: 1px solid var(--line-d); }
@media (max-width: 640px) { .tour-panes { aspect-ratio: 4 / 5; } .tour-cap { font-size: 14px; } }

/* sections */
.section { padding: clamp(72px, 10vw, 140px) var(--pad); }
.section > * { max-width: var(--max); margin-inline: auto; }
.section.light + .section.light { padding-top: 0; }
.section-head { margin-bottom: clamp(36px, 5vw, 64px); }
.dark { background: var(--ink); color: var(--on-d); }

/* reveals */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* services: a list you read, with a real screen where one exists */
.svc { list-style: none; margin-block: 0; padding: 0; border-bottom: 1px solid var(--line); }
.svc-row { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.1fr) 30px; gap: 18px; align-items: center; min-height: 118px; padding: 16px 0; border-top: 1px solid var(--line); text-decoration: none; transition: padding-left .35s var(--ease), color var(--fast); }
.svc-row:hover { padding-left: 12px; color: var(--blue); }
.svc-name { font-size: clamp(28px, 3.6vw, 46px); font-weight: 500; letter-spacing: -.02em; line-height: 1.08; }
.svc-tag { color: var(--char); font-size: 18px; line-height: 1.35; max-width: 250px; }
.svc-shot { grid-column: 4; width: 150px; height: 86px; object-fit: cover; object-position: top; border-radius: 10px; border: 1px solid var(--line); transition: transform .4s var(--ease); }
.svc-row:hover .svc-shot { transform: scale(1.04); }
.svc-go { grid-column: 4; font-size: 22px; transition: transform var(--fast) var(--ease); } .svc-row:hover .svc-go { transform: translateX(5px); }
@media (max-width: 820px) { .svc-row { grid-template-columns: 34px 1fr 24px; gap: 4px 10px; } .svc-name { grid-column: 2; } .svc-tag { grid-column: 2; grid-row: 2; font-size: 16px; } .svc-go { grid-column: 3; grid-row: 1 / span 2; } }

/* steps: a line that draws itself as the section scrolls */
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; position: relative; padding-top: 28px; }
.steps::before, .steps::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--line); }
.steps::after { background: var(--blue); transform-origin: left; transform: scaleX(1); }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .steps::after { animation: draw linear both; animation-timeline: view(); animation-range: entry 20% cover 55%; } } }
@keyframes draw { from { transform: scaleX(0); } }
.step h3 { font-size: 27px; margin: 12px 0 10px; } .step p { color: var(--muted); }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* case block */
.case { display: grid; grid-template-columns: 1fr 1.55fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.section.case { padding-inline: max(var(--pad), calc((100vw - var(--max)) / 2)); }
.section.case > * { margin-inline: 0; max-width: none; }
.case h2 { margin-bottom: 22px; }
.facts { list-style: none; padding: 0; margin: 24px 0 0; color: var(--on-d); } .facts li { padding: 10px 0; border-top: 1px solid var(--line-d); }
.stage { position: relative; aspect-ratio: 16 / 9.4; border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--line-d); background: var(--ink-2); box-shadow: 0 40px 80px -30px #000; }
.stage-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0; transform: scale(1.04); transition: opacity .6s var(--ease), transform .9s var(--ease); }
.stage-shot.is-tall { object-fit: contain; object-position: center top; padding-top: 14px; }
.stage-shot.on { opacity: 1; transform: none; }
.facts li { color: var(--muted-d); transition: color .3s; position: relative; } .facts li span { display: inline-block; transition: transform .4s var(--ease); } .facts li.lit { color: var(--on-d); } .facts li.lit span { transform: translateX(18px); } .facts li.lit::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 2px; background: var(--red); }
@media (max-width: 860px) { .case { grid-template-columns: 1fr; } .stage { position: sticky; top: 84px; z-index: 3; order: -1; margin-bottom: 32px; box-shadow: 0 -16px 0 var(--char), 0 32px 0 var(--char); } }

/* FAQ */
.faq-list details { border-top: 1px solid var(--line); } .faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 22px 0; font-size: clamp(19px, 2vw, 23px); font-weight: 500; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary i { flex: none; position: relative; width: 16px; height: 16px; }
.faq-list summary i::before, .faq-list summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1.6px; background: currentColor; transition: transform var(--fast) var(--ease); }
.faq-list summary i::after { transform: rotate(90deg); } details[open] summary i::after { transform: none; }
.faq-list p { padding: 0 34px 24px 0; color: var(--muted); max-width: 44em; }

/* inner pages */
.sub-hero { padding: clamp(130px, 18vh, 190px) var(--pad) clamp(40px, 6vw, 80px); }
.sub-hero { padding-inline: max(var(--pad), calc((100vw - var(--max)) / 2)); }
.sub-hero > .lead { max-width: 34em; }
.sub-hero .fit { max-width: 720px; margin-top: 32px; }
.sub-title { font-size: clamp(46px, 7.6vw, 104px); line-height: 1.02; letter-spacing: -.022em; margin-bottom: 26px; }
.js .sub-title { animation: subin var(--slow) var(--ease) both; } @keyframes subin { from { opacity: 0; transform: translateY(26px); } }
.sub-hero.dark { background: var(--ink); }
.gets { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.get { padding: 26px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-l); }
.get h3 { font-size: 24px; margin: 12px 0 8px; } .get .num + h3 { margin-top: 28px; } .get p { color: var(--muted); }
.split { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(28px, 6vw, 80px); align-items: start; }
.section.split { padding-inline: max(var(--pad), calc((100vw - var(--max)) / 2)); }
.section.split > * { margin-inline: 0; max-width: none; } .split h2 { font-size: clamp(30px, 3.8vw, 48px); }
.fit { list-style: none; padding: 0; margin: 0; } .fit li { padding: 18px 0; border-top: 1px solid var(--line); font-size: 20px; } .fit li:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }
.proof { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.section.proof { padding-inline: max(var(--pad), calc((100vw - var(--max)) / 2)); } .section.proof > * { margin-inline: 0; max-width: none; }
.proof h2 { font-size: clamp(28px, 3.2vw, 42px); margin-bottom: 14px; } .proof-shot.is-phone { max-width: 300px; }
.link-go { display: inline-block; margin-top: 16px; color: var(--blue); font-weight: 500; text-underline-offset: 3px; }
@media (max-width: 820px) { .proof { grid-template-columns: 1fr; } }
.next { display: block; padding: clamp(28px, 4vw, 46px); border-radius: var(--r-l); background: var(--char); color: var(--on-d); text-decoration: none; transition: background var(--fast); }
.next:hover { background: var(--blue); } .next .eyebrow { display: block; color: var(--muted-d); margin-bottom: 10px; }
.next-name { font-size: clamp(32px, 5vw, 62px); letter-spacing: -.02em; line-height: 1.05; font-weight: 500; }
.next-name span { display: inline-block; transition: transform var(--fast) var(--ease); } .next:hover .next-name span { transform: translateX(8px); }
.parts { display: grid; gap: clamp(50px, 7vw, 96px); }
.part { display: grid; grid-template-columns: 1fr; gap: 20px; }
.part-copy { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.3fr); gap: 4px 18px; align-items: baseline; } .part-copy h3 { margin: 0; } .part-copy p { font-size: 18px; color: var(--char); }
@media (max-width: 720px) { .part-copy { grid-template-columns: 34px 1fr; } .part-copy p { grid-column: 2; } }
.case-one { border-color: var(--line-d); } .about-shot { margin-top: 28px; }
.part h3 { font-size: clamp(28px, 3vw, 40px); margin: 12px 0 10px; } .part p { color: var(--muted); }
.part-shot picture { display: block; }
.rows { list-style: none; margin-block: 0; padding: 0; border-bottom: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px 18px; align-items: baseline; padding: 26px 0; border-top: 1px solid var(--line); } .row h3 { font-size: clamp(23px, 2.4vw, 30px); } .row p { font-size: 18px; color: var(--char); }
@media (max-width: 720px) { .row { grid-template-columns: 34px 1fr; } .row p { grid-column: 2; } }
.about-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 7vw, 96px); align-items: start; } .about-big { font-size: clamp(25px, 3vw, 38px); line-height: 1.28; letter-spacing: -.01em; }
.about-points > div { padding: 20px 0; border-top: 1px solid var(--line); } .about-points h2 { font-size: 21px; margin-bottom: 6px; } .about-points p { color: var(--muted); }
@media (max-width: 820px) { .about-grid { grid-template-columns: 1fr; } }
.part-shot { display: block; border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 30px 60px -36px rgba(20,22,27,.6); }
.part.is-phone .part-shot { max-width: 300px; }
.section.prose { padding-inline: max(var(--pad), calc((100vw - var(--max)) / 2)); } .section.prose > * { max-width: 44em; margin-inline: 0; }
.prose h2 { font-size: 26px; margin: 34px 0 8px; } .prose h2:first-child { margin-top: 0; } .prose p { color: var(--muted); }

/* the brief */
.brief-hero { padding-bottom: 20px; } .brief-hero .sub-title { font-size: clamp(36px, 4.4vw, 58px); margin-bottom: 12px; } .brief-hero .sub-title em { font: inherit; } .brief-hero .fit { margin-top: 28px; }
.brief-wrap { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; padding-top: 12px; }
.section.brief-wrap { padding-inline: max(var(--pad), calc((100vw - var(--max)) / 2)); }
.section.brief-wrap > * { margin-inline: 0; max-width: none; }
.brief { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-l); padding: clamp(20px, 3.4vw, 38px); }
.hp { position: absolute; left: -9999px; }
.brief-steps { display: none; list-style: none; padding: 0; margin: 0 0 26px; gap: 6px; font-size: 13.5px; color: var(--muted); }
.stepped .brief-steps { display: grid; grid-template-columns: repeat(4, 1fr); }
.brief-steps li { padding-top: 9px; border-top: 3px solid var(--line); transition: border-color var(--fast), color var(--fast); } .brief-steps li.on { border-color: var(--blue); color: var(--char); font-weight: 500; }
.brief-step { border: 0; padding: 0; margin: 0 0 30px; } .stepped .brief-step { animation: stepin .4s var(--ease) both; }
@keyframes stepin { from { opacity: 0; transform: translateX(12px); } }
.brief-step legend { font-size: clamp(25px, 3vw, 34px); letter-spacing: -.015em; font-weight: 500; line-height: 1.15; margin-bottom: 18px; padding: 0; }
.brief-step legend small { display: block; font-size: 15px; letter-spacing: 0; font-weight: 400; color: var(--muted); margin-top: 5px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: flex; align-items: center; min-height: 46px; padding: 0 17px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); transition: background var(--fast), color var(--fast), border-color var(--fast), transform var(--fast) var(--ease); }
.chip:hover span { border-color: #9aa6b8; } .chip input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; } .chip input:active + span { transform: scale(.97); }
.chip input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.field { display: block; margin-top: 18px; font-weight: 500; font-size: 15px; } .field small { font-weight: 400; color: var(--muted); margin-left: 5px; font-size: 13.5px; }
.field input, .field textarea { display: block; width: 100%; margin-top: 7px; min-height: 52px; padding: 13px 15px; font: 400 16px var(--sans); color: var(--char); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-m); transition: border-color var(--fast), background var(--fast); }
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 3px rgba(16,84,161,.14); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; } @media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.brief-nav { display: flex; gap: 10px; justify-content: flex-end; }
.brief-sum { position: sticky; top: 92px; padding: 24px; border-radius: var(--r-l); background: var(--char); color: var(--on-d); } .brief-sum .eyebrow { color: var(--muted-d); margin-bottom: 12px; }
.sum-text { font: italic 400 24px/1.3 var(--serif); }
@media (max-width: 900px) { .brief-wrap { grid-template-columns: 1fr; } .brief-sum { position: sticky; top: 72px; order: -1; z-index: 5; padding: 12px 16px; border-radius: var(--r-m); } .brief-sum .eyebrow { margin-bottom: 2px; font-size: 12px; } .sum-text { font-size: 17px; max-height: 3.9em; overflow: hidden; } }

/* footer */
.foot { background: var(--ink); color: var(--muted-d); padding: clamp(60px, 8vw, 110px) var(--pad) 30px; }
.foot > * { max-width: var(--max); margin-inline: auto; }
.foot-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; padding-bottom: clamp(44px, 6vw, 72px); border-bottom: 1px solid var(--line-d); }
.serif { font: italic 400 clamp(42px, 7vw, 92px)/1 var(--serif); color: var(--on-d); letter-spacing: -.01em; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding: 44px 0; font-size: 15px; }
.foot-grid .mark { color: var(--on-d); margin-bottom: 14px; }
.foot-grid h2 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; margin-bottom: 12px; color: var(--muted-d); }
.foot-grid div > a:not(.mark) { display: block; padding: 5px 0; color: var(--on-d); text-decoration: none; } .foot-grid div > a:not(.mark):hover { text-decoration: underline; text-underline-offset: 3px; }
.foot-note { font-size: 13.5px; padding-top: 20px; border-top: 1px solid var(--line-d); }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } }

/* motion.js */
.m-progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 40; background: var(--red); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.m-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; } .m-w > span { display: inline-block; }
.m-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.m-word { display: inline-block; white-space: nowrap; } .m-ch { display: inline-block; }
.svc-row:hover .svc-go { opacity: 0; }
.svc-go { transition: transform var(--fast) var(--ease), opacity var(--fast); }
.svc-float { position: fixed; left: 0; top: 0; z-index: 15; width: 440px; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; pointer-events: none; box-shadow: 0 30px 70px -20px rgba(20,22,27,.55); background: var(--ink); }
.svc-float img { width: 100%; height: 100%; object-fit: cover; object-position: top left; } .svc-float.tall { width: 190px; aspect-ratio: 3 / 5; }
.m-steps::after { display: none; } .m-line { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--blue); transform-origin: left; transform: scaleX(0); }
.m-steps .step .num, .m-steps .step h3 { transition: color .35s; } .m-steps .step.lit .num { color: var(--red); } .m-steps .step:not(.lit) h3 { color: var(--muted); }
.m-steps .step { transition: transform .6s var(--ease); } .m-steps .step:not(.lit) { transform: translateY(8px) !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } @view-transition { navigation: none; } }

/* real client screens sit quieter than the brand: less neon, a clean end on phones, no hard cut */
.tour-pane img, .stage-shot, .part-shot img, .svc-float img { filter: saturate(.62) brightness(1.04); }
@media (max-width: 640px) { .tour-pane picture img, .part-shot picture img { -webkit-mask-image: linear-gradient(#000 84%, transparent); mask-image: linear-gradient(#000 84%, transparent); } }

.stage-shot.is-card { object-fit: cover; object-position: top left; background: var(--ink-2); }
.stage-shot.is-tall { background: var(--ink-2); }
.svc-row { transition: padding-left .35s var(--ease), color var(--fast), opacity var(--fast); }
@media (hover: hover) and (pointer: fine) { .svc:hover .svc-row:not(:hover) { opacity: .38; } }

#pane-tryon img, #pane-site img, .stage-shot[src*="phones"] { filter: none; }

/* the brand's blue carries the how-we-work section, so the page has a colour moment between the white and the charcoal */
.blue { background: var(--blue); color: #fff; }
.blue h2, .blue h3, .blue .num { color: #fff; } .blue .eyebrow, .blue p { color: #dce7f6; } .blue .eyebrow::before { background: #fff; }
.blue .step { border-color: rgba(255,255,255,.28); }
.svc-row .num { color: #c41f3a; }

.m-line { transform-origin: left; }
.blue .steps::before { background: rgba(255,255,255,.28); } .blue .steps::after, .blue .m-line { background: #fff; }
.blue .m-steps .step .num, .blue .m-steps .step h3, .blue .m-steps .step.lit .num { color: #fff; }
.blue .m-steps .step { transition: opacity .35s; } .blue .m-steps .step:not(.lit) { opacity: .55; transform: none !important; } .blue .m-steps .step:not(.lit) h3 { color: #fff; }

/* case study rows: copy beside one readable detail, sides alternating */
.part { grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.part.flip .part-copy { order: 2; } .part.flip { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
.part-copy { display: block; } .part-copy h3 { margin: 12px 0 10px; } .part-copy p { color: var(--char); }
.part-notes { list-style: none; margin: 18px 0 0; padding: 0; color: var(--char); font-size: 16px; } .part-notes li { padding: 10px 0; border-top: 1px solid var(--line); }
.part.is-small .part-shot { max-width: 420px; justify-self: center; }
@media (max-width: 820px) { .part, .part.flip { grid-template-columns: 1fr; } .part.flip .part-copy { order: 0; } }
.tour-pane#pane-overview img, #pane-overview img { filter: none; object-fit: cover; object-position: center; }
.part-shot img[src*="tryon"], .part-shot img[src*="site"], .part-shot img[src*="phones"], .svc-float img[src*="overview"] { filter: none; }
body, p, li { letter-spacing: 0; }

.about-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 40px 0 0; max-width: 980px; }
.about-facts div { border-top: 2px solid var(--blue); padding-top: 14px; } .about-facts dt { font-size: 13.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; } .about-facts dd { margin: 0; font-size: 19px; line-height: 1.35; }
@media (max-width: 720px) { .about-facts { grid-template-columns: 1fr; } }
.stage-shot[src*="card-money"] { object-fit: contain; object-position: center; padding: 22px; filter: none; }
.stage-shot[src*="card-order-top"] { object-fit: contain; object-position: center; padding: 22px; filter: none; }

.part.is-wide { grid-template-columns: 1fr; } .part.is-wide .part-copy { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.4fr); gap: 4px 18px; align-items: start; } .part.is-wide .part-copy h3 { margin: 0; } .part.is-wide .part-notes { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
@media (max-width: 820px) { .part.is-wide .part-copy { display: block; } .part.is-wide .part-notes { margin-top: 18px; } }
.stage-shot[src*="stage-"] { object-fit: cover; object-position: center; padding: 0; filter: none; }
.svc-float { width: 340px; }

.part.is-wide .part-copy { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; } .part.is-wide .part-copy .num { grid-column: 1; grid-row: 1; } .part.is-wide .part-copy h3 { grid-column: 2; grid-row: 1; } .part.is-wide .part-copy p { grid-column: 2; grid-row: 2; } .part.is-wide .part-notes { grid-column: 3; grid-row: 1 / span 2; }
@media (max-width: 640px) { .part-shot picture img { object-fit: contain; height: auto; } }

/* one order, enquiry to payment, drawn in the page: sized from the stage so it reads the same on a phone */
.stage { container-type: inline-size; background: radial-gradient(80% 110% at 50% 0, #1a4f8f, var(--ink-2) 75%); }
.stage-shot:has(.st-card) { display: grid; place-items: center; padding: 3cqw; filter: none; object-fit: unset; }
.st-card { width: min(84cqw, 660px); background: #fff; color: var(--char); border-radius: 2.4cqw; padding: 3.6cqw 4cqw; font-size: max(13px, 2.3cqw); line-height: 1.35; box-shadow: 0 3cqw 7cqw -3cqw #0009; transform: translateY(2cqw); transition: transform .6s var(--ease); }
.stage-shot.on .st-card { transform: none; }
.st-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .st-top strong { font-size: 1.5em; font-weight: 600; letter-spacing: -.01em; }
.st-what { margin: .3em 0 1em; color: var(--muted); }
.st-pill { font-size: .85em; font-weight: 600; padding: .3em .8em; border-radius: 99px; white-space: nowrap; } .st-pill.blue { background: #e4edf8; color: var(--blue); } .st-pill.green { background: #dff3e7; color: #17663a; }
.st-row { display: flex; justify-content: space-between; gap: 16px; padding: .6em 0; border-top: 1px solid var(--line); } .st-row span { color: var(--muted); } .st-row b { font-weight: 600; text-align: right; }
.st-btn { display: inline-block; margin-top: 1em; padding: .6em 1.1em; border-radius: 99px; background: var(--blue); color: #fff; font-weight: 600; }
.st-track { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: .5em; margin: 0; padding: 0; color: var(--muted); font-size: .92em; } .st-track li { padding-top: .7em; border-top: .35em solid var(--line); transition: border-color .5s var(--ease) .25s, color .5s var(--ease) .25s; }
.stage-shot.on .st-track li.done { border-color: var(--blue); color: var(--char); font-weight: 600; }
.st-money { height: .6em; border-radius: 99px; background: var(--bg-2); overflow: hidden; margin-bottom: .6em; } .st-money i { display: block; height: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease) .2s; } .stage-shot.on .st-money i { transform: none; }
@media (prefers-reduced-motion: reduce) { .st-card, .st-money i, .st-track li { transition: none; } }
.case-hero { margin-top: 44px; border-color: var(--line-d); max-width: 1100px; }
#pane-tryon img { object-position: center; }

@media (max-width: 860px) { .stage { aspect-ratio: 1 / 1; } .st-card { width: 90cqw; padding: 5cqw; font-size: 15px; } }
.st-card { width: min(88cqw, 720px); }
.proof-shot img[src*="crop-desk"] { aspect-ratio: 16 / 8.2; object-fit: cover; object-position: top left; }

.btn, .svc-tag, .top a, .st-btn { letter-spacing: 0; }
@media (max-width: 640px) { .tour-pane picture img { object-fit: contain; -webkit-mask-image: none; mask-image: none; } .part-shot picture img { -webkit-mask-image: none; mask-image: none; } }
@media (hover: hover) and (pointer: fine) { .svc-row[data-shot] .svc-tag { transition: opacity .2s; } .svc-row[data-shot]:hover .svc-tag { opacity: 0; } }

.about-who { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: end; margin-top: 44px; }
.about-face { margin: 0; } .about-face img { display: block; width: 100%; height: auto; border-radius: var(--r-m); } .about-face figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); }
.about-who .about-facts { margin: 0; grid-template-columns: 1fr; gap: 16px; }
@media (max-width: 720px) { .about-who { grid-template-columns: 1fr; } .about-face { max-width: 280px; } }

.hero { padding-top: clamp(92px, 11vh, 112px); }
.hero-title { font-size: clamp(40px, 5vw, 70px); margin-bottom: 16px; }
.hero-actions { margin-top: 20px; }
@media (max-width: 640px) { .tour-pane picture img { object-position: center top; } .tour-pane picture { display: flex; justify-content: center; flex: 1; min-height: 0; } }

@media (max-width: 640px) { .tour-pane picture img { width: 100%; object-fit: cover; } }
.about-facts div { border-top: 1px solid var(--line); }

.part-card { container-type: inline-size; display: grid; place-items: center; padding: clamp(20px, 4vw, 44px); border-radius: var(--r-m); background: radial-gradient(80% 110% at 50% 0, #1a4f8f, var(--ink-2) 75%); }
.part-card .st-card { transform: none; width: 100%; max-width: 620px; font-size: 16px; padding: 24px; border-radius: 16px; }
.part-card .st-track li.done { border-color: var(--blue); color: var(--char); font-weight: 600; } .part-card .st-money i { transform: none; }
body, p, li, .btn, .top a, .svc-tag, .eyebrow + p, figcaption, dd, dt, .st-card { letter-spacing: .005em; }
#pane-orders img { object-fit: cover; object-position: center; filter: none; }

.stage-note { font-size: 14px; color: var(--muted-d); margin: 16px 0 0; }
.case-copy + .stage-note { position: absolute; }
/* phones: heading first, then each step of the order in turn, no pin */
@media (max-width: 860px) {
  .stage { position: static; order: 0; aspect-ratio: auto; margin: 0; box-shadow: none; background: none; border: 0; overflow: visible; display: grid; gap: 14px; }
  .stage-shot, .stage-shot:has(.st-card) { position: static; opacity: 1; transform: none; padding: 0; height: auto; }
  .st-card { width: 100%; transform: none; font-size: 16px; padding: 20px; border-radius: 16px; }
  .st-track li.done { border-color: var(--blue); color: var(--char); font-weight: 600; } .st-money i { transform: none; }
  .case .facts { display: none; } .case-copy + .stage-note { position: static; }
}

.case .case-copy { grid-column: 1; grid-row: 1 / span 2; } .case .stage { grid-column: 2; grid-row: 1; } .case .stage-note { position: static; grid-column: 2; grid-row: 2; margin: 0; }
@media (max-width: 860px) { .case .case-copy, .case .stage, .case .stage-note { grid-column: 1; grid-row: auto; } }
@media (min-width: 861px) { .case { grid-template-rows: auto auto; align-content: center; row-gap: 14px; } .case .stage { align-self: end; } .case .stage-note { align-self: start; } }

/* screens arrive sharp and bright; only a short fade */
@keyframes fadein { from { opacity: .001; } to { opacity: 1; } }
.tour-pane { animation-duration: .3s; }
.tour-pane img { filter: none; }
.proof-shot img[src*="stage-order"], .about-shot img { filter: none; }
@media (max-width: 640px) { .tour-pane { display: block; } .tour-pane picture { display: block; height: 100%; } .tour-pane picture img { height: 100%; } }
body.page-thanks, html { background: var(--char); }
main { background: var(--bg); }

/* first screen: words on the left, the whole product on the right, nothing cut by the fold */
@media (min-width: 1100px) {
  .hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 4vw, 64px); align-items: center; align-content: center; min-height: min(100vh, 900px); padding: 96px max(var(--pad), calc((100vw - var(--max)) / 2)) 40px; }
  .hero-copy { grid-column: 1; grid-row: 1 / span 2; max-width: none; margin: 0; }
  .hero .tour { grid-column: 2; grid-row: 1; max-width: none; margin: 0; }
  .hero-note { grid-column: 2; grid-row: 2; max-width: none; margin: 12px 0 0; }
  .hero-title { font-size: clamp(40px, 4vw, 60px); }
  .hero .lead { font-size: 18px; }
  .tour-panes { aspect-ratio: 16 / 10; }
  .tour-tabs button { padding: 0 12px; font-size: 14px; }
}

.about-who { display: block; } .about-who .about-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } @media (max-width: 720px) { .about-who .about-facts { grid-template-columns: 1fr; } }

.tour-pane.on:first-child { animation: none; }
#pane-orders img { object-position: top left; }
@media (max-width: 640px) { .tour-pane picture img { object-position: top center; } }

.tour-pane { animation-duration: .15s; }
@media (max-width: 640px) { .tour-panes { aspect-ratio: 5 / 4; } }
.st-card { min-height: 21em; }
.part-card .st-card { min-height: 0; }
@media (max-width: 860px) { .st-card { min-height: 0; } }