@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-var.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #070707;
  --bg-2: #0c0c0c;
  --surface: #111111;
  --surface-2: #171717;
  --surface-3: #1e1e1e;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --line-3: rgba(255, 255, 255, 0.24);
  --text: #f3f3f3;
  --text-2: #adadad;
  --text-3: #939393;
  --accent: #ffffff;
  --accent-2: #dadada;
  --accent-ink: #070707;
  --accent-soft: rgba(255, 255, 255, 0.1);
  --danger: #ff7a66;
  --warn: #ffbe5c;
  --num-dim: #474747;
  --num-lit: #ffffff;

  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;

  --font: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --max: 1320px;
  --gutter: clamp(20px, 4vw, 48px);
  --nav-h: 64px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
  scrollbar-color: #303030 var(--bg);
  background: var(--bg);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  caret-color: var(--accent);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body::before {
  content: '';
  position: fixed; inset: 0; z-index: 100;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--accent); color: var(--accent-ink); }

img, svg { display: block; max-width: 100%; }
svg { flex: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }

.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 20px; top: -100px; z-index: 200; padding: 12px 18px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.skip:focus { top: 20px; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
/* Phones with a notch or a rounded edge: the gutter grows to clear it, and stays as it is everywhere else. */
@media (max-width: 760px) {
  .wrap, .nav { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
}

.accent { color: var(--accent); }

/* ---------- Buttons, tags, links ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  font: inherit; font-size: 0.9688rem; font-weight: 650; font-stretch: 104%; line-height: 1;
  letter-spacing: -0.005em; white-space: nowrap;
  border: 1px solid transparent; border-radius: 999px;
  cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn svg { width: 18px; height: 18px; }
.btn .arrow { transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn--lg { min-height: 56px; padding: 0 28px; font-size: 1.0313rem; }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 0.9063rem; }

.btn--accent {
  background: var(--accent); color: var(--accent-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 24px -12px rgba(0, 0, 0, .7);
}
.btn--accent:hover { background: var(--accent-2); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 16px 32px -14px rgba(0, 0, 0, .8); }
.btn--ghost { background: rgba(255, 255, 255, .04); color: var(--text); border-color: var(--line-2); }
.btn--ghost:hover { background: rgba(255, 255, 255, .08); border-color: var(--line-3); }
.btn[disabled], .btn[aria-busy='true'] { opacity: .65; cursor: progress; transform: none; }

.tag {
  display: inline-flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, .03);
  font-size: 0.8125rem; font-weight: 550; color: var(--text-2); white-space: nowrap;
}
.tag--live { color: var(--accent); border-color: rgba(255, 255, 255, .35); background: var(--accent-soft); }
.tag--new { color: var(--bg); background: var(--text); border-color: var(--text); font-weight: 700; vertical-align: middle; margin-left: 4px; }
.livedot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--accent); }



/* ---------- Navigation ---------- */

.nav { position: fixed; top: 14px; left: 0; right: 0; z-index: 80; padding-inline: var(--gutter); pointer-events: none; }
.nav__inner {
  pointer-events: auto;
  width: fit-content; max-width: 100%; margin: 0 auto; height: var(--nav-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 22px;
  padding: 0 8px;
  border-radius: 999px;
  /* Solid, not glass: content scrolling underneath must never show through the mark and links. */
  background: #0c0c0c;
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 16px 40px -20px rgba(0, 0, 0, .7);
  transition: border-color .3s var(--ease);
}
.nav.is-scrolled .nav__inner { border-color: var(--line-2); }
.brand { grid-column: 2; grid-row: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; transition: transform .3s var(--ease); }
.brand:hover { transform: scale(1.06); }
.brand img { width: 40px; height: 40px; }
.nav__links { display: flex; gap: 4px; list-style: none; }
.nav__links--start { grid-column: 1; grid-row: 1; justify-self: end; }
.nav__end { grid-column: 3; grid-row: 1; justify-self: start; display: flex; align-items: center; gap: 8px; }
.nav__links a { display: block; padding: 8px 14px; border-radius: 999px; font-size: 0.9375rem; font-weight: 520; color: var(--text-2); transition: color .2s, background-color .2s; }
.nav__links a:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.nav__links a[aria-current='true'] { color: var(--text); background: rgba(255, 255, 255, .08); }
.iconbtn {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); color: var(--text);
  cursor: pointer; transition: background-color .2s, border-color .2s, color .2s;
}
.iconbtn:hover { background: rgba(255, 255, 255, .08); border-color: var(--line-3); }
.iconbtn svg { width: 20px; height: 20px; }
.iconbtn--wa:hover { color: var(--accent); }
/* The light and dark switch: the sun shows on dark (tap for light), the moon on light, turning as they trade places. */
.theme-btn svg { grid-area: 1 / 1; transition: opacity .3s var(--ease), transform .55s var(--ease); }
.theme-btn__moon { opacity: 0; transform: rotate(-70deg) scale(.5); }
[data-theme="light"] .theme-btn__sun { opacity: 0; transform: rotate(70deg) scale(.5); }
[data-theme="light"] .theme-btn__moon { opacity: 1; transform: none; }
.menu-btn { display: none; grid-column: 1; grid-row: 1; justify-self: start; }

.mobile-menu { display: none; }

@media (max-width: 1060px) {
  .nav__inner { width: auto; column-gap: 12px; }
  .nav__end { justify-self: end; }
  .nav__links { display: none; }
  .menu-btn { display: grid; }
  .mobile-menu {
    position: fixed; inset: 0; z-index: 79;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: calc(var(--nav-h) + 48px) max(var(--gutter), env(safe-area-inset-left)) max(32px, env(safe-area-inset-bottom));
    background: rgba(7, 7, 7, .96);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    opacity: 0; visibility: hidden;
    transition: opacity .3s var(--ease), visibility 0s .3s;
  }
  .mobile-menu.is-open { opacity: 1; visibility: visible; transition: opacity .3s var(--ease); }
  .mobile-menu ul { list-style: none; display: grid; gap: 4px; }
  .mobile-menu li a {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 12px 0; border-bottom: 1px solid var(--line);
    font-size: clamp(1.75rem, 7vw, 2.5rem); font-weight: 720; font-stretch: 110%; letter-spacing: -0.03em; line-height: 1.1;
    transform: translateY(12px); opacity: 0; transition: transform .5s var(--ease), opacity .5s var(--ease);
  }
  .mobile-menu.is-open li a { transform: none; opacity: 1; }
  .mobile-menu.is-open li:nth-child(2) a { transition-delay: .03s; }
  .mobile-menu.is-open li:nth-child(3) a { transition-delay: .06s; }
  .mobile-menu.is-open li:nth-child(4) a { transition-delay: .09s; }
  .mobile-menu.is-open li:nth-child(5) a { transition-delay: .12s; }
  .mobile-menu.is-open li:nth-child(6) a { transition-delay: .15s; }
  .mobile-menu li a svg { width: 22px; height: 22px; color: var(--text-3); }
  .mobile-menu__actions { display: grid; gap: 10px; }
}
@media (max-width: 560px) {
  .nav { top: 10px; }
  .nav__inner { height: 58px; padding: 0 6px; }
  .nav__end .btn { display: none; }
}

/* ---------- Sections ---------- */

.section { position: relative; padding-block: clamp(72px, 8.5vw, 124px); }
.section--tight { padding-block: clamp(56px, 6vw, 88px); }
.section__head {
  display: grid; justify-items: center; gap: 20px; text-align: center;
  max-width: 920px; margin: 0 auto clamp(48px, 6vw, 88px);
}
.section__title {
  font-size: clamp(2.25rem, 1.05rem + 3.5vw, 4.25rem);
  line-height: 1;
  font-weight: 740; font-stretch: 112%;
  letter-spacing: -0.035em;
}
.section__title--xl { font-size: clamp(2.5rem, 1rem + 4.4vw, 5.25rem); }
.section__title--sm { font-size: clamp(2rem, 1.1rem + 2.4vw, 3.25rem); }
.section__lede { color: var(--text-2); font-size: clamp(1.125rem, 1rem + 0.35vw, 1.3125rem); line-height: 1.55; max-width: 40rem; text-wrap: balance; }
.section__head--center { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.section__head--center .section__title { max-width: 18ch; }
.section__head--center .section__lede { max-width: 40rem; }


/* ---------- Hero ---------- */

/* The whole pitch fits the first screen: the promise, the four services with their facts, and the ask. */
.hero {
  --card-w: min(1160px, 72vw);
  --card-h: clamp(290px, calc(100svh - 420px), 430px);
  position: relative; overflow-x: clip;
  display: grid; align-content: center;
  min-height: 100vh; min-height: 100svh;
  padding: calc(var(--nav-h) + 34px) 0 clamp(22px, 4vh, 44px);
}
.hero__intro { display: grid; justify-items: center; text-align: center; }
.hero__title {
  font-size: clamp(2.25rem, 1rem + 3.1vw, 4.25rem);
  line-height: 1;
  font-weight: 760; font-stretch: 112%;
  letter-spacing: -0.04em;
}
.hero__lede { margin-top: 14px; max-width: 62rem; color: var(--text-2); font-size: clamp(1rem, 0.94rem + 0.3vw, 1.25rem); line-height: 1.5; text-wrap: balance; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 32px; margin-top: clamp(16px, 2.8vh, 32px); }

/* ---------- Services deck ---------- */

/* Every slide shares one grid cell, so the deck is as tall as its tallest card; data-pos places each one. */
.deck { position: relative; display: grid; grid-template-areas: "view" "controls"; row-gap: clamp(12px, 2.2vh, 24px); margin-top: clamp(20px, 3.4vh, 42px); }
.deck__viewport { grid-area: view; }
.deck__controls { grid-area: controls; }
.deck__toggle { grid-area: controls; justify-self: center; align-self: center; z-index: 1; translate: -84px 0; visibility: hidden; }
.deck.is-ready .deck__toggle { visibility: visible; }
html:not(.js) .deck__toggle { display: none; }
.deck__viewport { position: relative; touch-action: pan-y; }
.deck__track {
  list-style: none; display: grid; justify-items: center;
  padding-block: 30px 60px; margin-block: -30px -60px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
}
.deck__slide {
  grid-area: 1 / 1; width: var(--card-w); z-index: var(--z, 1);
  transform: translate3d(var(--x, 0px), 0, 0) scale(var(--s, 1)); opacity: var(--o, 1);
  transition: transform .95s var(--ease), opacity .7s var(--ease);
}
.deck__slide[data-pos="0"] { --z: 3; }
.deck__slide[data-pos="1"] { --x: calc(var(--card-w) * .83); --s: .84; --o: .34; --z: 2; }
.deck__slide[data-pos="-1"] { --x: calc(var(--card-w) * -.83); --s: .84; --o: .34; --z: 2; }
.deck__slide[data-pos="2"] { --x: calc(var(--card-w) * 1.45); --s: .7; --o: 0; }
.deck__slide[data-pos="-2"] { --x: calc(var(--card-w) * -1.45); --s: .7; --o: 0; }
.deck__slide:not([data-pos="0"]) { cursor: pointer; }
/* Out of focus, like a lens: the neighbours read as more cards, not as words to parse. */
.deck__slide:not([data-pos="0"]) .svc-card { filter: blur(3px); }
.deck__slide:not([data-pos="0"]) .svc-card__body { opacity: .22; }
.svc-card__body { transition: opacity .7s var(--ease); }
@media (min-width: 1600px) {
  .deck__slide:not([data-pos="0"]) .svc-card { filter: blur(5px); }
  .deck__slide:not([data-pos="0"]) .svc-card__body { opacity: .08; }
}
.deck__slide .svc-card { transition: filter .8s var(--ease); }
.deck__slide:not([data-pos="0"]):hover { --o: .5; }
.deck__slide.is-jump { transition: none; }

.svc-card {
  position: relative; height: var(--card-h); container-type: size;
  display: grid; grid-template-columns: calc(var(--card-h) - 28px) minmax(0, 1fr);
  padding: 14px; border-radius: 34px; text-align: left;
  background: linear-gradient(180deg, #161616, #0e0e0e);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .07), 0 44px 80px -40px rgba(0, 0, 0, .95);
}

/* The object sits in a small photo studio: a lit sweep, a floor shadow, and a slow float while its card leads. */
.art { position: relative; overflow: hidden; border-radius: 24px; background: radial-gradient(95% 80% at 50% 12%, #333333 0%, #1c1c1c 46%, #0b0b0b 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .1); }
.art::after { content: ''; position: absolute; left: 24%; right: 24%; bottom: 9%; height: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0)); }
.art__obj { position: absolute; inset: 3%; z-index: 1; translate: calc(var(--px, 0) * 12px) calc(var(--py, 0) * 9px); transition: translate .8s var(--ease); }
.art__obj img { width: 100%; height: 100%; object-fit: contain; }
.art__shine {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: linear-gradient(108deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, 0) 60%) 130% 0 / 260% 100% no-repeat;
  -webkit-mask: var(--matte) center / contain no-repeat; mask: var(--matte) center / contain no-repeat;
  mix-blend-mode: plus-lighter;
}
.art--panes { --matte: url('hero/obj-panes.webp'); }
.art--stamp { --matte: url('hero/obj-stamp.webp'); }
.art--stack { --matte: url('hero/obj-stack.webp'); }
.art--app { --matte: url('hero/obj-app.webp'); }
.can-move .deck__slide[data-pos="0"] .art__obj img { animation: art-float 7s ease-in-out infinite; }
.can-move .deck__slide[data-pos="0"] .art::after { animation: art-shadow 7s ease-in-out infinite; }
.can-move .deck__slide.is-glint .art__shine { animation: art-shine 1.7s .3s cubic-bezier(.4, 0, .2, 1) both; }
.can-move .deck.is-still .deck__slide .art__obj img, .can-move .deck.is-still .deck__slide .art::after { animation-play-state: paused; }
@keyframes art-float { 50% { transform: translateY(-2.4%) rotate(-1.2deg); } }
@keyframes art-shadow { 50% { transform: scaleX(.84); opacity: .65; } }
@keyframes art-shine { from { opacity: 1; background-position: 130% 0; } to { opacity: 1; background-position: -30% 0; } }

.svc-card__body { display: flex; flex-direction: column; min-width: 0; padding: clamp(16px, 2vw, 30px) clamp(16px, 2.2vw, 36px) 6px clamp(22px, 2.8vw, 44px); }
.svc-card__title { max-width: 21ch; font-size: clamp(1.5rem, 0.7rem + 1.9vw, 2.625rem); line-height: 1.05; font-weight: 720; font-stretch: 110%; letter-spacing: -0.032em; }
.svc-card__text { margin-top: 12px; max-width: 44ch; color: var(--text-2); font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem); line-height: 1.55; }
.svc-card__link { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding-block: 4px; font-size: 0.9375rem; font-weight: 650; color: var(--text); }
.svc-card__go { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-3); transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); }
.svc-card__go svg { width: 14px; height: 14px; }
.svc-card__link:hover .svc-card__go, .svc-card__link:focus-visible .svc-card__go { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); transform: translateX(3px); }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: auto 0 0; padding-top: 16px; }
.stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; min-width: 0; }
.stats dd { margin: 0; font-size: clamp(1.75rem, 0.8rem + 2vw, 3rem); line-height: 1; font-weight: 720; font-stretch: 108%; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats dd small { margin-left: .06em; font-size: max(.52em, 0.8125rem); font-weight: 650; letter-spacing: -0.01em; color: var(--text-2); }
.stats dt { font-size: 0.8125rem; line-height: 1.3; color: var(--text-3); }

/* When a card takes the lead, its words and figures arrive in order. */
.can-move .deck__slide.is-entering .svc-card__body > * { animation: card-rise .85s var(--ease) both; }
.can-move .deck__slide.is-entering .svc-card__text { animation-delay: .06s; }
.can-move .deck__slide.is-entering .svc-card__link { animation-delay: .12s; }
.can-move .deck__slide.is-entering .stats { animation: none; }
.can-move .deck__slide.is-entering .stats div { animation: card-rise .85s var(--ease) both; }
.can-move .deck__slide.is-entering .stats div:nth-child(1) { animation-delay: .16s; }
.can-move .deck__slide.is-entering .stats div:nth-child(2) { animation-delay: .22s; }
.can-move .deck__slide.is-entering .stats div:nth-child(3) { animation-delay: .28s; }
@keyframes card-rise { from { opacity: 0; transform: translateY(14px); } }

@container (max-height: 340px) { .svc-card__text { display: none; } }

.deck__arrow {
  position: absolute; top: 50%; z-index: 5;
  width: 48px; height: 48px; margin-top: -24px;
  display: grid; place-items: center; padding: 0;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; background: #141414; color: var(--text);
  cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 14px 30px -12px rgba(0, 0, 0, .85);
  transition: transform .3s var(--ease), background-color .2s;
}
.deck__arrow[hidden] { display: none; }
.deck__arrow svg { width: 20px; height: 20px; }
.deck__arrow:hover { transform: scale(1.06); background: #202020; border-color: rgba(255, 255, 255, .32); }
.deck__arrow:active { transform: scale(.96); }
.deck__arrow--prev { left: calc(50% - var(--card-w) / 2 - 64px); }
.deck__arrow--prev svg { transform: rotate(180deg); }
.deck__arrow--next { right: calc(50% - var(--card-w) / 2 - 64px); }

/* The row keeps its space from the first paint (no shift when the script arrives) and shows once the deck is live. */
.deck__controls { display: flex; justify-content: center; align-items: center; gap: 12px; min-height: 44px; visibility: hidden; }
.deck.is-ready .deck__controls { visibility: visible; }
html:not(.js) .deck__controls { display: none; }
.deck__dots { display: flex; align-items: center; }
/* Each dot is a 30px pill clipped down to a 6px dot; the current one opens to full length and fills as its card plays. */
.deck__dot { position: relative; display: grid; place-items: center; width: 26px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; }
/* A 26x32 dot is below the size a thumb can reliably hit, so it carries a
   44px touch area without the dots themselves moving apart. */
.deck__dot::after { content: ''; position: absolute; inset: -6px -7px; }
.deck__dot i { position: relative; width: 30px; height: 6px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .5); clip-path: inset(0 12px round 99px); transition: clip-path .5s var(--ease), background-color .3s; }
.deck__dot:hover i { background: rgba(255, 255, 255, .8); }
.deck__dot[aria-current="true"] i { clip-path: inset(0 0 round 99px); background: rgba(255, 255, 255, .2); }
.deck__dot i::after { content: ''; position: absolute; inset: 0; background: var(--accent); opacity: 0; transform-origin: 0 50%; transform: scaleX(var(--p, 1)); }
.deck__dot[aria-current="true"] i::after { opacity: 1; }
.deck__dots { padding-inline: 6px; }

/* Short laptop screens: tighten the stack so the ask still lands above the fold. */
@media (min-width: 961px) and (max-height: 780px) {
  .hero { --card-h: clamp(240px, calc(100svh - 340px), 380px); padding-top: calc(var(--nav-h) + 24px); padding-bottom: 16px; }
  .hero__title { font-size: clamp(2rem, 0.8rem + 2.6vw, 3.5rem); }
  .hero__lede { margin-top: 8px; font-size: 1rem; }
  .deck { margin-top: 16px; }
  .deck { row-gap: 8px; }
  .hero__actions { margin-top: 10px; }
  .hero__actions .btn--lg { min-height: 50px; }
}

@media (min-width: 961px) and (max-width: 1140px) {
  .hero { --card-w: 82vw; }
  .deck__slide[data-pos="1"] { --x: calc(var(--card-w) * .9); }
  .deck__slide[data-pos="-1"] { --x: calc(var(--card-w) * -.9); }
  .deck__arrow--prev { left: calc(50% - var(--card-w) / 2 - 26px); }
  .deck__arrow--next { right: calc(50% - var(--card-w) / 2 - 26px); }
}

/* Tablets and phones: the card stands up, picture over words, and the arrows join the dots. */
@media (max-width: 960px) {
  .hero { --card-w: min(600px, calc(100vw - 2 * var(--gutter) - 56px)); }
  .deck__viewport { position: static; }
  .deck__track { -webkit-mask-image: none; mask-image: none; }
  .deck__slide[data-pos="1"] { --x: calc(var(--card-w) * .95); --s: .9; --o: .45; }
  .deck__slide[data-pos="-1"] { --x: calc(var(--card-w) * -.95); --s: .9; --o: .45; }
  .svc-card { height: auto; container-type: inline-size; grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding: 10px; border-radius: 28px; }
  .art { aspect-ratio: 2 / 1; border-radius: 20px; }
  .art__obj { inset: -10% auto; left: 50%; aspect-ratio: 1; translate: -50% 0; }
  .svc-card__body { padding: 18px 12px 10px; }
  .svc-card__title { max-width: none; font-size: clamp(1.3125rem, 1rem + 1.2vw, 1.75rem); }
  .stats { padding-top: 18px; }
  .stats dd { font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem); }
  .deck__arrow { top: auto; bottom: 0; margin-top: 0; width: 44px; height: 44px; box-shadow: none; }
  .deck__arrow:hover { transform: none; }
  .deck__arrow--prev { left: calc(50% - var(--card-w) / 2); }
  .deck__arrow--next { right: calc(50% - var(--card-w) / 2); }
}
@media (max-width: 560px) {
  .hero { --card-w: calc(100vw - 2 * var(--gutter) - 44px); }
  .deck__toggle { translate: -80px 0; }
  .hero__lede { font-size: 0.9688rem; }
  .svc-card__text { display: none; }
  .art { aspect-ratio: 2.25 / 1; }
  /* Three figures cannot sit side by side in a card this narrow: "5 to 10 min"
     on its own is wider than a third of it, so the unit was escaping the frame.
     They become rows, label left and figure right, like the dashboard's totals. */
  .stats { grid-template-columns: 1fr; gap: 0; padding-top: 12px; }
  .stats div {
    flex-direction: row; align-items: baseline; justify-content: space-between;
    gap: 12px; padding: 8px 0; border-top: 1px solid var(--line);
  }
  .stats div:first-child { border-top: 0; padding-top: 2px; }
  .stats dd { font-size: 1.25rem; white-space: nowrap; }
  .stats dd small { font-size: 0.75rem; }
  .stats dt { font-size: 0.8125rem; }
}

