/* Vetfluence redesign, October 2026.
   Layout concept: paper pages with an ink "night" band at the centre of Home (the 11:47 PM
   visitor), mono timestamps as the recurring detail, one slate accent. Single deliberate theme. */
:root {
  --ink: #161513;
  --ink-2: #24221f;
  --ink-soft: #4a4640;
  --paper: #f5f1e8;
  --paper-2: #ece5d4;
  --paper-3: #e2d9c4;
  --slate: #5b7188;
  --slate-deep: #3f5063;
  --slate-light: #93a8b9;
  --line: rgba(22, 21, 19, .14);
  --line-ink: rgba(245, 241, 232, .16);
  --muted-ink: rgba(245, 241, 232, .68);
  /* content colours for the clinic mock-ups only (a clinic's own UI, not Vetfluence's theme) */
  --ok: #3f8a5f;
  --no: #b3453a;

  --f-display: "Archivo", "Archivo Display Fallback", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Archivo", "Archivo Body Fallback", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --wrap: 1200px;
  --gut: max(20px, env(safe-area-inset-left, 0px));
  --gut-r: max(20px, env(safe-area-inset-right, 0px));
  --r: 14px;
  --r-lg: 22px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --head-h: 72px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--slate); outline-offset: 3px; border-radius: 6px; }
button { font: inherit; color: inherit; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 8px; }
.skip:focus { left: 16px; }

/* ---------------------------------------------------------------- type */
.wrap { max-width: calc(var(--wrap) + 48px); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut-r); }
.display, .h2, .h3 { font-family: var(--f-display); text-wrap: balance; margin: 0; }
.display { font-family: "Archivo", "Archivo Hero Fallback", "Helvetica Neue", Arial, sans-serif; font-size: clamp(42px, 6.4vw, 84px); font-weight: 850; font-stretch: 108%; line-height: .98; letter-spacing: -.035em; }
.h2 { font-family: "Archivo", "Archivo Section Fallback", "Helvetica Neue", Arial, sans-serif; font-size: clamp(32px, 4.4vw, 56px); font-weight: 800; font-stretch: 106%; line-height: 1.02; letter-spacing: -.03em; }
.h2 em, .display em { font-style: normal; color: var(--slate); }
.h3 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 750; line-height: 1.15; letter-spacing: -.015em; }
.lede { font-size: clamp(18px, 1.6vw, 20px); line-height: 1.55; color: var(--ink-soft); max-width: 58ch; margin: 0; }
.eyebrow { font: 500 12px/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--slate-deep); margin: 0 0 18px; display: flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 18px; height: 2px; background: currentColor; }
.mono { font-family: var(--f-mono); }
.num { font-family: var(--f-display); font-stretch: 62%; font-weight: 900; letter-spacing: -.02em; line-height: .85; font-variant-numeric: tabular-nums; }
p { margin: 0; }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: 999px; border: 2px solid transparent; font: 700 16px/1 var(--f-body); text-decoration: none; cursor: pointer; transition: transform .2s var(--ease), background-color .2s, color .2s, border-color .2s; white-space: nowrap; }
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--slate-deep); color: var(--paper); }
.btn--primary:hover { background: var(--ink); }
.btn--ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--paper); color: var(--ink); }
.btn--light { border-color: var(--paper); color: var(--paper); }
.btn--light:hover { background: var(--paper); color: var(--ink); }
.btn .arr { transition: transform .2s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.tlink { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--slate); }
.tlink:hover { text-decoration-color: currentColor; }

/* ---------------------------------------------------------------- header */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding-top: env(safe-area-inset-top, 0px); transition: background-color .3s, box-shadow .3s; }
.site-header .wrap { height: var(--head-h); display: flex; align-items: center; gap: 28px; }
.site-header .logo { height: 24px; width: auto; }
.site-header .logo--ink { display: none; }
.site-header.is-solid { background: var(--ink); box-shadow: 0 1px 0 var(--line-ink); }
.site-header.is-solid .logo--paper { display: none; }
.site-header.is-solid .logo--ink { display: block; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { padding: 8px 14px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; transition: background-color .2s, color .2s; }
.nav a:hover { background: var(--line); }
.nav a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.site-header.is-solid .nav a { color: var(--paper); }
.site-header.is-solid .nav a:hover { background: var(--line-ink); }
.site-header.is-solid .nav a[aria-current="page"] { background: var(--paper); color: var(--ink); }
.site-header .btn { min-height: 42px; padding: 0 18px; font-size: 15px; }
.site-header.is-solid .btn--primary { background: var(--slate); color: var(--ink); }
.site-header.is-solid .btn--primary:hover { background: var(--paper); }
.menu-btn { display: none; margin-left: auto; background: none; border: 2px solid currentColor; border-radius: 999px; padding: 8px 16px; font-weight: 700; cursor: pointer; }
.site-header.is-solid .menu-btn { color: var(--paper); }
@media (max-width: 980px) {
  .nav, .site-header .btn { display: none; }
  .menu-btn { display: inline-block; }
}
.mmenu { position: fixed; inset: 0; z-index: 150; background: var(--slate); color: var(--ink); display: flex; flex-direction: column; padding: calc(18px + env(safe-area-inset-top, 0px)) var(--gut-r) calc(24px + env(safe-area-inset-bottom, 0px)) var(--gut); opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .25s, transform .25s var(--ease), visibility 0s .25s; }
.mmenu.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .25s var(--ease); }
.mmenu__top { display: flex; justify-content: space-between; align-items: center; }
.mmenu__top img { height: 22px; width: auto; }
.mmenu__close { background: none; border: 0; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 8px; }
.mmenu ul { list-style: none; margin: 40px 0 auto; padding: 0; display: grid; gap: 6px; }
.mmenu ul a { font: 800 clamp(34px, 9vw, 48px)/1.1 var(--f-display); font-stretch: 106%; letter-spacing: -.03em; text-decoration: none; }
.mmenu ul a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 6px; }
.mmenu .btn { justify-content: center; }

/* ---------------------------------------------------------------- sections */
main { display: block; }
.sec { padding-block: clamp(72px, 10vw, 128px); }
.sec--dim { background: var(--paper-2); }
.sec--ink { background: var(--ink); color: var(--paper); }
.sec--ink .lede { color: var(--muted-ink); }
.sec--ink .eyebrow { color: var(--slate-light); }
.sec-head { display: grid; gap: 18px; margin-bottom: clamp(40px, 5vw, 64px); max-width: 820px; }
.sec-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.sec-head--center .eyebrow::before { display: none; }
.grid-bg { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 56px 56px; background-position: -1px -1px; }

/* reveal: only elements below the first screen start hidden (set by JS), so the page is complete at rest */
.pre { opacity: 0; transform: translateY(12px); }
.pre.is-in { opacity: 1; transform: none; transition: opacity .38s var(--ease), transform .38s var(--ease); transition-delay: var(--d, 0ms); }

