/* ==========================================================================
   DaysGraphic — site.css (redesign 2026-10). One design system for every
   public page. Client demos under /work/ never load this file.

   White. Navy. Wide type. Gritty blurred imagery. Strong composition.
   Blur and grain live on decorative layers only, never on text, controls or
   project screenshots.
   ========================================================================== */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  --navy: #101F49;
  --navy-2: #1B3170;      /* hover / pressed */
  --navy-deep: #0A1433;
  --ink: #0C0F18;         /* near black */
  --text: #161B2C;
  --muted: #565D74;       /* 6.4:1 on white */
  --faint: #8A90A3;       /* decorative text only */
  --line: #DFE2EA;
  --line-2: #C6CBD8;
  --tint: #F3F5F9;
  --tint-2: #E8EBF2;
  --white: #FFFFFF;
  --live: #1B7A4C;
  --error: #B42318;

  --font: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1320px;
  --r: 3px;
  --r-lg: 6px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --header: 68px;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header) + 12px); }
body {
  margin: 0; background: var(--white); color: var(--text);
  font-family: var(--font); font-size: 17px; line-height: 1.6; font-variation-settings: 'wdth' 100;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--navy); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--navy-2); }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); line-height: 1.1; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
::selection { background: var(--navy); color: var(--white); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--navy); color: var(--white); padding: 10px 16px; border-radius: var(--r); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; color: var(--white); }
[hidden] { display: none !important; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2 * var(--gutter), 860px); margin-inline: auto; }
.section { padding-block: clamp(64px, 9vw, 128px); position: relative; }
.section--tight { padding-block: clamp(40px, 6vw, 80px); }
.section--line { border-top: 1px solid var(--line); }

/* ── Type ────────────────────────────────────────────────────────────────── */
/* Display: Archivo at its widest (wdth 125) and heaviest. Real wide letterforms,
   not CSS stretching, so nothing blurs or clips. */
.d1, .d2, .d3, .wide {
  font-family: var(--font); font-variation-settings: 'wdth' 125; font-weight: 900;
  text-transform: uppercase; letter-spacing: -.015em; color: var(--navy);
}
.d1 { font-size: clamp(36px, 10.4vw, 152px); line-height: .9; }
.d1 .ln { display: block; }
.d2 { font-size: clamp(30px, 6.2vw, 84px); line-height: .94; }
.d3 { font-size: clamp(22px, 2.6vw, 34px); line-height: 1; letter-spacing: -.01em; }
.d4 { font-family: var(--font); font-variation-settings: 'wdth' 112; font-weight: 800; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.15; color: var(--ink); letter-spacing: -.01em; }
.label {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--navy);
}
.label::before { content: ""; width: 10px; height: 10px; flex: 0 0 10px; background:
  linear-gradient(var(--navy) 0 0) 0 0 / 4px 4px no-repeat, linear-gradient(var(--navy) 0 0) 6px 0 / 4px 4px no-repeat,
  linear-gradient(var(--navy) 0 0) 0 6px / 4px 4px no-repeat, linear-gradient(var(--navy) 0 0) 6px 6px / 4px 4px no-repeat; }
.lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--text); max-width: 46ch; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: 13px; letter-spacing: .02em; }
.prose { max-width: 68ch; }
.prose h2 { font-variation-settings: 'wdth' 112; font-weight: 800; font-size: 24px; margin: 40px 0 12px; }
.prose p, .prose li { color: var(--text); }

/* ── Buttons & links ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px;
  border: 2px solid var(--navy); border-radius: var(--r); background: var(--navy); color: var(--white);
  font-family: var(--font); font-variation-settings: 'wdth' 112; font-weight: 700; font-size: 16px; line-height: 1.1;
  text-decoration: none; cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { background: var(--navy-2); border-color: var(--navy-2); color: var(--white); }
.btn:active { transform: translateY(1px); }
.btn--line { background: transparent; color: var(--navy); }
.btn--line:hover { background: var(--navy); color: var(--white); }
.btn--white { background: var(--white); border-color: var(--white); color: var(--navy); }
.btn--white:hover { background: var(--tint); border-color: var(--tint); color: var(--navy); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .6; cursor: progress; }
.arrow { display: inline-block; width: 1.05em; height: .7em; position: relative; flex: 0 0 auto; transition: transform .25s var(--ease); }
.arrow::before { content: ""; position: absolute; left: 0; right: .12em; top: 50%; height: 2px; margin-top: -1px; background: currentColor; }
.arrow::after { content: ""; position: absolute; right: 0; top: 50%; width: .42em; height: .42em; margin-top: -.21em; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); }
a:hover .arrow, button:hover .arrow { transform: translateX(4px); }
.go {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; font-variation-settings: 'wdth' 112;
  color: var(--navy); text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; line-height: 1.2;
}
.go:hover { color: var(--navy-2); }

/* ── Logo ────────────────────────────────────────────────────────────────── */
/* The mark is one SVG symbol (#dg-mark) drawn once per page. Swap the symbol
   in tools/site/brand.mjs when the approved artwork arrives. */
.logo { display: inline-flex; align-items: center; gap: 12px; color: var(--navy); text-decoration: none; }
.logo:hover { color: var(--navy); }
.logo__mark { width: 34px; height: 34px; flex: 0 0 34px; }
.logo__word { font-variation-settings: 'wdth' 125; font-weight: 900; font-size: 17px; letter-spacing: .02em; line-height: 1; }
.logo--light { color: var(--white); }
.logo--light:hover { color: var(--white); }
.logo .q { transition: transform .35s var(--ease); transform-box: fill-box; transform-origin: center; }
.logo:hover .q1 { transform: translate(-1.5px, -1.5px); }
.logo:hover .q2 { transform: translate(1.5px, -1.5px); }
.logo:hover .q3 { transform: translate(-1.5px, 1.5px); }
.logo:hover .q4 { transform: translate(1.5px, 1.5px); }