.textlink { display: inline-flex; align-items: center; gap: 2px; color: var(--accent); font-weight: 600; transition: color .2s; }
.textlink svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.textlink:hover { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.textlink:hover svg { transform: translateX(3px); }
.textlink--lg { font-size: 1.125rem; }

/* Device frames, shared by the film and the work cards. */
.laptop__screen {
  padding: 10px 10px 0;
  border-radius: 18px 18px 6px 6px;
  background: linear-gradient(180deg, #242424, #0e0e0e);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 60px 110px -40px rgba(0, 0, 0, .9);
}
.browserbar { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; background: #191919; border-radius: 8px 8px 0 0; }
.browserbar i { width: 8px; height: 8px; border-radius: 50%; background: #3f3f3f; }
.browserbar span { margin-left: 10px; flex: 0 1 48%; min-width: 0; padding: 2px 10px; border-radius: 6px; background: #0f0f0f; color: var(--text-3); font-size: 0.6875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.laptop__view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0d0d0d; }
.scrollshot { width: 100%; height: auto; transform: translateY(0); will-change: transform; }
.laptop__base { position: relative; height: 14px; margin: 0 -5.5%; border-radius: 2px 2px 18px 18px; background: linear-gradient(180deg, #383838, #151515 70%); box-shadow: 0 26px 40px -22px rgba(0, 0, 0, .9); }
.laptop__base::before { content: ''; position: absolute; left: 50%; top: 0; width: 15%; height: 5px; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: #0d0d0d; }

.phone {
  position: absolute; left: 0; bottom: 0; width: 23%;
  padding: 6px; border-radius: 28px;
  background: linear-gradient(160deg, #2c2c2c, #0f0f0f);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 40px 70px -24px rgba(0, 0, 0, .9);
  transform: translateZ(60px) rotate(-4deg) translate(calc(var(--ry, 0deg) * -1.2px), calc(var(--rx, 0deg) * 1.2px));
  transition: transform .6s var(--ease);
}
.phone__view { overflow: hidden; border-radius: 22px; aspect-ratio: 780 / 1688; background: #0d0d0d; }
.phone__view img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

@media (max-width: 560px) {
  .hero { padding-top: calc(var(--nav-h) + 26px); }
  .hero__lede { margin-top: 10px; }
  .hero__actions { flex-direction: column; gap: 14px; margin-top: 18px; }
  .hero__actions .btn { width: 100%; }
}

/* ---------- Projects marquee ---------- */

/* Every project, drifting past as plain text: no links, one continuous loop. */
.clients { padding-block: clamp(28px, 4vw, 44px); border-block: 1px solid var(--line); text-align: center; overflow: hidden; }
.clients__head { display: flex; justify-content: center; align-items: center; gap: 12px; padding-inline: var(--gutter); }
.clients__label { font-size: 0.9375rem; line-height: 1.4; color: var(--text-3); }
/* The row never stops on its own; this is the way to stop it on touch and keyboard. */
.marquee__toggle { position: relative; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); color: var(--text-2); cursor: pointer; transition: color .2s, border-color .2s, background-color .2s; }
.marquee__toggle::after { content: ''; position: absolute; inset: -6px; }
.marquee__toggle[hidden] { display: none; }
.marquee__toggle:hover { color: var(--text); border-color: var(--line-3); background: rgba(255, 255, 255, .06); }
.marquee__toggle svg { width: 14px; height: 14px; }
.marquee { margin-top: 18px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.marquee__track { display: flex; width: max-content; }
.marquee__set { list-style: none; display: flex; flex: none; align-items: center; }
.marquee__set li { display: flex; align-items: center; padding-right: clamp(26px, 3vw, 46px); font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.5rem); font-weight: 700; font-stretch: 110%; letter-spacing: -0.02em; line-height: 1.3; color: #cecece; white-space: nowrap; }
.marquee__set li::after { content: ''; width: 5px; height: 5px; margin-left: clamp(26px, 3vw, 46px); border-radius: 50%; background: var(--text-3); }
.can-move .marquee__track { animation: marquee 70s linear infinite; }
.can-move .marquee:hover .marquee__track, .can-move .marquee.is-paused .marquee__track, .can-move .marquee.is-idle .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }
/* Without motion the list simply wraps, centered, once. */
html:not(.can-move) .marquee { -webkit-mask-image: none; mask-image: none; padding-inline: var(--gutter); }
html:not(.can-move) .marquee__track { width: auto; justify-content: center; }
html:not(.can-move) .marquee__set { flex: 1; flex-wrap: wrap; justify-content: center; gap: 10px clamp(26px, 3vw, 46px); }
html:not(.can-move) .marquee__set li { padding-right: 0; }
html:not(.can-move) .marquee__set li::after { display: none; }
html:not(.can-move) .marquee__set[aria-hidden] { display: none; }

/* ---------- Why it pays off: five benefits per service ---------- */

/* One compact pitch: a service toggle, five numbered benefits, one quote link. Without the script every service shows, labelled. */
.benefits__head { display: grid; justify-items: center; gap: 14px; max-width: 760px; margin: 0 auto; text-align: center; }
.benefits__tabs {
  position: relative; isolation: isolate; display: flex; width: fit-content; max-width: 100%;
  margin: clamp(24px, 3vw, 34px) auto 0; padding: 4px; border-radius: 999px;
  background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px var(--line-2);
}
.benefits__tabs button {
  position: relative; z-index: 1; padding: 11px 20px; border: 0; border-radius: 999px; background: none;
  color: var(--text-3); font: inherit; font-size: 0.9375rem; font-weight: 620; white-space: nowrap; cursor: pointer;
  transition: color .35s var(--ease);
}
.benefits__tabs button:hover { color: var(--text); }
.benefits__tabs button[aria-selected="true"] { color: var(--text); }
/* The selection slides between tabs: one graphite pill, clipped to the chosen tab's box. */
.benefits__glider {
  position: absolute; z-index: 0; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, #2e2e2e, #232323); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  clip-path: inset(var(--g-top, 4px) var(--g-right, 100%) var(--g-bottom, 4px) var(--g-left, 4px) round 999px);
}
.benefits__tabs.is-gliding .benefits__glider { transition: clip-path .55s var(--ease); }
.benefits:not(.is-ready) .benefits__tabs { display: none; }

.benefits__panels { margin-top: clamp(34px, 4.4vw, 54px); }
.benefits__panel + .benefits__panel { margin-top: 40px; }
/* With the script, the services share one cell on wider screens so switching never moves the page below; phones keep natural heights. */
@media (min-width: 761px) {
  .benefits.is-ready .benefits__panels { display: grid; }
  .benefits.is-ready .benefits__panel { grid-area: 1 / 1; margin-top: 0; }
  .benefits.is-ready .benefits__panel:not(.is-active) { visibility: hidden; }
}
@media (max-width: 760px) {
  .benefits.is-ready .benefits__panel { margin-top: 0; }
  .benefits.is-ready .benefits__panel:not(.is-active) { display: none; }
}
.benefits__service { margin-bottom: 18px; text-align: center; font-size: 1.125rem; font-weight: 700; }
.benefits.is-ready .benefits__service { display: none; }
.benefits__list { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 34px); }
.benefits__list li { display: grid; justify-items: center; align-content: start; min-width: 0; text-align: center; }
/* Big numerals that fade into the ground, like the reference; the one you point at lights up. */
.benefits__num {
  font-size: clamp(3.5rem, 1.9rem + 3.6vw, 5.75rem); line-height: .86; font-weight: 800; font-stretch: 112%; letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums; color: var(--num-dim);
  -webkit-mask-image: linear-gradient(180deg, #000 34%, rgba(0, 0, 0, .12) 92%); mask-image: linear-gradient(180deg, #000 34%, rgba(0, 0, 0, .12) 92%);
  transition: color .45s var(--ease);
}
/* One numeral rests lit, like the reference; pointing at another moves the light there. */
.benefits__list li:first-child .benefits__num { color: var(--num-lit); }
.benefits__list:hover li:first-child:not(:hover) .benefits__num { color: var(--num-dim); }
.benefits__list li:hover .benefits__num { color: var(--num-lit); }
.benefits__list h3 { margin-top: 8px; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); line-height: 1.25; font-weight: 700; font-stretch: 104%; letter-spacing: -0.01em; }
.benefits__list p { margin-top: 8px; max-width: 30ch; font-size: 0.9375rem; line-height: 1.55; color: var(--text-2); text-wrap: balance; }
.benefits__cta { margin-top: clamp(26px, 3vw, 38px); text-align: center; }

/* A switch plays one moment: the benefits rise in order and a light runs along the numbers. */
/* Backwards fill only: once the moment has played, the resting and hover rules are back in charge. */
.can-move .benefits__panel.is-entering li { animation: bn-rise .75s var(--ease) backwards; animation-delay: calc(var(--i) * 70ms); }
.can-move .benefits__panel.is-entering .benefits__num { animation: bn-sweep 1.1s ease-out backwards; animation-delay: calc(var(--i) * 110ms + 120ms); }
.can-move .benefits__panel.is-entering li:first-child .benefits__num { animation-name: bn-sweep-lead; }
@keyframes bn-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes bn-sweep { 0% { color: var(--num-dim); } 30% { color: var(--num-lit); } 100% { color: var(--num-dim); } }
@keyframes bn-sweep-lead { 0% { color: var(--num-dim); } 30% { color: var(--num-lit); } 100% { color: var(--num-lit); } }

/* Five columns only where each benefit keeps a one-line title and a two-line body; below that, three and two. */
@media (max-width: 1360px) {
  .benefits__list { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 34px; }
  .benefits__list li { flex: 0 1 calc((100% - 2 * clamp(16px, 2.2vw, 34px)) / 3); }
}
@media (max-width: 760px) {
  .benefits__list { display: grid; grid-template-columns: 1fr; row-gap: 14px; }
  .benefits__list li { grid-template-columns: 3.5rem minmax(0, 1fr); justify-items: start; column-gap: 8px; text-align: left; }
  .benefits__num { grid-row: 1 / span 2; font-size: 2.5rem; }
  .benefits__list h3 { margin-top: 2px; }
  .benefits__list p { margin-top: 4px; max-width: none; }
}
/* Phones: four services will not sit on one row at this width, so the control
   becomes a 2x2 block rather than squeezing four labels until they are unreadable
   or letting one spill off the screen. Equal columns, because with four labels no
   single one needs to absorb the slack the way "Business systems" did at three.
   The glider is clipped from measured rects, so it crosses rows on its own. */
@media (max-width: 560px) {
  .benefits__tabs {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px;
    width: 100%; border-radius: 26px;
  }
  .benefits__tabs button {
    display: grid; place-items: center; min-height: 44px; padding: 9px 10px; border-radius: 999px;
    font-size: 0.8438rem; line-height: 1.2; white-space: nowrap;
  }
  /* Pre-JS only: the open tab is the first of four, so top-left of the 2x2. */
  .benefits__glider { clip-path: inset(var(--g-top, 4px) var(--g-right, 50%) var(--g-bottom, 50%) var(--g-left, 4px) round 999px); }
}
/* On the narrowest phones "Business systems" is still the long one, and a 2x2
   column there is about 150px. Easing the padding keeps it on one line. */
@media (max-width: 360px) {
  .benefits__tabs button { padding: 9px 4px; font-size: 0.8125rem; }
}

/* ---------- Services ---------- */

/* A giant word behind glass: the cards overlap "Services" and blur the letters under them. */
.glass { overflow: clip; }
.glass__word {
  position: relative; z-index: 0; text-align: center; pointer-events: none;
  font-size: clamp(5rem, 17.5vw, 18rem); line-height: .8; font-weight: 800; font-stretch: 112%; letter-spacing: -0.055em;
  color: var(--text); margin-bottom: -0.3em;
}
.glass__grid { position: relative; z-index: 1; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.glass__card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  padding: clamp(22px, 2vw, 28px) clamp(20px, 1.8vw, 26px) clamp(20px, 1.8vw, 24px);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(34, 34, 34, .5), rgba(12, 12, 12, .78) 55%);
  -webkit-backdrop-filter: blur(26px) saturate(115%); backdrop-filter: blur(26px) saturate(115%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .14), 0 40px 80px -40px rgba(0, 0, 0, .9);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass__card { background: linear-gradient(180deg, rgba(34, 34, 34, .92), rgba(12, 12, 12, .96) 55%); }
}
.glass__card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .18), 0 50px 90px -40px rgba(0, 0, 0, .95); }
.glass__card h3 { font-size: clamp(1.3125rem, 0.95rem + 0.65vw, 1.625rem); line-height: 1.08; font-weight: 720; font-stretch: 110%; letter-spacing: -0.03em; }
.glass__lede { margin-top: 10px; min-height: 3.1em; color: var(--text-2); font-size: 0.9688rem; line-height: 1.55; }
.glass__list { list-style: none; display: grid; gap: 12px; margin: 20px 0 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.glass__list li { display: flex; align-items: center; gap: 10px; font-size: 0.9375rem; line-height: 1.35; color: var(--text); }
.glass__list svg { width: 18px; height: 18px; color: var(--text-3); }
.glass__card--lead .glass__list svg { color: var(--text); }
.glass__cta {
  margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 20px; border-radius: 999px;
  background: #0a0a0a; color: var(--text); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  font-size: 0.9688rem; font-weight: 650; font-stretch: 104%; white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.glass__cta svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.glass__card--lead .glass__cta, .glass__cta:hover, .glass__cta:focus-visible { background: var(--accent); color: var(--accent-ink); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .9); }
.glass__cta:hover svg, .glass__cta:focus-visible svg { transform: translateX(3px); }

/* ---------- Tiers ---------- */
/* Three steps per service. The cards start level and fan into a staircase as the
   row crosses the viewport, so the climb in capability is something you watch
   happen rather than something a label claims. --p is written by site.js. */
.glass__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
[data-tier-row] { --p: 0; }
.tiers__group {
  position: relative; z-index: 1; margin: clamp(44px, 6vw, 76px) 0 clamp(18px, 2.2vw, 28px);
  text-align: center; font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem);
  font-weight: 720; font-stretch: 110%; letter-spacing: -0.025em; line-height: 1.1;
}
/* The giant word pulls the next block up over itself by -0.3em so the cards can
   overlap it. A heading must not sit in that zone, so cancel the pull exactly. */
.glass__word + .tiers__group { margin-top: calc(clamp(5rem, 17.5vw, 18rem) * 0.36); }
.tier {
  --i: 0; --step: clamp(8px, 1.9vw, 30px);
  transform: translate3d(0, calc(var(--step) * var(--i) * var(--p) * -1), 0);
  transition: transform .45s var(--ease), opacity .3s var(--ease), box-shadow .3s var(--ease);
  will-change: transform;
}
[data-tier-row] .tier:nth-child(2) { --i: 1; }
[data-tier-row] .tier:nth-child(3) { --i: 2; }
/* Looking at one tier quiets the others, the same 62% a tap uses elsewhere. */
.tiers:has(.tier:hover) .tier:not(:hover),
.tiers:has(.tier:focus-within) .tier:not(:focus-within) { opacity: .62; }
.tier:hover, .tier:focus-within { transform: translate3d(0, calc(var(--step) * var(--i) * var(--p) * -1 - 6px), 0); }
@media (hover: none) {
  .tiers:has(.tier:hover) .tier:not(:hover) { opacity: 1; }
  .tier:active { transform: translate3d(0, calc(var(--step) * var(--i) * var(--p) * -1), 0) scale(.985); }
}
@media (prefers-reduced-motion: reduce) {
  [data-tier-row] { --p: 0 !important; }
  .tier { transition: none; }
}
html.is-static [data-tier-row] { --p: 0 !important; }
html.is-static .tier { transition: none; }
@media (max-width: 860px) {
  [data-tier-row] { --p: 0 !important; }
}

.glass__note { max-width: 44rem; margin: clamp(32px, 4vw, 48px) auto 0; text-align: center; color: var(--text-3); text-wrap: balance; }

@media (max-width: 1100px) {
  .glass__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .glass__word { font-size: 19vw; }
}
@media (max-width: 600px) {
  .glass__grid { grid-template-columns: 1fr; }
  /* Only the first card sits over the word; the rest skip the blur (a real compositing cost on low-end phones). */
  .glass__card:not(:first-child) { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(180deg, rgba(34, 34, 34, .92), rgba(12, 12, 12, .96) 55%); }
  .glass__word { font-size: 19vw; margin-bottom: -0.26em; }
  .glass__lede { min-height: 0; }
}

/* ---------- Back-end dashboard demo ---------- */

.appwin {
  position: relative;
  display: grid; grid-template-columns: 58px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, #151515, #0c0c0c);
  border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 60px 120px -50px rgba(0, 0, 0, .9);
  overflow: hidden;
}
.appwin__side { padding: 22px 16px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 22px; background: rgba(255, 255, 255, .015); }
.appwin__brand { display: flex; align-items: center; gap: 10px; font-weight: 680; font-size: 0.9375rem; }
.appwin__logo { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font-size: 0.75rem; font-weight: 800; }
.appwin__tabs { display: grid; gap: 4px; }
.appwin__tabs button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: 0; border-radius: 12px;
  background: transparent; color: var(--text-2);
  font: inherit; font-size: 0.9375rem; font-weight: 550; text-align: left; cursor: pointer;
  transition: background-color .2s, color .2s;
}
.appwin__tabs button svg { width: 18px; height: 18px; }
.appwin__tabs button:hover { background: rgba(255, 255, 255, .05); color: var(--text); }
.appwin__tabs button[aria-selected='true'] { background: var(--accent-soft); color: var(--accent); }
.appwin__foot { margin-top: auto; font-size: 0.8125rem; color: var(--text-3); display: flex; align-items: center; gap: 8px; }
.appwin__main { padding: clamp(18px, 2.4vw, 30px); min-width: 0; }
.appwin__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.appwin__top h3 { font-size: 1.375rem; font-weight: 700; font-stretch: 108%; letter-spacing: -0.02em; }
.appwin__top p { font-size: 0.875rem; color: var(--text-3); }
.panel[hidden] { display: none; }
.panel { animation: panelin .45s var(--ease); }
/* With the script, every panel shares one grid cell on wider screens: the window keeps the tallest panel's height, so nothing below
   moves on a tab click. On phones the tabs sit at the top of the window you're already looking at, so panels keep their own height
   rather than leaving a tall empty frame. */
.appwin.is-stacked .panel { animation: none; }
.appwin.is-stacked .panel.is-active { animation: panelin .45s var(--ease); }
@media (min-width: 761px) {
  .appwin.is-stacked .appwin__main { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start; }
  .appwin.is-stacked .appwin__top { grid-row: 1; }
  .appwin.is-stacked .panel { grid-row: 2; grid-column: 1; min-width: 0; }
  .appwin.is-stacked .panel:not(.is-active) { visibility: hidden; }
}
@media (max-width: 760px) {
  .appwin.is-stacked .panel:not(.is-active) { display: none; }
}
@keyframes panelin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi { padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, .025); border: 1px solid var(--line); }
.kpi dt { font-size: 0.8125rem; color: var(--text-3); }
.kpi dd { margin: 6px 0 0; font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem); font-weight: 720; font-stretch: 106%; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi small { display: block; margin-top: 8px; font-size: 0.8125rem; color: var(--accent); }
.kpi small.warn { color: var(--warn); }
.kpi__trend { display: inline-block; width: .95em; height: .95em; margin-right: 3px; vertical-align: -0.14em; }
.dashgrid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 12px; }
.card { padding: 18px; border-radius: 16px; background: rgba(255, 255, 255, .025); border: 1px solid var(--line); min-width: 0; }
.card__title { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.9375rem; font-weight: 620; margin-bottom: 12px; }
.card__title span { font-size: 0.8125rem; font-weight: 450; color: var(--text-3); }
/* The sales chart: this period over the one before, a lit line with a pulse at "now", and a crosshair that reads any point. */
.chartcard { display: flex; flex-direction: column; }
.chartcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.chartcard__label { font-size: 0.8125rem; color: var(--text-3); }
.chartcard__total { margin-top: 2px; font-size: 0.8125rem; color: var(--text-3); }
.chartcard__total b { font-size: 1.5rem; font-weight: 720; font-stretch: 106%; letter-spacing: -0.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.seg { display: inline-flex; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line); }
.seg button { padding: 6px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--text-3); font: inherit; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color .25s var(--ease), color .25s var(--ease); }
.seg button:hover { color: var(--text); }
.seg button[aria-checked="true"] { background: #262626; color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 10px -4px rgba(0, 0, 0, .8); }
.chart { position: relative; height: 220px; margin-inline: -4px; border-radius: 12px; outline-offset: 6px; touch-action: pan-y; cursor: crosshair; }
.chart__svg { width: 100%; height: 100%; overflow: visible; }
.chart__grid { fill: none; stroke: rgba(255, 255, 255, .06); stroke-width: 1; stroke-dasharray: 3 5; }
.chart__area--now { fill: url(#g-now); }
.chart__area--prev { fill: url(#g-prev); }
.chart__line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.chart__line--now { stroke: var(--accent); stroke-width: 2.25; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .45)); }
.chart__line--prev { stroke: rgba(255, 255, 255, .34); stroke-width: 1.5; stroke-dasharray: 4 5; }
/* First sight: the lines draw left to right, and the pulse arrives once they reach "now". */
.chart.is-drawing .chart__svg { animation: chart-reveal 1.5s var(--ease) both; }
.chart.is-drawing .chart__pulse { animation: chart-fade .5s 1.1s var(--ease) both; }
@keyframes chart-reveal { from { clip-path: inset(-20px 100% -20px 0); } to { clip-path: inset(-20px 0 -20px 0); } }
@keyframes chart-fade { from { opacity: 0; } }
.chart__pulse { position: absolute; left: var(--x, 100%); top: var(--y, 14%); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px 2px rgba(255, 255, 255, .55); pointer-events: none; }
.chart__pulse::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .6); opacity: 0; }
.can-move .chart.is-live .chart__pulse::after { animation: chart-ping 2.2s cubic-bezier(.2, .6, .3, 1) infinite; }
@keyframes chart-ping { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
.chart__cursor { position: absolute; inset: 0; pointer-events: none; }
.chart__cursor[hidden] { display: none; }
.chart__guide { position: absolute; top: 0; bottom: 0; left: var(--x); width: 1px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .45) 30%, rgba(255, 255, 255, .45) 70%, rgba(255, 255, 255, 0)); }
.chart__dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; }
.chart__dot--now { left: var(--x); top: var(--y-now); background: var(--accent); box-shadow: 0 0 0 4px rgba(255, 255, 255, .16), 0 0 14px rgba(255, 255, 255, .5); }
.chart__dot--prev { left: var(--x); top: var(--y-prev); background: #0c0c0c; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
.chart__tip {
  position: absolute; top: 8px; left: 0; min-width: 150px; padding: 10px 12px; border-radius: 12px;
  background: rgba(22, 22, 22, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 16px 30px -12px rgba(0, 0, 0, .9); font-size: 0.8125rem;
}
.chart__tip b { display: block; margin-bottom: 6px; font-weight: 650; color: var(--text); }
.chart__tip span { display: flex; align-items: center; gap: 8px; color: var(--text-3); white-space: nowrap; }
.chart__tip span + span { margin-top: 3px; }
.chart__tip span i { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
.chart__tip span + span i { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); }
.chart__tip em { margin-left: auto; padding-left: 14px; font-style: normal; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
.chart__axis { position: relative; height: 18px; margin-top: 8px; font-size: 0.75rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.chart__axis span { position: absolute; top: 0; left: var(--x); transform: translateX(-50%); white-space: nowrap; }
.chart__axis span:first-child { transform: none; }
.chart__axis span:last-child { transform: translateX(-100%); }
.chart__axis:not(.is-set) { display: flex; justify-content: space-between; }
.chart__axis:not(.is-set) span { position: static; transform: none; }

/* Live: a breathing dot, numbers that roll when they change, and new activity sliding in. */

/* ---------- The system demonstrates itself ---------- */
/* A ghost pointer walks the tabs and clicks them, and a line underneath says what
   just happened in business terms. Runs only with motion on, on screen and in a
   visible tab; any real interaction hands control straight back. */
.tour__cursor {
  position: absolute; top: 0; left: 0; z-index: 6; width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 2px 10px rgba(0, 0, 0, .7);
  opacity: 0; pointer-events: none;
  transform: translate3d(var(--x, -40px), var(--y, -40px), 0);
  transition: transform .72s var(--ease), opacity .3s var(--ease);
}
.appwin.is-touring .tour__cursor { opacity: 1; }
.tour__cursor::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--accent); opacity: 0; transform: scale(.5);
}
.tour__cursor.is-tapping::after { animation: tourtap .5s var(--ease); }
@keyframes tourtap {
  0% { opacity: .9; transform: scale(.5); }
  100% { opacity: 0; transform: scale(2.4); }
}
.tour__cursor.is-tapping { transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(.82); }

.tour {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 16px; padding: 0 2px;
}
.tour__line { color: var(--text-2); font-size: 0.9375rem; line-height: 1.5; max-width: 46ch; }
.tour__right { display: flex; align-items: center; gap: 14px; }
.tour__ticks { display: flex; align-items: center; gap: 6px; }
.tour__ticks i {
  width: 18px; height: 3px; border-radius: 99px; background: var(--line-2);
  transition: background-color .3s var(--ease), width .4s var(--ease);
}
.tour__ticks i.is-on { width: 30px; background: var(--accent); }

/* Depth: the window reads as a machine sitting on the page, not a flat card. */
.appwin {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    inset 0 0 0 1px rgba(255, 255, 255, .02),
    0 2px 6px rgba(0, 0, 0, .5),
    0 30px 60px -30px rgba(0, 0, 0, .85),
    0 70px 130px -55px rgba(0, 0, 0, .95);
}
.appwin__tabs button { position: relative; }
.appwin__tabs button::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 2px; height: 0; border-radius: 99px;
  background: var(--accent); transform: translateY(-50%);
  transition: height .3s var(--ease);
}
.appwin__tabs button[aria-selected="true"]::before { height: 58%; }

@media (prefers-reduced-motion: reduce) { .tour__cursor { display: none; } }
html.is-static .tour__cursor { display: none; }


/* Every view carries its own figures, so switching never leaves a half-empty window. */
.panelstats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line);
}
.panelstats > div { min-width: 0; }
.panelstats dt, .panelstats dd { margin: 0; }
.panelstats dt { font-size: 0.8125rem; color: var(--text-3); margin-bottom: 6px; }
.panelstats dd {
  font-size: 1.25rem; font-weight: 720; font-stretch: 108%; letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) { .panelstats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }


/* ---------- Command bar ---------- */
/* Identity, search and the primary action sit above everything, the way real
   software is laid out. It is a still picture of an interface, so the search and
   the New button are presentational and hidden from assistive tech. */
.appwin__bar {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 14px;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .022);
}
.appwin__bar .appwin__brand { flex: none; }
.appwin__search {
  flex: 1 1 auto; min-width: 0; max-width: 420px; display: flex; align-items: center; gap: 9px;
  height: 34px; padding: 0 10px; border-radius: 10px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
  color: var(--text-3); font-size: 0.8125rem;
}
.appwin__search svg { width: 15px; height: 15px; flex: none; }
.appwin__search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appwin__search kbd {
  margin-left: auto; flex: none; font: inherit; font-size: 0.6875rem; letter-spacing: .04em;
  padding: 2px 6px; border-radius: 5px; background: rgba(255, 255, 255, .06); color: var(--text-3);
}
.appwin__baracts { display: flex; align-items: center; gap: 9px; flex: none; margin-left: auto; }
.appwin__new {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  font-size: 0.8125rem; font-weight: 700;
}
.appwin__new svg { width: 14px; height: 14px; }

/* ---------- Page header inside the window ---------- */
.appwin__heading { min-width: 0; }
.appwin__context { font-size: 0.8125rem; color: var(--text-3); margin-bottom: 4px; }
.appwin__acts { display: flex; align-items: center; gap: 8px; flex: none; }
.appwin__act {
  display: inline-flex; align-items: center; height: 32px; padding: 0 13px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--text-2); font-size: 0.8125rem; font-weight: 650;
}
.appwin__act--go { background: var(--accent); border-color: transparent; color: var(--accent-ink); }

/* ---------- The four figures read as chips, not billboards ---------- */
.kpi { position: relative; }
.kpi__ico {
  width: 15px; height: 15px; color: var(--text-3);
  position: absolute; top: 14px; right: 14px;
}

@media (max-width: 760px) {
  .appwin__search { display: none; }
  .appwin__acts { display: none; }
}
@media (max-width: 600px) {
  .appwin__bar { order: 0; }
  .appwin__baracts .tag { display: none; }
}


/* ---------- Icon rail ---------- */
/* The sections of a bigger product, shown the way real software shows them: a
   narrow rail of icons. Presentational, so it never offers a control that does
   nothing. The credit at its foot is true and belongs to Quallo. */
.appwin__rail {
  grid-column: 1; grid-row: 2; display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 14px 0 16px; border-right: 1px solid var(--line); background: rgba(255, 255, 255, .02);
}
.appwin__railico {
  position: relative; width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 9px; color: var(--text-3);
}
.appwin__railico svg { width: 17px; height: 17px; }
/* The section you are in, which is the grid icon, not the theme switch above it. */
.appwin__railico.is-on { color: var(--text); background: var(--wash); }
.appwin__railico i {
  position: absolute; top: -2px; right: -2px; min-width: 14px; height: 14px; padding: 0 3px;
  border-radius: 99px; background: var(--accent); color: var(--accent-ink);
  font-size: 0.5625rem; font-weight: 800; font-style: normal; display: grid; place-items: center;
}
.appwin__raildiv { width: 20px; height: 1px; background: var(--line-2); margin: 3px 0; }
.appwin__rail .appwin__raildiv:last-of-type { margin-top: auto; }
.appwin__credit {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 0.5625rem; letter-spacing: .06em; color: var(--text-3); opacity: .75; margin-top: 8px;
}

/* ---------- Segmented nav in the bar ---------- */
.appwin__bar .appwin__tabs {
  display: flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: rgba(255, 255, 255, .05); flex: none;
}
.appwin__bar .appwin__tabs button {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px;
  border-radius: 999px; font-size: 0.8125rem; font-weight: 650; color: var(--text-3);
  background: transparent;
}
.appwin__bar .appwin__tabs button svg { width: 15px; height: 15px; }
.appwin__bar .appwin__tabs button::before { display: none; }
.appwin__bar .appwin__tabs button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
.appwin__brandname { display: flex; flex-direction: column; line-height: 1.15; }
.appwin__brandname small { font-size: 0.6875rem; font-weight: 500; color: var(--text-3); }