/* ---------------------------------------------------------------- hero (Home) */
.hero { padding: calc(var(--head-h) + 56px) 0 clamp(64px, 8vw, 104px); position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .5; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%); pointer-events: none; }
.hero.grid-bg { background-color: var(--paper); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero__copy { display: grid; gap: 26px; min-width: 0; }
.badge { display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding: 8px 14px 8px 12px; border: 1.5px solid var(--ink); border-radius: 999px; font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; background: var(--paper); }
.badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--slate); box-shadow: 0 0 0 0 rgba(91, 113, 136, .6); animation: beat 1.6s infinite; }
@keyframes beat { 0% { box-shadow: 0 0 0 0 rgba(91, 113, 136, .55); } 70% { box-shadow: 0 0 0 10px rgba(91, 113, 136, 0); } 100% { box-shadow: 0 0 0 0 rgba(91, 113, 136, 0); } }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; padding: 0; margin: 0; }
.chips li { display: contents; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-weight: 600; font-size: 14px; text-decoration: none; transition: background-color .3s, color .3s, border-color .3s; }
.chip b { font: 600 11px/1 var(--f-mono); background: var(--ink); color: var(--paper); border-radius: 999px; padding: 5px 7px; transition: background-color .3s; }
.chip.is-on { background: var(--slate-deep); color: var(--paper); border-color: var(--slate-deep); }
.chip.is-on b { background: var(--paper); color: var(--ink); }
.chips .sep { color: var(--ink-soft); font-size: 13px; }