/* ── Header ──────────────────────────────────────────────────────────────── */
.hd { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); border-bottom: 1px solid transparent; transition: border-color .2s; }
.hd.is-scrolled { border-bottom-color: var(--line); }
@supports (backdrop-filter: blur(4px)) { .hd { background: rgba(255,255,255,.88); backdrop-filter: saturate(1.4) blur(10px); } }
.hd__in { display: flex; align-items: center; gap: 24px; height: var(--header); }
.hd__nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); margin-left: auto; }
.hd__nav a, .hd__nav .hdc__btn { white-space: nowrap; }
.hd__nav a:not(.btn) { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; padding: 10px 0; position: relative; }
.hd__nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.hd__nav a:not(.btn):hover::after, .hd__nav a[aria-current="page"]::after { transform: scaleX(1); }
.lang { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--ink); text-decoration: none; padding: 10px 2px; display: inline-flex; gap: 6px; align-items: center; }
.lang b { color: var(--navy); }
.lang span { color: var(--faint); }
.hd__menu { display: none; margin-left: auto; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px 0 10px; border: 0; background: none; color: var(--ink); cursor: pointer; font-weight: 700; font-size: 15px; }
.hd__burger { width: 22px; height: 14px; position: relative; }
.hd__burger::before, .hd__burger::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .3s var(--ease), top .3s var(--ease); }
.hd__burger::before { top: 2px; } .hd__burger::after { top: 10px; }
.hd--focus .hd__in { justify-content: space-between; }
.hd--focus .hd__nav { margin-left: 0; }
/* Collapses below 1000px: with Free checkup the row needs about 950px. */
@media (max-width: 1000px) {
  .hd__nav { display: none; }
  .hd__menu { display: inline-flex; }
  .hd--focus .hd__nav { display: flex; }
}
/* Mobile menu panel */
.mm { position: fixed; inset: 0; z-index: 60; background: var(--navy); color: var(--white); display: flex; flex-direction: column;
  padding: 0 var(--gutter) 32px; visibility: hidden; opacity: 0; transform: translateY(-12px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s; overflow-y: auto; }
.mm.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.mm__top { display: flex; align-items: center; justify-content: space-between; height: var(--header); }
.mm__close { min-height: 44px; border: 0; background: none; color: var(--white); font-weight: 700; font-size: 15px; cursor: pointer; display: inline-flex; gap: 10px; align-items: center; }
.mm__links { margin: 28px 0 auto; display: grid; gap: 4px; }
.mm__links a { color: var(--white); text-decoration: none; font-variation-settings: 'wdth' 125; font-weight: 900; text-transform: uppercase; font-size: clamp(34px, 10vw, 56px); line-height: 1.08; padding: 6px 0; }
.mm__links a:hover { color: #C7D0EA; }
.mm__foot { display: grid; gap: 14px; margin-top: 32px; }
.mm__foot a:not(.btn) { color: #DCE2F2; }
.mm .lang { color: var(--white); } .mm .lang b { color: var(--white); } .mm .lang span { color: #8F9BC0; }
body.menu-open { overflow: hidden; }

/* ── Decorative layers ───────────────────────────────────────────────────── */
.grain { position: absolute; inset: 0; pointer-events: none; background: url(/img/brand/grain.png) 0 0 / 180px 180px; mix-blend-mode: overlay; opacity: .9; }
.halftone { position: absolute; pointer-events: none; background-image: radial-gradient(var(--navy) 1.2px, transparent 1.6px); background-size: 9px 9px; opacity: .14; }
/* Cropped quadrant: a quarter of the mark's square, bleeding off an edge. */
.quad { position: absolute; pointer-events: none; background: var(--navy); }
.quad--tr { border-bottom-left-radius: 6px; }

/* ── Lead form (phone first) ─────────────────────────────────────────────── */
.lead { max-width: 640px; }
.lead label.lead__label { display: block; font-weight: 700; font-variation-settings: 'wdth' 112; font-size: 15px; color: var(--ink); margin: 0 0 8px; }
.lead__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; border: 2px solid var(--navy); border-radius: var(--r); background: var(--white); }
.lead__row:focus-within { box-shadow: 0 0 0 4px rgba(16, 31, 73, .16); }
.lead__cc { position: relative; border-right: 1px solid var(--line-2); }
.lead__cc select { appearance: none; -webkit-appearance: none; height: 100%; min-height: 56px; border: 0; background: transparent; padding: 0 30px 0 14px; font: 600 16px/1 var(--mono); color: var(--ink); cursor: pointer; border-radius: 0; }
.lead__cc::after { content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); pointer-events: none; }
.lead__cc select:focus-visible { outline: none; background: var(--tint); }
.lead__tel { min-width: 0; min-height: 56px; border: 0; padding: 0 14px; font: 500 19px/1.2 var(--font); letter-spacing: .02em; color: var(--ink); background: transparent; }
.lead__tel::placeholder { color: #9AA0B2; }
.lead__tel:focus { outline: none; }
.lead__row .btn { border-radius: 0 1px 1px 0; min-height: 56px; margin: -2px -2px -2px 0; white-space: nowrap; }
.lead__note { margin: 12px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); max-width: 56ch; }
.lead__consent { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); max-width: 64ch; }
.lead .field__err, .field__err { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: var(--error); }
.lead__row:has([aria-invalid="true"]) { border-color: var(--error); }
.form-wrap .form__error { display: none; margin: 10px 0 0; padding: 12px 14px; border-left: 3px solid var(--error); background: #FEF3F2; color: #7A1A12; font-size: 14.5px; max-width: 640px; }
.form-wrap.has-error .form__error { display: block; }
@media (max-width: 560px) {
  .lead__row { grid-template-columns: auto minmax(0, 1fr); }
  .lead__row .btn { grid-column: 1 / -1; margin: 0 -2px -2px; border-radius: 0 0 1px 1px; }
  .lead__cc select { min-height: 54px; }
  .lead__tel { min-height: 54px; font-size: 18px; }
}
/* Inverse (on navy) */
.on-navy .lead label.lead__label { color: var(--white); }
.on-navy .lead__row { border-color: var(--white); }
.on-navy .lead__row .btn { background: var(--white); border-color: var(--white); color: var(--navy); }
.on-navy .lead__row .btn:hover { background: #DCE2F2; border-color: #DCE2F2; }
.on-navy .lead__note, .on-navy .lead__consent { color: #C8D0E6; }
.on-navy .field__err { color: #FFB4AB; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { padding: clamp(40px, 7vw, 96px) 0 0; position: relative; overflow: hidden; }
.hero .d1 { margin: 0 0 clamp(20px, 2.6vw, 32px); }
.hero__sub { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.5; max-width: 40ch; margin: 0 0 clamp(24px, 3vw, 36px); color: var(--text); }
.hero__form { margin-bottom: clamp(36px, 5vw, 64px); }
.hero__deco { position: absolute; right: calc(-1 * var(--gutter)); top: 24px; width: clamp(80px, 12vw, 180px); height: clamp(80px, 12vw, 180px); }
.hero__deco .quad { inset: 0 0 50% 50%; }
.hero__deco .halftone { inset: 50% 50% 0 0; }
@media (max-width: 700px) { .hero__deco { display: none; } }

/* Line reveal for display headings (CSS only, content visible without JS). */
@media (prefers-reduced-motion: no-preference) {
  .reveal-lines .ln { overflow: hidden; }
  .reveal-lines .ln > span { display: inline-block; animation: lineUp .9s var(--ease) both; }
  .reveal-lines .ln:nth-child(2) > span { animation-delay: .08s; }
  .reveal-lines .ln:nth-child(3) > span { animation-delay: .16s; }
}
@keyframes lineUp { from { transform: translateY(102%); } to { transform: none; } }

/* ── Phone showcase ──────────────────────────────────────────────────────── */
.show { position: relative; overflow: hidden; background: var(--navy-deep); color: var(--white); isolation: isolate; }
.show__haze { position: absolute; inset: -40px; z-index: -2; background-size: cover; background-position: center; filter: saturate(1.05); transition: opacity .6s var(--ease); }
.show__haze + .show__haze { opacity: 0; }
.show::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,20,51,.62) 0%, rgba(10,20,51,.78) 100%); }
.show .grain { z-index: -1; opacity: .55; }
.show__in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 64px); padding-block: clamp(40px, 6vw, 80px); }
.show__label { color: var(--white); }
.show__label::before { filter: invert(1); }
.show__tabs { display: grid; gap: 2px; }
.show__tab {
  display: grid; grid-template-columns: 28px 1fr; gap: 4px 12px; align-items: baseline; width: 100%; text-align: left;
  padding: 14px 0; border: 0; border-top: 1px solid rgba(255,255,255,.22); background: none; color: #B9C3DF; cursor: pointer;
}
.show__tab:last-child { border-bottom: 1px solid rgba(255,255,255,.22); }
.show__tab .n { font-family: var(--mono); font-size: 12px; }
.show__tab .t { font-variation-settings: 'wdth' 118; font-weight: 800; font-size: 18px; line-height: 1.15; color: inherit; }
.show__tab .s { grid-column: 2; font-size: 13.5px; color: #8E9AC0; }
.show__tab[aria-selected="true"] { color: var(--white); }
.show__tab[aria-selected="true"] .t { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.show__tab:hover { color: var(--white); }
.show__tab:focus-visible { outline-color: var(--white); outline-offset: 2px; }
.show__meta { display: grid; gap: 14px; align-content: center; }
.show__status { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; color: #DCE2F2; }
.show__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #6EE7A8; }
.show__status[data-status="concept"]::before { background: #FFD27A; }
.show__name { font-variation-settings: 'wdth' 125; font-weight: 900; text-transform: uppercase; font-size: clamp(26px, 2.8vw, 40px); line-height: .98; color: var(--white); }
.show__type { color: #C8D0E6; font-size: 15.5px; margin: 0; max-width: 34ch; }
.show__built { color: var(--white); font-size: 15.5px; margin: 0; max-width: 34ch; }
.show__open { color: var(--white); border-color: var(--white); justify-self: start; }
.show__open:hover { color: #DCE2F2; }
.show__ctrl { display: flex; gap: 8px; }
.show__ctrl button { width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.45); background: transparent; color: var(--white); border-radius: var(--r); cursor: pointer; display: grid; place-items: center; }
.show__ctrl button:hover { background: rgba(255,255,255,.1); }
.show__ctrl .arrow { width: 16px; }
.show__ctrl [data-show-prev] .arrow { transform: scaleX(-1); }
.show__ctrl [data-show-play] svg { width: 14px; height: 14px; }
@media (max-width: 960px) {
  .show__in { grid-template-columns: 1fr; justify-items: center; text-align: left; gap: 28px; }
  .show__side { width: 100%; order: 3; }
  .show__tabs { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: none; touch-action: pan-x pan-y; }
  .show__tabs::-webkit-scrollbar { display: none; }
  .show__tab { flex: 0 0 auto; width: auto; grid-template-columns: auto; padding: 10px 14px; border: 1px solid rgba(255,255,255,.3); border-radius: var(--r); scroll-snap-align: start; }
  .show__tab:last-child { border-bottom: 1px solid rgba(255,255,255,.3); }
  .show__tab .n, .show__tab .s { display: none; }
  .show__tab .t { font-size: 15px; }
  .show__tab[aria-selected="true"] { background: var(--white); color: var(--navy); border-color: var(--white); }
  .show__tab[aria-selected="true"] .t { text-decoration: none; }
  .show__meta { width: 100%; order: 2; }
  .show__label { display: none; }
}

/* Device frame. The screen is always sharp: no filters inside it. */
.phone { position: relative; width: clamp(240px, 26vw, 330px); aspect-ratio: 390 / 844; border-radius: 46px; padding: 11px; background: #05070D;
  box-shadow: 0 0 0 1.5px #2A3350 inset, 0 0 0 1px #000, 0 30px 80px -20px rgba(0,0,0,.65); }
.phone__screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 36px; background: #fff; }
.phone__screen img { width: 100%; height: auto; max-width: none; will-change: transform; }
.phone--lg { width: clamp(260px, 30vw, 360px); }
.phone--sm { width: clamp(150px, 15vw, 210px); border-radius: 30px; padding: 7px; }
.phone--sm .phone__screen { border-radius: 24px; }
@media (prefers-reduced-motion: no-preference) {
  .phone.is-scrolling .phone__screen img { animation: phoneScroll var(--dur, 26s) ease-in-out 1.5s infinite alternate; }
  .phone.is-paused .phone__screen img, .phone:hover .phone__screen img, .phone:focus-within .phone__screen img { animation-play-state: paused; }
}
@keyframes phoneScroll { 0%, 8% { transform: translateY(0); } 92%, 100% { transform: translateY(var(--travel, -40%)); } }

/* Browser frame for desktop screenshots */
.browser { border-radius: var(--r-lg); overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line-2), 0 28px 60px -30px rgba(16,31,73,.35); }
.browser__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: var(--tint); border-bottom: 1px solid var(--line); }
.browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.browser__bar span { margin-left: 10px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser img { width: 100%; }

/* ── Section heads ───────────────────────────────────────────────────────── */
.sh { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 20px clamp(24px, 5vw, 72px); align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.sh .d2 { max-width: 16ch; }
.sh__aside { margin: 0; color: var(--muted); font-size: 17px; max-width: 42ch; }
@media (max-width: 820px) { .sh { grid-template-columns: 1fr; } }

/* ── Home: selected work (editorial, not a grid of identical cards) ─────── */
.wk { display: grid; gap: clamp(56px, 8vw, 120px); }
.wk-item { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; }
.wk-item__media { grid-column: 1 / span 8; position: relative; }
.wk-item__panel { position: relative; padding: clamp(18px, 3vw, 44px) clamp(18px, 3vw, 44px) 0; border-radius: var(--r-lg); overflow: hidden; }
.wk-item__panel .browser { box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 28px 60px -30px rgba(0,0,0,.4); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.wk-item__media .phone { position: absolute; right: clamp(-8px, -1vw, 0px); bottom: clamp(-28px, -3vw, -12px); }
.wk-item__body { grid-column: 9 / span 4; padding-bottom: 8px; }
.wk-item--flip .wk-item__media { grid-column: 5 / span 8; order: 2; }
.wk-item--flip .wk-item__body { grid-column: 1 / span 4; order: 1; }
.wk-item--flip .wk-item__media .phone { right: auto; left: clamp(-8px, -1vw, 0px); }
.pmeta { display: grid; gap: 12px; }
.pmeta__status { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: inline-flex; gap: 8px; align-items: center; }
.pmeta__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--live); }
.pmeta__status[data-status="concept"]::before { background: #C98A00; }
.pmeta__status[data-status="product"]::before { background: var(--navy); }
.pmeta__name { font-variation-settings: 'wdth' 125; font-weight: 900; text-transform: uppercase; color: var(--navy); font-size: clamp(26px, 3vw, 42px); line-height: .98; }
.pmeta__name a { color: inherit; text-decoration: none; }
.pmeta__name a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.pmeta dl { margin: 6px 0 4px; display: grid; gap: 10px; }
.pmeta dt { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.pmeta dd { margin: 2px 0 0; font-size: 15.5px; color: var(--text); }
@media (max-width: 900px) {
  .wk-item, .wk-item--flip { grid-template-columns: 1fr; gap: 40px; }
  .wk-item__media, .wk-item--flip .wk-item__media, .wk-item__body, .wk-item--flip .wk-item__body { grid-column: 1; order: initial; }
  .wk-item__media .phone { width: 34%; min-width: 120px; right: 4%; bottom: -24px; border-radius: 22px; padding: 5px; }
  .wk-item__media .phone .phone__screen { border-radius: 18px; }
  .wk-item--flip .wk-item__media .phone { left: auto; right: 4%; }
}
/* Concepts row */
.cx { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.cx-item { display: grid; gap: 12px; color: var(--text); text-decoration: none; }
.cx-item__shot { aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--r-lg); background: var(--tint); box-shadow: 0 0 0 1px var(--line); }
.cx-item__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s var(--ease); }
.cx-item:hover .cx-item__shot img { transform: scale(1.03); }
.cx-item b { font-variation-settings: 'wdth' 118; font-weight: 800; font-size: 18px; color: var(--ink); line-height: 1.15; }
.cx-item span { font-size: 14px; color: var(--muted); }
@media (max-width: 900px) { .cx { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wk-more { margin-top: clamp(40px, 5vw, 64px); display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.subhead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 2px solid var(--navy); padding-top: 18px; margin: clamp(64px, 9vw, 120px) 0 28px; }
.subhead h3 { font-variation-settings: 'wdth' 125; font-weight: 900; text-transform: uppercase; color: var(--navy); font-size: clamp(20px, 2vw, 26px); }
.subhead p { margin: 0; color: var(--muted); max-width: 52ch; font-size: 15.5px; }

/* ── Services (outcome rows) ─────────────────────────────────────────────── */
.svc { border-top: 2px solid var(--navy); }
.svc__row { display: grid; grid-template-columns: 70px minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 16px clamp(20px, 3vw, 48px); align-items: start; padding: clamp(22px, 3vw, 34px) 0; border-bottom: 1px solid var(--line-2); color: inherit; text-decoration: none; position: relative; }
.svc__n { font-family: var(--mono); font-size: 13px; color: var(--navy); padding-top: 6px; }
.svc__h { font-variation-settings: 'wdth' 125; font-weight: 900; text-transform: uppercase; color: var(--navy); font-size: clamp(21px, 2.3vw, 32px); line-height: 1; }
.svc__p { margin: 0; color: var(--text); font-size: 16px; }
.svc__price { display: block; margin-top: 10px; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.svc__go { align-self: center; width: 48px; height: 48px; border: 2px solid var(--navy); border-radius: 50%; display: grid; place-items: center; color: var(--navy); transition: background .25s var(--ease), color .25s var(--ease); }
.svc__row:hover .svc__go { background: var(--navy); color: var(--white); }
.svc__row:hover .svc__h { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.svc__row::after { content: ""; position: absolute; inset: 0; }
.svc-more { margin: 18px 0 0; color: var(--muted); font-size: 15.5px; }
@media (max-width: 820px) {
  .svc__row { grid-template-columns: 40px minmax(0, 1fr) 44px; }
  .svc__p { grid-column: 2 / 3; }
  .svc__go { grid-row: 1; grid-column: 3; width: 40px; height: 40px; }
}

/* ── Steps ───────────────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--navy); counter-reset: step; }
.steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.steps li { padding: 24px clamp(14px, 2vw, 28px) 0 0; position: relative; }
.steps li + li { padding-left: clamp(14px, 2vw, 28px); border-left: 1px solid var(--line-2); }
.steps__n { display: flex; gap: 3px; margin-bottom: 18px; }
.steps__n i { width: 12px; height: 12px; background: var(--tint-2); }
.steps__n i.on { background: var(--navy); }
.steps h3 { font-variation-settings: 'wdth' 118; font-weight: 800; font-size: 19px; line-height: 1.15; margin-bottom: 10px; color: var(--ink); }
.steps p { margin: 0; color: var(--muted); font-size: 15.5px; }
.steps .mono { display: block; color: var(--navy); margin-bottom: 8px; }
@media (max-width: 960px) { .steps, .steps--5 { grid-template-columns: 1fr 1fr; } .steps li:nth-child(odd) { border-left: 0; padding-left: 0; } .steps li { padding-bottom: 28px; border-bottom: 1px solid var(--line); } }
@media (max-width: 560px) { .steps, .steps--5 { grid-template-columns: 1fr; } .steps li { border-left: 0 !important; padding-left: 0 !important; } }

/* ── Studio ──────────────────────────────────────────────────────────────── */
.studio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.studio__text p { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.6; color: var(--text); }
.studio__art { position: relative; aspect-ratio: 1; max-width: 460px; width: 100%; }
.studio__art .cell { position: absolute; width: calc(50% - 6px); height: calc(50% - 6px); border-radius: 6px; overflow: hidden; }
.studio__art .cell:nth-child(1) { left: 0; top: 0; background: var(--navy); }
.studio__art .cell:nth-child(2) { right: 0; top: 0; background: var(--tint-2); }
.studio__art .cell:nth-child(3) { left: 0; bottom: 0; background: var(--tint); }
.studio__art .cell:nth-child(4) { right: 0; bottom: 0; background: var(--navy-deep); }
.studio__art .cell img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.studio__art .cell .grain { opacity: .6; }
@media (max-width: 820px) { .studio { grid-template-columns: 1fr; } .studio__art { max-width: 340px; } }

/* ── Quote ───────────────────────────────────────────────────────────────── */
.quote { border-left: 6px solid var(--navy); padding: 4px 0 4px clamp(18px, 3vw, 40px); max-width: 1000px; }
.quote blockquote { margin: 0 0 18px; font-variation-settings: 'wdth' 112; font-weight: 700; font-size: clamp(22px, 2.6vw, 36px); line-height: 1.25; color: var(--ink); }
.quote p { margin: 0; font-family: var(--mono); font-size: 13px; color: var(--muted); }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq { border-top: 2px solid var(--navy); max-width: 980px; }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 22px 0; font-variation-settings: 'wdth' 112; font-weight: 700; font-size: clamp(17px, 1.6vw, 20px); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: 0 0 18px; height: 18px; background: linear-gradient(var(--navy) 0 0) center / 18px 2px no-repeat, linear-gradient(var(--navy) 0 0) center / 2px 18px no-repeat; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--navy); }
.faq details > div, .faq details > p { padding: 0 0 22px; margin: 0; color: var(--text); max-width: 70ch; }
.faq--2 { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px clamp(32px, 6vw, 96px); max-width: none; border: 0; }
.faq--2 .faq { max-width: none; }
@media (max-width: 860px) { .faq--2 { grid-template-columns: 1fr; } }

/* ── Final CTA (navy) ────────────────────────────────────────────────────── */
.final { position: relative; overflow: hidden; background: var(--navy); color: var(--white); padding-block: clamp(64px, 9vw, 128px); isolation: isolate; }
.final .d2 { color: var(--white); max-width: 14ch; margin-bottom: 20px; }
.final__p { color: #D3DAEE; font-size: 18px; max-width: 46ch; margin-bottom: 28px; }
.final .quad { background: var(--navy-deep); width: clamp(120px, 22vw, 340px); aspect-ratio: 1; right: calc(-1 * clamp(40px, 7vw, 110px)); top: calc(-1 * clamp(40px, 7vw, 110px)); z-index: -1; border-radius: 10px; }
.final .halftone { background-image: radial-gradient(#fff 1.2px, transparent 1.6px); opacity: .12; inset: auto auto 0 0; width: clamp(160px, 30vw, 420px); height: 160px; z-index: -1; }
.final .grain { opacity: .35; z-index: -1; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.ft { background: var(--white); border-top: 1px solid var(--line); padding: clamp(48px, 6vw, 80px) 0 0; overflow: hidden; }
.ft__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.ft__tag { margin: 18px 0 0; color: var(--muted); max-width: 34ch; font-size: 15px; }
.ft h2 { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin: 6px 0 14px; }
.ft ul { display: grid; gap: 8px; }
.ft a { color: var(--ink); text-decoration: none; font-size: 15px; }
.ft a:hover { color: var(--navy); text-decoration: underline; }
.ft__sub { display: block; color: var(--muted); font-size: 13.5px; }
.ft__bottom { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center; margin-top: 48px; padding: 18px 0; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.ft__bottom a { font-size: 12.5px; color: var(--muted); }
.ft__word { font-variation-settings: 'wdth' 125; font-weight: 900; text-transform: uppercase; color: var(--navy); font-size: min(9.1vw, 132px); line-height: .78; letter-spacing: -.02em; white-space: nowrap; margin: 24px auto -0.06em; user-select: none; }
@media (max-width: 900px) { .ft__grid { grid-template-columns: 1fr 1fr; } .ft__brand { grid-column: 1 / -1; } }

/* ── Page heads (inner pages) ────────────────────────────────────────────── */
.ph { padding: clamp(40px, 7vw, 96px) 0 clamp(32px, 5vw, 64px); position: relative; }
.ph .d1 { font-size: clamp(34px, 8.6vw, 128px); margin-bottom: 22px; }
.ph__sub { font-size: clamp(18px, 1.6vw, 21px); max-width: 52ch; color: var(--text); margin: 0 0 28px; }
.crumbs { font-family: var(--mono); font-size: 12.5px; color: var(--muted); margin: 0 0 22px; }
.crumbs a { color: var(--muted); }

/* ── Work index ──────────────────────────────────────────────────────────── */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(32px, 4vw, 48px); }
.filters button { min-height: 42px; padding: 0 16px; border: 1.5px solid var(--line-2); border-radius: var(--r); background: var(--white); color: var(--ink); font-weight: 600; font-size: 14.5px; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.filters button:hover { border-color: var(--navy); }
.filters button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.filters__count { margin-left: auto; align-self: center; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.plist { display: grid; gap: clamp(56px, 8vw, 112px); }
.plist .wk-item.is-hidden { display: none; }

/* ── Project page ────────────────────────────────────────────────────────── */
.pj-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 32px clamp(32px, 5vw, 80px); align-items: end; }
.pj-head .d1 { font-size: clamp(34px, 7.4vw, 112px); }
.pj-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; border-top: 2px solid var(--navy); padding-top: 18px; }
.pj-facts dt { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.pj-facts dd { margin: 4px 0 0; font-size: 15.5px; color: var(--ink); }
@media (max-width: 900px) { .pj-head { grid-template-columns: 1fr; } .pj-facts { grid-template-columns: 1fr 1fr; } }
.pj-stage { position: relative; padding: clamp(24px, 5vw, 72px) clamp(16px, 5vw, 72px) 0; border-radius: var(--r-lg); overflow: hidden; margin-top: clamp(32px, 5vw, 56px); }
.pj-stage .browser { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.pj-stage .phone { position: absolute; right: clamp(16px, 4vw, 64px); bottom: clamp(-60px, -5vw, -24px); }
@media (max-width: 700px) { .pj-stage .phone { width: 38%; min-width: 120px; border-radius: 22px; padding: 5px; right: 6%; bottom: -16px; } .pj-stage .phone .phone__screen { border-radius: 18px; } }
.pj-body { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px clamp(32px, 6vw, 96px); }
.pj-body h2 { margin-bottom: 14px; }
.pj-body p { font-size: clamp(17px, 1.4vw, 19px); }
.ticklist { display: grid; gap: 0; border-top: 1px solid var(--line-2); }
.ticklist li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16.5px; }
.ticklist li::before { content: ""; width: 12px; height: 12px; margin-top: 7px; background: var(--navy); }
.pj-note { margin-top: 24px; padding: 14px 16px; border-left: 3px solid #C98A00; background: #FFF8E8; font-size: 15px; color: #5A4200; }
.pj-screens { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .4fr); gap: clamp(16px, 3vw, 40px); align-items: start; }
.pj-screens .phone { width: 100%; }
@media (max-width: 760px) { .pj-screens { grid-template-columns: 1fr; } .pj-screens .phone { width: min(72%, 300px); justify-self: center; } }
.pj-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: clamp(28px, 4vw, 48px) 0; border-top: 2px solid var(--navy); border-bottom: 1px solid var(--line-2); text-decoration: none; color: inherit; }
.pj-next .mono { color: var(--muted); }
.pj-next .d2 { font-size: clamp(26px, 4.6vw, 64px); }
.pj-next:hover .d2 { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 8px; }
.pj-next .svc__go { width: 64px; height: 64px; }
.pj-next:hover .svc__go { background: var(--navy); color: var(--white); }

/* ── Service pages (extracted content blocks) ────────────────────────────── */
.blk + .blk { margin-top: clamp(48px, 6vw, 80px); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 0; border-top: 2px solid var(--navy); }
.cards > div { padding: 24px clamp(14px, 2vw, 28px) 28px 0; border-bottom: 1px solid var(--line-2); }
.cards h3 { font-variation-settings: 'wdth' 118; font-weight: 800; font-size: 19px; line-height: 1.2; color: var(--ink); margin-bottom: 10px; }
.cards p { margin: 0; color: var(--muted); font-size: 15.5px; }
.cards .price { font-variation-settings: 'wdth' 125; font-weight: 900; color: var(--navy); font-size: 28px; margin: 6px 0 8px; }
.cards .price em { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--muted); margin-left: 8px; font-variation-settings: normal; font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 8px 12px; border: 1px solid var(--line-2); border-radius: var(--r); font-size: 14.5px; background: var(--white); }
.prices { border-top: 2px solid var(--navy); }
.prices__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 32px; padding: 24px 0; border-bottom: 1px solid var(--line-2); }
.prices__row h3 { font-variation-settings: 'wdth' 118; font-weight: 800; font-size: 20px; }
.prices__row p { margin: 6px 0 0; color: var(--muted); max-width: 60ch; }
.prices__amt { text-align: right; font-variation-settings: 'wdth' 125; font-weight: 900; color: var(--navy); font-size: clamp(26px, 3vw, 40px); line-height: 1; white-space: nowrap; }
.prices__amt small { display: block; margin-top: 6px; font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--muted); font-variation-settings: normal; }
.prices__row .go { grid-column: 1; justify-self: start; margin-top: 4px; }
.note-p { margin: 16px 0 0; color: var(--muted); font-size: 15px; max-width: 80ch; }
@media (max-width: 640px) { .prices__row { grid-template-columns: 1fr; } .prices__amt { text-align: left; } }
.example { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (max-width: 860px) { .example { grid-template-columns: 1fr; } }
.ticks2 { display: grid; gap: 8px; margin: 12px 0; }
.ticks2 li { padding-left: 22px; position: relative; } .ticks2 li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 10px; background: var(--navy); }

/* Care plans */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 2px solid var(--navy); border-radius: var(--r-lg); overflow: hidden; }
.plan { padding: clamp(22px, 3vw, 36px); display: flex; flex-direction: column; gap: 12px; background: var(--white); }
.plan + .plan { border-left: 1px solid var(--line-2); }
.plan--feat { background: var(--navy); color: var(--white); }
.plan__flag { align-self: flex-start; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px; background: var(--white); color: var(--navy); border-radius: 2px; }
.plan__name { font-variation-settings: 'wdth' 125; font-weight: 900; text-transform: uppercase; font-size: 24px; color: inherit; }
.plan__price { font-variation-settings: 'wdth' 125; font-weight: 900; font-size: 44px; line-height: 1; color: inherit; }
.plan__price span { font-family: var(--mono); font-size: 13px; font-weight: 500; font-variation-settings: normal; margin-left: 4px; }
/* The founding price wrappers are the price itself, not the "/month" note. */
.plan__price [data-fo] { font-family: inherit; font-size: inherit; font-weight: inherit; font-variation-settings: inherit; margin-left: 0; }
.plan__who { margin: 0; color: var(--muted); }
.plan--feat .plan__who, .plan--feat .plan__note { color: #CDD5EC; }
.plan ul { display: grid; gap: 8px; margin: 6px 0; font-size: 15px; }
.plan li { padding-left: 20px; position: relative; } .plan li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; background: var(--navy); }
.plan--feat li::before { background: var(--white); }
.plan__note { margin: auto 0 0; font-size: 13.5px; color: var(--muted); }
.plan .btn { margin-top: 4px; }
.plan--feat .btn { background: var(--white); border-color: var(--white); color: var(--navy); }
/* Two plans side by side; four as a 2×2 grid (design bundles). */
.plans--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plans--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plans--n4 .plan:nth-child(odd) { border-left: 0; }
.plans--n4 .plan:nth-child(n+3) { border-top: 1px solid var(--line-2); }
.plan__was { margin: -10px 0 0; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.plan--feat .plan__was { color: #CDD5EC; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 0; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } .plan + .plan { border-left: 0; border-top: 1px solid var(--line-2); } }

/* Services overview */
.svx { display: grid; grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(24px, 4vw, 64px); padding: clamp(40px, 6vw, 72px) 0; border-top: 2px solid var(--navy); scroll-margin-top: calc(var(--header) + 12px); }
.svx__n { font-family: var(--mono); font-size: 13px; color: var(--navy); padding-top: 8px; }
.svx h2 { font-variation-settings: 'wdth' 125; font-weight: 900; text-transform: uppercase; color: var(--navy); font-size: clamp(26px, 3.4vw, 48px); line-height: .98; margin-bottom: 18px; }
.svx__price { font-family: var(--mono); font-size: 13.5px; color: var(--ink); margin: 0 0 18px; }
.svx__ex { display: grid; gap: 12px; text-decoration: none; color: inherit; }
.svx__ex .browser { transition: transform .5s var(--ease); }
.svx__ex:hover .browser { transform: translateY(-4px); }
.svx__ex span { font-size: 14px; color: var(--muted); }
@media (max-width: 860px) { .svx { grid-template-columns: 1fr; } }

/* Studio page principles */
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--navy); }
.principles li { padding: 26px clamp(16px, 2vw, 32px) 30px 0; border-bottom: 1px solid var(--line-2); }
.principles li:not(:nth-child(3n+1)) { padding-left: clamp(16px, 2vw, 32px); border-left: 1px solid var(--line-2); }
.principles h3 { font-variation-settings: 'wdth' 118; font-weight: 800; font-size: 19px; margin-bottom: 8px; }
.principles p { margin: 0; color: var(--muted); font-size: 15.5px; }
@media (max-width: 900px) { .principles { grid-template-columns: 1fr; } .principles li { padding-left: 0 !important; border-left: 0 !important; } }

/* Contact options */
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--navy); }
.ways a { display: grid; gap: 6px; padding: 24px clamp(14px, 2vw, 28px) 28px 0; border-bottom: 1px solid var(--line-2); text-decoration: none; color: var(--ink); }
.ways a + a { padding-left: clamp(14px, 2vw, 28px); border-left: 1px solid var(--line-2); }
.ways b { display: flex; align-items: center; gap: 10px; font-variation-settings: 'wdth' 125; font-weight: 900; text-transform: uppercase; color: var(--navy); font-size: clamp(20px, 2vw, 26px); }
.ways b .ico { width: 1em; height: 1em; }
.ways span { color: var(--muted); font-size: 15px; }
.ways a:hover b { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
@media (max-width: 760px) { .ways { grid-template-columns: 1fr; } .ways a + a { padding-left: 0; border-left: 0; } }

/* Thank-you / 404 */
.confirm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(32px, 6vw, 96px); align-items: start; }
.confirm__ref { font-family: var(--mono); font-size: 14px; color: var(--muted); margin: 0 0 24px; }
.confirm__ref b { color: var(--navy); font-weight: 600; }
.panel { border: 2px solid var(--navy); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 32px); }
.panel h2 { font-variation-settings: 'wdth' 118; font-weight: 800; font-size: 22px; margin-bottom: 6px; }
.panel > p { color: var(--muted); }
.olist { counter-reset: o; display: grid; gap: 14px; margin: 14px 0 0; }
.olist li { counter-increment: o; display: grid; grid-template-columns: 34px 1fr; gap: 10px; }
.olist li::before { content: "0" counter(o); font-family: var(--mono); font-size: 13px; color: var(--navy); padding-top: 3px; }
@media (max-width: 860px) { .confirm { grid-template-columns: 1fr; } }

/* ── Generic form system (full request form, call booking, card) ─────────── */
.form-card { border: 2px solid var(--navy); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 36px); background: var(--white); position: relative; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 7px; margin: 0 0 18px; }
.field > label, .label-plain, legend { font-weight: 700; font-variation-settings: 'wdth' 108; font-size: 15px; color: var(--ink); padding: 0; }
.field .req { color: var(--error); margin-left: 2px; }
.field .hint, .hint { font-size: 13.5px; color: var(--muted); margin: 0; }
.input, .select, .textarea, .field input:not([type="radio"]):not([type="checkbox"]), .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--line-2); border-radius: var(--r); background: var(--white);
  font: 500 16px/1.4 var(--font); color: var(--ink); transition: border-color .2s, box-shadow .2s;
}
.textarea, .field textarea { min-height: 120px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(16,31,73,.14); }
[aria-invalid="true"] { border-color: var(--error) !important; }
.field--inline, label.field--inline { display: flex; gap: 10px; align-items: center; font-weight: 500; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--navy); width: 18px; height: 18px; }
fieldset { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.choice { display: flex; flex-wrap: wrap; gap: 8px; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice label { flex: 1 1 auto; min-height: 46px; display: flex; align-items: center; justify-content: center; padding: 8px 14px; border: 1.5px solid var(--line-2); border-radius: var(--r); background: var(--white); font-weight: 600; font-size: 15px; cursor: pointer; text-align: center; }
.choice input:checked + label { background: var(--navy); border-color: var(--navy); color: var(--white); }
.choice input:focus-visible + label { outline: 3px solid var(--navy); outline-offset: 2px; }
.reqtype { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.reqtype input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.reqtype label { display: grid; gap: 4px; padding: 16px; border: 1.5px solid var(--line-2); border-radius: var(--r); cursor: pointer; font-size: 14px; color: var(--muted); }
.reqtype label b, .reqtype label strong { color: var(--ink); font-size: 16px; font-variation-settings: 'wdth' 112; }
.reqtype input:checked + label { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: var(--tint); }
.reqtype input:focus-visible + label { outline: 3px solid var(--navy); outline-offset: 2px; }
@media (max-width: 560px) { .reqtype { grid-template-columns: 1fr; } }
.prog { margin: 0 0 18px; }
.prog__bar { height: 6px; background: var(--tint-2); border-radius: 3px; overflow: hidden; }
.prog__bar > span, .prog__bar > i, [data-prog-fill] { display: block; height: 100%; width: 0; background: var(--navy); transition: width .3s var(--ease); }
.prog__text { font-family: var(--mono); font-size: 12.5px; color: var(--muted); margin: 6px 0 0; }
.pricehint, [data-price-hint] { margin: 8px 0 0; padding: 10px 12px; background: var(--tint); border-radius: var(--r); font-size: 14px; color: var(--text); }
.honeypot { position: absolute !important; left: -9999px !important; opacity: 0 !important; }
.form__success { display: none; }
.form-card.is-sent > form, [data-form-wrap].is-sent > form { display: none; }
.form-card.is-sent .form__success, [data-form-wrap].is-sent .form__success { display: block; }
.form__error { display: none; margin-top: 12px; padding: 12px 14px; border-left: 3px solid var(--error); background: #FEF3F2; color: #7A1A12; font-size: 14.5px; }
.has-error .form__error, [data-form-wrap].has-error .form__error { display: block; }
.form__meta { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.notice { padding: 12px 14px; border-left: 3px solid var(--navy); background: var(--tint); font-size: 14.5px; margin: 0 0 16px; }
.notice--warn { border-color: #C98A00; background: #FFF8E8; }
.notice--err { border-color: var(--error); background: #FEF3F2; }

/* Book-a-call (calendar markup comes from the kept fragment) */
.book { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 0; border: 2px solid var(--navy); border-radius: var(--r-lg); overflow: hidden; }
.book__side { padding: clamp(20px, 3vw, 32px); background: var(--tint); border-right: 1px solid var(--line-2); }
.book__main { padding: clamp(20px, 3vw, 32px); }
.book__step + .book__step { margin-top: 24px; }
.book__empty { color: var(--muted); font-size: 15px; }
.book__done { border: 2px solid var(--navy); border-radius: var(--r-lg); padding: 24px; margin-bottom: 20px; }
.mtype { padding: 14px; border: 1.5px solid var(--line-2); border-radius: var(--r); margin: 10px 0; }
.mtype__dur, .tzline { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.cal { margin-top: 10px; }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal__month { font-weight: 800; font-variation-settings: 'wdth' 112; }
.cal__nav { width: 40px; height: 40px; border: 1.5px solid var(--line-2); border-radius: var(--r); background: var(--white); cursor: pointer; display: grid; place-items: center; }
.cal__grid, .cal__dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal__dow { font-family: var(--mono); font-size: 11.5px; color: var(--faint); text-align: center; margin-bottom: 6px; }
.cal__grid button { aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); cursor: pointer; font: 600 14px var(--font); color: var(--ink); }
.cal__grid button:disabled { color: #BCC1CE; background: var(--tint); cursor: not-allowed; }
.cal__grid button[aria-pressed="true"], .cal__grid button.is-picked, .picked { background: var(--navy) !important; color: var(--white) !important; border-color: var(--navy) !important; }
[data-slots] { display: flex; flex-wrap: wrap; gap: 8px; }
[data-slots] button { min-height: 44px; padding: 0 14px; border: 1.5px solid var(--line-2); border-radius: var(--r); background: var(--white); font: 600 14.5px var(--font); cursor: pointer; }
[data-slots] button[aria-pressed="true"] { background: var(--navy); color: var(--white); border-color: var(--navy); }
@media (max-width: 860px) { .book { grid-template-columns: 1fr; } .book__side { border-right: 0; border-bottom: 1px solid var(--line-2); } }

/* QR card pages */
.qr { max-width: 560px; margin-inline: auto; padding: 28px var(--gutter) 48px; }
.qr__plate { position: relative; overflow: hidden; background: var(--navy); color: var(--white); border-radius: var(--r-lg); padding: 36px 24px 32px; text-align: center; isolation: isolate; }
.qr__plate .grain { opacity: .35; z-index: -1; }
.qr__plate .logo { flex-direction: column; gap: 14px; }
.qr__plate .logo__mark { width: 64px; height: 64px; flex-basis: 64px; }
.qr__plate .logo__word { font-size: 24px; }
.qr__role { margin: 16px 0 6px; font-family: var(--mono); font-size: 13px; color: #C8D0E6; }
.qr__tag { margin: 0; color: var(--white); }
.qr__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.qr__actions a { display: grid; gap: 4px; justify-items: center; padding: 18px 10px; border: 2px solid var(--navy); border-radius: var(--r); text-decoration: none; color: var(--navy); font-weight: 800; font-variation-settings: 'wdth' 112; }
.qr__actions a small { font-weight: 500; font-size: 12.5px; color: var(--muted); font-variation-settings: normal; }
.qr__actions svg { width: 22px; height: 22px; }
.qr__list { display: grid; gap: 10px; margin: 0 0 24px; }
.qr__list a { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 8px; border: 1px solid var(--line-2); border-radius: var(--r); text-decoration: none; color: var(--ink); }
.qr__list img { width: 64px; height: 64px; object-fit: cover; object-position: top; border-radius: 2px; }
.qr__list b { display: block; font-variation-settings: 'wdth' 112; }
.qr__list span { font-size: 13.5px; color: var(--muted); }
.qr__h { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 28px 0 12px; }

/* ── Motion: reveal (content is visible without JS) ──────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); animation: rvSafety 0s 2.5s forwards; }
  .js .rv.in { opacity: 1; transform: none; animation: none; }
}
@keyframes rvSafety { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ── Print ───────────────────────────────────────────────────────────────── */
@media print { .hd, .mm, .show, .final, .ft__word { display: none !important; } }

/* Display type safety: a word longer than its column wraps instead of
   spilling into the next one (only kicks in when nothing else fits). */
.d1, .d2, .d3, .pmeta__name, .svc__h, .svx h2, .show__name { overflow-wrap: break-word; }
.faq--2 .d2, .studio .d2 { font-size: clamp(30px, 4.2vw, 60px); }
@media (max-width: 860px) { .pj-body { grid-template-columns: 1fr; } }

/* Narrow phones (≤ 400px): compact lockup, icon-only menu button. */
.hd__menu-label { display: inline; }
@media (max-width: 400px) {
  .hd__in { gap: 12px; }
  .logo { gap: 8px; }
  .logo__mark { width: 28px; height: 28px; flex-basis: 28px; }
  .logo__word { font-size: 14px; letter-spacing: 0; }
  .hd__menu { padding: 0 6px; }
  .hd__menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Grid children never grow past their track (long URLs in browser bars,
   tab rows, wide headings). */
.wk-item > *, .show__in > *, .pj-head > *, .sh > *, .studio > *, .example > *, .svx > *, .faq--2 > *, .confirm > *, .plist > * { min-width: 0; }
.browser__bar span { min-width: 0; }
.pj-head .d1 { font-size: clamp(28px, 8.2vw, 112px); }
.d2 { font-size: clamp(26px, 6.2vw, 84px); }

/* Logo sectors as cropped graphics (decorative, aria-hidden). */
.logo__mark { width: 40px; height: 40px; flex-basis: 40px; }
@media (max-width: 400px) { .logo__mark { width: 32px; height: 32px; flex-basis: 32px; } }
.hero__deco { width: clamp(120px, 20vw, 300px); height: clamp(120px, 20vw, 300px); top: clamp(16px, 3vw, 40px); right: 0; }
.hero__sector { position: absolute; right: -18%; top: 0; width: 100%; height: auto; color: var(--navy); }
.hero__deco .halftone { inset: auto 34% -26% auto; width: 70%; height: 46%; }
.final__sector { position: absolute; z-index: -1; right: calc(-1 * clamp(40px, 8vw, 120px)); top: calc(-1 * clamp(30px, 5vw, 70px)); width: clamp(180px, 34vw, 520px); height: auto; color: var(--navy-deep); }
/* Hero sector sits in the empty area beside the form, never behind the headline. */
.hero__deco { top: auto; bottom: clamp(24px, 4vw, 64px); right: 0; width: clamp(180px, 18vw, 280px); height: clamp(180px, 18vw, 280px); }
.hero__sector { right: -14%; top: auto; bottom: 0; }
@media (max-width: 1100px) { .hero__deco { display: none; } }
@media (max-width: 640px) { .prices__amt { white-space: normal; font-size: clamp(24px, 7vw, 34px); } }
.btn { max-width: 100%; }
.qr__actions a { min-width: 0; } .qr__actions small { overflow-wrap: anywhere; text-align: center; }
/* Home: starting-price strip (anchor #pricing, used by ad sitelinks). */
.pstrip { margin-top: clamp(32px, 4vw, 48px); padding: 22px clamp(16px, 2.4vw, 28px); background: var(--tint); border-radius: var(--r-lg); display: grid; grid-template-columns: auto 1fr auto; gap: 14px 28px; align-items: center; scroll-margin-top: calc(var(--header) + 24px); }
.pstrip ul { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pstrip li { display: inline-flex; gap: 8px; align-items: baseline; font-size: 14.5px; color: var(--muted); }
.pstrip b { font-variation-settings: 'wdth' 125; font-weight: 900; color: var(--navy); font-size: 17px; }
@media (max-width: 900px) { .pstrip { grid-template-columns: 1fr; } }
/* Case-study head: the title gets the full width so long names never split. */
.pj-head { grid-template-columns: 1fr; gap: 28px; }
.pj-head .d1 { font-size: clamp(28px, 7vw, 104px); }
.pj-head > div:last-child { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 40px; align-items: end; }
.pj-head > div:last-child > p { margin: 0 !important; }
@media (max-width: 760px) { .pj-head > div:last-child { grid-template-columns: 1fr; } }

/* Word-fit pass (no display word may split across lines). */
.d2 { font-size: clamp(26px, 5.2vw, 74px); }
.faq--2 .d2, .studio .d2 { font-size: clamp(26px, 3.3vw, 50px); }
@media (max-width: 820px) {
  .svc__row { grid-template-columns: 1fr; padding-right: 56px; gap: 8px; }
  .svc__n { padding-top: 0; }
  .svc__p { grid-column: 1; }
  .svc__go { position: absolute; right: 0; top: clamp(22px, 3vw, 34px); width: 40px; height: 40px; }
  .svc__h { font-size: clamp(18px, 5.4vw, 26px); }
}
.pj-next .d2 { font-size: clamp(20px, 5.4vw, 64px); }
@media (max-width: 560px) { .pj-next .svc__go { width: 44px; height: 44px; } }
.d2 { font-size: clamp(22px, 5.2vw, 74px); }
.svx h2 { font-size: clamp(20px, 3.4vw, 48px); }
.example .d2 { font-size: clamp(24px, 3.2vw, 46px); }

/* ══ Interaction pass (2026-10-18) ═══════════════════════════════════════════
   Same identity. Less opening text, work you can explore, small working
   examples, direct contact within reach. One motion vocabulary: press 80ms,
   hover 240ms, panels 360ms, on --ease (out) or --ease-io (long pans). */
:root { --t-press: .08s; --t-hover: .24s; --t-panel: .36s; --ease-io: cubic-bezier(.45, .05, .55, .95); --dock-h: 64px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.15em; height: 1.15em; flex: 0 0 auto; }

/* Buttons: the fill sweeps in from the left, the arrow nudges, a press gives. */
.btn { position: relative; isolation: isolate; overflow: hidden; --btn-fill: var(--navy-2); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--btn-fill); transform: scaleX(0); transform-origin: right center; transition: transform var(--t-hover) var(--ease); }
.btn:hover { background: var(--navy); border-color: var(--navy); }
@media (hover: hover) { .btn:hover::before { transform: scaleX(1); transform-origin: left center; } }
.btn:focus-visible::before { transform: scaleX(1); transform-origin: left center; }
.btn:active { transform: translateY(1px) scale(.985); transition-duration: var(--t-press); }
.btn[disabled]::before, .btn[aria-disabled="true"]::before { display: none; }
.btn--line { --btn-fill: var(--navy); transition: color var(--t-hover) var(--ease) .05s, border-color var(--t-hover) var(--ease), transform var(--t-press) var(--ease); }
.btn--line:hover, .btn--line:focus-visible { background: transparent; color: var(--white); }
.btn--white, .on-navy .lead__row .btn, .plan--feat .btn { --btn-fill: #DCE2F2; }
.btn--white:hover, .on-navy .lead__row .btn:hover, .plan--feat .btn:hover { background: var(--white); border-color: var(--white); color: var(--navy); }
a:focus-visible .arrow, button:focus-visible .arrow { transform: translateX(4px); }
.show__ctrl [data-show-prev]:hover .arrow, .show__ctrl [data-show-prev]:focus-visible .arrow { transform: scaleX(-1) translateX(4px); }
.go { transition: color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease); }
.hd__nav a:not(.btn):focus-visible::after { transform: scaleX(1); }
/* Focus stays visible on navy surfaces. */
.show :focus-visible, .final :focus-visible, .mm :focus-visible, .on-navy :focus-visible, .qr__plate :focus-visible { outline-color: var(--white); }

/* Direct contact: one link style, used in the hero row, header menu, mobile menu and dock. */
.reach__a { display: inline-flex; align-items: center; gap: 10px; color: var(--navy); text-decoration: none; font-weight: 700; font-variation-settings: 'wdth' 112; line-height: 1.2; }
.reach__a .ico { width: 20px; height: 20px; }
.reach__t { display: grid; }
.reach__t small { margin-top: 2px; font-weight: 500; font-variation-settings: 'wdth' 100; font-size: 13px; color: var(--muted); }
.reach { margin-top: clamp(16px, 2.2vw, 26px); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.reach__q { margin: 0; font-size: 14.5px; color: var(--muted); }
.reach__list { display: flex; flex-wrap: wrap; gap: 6px; }
.reach__list .reach__a { min-height: 44px; padding: 0 14px 0 12px; border: 1.5px solid var(--line-2); border-radius: var(--r); background: var(--white); font-size: 15px;
  transition: border-color var(--t-hover) var(--ease), background var(--t-hover) var(--ease), transform var(--t-press) var(--ease); }
.reach__list .reach__a:hover { border-color: var(--navy); background: var(--tint); color: var(--navy); }
.reach__list .reach__a:active { transform: scale(.97); }
@media (max-width: 560px) {
  .reach { display: grid; gap: 8px; }
  .reach__list { flex-wrap: nowrap; gap: 5px; }
  .reach__list li { flex: 1 1 auto; min-width: 0; }
  .reach__list .reach__a { width: 100%; justify-content: center; gap: 5px; padding: 0 8px; font-size: 14px; }
  .reach__list .reach__a .ico { width: 18px; height: 18px; }
}
@media (max-width: 370px) {
  .reach__list li { flex-basis: 0; }
  .reach__list .reach__a { flex-direction: column; gap: 2px; min-height: 52px; padding: 0 4px; font-size: 13px; }
}

/* Header contact menu (desktop). Without JS the plain Contact link shows. */
.hdc { position: relative; }
.js .hdc__link { display: none; }
html:not(.js) .hdc__btn, html:not(.js) .hdc__menu { display: none; }
.hdc__btn { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; border: 0; background: none; color: var(--ink); font: 600 15px/1.6 var(--font); cursor: pointer; }
.hdc__btn .ico { width: 12px; height: 12px; transition: transform var(--t-hover) var(--ease); }
.hdc__btn[aria-expanded="true"] .ico { transform: rotate(180deg); }
.hdc__btn::after { content: ""; position: absolute; left: 0; right: 18px; bottom: 4px; height: 2px; background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform var(--t-hover) var(--ease); }
.hdc__btn:hover::after, .hdc__btn:focus-visible::after, .hdc__btn.is-current::after, .hdc__btn[aria-expanded="true"]::after { transform: scaleX(1); }
.hdc__menu { position: absolute; right: -14px; top: calc(100% + 10px); z-index: 55; width: 296px; padding: 8px; display: grid; gap: 2px;
  background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: 0 24px 48px -24px rgba(16, 31, 73, .38);
  visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity var(--t-hover) var(--ease), transform var(--t-hover) var(--ease), visibility 0s var(--t-hover); }
.hdc.is-open .hdc__menu { visibility: visible; opacity: 1; transform: none; transition: opacity var(--t-hover) var(--ease), transform var(--t-hover) var(--ease); }
.hd__nav .hdc__menu a { padding: 10px 12px; border-radius: var(--r); font-size: 15px; }
.hd__nav .hdc__menu a::after { content: none; }
.hd__nav .hdc__menu .reach__a { color: var(--navy); font-weight: 700; }
.hd__nav .hdc__menu a:hover, .hd__nav .hdc__menu a:focus-visible { background: var(--tint); }
.hd__nav .hdc__menu .hdc__all { display: flex; align-items: center; gap: 8px; margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 var(--r) var(--r); font-size: 14px; font-weight: 700; color: var(--navy); }

/* Mobile menu: contact links, and links that settle in one after another. */
.mm__reach { display: grid; gap: 2px; }
.mm__reach .reach__a { min-height: 48px; color: var(--white); }
.mm__reach .reach__t small { color: #AEB8D6; }
@media (prefers-reduced-motion: no-preference) {
  .mm__links a, .mm__foot > * { opacity: 0; transform: translateY(12px); transition: opacity .3s var(--ease), transform .4s var(--ease); }
  .mm.is-open .mm__links a, .mm.is-open .mm__foot > * { opacity: 1; transform: none; }
  .mm.is-open .mm__links a:nth-child(2) { transition-delay: .03s; }
  .mm.is-open .mm__links a:nth-child(3) { transition-delay: .06s; }
  .mm.is-open .mm__links a:nth-child(4) { transition-delay: .09s; }
  .mm.is-open .mm__links a:nth-child(5) { transition-delay: .12s; }
  .mm.is-open .mm__foot > * { transition-delay: .15s; }
}

/* Footer contact: same icons, same order as the hero row. */
.ft__reach a { display: inline-flex; gap: 10px; align-items: flex-start; }
.ft__reach .ico { width: 18px; height: 18px; margin-top: 3px; color: var(--navy); }

/* Mobile contact dock. Space is reserved below the page so it never covers
   content; it tucks away while the hero's own contact row is on screen, while
   a field has focus (keyboard), and behind the menu. */
.dock { display: none; }
@media (max-width: 900px) {
  body.has-dock { padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px)); }
  .dock { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line-2); box-shadow: 0 -12px 30px -20px rgba(16, 31, 73, .4);
    transition: transform var(--t-panel) var(--ease), visibility 0s; }
  @supports (backdrop-filter: blur(4px)) { .dock { background: rgba(255, 255, 255, .88); backdrop-filter: saturate(1.4) blur(12px); } }
  .dock ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; max-width: 560px; margin: 0 auto; }
  .dock .reach__a { width: 100%; min-height: 52px; flex-direction: column; justify-content: center; gap: 3px; border-radius: var(--r); font-size: 13px; transition: background var(--t-hover) var(--ease); }
  .dock .reach__a .ico { width: 22px; height: 22px; }
  .dock .reach__a:active { background: var(--tint); }
  .js .dock.is-tucked, .js .dock.is-kb, body.menu-open .dock { transform: translateY(calc(100% + 2px)); visibility: hidden; transition: transform var(--t-panel) var(--ease), visibility 0s var(--t-panel); }
}

/* Hero: one line, one CTA, direct contact, then the phone. */
.hero { isolation: isolate; padding: clamp(22px, 5vw, 80px) 0 clamp(26px, 4vw, 56px); }
.hero__h { --fs: clamp(33px, 10.2vw, 60px); font-size: var(--fs); }
@media (min-width: 700px) { .hero__h { --fs: clamp(56px, 8.4vw, 124px); } }
/* --fit (set by the build) = the longest line's width in em: never larger than fits the column. */
.hero__h[style*="--fit"] { font-size: min(var(--fs), calc(min(100vw - 2 * var(--gutter), var(--max)) / var(--fit) * .97)); }
.hero__sub { margin-bottom: clamp(18px, 2.6vw, 32px); }
.hero__form { margin-bottom: 0; }
.lead__consent--compact { margin-top: 10px; }
.lead__consent--compact b { color: var(--ink); font-weight: 700; }
/* White base inside the layer so the grain (overlay blend) only shows on the shapes. */
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: var(--white); }
.hero__shape { position: absolute; display: block; background: var(--navy); border-radius: 24%; filter: blur(46px); }
.hero__shape--a { width: clamp(220px, 34vw, 560px); aspect-ratio: 1; right: -9%; top: -20%; opacity: .1; }
.hero__shape--b { width: clamp(140px, 16vw, 260px); aspect-ratio: 1; left: -6%; bottom: -8%; opacity: .06; border-radius: 50%; }
.hero__dots { width: clamp(120px, 13vw, 210px); height: clamp(80px, 8vw, 130px); right: 24%; top: 9%; opacity: .1; }
.hero__bg .grain { opacity: .6; }
@media (hover: hover) and (pointer: fine) { .hero__bg > [data-depth] { will-change: transform; } }
@media (max-width: 900px) { .hero__dots, .hero__shape--b { display: none; } }
@media (max-width: 560px) {
  .hero { padding: 16px 0 18px; }
  .hero .d1 { margin-bottom: 12px; }
  .hero__sub { font-size: 17px; line-height: 1.45; margin-bottom: 16px; }
  .hero .lead label.lead__label { margin-bottom: 6px; font-size: 14.5px; }
  .hero .lead__consent--compact { font-size: 12px; line-height: 1.45; }
  .reach { margin-top: 14px; gap: 6px; }
}

/* Featured phone: peeks into the first screen on mobile, settles upright. */
@media (max-width: 960px) { .show__in { padding-top: 14px; } }
@media (prefers-reduced-motion: no-preference) {
  .js .phone--enter { transform: translateY(64px) rotate(-5deg); transition: transform 1s var(--ease) .08s; animation: rvSafety 0s 2.5s forwards; }
  .js .phone--enter.is-in { transform: none; animation: none; }
}
.phone__screen img { transition: opacity .22s var(--ease); }
.phone__screen img.is-out { opacity: 0; }
.show [data-show-status], .show [data-show-name], .show [data-show-type], .show [data-show-built] { transition: opacity .2s var(--ease), transform .2s var(--ease); }
.show.is-swapping [data-show-status], .show.is-swapping [data-show-name], .show.is-swapping [data-show-type], .show.is-swapping [data-show-built] { opacity: 0; transform: translateY(4px); }
.show__links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
.show__visit { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #DCE2F2; font-weight: 600; font-size: 15px; text-underline-offset: 4px; }
.show__visit .ico { width: 16px; height: 16px; }
.show__visit:hover { color: var(--white); }
.show__ctrl { flex-wrap: wrap; }
.show__ctrl .show__explore { width: auto; display: inline-flex; gap: 8px; padding: 0 14px; font-weight: 700; font-size: 14px; font-variation-settings: 'wdth' 112; transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease); }
.show__ctrl .show__explore .ico { width: 18px; height: 18px; }
.show__ctrl .show__explore[aria-pressed="true"] { background: var(--white); color: var(--navy); border-color: var(--white); }
.show__hint { margin: 0; font-size: 14px; line-height: 1.45; color: #C8D0E6; max-width: 36ch; }
/* Explore mode: the screen becomes its own scroll area, clearly marked, with
   a way out (button, Esc, or scrolling the phone off screen). */
.phone.is-exploring { box-shadow: 0 0 0 1.5px #2A3350 inset, 0 0 0 3px var(--white), 0 0 0 9px rgba(255, 255, 255, .16), 0 30px 80px -20px rgba(0, 0, 0, .65); }
.phone.is-exploring .phone__screen { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; touch-action: pan-y; }
.phone.is-exploring .phone__screen img { animation: none !important; transform: none !important; }
.phone__screen:focus-visible { outline: 3px solid var(--white); outline-offset: 5px; }

/* Portfolio previews: frames stay still, the real screenshot pans inside. */
.wk-item__media { position: relative; }
.wk-item__link { display: block; color: inherit; }
.browser__view { position: relative; aspect-ratio: 8 / 5; overflow: hidden; background: var(--tint); }
.browser__view img { width: 100%; height: auto; max-width: none; }
.cx-item__shot img { height: auto; object-fit: unset; }
.cx-item:hover .cx-item__shot img { transform: none; }
.browser__view.is-scroll, .phone__screen.is-scroll { overflow-y: auto; overscroll-behavior: contain; }
.peek-btn { position: absolute; left: 12px; bottom: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px 0 10px;
  border: 1px solid rgba(16, 31, 73, .2); border-radius: var(--r); background: rgba(255, 255, 255, .94); color: var(--navy); cursor: pointer;
  font: 700 13.5px/1 var(--font); font-variation-settings: 'wdth' 112; box-shadow: 0 8px 20px -12px rgba(16, 31, 73, .6);
  transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease), transform var(--t-press) var(--ease); }
.peek-btn .ico { width: 16px; height: 16px; }
.peek-btn:hover { background: var(--white); }
.peek-btn:active { transform: scale(.97); }
.peek-btn[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.wk-item--flip .peek-btn { left: auto; right: 12px; }
@media (max-width: 900px) { .peek-btn { min-height: 44px; } .wk-item--flip .peek-btn { right: auto; left: 12px; } }

/* Service demos: miniature sites inside the existing service sections. */
.svx__side { display: grid; gap: clamp(22px, 3vw, 34px); align-content: start; min-width: 0; }
.demo { display: grid; gap: 10px; min-width: 0; }
.demo__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.demo__badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); }
.demo__badge::before { content: ""; width: 8px; height: 8px; background: var(--navy); }
.demo__reset { min-height: 36px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--white); color: var(--muted); font: 600 13px var(--font); cursor: pointer; transition: color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease); }
.demo__reset:hover { color: var(--navy); border-color: var(--navy); }
.demo__screen { overflow: hidden; border-radius: var(--r-lg); background: var(--white); box-shadow: 0 0 0 1px var(--line-2), 0 24px 50px -30px rgba(16, 31, 73, .35); }
.demo__body { display: grid; gap: 12px; align-content: start; min-height: 300px; padding: 18px; }
.demo__note { margin: 0; font-size: 13.5px; color: var(--muted); }
.demo__h { margin: 0; font-variation-settings: 'wdth' 118; font-weight: 800; font-size: 18px; line-height: 1.15; color: var(--ink); }
.demo__step { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.demo__step span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 2px; background: var(--navy); color: var(--white); font-size: 11px; }
.demo__step--plain { text-transform: none; letter-spacing: 0; font-family: var(--font); font-size: 14px; }
.demo__opts, .demo__prods { display: grid; gap: 6px; }
.demo__opt, .demo__prod { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 6px 12px; text-align: left;
  border: 1.5px solid var(--line-2); border-radius: var(--r); background: var(--white); color: var(--ink); cursor: pointer;
  transition: border-color var(--t-hover) var(--ease), background var(--t-hover) var(--ease), color var(--t-hover) var(--ease), transform var(--t-press) var(--ease); }
.demo__prod { grid-template-columns: 34px minmax(0, 1fr) auto; }
.demo__opt b, .demo__prod b { font-weight: 700; font-size: 15px; }
.demo__opt span, .demo__prod > span:last-child { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.demo__opt:hover, .demo__prod:hover { border-color: var(--navy); }
.demo__opt:active, .demo__prod:active, .demo__slot:active, .demo__tabs button:active, .demo__act:active { transform: scale(.98); }
.demo__opt[aria-pressed="true"], .demo__prod[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.demo__opt[aria-pressed="true"] span, .demo__prod[aria-pressed="true"] > span:last-child { color: #C8D0E6; }
.demo__slots { display: flex; flex-wrap: wrap; gap: 6px; }
.demo__slot { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 12px; border: 1.5px solid var(--line-2); border-radius: var(--r); background: var(--white); color: var(--ink); font: 600 14px var(--font); cursor: pointer;
  transition: border-color var(--t-hover) var(--ease), background var(--t-hover) var(--ease), color var(--t-hover) var(--ease), transform var(--t-press) var(--ease); }
.demo__slot:hover:not(:disabled) { border-color: var(--navy); }
.demo__slot small { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.demo__slot:disabled { background: var(--tint); color: #8C93A6; cursor: not-allowed; }
.demo__slot[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.demo__need { margin: 0; font-size: 14px; font-weight: 600; color: var(--error); }
.demo__done, .demo__toast, .demo__wa, .demo__panels > :not([hidden]) { animation: demoIn var(--t-panel) var(--ease); }
.demo__done { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 12px; border-left: 3px solid var(--live); border-radius: var(--r); background: var(--tint); }
.demo__done p { margin: 0; font-weight: 700; color: var(--ink); }
.demo__done p.demo__small { font-weight: 500; color: var(--muted); }
.demo__tick { position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--live); }
.demo__tick::after { content: ""; position: absolute; left: 10px; top: 6px; width: 7px; height: 12px; border: solid var(--white); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.demo__small { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
@keyframes demoIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.demo__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.demo__cart { position: relative; display: inline-flex; align-items: center; padding: 4px; color: var(--navy); }
.demo__cart .ico { width: 26px; height: 26px; }
.demo__cart b { position: absolute; right: -8px; top: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--navy); color: var(--white); font: 700 12px/20px var(--mono); text-align: center; }
.demo__cart.is-bump b { animation: demoBump .42s var(--ease); }
@keyframes demoBump { 40% { transform: scale(1.35); } }
.demo__sw { width: 34px; height: 34px; border-radius: var(--r); }
.demo__sw--1 { background: linear-gradient(135deg, #101F49, #33508F); }
.demo__sw--2 { background: linear-gradient(135deg, #E9DFCC, #C9B48E); }
.demo__sw--3 { background: linear-gradient(135deg, #D9B45A, #9C7A22); }
.demo__sw--4 { background: radial-gradient(circle at 50% 50%, transparent 38%, #C9A043 40% 56%, transparent 58%), #F4EEE2; }
.demo__sw--5 { background: radial-gradient(circle at 30% 50%, #fff 18%, transparent 20%), radial-gradient(circle at 70% 50%, #fff 18%, transparent 20%), #DCD7CD; }
.demo__sw--6 { background: linear-gradient(135deg, #C9A043, #EAD39A); }
.demo__add { min-height: 48px; border: 0; border-radius: var(--r); background: var(--navy); color: var(--white); font: 700 15px var(--font); font-variation-settings: 'wdth' 112; cursor: pointer; transition: background var(--t-hover) var(--ease), transform var(--t-press) var(--ease); }
.demo__add:hover { background: var(--navy-2); }
.demo__add:active { transform: scale(.98); }
.demo__toast { margin: 0; padding: 10px 12px; border-left: 3px solid var(--live); border-radius: var(--r); background: var(--tint); font-size: 14px; font-weight: 600; color: var(--ink); }
.demo__wa { display: grid; gap: 8px; padding: 12px; border-radius: var(--r); background: #EFEAE2; }
.demo__wa-h { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: #2F5D50; }
.demo__wa-h .ico { width: 16px; height: 16px; }
.demo__bubble { justify-self: end; max-width: 92%; margin: 0; padding: 9px 12px; border-radius: 8px 8px 2px 8px; background: #D9FDD3; color: #111B21; font-size: 14.5px; line-height: 1.4; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); }
.demo__send { justify-self: end; min-height: 40px; padding: 0 16px; border: 0; border-radius: 20px; background: #1F7A4D; color: var(--white); font: 700 14px var(--font); cursor: pointer; }
.demo__tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.demo__tabs button { min-height: 40px; padding: 0 14px; border: 1.5px solid var(--line-2); border-radius: var(--r); background: var(--white); color: var(--ink); font: 600 14px var(--font); cursor: pointer;
  transition: border-color var(--t-hover) var(--ease), background var(--t-hover) var(--ease), color var(--t-hover) var(--ease), transform var(--t-press) var(--ease); }
.demo__tabs button:hover { border-color: var(--navy); }
.demo__tabs button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.demo__menu li { display: grid; grid-template-columns: auto minmax(12px, 1fr) auto; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.demo__menu i { border-bottom: 1.5px dotted var(--line-2); transform: translateY(-4px); }
.demo__menu b { font-family: var(--mono); font-size: 13.5px; font-weight: 600; color: var(--navy); }
.demo__list li { position: relative; padding: 10px 0 10px 20px; border-bottom: 1px solid var(--line); font-size: 15px; }
.demo__list li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 9px; height: 9px; background: var(--navy); }
.demo__biz { display: flex; align-items: center; gap: 10px; }
.demo__logo { width: 30px; height: 30px; border-radius: 6px; background: linear-gradient(135deg, #1F6F8B, #134B5F); }
.demo__acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.demo__act { min-height: 46px; padding: 0 6px; border: 1.5px solid var(--navy); border-radius: var(--r); background: var(--white); color: var(--navy); font: 700 14px var(--font); cursor: pointer; transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease), transform var(--t-press) var(--ease); }
.demo__act[aria-pressed="true"] { background: var(--navy); color: var(--white); }
@media (max-width: 400px) { .demo__body { padding: 14px; } .demo__acts { grid-template-columns: 1fr; } }

/* ── Free checkup (/checkup/) ────────────────────────────────────────────── */
/* Business name sits above the phone row and matches its weight. */
.lead .lead__field--biz { margin-bottom: 14px; }
.lead .field input.lead__biz { min-height: 56px; border: 2px solid var(--navy); font: 500 18px/1.2 var(--font); }
.lead .lead__biz::placeholder { color: #9AA0B2; }
.on-navy .lead .field input.lead__biz { border-color: var(--white); }
@media (max-width: 560px) { .lead .field input.lead__biz { min-height: 54px; } .hero .lead .lead__field--biz { margin-bottom: 10px; } }
/* "What we check" reuses the services rows, without the link arrow. */
.svc--static .svc__row { grid-template-columns: 70px minmax(0, 1.2fr) minmax(0, 1fr); }
.svc--static .svc__row::after { content: none; }
.svc--static .svc__price { color: var(--navy); font-weight: 600; }
@media (max-width: 820px) { .svc--static .svc__row { grid-template-columns: 1fr; padding-right: 0; } }
.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .steps--3 { grid-template-columns: 1fr 1fr 1fr; } .steps--3 li:nth-child(odd) { border-left: 1px solid var(--line-2); padding-left: clamp(14px, 2vw, 28px); } .steps--3 li:first-child { border-left: 0; padding-left: 0; } }
@media (max-width: 760px) { .steps--3 { grid-template-columns: 1fr; } .steps--3 li { border-left: 0 !important; padding-left: 0 !important; } }
/* Example report card: always labelled as an example. */
.score { position: relative; display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr) minmax(0, 1.3fr); gap: clamp(24px, 4vw, 56px); padding: clamp(22px, 3.4vw, 44px); border: 2px solid var(--navy); border-radius: var(--r); background: var(--white); }
.score__tag { position: absolute; top: -2px; right: -2px; padding: 6px 12px; background: var(--navy); color: var(--white); font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; border-radius: 0 var(--r) 0 var(--r); }
.score__num { margin: 8px 0 0; color: var(--navy); line-height: .85; }
.score__num b { font-variation-settings: 'wdth' 125; font-weight: 900; font-size: clamp(76px, 9vw, 128px); }
.score__num span { margin-left: 4px; font: 600 18px var(--mono); color: var(--muted); }
.score__bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; align-content: start; }
.score__bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 12px; align-items: baseline; }
.score__name { font-weight: 700; font-variation-settings: 'wdth' 108; font-size: 15px; color: var(--ink); }
.score__val { grid-row: 1; grid-column: 2; font: 600 14px var(--mono); color: var(--navy); }
.score__bar { grid-row: 2; grid-column: 1 / -1; height: 10px; background: var(--tint); border-radius: var(--r); overflow: hidden; }
.score__bar i { display: block; height: 100%; background: var(--navy); transform-origin: left; }
.score__fixes h3 { font-variation-settings: 'wdth' 118; font-weight: 800; font-size: 19px; line-height: 1.2; margin: 0 0 10px; color: var(--ink); }
.score__fixes ol { list-style: none; margin: 0; padding: 0; counter-reset: fix; }
.score__fixes li { counter-increment: fix; display: grid; grid-template-columns: 30px minmax(0, 1fr); padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.45; }
.score__fixes li::before { content: counter(fix, decimal-leading-zero); padding-top: 2px; font: 600 12.5px var(--mono); color: var(--navy); }
@media (prefers-reduced-motion: no-preference) {
  .js .score.rv .score__bar i { transform: scaleX(0); transition: transform 1.1s var(--ease) .25s; animation: scoreSafety 0s 2.5s forwards; }
  .js .score.rv.in .score__bar i { transform: none; animation: none; }
}
@keyframes scoreSafety { to { transform: none; } }
@media (max-width: 960px) { .score { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } .score__fixes { grid-column: 1 / -1; } }
@media (max-width: 560px) { .score { grid-template-columns: 1fr; gap: 22px; padding-top: 30px; } .score__num b { font-size: 84px; } }

/* Checkup: business suggestions from Google (checkup.js) */
.ck-ac { position: relative; }
.ck-ac__list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; margin: 0; padding: 4px 0; list-style: none; background: var(--white); border: 2px solid var(--navy); border-radius: var(--r); box-shadow: 0 12px 28px rgba(16, 31, 73, .18); max-height: 330px; overflow: auto; text-align: left; }
.ck-ac__opt { display: grid; gap: 2px; padding: 10px 14px; cursor: pointer; color: var(--ink); }
.ck-ac__opt b { font-weight: 700; font-size: 16px; }
.ck-ac__opt span { font-size: 13.5px; color: var(--muted); }
.ck-ac__opt[aria-selected="true"], .ck-ac__opt:hover { background: var(--tint); }
.ck-ac__foot { padding: 8px 14px 6px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); }
.ck-ac__found { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--navy); }
.on-navy .ck-ac__found { color: #C8D0E6; }
/* Checkup: live run on the thank-you page */
.ckrun { margin: 22px 0 6px; padding: clamp(18px, 3vw, 26px); border: 2px solid var(--navy); border-radius: var(--r); background: var(--white); max-width: 680px; }
.ckrun__qh { margin: 0 0 12px; font-weight: 700; font-variation-settings: 'wdth' 108; color: var(--ink); }
.ckrun__a { display: flex; flex-wrap: wrap; gap: 8px; }
.ckrun__a .btn { min-height: 46px; padding: 0 16px; font-size: 15px; }
.ckrun__a .btn[aria-pressed="true"] { background: var(--navy); color: var(--white); }
.ckrun__a .btn:disabled { cursor: default; }
.ckrun__qok { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.ckrun__steps { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.ckrun__steps li { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.ckrun__steps li::before { content: ""; flex: 0 0 20px; height: 20px; border: 2px solid var(--line-2); border-radius: 50%; box-sizing: border-box; }
.ckrun__steps li.is-on { color: var(--ink); font-weight: 600; }
.ckrun__steps li.is-on::before { border-color: var(--navy); border-top-color: transparent; }
.ckrun__steps li.is-done { color: var(--ink); }
.ckrun__steps li.is-done::before { content: "✓"; display: grid; place-items: center; background: var(--navy); border-color: var(--navy); color: var(--white); font-size: 12px; font-weight: 800; }
@media (prefers-reduced-motion: no-preference) { .ckrun__steps li.is-on::before { animation: ckSpin .8s linear infinite; } }
@keyframes ckSpin { to { transform: rotate(360deg); } }
.ckrun__result { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.ckrun .score { border: 0; padding: 0; grid-template-columns: 1fr; gap: 20px; }
.ckrun__note { margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.ckrun__manual { margin-top: 18px; }
.ckrun__manual h2 { margin: 0 0 8px; }
.ckrun__manual p { margin: 0; color: var(--text); }
/* Checkup: report page */
.ckr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(24px, 4vw, 56px); margin-top: 44px; }
.ckr__area { border-top: 2px solid var(--navy); padding-top: 14px; }
.ckr__h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 6px; font-variation-settings: 'wdth' 118; font-weight: 800; font-size: 20px; color: var(--ink); }
.ckr__pts { font: 600 14px var(--mono); color: var(--navy); }
.ckr__list { list-style: none; margin: 0; padding: 0; }
.ckr__item { display: grid; grid-template-columns: 28px minmax(0, 1fr); padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.45; }
.ckr__icon { font-weight: 800; }
.ckr__item--ok .ckr__icon { color: var(--navy); }
.ckr__item--part .ckr__icon { color: #B45309; }
.ckr__item--miss .ckr__icon { color: var(--error); }
.ckr__item--unknown, .ckr__item--pending { color: var(--muted); }
.ckr-cta { margin-top: 48px; padding: clamp(24px, 4vw, 44px); background: var(--navy); color: var(--white); border-radius: var(--r); }
.ckr-cta h2 { margin: 0 0 8px; color: var(--white); }
.ckr-cta p { margin: 0 0 20px; color: #C8D0E6; }
.ckr-cta .btn { background: var(--white); border-color: var(--white); color: var(--navy); }
.ckr-method { margin: 22px 0 0; font-size: 13px; line-height: 1.55; color: var(--muted); max-width: 72ch; }
@media (max-width: 760px) { .ckr { grid-template-columns: 1fr; } }
/* Checkup: email step under the score */
.ckmail { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.ckmail__h { margin: 0 0 6px; font-variation-settings: 'wdth' 118; font-weight: 800; font-size: 19px; line-height: 1.2; color: var(--ink); }
.ckmail__p { margin: 0 0 14px; color: var(--text); font-size: 15.5px; }
.ckmail .field { margin-bottom: 8px; }
/* One field + button row (checkup start and unlock), like the phone row. */
.ckrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; border: 2px solid var(--navy); border-radius: var(--r); background: var(--white); }
.ckrow:focus-within { box-shadow: 0 0 0 4px rgba(16, 31, 73, .16); }
.lead .field .ckrow input, .ckmail .field .ckrow input { min-width: 0; min-height: 56px; border: 0; border-radius: 0; box-shadow: none; padding: 0 14px; font: 500 18px/1.2 var(--font); background: transparent; }
.ckrow input:focus { outline: none; box-shadow: none; }
.ckrow .btn { border-radius: 0 1px 1px 0; min-height: 56px; margin: -2px -2px -2px 0; white-space: nowrap; }
.ckrow:has([aria-invalid="true"]) { border-color: var(--error); }
@media (max-width: 560px) { .ckrow { grid-template-columns: 1fr; } .ckrow .btn { margin: 0 -2px -2px; border-radius: 0 0 1px 1px; } }
.ckmail__note { margin: 0; font-size: 12.5px; color: var(--muted); }
.ckmail__status { margin: 10px 0 0; font-weight: 600; color: var(--navy); }
.ckmail__status.is-bad { color: var(--error); }
/* Checkup: started on the page, locked until an email unlocks it */
.ckstart__err { margin: 10px 0 0; font-size: 14.5px; font-weight: 600; color: var(--error); }
.ckrun__biz { margin: 0 0 16px; font-weight: 700; font-variation-settings: 'wdth' 108; color: var(--navy); }
.hero .ckrun { margin-top: 4px; }
.score__num.is-locked b, .score__bars .is-locked .score__val, .score__fixes .is-locked { filter: blur(7px); user-select: none; }
.score__bars .is-locked .score__bar i { background: #9AA6C4; filter: blur(3px); }
.score__fixes .score__more { font-weight: 700; color: var(--navy); }
.ckrun__result.is-locked { position: relative; }
.ckrun__done { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.ckrun__done p { margin: 0 0 14px; }
.ckrun__again { margin: 18px 0 0; }
.ckrun__again .go { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--navy); cursor: pointer; }
@media (prefers-reduced-motion: no-preference) { .score__num b, .score__val, .score__fixes li { transition: filter .6s var(--ease); } }
.score__fixes li.score__more { counter-increment: none; grid-template-columns: minmax(0, 1fr); }
.score__fixes li.score__more::before { content: none; }
/* Checkup unlock: email, optional phone, one button */
.ckmail .field input.ckmail__email { min-height: 56px; border: 2px solid var(--navy); font: 500 18px/1.2 var(--font); }
.ckmail__opt { font-weight: 500; color: var(--muted); }
.ckmail__phone .hint { margin-top: 2px; }
.ckmail .btn--block { margin: 4px 0 10px; min-height: 56px; }
/* Home: the checkup band after the featured work */
.ckband { background: var(--tint); border-block: 1px solid var(--line); }
.ckband__in { display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; padding-block: clamp(26px, 4vw, 40px); }
.ckband .label { margin-bottom: 8px; }
.ckband__h { margin: 0 0 6px; font-variation-settings: 'wdth' 125; font-weight: 900; text-transform: uppercase; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.05; color: var(--navy); }
.ckband__p { margin: 0; color: var(--text); max-width: 56ch; }
.ckband .btn { flex: 0 0 auto; }
@media (max-width: 760px) { .ckband__in { flex-direction: column; align-items: stretch; } .ckband .btn { justify-content: center; } }

/* ── Blog ───────────────────────────────────────────────────────────────── */
.posts { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--navy); }
.post-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 32px; padding: clamp(22px, 3vw, 32px) 0; border-bottom: 1px solid var(--line-2); color: inherit; text-decoration: none; }
.post-row__meta { grid-column: 1; font: 500 13px/1.4 var(--mono); color: var(--muted); }
.post-row__cat { color: var(--navy); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.post-row__h { grid-column: 1; font-variation-settings: 'wdth' 118; font-weight: 800; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.15; color: var(--navy); }
.post-row__p { grid-column: 1; color: var(--text); max-width: 70ch; }
.post-row__go { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: 48px; height: 48px; border: 2px solid var(--navy); border-radius: 50%; display: grid; place-items: center; color: var(--navy); transition: background .25s var(--ease), color .25s var(--ease); }
.post-row:hover .post-row__h { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.post-row:hover .post-row__go { background: var(--navy); color: var(--white); }
@media (max-width: 560px) { .post-row { grid-template-columns: 1fr; } .post-row__go { display: none; } }
.crumbs { margin: 0 0 18px; font: 600 13px/1.4 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.crumbs a { color: var(--navy); }
/* The page-hero rule (.ph .d1) is more specific, so scope this to the post
   header; a post title is a sentence, not a hero line. */
.post-head .post__h { font-size: clamp(24px, 3.4vw, 44px); line-height: 1; margin-bottom: 18px; }
.post__meta { margin: 18px 0 0; font: 500 13.5px/1.5 var(--mono); color: var(--muted); }
.post__meta a { color: var(--navy); }
.post__body { max-width: none; font-size: 17.5px; line-height: 1.7; }
.post__photo-wrap { width: min(100% - 2 * var(--gutter), 1040px); }
.post__photo { margin: 0; }
.post__fig { margin: 32px auto; max-width: 600px; }
.post__fig img { display: block; width: 100%; height: auto; border: 1px solid var(--line-2); border-radius: var(--r); }
.post__photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); background: var(--tint); }
.post__body h2 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; color: var(--navy); margin: 44px 0 12px; scroll-margin-top: 90px; }
.post__body h3 { font-variation-settings: 'wdth' 112; font-weight: 800; font-size: 19px; margin: 28px 0 8px; }
.post__body p { margin: 0 0 16px; }
.post__body ul, .post__body ol { margin: 0 0 18px; padding-left: 22px; }
.post__body li { margin: 0 0 8px; padding-left: 4px; }
.post__body a { color: var(--navy); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.post__body strong { color: var(--ink); }
.post__body blockquote { margin: 24px 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--navy); }
.post-cta { margin: 44px 0 0; padding: clamp(22px, 4vw, 36px); background: var(--navy); color: var(--white); border-radius: var(--r); }
.post-cta .label { color: #C8D0E6; }
.post-cta__h { margin: 8px 0 8px; color: var(--white); font-variation-settings: 'wdth' 125; font-weight: 900; text-transform: uppercase; font-size: clamp(22px, 2.8vw, 32px); line-height: 1.05; }
.post-cta p { margin: 0 0 20px; color: #C8D0E6; max-width: 56ch; }
.post__body ul { list-style: disc; }
.post__body ol { list-style: decimal; }
.post__body li::marker { color: var(--navy); font-weight: 700; }

/* Checkup: the recommended plan (report page and the unlock screen) */
.ckr-rec { display: grid; gap: 10px; margin: 28px 0; padding: clamp(20px, 3vw, 32px); border: 2px solid var(--navy); border-radius: var(--r-lg); background: var(--white); }
.ckr-rec .label, .ckr-rec h2, .ckr-rec p { margin: 0; }
.ckr-rec__area { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.ckr-rec__area:empty { display: none; }
.ckr-rec__price { font-family: var(--mono); font-weight: 500; color: var(--navy); }
.ckr-rec .btn { margin-top: 6px; }

/* "What are you looking for?" cards: jump to a section of the page */
.pick { margin-top: clamp(28px, 4vw, 44px); }
.pick .label { margin-bottom: 14px; }
.pick__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.pick__card { position: relative; display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 18px 44px 18px 18px; border: 1.5px solid var(--line-2); border-radius: var(--r-lg); background: var(--white); color: var(--text); text-decoration: none; transition: border-color var(--t-hover, .2s) var(--ease), background var(--t-hover, .2s) var(--ease), color var(--t-hover, .2s) var(--ease); }
.pick__card b { font-variation-settings: 'wdth' 112; font-weight: 800; font-size: 17px; color: var(--navy); line-height: 1.2; }
.pick__card span { font-size: 14px; color: var(--muted); line-height: 1.45; }
.pick__card em { font-style: normal; font-family: var(--mono); font-size: 12.5px; color: var(--navy); margin-top: auto; padding-top: 6px; }
.pick__card i { position: absolute; right: 16px; top: 18px; color: var(--navy); font-style: normal; }
.pick__card:hover, .pick__card:focus-visible { border-color: var(--navy); background: var(--navy); color: var(--white); }
.pick__card:hover b, .pick__card:hover em, .pick__card:hover i, .pick__card:focus-visible b, .pick__card:focus-visible em, .pick__card:focus-visible i { color: var(--white); }
.pick__card:hover span, .pick__card:focus-visible span { color: #CDD5EC; }
@media (max-width: 560px) { .pick__grid { grid-template-columns: 1fr 1fr; gap: 8px; } .pick__card { padding: 14px 14px 14px 14px; } .pick__card i { display: none; } .pick__card b { font-size: 15.5px; } .pick__card span { font-size: 13px; } }

/* Design sections: an image beside the prices */
.dsec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.dsec__fig { margin: 0; position: sticky; top: calc(var(--header) + 24px); }
.dsec__fig img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); background: var(--tint); }
.dsec__fig figcaption { margin-top: 10px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.dsec--flip .dsec__fig { order: 2; }
.dsec__body .blk:first-child .sh { margin-top: 0; }
@media (max-width: 900px) { .dsec { grid-template-columns: minmax(0, 1fr); } .dsec__fig { position: static; } .dsec--flip .dsec__fig { order: 0; } }

/* Closing section with buttons instead of the phone form */
.final__links { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.btn--ghost-white { background: transparent; border-color: rgba(255, 255, 255, .55); color: var(--white); }
.btn--ghost-white:hover, .btn--ghost-white:focus-visible { background: var(--white); border-color: var(--white); color: var(--navy); }
.pick__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .pick__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Seven cards: the first one spans two columns so the rows come out even. */
.pick__grid--n7 > li:first-child { grid-column: span 2; }
.pick__grid--n7 > li:first-child .pick__card { background: var(--tint); }
/* In the half-width design sections the header stacks and the heading is smaller. */
.dsec__body .sh { grid-template-columns: minmax(0, 1fr); align-items: start; margin-bottom: 28px; }
.dsec__body .sh .d2 { font-size: clamp(28px, 3.4vw, 46px); max-width: none; overflow-wrap: normal; hyphens: none; }

/* ── Booking ad landing: try it (2026-10-22) ─────────────── */
.bk-try { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { .bk-try { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; } }
.bf-pay { display: grid; gap: 10px; animation: demoIn var(--t-panel) var(--ease); }
.bf-pay__box { display: grid; gap: 12px; padding: 14px; border: 1.5px solid var(--navy); border-radius: var(--r); background: var(--tint); }
@media (min-width: 520px) { .bf-pay__box { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.bf-pay__h { margin: 0; font-weight: 700; color: var(--ink); }
.bf-pay__box .demo__add { padding: 0 18px; }
.bf-owner { display: grid; gap: 10px; margin-top: 6px; animation: demoIn var(--t-panel) var(--ease); }
.bf-owner__label { margin: 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bf-owner__note { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--ink); color: var(--white); box-shadow: 0 18px 40px -22px rgba(16, 31, 73, .6); }
.bf-owner__note b { display: block; font-size: 14.5px; }
.bf-owner__note span:last-child { display: block; margin-top: 2px; font-size: 13.5px; color: #8EE3B5; font-weight: 600; }
.bf-owner__app { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--white); color: var(--navy); font: 800 13px var(--font); font-variation-settings: 'wdth' 125; }
.bf-owner__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 6px 0 0; font-weight: 700; color: var(--ink); }
.calc { display: grid; gap: 16px; padding: 22px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--white); }
.calc .label { margin: 0; }
.calc__h { margin: 0; font-variation-settings: 'wdth' 118; font-weight: 800; font-size: 22px; line-height: 1.15; color: var(--ink); }
.calc__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; font-weight: 600; color: var(--ink); }
.calc__row output { font-family: var(--mono); font-size: 15px; color: var(--navy); }
.calc__row input[type="range"] { grid-column: 1 / -1; width: 100%; height: 28px; accent-color: var(--navy); cursor: pointer; }
.calc__out { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 14px; border-top: 2px solid var(--navy); }
.calc__k { margin: 0; font-size: 13px; color: var(--muted); }
.calc__v { margin: 4px 0 0; font-variation-settings: 'wdth' 125; font-weight: 900; font-size: clamp(26px, 7vw, 34px); line-height: 1; color: var(--live); }
.calc__v--lost { color: var(--error); }