/* ---------- Stat cards ---------- */
.kpi__head { display: flex; align-items: center; gap: 7px; font-size: 0.8125rem; color: var(--text-3); }
.kpi__ico { width: 15px; height: 15px; flex: none; position: static; }
.kpi__value {
  margin: 10px 0 12px; font-size: clamp(1.5rem, 1rem + 1.1vw, 2rem); font-weight: 760;
  font-stretch: 108%; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; line-height: 1;
}
.kpi__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kpi__delta {
  display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px;
  border-radius: 999px; background: var(--wash); color: var(--text-2);
  font-size: 0.75rem; font-weight: 650; white-space: nowrap;
}
.kpi__delta.warn { background: var(--warn-wash); color: var(--warn); }
.kpi__arrow { width: 11px; height: 11px; }
.spark { width: 58px; height: 22px; flex: none; opacity: .75; }
.spark polyline { stroke: var(--text-2); stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .appwin__bar .appwin__tabs button span { display: none; }
  .appwin__search { display: none; }
}
@media (max-width: 760px) {
  .appwin { grid-template-columns: 1fr; }
  .appwin__rail { display: none; }
  .appwin__bar { flex-wrap: wrap; }
  .appwin__acts { display: none; }
}
@media (max-width: 600px) {
  /* The bar drops to the bottom and shows only the views, which is the phone app. */
  .appwin__bar {
    order: 2; position: sticky; bottom: 0; z-index: 3; justify-content: center;
    border-bottom: 0; border-top: 1px solid var(--line);
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg-2) 92%, transparent);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  }
  .appwin__bar .appwin__brand, .appwin__baracts { display: none; }
  .appwin__bar .appwin__tabs { flex: 1 1 auto; background: transparent; padding: 0; gap: 4px; }
  .appwin__bar .appwin__tabs button {
    flex: 1 1 0; flex-direction: column; gap: 4px; height: auto; min-height: 54px;
    border-radius: 14px; font-size: 0.75rem; padding: 8px 2px;
  }
  .appwin__bar .appwin__tabs button span { display: block; }
  .appwin__bar .appwin__tabs button svg { width: 20px; height: 20px; }
}


/* ---------- The overview reads as one instrument panel ---------- */
/* Cards inside a card is a nested container, and four identical boxes were doing
   the structural work. One bordered board divided by hairlines is denser, calmer
   and precise, which is the bar this page is held to. */
.board {
  border: 1px solid var(--line); border-radius: 18px;
  background: rgba(255, 255, 255, .022); overflow: hidden;
}
.board .kpis { gap: 0; margin: 0; border-bottom: 1px solid var(--line); }
.board .kpi {
  padding: 15px 18px 16px; border: 0; border-radius: 0; background: transparent;
}
.board .kpi + .kpi { border-left: 1px solid var(--line); }
.board .dashgrid { gap: 0; }
.board .chartcard, .board .actcard {
  min-width: 0; padding: 18px; border: 0; border-radius: 0; background: transparent;
}
.board .actcard { border-left: 1px solid var(--line); }
.actcard .card__title { font-size: 0.8125rem; color: var(--text-3); }

@media (max-width: 760px) {
  .board .kpi:nth-child(3) { border-left: 0; }
  .board .kpi:nth-child(n+3) { border-top: 1px solid var(--line); }
  .board .actcard { border-left: 0; border-top: 1px solid var(--line); }
}

.appwin__status { display: flex; align-items: center; gap: 10px; }
.live { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8125rem; font-weight: 600; color: var(--text-2); }
.live i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(255, 255, 255, .7); }
.can-move .live.is-on i::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .6); animation: chart-ping 2s cubic-bezier(.2, .6, .3, 1) infinite; }
.kpi { transition: box-shadow .6s var(--ease), background-color .6s var(--ease); }
.kpi.is-bumped { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); transition-duration: .15s; }
.can-move .feed li.is-new { animation: feed-in .7s var(--ease) both; }
.can-move .feed li.is-new .feed__icon { animation: feed-glow 1.6s var(--ease) both; }
@keyframes feed-in { from { opacity: 0; transform: translateY(-10px); } }
@keyframes feed-glow { from { box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 0 16px rgba(255, 255, 255, .35); } }
.can-move .dtable tr.is-new td { animation: feed-in .7s var(--ease) both; }
.feed { list-style: none; display: grid; gap: 2px; }
.feed li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.875rem; }
.feed li:last-child { border-bottom: 0; }
.feed__icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .05); color: var(--text-2); }
.feed__icon svg { width: 16px; height: 16px; }
.feed__icon--ok { background: var(--accent-soft); color: var(--accent); }
.feed__icon--warn { background: rgba(255, 190, 92, .12); color: var(--warn); }
.feed li b { display: block; font-weight: 600; }
.feed li small { display: block; color: var(--text-3); font-size: 0.8125rem; }
.feed li em { font-style: normal; color: var(--text-2); font-variant-numeric: tabular-nums; }

.tablewrap { overflow-x: auto; }
.dtable { width: 100%; border-collapse: collapse; font-size: 0.9063rem; font-variant-numeric: tabular-nums; }
.dtable th { text-align: left; font-weight: 500; font-size: 0.8125rem; color: var(--text-3); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dtable td { padding: 13px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dtable tr:last-child td { border-bottom: 0; }
.status { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 0.8125rem; font-weight: 550; background: rgba(255, 255, 255, .06); color: var(--text-2); }
.status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status--ok { background: var(--accent-soft); color: var(--accent); }
.status--warn { background: rgba(255, 190, 92, .12); color: var(--warn); }
.stockbar { width: 110px; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.stockbar i { display: block; height: 100%; border-radius: 6px; background: var(--accent); width: var(--w); }
.stockbar i.low { background: var(--warn); }

.slots { display: grid; gap: 10px; }
.slot { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .025); border: 1px solid var(--line); }
.slot time { font-weight: 650; font-variant-numeric: tabular-nums; }
.slot b { display: block; font-weight: 600; }
.slot small { display: block; color: var(--text-3); font-size: 0.8125rem; }
.slot--open { border-style: dashed; color: var(--text-3); }

.features { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 40px; border-top: 1px solid var(--line); }
.feature { display: grid; grid-template-columns: 24px 1fr; gap: 4px 14px; align-content: start; padding: 24px 24px 8px 0; }
.feature + .feature { padding-left: 24px; border-left: 1px solid var(--line); }
.feature > svg { grid-row: 1 / span 2; width: 22px; height: 22px; margin-top: 1px; color: var(--text); }
.feature h3 { font-size: 1.0625rem; font-weight: 680; letter-spacing: -0.01em; line-height: 1.35; }
.feature p { font-size: 0.9375rem; color: var(--text-2); line-height: 1.55; }

.bundle {
  display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center;
  margin-top: 16px; padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 56px);
  border-radius: var(--radius-xl);
  background: #101010;
  border: 1px solid var(--line);
}
.bundle h3 { font-size: clamp(1.375rem, 1.05rem + 0.9vw, 1.875rem); font-weight: 720; font-stretch: 110%; letter-spacing: -0.03em; line-height: 1.1; }
.bundle p { margin: 8px auto 0; color: var(--text-2); max-width: 52ch; }
.bundle__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

@media (max-width: 1060px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashgrid { grid-template-columns: 1fr; }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .appwin__top { flex-direction: column; align-items: flex-start; }
  .chartcard__head { flex-direction: column; }
  .seg { width: 100%; }
  .seg button { flex: 1; }
  .chart { height: 180px; }
}
@media (max-width: 760px) {
  .appwin { grid-template-columns: 1fr; border-radius: var(--radius-lg); }
  .appwin__side { flex-direction: row; align-items: center; gap: 12px; padding: 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  .appwin__brand, .appwin__foot { display: none; }
  /* All four views fit across the top, like an app's tab bar, instead of a strip that hides Inventory off the edge. */
  .appwin__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; width: 100%; }
  .appwin__tabs button { justify-content: center; gap: 8px; min-height: 44px; padding: 8px 6px; white-space: nowrap; }
  .features { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .appwin__tabs button { flex-direction: column; gap: 5px; min-height: 58px; padding: 9px 2px 8px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; }
  .seg button { min-height: 40px; }
}

/* Phones: the demo is a phone app, not a dashboard shrunk down. The views sit in a bar along the bottom of the window,
   where a thumb reaches them, and the bar stays put while you read the screen above it. */
@media (max-width: 600px) {
  .appwin { display: flex; flex-direction: column; border-radius: 30px; }
  @supports (overflow: clip) { .appwin { overflow: clip; } }
  .appwin__main { order: 1; padding: 20px 14px 18px; }
  .appwin__side {
    order: 2; position: sticky; bottom: 0; z-index: 2;
    gap: 0; padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line); border-bottom: 0;
    background: rgba(20, 20, 20, .86); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  }
  .appwin__tabs { gap: 2px; }
  .appwin__tabs button { min-height: 54px; border-radius: 14px; }
  .appwin__tabs button svg { width: 20px; height: 20px; }
  .appwin__top { margin-bottom: 16px; }
  .appwin__top h3 { font-size: 1.5rem; }
  .kpis { gap: 10px; }
  .kpi { padding: 14px; }
}

/* ---------- Case studies ---------- */

.cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(48px, 5vw, 72px) 20px; }
.case { display: flex; flex-direction: column; min-width: 0; }
.case__media {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 11.5;
  padding: 8% 8% 0;
  border-radius: var(--radius-xl);
  background: #101010;
  border: 1px solid var(--line);
  transition: border-color .35s var(--ease);
}
.case__media:hover { border-color: var(--line-2); }
.case__browser { border-radius: 12px 12px 0 0; overflow: hidden; background: #0d0d0d; border: 1px solid rgba(255, 255, 255, .12); border-bottom: 0; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9); transition: transform .6s var(--ease); }
.case__media:hover .case__browser { transform: translateY(-6px); }
.case__view { position: relative; aspect-ratio: 16 / 11; overflow: hidden; }
.case__view .scrollshot { transition: transform var(--scroll-dur, 5s) cubic-bezier(.45, 0, .2, 1); }
.case__media.is-scrolling .case__view .scrollshot { transform: translateY(calc(-1px * var(--travel, 0))); }
.case__body { display: grid; justify-items: center; gap: 6px; padding: 26px 8px 0; text-align: center; }
.case__name { font-size: clamp(1.625rem, 1.15rem + 1.2vw, 2.375rem); font-weight: 720; font-stretch: 110%; letter-spacing: -0.035em; line-height: 1.05; }
.case__trade { color: var(--text-2); }
.case__meta { font-size: 0.9375rem; color: var(--text-3); }
.case__body .textlink { margin-top: 10px; }

.case--next { grid-column: 1 / -1; }
/* The open slot for the next client: a dashed outline, pointing to the one mockup offer below. */
.case__next {
  display: grid; justify-items: center; gap: 14px; text-align: center;
  padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 56px);
  border-radius: var(--radius-xl);
  border: 1px dashed var(--line-2);
}
.case__next h3 { font-size: clamp(1.625rem, 1.1rem + 1.6vw, 2.5rem); font-weight: 740; font-stretch: 112%; letter-spacing: -0.035em; line-height: 1.05; max-width: 24ch; }

/* Tablets keep two projects across (a single column there was one very tall card after another); phones get the swipe row below. */

/* ---------- Swipe rows (phones) ---------- */

/* On phones the service cards and the work sit side by side in a row you swipe, with the next card peeking in,
   instead of one long column. The row is plain scroll snapping; site.js adds the dots, which follow the swipe. */