/* the 11:47 PM stage */
.stage { position: relative; display: grid; justify-items: center; min-width: 0; padding: 8px 0 0; }
.stage__clock { font: 500 13px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 14px; display: flex; gap: 10px; align-items: center; }
.stage__clock span { background: var(--ink); color: var(--paper); border-radius: 6px; padding: 6px 8px; font-variant-numeric: tabular-nums; }
.phone { position: relative; width: 300px; max-width: 78vw; aspect-ratio: 300 / 600; border-radius: 46px; background: var(--ink); padding: 11px; box-shadow: 0 40px 80px -30px rgba(22, 21, 19, .45), 0 0 0 1px rgba(22, 21, 19, .4); }
.phone__screen { position: relative; height: 100%; border-radius: 36px; overflow: hidden; background: #0f0e0d; color: var(--paper); font-size: 13px; line-height: 1.4; }
.phone__bar { position: absolute; top: 0; left: 0; right: 0; height: 40px; display: flex; justify-content: space-between; align-items: center; padding: 6px 24px 0; font: 600 12px/1 var(--f-mono); z-index: 5; }
.phone__notch { position: absolute; top: 9px; left: 50%; width: 86px; height: 24px; margin-left: -43px; border-radius: 20px; background: #000; z-index: 6; }
.scr { position: absolute; inset: 0; padding: 52px 16px 18px; display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: translateX(30px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.scr.is-on { opacity: 1; transform: none; }
.scr.is-off { opacity: 0; transform: translateX(-30px); }
.scr--light { background: #fbf9f4; color: var(--ink); }
.phone__screen.is-light .phone__bar { color: var(--ink); }
.phone__screen.is-light { background: #fbf9f4; }
.sbar { display: flex; align-items: center; gap: 8px; background: #23211e; border-radius: 999px; padding: 11px 14px; font-size: 14px; min-height: 42px; }
.sbar svg { width: 16px; height: 16px; flex: none; opacity: .7; }
.caret { display: inline-block; width: 2px; height: 16px; background: var(--slate-light); margin-left: 1px; vertical-align: -3px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.sugg { display: grid; gap: 2px; font-size: 13px; color: rgba(245, 241, 232, .55); }
.sugg div { padding: 9px 4px; border-bottom: 1px solid rgba(245, 241, 232, .08); }
.kb { margin-top: auto; display: grid; gap: 6px; padding: 8px 2px 4px; }
.kb div { display: flex; gap: 4px; justify-content: center; }
.kb span { flex: 1; max-width: 22px; height: 30px; border-radius: 5px; background: #2b2925; }
.kb div:last-child span { max-width: none; }
.kb div:last-child span:first-child, .kb div:last-child span:last-child { flex: .5; }
.res { display: grid; gap: 10px; }
.res__lbl { font: 500 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(245, 241, 232, .5); }
.rcard { background: #23211e; border-radius: 14px; padding: 12px 14px; display: grid; gap: 4px; transition: transform .3s var(--ease), box-shadow .3s; }
.rcard b { font-size: 14px; }
.rcard small { font-size: 12px; color: rgba(245, 241, 232, .6); }
.rcard .st { font: 600 11px/1 var(--f-mono); }
.rcard .st--open { color: #7cc79a; }
.rcard .st--closed { color: #e0877d; }
.rcard--you { background: var(--paper); color: var(--ink); }
.rcard--you small { color: var(--ink-soft); }
.rcard--you .st--open { color: var(--ok); }
.rcard.is-pressed { transform: scale(.97); }
/* clinic site inside the phone */
.cs-top { display: flex; justify-content: space-between; align-items: center; font: 800 13px/1 var(--f-display); }
.cs-top span { font-weight: 400; }
.cs-open { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: #e6f1ea; color: var(--ok); font: 600 11px/1 var(--f-mono); }
.cs-open::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cs-call { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-radius: 10px; background: var(--paper-2); font-size: 12px; font-weight: 600; }
.cs-call b { font-family: var(--f-mono); font-weight: 600; }
.cs-photo { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 11; background: linear-gradient(160deg, #c9b99a, #8d7a5e); }
.cs-photo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cs-photo i { position: absolute; left: 8px; bottom: 8px; font: 500 9px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; background: rgba(22, 21, 19, .7); color: var(--paper); padding: 5px 7px; border-radius: 5px; font-style: normal; }
.cs-h { font: 800 19px/1.1 var(--f-display); letter-spacing: -.02em; }
.cs-book { display: flex; justify-content: center; padding: 13px; border-radius: 999px; background: var(--slate-deep); color: var(--paper); font-weight: 700; font-size: 14px; transition: transform .2s; }
.cs-book.is-pressed { transform: scale(.95); }
.cs-species { display: flex; gap: 6px; flex-wrap: wrap; }
.cs-species span { font-size: 11px; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--line); }
.hl { position: relative; }
.hl::after { content: ""; position: absolute; inset: -5px; border: 2px solid var(--slate); border-radius: 16px; opacity: 0; transform: scale(1.06); transition: opacity .35s, transform .35s var(--ease); pointer-events: none; }
.hl.is-hl::after { opacity: 1; transform: none; }
/* form + done */
.fm-h { font: 800 18px/1.15 var(--f-display); }
.fm-f { display: grid; gap: 4px; }
.fm-f label { font: 500 10px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.fm-f div { min-height: 38px; border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 11px; font-size: 13px; background: #fff; }
.fm-f div.is-typing { border-color: var(--slate); }
.done { display: grid; justify-items: center; text-align: center; gap: 12px; margin: auto 0; }
.done__tick { width: 72px; height: 72px; border-radius: 50%; background: var(--slate-deep); display: grid; place-items: center; }
.done__tick path { stroke-dasharray: 40; stroke-dashoffset: 40; transition: stroke-dashoffset .6s .2s var(--ease); }
.scr.is-on .done__tick path { stroke-dashoffset: 0; }
.done b { font: 800 20px/1.15 var(--f-display); }
.done small { color: var(--ink-soft); font-size: 13px; }
.done .mono { font-size: 12px; background: var(--paper-2); padding: 6px 10px; border-radius: 8px; }
.tap { position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: rgba(147, 168, 185, .45); border: 2px solid rgba(255, 255, 255, .9); z-index: 9; opacity: 0; transform: scale(.4); pointer-events: none; transition: left .5s var(--ease), top .5s var(--ease); }
.tap.is-tap { animation: tap .55s var(--ease); }
@keyframes tap { 0% { opacity: 0; transform: scale(1.4); } 40% { opacity: 1; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.1); } }
/* callouts beside the phone */
.notes { position: absolute; inset: 0; pointer-events: none; }
.note { position: absolute; display: flex; gap: 10px; align-items: flex-start; max-width: 200px; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.35; box-shadow: 4px 4px 0 var(--ink); opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.note.is-on { opacity: 1; transform: none; }
.note b { font: 600 11px/1 var(--f-mono); background: var(--slate-deep); color: var(--paper); border-radius: 999px; min-width: 22px; height: 22px; display: grid; place-items: center; flex: none; }
.stage__foot { display: flex; gap: 14px; align-items: center; margin-top: 18px; font: 500 12px/1 var(--f-mono); color: var(--ink-soft); }
.replay { background: none; border: 1.5px solid var(--ink); border-radius: 999px; padding: 8px 14px; cursor: pointer; font: 600 12px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.replay:hover { background: var(--ink); color: var(--paper); }
.note { width: 186px; }
.note--1 { right: calc(50% + 138px); top: 22%; }
.note--2 { left: calc(50% + 138px); top: 36%; }
.note--3 { right: calc(50% + 138px); top: 64%; }
.note--4 { left: calc(50% + 138px); top: 78%; }
@media (max-width: 1280px) {
  .hero__grid { grid-template-columns: 1fr; }
  .stage { margin-top: 12px; }
  .notes { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; width: 100%; max-width: 520px; }
  .note { position: static; width: auto; max-width: none; box-shadow: 3px 3px 0 var(--ink); }
}
@media (max-width: 420px) { .notes { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- decoder (they say / it means) */
.decode { border-top: 2px solid var(--ink); margin: 0; }
.decode__hd { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; padding: 14px 0; font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.decode__hd span:last-child { color: var(--slate-deep); }
.decode__row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; padding: 28px 0; border-bottom: 1px solid var(--line); align-items: start; transition: background-color .3s; }
.decode__row dt { font: 750 clamp(20px, 2vw, 25px)/1.2 var(--f-display); letter-spacing: -.015em; margin: 0; }
.decode__row dd { margin: 0; color: var(--ink-soft); }
.decode__row dd strong { color: var(--ink); background-image: linear-gradient(var(--slate-light), var(--slate-light)); background-repeat: no-repeat; background-position: 0 92%; background-size: 0% 35%; transition: background-size .5s var(--ease) .1s; }
.decode__row.is-in dd strong, .decode__row:not(.pre) dd strong { background-size: 100% 35%; }
.toggle { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.toggle span { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); }
.toggle span:last-child { background: var(--slate-deep); color: var(--paper); border-color: var(--slate-deep); }
@media (max-width: 760px) {
  .decode__hd { display: none; }
  .decode__row { grid-template-columns: 1fr; gap: 10px; }
  .decode__row dd::before { content: "What it means: "; font: 600 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--slate-deep); display: block; margin-bottom: 6px; }
}

/* ---------------------------------------------------------------- journey (ink band) */
/* steps are spaced by .jstep + .jstep alone, so every step sits the same distance apart */
.journey { position: relative; display: grid; padding-left: 72px; }
.ecg { position: absolute; left: 0; top: 0; width: 56px; height: 100%; overflow: visible; pointer-events: none; }
.ecg path { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ecg .ecg__base { stroke: var(--line-ink); }
.ecg .ecg__live { stroke: var(--slate-light); }
.ecg circle { fill: var(--paper); filter: drop-shadow(0 0 8px var(--slate-light)); }
/* The three steps were running into one another, and so were the three
   panels beside them: one continuous column of artwork rather than three
   separate illustrations. Each step now sits in its own band. */
.jstep { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.jstep + .jstep { margin-top: clamp(64px, 8vw, 120px); }
.jstep--flip .jstep__vis { order: 2; }
.jstep__txt { display: grid; gap: 16px; min-width: 0; }
/* a 104px numeral on a default line-height carries a 166px box, which was
   most of the slack in this section; the label also sat too close to it */
.jstep__n { display: flex; align-items: baseline; gap: 20px; }
.jstep__n .num { font-size: clamp(64px, 7.2vw, 92px); line-height: .78; letter-spacing: -.035em; color: var(--slate-light); }
.jstep__n span:last-child { font: 700 19px/1 var(--f-display); letter-spacing: -.005em; }
.jstep__txt p { color: var(--muted-ink); max-width: 52ch; }
.jstep__txt p strong { color: var(--paper); }
.jstep__vis { min-width: 0; }
/* the panel is the illustration; it needs an edge of its own so the next
   one does not read as a continuation of it */
.jstep__vis .panel { border-radius: var(--r-lg); border: 1px solid var(--line-ink); overflow: hidden; }
.panel { background: var(--ink-2); border: 1px solid var(--line-ink); border-radius: var(--r-lg); padding: clamp(16px, 2.4vw, 28px); }
.ex { font: 500 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--slate-light); }
@media (max-width: 900px) {
  .journey { padding-left: 44px; }
  .ecg { width: 32px; }
  .jstep { grid-template-columns: 1fr; }
  .jstep__vis { order: 2 !important; }
}

/* 01 found: map */
.map { position: relative; aspect-ratio: 5 / 4; border-radius: 16px; overflow: hidden; background-color: #2b2925;
  background-image:
    linear-gradient(90deg, transparent 47%, rgba(245,241,232,.12) 47%, rgba(245,241,232,.12) 53%, transparent 53%),
    linear-gradient(0deg, transparent 47%, rgba(245,241,232,.12) 47%, rgba(245,241,232,.12) 53%, transparent 53%),
    linear-gradient(90deg, rgba(245,241,232,.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(245,241,232,.05) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 34px 34px, 34px 34px; }
.map__park { position: absolute; border-radius: 10px; background: rgba(110, 140, 110, .22); }
.map__ring { position: absolute; left: 50%; top: 52%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; border: 1.5px solid var(--slate-light); opacity: 0; animation: ring 3.6s infinite var(--ease); }
.map__ring:nth-child(2) { animation-delay: 1.2s; }
.map__ring:nth-child(3) { animation-delay: 2.4s; }
@keyframes ring { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(5.2); opacity: 0; } }
.pin { position: absolute; transform: translate(-50%, -100%); display: grid; justify-items: center; gap: 4px; }
.pin i { width: 14px; height: 14px; border-radius: 50%; background: rgba(245, 241, 232, .35); border: 2px solid #2b2925; }
.pin small { font: 500 10px/1 var(--f-mono); color: rgba(245, 241, 232, .5); white-space: nowrap; }
.pin--you i { width: 30px; height: 30px; background: var(--paper); border: 0; display: grid; place-items: center; box-shadow: 0 0 0 6px rgba(147, 168, 185, .35); }
.pin--you i svg { width: 16px; height: 16px; }
.pin--you small { color: var(--ink); background: var(--paper); padding: 5px 8px; border-radius: 999px; font-weight: 600; }
.map__search { position: absolute; left: 14px; right: 14px; top: 14px; display: flex; align-items: center; gap: 8px; background: var(--paper); color: var(--ink); border-radius: 999px; padding: 10px 14px; font-size: 14px; font-weight: 500; box-shadow: 0 10px 24px -12px #000; }
.map__search svg { width: 16px; height: 16px; flex: none; }
.map__search .caret { background: var(--slate-deep); }
.mlist { display: grid; gap: 8px; margin-top: 14px; }
.mlist div { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: rgba(245, 241, 232, .05); font-size: 14px; }
.mlist div:first-child { background: var(--paper); color: var(--ink); font-weight: 600; }
.mlist .st { font: 600 11px/1 var(--f-mono); white-space: nowrap; }
.mlist .st--open { color: var(--ok); }
.mlist .st--closed { color: #e0877d; }

/* 02 trusted: five-second test */
.fivesec { background: var(--paper); color: var(--ink); border-radius: 16px; overflow: hidden; }
.fivesec__ruler { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); padding: 12px 14px 10px; background: var(--paper-2); font: 500 10px/1 var(--f-mono); color: var(--ink-soft); }
.fivesec__ruler span { border-left: 1px solid var(--line); padding-left: 4px; }
.fivesec__ruler span:last-of-type::after { content: "5s"; float: right; }
.fivesec__head { position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; }
.fivesec__head i { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--slate-deep); transform-origin: 0 50%; transform: scaleX(var(--p, 1)); }
.fsite { padding: 14px; display: grid; gap: 10px; }
.fsite__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px; border-radius: 10px; font-size: 12px; }
.fsite__top b { font: 800 14px/1 var(--f-display); }
.fsite__top .cs-open { font-size: 10px; }
.fsite__tel { font: 600 12px/1 var(--f-mono); }
.fsite__body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; align-items: center; }
.fsite__photo { aspect-ratio: 4 / 3; border-radius: 12px; background: linear-gradient(160deg, #c9b99a, #8d7a5e); position: relative; }
.fsite__photo svg { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(0 round 12px); }
.fsite__copy { display: grid; gap: 8px; }
.fsite__copy b { font: 800 16px/1.1 var(--f-display); }
.bar { height: 7px; border-radius: 4px; background: var(--line); }
.fsite__cta { display: inline-flex; justify-self: start; padding: 9px 14px; border-radius: 999px; background: var(--slate-deep); color: var(--paper); font-weight: 700; font-size: 12px; }
.fsite__rest { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; opacity: .5; }
.fsite__rest div { height: 44px; border-radius: 10px; background: var(--paper-2); }
.tag { position: relative; }
.tag::before { content: attr(data-n); position: absolute; top: -9px; right: -9px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; background: var(--slate-deep); color: var(--paper); font: 600 11px/22px var(--f-mono); text-align: center; transform: scale(0); transition: transform .35s var(--ease); }
.tag::after { content: ""; position: absolute; inset: -4px; border: 2px solid var(--slate-deep); border-radius: 14px; opacity: 0; transition: opacity .3s; pointer-events: none; }
.tag.is-on::before { transform: scale(1); }
.tag.is-on::after { opacity: 1; }
.legend { display: grid; gap: 10px; margin-top: 16px; list-style: none; padding: 0; counter-reset: lg; }
.legend li { display: flex; gap: 12px; align-items: baseline; color: var(--muted-ink); font-size: 15px; transition: color .3s; }
.legend li b { font: 600 11px/22px var(--f-mono); min-width: 22px; height: 22px; text-align: center; border-radius: 50%; border: 1px solid var(--line-ink); flex: none; transition: background-color .3s, color .3s; }
.legend li.is-on { color: var(--paper); }
.legend li.is-on b { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* 03 booked: overnight inbox */
.inbox { background: var(--paper); color: var(--ink); border-radius: 16px; padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.inbox__hd { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.inbox__hd b { font: 800 16px/1.1 var(--f-display); }
.closed { font: 600 10px/1 var(--f-mono); color: var(--no); background: #f6e3e0; padding: 6px 9px; border-radius: 999px; white-space: nowrap; }
.req { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.req time { font: 600 12px/1 var(--f-mono); color: var(--slate-deep); }
.req b { display: block; font-size: 14px; }
.req small { color: var(--ink-soft); font-size: 13px; }
.inbox.is-armed .req { opacity: 0; transform: translateY(14px) scale(.98); }
.inbox.is-armed .req.is-in { opacity: 1; transform: none; }
.inbox__ft { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding-top: 6px; font-size: 14px; font-weight: 600; }
.inbox__ft .mono { font-size: 12px; background: var(--ink); color: var(--paper); padding: 7px 10px; border-radius: 8px; white-space: nowrap; }
/* the smallest phones: the inbox sits inside the journey rail, so it gets every pixel back */
@media (max-width: 380px) {
  .inbox { padding: 12px; }
  .req { grid-template-columns: 58px minmax(0, 1fr); gap: 8px; padding: 10px; }
  .req time { font-size: 11px; }
}

/* ---------------------------------------------------------------- services teaser + converge */
.svc3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.svc { position: relative; display: grid; gap: 14px; align-content: start; padding: 28px; border-radius: var(--r-lg); background: var(--paper); border: 1.5px solid var(--ink); text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.svc:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.svc .num { font-size: 64px; color: var(--slate); }
.svc p { color: var(--ink-soft); }
.svc .tlink { margin-top: 6px; }
.svc-addon { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding: 18px 22px; border-radius: var(--r-lg); border: 1.5px dashed var(--ink-soft); }
.svc-addon b { font-weight: 750; }
.svc-addon span { color: var(--ink-soft); }
@media (max-width: 900px) { .svc3 { grid-template-columns: 1fr; } }

.conv { display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(0, .8fr); align-items: center; margin-top: clamp(56px, 7vw, 88px); }
.conv__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.conv__list li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); font-weight: 600; font-size: 15px; }
.conv__list li .mono { font-size: 11px; color: var(--ink-soft); font-weight: 500; min-width: 18px; }
.conv__list li small { margin-left: auto; color: var(--ink-soft); font-weight: 400; font-size: 13px; text-align: right; }
.conv__list li i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; margin-left: auto; transition: background-color .3s; }
.conv__list li small + i { margin-left: 12px; }
.conv__list li.is-lit i { background: var(--slate-deep); }
.conv__wires { position: relative; align-self: stretch; }
.conv__wires svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.conv__wires path { fill: none; stroke: var(--slate); stroke-width: 1.5; stroke-dasharray: 4 5; }
.conv__wires .draw { stroke-dasharray: none; }
.conv__hub { border-radius: var(--r-lg); background: var(--ink); color: var(--paper); padding: 36px 28px; display: grid; gap: 14px; min-height: 340px; align-content: center; text-align: center; justify-items: center; position: relative; overflow: hidden; }
.conv__hub::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 120%, rgba(91, 113, 136, .55), transparent 60%); }
.conv__hub > * { position: relative; }
.conv__hub .eyebrow { color: var(--slate-light); margin: 0; }
.conv__hub .eyebrow::before { display: none; }
.conv__hub b { font: 800 clamp(26px, 2.6vw, 34px)/1.05 var(--f-display); letter-spacing: -.02em; text-wrap: balance; }
.conv__hub p { color: var(--muted-ink); font-size: 15px; }
@media (max-width: 900px) {
  .conv { grid-template-columns: 1fr; gap: 0; }
  .conv__wires { height: 56px; }
  .conv__hub { min-height: 0; }
}

/* ---------------------------------------------------------------- process: paw trail */
.trail { position: relative; }
.trail__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; position: relative; z-index: 1; }
.trail__step { display: grid; gap: 12px; align-content: start; }
.trail__node { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper); display: grid; place-items: center; font: 600 14px/1 var(--f-mono); transition: background-color .4s, color .4s, transform .4s var(--ease); }
.trail__step.is-reached .trail__node { background: var(--slate-deep); color: var(--paper); border-color: var(--slate-deep); transform: scale(1.08); }
.trail__step .mono { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-deep); }
.trail__step h3 { font: 750 21px/1.2 var(--f-display); margin: 0; }
.trail__step p { color: var(--ink-soft); font-size: 15px; }
.trail__line { position: absolute; z-index: 0; pointer-events: none; }
.trail__line::before { content: ""; position: absolute; border-top: 2px dashed var(--line); }
.paws { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.paw { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; color: var(--slate-deep); opacity: 0; transform: scale(.4) rotate(var(--rot, 90deg)); transition: opacity .25s, transform .3s var(--ease); }
.paw.is-on { opacity: .9; transform: scale(1) rotate(var(--rot, 90deg)); }
@media (max-width: 900px) {
  .trail__steps { grid-template-columns: 1fr; gap: 36px; padding-left: 80px; }
  .trail__node { position: absolute; left: 0; margin-top: -6px; }
  .trail__step { position: relative; }
  .trail__step .trail__node { left: -80px; }
}

/* ---------------------------------------------------------------- portfolio: scrolling frames + flip */
.pf3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 980px) { .pf3 { grid-template-columns: 1fr; max-width: 560px; } }
.flip { perspective: 1600px; min-width: 0; }
.flip__in { position: relative; display: grid; transition: transform .8s var(--ease); transform-style: preserve-3d; }
.flip.is-flipped .flip__in { transform: rotateY(180deg); }
.flip__face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--r-lg); border: 1.5px solid var(--ink); background: var(--paper); overflow: hidden; display: flex; flex-direction: column; }
.flip__back { transform: rotateY(180deg); background: var(--ink); color: var(--paper); padding: 26px; gap: 16px; }
.flip__back ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.flip__back li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--muted-ink); font-size: 15px; line-height: 1.5; }
.flip__back li::before { content: "✓"; color: var(--slate-light); font-weight: 800; }
.flip__back .h3 { font-size: 22px; }
.frame { position: relative; margin: 12px 12px 0; border-radius: 12px 12px 0 0; border: 1px solid var(--line); border-bottom: 0; overflow: hidden; background: var(--paper-2); }
.frame__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.frame__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.frame__bar span { margin-left: 8px; font: 500 11px/1 var(--f-mono); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frame__view { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: #fff; }
.frame__view img { position: absolute; left: 0; top: 0; width: 100%; height: auto; transform: translateY(0); transition: transform 1.2s var(--ease); will-change: transform; }
.frame.is-scrolling .frame__view img { transform: translateY(calc(-1 * var(--travel, 0px))); transition: transform var(--dur, 9s) cubic-bezier(.45, 0, .35, 1); }
.pf__body { padding: 20px 22px 22px; display: grid; gap: 10px; border-top: 1.5px solid var(--ink); flex: 1; align-content: start; }
.pf__meta { font: 500 11px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--slate-deep); }
.pf__body h3 { font: 750 22px/1.15 var(--f-display); margin: 0; }
.pf__body p { color: var(--ink-soft); font-size: 15px; }
.pf__acts { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 6px; }
.flipbtn { background: none; border: 1.5px solid currentColor; border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 14px; cursor: pointer; }
.flipbtn:hover { background: var(--ink); color: var(--paper); }
.flip__back .flipbtn:hover { background: var(--paper); color: var(--ink); }
.flip__back .tlink { color: var(--paper); text-decoration-color: var(--slate-light); }
.flip__back .pf__acts { margin-top: auto; }
@media (prefers-reduced-motion: reduce) { .flip__in { transition: none; } }

/* ---------------------------------------------------------------- compare + numbers */
.cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cmp__col { border-radius: var(--r-lg); padding: clamp(24px, 3vw, 36px); display: grid; gap: 18px; align-content: start; }
.cmp__col--gen { background: var(--paper-2); }
.cmp__col--vf { background: var(--ink); color: var(--paper); }
.cmp__col h3 { font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; margin: 0; color: var(--ink-soft); }
.cmp__col--vf h3 { display: flex; align-items: center; }
.cmp__col--vf h3 img { height: 22px; width: auto; }
.cmp__col ul { list-style: none; margin: 0; padding: 0; display: grid; }
.cmp__col li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 16px; }
.cmp__col--vf li { border-color: var(--line-ink); }
.cmp__col li > span:first-child { font-weight: 800; }
.cmp__col--gen li > span:first-child { color: var(--no); }
.cmp__col--vf li > span:first-child { color: var(--slate-light); }
/* no struck-through text anywhere on the site: the cross in front of the
   line already says it, and a red rule through a sentence reads as damage */
.cmp__col--gen li .x { color: var(--ink-soft); }
.cmp__col--vf li { transition: opacity .5s, transform .5s var(--ease); transition-delay: calc(var(--i) * 80ms + 200ms); }
.cmp.is-armed .cmp__col--vf li { opacity: 0; transform: translateX(-10px); }
.cmp.is-armed.is-in .cmp__col--vf li { opacity: 1; transform: none; }
.cmp-note { margin-top: 28px; font: 600 clamp(19px, 1.8vw, 23px)/1.4 var(--f-display); max-width: 60ch; text-wrap: balance; }
@media (max-width: 760px) { .cmp { grid-template-columns: 1fr; } }

.nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: clamp(48px, 6vw, 72px); }
.nums div { border-radius: var(--r); padding: 22px 20px; border: 1.5px solid var(--ink); display: grid; gap: 12px; align-content: space-between; min-height: 160px; background: var(--paper); }
.nums div:nth-child(2) { background: var(--ink); color: var(--paper); }
.nums div:nth-child(3) { background: var(--slate-deep); color: var(--paper); border-color: var(--slate-deep); }
.nums .num { font-size: clamp(60px, 6vw, 84px); }
.nums p { font-size: 15px; line-height: 1.35; }
@media (max-width: 900px) { .nums { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------- typed checklist banner */
.typed { border-radius: var(--r-lg); background: var(--slate-deep); color: var(--paper); padding: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 24px 48px; align-items: center; position: relative; overflow: hidden; }
.typed::after { content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; border: 40px solid rgba(245, 241, 232, .06); }
.typed .eyebrow { color: var(--slate-light); }
.typed__q { font: 800 clamp(26px, 3vw, 40px)/1.08 var(--f-display); letter-spacing: -.02em; margin: 0 0 12px; min-height: 2.16em; }
.typed__q .ch { opacity: 1; }
.typed.is-armed .typed__q .ch { opacity: 0; }
.typed.is-armed.is-typing .typed__q .ch { opacity: 1; transition: opacity .01s; transition-delay: calc(var(--i) * 38ms); }
.typed__q .w { display: inline-block; white-space: nowrap; }
.typed p { color: rgba(245, 241, 232, .8); max-width: 50ch; }
.typed .btn { position: relative; z-index: 1; }
@media (max-width: 760px) { .typed { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- CTA band */
.cta { position: relative; overflow: hidden; background: var(--slate); color: var(--ink); padding-block: clamp(80px, 10vw, 132px); }
.cta__pulse { position: absolute; right: 0; top: 50%; height: 160px; margin-top: -80px; width: 46%; opacity: .45; pointer-events: none; }
@media (max-width: 900px) { .cta__pulse { display: none; } }
.cta__pulse path { fill: none; stroke: var(--ink); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-dasharray: 260 1000; animation: pulse 4.5s linear infinite; }
@keyframes pulse { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: -260; } }
.cta .wrap { position: relative; display: grid; gap: 22px; justify-items: start; }
.cta .h2 { max-width: 16ch; }
.cta p { font-size: 19px; max-width: 46ch; }
.cta .small { font-size: 15px; }
.cta .small a { font-weight: 700; }
.cta-quiet { padding-block: clamp(64px, 8vw, 96px); border-top: 1px solid var(--line); }
.cta-quiet .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; }
.cta-quiet .q { font: 600 18px/1.3 var(--f-body); color: var(--ink-soft); margin-bottom: 8px; }
.cta-quiet .big { font: 800 clamp(40px, 6vw, 76px)/1 var(--f-display); letter-spacing: -.035em; text-decoration: underline; text-decoration-thickness: 5px; text-underline-offset: 10px; text-decoration-color: var(--slate); }
.cta-quiet .big:hover { text-decoration-color: var(--ink); }
.cta-quiet p.lede { max-width: 32ch; }
@media (prefers-reduced-motion: reduce) { .cta__pulse path { animation: none; stroke-dasharray: none; } }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--ink); color: var(--muted-ink); padding: 72px 0 calc(32px + env(safe-area-inset-bottom, 0px)); font-size: 15px; }
.fgrid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; }
.fgrid img { height: 26px; width: auto; margin-bottom: 16px; }
.fgrid h4 { margin: 0 0 14px; font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--slate-light); }
.fgrid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fgrid a { text-decoration: none; color: var(--paper); overflow-wrap: anywhere; }
.fgrid a:hover { text-decoration: underline; }
.fbot { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line-ink); font-size: 13px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.fbot a { color: inherit; }
@media (max-width: 760px) { .fgrid { grid-template-columns: 1fr 1fr; } .fgrid > div:first-child { grid-column: 1 / -1; } }
/* the smallest phones: the email address alone is wider than half the screen */
@media (max-width: 380px) { .fgrid { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
/* a long button label wraps onto two lines rather than running off a small phone */
@media (max-width: 380px) { .btn { white-space: normal; text-align: center; line-height: 1.2; padding-block: 12px; } }

/* ---------------------------------------------------------------- interior heroes */
.phero { padding: calc(var(--head-h) + clamp(56px, 8vw, 96px)) 0 clamp(56px, 7vw, 88px); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.phero .wrap { display: grid; gap: 22px; }
.phero .display { font-size: clamp(40px, 5.6vw, 76px); max-width: 17ch; }
.phero--center .wrap { justify-items: center; text-align: center; }
.phero--center .eyebrow::before { display: none; }
.phero--center .lede { margin-inline: auto; }
.phero .chips { margin-top: 6px; }

/* ---------------------------------------------------------------- services page */
.srows { border-top: 2px solid var(--ink); }
.srow { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, .9fr); gap: 32px; padding: 40px 0; border-bottom: 1px solid var(--line); position: relative; }
.srow::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: var(--slate-deep); transition: width .8s var(--ease); }
.srow:hover::before { width: 100%; }
.srow .num { font-size: 72px; color: var(--slate); }
.srow h3 { font: 750 clamp(24px, 2.4vw, 30px)/1.12 var(--f-display); margin: 0 0 12px; letter-spacing: -.015em; }
.srow h3 em { font-style: normal; font-weight: 500; font-size: .7em; color: var(--ink-soft); }
.srow p { color: var(--ink-soft); }
.srow .tlink { display: inline-block; margin-top: 16px; }
.incl { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-content: start; }
.incl li { padding: 8px 12px; border-radius: 999px; background: var(--paper-2); font-size: 14px; font-weight: 600; }
.incl-h { font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--slate-deep); margin-bottom: 12px; }
@media (max-width: 900px) { .srow { grid-template-columns: 1fr; gap: 14px; } .srow .num { font-size: 56px; } }

/* project timeline (gantt) */
.gantt { border-radius: var(--r-lg); background: var(--paper); border: 1.5px solid var(--ink); padding: clamp(18px, 2.6vw, 30px); overflow-x: auto; }
.gantt__in { min-width: 720px; position: relative; }
.g-row { display: grid; grid-template-columns: 190px repeat(6, minmax(0, 1fr)); align-items: center; min-height: 54px; border-bottom: 1px solid var(--line); }
.g-row:last-child { border-bottom: 0; }
.g-row--hd { min-height: 36px; font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1.5px solid var(--ink); }
.g-row--hd span:not(:first-child) { padding-left: 8px; border-left: 1px solid var(--line); }
.g-lbl { font-weight: 700; font-size: 15px; padding-right: 12px; }
.g-lbl small { display: block; font: 500 11px/1.3 var(--f-mono); color: var(--ink-soft); font-weight: 400; }
.g-bar { height: 26px; border-radius: 8px; background: var(--slate-deep); transform-origin: 0 50%; position: relative; }
.g-bar--soft { background: var(--slate-light); }
.g-bar--line { background: repeating-linear-gradient(90deg, var(--slate) 0 8px, transparent 8px 14px); height: 4px; border-radius: 2px; }
.g-bar--you { background: var(--paper-3); }
.gantt.is-armed .g-bar { transform: scaleX(0); }
.gantt.is-armed.is-in .g-bar { transform: scaleX(1); transition: transform .6s var(--ease); transition-delay: calc(var(--i) * 80ms); }
.g-now { position: absolute; top: 36px; bottom: 0; width: 2px; background: var(--ink); left: 190px; opacity: 0; }
.g-now::before { content: "You see progress here"; position: absolute; top: -2px; left: 8px; white-space: nowrap; font: 500 10px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; background: var(--ink); color: var(--paper); padding: 5px 7px; border-radius: 5px; }
.gantt.is-in .g-now { animation: sweep 7s 1.2s var(--ease) infinite; }
.gantt.is-in .g-now::before { animation: sweepLbl 7s 1.2s var(--ease) infinite; }
@keyframes sweepLbl { 0%, 42% { transform: none; } 50%, 100% { transform: translateX(calc(-100% - 16px)); } }
@keyframes sweep { 0% { opacity: 0; left: 190px; } 8% { opacity: 1; } 85% { opacity: 1; left: calc(100% - 2px); } 100% { opacity: 0; left: calc(100% - 2px); } }
.g-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; font-size: 13px; color: var(--ink-soft); }
.g-legend span { display: inline-flex; align-items: center; gap: 8px; }
.g-legend i { width: 22px; height: 10px; border-radius: 4px; background: var(--slate-deep); }
.g-legend i.s { background: var(--slate-light); }
.g-legend i.y { background: var(--paper-3); }
@media (prefers-reduced-motion: reduce) { .gantt.is-in .g-now { animation: none; } }

/* fit branch */
.fit { display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, .9fr); align-items: center; }
.fit__call { border-radius: var(--r-lg); border: 1.5px solid var(--ink); background: var(--paper); padding: 28px; display: grid; gap: 12px; }
.fit__call .pills { display: flex; gap: 8px; }
.fit__call .pills span { font: 600 11px/1 var(--f-mono); padding: 7px 10px; border-radius: 999px; background: var(--paper-2); }
.fit__call .pills span:first-child { background: var(--ink); color: var(--paper); }
.fit__call p { color: var(--ink-soft); }
.fit__wires { position: relative; align-self: stretch; }
.fit__wires svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fit__wires path { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.fit__outs { display: grid; gap: 12px; }
.fit__out { border-radius: var(--r); border: 1px solid var(--line); background: var(--paper); padding: 16px 18px; display: grid; gap: 4px; }
.fit__out small { font: 500 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.fit__out b { font-size: 16px; }
.fit__out--yes { background: var(--slate-deep); color: var(--paper); border-color: var(--slate-deep); }
.fit__out--yes small { color: var(--slate-light); }
@media (max-width: 900px) { .fit { grid-template-columns: 1fr; } .fit__wires { height: 48px; } }

/* FAQ accordion */
.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 24px 0; font: 700 clamp(18px, 1.7vw, 21px)/1.3 var(--f-display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--ink); flex: none; position: relative; transition: transform .3s var(--ease), background-color .3s; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: currentColor; }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i { transform: rotate(45deg); background: var(--ink); color: var(--paper); }
.faq .ans { padding: 0 0 26px; color: var(--ink-soft); max-width: 68ch; }
.faq-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .faq-wrap { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- portfolio page */
.pfrow { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding-block: clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--line); }
.pfrow:last-of-type { border-bottom: 0; }
.pfrow:nth-of-type(even) .pfrow__frame { order: 2; }
.pfrow__frame { min-width: 0; }
.pfrow .frame { margin: 0; border-radius: 14px; border: 1.5px solid var(--ink); }
.pfrow .frame__view { aspect-ratio: 16 / 10.5; }
.pfrow__txt { display: grid; gap: 16px; min-width: 0; }
.pfrow__txt h2 { font: 800 clamp(28px, 3vw, 40px)/1.05 var(--f-display); letter-spacing: -.025em; margin: 0; }
.pfrow__txt > p { color: var(--ink-soft); }
.why { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: why; border-top: 1px solid var(--line); }
/* NOT display:grid. A grid container turns every inline child into a grid
   item of its own, so an <em> inside the sentence was being pulled out of
   the text and dropped into the number column on top of the counter. The
   counter is positioned instead, and the prose stays one flow. */
.why li { position: relative; padding: 14px 0 14px 40px; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink-soft); counter-increment: why; }
.why li::before { content: counter(why, decimal-leading-zero); position: absolute; left: 0; top: 14px; font: 600 12px/1.6 var(--f-mono); color: var(--slate-deep); }
.frame__hint { position: absolute; right: 12px; bottom: 12px; z-index: 2; font: 500 10px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; background: var(--ink); color: var(--paper); padding: 6px 8px; border-radius: 6px; transition: opacity .3s; }
.frame.is-scrolling .frame__hint { opacity: 0; }
@media (max-width: 900px) { .pfrow { grid-template-columns: 1fr; } .pfrow:nth-of-type(even) .pfrow__frame { order: 0; } }

/* ---------------------------------------------------------------- about page */
.readfill { font: 750 clamp(28px, 3.6vw, 46px)/1.18 var(--f-display); letter-spacing: -.02em; max-width: 26ch; margin: 0; }
.readfill .w { color: var(--ink); transition: color .25s; }
/* starts in its waiting colour from the first frame, so it never shows dark
   and then greys out when the script arms it */
@media (prefers-reduced-motion: no-preference) { .js .readfill, .js .readfill em { color: rgba(22, 21, 19, .28); } }
.readfill.no-tr .w { transition: none; }
.readfill.is-armed .w { color: rgba(22, 21, 19, .28); }
.readfill.is-armed .w.is-lit { color: var(--ink); }
.readfill.is-armed .w.em.is-lit { color: var(--slate-deep); }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.two .stack { display: grid; gap: 18px; }
.two .stack p { color: var(--ink-soft); }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; } }
.target { border-radius: var(--r-lg); background: var(--paper-2); aspect-ratio: 4 / 3; overflow: hidden; }
.target svg { width: 100%; height: 100%; }
.target .spin { transform-origin: 400px 300px; animation: spin 14s linear infinite; }
.target .stamp { transform-origin: 400px 300px; animation: stamp 2.6s var(--ease) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes stamp { 0%, 100% { transform: translate(0, 0) scale(1); } 15% { transform: translate(0, -26px) scale(1.15); } 30% { transform: translate(0, 0) scale(.92); } 40% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .target .spin, .target .stamp { animation: none; } }
.wont { border-top: 2px solid var(--ink); }
.wont li { list-style: none; display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.wont { margin: 0; padding: 0; }
.wont .x { color: var(--no); font-weight: 800; font-size: 22px; }
.wont h3 { margin: 0; font: 750 clamp(20px, 2vw, 25px)/1.2 var(--f-display); display: inline; }
.wont p { color: var(--ink-soft); }
@media (max-width: 760px) { .wont li { grid-template-columns: 36px 1fr; } .wont p { grid-column: 2; } }
.vals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.val { border-radius: var(--r-lg); padding: 28px; border: 1.5px solid var(--ink); background: var(--paper); display: grid; gap: 14px; align-content: start; }
.val .mono { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate-deep); }
.val h3 { font: 750 21px/1.2 var(--f-display); margin: 0; }
.val p { color: var(--ink-soft); font-size: 15px; }
@media (max-width: 900px) { .vals { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- resources */
.feat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: var(--r-lg); overflow: hidden; border: 1.5px solid var(--ink); text-decoration: none; background: var(--ink); color: var(--paper); }
.feat__txt { padding: clamp(24px, 4vw, 44px); display: grid; gap: 16px; align-content: center; }
.feat__txt .eyebrow { color: var(--slate-light); }
.feat__txt p { color: var(--muted-ink); }
.feat__vis { background: var(--paper-2); display: grid; place-items: center; padding: 28px; }
.mini-check { width: 100%; max-width: 360px; display: grid; gap: 8px; }
.mini-check div { display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: var(--paper); border-radius: 10px; color: var(--ink); font-size: 14px; font-weight: 600; }
.mini-check i { width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--ink); flex: none; display: grid; place-items: center; }
.mini-check div.ok i { background: var(--slate-deep); border-color: var(--slate-deep); }
.mini-check div.ok i::after { content: ""; width: 8px; height: 4px; border: 2px solid var(--paper); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
@media (max-width: 900px) { .feat { grid-template-columns: 1fr; } }
.posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.post { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; padding: 16px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--paper); text-decoration: none; transition: border-color .3s, transform .3s var(--ease), box-shadow .3s var(--ease); }
.post:hover { border-color: var(--ink); transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.post img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; background: var(--paper-2); aspect-ratio: 1; }
.post__b { display: grid; gap: 8px; align-content: center; }
.post__m { font: 500 11px/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--slate-deep); }
.post h3 { font: 750 19px/1.25 var(--f-display); margin: 0; }
.post p { color: var(--ink-soft); font-size: 15px; }
@media (max-width: 900px) { .posts { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .post { grid-template-columns: 1fr; } .post img { aspect-ratio: 16 / 9; } }

/* article */
.progress { position: fixed; left: 0; top: calc(var(--head-h) + env(safe-area-inset-top, 0px)); height: 3px; width: 100%; z-index: 99; background: var(--slate); transform-origin: 0 50%; transform: scaleX(0); }
.art-hero { padding: calc(var(--head-h) + clamp(48px, 7vw, 88px)) 0 0; }
.art-hero .wrap { max-width: 860px; display: grid; gap: 20px; }
.art-hero .display { font-size: clamp(36px, 5vw, 62px); }
.art-meta { font: 500 12px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 10px; }
.art-img { max-width: 1000px; margin: 40px auto 0; padding-inline: var(--gut) var(--gut-r); }
.art-img img { width: 100%; border-radius: var(--r-lg); border: 1.5px solid var(--ink); background: var(--paper-2); }
.prose { max-width: 720px; margin: 0 auto; padding: 56px var(--gut-r) 0 var(--gut); font-size: 18.5px; line-height: 1.7; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font: 800 clamp(26px, 2.8vw, 32px)/1.15 var(--f-display); letter-spacing: -.02em; margin-top: 1.8em; }
.prose h3 { font: 750 22px/1.2 var(--f-display); margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: .4em; }
.prose .callout { border-left: 4px solid var(--slate-deep); background: var(--paper-2); padding: 20px 24px; border-radius: 0 12px 12px 0; font-weight: 600; }
.prose a { text-decoration-color: var(--slate); text-underline-offset: 3px; }
.related { max-width: 720px; margin: 56px auto 0; padding-inline: var(--gut) var(--gut-r); }
.related h2 { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--slate-deep); margin: 0 0 12px; }
.related ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.related a { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 700; }
.related a:hover { color: var(--slate-deep); }

/* ---------------------------------------------------------------- checklist tool */
.ck { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.ck__list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.ck__item { border-bottom: 1px solid var(--line); }
.ck__item label { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; padding: 22px 0; cursor: pointer; }
.ck__item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ck__box { width: 30px; height: 30px; border-radius: 9px; border: 2px solid var(--ink); display: grid; place-items: center; margin-top: 2px; transition: background-color .25s, transform .25s var(--ease); }
.ck__box svg { width: 16px; height: 16px; }
.ck__box path { stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .35s var(--ease); }
.ck__item input:checked + .ck__box { background: var(--slate-deep); border-color: var(--slate-deep); transform: scale(1.05); }
.ck__item input:checked + .ck__box path { stroke-dashoffset: 0; }
.ck__item input:focus-visible + .ck__box { outline: 3px solid var(--slate); outline-offset: 3px; }
.ck__t { display: grid; gap: 8px; }
.ck__t .mono { font-size: 11px; color: var(--slate-deep); letter-spacing: .1em; }
.ck__t b { font: 750 clamp(18px, 1.8vw, 21px)/1.3 var(--f-display); }
.ck__t span:last-child { color: var(--ink-soft); font-size: 16px; }
.ck__item input:checked ~ .ck__t b { color: var(--slate-deep); }
.score { position: sticky; top: calc(var(--head-h) + 24px); border-radius: var(--r-lg); background: var(--ink); color: var(--paper); padding: 28px; display: grid; gap: 18px; justify-items: center; text-align: center; }
.ring { position: relative; width: 168px; height: 168px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 12; }
.ring .bg { stroke: var(--line-ink); }
.ring .fg { stroke: var(--slate-light); stroke-linecap: round; transition: stroke-dashoffset .6s var(--ease); }
.ring div { position: absolute; inset: 0; display: grid; place-content: center; }
.ring .num { font-size: 64px; }
.ring small { font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-ink); }
.score p { color: var(--muted-ink); font-size: 15px; min-height: 4.5em; }
.score .btn { width: 100%; justify-content: center; }
.score .reset { background: none; border: 0; color: var(--muted-ink); text-decoration: underline; cursor: pointer; font-size: 14px; }
@media (max-width: 900px) {
  .ck { grid-template-columns: 1fr; }
  .score { position: sticky; top: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); grid-template-columns: auto 1fr; justify-items: start; text-align: left; padding: 14px 16px; gap: 6px 16px; order: 2; z-index: 5; box-shadow: 0 16px 40px -16px #000; }
  .score .ring { width: 72px; height: 72px; grid-row: span 2; }
  .score .ring .num { font-size: 30px; }
  .score .ring small { display: none; }
  .score p { min-height: 0; font-size: 14px; }
  .score .btn, .score .reset, .score .eyebrow { display: none; }
}

/* ---------------------------------------------------------------- contact */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.card { border-radius: var(--r-lg); border: 1.5px solid var(--ink); background: var(--paper); padding: clamp(22px, 3vw, 36px); display: grid; gap: 18px; }
.card--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.card--ink .eyebrow { color: var(--slate-light); }
.card--ink p { color: var(--muted-ink); }
.form { display: grid; gap: 16px; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-weight: 700; font-size: 14px; }
.field input, .field textarea { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); transition: border-color .2s; }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--slate-deep); outline: none; box-shadow: 0 0 0 3px rgba(91, 113, 136, .25); }
.field.has-err input, .field.has-err textarea { border-color: var(--no); }
.field .err { color: var(--no); font-size: 13px; min-height: 0; }
.card--ink .field label { color: var(--paper); }
.card--ink .field input { border-color: transparent; }
.sent { border-radius: 14px; background: var(--paper-2); padding: 22px; display: grid; gap: 8px; }
.sent b { font: 800 22px/1.2 var(--f-display); }
.sent small { font: 500 11px/1.4 var(--f-mono); letter-spacing: .06em; color: var(--ink-soft); }
.card--ink .sent { background: var(--ink-2); }
.card--ink .sent small { color: var(--muted-ink); }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .form .row2 { grid-template-columns: 1fr; } }
.cal { display: grid; gap: 12px; }
.cal__hd { display: flex; justify-content: space-between; align-items: center; font-weight: 700; }
.cal__hd button { background: none; border: 1.5px solid var(--line-ink); color: var(--paper); border-radius: 999px; width: 36px; height: 36px; cursor: pointer; }
.cal__hd button:disabled { opacity: .3; cursor: default; }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; text-align: center; }
.cal__grid .dow { font: 500 10px/1 var(--f-mono); letter-spacing: .08em; color: var(--muted-ink); padding: 6px 0; }
.cal__grid button { aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--line-ink); background: transparent; color: var(--paper); cursor: pointer; font: 600 14px/1 var(--f-body); font-variant-numeric: tabular-nums; transition: background-color .2s, color .2s; }
.cal__grid button:hover:not(:disabled) { background: var(--ink-2); border-color: var(--slate-light); }
.cal__grid button:disabled { opacity: .25; cursor: default; }
.cal__grid button[aria-pressed="true"] { background: var(--slate-light); color: var(--ink); border-color: var(--slate-light); }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.slots button { padding: 10px 6px; border-radius: 10px; border: 1px solid var(--line-ink); background: transparent; color: var(--paper); font: 600 13px/1 var(--f-mono); cursor: pointer; }
.slots button:hover { border-color: var(--slate-light); }
.slots button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.slots-h { font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--slate-light); }
.preview-note { font: 500 11px/1.5 var(--f-mono); color: var(--ink-soft); background: var(--paper-2); border-radius: 8px; padding: 8px 10px; }
.card--ink .preview-note { background: var(--ink-2); color: var(--muted-ink); }

/* ---------------------------------------------------------------- privacy / 404 */
.legal { max-width: 760px; display: grid; gap: 36px; }
.legal h2 { font: 800 24px/1.2 var(--f-display); margin: 0 0 10px; }
.legal p { color: var(--ink-soft); }
.legal p + p { margin-top: .7em; }
.lost { position: relative; min-height: 70vh; display: grid; place-items: center; text-align: center; padding: calc(var(--head-h) + 60px) 0 80px; overflow: hidden; }
.lost .wrap { display: grid; gap: 22px; justify-items: center; position: relative; z-index: 1; }
.lost .btn-row { justify-content: center; }
.lost .paws { z-index: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .pre { opacity: 1; transform: none; }
}

/* contact page: the honeypot field bots fill and people never see, the
   send error, and the part-of-day labels in the booking times */
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-err { margin: 0; font-size: 14px; color: var(--no); }
.card--ink .form-err { color: #f2a59b; }
.slots-part { margin: 10px 0 6px; font: 600 10.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-ink); }

/* the two promises that sit under every booking button */
.promise { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; font: 500 13.5px/1.4 var(--f-body); color: var(--ink-soft); }
.promise span { display: inline-flex; align-items: baseline; gap: 7px; }
.promise i { font-style: normal; font-weight: 700; color: #3d7f64; }
.sec--ink .promise, .card--ink .promise, .score .promise, .cta .promise { color: var(--muted-ink); }
.sec--ink .promise i, .card--ink .promise i, .score .promise i, .cta .promise i { color: #8fd0b6; }
.cta-quiet .promise { margin-top: 18px; }
.score .promise { justify-content: center; text-align: left; font-size: 12.5px; }