.rail__dots { display: none; }
@media (max-width: 600px) {
  /* position: relative keeps absolutely placed text inside (like the hidden "opens in a new tab") clipped by the row,
     otherwise it hangs off the right of the page and a phone zooms the whole page out to fit it. */
  [data-rail] {
    position: relative;
    display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc(100% - 48px);
    gap: 12px; align-items: stretch;
    margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 24px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  [data-rail]::-webkit-scrollbar { display: none; }
  [data-rail] > * { scroll-snap-align: start; scroll-snap-stop: always; }

  .rail__dots { display: flex; justify-content: center; margin-top: -12px; }
  /* The same dots as the hero deck: a 30px pill clipped to a dot, opening out for the card in view. */
  .rail__dot { display: grid; place-items: center; width: 26px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .rail__dot i { width: 30px; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .5); clip-path: inset(0 12px round 99px); transition: clip-path .5s var(--ease), background-color .3s; }
  .rail__dot[aria-current="true"] i { clip-path: inset(0 0 round 99px); background: var(--accent); }
  .rail__dot:focus-visible { outline: none; }
  .rail__dot:focus-visible i { outline: 2px solid var(--accent); outline-offset: 4px; }

  /* Services: every card in the row slides over the giant word, so every card keeps its glass. The word is a quarter of its
     desktop size here, so the blur is too: at the desktop radius its letters dissolve and the glass reads as a plain card. */
  .glass__grid[data-rail] .glass__card {
    -webkit-backdrop-filter: blur(7px) saturate(115%); backdrop-filter: blur(7px) saturate(115%);
    background: linear-gradient(180deg, rgba(34, 34, 34, .42), rgba(12, 12, 12, .8) 50%);
  }
  .glass__grid[data-rail] .glass__card:hover { transform: none; }
  .glass__word { margin-bottom: -0.36em; }
  /* A pill needs more flat room at its ends than a rectangle does, or the
     words look wedged against the curve. The label comes down a touch so
     the longest one — "Enquire about Professional" — still breathes. */
  .glass__cta { padding-inline: 22px; font-size: 0.875rem; gap: 8px; }
  .glass__cta svg { width: 16px; height: 16px; }
  .glass__note { margin-top: 28px; }

  /* Work: each project becomes one framed card, so the one peeking in reads as a card rather than stray words.
     The open slot for the next client stays dashed, as the last card in the row. */
  .cases[data-rail] > .case:not(.case--next) { background: #101010; border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden; }
  .cases[data-rail] .case__media { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
  .cases[data-rail] .case__body { padding: 20px 16px 22px; }
  .cases[data-rail] > .case--next { grid-column: auto; display: flex; }
  .cases[data-rail] .case__next { flex: 1; align-content: center; padding-inline: 20px; }
  /* The link wraps like a sentence, so the chevron stays on the last word. */
  .cases[data-rail] .case__next .textlink { display: inline; text-wrap: balance; }
  .cases[data-rail] .case__next .textlink svg { display: inline-block; vertical-align: -0.22em; margin-left: 2px; }
}
/* The narrowest phones (320px, or display zoom): the longest service buttons drop their arrow so the words fit the pill. */
@media (max-width: 350px) {
  /* "Enquire about Professional" cannot sit on one line in a 192px pill at a
     size anyone can read, so it takes two lines rather than being wedged in. */
  .glass__cta {
    font-size: 0.875rem; padding: 12px 18px; white-space: normal;
    line-height: 1.25; text-wrap: balance;
  }
  .glass__cta svg { display: none; }
}

/* ---------- Reviews ---------- */

.reviews__aside { display: grid; justify-items: center; gap: 18px; }
.reel__toggle {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 16px 0 12px;
  border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03);
  color: var(--text-2); font: inherit; font-size: 0.875rem; font-weight: 600;
  cursor: pointer; transition: color .2s, border-color .2s, background-color .2s;
}
.reel__toggle[hidden] { display: none; }
.reel__toggle:hover { color: var(--text); border-color: var(--line-3); background: rgba(255, 255, 255, .06); }
.reel__toggle svg { width: 16px; height: 16px; }

.reel { max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.reel__track { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 16px; }
.reel__item { display: flex; min-width: 0; }
.review {
  position: relative; display: flex; flex-direction: column; width: 100%; margin: 0;
  padding: clamp(26px, 2.4vw, 36px);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: border-color .3s var(--ease);
}
.review:hover { border-color: var(--line-2); }
.review__stars { display: flex; gap: 3px; color: var(--text); }
.review__stars svg { width: 16px; height: 16px; }
.review blockquote { margin: 20px 0 28px; }
.review blockquote p { font-size: clamp(1.0625rem, 0.98rem + 0.3vw, 1.1875rem); line-height: 1.6; color: var(--text-2); }
.review blockquote strong { font-weight: 600; color: var(--text); }
.review--short blockquote strong { display: block; margin-bottom: 12px; font-size: clamp(1.5rem, 1.05rem + 1.2vw, 2.125rem); line-height: 1.2; font-weight: 720; font-stretch: 106%; letter-spacing: -0.02em; }
.review figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line); }
.review__avatar { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #2b2b2b, #181818); border: 1px solid var(--line-2); color: var(--text); font-size: 0.8125rem; font-weight: 750; }
.review figcaption strong { display: block; font-weight: 650; line-height: 1.35; }
.review figcaption small { display: block; font-size: 0.875rem; color: var(--text-3); }

/* Live reel: a full-bleed track the script drifts, drags and couples to page scroll. */
.reel.is-live {
  max-width: none; padding: 6px 0 12px; overflow: hidden; touch-action: pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.reel.is-live .reel__track { display: flex; align-items: stretch; gap: 16px; width: max-content; will-change: transform; }
.reel.is-live .reel__item { flex: none; width: min(var(--w, 30rem), 84vw); }
.reel.is-dragging { user-select: none; }
@media (hover: hover) and (pointer: fine) {
  .reel.is-live { cursor: grab; }
  .reel.is-dragging { cursor: grabbing; }
}

/* Swipe reel: one card at a time on touch and narrow screens. */
.reel.is-swipe {
  max-width: none; padding: 6px var(--gutter) 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.reel.is-swipe::-webkit-scrollbar { display: none; }
.reel.is-swipe .reel__track { display: flex; align-items: stretch; gap: 12px; width: max-content; }
.reel.is-swipe .reel__item { flex: none; width: min(calc(100vw - 2 * var(--gutter) - 28px), 34rem); scroll-snap-align: start; }

/* ---------- Offer (free mockup) ---------- */

/* One focused card: the promise, three guarantees, the action, then a single design coming to life. */
.offer {
  display: grid; justify-items: center; text-align: center;
  padding: clamp(48px, 6vw, 96px) clamp(22px, 5vw, 80px) clamp(44px, 5vw, 80px);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, #151515, #0d0d0d);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.offer__title { font-size: clamp(2.25rem, 1.1rem + 3.4vw, 4.25rem); line-height: 1; font-weight: 760; font-stretch: 112%; letter-spacing: -0.04em; max-width: 16ch; margin-inline: auto; }
.offer__lede { margin: 22px auto 0; max-width: 46ch; color: var(--text-2); font-size: clamp(1.125rem, 1rem + 0.35vw, 1.3125rem); line-height: 1.55; text-wrap: balance; }
.promises { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 900px; margin-top: clamp(32px, 4vw, 48px); border-block: 1px solid var(--line); }
.promises li { display: grid; gap: 4px; padding: 20px 18px; }
.promises li + li { border-left: 1px solid var(--line); }
.promises strong { font-size: 1.125rem; font-weight: 700; font-stretch: 106%; letter-spacing: -0.015em; }
.promises span { color: var(--text-3); font-size: 0.9375rem; line-height: 1.45; }
.offer__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 32px; margin-top: clamp(28px, 3.5vw, 40px); }

/* The demo: a real homepage's HTML and CSS type out, the preview renders every finished line and rule, then it goes live and scrolls. */
.build { width: 100%; max-width: 900px; margin: clamp(40px, 5vw, 64px) auto 0; }
.build__window { overflow: hidden; border-radius: 16px; background: #0c0c0c; text-align: left; box-shadow: 0 0 0 1px var(--line-2), 0 50px 90px -40px rgba(0, 0, 0, .9); }
.build__bar { position: relative; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; background: #161616; border-bottom: 1px solid var(--line); }
.build__bar > i { width: 9px; height: 9px; border-radius: 50%; background: #3a3a3a; }
.build__tabs, .build__url { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 2px; font-size: 0.75rem; line-height: 1; white-space: nowrap; }
.build__tabs b { padding: 6px 12px; border-radius: 6px; font-weight: 500; color: var(--text-3); transition: color .2s, background-color .2s; }
.build__tabs b.is-on { color: var(--text); background: rgba(255, 255, 255, .08); }
.build__url { padding: 6px 16px; border-radius: 6px; background: #0c0c0c; color: var(--text-2); }
.build__stage { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0c0c0c; }

.build__editor { position: absolute; inset: 0; display: none; font: 400 clamp(9.5px, 0.52rem + 0.34vw, 13px)/1.75 ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; color: var(--text-2); }
.build.is-live .build__editor { display: block; }
.build__file { position: absolute; inset: 16px 16px 44px 6px; overflow: hidden; }
.build__file[hidden] { display: none; }
.build__lines { transition: transform .3s var(--ease); }
.build__l { display: grid; grid-template-columns: 3ch minmax(0, 1fr); column-gap: 1.6ch; }
.build__l[hidden] { display: none; }
.build__l > i { font-style: normal; text-align: right; color: #4a4a4a; }
.build__l > span { white-space: pre-wrap; overflow-wrap: anywhere; }
.build .t-tag, .build .t-sel { color: #f3f3f3; }
.build .t-attr, .build .t-prop { color: #9a9a9a; }
.build .t-str, .build .t-val { color: #d0d0d0; }
.build .t-txt { color: #7c7c7c; }
.build .t-pun { color: #5c5c5c; }
.build .t-cmt { color: #5a5a5a; font-style: italic; }
.build__caret { display: inline-block; width: 2px; height: 1.15em; margin: 0 -1px -0.22em; background: var(--accent); }
.build__caret.is-idle { animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.build__status { position: absolute; left: 16px; bottom: 14px; display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--font); font-size: 0.8125rem; font-weight: 600; color: var(--text); }
.build__status svg { width: 16px; height: 16px; }
.build__status:empty { display: none; }

.build__preview { position: absolute; inset: 0; overflow: hidden; background: #ffffff; transform-origin: 100% 100%; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .14); }
.build__render { position: absolute; inset: 0; }
.build__site, .build__site img { position: absolute; left: 0; top: 0; width: 100%; max-width: none; height: auto; will-change: transform; }
.build__site { display: block; }
.build.is-live .build__url { opacity: 0; }
.build:not(.is-live) .build__tabs { display: none; }
.build__caption { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 20px; margin-top: 18px; font-size: 0.9375rem; color: var(--text-3); }

@media (max-width: 760px) {
  .offer__copy { order: 1; }
  .build { order: 2; margin-top: 32px; }
  .promises { order: 3; }
  .offer__actions { order: 4; }
  .promises { grid-template-columns: 1fr; }
  .promises li { padding: 16px 8px; }
  .promises li + li { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .build__stage { aspect-ratio: 2 / 3; }
  .build__bar { height: 32px; }
  html.build-demo-on .office:not(.is-open) { opacity: 0; visibility: hidden; }
}
@media (max-width: 520px) {
  .offer__actions { width: 100%; }
  .offer__actions .btn { width: 100%; }
}

/* ---------- Process ---------- */

/* A timeline that comes to life as it scrolls: a white line runs down the middle, and each step lights up as the line reaches it.
   Without the script (or with reduced motion) every step shows lit. */
.timeline { position: relative; isolation: isolate; max-width: 1120px; margin-inline: auto; --rail-top: 0px; --rail-h: 0px; --fill: 1; }
.timeline__rail { position: absolute; left: 50%; top: var(--rail-top); height: var(--rail-h); width: 2px; margin-left: -1px; border-radius: 2px; background: rgba(255, 255, 255, .1); pointer-events: none; }
.timeline__fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .35), #ffffff); transform-origin: 50% 0; transform: scaleY(var(--fill)); }
.timeline__head { position: absolute; left: 50%; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(255, 255, 255, .1), 0 0 18px 4px rgba(255, 255, 255, .35); transform: translateY(calc(var(--fill) * var(--rail-h))); opacity: 0; transition: opacity .4s; }
.timeline.is-live.is-running .timeline__head { opacity: 1; }
.timeline__steps { list-style: none; display: grid; gap: 10px; }

.tl-step {
  position: relative; display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr); grid-template-areas: "mark dot text";
  padding: clamp(30px, 3.4vw, 46px) clamp(22px, 4vw, 64px);
}
.tl-step:nth-child(even) { grid-template-areas: "text dot mark"; }
/* The band that fades in behind a lit step. It sits under the line, so the line reads as one piece. */
.tl-step::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 44px;
  background: linear-gradient(180deg, #151515, #0f0f0f); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 1px 0 rgba(255, 255, 255, .05);
  opacity: 0; transform: scale(.98); transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.tl-step__mark { grid-area: mark; justify-self: end; display: flex; align-items: center; gap: 14px; padding-right: clamp(16px, 2.4vw, 34px); }
.tl-step:nth-child(even) .tl-step__mark { justify-self: start; flex-direction: row-reverse; padding: 0 0 0 clamp(16px, 2.4vw, 34px); }
.tl-step__tile {
  width: clamp(64px, 5.2vw, 80px); height: clamp(64px, 5.2vw, 80px); display: grid; place-items: center; border-radius: 24px;
  background: #101010; color: #6c6c6c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  transition: background-color .6s var(--ease), color .6s var(--ease), box-shadow .6s var(--ease), transform .6s var(--ease);
}
.tl-step__tile svg { width: 42%; height: 42%; }
.tl-step__num { display: grid; place-items: center; min-width: 38px; height: 32px; padding: 0 8px; border-radius: 10px; font-size: 0.875rem; font-weight: 650; font-variant-numeric: tabular-nums; color: #6c6c6c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: color .6s var(--ease), background-color .6s var(--ease), box-shadow .6s var(--ease); }
.tl-step__dot { grid-area: dot; justify-self: center; position: relative; width: 22px; height: 22px; border-radius: 8px; background: #0b0b0b; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22); transition: box-shadow .5s var(--ease); }
.tl-step__dot::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform .5s var(--ease); }
.tl-step__text { grid-area: text; max-width: 30rem; padding-left: clamp(16px, 2.4vw, 34px); }
.tl-step:nth-child(even) .tl-step__text { justify-self: end; text-align: right; padding: 0 clamp(16px, 2.4vw, 34px) 0 0; }
.tl-step__text h3 { font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem); line-height: 1.1; font-weight: 720; font-stretch: 110%; letter-spacing: -0.025em; color: #929292; transition: color .6s var(--ease); }
.tl-step__text p { margin-top: 10px; font-size: clamp(0.9688rem, 0.94rem + 0.15vw, 1.0625rem); line-height: 1.6; color: #858585; transition: color .6s var(--ease); }
.tl-step__text .tl-step__when { margin-top: 12px; font-size: 0.9375rem; font-weight: 650; font-variant-numeric: tabular-nums; color: #858585; }

/* Lit */
.tl-step.is-on::before, .timeline:not(.is-live) .tl-step::before { opacity: 1; transform: none; }
.tl-step.is-on .tl-step__tile, .timeline:not(.is-live) .tl-step__tile {
  background: linear-gradient(180deg, #ffffff, #d4d4d4); color: #070707;
  box-shadow: inset 0 1px 0 #ffffff, inset 0 -3px 6px rgba(0, 0, 0, .14), 0 16px 34px -14px rgba(0, 0, 0, .9);
}
.tl-step.is-on .tl-step__num, .timeline:not(.is-live) .tl-step__num { color: var(--text); background: #1d1d1d; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.tl-step.is-on .tl-step__dot, .timeline:not(.is-live) .tl-step__dot { box-shadow: inset 0 0 0 2px #ffffff, 0 0 0 6px rgba(255, 255, 255, .07), 0 0 20px rgba(255, 255, 255, .22); }
.tl-step.is-on .tl-step__dot::after, .timeline:not(.is-live) .tl-step__dot::after { transform: scale(1); }
.tl-step.is-on .tl-step__text h3, .timeline:not(.is-live) .tl-step__text h3 { color: var(--text); }
.tl-step.is-on .tl-step__text p, .timeline:not(.is-live) .tl-step__text p { color: var(--text-2); }
.tl-step.is-on .tl-step__text .tl-step__when, .timeline:not(.is-live) .tl-step__text .tl-step__when { color: var(--text); }
.tl-step.is-on .tl-step__tile { transform: translateY(-2px); }

/* Phones: the line runs down the left, every step reads the same way round. */
@media (max-width: 760px) {
  .timeline__rail { left: 23px; }
  .tl-step, .tl-step:nth-child(even) { grid-template-columns: 46px minmax(0, 1fr); grid-template-areas: "dot mark" "dot text"; align-items: start; padding: 22px 18px 24px 0; }
  .tl-step::before { left: 38px; border-radius: 28px; }
  .tl-step__dot { grid-row: 1 / span 2; align-self: start; margin-top: 44px; }
  .tl-step__mark, .tl-step:nth-child(even) .tl-step__mark { justify-self: start; flex-direction: row; padding: 0 0 0 16px; }
  .tl-step__tile { width: 58px; height: 58px; border-radius: 18px; }
  .tl-step__text, .tl-step:nth-child(even) .tl-step__text { justify-self: start; text-align: left; padding: 14px 0 0 16px; }
}

@media (max-width: 1060px) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 600px) {
  .features { grid-template-columns: 1fr; }
  .feature, .feature + .feature { padding: 18px 0; border-left: 0; border-bottom: 1px solid var(--line); }
}

/* ---------- FAQ ---------- */

.faq { display: grid; justify-items: center; gap: clamp(40px, 5vw, 64px); }
.faq__intro { display: grid; justify-items: center; text-align: center; }
.faq__intro .section__title { max-width: 18ch; }
.faq__intro p { margin-top: 20px; color: var(--text-2); max-width: 44ch; font-size: clamp(1.125rem, 1rem + 0.35vw, 1.3125rem); }
.faq__intro .btn { margin-top: 28px; }
.accordion { list-style: none; display: grid; gap: 10px; width: 100%; max-width: 880px; }
.accordion details { border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); transition: border-color .3s var(--ease), background-color .3s var(--ease); }
.accordion details[open] { background: var(--surface-2); border-color: var(--line-2); }
.accordion summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; cursor: pointer; font-size: clamp(1.0313rem, 0.98rem + 0.25vw, 1.1563rem); font-weight: 600; line-height: 1.35; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary span.plus { position: relative; width: 32px; height: 32px; flex: none; border-radius: 50%; border: 1px solid var(--line-2); transition: transform .35s var(--ease), background-color .3s, border-color .3s; }
.accordion summary span.plus::before, .accordion summary span.plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -0.75px 0 0 -6px; background: var(--text); border-radius: 2px; transition: transform .35s var(--ease); }
.accordion summary span.plus::after { transform: rotate(90deg); }
.accordion details[open] summary span.plus { background: var(--accent); border-color: var(--accent); transform: rotate(45deg); }
.accordion details[open] summary span.plus::before, .accordion details[open] summary span.plus::after { background: var(--accent-ink); }
.accordion summary:hover span.plus { border-color: var(--line-3); }
.accordion__body { padding: 0 22px 22px; color: var(--text-2); max-width: 64ch; }
.accordion__body a { color: var(--accent); font-weight: 600; }
.accordion__body a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .faq { grid-template-columns: 1fr; }
  .faq__intro { position: static; }
}

/* ---------- Contact ---------- */

/* One frame, two halves: the ways to reach me and what happens next on the left, the form on its own panel on the right. */
.desk {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  overflow: hidden; border-radius: var(--radius-xl);
  background: #0f0f0f; border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 70px 120px -60px rgba(0, 0, 0, .9);
}
.desk__info { padding: clamp(32px, 4.6vw, 64px); }
.desk__title { max-width: 12ch; }
.desk__lede { margin-top: 18px; max-width: 40ch; color: var(--text-2); }
.desk__form { display: flex; flex-direction: column; padding: clamp(32px, 4.6vw, 64px) clamp(28px, 4.2vw, 60px); background: #161616; border-left: 1px solid var(--line); }
/* Side by side, both halves start and end together: the message box takes the height the details leave. */
@media (min-width: 1200px) {
  .desk__form .form { flex: 1; display: flex; flex-direction: column; }
  .desk__form .form__grid { flex: 1; grid-template-rows: auto auto minmax(0, 1fr); }
  .desk__form .field--full { grid-template-rows: auto minmax(0, 1fr); align-content: stretch; }
  .desk__form .field--full textarea { height: 100%; }
}

.reach { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 28px; margin-top: clamp(28px, 3.4vw, 40px); }
.reach a { display: flex; align-items: flex-start; gap: 14px; }
.reach__icon { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); color: var(--text); transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.reach__icon svg { width: 19px; height: 19px; }
.reach small { display: block; font-size: 0.8125rem; line-height: 1.35; color: var(--text-3); }
.reach strong { display: block; margin-top: 3px; font-size: 1rem; font-weight: 620; line-height: 1.35; color: var(--text); overflow-wrap: anywhere; }
.reach a:hover .reach__icon, .reach a:focus-visible .reach__icon { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.expect { margin-top: clamp(32px, 4vw, 48px); padding-top: clamp(26px, 3vw, 34px); border-top: 1px solid var(--line); }
.expect__title, .desk__formtitle { font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem); line-height: 1.1; font-weight: 720; font-stretch: 110%; letter-spacing: -0.02em; }
.desk__formtitle { margin-bottom: clamp(20px, 2.4vw, 28px); }
.expect__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; margin: 14px 0 0; }
.expect__list div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.expect__list dt { font-size: 0.9375rem; color: var(--text-3); }
.expect__list dd { margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--text); text-align: right; }

/* Below 1200px the halves get too narrow for the two-column details, so the frame stacks: details, then the form. */
@media (max-width: 1199px) {
  .desk { grid-template-columns: 1fr; }
  .desk__form { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .reach { grid-template-columns: 1fr; gap: 20px; }
  .expect__list { grid-template-columns: 1fr; }
}

.formcard {
  padding: clamp(24px, 3.4vw, 44px);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 40px 80px -40px rgba(0, 0, 0, .8);
}
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 8px; align-content: start; }
.field--full { grid-column: 1 / -1; }
.field > span { font-size: 0.9063rem; font-weight: 560; color: var(--text); }
.field > span em { font-style: normal; font-weight: 400; color: var(--text-3); }
.field input, .field select, .field textarea {
  width: 100%;
  font: inherit; font-size: 1rem; color: var(--text);
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line-2); border-radius: 14px;
  padding: 14px 16px;
  outline: none;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.55; }
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23adadad' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
.field select option { background: #151515; color: var(--text); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-3); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--accent); background-color: rgba(255, 255, 255, .04); box-shadow: 0 0 0 4px rgba(255, 255, 255, .12); outline: none; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(255, 122, 102, .12); }
.field__error { font-size: 0.875rem; color: var(--danger); }
.field__error:empty { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 24px; }
.form__note { font-size: 0.9063rem; color: var(--text-3); }
.form__status { margin-top: 18px; padding: 16px 18px; border-radius: 16px; line-height: 1.5; }
.form__status[hidden] { display: none; }
.form__status--ok { background: var(--accent-soft); border: 1px solid rgba(255, 255, 255, .3); color: var(--text); }
.form__status--err { background: rgba(255, 122, 102, .1); border: 1px solid rgba(255, 122, 102, .35); color: var(--text); }
.form__status a { color: var(--accent); font-weight: 650; }
.form.is-sent .form__grid, .form.is-sent .form__foot { display: none; }

@media (max-width: 600px) {
  .form__grid { grid-template-columns: 1fr; }
  .form__foot .btn { width: 100%; }
}

/* ---------- Footer ---------- */

.footer { position: relative; padding: clamp(48px, 6vw, 80px) 0 28px; border-top: 1px solid var(--line); overflow: hidden; }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; padding-bottom: clamp(40px, 5vw, 64px); }
.footer__lockup { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer__brand img { width: 44px; height: 44px; }
.footer__name { font-size: 1.25rem; font-weight: 720; font-stretch: 110%; letter-spacing: -0.02em; line-height: 1; }
.footer__name span { color: var(--accent); }
.footer__brand p { color: var(--text-2); max-width: 30ch; }
.footer h3 { font-size: 0.875rem; font-weight: 600; color: var(--text-3); margin-bottom: 14px; }
.footer ul { list-style: none; display: grid; gap: 10px; }
.footer li a { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); transition: color .2s; }
.footer li a:hover { color: var(--text); }
.footer li a svg { width: 16px; height: 16px; }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 22px 0 calc(84px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--text-3); }

@media (max-width: 860px) { .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer__brand { grid-column: 1 / -1; } }
/* Phones: Services and Studio side by side, Connect across the bottom in two columns, instead of one long list. */
@media (max-width: 600px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; }
  .footer__grid > div:last-child { grid-column: 1 / -1; }
  .footer__grid > div:last-child ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
  .footer__base { flex-direction: column; gap: 6px; }
}

/* ---------- Assistant ---------- */

.office { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 85;
  transition: transform .45s var(--ease); }
.menu-open .office { visibility: hidden; }
.office__launch {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 54px; padding: 0 20px 0 16px;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px;
  background: rgba(17, 17, 17, .82);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  color: var(--text); font: inherit; font-size: 0.9375rem; font-weight: 620;
  cursor: pointer;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8);
  transition: border-color .25s, transform .25s var(--ease), background-color .25s;
}
.office__launch { padding: 0 18px 0 12px; min-height: 60px; }
.office__launch:hover { border-color: rgba(255, 255, 255, .5); transform: translateY(-2px); }
.office__launch:active { transform: translateY(0) scale(.985); }
.office__launch .office__badge { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
.office__launch svg { width: 18px; height: 18px; }

/* Two lines: what it is, and what it does for you. */
.office__label { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; text-align: left; }
.office__label small { font-size: 0.75rem; font-weight: 500; color: var(--text-3); letter-spacing: 0; }

/* A small live indicator, which the brief allows, and one ring on arrival.
   It rings once rather than looping, so it never needs a pause control. */
.office__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; margin-left: 2px; }
.office__pulse { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--accent); opacity: 0; pointer-events: none; }
.office.is-ready .office__pulse { animation: officering 1.6s var(--ease) .4s 2; }
@keyframes officering {
  0% { opacity: .55; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.85); }
}
@media (prefers-reduced-motion: reduce) { .office.is-ready .office__pulse { animation: none; } }
html.is-static .office__pulse { animation: none !important; }

/* Collapsed, it is just the mark and the live dot. */
.office.is-compact:not(.is-open) .office__label,
.office.is-compact:not(.is-open) .office__dot { display: none; }
.office.is-compact:not(.is-open) .office__launch { padding: 0; width: 54px; justify-content: center; }
.office.is-compact:not(.is-open) .office__launch { gap: 0; }
/* After five seconds on the page the launcher starts to breathe, so it is noticed
   by someone who has settled in to read without ever interrupting them. It stops
   the moment the panel is opened or the card is closed. */
.office__launch { position: relative; }
.office.is-glowing:not(.is-open) .office__launch { animation: officeglow 2.8s var(--ease) infinite; }
.office.is-glowing:not(.is-open) .office__launch::after {
  content: ''; position: absolute; inset: -3px; border-radius: 999px; pointer-events: none;
  border: 1px solid var(--accent); opacity: 0;
  animation: officehalo 2.8s var(--ease) infinite;
}
@keyframes officeglow {
  0%, 100% { box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8), 0 0 0 0 rgba(255, 255, 255, 0); }
  50%      { box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8), 0 0 26px -2px rgba(255, 255, 255, .30); }
}
@keyframes officehalo {
  0%   { opacity: .5; transform: scale(1); }
  70%  { opacity: 0;  transform: scale(1.12); }
  100% { opacity: 0;  transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .office.is-glowing:not(.is-open) .office__launch,
  .office.is-glowing:not(.is-open) .office__launch::after { animation: none; }
}
html.is-static .office.is-glowing .office__launch,
html.is-static .office.is-glowing .office__launch::after { animation: none !important; }

/* A small card above the launcher, closable, never covering the page. */
.office__teaser {
  position: absolute; right: 0; bottom: calc(100% + 12px);
  width: max-content; max-width: min(288px, calc(100vw - 32px));
  display: flex; align-items: flex-start; gap: 8px;
  padding: 12px 10px 12px 14px;
  border-radius: 16px; border: 1px solid var(--line-2);
  background: rgba(17, 17, 17, .92);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 26px 56px -24px rgba(0, 0, 0, .9);
  opacity: 0; transform: translateY(8px) scale(.96); transform-origin: bottom right;
  transition: opacity .3s var(--ease), transform .4s var(--ease);
}
.office__teaser[hidden] { display: none; }
.office.is-teasing .office__teaser { opacity: 1; transform: translateY(0) scale(1); }
.office__teaser-say { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--text-2); text-align: left; }
.office__teaser-say b { display: block; font-size: 0.875rem; font-weight: 650; color: var(--text); margin-bottom: 2px; }
.office__teaser-x {
  flex: none; width: 24px; height: 24px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--text-3);
  cursor: pointer; transition: background-color .2s, color .2s;
}
.office__teaser-x:hover { background: rgba(255, 255, 255, .1); color: var(--text); }
.office__teaser-x svg { width: 13px; height: 13px; }
/* It belongs to the launcher, so it goes when the panel takes over. */
.office.is-open .office__teaser { display: none; }

@media (max-width: 560px) {
  .office:not(.is-open) .office__launch { padding: 0; width: 54px; justify-content: center; }
  .office:not(.is-open) .office__label, .office:not(.is-open) .office__dot { display: none; }
}
.office__panel {
  position: absolute; right: 0; bottom: calc(100% + 12px);
  width: min(390px, calc(100vw - 32px));
  max-height: min(620px, calc(100svh - 120px));
  display: grid; grid-template-rows: auto 1fr auto;
  border-radius: 24px; overflow: hidden;
  background: rgba(15, 15, 15, .94);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid var(--line-2);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9);
  transform-origin: bottom right;
  opacity: 0; transform: translateY(10px) scale(.97); visibility: hidden;
  transition: opacity .25s var(--ease), transform .35s var(--ease), visibility 0s .35s;
}
.office.is-open .office__panel { opacity: 1; transform: none; visibility: visible; transition: opacity .25s var(--ease), transform .35s var(--ease); }
.office__head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; border-bottom: 1px solid var(--line); }
.office__avatar { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); border: 1px solid rgba(255, 255, 255, .3); }
.office__avatar img { width: 24px; height: 24px; }
.office__head strong { display: block; font-weight: 650; line-height: 1.35; }
.office__head small { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--text-3); }
.office__close { margin-left: auto; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--text); cursor: pointer; }
.office__close:hover { background: rgba(255, 255, 255, .06); }
.office__close svg { width: 16px; height: 16px; }
.office__log { overflow-y: auto; padding: 16px; display: grid; align-content: start; gap: 10px; overscroll-behavior: contain; }
.msg { max-width: 86%; padding: 11px 14px; border-radius: 18px; font-size: 0.9375rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg--bot { justify-self: start; background: var(--surface-3); border-bottom-left-radius: 6px; }
.msg--me { justify-self: end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 6px; }
.msg--typing { color: var(--text-3); }
.msg a { color: var(--accent); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.msg--me a { color: inherit; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chips button { font: inherit; font-size: 0.8438rem; padding: 7px 12px; border-radius: 999px; background: transparent; color: var(--text-2); border: 1px solid var(--line-2); cursor: pointer; transition: border-color .2s, color .2s; }
.chips button:hover { border-color: var(--accent); color: var(--accent); }
/* The moment the assistant hands a visitor to Quallo. Quiet, but unmistakable. */
.msg--sent {
  justify-self: center; display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  font-size: 0.8125rem; font-weight: 700; letter-spacing: -0.01em;
}
.msg--sent::before {
  content: ""; width: 13px; height: 13px; flex: none; border-radius: 50%;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
}
.office__form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.office__form input { flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: 11px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); color: var(--text); outline: none; }
.office__form input:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 255, 255, .12); }
.office__form .btn { min-height: 44px; }
.office__wa { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px; font-size: 0.875rem; font-weight: 600; color: var(--text-2); border-top: 1px solid var(--line); transition: color .2s; }
.office__wa:hover { color: var(--accent); }
.office__wa svg { width: 16px; height: 16px; }

/* ---------- Quote pages ---------- */

.rfp { padding-block: calc(var(--nav-h) + clamp(56px, 8vw, 96px)) clamp(72px, 9vw, 128px); }
.rfp__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.rfp__intro { position: sticky; top: 120px; }
.rfp__back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 28px; color: var(--text-2); font-weight: 600; }
.rfp__back:hover { color: var(--text); }
.rfp__back svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.rfp__back:hover svg { transform: translateX(-3px); }
.rfp h1 { font-size: clamp(2.5rem, 1.2rem + 3.6vw, 4.25rem); line-height: 1; font-weight: 760; font-stretch: 112%; letter-spacing: -0.04em; max-width: 13ch; }
/* The package a visitor picked on the homepage, shown back to them on the form. */
.rfp__pack {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; margin-bottom: 14px;
  border-radius: 999px; background: var(--wash); border: 1px solid var(--line);
  color: var(--text-2); font-size: 0.8125rem; font-weight: 650;
}
.rfp__lede { margin-top: 20px; color: var(--text-2); font-size: clamp(1.0625rem, 0.98rem + 0.3vw, 1.1875rem); max-width: 40ch; }
.rfp__terms { list-style: none; display: grid; gap: 10px; margin-top: 32px; }
.rfp__terms li { display: flex; align-items: center; gap: 12px; color: var(--text-2); }
.rfp__terms li svg { width: 20px; height: 20px; color: var(--text-2); }
.rfp__terms li strong { color: var(--text); font-weight: 620; }
.rfp__terms a { color: var(--accent); font-weight: 600; }

.wizard__progress { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.wizard__steps { list-style: none; display: flex; gap: 6px; flex: 1; }
.wizard__steps li { flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; position: relative; }
.wizard__steps li::after { content: ''; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.wizard__steps li.is-done::after, .wizard__steps li[aria-current='step']::after { transform: scaleX(1); }
.wizard__count { font-size: 0.875rem; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wizard fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 20px; }
.wizard legend { float: left; width: 100%; padding: 0; margin-bottom: 6px; font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); font-weight: 720; font-stretch: 110%; letter-spacing: -0.03em; line-height: 1.1; }
.js .wizard fieldset:not(.is-active) { display: none; }
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); font-size: 0.9375rem; color: var(--text-2); cursor: pointer; user-select: none; transition: background-color .2s, color .2s, border-color .2s; }
.chip:hover span { border-color: var(--line-3); color: var(--text); }
.chip input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wizard__nav { display: flex; align-items: center; gap: 10px; margin-top: 28px; }
.wizard__nav .spacer { flex: 1; }
.wizard__nav .btn[hidden] { display: none; }
.wizard.is-sent fieldset, .wizard.is-sent .wizard__nav, .wizard.is-sent .wizard__progress { display: none; }

@media (max-width: 960px) {
  .rfp__grid { grid-template-columns: 1fr; }
  .rfp__intro { position: static; }
}
@media (max-width: 600px) {
  .row-2 { grid-template-columns: 1fr; }
  .wizard__nav .btn--lg { flex: 1; }
}

/* ---------- Reveal motion ---------- */

/* The two parts sit on one row when they fit and stack when they don't; either way the title stays centred in the height reserved for its longest service. */
.hero__title { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; column-gap: .26em; }
.hero__title .line { display: inline-block; vertical-align: top; }
/* Tablets and phones always stack the service word over the rest, so no service changes how the title wraps. */
@media (max-width: 960px) { .hero__title .line--swap { flex-basis: 100%; } }
.can-move .hero__title .line { overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
/* The service word rolls: clipped top and bottom like the entrance, but free to widen sideways while the next word arrives. */
.can-move .hero__title .line--swap { overflow: visible; clip-path: inset(0 -50vw 0 -50vw); }
/* One track as wide as the slot, so a longer word overflows it evenly on both sides while the slot widens to fit. */
.hero__swap { display: inline-grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.hero__word { grid-area: 1 / 1; white-space: nowrap; }
.hero__swap:not(.is-live) .hero__word:not(.is-on) { display: none; }
.hero__swap.is-live { width: var(--swap-w, auto); }
.hero__swap.is-live .hero__word { opacity: 0; transform: translateY(.55em); filter: blur(8px); }
.hero__swap.is-live .hero__word.is-on { opacity: 1; transform: none; filter: none; }
.hero__swap.is-live .hero__word.is-out { opacity: 0; transform: translateY(-.55em); filter: blur(8px); }
.can-move .hero__swap.is-live { transition: width .85s var(--ease); }
.can-move .hero__swap.is-live .hero__word { transition: opacity .6s var(--ease), transform .85s var(--ease), filter .6s var(--ease); }
/* The slot starts opening and the old word starts leaving a beat before the new one arrives, so they never crowd each other. */
.can-move .hero__swap.is-live .hero__word.is-on { transition-delay: .12s; }
.can-move .hero__title .line > span { display: block; animation: line-up 1.1s var(--ease) both; }
.can-move .hero__title .line:nth-child(2) > span { animation-delay: .08s; }
.can-move .hero__title .line:nth-child(3) > span { animation-delay: .16s; }
.can-move .hero__title .line:nth-child(4) > span { animation-delay: .24s; }
@keyframes line-up { from { transform: translateY(105%); } }

/* ---------- Opening: the homepage boots inside a laptop ---------- */
/* boot.js drives the sequence; these rules hold the starting pose, so a failed script only ever leaves the page. */

.boot { display: none; position: fixed; inset: 0; z-index: 90; overflow: hidden; background: #000000; }
html.is-booting .boot, .boot.is-running { display: block; }
html.is-booting body::after { content: ''; position: fixed; inset: 0; z-index: 89; background: var(--bg); }
/* On a slow connection the visitor sees the loader (not a blank screen) while scripts arrive; if they never do, the page shows at 6s. */
html.is-booting .boot, html.is-booting body::after { animation: boot-fail 0s 6s forwards; }
.boot.is-running { animation: boot-fail 0s 12s forwards; }
@keyframes boot-fail { to { visibility: hidden; } }
/* The launcher never sits on a form someone is filling in: it steps aside while a field has focus, and stays off the quote wizards on phones. */
body:has(.field :focus) .office:not(.is-open) { opacity: 0; visibility: hidden; }
/* Stacked, the contact details run to the right edge where the launcher sits; the section already offers every way to reach Quallo. */
@media (max-width: 1199px) { html.contact-on .office:not(.is-open) { transform: translateY(-6px); } }
/* On phones the hero's deck arrows and full-width ask sit right where the launcher would; it waits until both have scrolled away. */
@media (max-width: 760px) { html.hero-ask-on .office:not(.is-open) { transform: translateY(-58px); } }
/* The back-end demo's app bar runs along the bottom of its window on phones; the launcher waits until the demo has passed. */
html.dash-on .office:not(.is-open) { transform: translateY(-62px); }
@media (max-width: 560px) { body:has(.wizard) .office { display: none; } }
/* The chat launcher waits for the hand-off, then arrives on its own. */
.office { transition: opacity .6s var(--ease) .12s; }
.boot-hold .office { opacity: 0; visibility: hidden; transition: none; }

/* The loader: the mark, a hairline that fills, and a count to 100. Before the script arrives, CSS already has it moving. */
@property --boot-p { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --boot-pct { syntax: '<integer>'; inherits: true; initial-value: 0; }
.boot__loader { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; pointer-events: none; }
html.is-booting .boot__loader { animation: boot-pre 1.4s cubic-bezier(.25, .7, .2, 1) both; }
@keyframes boot-pre { from { --boot-p: 0; --boot-pct: 0; } to { --boot-p: .46; --boot-pct: 46; } }
.boot__brand { position: relative; display: block; }
.boot__mark { display: block; width: auto; height: 100%; }
.boot__loader .boot__brand { height: clamp(78px, 9vw, 112px); aspect-ratio: 264 / 360; animation: boot-mark 1.1s var(--ease) both; }
@keyframes boot-mark { from { opacity: 0; transform: scale(.94); filter: blur(8px); } }
/* A slow light passing over the mark while it loads. */
.boot__glint {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, .55) 50%, rgba(0, 0, 0, 0) 62%) 160% 0 / 300% 100% no-repeat;
  -webkit-mask: url('brand/mark-white.webp') center / contain no-repeat; mask: url('brand/mark-white.webp') center / contain no-repeat;
  animation: boot-glint 1.8s .35s cubic-bezier(.45, 0, .2, 1) infinite;
}
@keyframes boot-glint { to { background-position: -60% 0; } }
.boot__meter { position: relative; display: block; height: 2px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .12); }
.boot__loader .boot__meter { width: clamp(150px, 15vw, 210px); margin-top: clamp(30px, 3.4vw, 42px); }
.boot__fill { position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--boot-p)); box-shadow: 0 0 10px rgba(255, 255, 255, .6); }
/* The count is the moment: legible, steady-width digits racing to 100. */
.boot__pct { margin-top: clamp(14px, 1.5vw, 20px); font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1875rem); font-weight: 600; font-stretch: 104%; letter-spacing: .02em; color: var(--text-2); font-variant-numeric: tabular-nums; counter-reset: boot-pct var(--boot-pct); }
.boot__pct::before { content: counter(boot-pct) '%'; }

/* The scene. The camera (2D) makes the final push exact; the model (3D) carries the depth: a tilt that settles, then straightens. */
.boot__cam { position: absolute; inset: 0; transform-origin: 0 0; opacity: 0; }
.boot__settle { position: absolute; inset: 0; transform-origin: var(--focus-x) var(--focus-y); }
.boot__rig {
  position: absolute; left: var(--rig-x); top: var(--rig-y); width: var(--lid-w); height: var(--lid-h);
  perspective: var(--persp); perspective-origin: 50% var(--eye); transform-style: preserve-3d;
}
.boot__model { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 50% 58%; }
.boot__lid { position: absolute; inset: 0; transform-origin: 50% 100%; transform-style: preserve-3d; }
.boot__face { position: absolute; inset: 0; border-radius: calc(var(--bezel) * 2.6) calc(var(--bezel) * 2.6) calc(var(--bezel) * .9) calc(var(--bezel) * .9); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
/* Space-black aluminium rim around black glass. Edges are inset shadows, not borders, so the screen sits exactly at the bezel offset the push is computed from. */
.boot__front {
  background: radial-gradient(120% 60% at 50% 0%, #121213, #050506 60%);
  box-shadow:
    inset 0 0 0 1px #5b5b5f, inset 0 1.5px 0 #9a9aa0, inset 0 0 0 calc(var(--bezel) * .32) #2a2a2d,
    inset 0 0 0 calc(var(--bezel) * .32 + 1px) rgba(255, 255, 255, .06), inset 0 -2px 3px rgba(0, 0, 0, .7);
}
.boot__back { transform: rotateY(180deg); background: linear-gradient(180deg, #3b3b3e, #1c1c1e); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.boot__win { position: absolute; left: var(--bezel); top: var(--win-top); width: var(--scr-w); height: var(--win-h); overflow: hidden; border-radius: 3px 3px 0 0; background: var(--bg); }
.boot__page { position: absolute; left: 0; top: 0; width: var(--page-w); height: var(--page-h); overflow: hidden; background: var(--bg); transform: scale(var(--page-s)); transform-origin: 0 0; }
.boot__page .hero__title .line > span { animation: none; }
.boot__page .deck *, .boot__page .deck *::after { animation: none !important; transition: none !important; }
/* The real deck holds its resting pose under the opening, so the hand-off from the copy has nothing to jump. */
html.is-booting .deck *, html.is-booting .deck *::after, html.boot-hold .deck *, html.boot-hold .deck *::after { animation-play-state: paused !important; }
/* The laptop's own boot screen: the same mark and meter the loader just finished. */
.boot__screen { position: absolute; left: var(--bezel); top: var(--bezel); width: var(--scr-w); height: var(--scr-h); display: grid; place-content: center; justify-items: center; border-radius: 3px 3px 0 0; background: #000000; }
.boot__screen .boot__brand { height: var(--brand-h, calc(var(--scr-h) * .17)); aspect-ratio: 264 / 360; }
.boot__screen .boot__meter { width: var(--meter-w, calc(var(--scr-w) * .16)); height: var(--meter-h, 1px); margin-top: var(--meter-gap, calc(var(--scr-h) * .07)); --boot-p: 1; }
/* Glass: a soft reflection across the screen that slides away as the camera arrives. */
.boot__sheen { position: absolute; left: var(--bezel); top: var(--bezel); width: var(--scr-w); height: var(--scr-h); pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .03) 26%, rgba(255, 255, 255, 0) 42%); }
.boot__webcam { position: absolute; left: 50%; top: calc(var(--bezel) * .5); width: max(3px, calc(var(--bezel) * .34)); height: max(3px, calc(var(--bezel) * .34)); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #3a3a3e, #09090b 60%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.boot__chin { position: absolute; left: 0; right: 0; top: calc(var(--bezel) + var(--scr-h)); height: var(--chin); border-radius: 0 0 calc(var(--bezel) * .9) calc(var(--bezel) * .9); background: linear-gradient(180deg, #050506, #09090a 55%, #1b1b1d); }
.boot__deck {
  position: absolute; left: 50%; top: 100%; width: calc(var(--lid-w) * 1.06); height: var(--deck-d);
  transform-origin: 50% 0; transform: translateX(-50%) translateY(1px) rotateX(90deg); transform-style: preserve-3d;
  border-radius: 4px 4px calc(var(--lid-w) * .022) calc(var(--lid-w) * .022);
  /* A rendered top case (assets/boot/laptop-deck.webp): real key layout, keyboard well, speaker grilles, glass trackpad, notch. */
  background: #1c1c1f url('boot/laptop-deck.webp') 0 0 / 100% 100% no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
/* The lit screen throws light onto its own deck: light on the device, not a pool on the ground. */
.boot__light { position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; background: radial-gradient(64% 100% at 50% 0%, rgba(255, 255, 255, .3), rgba(255, 255, 255, .07) 48%, rgba(255, 255, 255, 0) 80%); }
.boot__lip { position: absolute; left: .6%; right: .6%; top: 100%; height: calc(var(--lid-w) * .02); transform-origin: 50% 0; transform: rotateX(-90deg); border-radius: 0 0 calc(var(--lid-w) * .02) calc(var(--lid-w) * .02); background: linear-gradient(180deg, #6c6c70 0%, #2a2a2d 22%, #151517 100%); }
.boot__lip::after { content: ""; position: absolute; left: 50%; top: 0; width: 13%; height: 42%; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: #0b0b0c; }

/* ---------- Cinematic film ---------- */

.film { position: relative; }
.film__track { position: relative; }
.film__stage { position: relative; padding-block: clamp(72px, 9vw, 120px); }
.film__caps { display: grid; gap: 10px; text-align: center; padding-inline: var(--gutter); margin-bottom: 40px; }
.film__cap { font-size: clamp(2rem, 1rem + 3.4vw, 4.25rem); line-height: 1; font-weight: 760; font-stretch: 112%; letter-spacing: -0.04em; }
.film__scene { position: relative; display: grid; grid-template-columns: repeat(3, auto); justify-content: center; align-items: center; gap: 24px; padding-inline: var(--gutter); }
.film__laptop { width: min(620px, 52vw); }
.film__tablet { width: min(340px, 26vw); padding: 8px; border-radius: 22px; background: linear-gradient(160deg, #2c2c2c, #0f0f0f); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .9); }
.film__tablet-view { overflow: hidden; border-radius: 14px; aspect-ratio: 16 / 10.5; }
.film__tablet-view img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.film__phone { position: relative; left: auto; bottom: auto; width: min(160px, 14vw); transform: none; }
.film__progress { display: none; }

#tiers { padding-bottom: clamp(40px, 4vw, 64px); }
.film.is-live .film__track { height: 220vh; }

/* Tells a visitor the film is a scroll, not a still. It lives in the empty
   stretch before the devices arrive and fades out as they do. The film itself
   is untouched: no restyle, no retime. Scrolling is the only thing moving it. */
.film__hint {
  position: absolute; left: 50%; top: 38%; z-index: 2;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  color: var(--text-3); font-size: 0.9375rem; font-weight: 620; letter-spacing: -0.01em;
  white-space: nowrap; pointer-events: none;
}
/* The chevron sits in a ring, so the cue reads as a thing to do, not a stray label. */
.film__hint svg {
  width: 17px; height: 17px; transform: rotate(90deg);
  box-sizing: content-box; padding: 13px;
  border: 1px solid var(--line-2); border-radius: 50%;
}
/* With motion off nothing drives the fade, so the hint simply is not shown. */
html.is-static .film__hint { display: none; }
@media (prefers-reduced-motion: reduce) { .film__hint { display: none; } }
.film:not(.is-live) .film__hint { display: none; }
.film.is-live .film__stage { position: sticky; top: 0; height: 100svh; padding: 0; overflow: hidden; perspective: 1600px; }
.film.is-live .film__caps { position: absolute; inset: 0; margin: 0; padding: 0; pointer-events: none; z-index: 3; display: block; }
.film.is-live .film__cap { position: absolute; left: 50%; top: 14vh; width: min(92vw, 1100px); opacity: 0; will-change: opacity, transform; }
.film.is-live .film__scene { position: absolute; inset: 0; display: block; padding: 0; transform-style: preserve-3d; }
.film.is-live .film__laptop,
.film.is-live .film__tablet,
.film.is-live .film__phone { position: absolute; left: 50%; top: 58%; margin: 0; will-change: transform, opacity; opacity: 0; }
.film.is-live .film__laptop { width: min(820px, 64vw); z-index: 2; }
.film.is-live .film__tablet { width: min(420px, 30vw); z-index: 1; }
.film.is-live .film__phone { width: min(190px, 15vw); z-index: 3; }
.film.is-live .film__progress { display: block; position: absolute; left: 50%; bottom: 5vh; width: min(240px, 50vw); height: 3px; transform: translateX(-50%); border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; z-index: 3; }
.film.is-live .film__progress i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.film.is-live .film__stage::before { content: ''; position: absolute; left: 50%; top: 58%; width: 80vw; height: 60vh; transform: translate(-50%, -50%); background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, .08), transparent 70%); filter: blur(30px); pointer-events: none; }

@media (max-width: 1060px) {
  .film__scene { grid-template-columns: 1fr auto; }
  .film__tablet { display: none; }
  .film__laptop { width: min(620px, 62vw); }
  .film__phone { width: min(150px, 21vw); }
}
/* Phones run their own cut: the phone leads the first act at full size, the laptop joins it for the second.
   film.js drives both; these are the sizes it scales from. */
@media (max-width: 760px) {
  .film__scene { gap: 12px; }
  .film.is-live .film__track { height: 170vh; }
  .film.is-live .film__cap { top: 9vh; font-size: clamp(2.125rem, 1rem + 6.4vw, 3rem); }
  .film.is-live .film__laptop { width: 88vw; }
  .film.is-live .film__phone { width: 46vw; }
  /* Without motion the two devices still read as a pair, with the phone the bigger of the two. */
  .film:not(.is-live) .film__laptop { width: 54vw; }
  .film:not(.is-live) .film__phone { width: 28vw; }
  .film:not(.is-live) .film__scene { align-items: end; }
}

/* ---------- Light mode ---------- */

/* Dark is the default. [data-theme="light"] on <html> (the nav switch, remembered per device) turns the same black-and-white
   system around: a pale grey ground, white raised surfaces, black type and black actions, soft grey shadows in place of deep
   black ones. Devices (the film's laptop, tablet and phone, the opening laptop) stay space black, like product shots.
   Every colour set above for dark needs its counterpart here. */
[data-theme="light"] {
  color-scheme: light;
  scrollbar-color: #c4c4c4 var(--bg);
  --bg: #f5f5f5;
  --bg-2: #ededed;
  --surface: #ffffff;
  --surface-2: #fafafa;
  --surface-3: #eeeeee;
  --line: rgba(0, 0, 0, 0.08);
  --line-2: rgba(0, 0, 0, 0.13);
  --line-3: rgba(0, 0, 0, 0.24);
  --text: #0b0b0b;
  --text-2: #4f4f4f;
  --text-3: #6b6b6b;
  --accent: #0b0b0b;
  --accent-2: #2e2e2e;
  --accent-ink: #ffffff;
  --accent-soft: rgba(0, 0, 0, 0.06);
  --danger: #c2402c;
  --warn: #9a5a00;
  --num-dim: #cdcdcd;
  --num-lit: #0b0b0b;
}
/* Film grain in dark ink, so the pale ground has the same fine texture. */
[data-theme="light"] body::before { opacity: .04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
[data-theme="light"] .brand img, [data-theme="light"] .footer__brand img, [data-theme="light"] .office__avatar img, [data-theme="light"] .boot__mark { filter: invert(1); }

/* Nav, menu, buttons */
[data-theme="light"] .nav__inner { background: #ffffff; box-shadow: 0 16px 40px -22px rgba(0, 0, 0, .22); }
[data-theme="light"] .nav__links a:hover { background: rgba(0, 0, 0, .05); }
[data-theme="light"] .nav__links a[aria-current='true'] { background: rgba(0, 0, 0, .06); }
[data-theme="light"] .iconbtn { background: rgba(0, 0, 0, .025); }
[data-theme="light"] .iconbtn:hover { background: rgba(0, 0, 0, .06); }
[data-theme="light"] .mobile-menu { background: rgba(245, 245, 245, .96); }
[data-theme="light"] .btn--accent { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 24px -12px rgba(0, 0, 0, .35); }
[data-theme="light"] .btn--accent:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 16px 32px -14px rgba(0, 0, 0, .4); }
[data-theme="light"] .btn--ghost { background: rgba(255, 255, 255, .72); }
[data-theme="light"] .btn--ghost:hover { background: #ffffff; }
[data-theme="light"] .tag { background: rgba(0, 0, 0, .03); }
[data-theme="light"] .tag--live { border-color: rgba(0, 0, 0, .3); }

/* Services deck: white cards, and each black object in a pale photo studio */
[data-theme="light"] .svc-card { background: linear-gradient(180deg, #ffffff, #fbfbfb); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07), 0 1px 2px rgba(0, 0, 0, .04), 0 44px 80px -44px rgba(0, 0, 0, .28); }
[data-theme="light"] .art { background: radial-gradient(95% 80% at 50% 12%, #ffffff 0%, #efefef 48%, #dedede 100%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05), inset 0 1px 0 rgba(255, 255, 255, .9); }
[data-theme="light"] .art::after { background: radial-gradient(closest-side, rgba(0, 0, 0, .34), rgba(0, 0, 0, 0)); }
[data-theme="light"] .deck__arrow { background: #ffffff; border-color: rgba(0, 0, 0, .12); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 14px 30px -14px rgba(0, 0, 0, .3); }
[data-theme="light"] .deck__arrow:hover { background: #ffffff; border-color: rgba(0, 0, 0, .28); }
@media (max-width: 960px) { [data-theme="light"] .deck__arrow { box-shadow: none; } }
[data-theme="light"] .deck__dot i { background: rgba(0, 0, 0, .3); }
[data-theme="light"] .deck__dot:hover i { background: rgba(0, 0, 0, .55); }
[data-theme="light"] .deck__dot[aria-current="true"] i { background: rgba(0, 0, 0, .12); }
@media (max-width: 600px) { [data-theme="light"] .rail__dot i { background: rgba(0, 0, 0, .3); } }

/* Devices keep their space-black build; only their shadows soften for a pale ground. */
[data-theme="light"] .laptop__screen { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 60px 110px -40px rgba(0, 0, 0, .42); }
[data-theme="light"] .laptop__base { box-shadow: 0 26px 40px -22px rgba(0, 0, 0, .42); }
[data-theme="light"] .phone { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 40px 70px -24px rgba(0, 0, 0, .42); }
[data-theme="light"] .film__tablet { box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .42); }

/* Projects marquee */
[data-theme="light"] .marquee__set li { color: #333333; }
[data-theme="light"] .marquee__toggle { background: rgba(0, 0, 0, .03); }
[data-theme="light"] .marquee__toggle:hover { background: rgba(0, 0, 0, .06); }

/* Why it pays off */
[data-theme="light"] .benefits__tabs { background: rgba(0, 0, 0, .045); }
[data-theme="light"] .benefits__glider { background: #ffffff; box-shadow: none; }

/* Services glass: frosted white cards over the black word */
[data-theme="light"] .glass__card { background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .86) 55%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07), inset 0 1px 0 rgba(255, 255, 255, .9), 0 40px 80px -44px rgba(0, 0, 0, .25); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-theme="light"] .glass__card { background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .98) 55%); }
}
[data-theme="light"] .glass__card:hover { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), inset 0 1px 0 #ffffff, 0 50px 90px -44px rgba(0, 0, 0, .3); }
[data-theme="light"] .glass__cta { background: #ffffff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .13); }
[data-theme="light"] .glass__card--lead .glass__cta, [data-theme="light"] .glass__cta:hover, [data-theme="light"] .glass__cta:focus-visible { background: var(--accent); color: var(--accent-ink); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .35); }
@media (max-width: 600px) {
  [data-theme="light"] .glass__card:not(:first-child) { background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .98) 55%); }
  [data-theme="light"] .glass__grid[data-rail] .glass__card { background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .86) 50%); }
}

/* Back-end dashboard: a light app window */
[data-theme="light"] .appwin { background: linear-gradient(180deg, #ffffff, #fbfbfb); box-shadow: 0 60px 120px -60px rgba(0, 0, 0, .3); }
[data-theme="light"] .appwin__side { background: rgba(0, 0, 0, .018); }
[data-theme="light"] .appwin__bar { background: rgba(0, 0, 0, .025); }
[data-theme="light"] .appwin__rail { background: rgba(0, 0, 0, .022); }
[data-theme="light"] .board { background: rgba(0, 0, 0, .018); }
[data-theme="light"] .appwin__bar .appwin__tabs { background: rgba(0, 0, 0, .05); }
@media (max-width: 600px) { [data-theme="light"] .appwin__bar { background: rgba(255, 255, 255, .9); } }
[data-theme="light"] .appwin__search { background: rgba(0, 0, 0, .035); }
[data-theme="light"] .appwin__search kbd { background: rgba(0, 0, 0, .06); }
@media (max-width: 600px) { [data-theme="light"] .appwin__side { background: rgba(255, 255, 255, .88); } }
[data-theme="light"] .appwin__tabs button:hover { background: rgba(0, 0, 0, .045); }
[data-theme="light"] .kpi, [data-theme="light"] .card, [data-theme="light"] .slot { background: rgba(0, 0, 0, .018); }
[data-theme="light"] .kpi.is-bumped { background: rgba(0, 0, 0, .045); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
[data-theme="light"] .seg { background: rgba(0, 0, 0, .045); }
[data-theme="light"] .seg button[aria-checked="true"] { background: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 4px 10px -4px rgba(0, 0, 0, .14); }
[data-theme="light"] .chart__grid { stroke: rgba(0, 0, 0, .1); }
[data-theme="light"] .chart__line--now { filter: drop-shadow(0 0 5px rgba(0, 0, 0, .14)); }
[data-theme="light"] .chart__line--prev { stroke: rgba(0, 0, 0, .3); }
[data-theme="light"] #g-now stop, [data-theme="light"] #g-prev stop { stop-color: #000000; }
[data-theme="light"] #g-now stop:first-child { stop-opacity: .1; }
[data-theme="light"] #g-now stop:nth-child(2) { stop-opacity: .02; }
[data-theme="light"] #g-prev stop:first-child { stop-opacity: .045; }
[data-theme="light"] .chart__pulse { box-shadow: 0 0 10px 1px rgba(0, 0, 0, .25); }
[data-theme="light"] .chart__pulse::after { border-color: rgba(0, 0, 0, .4); }
[data-theme="light"] .chart__guide { background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3) 30%, rgba(0, 0, 0, .3) 70%, rgba(0, 0, 0, 0)); }
[data-theme="light"] .chart__dot--now { box-shadow: 0 0 0 4px rgba(0, 0, 0, .1), 0 0 12px rgba(0, 0, 0, .2); }
[data-theme="light"] .chart__dot--prev { background: #ffffff; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .5); }
[data-theme="light"] .chart__tip { background: rgba(255, 255, 255, .9); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 16px 30px -12px rgba(0, 0, 0, .22); }
[data-theme="light"] .chart__tip span + span i { box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .5); }
[data-theme="light"] .live i { box-shadow: 0 0 6px rgba(0, 0, 0, .3); }
[data-theme="light"].can-move .live.is-on i::after { border-color: rgba(0, 0, 0, .4); }
[data-theme="light"].can-move .feed li.is-new .feed__icon { animation-name: feed-glow-light; }
@keyframes feed-glow-light { from { box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 0 14px rgba(0, 0, 0, .15); } }
[data-theme="light"] .feed__icon { background: rgba(0, 0, 0, .05); }
[data-theme="light"] .feed__icon--ok { background: var(--accent-soft); }
[data-theme="light"] .feed__icon--warn, [data-theme="light"] .status--warn { background: rgba(154, 90, 0, .1); }
[data-theme="light"] .status { background: rgba(0, 0, 0, .05); }
[data-theme="light"] .status--ok { background: var(--accent-soft); }
[data-theme="light"] .stockbar { background: rgba(0, 0, 0, .08); }
[data-theme="light"] .bundle { background: #ffffff; }

/* Work */
[data-theme="light"] .case__media { background: #ffffff; }
[data-theme="light"] .case__browser { background: #ffffff; border-color: rgba(0, 0, 0, .1); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .28); }
[data-theme="light"] .case__browser .browserbar { background: #efefef; }
[data-theme="light"] .case__browser .browserbar i { background: #cccccc; }
[data-theme="light"] .case__browser .browserbar span { background: #ffffff; }
@media (max-width: 600px) { [data-theme="light"] .cases[data-rail] > .case:not(.case--next) { background: #ffffff; } }

/* Reviews */
[data-theme="light"] .review { box-shadow: inset 0 1px 0 #ffffff; }
[data-theme="light"] .review__avatar { background: linear-gradient(145deg, #f3f3f3, #e3e3e3); }
[data-theme="light"] .reel__toggle { background: rgba(0, 0, 0, .03); }
[data-theme="light"] .reel__toggle:hover { background: rgba(0, 0, 0, .06); }

/* Offer and its live build: a light editor */
[data-theme="light"] .offer { background: linear-gradient(180deg, #ffffff, #fbfbfb); box-shadow: inset 0 1px 0 #ffffff; }
[data-theme="light"] .build__window { background: #ffffff; box-shadow: 0 0 0 1px var(--line-2), 0 50px 90px -50px rgba(0, 0, 0, .3); }
[data-theme="light"] .build__bar { background: #f3f3f3; }
[data-theme="light"] .build__bar > i { background: #cfcfcf; }
[data-theme="light"] .build__tabs b.is-on { background: rgba(0, 0, 0, .06); }
[data-theme="light"] .build__url, [data-theme="light"] .build__stage { background: #ffffff; }
[data-theme="light"] .build__l > i { color: #b5b5b5; }
[data-theme="light"] .build .t-tag, [data-theme="light"] .build .t-sel { color: #0b0b0b; }
[data-theme="light"] .build .t-attr, [data-theme="light"] .build .t-prop { color: #6e6e6e; }
[data-theme="light"] .build .t-str, [data-theme="light"] .build .t-val { color: #3b3b3b; }
[data-theme="light"] .build .t-txt { color: #858585; }
[data-theme="light"] .build .t-pun { color: #a1a1a1; }
[data-theme="light"] .build .t-cmt { color: #a3a3a3; }
[data-theme="light"] .build__preview { box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .32), 0 0 0 1px rgba(0, 0, 0, .1); }

/* Process timeline: unlit steps sit quietly on the ground; lit tiles turn black with a white icon */
[data-theme="light"] .timeline__rail { background: rgba(0, 0, 0, .1); }
[data-theme="light"] .timeline__fill { background: linear-gradient(180deg, rgba(0, 0, 0, .22), #0b0b0b); }
[data-theme="light"] .timeline__head { box-shadow: 0 0 0 5px rgba(0, 0, 0, .07), 0 0 16px 3px rgba(0, 0, 0, .16); }
[data-theme="light"] .tl-step::before { background: linear-gradient(180deg, #ffffff, #fcfcfc); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06), 0 24px 50px -36px rgba(0, 0, 0, .2); }
[data-theme="light"] .tl-step__tile { background: #ebebeb; color: #8c8c8c; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
[data-theme="light"] .tl-step__num { color: #7a7a7a; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
[data-theme="light"] .tl-step__dot { background: #ffffff; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .22); }
[data-theme="light"] .tl-step__text h3 { color: #767676; }
[data-theme="light"] .tl-step__text p, [data-theme="light"] .tl-step__text .tl-step__when { color: #6e6e6e; }
[data-theme="light"] .tl-step.is-on .tl-step__tile, [data-theme="light"] .timeline:not(.is-live) .tl-step__tile {
  background: linear-gradient(180deg, #2b2b2b, #050505); color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -3px 6px rgba(0, 0, 0, .3), 0 16px 34px -14px rgba(0, 0, 0, .42);
}
[data-theme="light"] .tl-step.is-on .tl-step__num, [data-theme="light"] .timeline:not(.is-live) .tl-step__num { background: #ffffff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16); }
[data-theme="light"] .tl-step.is-on .tl-step__dot, [data-theme="light"] .timeline:not(.is-live) .tl-step__dot { box-shadow: inset 0 0 0 2px #0b0b0b, 0 0 0 6px rgba(0, 0, 0, .06), 0 0 16px rgba(0, 0, 0, .12); }

/* FAQ */
[data-theme="light"] .accordion details { background: rgba(255, 255, 255, .75); }
[data-theme="light"] .accordion details[open] { background: #ffffff; box-shadow: 0 20px 40px -32px rgba(0, 0, 0, .22); }

/* Contact and forms */
[data-theme="light"] .desk { background: #ffffff; box-shadow: 0 70px 120px -70px rgba(0, 0, 0, .25); }
[data-theme="light"] .desk__form { background: #fafafa; }
[data-theme="light"] .reach__icon { background: rgba(0, 0, 0, .035); }
[data-theme="light"] .formcard { box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .22); }
[data-theme="light"] .field input, [data-theme="light"] .field select, [data-theme="light"] .field textarea { background-color: #ffffff; }
[data-theme="light"] .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
[data-theme="light"] .field select option { background: #ffffff; }
[data-theme="light"] .field input:focus-visible, [data-theme="light"] .field select:focus-visible, [data-theme="light"] .field textarea:focus-visible { background-color: #ffffff; box-shadow: 0 0 0 4px rgba(0, 0, 0, .08); }
[data-theme="light"] .field.is-invalid input, [data-theme="light"] .field.is-invalid select, [data-theme="light"] .field.is-invalid textarea { box-shadow: 0 0 0 4px rgba(194, 64, 44, .12); }
[data-theme="light"] .form__status--ok { border-color: rgba(0, 0, 0, .18); }
[data-theme="light"] .form__status--err { background: rgba(194, 64, 44, .08); border-color: rgba(194, 64, 44, .35); }
[data-theme="light"] .wizard__steps li { background: rgba(0, 0, 0, .1); }
[data-theme="light"] .chip span { background: #ffffff; }

/* Assistant */
[data-theme="light"] .office__launch { background: rgba(255, 255, 255, .86); border-color: rgba(0, 0, 0, .1); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .3); }
[data-theme="light"] .office__launch:hover { border-color: rgba(0, 0, 0, .25); }
[data-theme="light"] .office__teaser { background: rgba(255, 255, 255, .94); border-color: rgba(0, 0, 0, .1); box-shadow: 0 26px 56px -24px rgba(0, 0, 0, .3); }
[data-theme="light"] .office__teaser-x:hover { background: rgba(0, 0, 0, .07); }
[data-theme="light"] .office.is-glowing:not(.is-open) .office__launch { animation-name: officeglowlight; }
@keyframes officeglowlight {
  0%, 100% { box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .3), 0 0 0 0 rgba(0, 0, 0, 0); }
  50%      { box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .3), 0 0 24px -2px rgba(0, 0, 0, .28); }
}
[data-theme="light"] .office__panel { background: rgba(255, 255, 255, .96); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .3); }
[data-theme="light"] .office__avatar { border-color: rgba(0, 0, 0, .12); }
[data-theme="light"] .office__close:hover { background: rgba(0, 0, 0, .05); }
[data-theme="light"] .office__form input { background: #ffffff; }
[data-theme="light"] .office__form input:focus-visible { box-shadow: 0 0 0 3px rgba(0, 0, 0, .08); }

/* Opening: the loader and the laptop's boot screen go pale with a black mark, like an old Mac starting up; the laptop stays space black. */
[data-theme="light"] .boot, [data-theme="light"] .boot__screen { background: var(--bg); }
[data-theme="light"] .boot__glint { background-image: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, 0) 62%); }
[data-theme="light"] .boot__meter { background: rgba(0, 0, 0, .12); }
[data-theme="light"] .boot__fill { box-shadow: none; }

/* Film: the same two acts on the pale ground, without the stage glow (a glow has nothing to light on white). */
[data-theme="light"] .film.is-live .film__stage::before { display: none; }
[data-theme="light"] .film.is-live .film__progress { background: rgba(0, 0, 0, .1); }

/* Switching: no colour fades mid-switch, and the new look spreads from the switch in a circle. */
.theme-shift *, .theme-shift *::before, .theme-shift *::after { transition: none !important; }
.theme-shift .nav { view-transition-name: none; }
.theme-shift::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
.theme-shift::view-transition-new(root) { animation: theme-spread .75s var(--ease) both; mix-blend-mode: normal; }
@keyframes theme-spread { from { clip-path: circle(0 at var(--shift-x, 50%) var(--shift-y, 0)); } to { clip-path: circle(150vmax at var(--shift-x, 50%) var(--shift-y, 0)); } }

/* ---------- Phones: rhythm and touch feel ---------- */

/* A phone's pace, not a wide screen's squeezed in: sections follow each other more closely. */
@media (max-width: 600px) {
  .section { padding-block: 62px; }
  .section--tight { padding-block: 48px; }
  .section__head { gap: 14px; margin-bottom: 34px; }
  .clients { padding-block: 26px; }
  .marquee { margin-top: 14px; }
}

/* No hover on a finger, so every control answers a tap with a small press, and no blue flash. */
html { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  .btn, .glass__cta, .iconbtn, .office__launch, .appwin__tabs button, .seg button, .benefits__tabs button, .chip span, .deck__arrow, .marquee__toggle, .reel__toggle { transition: transform .12s var(--ease), background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); }
  .btn:active, .glass__cta:active, .office__launch:active { transform: scale(.975); }
  .iconbtn:active, .marquee__toggle:active, .reel__toggle:active, .deck__arrow:active { transform: scale(.92); }
  .appwin__tabs button:active, .seg button:active, .benefits__tabs button:active, .chip:active span { transform: scale(.96); }
  .svc-card__link:active, .textlink:active, .accordion summary:active, .footer li a:active, .reach a:active { opacity: .62; }
  .glass__card:active, .case__media:active { transform: scale(.992); }
}

/* ---------- Touch ---------- */

/* On touch screens the small text links and dots get a finger-sized tap area (44px) without moving anything:
   the extra padding is taken back with an equal negative margin. */
@media (pointer: coarse) {
  .textlink, .svc-card__link { padding-block: 10px; margin-block: -10px; }
  .svc-card__link { padding-block: 11px; margin-block: 7px -7px; }
  .case__body .textlink { margin-top: 0; }
  .deck__dot { height: 44px; }
  /* The swipe-row dots are the tap alternative to swiping, so each is a full 44px square. The hero deck's dots keep their
     26px pitch: its row has no room to spread, and its 44px arrows already do the same job. */
  .rail__dot { width: 44px; }
}

/* ---------- Page transitions ---------- */

@view-transition { navigation: auto; }
.nav { view-transition-name: site-nav; }
::view-transition-old(root) { animation: vt-out .28s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in .5s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: scale(.985); filter: blur(4px); } }
@keyframes vt-in { from { opacity: 0; transform: scale(1.015); filter: blur(4px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  @view-transition { navigation: none; }
}

@media print {
  body::before, .nav, .office, .boot { display: none !important; }
}

/* ---------- Thumbs and small type on a phone ---------- */
/* Found by walking the whole page at 390px: a few links sat under the size a
   thumb can hit, and two labels under the size that is comfortable to read. */
@media (max-width: 760px) {
  /* Footer links were 28px tall. The padding makes them 46px; the gap comes in
     so the column keeps roughly the rhythm it had. */
  .footer ul { gap: 2px; }
  .footer li a { padding: 9px 0; }

  /* The address bar on the work mock-ups: still small, no longer 11px. */
  .browserbar span { font-size: 0.75rem; }
}


/* ---------- Density on a phone ---------- */
/* Every section was paying desktop-sized air on a 390px screen and it added up
   to twenty screens of scrolling. This trims the space between things — the
   rhythm, not the content. No type goes below what is comfortable to read, and
   the film, the nav and the reviews reel keep their own timing untouched. */
@media (max-width: 760px) {
  .section { padding-block: 48px; }
  .section--tight { padding-block: 38px; }
  .section__head { gap: 13px; margin-bottom: 30px; }
  .section__title { font-size: 2rem; }
  .section__title--xl { font-size: 2.25rem; }
  .section__title--sm { font-size: 1.8125rem; }
  .section__lede { font-size: 1.0625rem; line-height: 1.5; }

  /* Each review sizes to its own words. Stretching them all to match the
     longest left a screen of nothing underneath the short ones. */
  .reel.is-swipe .reel__track { align-items: start; }

  /* The timeline: four steps that each had a desktop-sized frame around them. */
  .timeline__steps { gap: 4px; }
  .tl-step, .tl-step:nth-child(even) { padding: 16px 16px 18px 0; }
  .tl-step__tile { width: 50px; height: 50px; border-radius: 15px; }
  .tl-step__dot { margin-top: 36px; }
  .tl-step__text, .tl-step:nth-child(even) .tl-step__text { padding-top: 11px; }
  .tl-step__text p { margin-top: 7px; }
  .tl-step__text .tl-step__when { margin-top: 9px; }

  /* The free-mockup block and the contact frame. */
  .offer { padding: 38px 22px 34px; }
  .offer__lede { margin-top: 16px; }
  .offer__actions { margin-top: 24px; }
  .desk__info, .desk__form { padding: 26px 20px; }
  .expect { margin-top: 26px; padding-top: 22px; }
  .expect__list div { padding: 11px 0; }
  .faq { gap: 28px; }
  .faq__intro p { margin-top: 14px; }
  .faq__intro .btn { margin-top: 20px; }
  .formcard { padding: 22px 18px; }
  .form__grid { gap: 14px; }
  .field textarea { min-height: 104px; }

  /* The four points under the system demo, stacked, each in its own frame. */
  .features { margin-top: 28px; }
  .feature { padding: 17px 0 6px; }
  .feature + .feature { padding-left: 0; }
  .bundle { margin-top: 12px; padding: 28px 20px; gap: 14px; }
  .bundle p { margin-top: 6px; }

  /* The free-mockup block: its preview was a 2:3 portrait, which is most of a
     screen on its own. Still upright, just not half the section. */
  .build { margin-top: 26px; }
  .build__stage { aspect-ratio: 4 / 5; }
  .build__caption { margin-top: 12px; }
  .promises { margin-top: 24px; }
  .promises li { padding: 15px 14px; }
  .glass__note { margin-top: 22px; }

  /* Nine questions, all shut: the row only has to hold the question. */
  .accordion { gap: 7px; }
  .accordion summary { padding: 15px 16px; gap: 14px; }
  .accordion summary span.plus { width: 28px; height: 28px; }
}

/* The four ways to reach him fit two by two rather than one under another. */
@media (max-width: 560px) {
  .reach { grid-template-columns: 1fr 1fr; gap: 14px 12px; }
  .reach strong { font-size: 0.9375rem; }
}