@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; src: url("/assets/c4/fonts/bricolage-grotesque-latin-9fee080f.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* One Line + Change It: Create 4 concept D, round 4.
   One typeface (Bricolage Grotesque) from 200 to 600, paper, ink and Create 4's red. The only moving object is the c4 mark,
   drawn as one line. Everything bespoke is scoped under .site (maps to body[data-skin="create4"] in a port). */

@view-transition { navigation: auto; }

/* The frames before Bricolage arrives (SEO pass, 19 Oct 2026, W11). Arial, sized and spaced to Bricolage's measurements, so a page
   laid out before the font comes does not move when it does (first visits on a slow phone: the cookie banner grew and jumped,
   CLS 0.22-0.33). Measured in headless Chrome on the site's own copy: size-adjust is Bricolage's width over Arial's (body copy at
   weight 380; bold at 600-700 against Arial Bold, so bold is never synthesised); ascent and descent are Bricolage's (0.93, 0.27)
   over size-adjust. Once Bricolage has loaded these faces are never used: unicode-range is Bricolage's own (LATIN in build.mjs, which
   checks the two match), so a character outside it (→ ↗ ←) still falls to Helvetica Neue exactly as before. Where Arial is missing,
   the stack falls through as it always did. */
@font-face { font-family: "Bricolage fallback"; font-weight: 100 549; src: local("Arial"), local("ArialMT"); size-adjust: 104.45%; ascent-override: 89.04%; descent-override: 25.85%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage fallback"; font-weight: 550 900; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 101.2%; ascent-override: 91.9%; descent-override: 26.68%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --paper: #ffffff;
  --ink: #111111;
  --red: #E4002B;
  --red-deep: #C8102E;
  --mute: #555555;
  --rule: #e4e4e4;
  --wash: #f4f4f2;
  --gut: clamp(20px, 5vw, 72px);
  --hpad: max(30px, var(--gut));   /* the home page keeps a lane either side for the line */
  --tw: 12px;                      /* the line's width down the page */
  --hdr: 88px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --font: "Bricolage Grotesque", "Bricolage fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (max-width: 699px) { :root { --tw: 8px; --hdr: 68px; } }

html { background: var(--paper); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); }

.site {
  position: relative; isolation: isolate; overflow: clip; min-height: 100vh;
  background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: 18px; line-height: 1.45; font-weight: 380;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.site *, .site *::before, .site *::after { box-sizing: border-box; }
.site img { max-width: 100%; height: auto; display: block; }
.site a { color: inherit; }
:where(.site) :where(p, h1, h2, h3, ul, ol, dl, dd, figure) { margin: 0; }
:where(.site) :where(ul, ol) { padding: 0; list-style: none; }
:where(.site) button { font: inherit; color: inherit; }
.site [hidden] { display: none !important; }

/* ---------- type: one family, an extreme range ---------- */
.t-xxl { font-size: clamp(52px, 9.6vw, 156px); font-weight: 210; line-height: .93; letter-spacing: -.045em; }
.t-xl { font-size: clamp(34px, 4.6vw, 72px); font-weight: 250; line-height: 1.02; letter-spacing: -.03em; }
.t-l { font-size: clamp(22px, 2.1vw, 32px); font-weight: 300; line-height: 1.18; letter-spacing: -.015em; }
.t-m { font-size: clamp(20px, 1.6vw, 24px); font-weight: 400; line-height: 1.2; letter-spacing: -.01em; }
.t-label { font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; font-stretch: 92%; }
.nb { white-space: nowrap; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* hints: one for a mouse, one for a finger */
.hint-touch { display: none; }
@media (hover: none) { .hint-fine { display: none; } .hint-touch { display: inline; } }

/* ---------- focus ---------- */
.site :focus { outline: none; }
.site :focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 2px; }
.ftr :focus-visible, .flood :focus-visible, .band :focus-visible { outline-color: #fff; }
.site main:focus { outline: none; }

.skip { position: absolute; left: 12px; top: 12px; z-index: 60; padding: 12px 18px; background: var(--ink); color: #fff !important; text-decoration: none; font-weight: 600; transform: translateY(-160%); }
.skip:focus-visible, .skip:focus { transform: none; outline: 3px solid var(--red); outline-offset: 2px; }

.site main { position: relative; display: block; }  /* no z-index: the line layer sits between the page and the progress stops */
.hdr { z-index: 30; }

/* ---------- header ---------- */
.hdr {
  position: absolute; left: 0; right: 0; top: env(safe-area-inset-top, 0px); height: var(--hdr);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 var(--gut);
}
.site[data-page="home"] .hdr { padding: 0 var(--hpad); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-height: 44px; view-transition-name: brand; }
.brand-word { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.mark rect { fill: var(--red); }
.mark path { fill: none; stroke: #fff; stroke-width: 11.5; stroke-linecap: round; stroke-linejoin: round; }
.mark--hdr { width: 34px; height: 34px; }
.nav-btn { display: none; }
.nav-list { display: flex; gap: clamp(20px, 2.6vw, 40px); align-items: center; }
.nav-panel { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px); }
.nav-list a, .nav-phone a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-size: 17px; font-weight: 450; position: relative; }
.nav-list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 3px; border-radius: 3px; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease); }
.nav-list a[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) { .nav-list a:hover::after { transform: scaleX(1); } }
.nav-talk { color: var(--red-deep) !important; font-weight: 600 !important; }
.nav-phone a { font-variant-numeric: tabular-nums; color: var(--mute); }

/* laid out for the script from the first paint (a slow phone must not see the header jump); <noscript> in each page puts back
   the plain header when there is no script */
@media (max-width: 899px) {
  .site .nav-btn {
    display: inline-flex; align-items: center; gap: 10px; min-height: 48px; min-width: 48px; padding: 0 14px 0 12px; margin-right: -12px;
    background: none; border: 0; cursor: pointer; font-size: 16px; font-weight: 600; position: relative; z-index: 2;
  }
  .nav-btn-lines { width: 22px; height: 10px; position: relative; display: block; }
  .nav-btn-lines::before, .nav-btn-lines::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .35s var(--ease); }
  .nav-btn-lines::before { top: 0; } .nav-btn-lines::after { bottom: 0; background: var(--red); height: 3px; }
  .nav-btn[aria-expanded="true"] .nav-btn-lines::before { transform: translateY(4px) rotate(45deg); }
  .nav-btn[aria-expanded="true"] .nav-btn-lines::after { transform: translateY(-4px) rotate(-45deg); }
  .site .nav-panel {
    position: fixed; inset: 0; z-index: 1; display: none; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    background: var(--paper); padding: calc(var(--hdr) + 24px + env(safe-area-inset-top, 0px)) var(--gut) 32px; overflow-y: auto;
  }
  .site .nav-panel.is-open { display: flex; }
  .site .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .site .nav-list a { font-size: clamp(40px, 12vw, 64px); font-weight: 230; letter-spacing: -.03em; min-height: 72px; padding: 6px 0; width: 100%; }
  .site .nav-list a::after { bottom: 4px; height: var(--tw); border-radius: var(--tw); transform: scaleX(0); transition: transform .6s var(--ease); }
  .site .nav-panel.is-open .nav-list a[aria-current="page"]::after { transform: scaleX(0); }
  .site .nav-panel.is-drawn .nav-list a[aria-current="page"]::after { transform: scaleX(1); }
  .site .nav-phone { margin-top: auto; padding-top: 32px; }
  .site .nav-phone a { font-size: 22px; color: var(--ink); }
}

/* concept marker: one quiet tag in the top corner (it scrolls away with the page), and the footer line */
.site .flag {
  position: absolute; z-index: 31; right: var(--gut); top: calc(env(safe-area-inset-top, 0px) + var(--hdr) - 6px); margin: 0;
  font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; font-stretch: 92%; color: var(--mute);
  pointer-events: none;
}
.site[data-page="home"] .flag { right: var(--hpad); }
@media (max-width: 699px) { .site .flag { font-size: 9px; letter-spacing: .12em; top: calc(env(safe-area-inset-top, 0px) + var(--hdr) - 10px); } }

/* ---------- the line (drawn by site.js in one layer over the page, and one under it) ---------- */
.line-layer { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.line-layer--over { z-index: 3; }
.line-layer--under { z-index: 0; }
.line-layer path { fill: none; stroke: var(--red); stroke-linecap: round; stroke-linejoin: round; }
.line-layer .ln-end { fill: var(--red); stroke: none; }
.line-layer .ln-peg { fill: #fff; stroke: var(--ink); stroke-width: 5px; }
.line-layer .ln-page { stroke-width: var(--tw); }
.line-layer .ln-page.is-drawing { stroke-dasharray: 1 3; }
.line-layer .ln-rail { stroke: rgba(255, 255, 255, .16); stroke-width: 3px; }   /* home, the deck: the rest of the way along the cards */
.line-layer .ln-notch { transition: transform .45s var(--ease); }                /* home, the index: out to the chosen row */

/* ---------- home: the opening ---------- */
.hero { position: relative; padding: 0 var(--gut); }
.hero--home {
  --hl: clamp(28px, 9.2vw, 72px);
  min-height: max(600px, 100svh); padding: 0 var(--hpad); display: flex; flex-direction: column;
}
.hero--home .hero-in { position: relative; padding-top: calc(var(--hdr) + clamp(24px, 5vh, 56px)); }
/* Round 6: the label is the first part of the H1 (<h1 class="hero-h1"><span class="hero-label">…</span> <span class="hl">…</span></h1>).
   The H1 has no type of its own; the label and the big words are each a block with their own type, so it looks as it did when
   the label was a <p> above the H1. */
.hero-h1 { display: block; margin: 0; }
.hero-label { display: block; margin-bottom: clamp(16px, 2.2vh, 26px); color: var(--ink); text-wrap: balance; }   /* a wrapped label is two even lines, never a word alone (round 6) */
.hero-h { display: block; }
.hl { display: block; font-size: var(--hl); font-weight: 220; line-height: .97; letter-spacing: -.04em; color: var(--ink); position: relative; margin: 0; }
.hl-text { display: block; }
.hl-line { display: block; width: fit-content; position: relative; }
.hl.is-hot { color: var(--red); font-weight: 300; }
.hl.is-cooling { transition: color .9s var(--ease), font-weight .9s var(--ease); }
.hl.is-morph .hl-text { opacity: 0; }
.hl-layer { position: absolute; left: 0; top: 0; pointer-events: none; }
.hl-ch { position: absolute; top: 0; white-space: pre; will-change: transform, opacity; line-height: 1; }
/* the plain red underline: shown without script, with reduced motion, and wherever the line is not running */
.u-static { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: max(4px, .07em); text-underline-offset: .2em; text-decoration-skip-ink: none; }
.hl .u-static { text-decoration-thickness: max(5px, .06em); text-underline-offset: .22em; }
.site.is-line .u-static { text-decoration-color: transparent; }
/* the headline says it can be changed by itself: a text caret, and on hover (or when "Change it" has focus) a red rule draws
   in under each line, one after another */
.site.is-js .hl { cursor: text; }
.site.is-js .hl-line::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.02em; height: max(4px, .05em); border-radius: 4px; background: var(--red);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease); pointer-events: none;
}
.site.is-js .hl-line:nth-of-type(2)::after { transition-delay: 70ms; }
.site.is-js .hl-line:nth-of-type(3)::after { transition-delay: 140ms; }
.site.is-js .hl-line:nth-of-type(n+4)::after { transition-delay: 200ms; }
@media (hover: hover) {
  .site.is-js .hero--home[data-ask-state="invite"] .hl:hover .hl-line::after,
  .site.is-js .hero--home[data-ask-state="done"] .hl:hover .hl-line::after,
  .site.is-js .hero--home:has(.ask-key:hover) .hl-line::after { transform: scaleX(1); }
}
.site.is-js .hero--home:has(.ask-key:focus-visible) .hl-line::after { transform: scaleX(1); }
.hl.is-morph .hl-line::after, .hl.is-hot .hl-line::after { display: none; }

/* the change demo keeps the same room in every state, so opening it, sending and finishing never move the headline, the mark or
   the work below (the edit pane is the tallest: on wide screens it hangs below the room, on narrow ones it lies over the mark) */
.ask { position: relative; margin-top: clamp(30px, calc(var(--hl) * .64), 66px); height: 104px; }
.ask-l { position: relative; }
.ask-pane { display: block; }
/* "Change it": the only words of invitation, and the keyboard's way in */
.ask-key {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px 0 0; margin-left: -1px; border: 0; background: none; cursor: pointer;
  font-size: 17px; font-weight: 500; color: var(--ink);
}
.ask-key-t { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.ask-caret { display: block; width: 2px; height: 1.2em; border-radius: 2px; background: var(--red); }
@media (prefers-reduced-motion: no-preference) {
  .ask-key:hover .ask-caret, .ask-key:focus-visible .ask-caret, .hero-h1:has(.hl:hover) ~ .ask .ask-caret { animation: caret 1.05s steps(1) infinite; }
}
@keyframes caret { 50% { opacity: 0; } }
.ask-q { color: var(--ink); display: block; }
.ask-row { display: flex; align-items: flex-end; gap: 18px; margin-top: 10px; }
.ask-field { position: relative; flex: 1 1 auto; min-width: 0; max-width: 560px; display: block; }
.ask-field input {
  width: 100%; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink);
  font: inherit; font-size: clamp(24px, 2.4vw, 34px); font-weight: 300; letter-spacing: -.02em; line-height: 1.15; padding: 6px 0 8px; min-height: 52px;
}
.site .ask-field input:focus-visible { outline: none; border-bottom-color: var(--red); box-shadow: inset 0 -3px 0 var(--red); }
.ask-field input[aria-invalid="true"] { border-bottom-color: var(--red-deep); }
.ask-send { flex: none; gap: 12px; }
.ask-send svg, .ask-back svg { width: 18px; height: 18px; }
.ask-send path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ask-send.is-pressed { background: var(--red-deep); transform: scale(.965); box-shadow: 0 0 0 6px rgba(228, 0, 43, .12); }
.ask-err { margin-top: 10px; color: var(--red-deep); font-size: 16px; font-weight: 600; }
.ask-under { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin-top: 10px; }
.ask-demo, .track-demo, .ask-live { font-family: var(--mono); font-size: 12.5px; letter-spacing: .03em; color: var(--mute); }
.ask-try { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ask-try-l { font-size: 14px; color: var(--mute); margin-right: 4px; }
.ask-chip { min-height: 36px; padding: 0 12px; border: 1.5px solid #c9c9c9; border-radius: 40px; background: #fff; cursor: pointer; font-size: 14px; font-weight: 450; transition: border-color .2s, background-color .2s; }
@media (hover: hover) { .ask-chip:hover { border-color: var(--ink); } }
.ask-cancel { min-height: 36px; padding: 0; background: none; border: 0; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--mute); text-decoration: underline; text-underline-offset: 4px; }
@media (pointer: coarse) { .ask-chip, .ask-cancel { min-height: 44px; } }
.ask-status { color: var(--mute); }
.site .ask-status:focus { outline: none; } /* focus is moved here so a screen reader carries on from it; the live region already speaks */
.ask-check { margin-top: 6px; }
.ask-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 16px; }
.ask-live { color: var(--ink); font-size: 13.5px; }
.ask-again { min-height: 48px; padding: 0 2px; background: none; border: 0; cursor: pointer; font-size: 17px; font-weight: 500; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 3px; text-underline-offset: 7px; }
.ask-back { gap: 10px; }
.ask-back path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ask-pane--done .ask-btns { margin-top: 12px; }

/* the line as progress: Sent, Made, Seen by you, Live. site.js positions it; the red is the logo's own line. */
/* no z-index here: the dashed track sits under the logo's line, the stops and labels over it */
.ask-r { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.track { position: absolute; left: 0; top: 0; width: 300px; height: 0; transition: opacity .5s var(--ease); }
.track.is-leaving, .track.is-arriving { opacity: 0; }
.track-base { z-index: 2; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: repeating-linear-gradient(90deg, #c4c4c4 0 10px, transparent 10px 18px); }
.track-fill { z-index: 3; position: absolute; left: 0; top: calc(var(--tw) / -2); height: var(--tw); width: calc(var(--p, 0) * 100%); border-radius: var(--tw); background: var(--red); }
.site.is-line .track-fill { visibility: hidden; }
.track-demo { z-index: 4; position: absolute; left: 0; bottom: 20px; white-space: nowrap; }
.track-stops { z-index: 4; position: absolute; left: 0; right: 0; top: 0; }
.stop { position: absolute; top: 0; }
.stop[data-stop="sent"] { left: 0; } .stop[data-stop="made"] { left: 33.33%; } .stop[data-stop="seen"] { left: 66.66%; } .stop[data-stop="live"] { left: 100%; }
.stop-dot { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid #c4c4c4; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), background-color .2s, border-color .2s; }
.stop.is-on .stop-dot { background: var(--red); border-color: var(--red); box-shadow: 0 0 0 5px #fff; }
.stop.is-now .stop-dot { background: #fff; border: 6px solid var(--red); box-shadow: 0 0 0 5px #fff, 0 0 0 12px rgba(228, 0, 43, .14); }
.stop-l { position: absolute; left: 0; top: 24px; transform: translateX(-50%); white-space: nowrap; font-family: var(--mono); font-size: 12.5px; letter-spacing: .03em; color: var(--mute); }
.stop.is-on .stop-l, .stop.is-now .stop-l { color: var(--ink); }
.stop[data-stop="live"] .stop-l { transform: translateX(-100%); left: 12px; }
.stop[data-stop="sent"] .stop-l { transform: none; left: -10px; }
.stop[data-stop="live"].is-on .stop-dot { left: -26px; top: -26px; width: 52px; height: 52px; border: 0; background: var(--red) no-repeat center / 24px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); box-shadow: 0 0 0 6px #fff; }
.stop[data-stop="live"].is-on .stop-l { top: 38px; }
.track--narrow .stop[data-stop="made"] .stop-l, .track--narrow .stop[data-stop="live"] .stop-l { top: auto; bottom: 20px; }
.track--narrow .stop[data-stop="live"].is-on .stop-l { bottom: 28px; }
.track--narrow .track-demo { bottom: auto; top: 50px; left: auto; right: 0; }
.truth { z-index: 4; position: absolute; left: 0; top: 0; width: max-content; max-width: 30em; color: var(--ink); }
.truth-mute { color: var(--mute); }

/* the mark: one line. site.js draws it (and lets you pull it) in the page's line layer; this box only says where it sits. */
.mark-stage { position: relative; }
.mark-box { position: relative; width: min(calc(100% - 44px), 420px); aspect-ratio: 132 / 100; margin: clamp(18px, 3vh, 40px) 0 0 0; }
.mark-still { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mark-still path { stroke: var(--red); }
.site.is-drawn .mark-still { visibility: hidden; } /* only once the line has started to draw itself over it */
.mark-btn {
  position: absolute; left: 0; top: 0; width: 10px; height: 10px; z-index: 5; padding: 0; border: 0; background: transparent; cursor: pointer;
  border-radius: 14px; -webkit-tap-highlight-color: transparent;
}
.mark-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: -4px; }
/* Untied, the button's box is empty: a solid ring round nothing reads as a broken box. Mark the spot the c4 returns to instead, and say how. */
.mark-btn.is-loose:focus-visible { outline: 2px dashed var(--red); outline-offset: -6px; }
.mark-btn.is-loose:focus-visible::after { content: "Enter ties it back"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
/* the loose end: a 44px target. A mouse takes it at once; a finger has to rest on it (or move sideways) first, so an ordinary
   scroll that starts on it still scrolls (site.js) */
.mark-end { position: absolute; left: 0; top: 0; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; z-index: 6; touch-action: none; overscroll-behavior: none; display: none; cursor: grab; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.site.is-line .mark-end { display: block; }
.mark-end.is-grab, .site.is-pulling, .site.is-pulling * { cursor: grabbing !important; }
.mark-stage.is-near .mark-btn { cursor: grab; }
.mark-hint { position: absolute; left: 0; top: 0; z-index: 5; color: var(--ink); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .18s ease; }
.mark-hint.is-on { opacity: 1; transition: opacity .8s var(--ease); }
.mark-hint::before { content: ""; display: inline-block; width: 18px; height: 1.5px; background: var(--ink); vertical-align: middle; margin-right: 10px; }
.mark-hint.is-under::before { display: none; }
.mark-hint.is-under .hint-more { display: none; }

@media (min-width: 960px) {
  .hero--home { --hl: clamp(54px, min(6.1vw, 10.5vh), 104px); }
  .hero--home .hero-in { margin-top: auto; padding-top: calc(var(--hdr) + 40px); padding-bottom: clamp(28px, 5vh, 52px); }
  .hero--home .ask { height: 132px; }
  .hero--home .ask-l { max-width: calc(var(--hl) * 8.2); }
  .mark-stage { position: absolute; left: 0; top: 0; width: 0; height: 0; }
  .mark-box { position: absolute; margin: 0; width: min(40vw, 640px); left: calc(100vw - var(--hpad) - 150px - min(40vw, 640px)); top: calc(var(--hdr) + 16px); }
  .ask-pane--done .ask-btns { margin-top: 10px; }
}
@media (max-width: 959px) {
  .hero--home .ask-l { max-width: 640px; }
  .ask-row { flex-wrap: wrap; }
  .ask-field { flex-basis: 100%; max-width: none; }
  .ask-send { width: 100%; }
  .mark-stage { flex: 1 0 auto; padding-bottom: clamp(56px, 9vh, 110px); }
  /* the field lies over the mark while you write (the mark steps back), so nothing below it moves */
  .hero--home .ask-pane--edit { position: absolute; left: 0; right: 0; top: 0; z-index: 7; background: var(--paper); padding-bottom: 16px; }
  .hero--home.is-editing .mark-stage, .site.is-editing .line-layer--over { visibility: hidden; } /* no fade: fading the page-tall line layer costs every frame on a slow phone */
  .ask-pane--check .ask-q { display: none; } /* the track's own "Seen by you" says it; it keeps the flow on one phone screen */
  .truth { max-width: min(30em, calc(100vw - 2 * var(--hpad))); width: auto; }
}
@media (max-width: 699px) {
  .ask-chip, .ask-cancel { min-height: 44px; }
  .ask-try { width: 100%; }
  .ask-btns .btn { flex: 1 1 auto; padding: 0 16px; }
  .ask-btns { flex-wrap: nowrap; gap: 10px; }
  .stop-l { font-size: 11px; letter-spacing: .01em; }
  .stop-dot { width: 18px; height: 18px; left: -9px; top: -9px; }
  .stop[data-stop="live"].is-on .stop-dot { left: -20px; top: -20px; width: 40px; height: 40px; background-size: 20px; }
  .stop[data-stop="live"].is-on .stop-l { top: 30px; }
  .ask-demo, .track-demo { font-size: 11.5px; }
}
@media (max-width: 359px) { /* two buttons side by side do not fit in 260px */
  .hero--home .ask { height: 170px; }
  .ask-btns { flex-wrap: wrap; }
  .ask-btns .btn { flex: 1 1 100%; }
}

/* ---------- frames: the client sites, shown as screens ---------- */
.frame { display: block; position: relative; overflow: hidden; background: var(--wash); border-radius: 4px; box-shadow: 0 0 0 1px rgba(17, 17, 17, .08); }
.frame .shot { width: 100%; height: auto; }

/* ---------- home: the work (23 Oct 2026) ----------
   One list in two layouts (homepage-review-20261023: mock-a for laptops, mock-b-phone for everything else; Dan: "Yes go for it").
   The index, on a laptop (1024px and wider, with a mouse): numbered rows on the left and one shared preview on the right, chosen by
   the mouse or the keyboard. The deck, everywhere else: a dark band of phone screens you swipe, the next one peeking in. The page
   line runs beside both (site.js: a notch out to the chosen row; along the foot of the deck as far as the card you are on). The
   query is written out in full in three places (here, build.mjs INDEX_MQ, site.js INDEX). Motion is transforms and opacity; with
   reduced motion it is instant; without script the index shows the first preview and the deck still scrolls by itself. */
.work { --card-w: clamp(200px, min(68vw, (100svh - 250px) * .69), 340px); --gap: 14px; }
.work-link { display: block; text-decoration: none; color: inherit; }
.work-eye, .work-n, .work-sector, .work-line, .work-go { display: block; }
.work-say { margin-top: 16px; text-wrap: balance; }
.work-shot .shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* the blind: a dark cover with the red line as its bottom edge, lifted off a card's screen as it becomes the one you are on. It
   waits above the screen (and so never hides it); site.js drops it and lifts it (is-up), and only when motion is allowed. */
.work-cover { position: absolute; inset: 0; z-index: 1; background: #1c1c1c; transform: translateY(-101%); pointer-events: none; }
.work-cover::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--tw); background: var(--red); }
.work-cover.is-down { transform: none; }
.work-cover.is-up { animation: work-lift .42s cubic-bezier(.55, 0, .25, 1) both; }
@keyframes work-lift { from { transform: none; } to { transform: translateY(-101%); } }
.work-all .all-link { font-size: clamp(19px, 1.6vw, 24px); font-weight: 300; letter-spacing: -.01em; }
.all-link { display: inline-flex; align-items: center; gap: 16px; min-height: 56px; text-decoration: none; position: relative; }
.arrow { display: inline-block; transition: transform .4s var(--ease); }
@media (hover: hover) { a:hover > .arrow, .work-stage:hover .arrow { transform: translateX(6px); } }

/* the deck: phones, tablets, and any screen without a mouse */
@media not all and (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  /* the white before the band is where a phone's line crosses from the right-hand side to the left */
  .work { --dim: rgba(255, 255, 255, .74); margin-top: clamp(56px, 10vh, 96px); padding: clamp(40px, 6.5vh, 64px) 0 clamp(44px, 7vh, 72px); background: var(--ink); color: #fff; }
  .work :focus-visible { outline-color: #fff; }
  .work-intro, .work-all { padding: 0 var(--hpad); }
  .work-label { color: var(--dim); }
  .work-say { max-width: 13em; font-size: clamp(32px, 8.4vw, 52px); font-weight: 250; line-height: 1.04; letter-spacing: -.025em; }
  .work-say--long { display: none; }
  .work-red { color: var(--red); }
  .work-deck { position: relative; margin-top: clamp(20px, 3.4vh, 32px); }
  .work-list { display: flex; gap: var(--gap); margin: 0 0 0 calc(var(--hpad) - 8px); padding: 8px 0 8px 8px; scroll-padding-left: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }   /* 8px of room for a card's focus ring */
  .work-list::-webkit-scrollbar { display: none; }
  .work-list::after { content: ""; flex: 0 0 max(1px, calc(100% - var(--card-w) - var(--gap))); }   /* room for the last card to come to the start */
  .work-item { flex: 0 0 var(--card-w); min-width: 0; scroll-snap-align: start; }
  .work-link { color: #fff; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); -webkit-tap-highlight-color: transparent; }
  .work-link.is-press { transform: scale(.97); transition: transform .12s ease-out; }   /* the spring press (Blinding Blinds, SPEC3 §2.3) */
  .work-shot { aspect-ratio: 9 / 13; border-radius: 18px; background: #1c1c1c; box-shadow: 0 24px 40px -22px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .08); transform-origin: 50% 60%; transition: transform .5s var(--ease), opacity .5s var(--ease); }
  .work-item:not(.is-on) .work-shot { transform: scale(.94); opacity: .5; }
  .work-text { padding: 16px 2px 0; transition: opacity .5s var(--ease); }
  .work-item:not(.is-on) .work-text { opacity: .7; }
  .work-eye { display: flex; flex-wrap: wrap; color: var(--dim); }
  .work-n { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-variant-numeric: tabular-nums; }
  .work-rule { display: block; width: 26px; height: 3px; border-radius: 3px; background: var(--red); }
  .work-of { margin-left: -10px; color: var(--dim); white-space: pre; }
  .work-sector { flex-basis: 100%; margin-top: 12px; }
  .work-name { margin-top: 6px; font-size: clamp(26px, 7.6vw, 32px); font-weight: 300; line-height: 1.06; letter-spacing: -.02em; }
  .work-line { margin-top: 8px; color: var(--dim); font-size: 16px; line-height: 1.42; }
  .work-go { display: inline-block; margin-top: 12px; padding-bottom: 3px; border-bottom: 2px solid var(--red); font-size: 16px; font-weight: 450; }
  .work-btn { position: absolute; z-index: 2; top: calc(8px + var(--card-w) * 13 / 18 - 22px); display: grid; place-items: center; width: 44px; height: 44px; padding: 0 0 3px; border: 0; border-radius: 50%;
    background: rgba(17, 17, 17, .72); box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); color: #fff; font-size: 28px; line-height: 1; cursor: pointer;
    transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), opacity .25s; -webkit-tap-highlight-color: transparent; }
  .work-btn--prev { left: calc(var(--hpad) + 8px); }
  .work-btn--next { right: 10px; }
  .work-btn[aria-disabled="true"] { opacity: .4; cursor: default; }
  .work-btn.is-press { transform: scale(.9); transition-duration: .1s; }
  .work-stage { display: none; }
  .work-all { margin-top: clamp(34px, 5.4vh, 48px); }
  .work-all .all-link { color: #fff; }
}

/* the index: a laptop, with a mouse */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .work { padding: clamp(110px, 16vh, 190px) var(--hpad) clamp(90px, 13vh, 150px); }
  .work-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "intro all" "deck stage"; column-gap: clamp(40px, 4.2vw, 72px); align-items: start; }
  .work-intro { grid-area: intro; padding-bottom: clamp(32px, 4.6vh, 52px); }
  .work-say { max-width: 15em; font-size: clamp(30px, 3.1vw, 46px); font-weight: 250; line-height: 1.07; letter-spacing: -.02em; }
  .work-say--short { display: none; }
  .work-all { grid-area: all; align-self: end; justify-self: end; padding-bottom: clamp(26px, 4vh, 44px); }
  .work-deck { grid-area: deck; }
  .work-list { border-top: 1px solid var(--rule); }
  .work-item { border-bottom: 1px solid var(--rule); }
  .work-link { padding: clamp(18px, 2.4vh, 24px) 0; }
  .work-shot, .work-btns, .work-go, .work-rule, .work-of { display: none; }
  /* the chosen row steps in and its line rises into view (transforms: nothing below it moves). Every row keeps room for its line;
     one not chosen sits half that room lower (--drop, set by site.js), so the room reads as space around its name, not a gap. */
  .work-text { width: calc(100% - 40px); transform: translateY(var(--drop, 0px)); transition: transform .45s var(--ease); }
  .work-item.is-on .work-text { transform: translateX(40px); }
  .work-eye { display: flex; gap: 14px; color: var(--mute); transition: color .3s; }
  .work-n { font-variant-numeric: tabular-nums; }
  .work-item.is-on .work-eye { color: var(--red-deep); }
  .work-name { margin-top: 8px; font-size: clamp(28px, 2.6vw, 40px); font-weight: 250; line-height: 1.08; letter-spacing: -.02em; }
  .work-line { overflow: hidden; margin-top: 8px; color: var(--mute); font-size: clamp(16px, 1.15vw, 18px); line-height: 1.4; }
  .work-line-in { display: block; transform: translateY(110%); transition: transform .45s var(--ease); }
  .work-item.is-on .work-line-in { transform: none; }
  .work-stage { grid-area: stage; position: sticky; top: max(32px, calc(50vh - 230px)); display: block; text-decoration: none; color: var(--mute); }
  .work-frame { aspect-ratio: 36 / 19; border-radius: 10px; background: var(--wash); box-shadow: 0 30px 60px -30px rgba(17, 17, 17, .38), 0 0 0 1px rgba(17, 17, 17, .08); }
  .work-frame .work-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: 0; transform: scale(1.02); transition: opacity .45s var(--ease), transform .7s var(--ease); }
  .work-frame .work-pic.is-on { opacity: 1; transform: none; }
  .work-cap { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; font-size: 16px; }
  .work-view { color: var(--ink); white-space: nowrap; }
}

/* ---------- home: no support desk (23 Oct 2026) ---------- */
.direct { margin-bottom: clamp(100px, 15vh, 180px); padding: clamp(72px, 11vh, 120px) var(--hpad) clamp(84px, 12.5vh, 136px); background: var(--wash); }
.direct-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 4.2vw, 72px); align-items: start; }
.direct-l { display: block; }
.direct-red { color: var(--red); }
.direct-p { margin-top: .35em; max-width: 24em; font-size: clamp(19px, 1.5vw, 23px); line-height: 1.5; }
.direct-go { margin-top: 20px; }
.direct-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: clamp(17px, 1.25vw, 19px); font-weight: 450;
  text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (max-width: 899px) {
  .direct { margin-bottom: clamp(84px, 12vh, 120px); padding: 60px var(--hpad) 68px; }
  .direct-in { display: block; }
  .direct-r { margin-top: 18px; }
}

/* ---------- home: what you get ---------- */
.get { position: relative; padding: 0 var(--hpad) clamp(80px, 12vh, 140px); }
.get-h { max-width: 14em; }
.get-list { margin-top: clamp(48px, 7vh, 80px); border-bottom: 1px solid var(--rule); }
.get-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px; gap: 24px; align-items: center; min-height: 96px; padding: 20px 0; text-decoration: none; border-top: 1px solid var(--rule); }
.get-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s var(--ease); }
@media (hover: hover) { .get-row:hover::after { transform: scaleX(1); } .get-row:hover .get-name { color: var(--red-deep); } .get-row:hover .get-arrow { transform: translateX(6px); } }
.get-row:focus-visible::after { transform: scaleX(1); }
.get-name { transition: color .3s; }
.get-line { color: var(--mute); font-size: clamp(17px, 1.3vw, 20px); }
.get-arrow { font-size: 26px; font-weight: 300; justify-self: end; transition: transform .4s var(--ease); }
@media (max-width: 699px) { .get-row { grid-template-columns: 1fr; gap: 6px; min-height: 0; padding: 22px 0; } .get-arrow { display: none; } }

/* ---------- the knot, and the red flood ---------- */
.knot-box { position: relative; display: block; aspect-ratio: 132 / 100; margin: 0 auto; }
.knot-still { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.knot-still path { stroke: #fff; stroke-width: var(--tw); vector-effect: non-scaling-stroke; }
/* The line comes down through white space, ties itself into the c4, and red bursts out of the knot until the whole screen
   is red. From there to the end of the page there is no white. */
.flood { position: relative; display: flow-root; background: var(--red); color: #fff; padding: 0 var(--hpad) clamp(110px, 16vh, 180px); }
.knot-box--home { width: clamp(180px, 22vw, 300px); margin-top: clamp(80px, 12vh, 140px); }
.site.is-line .knot-box--home { margin-top: clamp(150px, 22svh, 280px); } /* about a third of a screen of white before the knot */
.flood-in { position: relative; max-width: 1500px; margin: clamp(36px, 6vh, 64px) auto 0; text-align: center; }
.flood-h { font-size: clamp(84px, 20.5vw, 340px); font-weight: 200; line-height: .86; letter-spacing: -.055em; margin-left: -.04em; }
.flood-line { margin-top: clamp(26px, 4vh, 44px); }
.flood-contact { margin-top: clamp(40px, 6vh, 64px); display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 48px; font-size: clamp(22px, 2.2vw, 32px); font-weight: 300; }
.flood-go { margin-top: clamp(36px, 5vh, 56px); }
@media (max-width: 699px) { .flood-contact { flex-direction: column; align-items: center; gap: 4px; font-size: 22px; } }

/* ---------- buttons, copy rows ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 30px; border-radius: 4px; text-decoration: none; font-size: 17px; font-weight: 600; letter-spacing: -.005em; border: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .35s var(--ease), background-color .25s, color .25s, box-shadow .25s; }
.btn--white { background: #fff; color: var(--red-deep) !important; }
.btn--red { background: var(--red); color: #fff; }
.btn--line { background: none; border-color: var(--ink); color: var(--ink); }
@media (hover: hover) { .btn:hover { transform: translateY(-2px); } .btn--red:hover { background: var(--red-deep); } .btn--line:hover { background: var(--ink); color: #fff; } }
.copy-row { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.copy-val { text-decoration: none; font-variant-numeric: tabular-nums; min-height: 44px; display: inline-flex; align-items: center; user-select: all; -webkit-user-select: all; }
.copy { min-height: 44px; min-width: 64px; padding: 0 12px; border: 1.5px solid currentColor; border-radius: 4px; background: none; cursor: pointer; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- footer: the line ties the c4 and red takes over ---------- */
.ftr-wrap { position: relative; }
.ftr-wrap .tie-layer { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; overflow: visible; }
.tie-layer path { fill: none; stroke: var(--red); stroke-width: var(--tw); stroke-linecap: round; stroke-linejoin: round; }
.ftr { position: relative; z-index: 1; background: var(--red); color: #fff; padding: 0 var(--gut) 28px; }
.ftr--home { padding-left: var(--hpad); padding-right: var(--hpad); }
.band { padding: calc(clamp(80px, 12vh, 130px) + 120px) 0 clamp(80px, 12vh, 140px); text-align: center; } /* the knot sits low enough for its burst to grow round before the footer's top edge cuts it */
.band--knot { padding-bottom: clamp(40px, 6vh, 64px); }
.knot-box--ftr { width: clamp(120px, 13vw, 180px); margin-bottom: clamp(40px, 6vh, 64px); }
.band-line { margin-top: 22px; }
.band-go { margin-top: 40px; }
/* five columns from 1200px (round 6 added Services; round 5's four ran from 900px): the contact and services columns never narrower
   than their longest line. Below 1200, three and two (five at 1100 would squeeze Where to 134px). */
.ftr-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(max-content, 1.2fr) minmax(max-content, 1.1fr) minmax(0, .8fr) minmax(0, 1fr); gap: 40px 32px; padding: clamp(56px, 8vh, 88px) 0 56px; border-top: 1px solid rgba(255, 255, 255, .35); }
@media (max-width: 1199px) { .ftr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
.ftr--home .ftr-grid { padding-top: clamp(24px, 4vh, 48px); }
.ftr-name { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 600; }
.mark--ftr { width: 36px; height: 36px; }
.mark--ftr rect { fill: #fff; }
.mark--ftr path { stroke: var(--red); }
.ftr-desc { margin-top: 14px; max-width: 22em; font-size: 16px; }
.ftr h2 { margin-bottom: 10px; }
.ftr-nav ul { display: grid; gap: 0; }
.ftr-nav a { display: inline-flex; align-items: center; min-height: 40px; min-width: 48px; text-decoration: none; font-size: 17px; }
@media (hover: hover) { .ftr-nav a:hover { text-decoration: underline; text-underline-offset: 5px; } }
.ftr-areas p { font-size: 16px; max-width: 18em; }
.ftr-contact .copy-row { font-size: 17px; }
.ftr-small { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .35); font-size: 14px; }
@media (max-width: 899px) { .ftr-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .ftr-grid { grid-template-columns: 1fr; gap: 32px; } .ftr-nav a { min-height: 44px; } }

/* ---------- inner pages: the opening ---------- */
.hero--top { padding-top: clamp(150px, 22vh, 230px); padding-bottom: clamp(70px, 10vh, 120px); }
.hero--top .hero-h { max-width: 15em; }
.hero-lead { margin-top: clamp(22px, 3vh, 34px); max-width: 24em; color: var(--mute); }
.hero--top .about-who { margin-top: clamp(22px, 3vh, 34px); display: grid; gap: 10px; max-width: 26em; }
.hero--short { min-height: max(440px, min(64svh, 680px)); display: flex; align-items: flex-end; padding-bottom: clamp(70px, 10vh, 120px); }
.hero--short .hero-h.t-xxl { max-width: 11em; }
/* A project page opens with its name and one sentence, then its pictures; no screen-height hero (round 5). */
.hero--case { padding-top: clamp(150px, 22vh, 240px); padding-bottom: clamp(36px, 5vh, 60px); }
.hero-in { position: relative; width: 100%; max-width: 1500px; }
.case-h1 { font-size: clamp(50px, 10.6vw, 176px); max-width: 10.5em; }
.case-lede { margin-top: clamp(22px, 3vh, 34px); max-width: 30em; color: var(--mute); }
.case-note { margin-top: 16px; max-width: 34em; font-size: 17px; color: var(--mute); }
/* round 6: before Next, one plain sentence (what Create 4 built, the trade and the town) and the service it shows, as a quiet
   arrow link (two on Plantation) */
.case-serv { padding: clamp(80px, 12vh, 130px) var(--gut) 0; }
.case-line { max-width: 34em; font-size: 17px; color: var(--mute); margin-bottom: 6px; }
.case-serv-links { display: flex; flex-wrap: wrap; gap: 0 36px; }
/* Phones (round 5, Dan: "lot of white space … doesn't look great on a phone"): the heading starts just under the header,
   and the title and the first picture share the first screen. */
@media (max-width: 699px) {
  .hero--top, .hero--case, .hero--short { padding-top: calc(var(--hdr) + 30px); }
  .hero--top { padding-bottom: 34px; }
  .hero--short { min-height: 0; padding-bottom: 30px; }
  .hero--case { padding-bottom: 26px; }
  .case-h1 { font-size: clamp(42px, 12.4vw, 68px); }
  .case-lede { margin-top: 16px; font-size: 19px; line-height: 1.32; }
  .hero-lead, .hero--top .about-who { margin-top: 16px; }
  .hero-label { margin-bottom: 12px; }
}

/* ---------- lists: the line underlines each thing ---------- */
.ticks { display: grid; gap: clamp(20px, 2.8vh, 30px); max-width: 1000px; }
.tick { position: relative; max-width: 24em; padding-bottom: 14px; }
.tick::after { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 4px; border-radius: 4px; background: var(--red); }
.ticks--dates .tick { display: flex; flex-direction: column; gap: 6px; }
.tick-when { color: var(--red-deep); }

/* ---------- work: twelve on one line ---------- */
.line { position: relative; padding-top: clamp(10px, 3vh, 40px); padding-bottom: clamp(100px, 16vh, 160px); }
.line-hint { display: none; padding: 0 var(--gut); color: var(--mute); margin-bottom: 26px; }
.line-wire { display: none; }
.line-track { position: relative; z-index: 1; }
.line-list { display: grid; gap: clamp(72px, 12vh, 120px); padding: 0 var(--gut); }
.card-link { display: block; text-decoration: none; }
.card-shelf { display: block; }
.card-text { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.card-num { color: var(--red-deep); }
.card-meta { color: var(--mute); font-size: 16px; }
.card-line { font-size: 16px; line-height: 1.4; max-width: 26em; }
.card-name { transition: color .3s; }
@media (hover: hover) { .card-link:hover .card-name { color: var(--red-deep); } }
.line-ctrl { display: none; }
@media (max-width: 699px) {
  .line { padding-top: 0; padding-bottom: 72px; }
  .line-list { gap: 48px; }
  .card-text { margin-top: 14px; gap: 6px; }
}
@media (max-width: 899px) {
  .line-list { position: relative; padding-left: calc(var(--gut) + 26px); }
  .line-list::before { content: ""; position: absolute; left: calc(var(--gut) + 2px); top: 0; bottom: 0; width: var(--tw); border-radius: var(--tw); background: var(--red); }
}
@media (min-width: 900px) {
  .line-hint { display: block; margin: 0 0 0 auto; padding: 0; text-align: right; }
  .line-wire { display: block; position: absolute; z-index: 2; left: var(--gut); right: 0; height: var(--tw); top: var(--wire-top, 200px); pointer-events: none; background: var(--red); border-radius: var(--tw) 0 0 var(--tw); }
  .line-track { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab; padding: 40px 0 46px; }
  .line-track::-webkit-scrollbar { display: none; }
  .line-track.is-dragging { cursor: grabbing; }
  .line-track.is-dragging a { pointer-events: none; }
  .line-list { display: flex; width: max-content; gap: clamp(44px, 5vw, 96px); padding: 0 calc(var(--gut) + 60px) 0 var(--gut); }
  .card { flex: 0 0 clamp(360px, 33vw, 540px); }
  .card-shelf { display: flex; align-items: flex-end; height: calc(clamp(360px, 33vw, 540px) * .6667); }
  .card-shelf .frame { width: 100%; }
  .card-text { margin-top: 44px; }
  .line-ctrl { display: flex; align-items: center; gap: 18px; padding: 8px var(--gut) 0; }
  .line-btn { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--ink); background: #fff; cursor: pointer; font-size: 20px; display: inline-flex; align-items: center; justify-content: center; transition: background-color .25s, color .25s; }
  @media (hover: hover) { .line-btn:hover { background: var(--ink); color: #fff; } }
  .line-btn[aria-disabled="true"] { opacity: .38; }
  .line-count { min-width: 74px; text-align: center; }
  .line-progress { flex: 1; max-width: 360px; height: 2px; background: var(--rule); position: relative; margin-left: 12px; }
  .line-progress span { position: absolute; left: 0; top: -1px; height: 4px; width: 100%; background: var(--red); transform-origin: 0 50%; transform: scaleX(var(--p, .1)); border-radius: 4px; }
}

/* ---------- project pages (round 5): two still pictures, the facts, and what the site does ---------- */
.views { padding: 0 var(--gut); }
/* side by side at one height: each picture's share of the row is its own width-to-height ratio (--a) */
.views-pair { display: flex; align-items: flex-start; gap: clamp(16px, 2.2vw, 32px); }
.view { flex: var(--a) 1 0; min-width: 0; }
.frame--view, .frame--feat-pic { border-radius: 6px; }
.views--solo .view--desk { flex: none; width: 100%; max-width: 1040px; } /* Aposs: one 1x picture, kept to the width the others have */
.view-cap { margin-top: 12px; font-size: 14px; color: var(--mute); }
.facts { margin-top: clamp(28px, 4vh, 44px); padding-top: 20px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px 28px; max-width: 1180px; }
.fact dt { color: var(--mute); margin-bottom: 6px; }
.fact dd { font-size: 19px; line-height: 1.3; }
.live { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 500; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.live-host { display: block; font-size: 13px; line-height: 1.35; color: var(--mute); overflow-wrap: anywhere; }
@media (hover: hover) { .live:hover { color: var(--red-deep); } .live:hover .live-arrow { transform: translate(3px, -3px); } }
@media (max-width: 699px) {
  /* the laptop picture across the screen; under it the phone picture, with the facts beside it */
  .views { display: grid; grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); column-gap: 16px; row-gap: 20px; align-items: start; }
  .views-pair { display: contents; }
  .view--desk { grid-column: 1 / -1; }
  .view--phone { grid-column: 1; }
  .view-cap { margin-top: 8px; font-size: 13px; }
  .facts { grid-column: 2; margin-top: 0; padding-top: 0; border-top: 0; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .fact dt { margin-bottom: 3px; }
  .fact dd { font-size: 17px; }
  .live-host { font-size: 12.5px; }
  .views--solo .facts { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 16px; border-top: 1px solid var(--rule); }
}

.does { padding: clamp(110px, 16vh, 180px) var(--gut) 0; }
.does-title { max-width: 14em; margin-bottom: clamp(48px, 7vh, 84px); }
.does-list { display: grid; gap: clamp(80px, 12vh, 140px); }
.does-item { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.does-text { grid-column: 1 / span 5; }
.does-item--text .does-text { grid-column: 1 / span 7; }
.does-num { color: var(--red-deep); margin-bottom: 14px; }
.does-h { margin-bottom: 14px; max-width: 16em; }
.does-body { color: var(--mute); max-width: 31em; }
.does-pic { grid-column: 7 / span 6; max-width: var(--w, none); } /* never wider than the page it shows (--w: its CSS width) */
.does-pic--phone { width: min(100%, 340px); }
@media (max-width: 899px) {
  .does-item { display: block; }
  .does-pic { margin-top: 22px; }
  .does-pic--phone { width: min(78%, 320px); }
}
@media (max-width: 699px) {
  .does { padding-top: 64px; }
  .does-title { margin-bottom: 34px; }
  .does-list { gap: 52px; }
  .does-num { margin-bottom: 8px; }
  .does-h { margin-bottom: 8px; }
  .does-pic { margin-top: 18px; }
}

.case-after { padding: clamp(120px, 18vh, 200px) var(--gut) 0; }
.case-after h2 { margin-bottom: clamp(40px, 6vh, 64px); max-width: 14em; }
@media (min-width: 900px) {
  .case-after { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .case-after h2 { grid-column: 1 / span 5; margin: 0; }
  .case-after .ticks { grid-column: 6 / span 7; }
}

.next { padding: clamp(140px, 22vh, 240px) var(--gut) clamp(120px, 18vh, 200px); }
.next-link { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; text-decoration: none; }
.next-label { grid-column: 1 / span 6; grid-row: 1; align-self: start; color: var(--red-deep); }
.next-name { grid-column: 1 / span 6; grid-row: 2; margin-top: 18px; transition: color .3s; }
.frame--next { grid-column: 7 / span 6; grid-row: 1 / span 2; }
@media (hover: hover) { .next-link:hover .next-name { color: var(--red-deep); } }

@media (max-width: 899px) {
  .next-link { display: block; }
  .next-name { display: block; margin: 14px 0 28px; }
}
@media (max-width: 699px) {
  .case-after { padding-top: 64px; }
  .case-after h2 { margin-bottom: 28px; }
  .next { padding: 72px var(--gut) 64px; }
  .next-name { margin: 10px 0 20px; }
}

/* ---------- services ---------- */
.rows-wrap { padding: clamp(40px, 6vh, 80px) var(--gut) 0; }
.rows-wrap h2 { margin-bottom: 26px; }
.rows { border-bottom: 1px solid var(--rule); }
.row { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 48px; gap: 24px; align-items: center; min-height: 128px; padding: 26px 0; text-decoration: none; border-top: 1px solid var(--rule); }
.row::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s var(--ease); }
.row:focus-visible::after { transform: scaleX(1); }
.row-line { color: var(--mute); font-size: clamp(17px, 1.3vw, 20px); max-width: 28em; }
.row-arrow { font-size: 30px; font-weight: 300; justify-self: end; transition: transform .4s var(--ease); }
.row-name { transition: transform .5s var(--ease), color .3s; }
@media (hover: hover) { .row:hover .row-name { color: var(--red-deep); transform: translateX(10px); } .row:hover .row-arrow { transform: translateX(6px); } .row:hover::after { transform: scaleX(1); } }
@media (max-width: 699px) {
  .rows-wrap { padding-top: 8px; }
  .rows-wrap h2 { margin-bottom: 16px; }
  .row { grid-template-columns: 1fr; gap: 8px; min-height: 0; padding: 22px 0 24px; }
  .row-arrow { display: none; }
}

/* the hub: how it works, and how it is paid for */
.how, .bill { padding: clamp(110px, 16vh, 180px) var(--gut) 0; }
.how-h, .bill-h { max-width: 14em; }
.how-list { margin-top: clamp(40px, 6vh, 64px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(24px, 3vw, 48px); }
.how-item { padding-top: 18px; border-top: 1px solid var(--rule); }
.how-num { display: block; color: var(--red-deep); margin-bottom: 12px; }
.how-t { margin-bottom: 10px; }
.how-l { color: var(--mute); max-width: 24em; }
.bill { padding-bottom: clamp(120px, 18vh, 200px); }
.bill-in { margin-top: clamp(28px, 4vh, 44px); display: grid; gap: 22px; max-width: 760px; }
.bill-q { color: var(--mute); }
.bill-q strong { color: var(--ink); font-weight: 600; }
@media (min-width: 900px) {
  .bill { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .bill-h { grid-column: 1 / span 5; }
  .bill-in { grid-column: 6 / span 7; margin-top: 8px; }
}
@media (max-width: 899px) { .how-list { grid-template-columns: 1fr; } }
@media (max-width: 699px) {
  .how, .bill { padding-top: 64px; }
  .how-list { margin-top: 24px; gap: 22px; }
  .how-num { margin-bottom: 6px; }
  .bill { padding-bottom: 72px; }
  .bill-in { margin-top: 20px; gap: 16px; }
}

/* a service page: what it covers, examples, questions */
.serv-points { padding: clamp(40px, 6vh, 80px) var(--gut) 0; }
.serv-points h2, .faq h2, .about-pts h2 { margin-bottom: 30px; }
.pts { display: grid; gap: clamp(22px, 3vh, 32px); max-width: 1000px; }
.pt { position: relative; max-width: 30em; padding-bottom: 16px; }
.pt::after { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 4px; border-radius: 4px; background: var(--red); }
.pt-h { margin-bottom: 6px; }
.pt-l { color: var(--mute); }
.pts-note { margin-top: clamp(28px, 4vh, 40px); max-width: 30em; font-size: 17px; padding-left: 16px; border-left: 4px solid var(--red); }
.serv-vis { padding: clamp(100px, 15vh, 170px) var(--gut) 0; }
.ex-label { margin-bottom: 26px; }
.ex { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); align-items: start; }
.ex--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ex-item { display: block; text-decoration: none; }
.ex-text { display: block; margin-top: 14px; }
.ex-name { display: block; font-size: 18px; font-weight: 500; transition: color .3s; }
.ex-line { display: block; margin-top: 4px; font-size: 16px; color: var(--mute); max-width: 26em; }
@media (hover: hover) { .ex-item:hover .ex-name { color: var(--red-deep); } }
.order-ex { display: grid; gap: 28px; }
.order-ex-text { display: grid; gap: 18px; justify-items: start; align-content: start; }
.order-ex-text .ex-label { margin-bottom: 0; text-wrap: balance; }   /* "Online ordering, built for …" wraps on a phone: two even lines, never "& Grill" alone (W6, 19 Oct 2026) */
.order-ex-line { max-width: 26em; color: var(--mute); }
.order-ex-pics { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); gap: clamp(14px, 2vw, 28px); align-items: start; }
@media (min-width: 900px) {
  /* three examples step down the page, as in round 4 */
  .ex--three { row-gap: clamp(28px, 4vh, 48px); }
  .ex--three > li:nth-child(1) { grid-area: 1 / 1; }
  .ex--three > li:nth-child(2) { grid-area: 2 / 2; }
  .ex--three > li:nth-child(3) { grid-area: 3 / 3; }
}
@media (min-width: 900px) {
  .order-ex { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .order-ex-text { grid-column: 1 / span 5; }
  .order-ex-pics { grid-column: 6 / span 7; }
}
.faq { padding: clamp(100px, 15vh, 170px) var(--gut) clamp(120px, 18vh, 200px); }
.faq-in { max-width: 820px; }
.faq .more { margin-top: 0; max-width: none; border-bottom: 0; }
.faq .more:last-child { border-bottom: 1px solid var(--rule); }
.faq .more summary { gap: 20px; padding: 14px 0; }
@media (min-width: 900px) {
  .serv-points, .faq, .about-pts { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .serv-points h2, .faq h2, .about-pts h2 { grid-column: 1 / span 4; margin: 6px 0 0; }
  .serv-points-in, .faq-in, .about-pts .pts { grid-column: 6 / span 7; }
}
@media (max-width: 899px) {
  .ex, .ex--two { grid-template-columns: 1fr; gap: 18px; }
  /* a small row each: the picture, then its name and line beside it */
  .ex-item { display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); gap: 16px; align-items: center; }
  .ex-text { margin-top: 0; }
  .ex-name { font-size: 17px; }
  .ex-line { font-size: 15px; }
}
@media (max-width: 699px) {
  .serv-points { padding-top: 8px; }
  .serv-points h2, .faq h2, .about-pts h2 { margin-bottom: 20px; }
  .pts { gap: 20px; }
  .pt { padding-bottom: 14px; }
  .pts-note { font-size: 16px; }
  .serv-vis { padding-top: 60px; }
  .ex-label { margin-bottom: 18px; }
  .faq { padding: 60px var(--gut) 72px; }
  .faq .more summary { font-size: 17px; min-height: 56px; }
}

.more { margin-top: clamp(56px, 8vh, 88px); max-width: 760px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.more summary { display: flex; align-items: center; justify-content: space-between; min-height: 64px; cursor: pointer; list-style: none; font-size: 19px; font-weight: 500; }
.more summary::-webkit-details-marker { display: none; }
.more summary > span { text-wrap: balance; }   /* the rows' titles and the questions alike: no word alone on a line (round 6) */
.more summary::after { content: ""; width: 18px; height: 18px; flex: none; background: linear-gradient(var(--ink), var(--ink)) center / 100% 2px no-repeat, linear-gradient(var(--red), var(--red)) center / 3px 100% no-repeat; transition: transform .4s var(--ease); }
.more[open] summary::after { transform: rotate(45deg); }
.more-in { padding: 0 0 22px; display: grid; gap: 16px; color: var(--mute); max-width: 40em; }
/* round 6: "More about …" after a service's points, closed by default, drawn as one more row like the questions below it */
.serv-points .more--detail summary { gap: 20px; padding: 14px 0; }
.more--detail .more-in { gap: 22px; }
.more-g { display: grid; gap: 8px; }
.more-h { font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; font-stretch: 92%; color: var(--ink); }   /* the site's small label (as "Where" on the contact page), so it never outweighs the row's own title */
.more-in a { text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (hover: hover) { .more-in a:hover { color: var(--ink); } }
@media (max-width: 699px) { .serv-points .more--detail summary { font-size: 17px; min-height: 56px; } }

/* ---------- about ---------- */
.about-mute { color: var(--mute); }
.about-pts { padding: clamp(40px, 6vh, 80px) var(--gut) 0; }
.phones-wrap { padding: clamp(110px, 16vh, 180px) var(--gut) clamp(110px, 16vh, 180px); }
.phones-head h2 { max-width: 15em; margin: 0 0 clamp(56px, 8vh, 96px); }
.phones { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(36px, 4vw, 56px) clamp(16px, 2vw, 28px); }
.phones-link { display: block; text-decoration: none; }
.frame--phone { aspect-ratio: 390 / 660; border-radius: 6px; }
.frame--phone .shot { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.phones-name { display: block; margin-top: 12px; font-size: 15px; line-height: 1.25; color: var(--mute); }
@media (hover: hover) { .phones-link:hover .phones-name { color: var(--ink); } }
.phones-more { margin-top: clamp(56px, 8vh, 88px); }
.arrow-link { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; font-size: 18px; font-weight: 500; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (max-width: 1099px) { .phones { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 699px) {
  .about-pts { padding-top: 8px; }
  .phones-wrap { padding: 64px var(--gut) 72px; }
  .phones-head h2 { margin-bottom: 28px; }
  .phones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .phones-more { margin-top: 32px; }
}

/* ---------- contact: the demo form ---------- */
.hero--contact { min-height: max(440px, min(60svh, 640px)); }
.talk { padding: clamp(40px, 6vh, 72px) var(--gut) clamp(120px, 18vh, 200px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.talk-side { grid-column: 1 / span 4; display: grid; gap: 40px; align-content: start; }
.talk-lines { display: grid; gap: 6px; }
.talk-lines .t-label { margin-top: 18px; color: var(--mute); }
.talk-big { font-size: clamp(22px, 2vw, 28px); font-weight: 300; }
.talk-form-wrap { grid-column: 6 / span 7; }
.talk-form { display: grid; gap: 30px; }
.talk-form h2 { margin-bottom: 4px; }
.form-h-in { display: inline-block; padding-bottom: 12px; background: linear-gradient(var(--red), var(--red)) left bottom / 100% 4px no-repeat; }
.field { position: relative; display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field label, .field legend { font-size: 15px; font-weight: 600; padding: 0; }
.opt { font-weight: 400; color: var(--mute); }
.field input, .field textarea {
  width: 100%; border: 0; border-bottom: 2px solid #8a8a8a; border-radius: 0; background: transparent; color: var(--ink);
  font: inherit; font-size: 22px; font-weight: 340; padding: 10px 0 12px; min-height: 52px; resize: vertical; transition: border-color .25s, background-color .25s;
}
.field textarea { min-height: 120px; line-height: 1.35; }
.site .field input:focus-visible, .site .field textarea:focus-visible { outline: none; border-bottom-color: var(--red); box-shadow: inset 0 -3px 0 var(--red); background: #fff6f7; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-bottom-color: var(--red-deep); }
/* the line under each field draws in from the left once it is filled in properly */
.field-line { position: relative; display: block; height: 3px; margin-top: -11px; border-radius: 3px; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease); pointer-events: none; }
.field.is-done .field-line { transform: scaleX(1); }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.field-hint { margin-top: -18px; font-size: 15px; color: var(--mute); }
.field-err { color: var(--red-deep); font-size: 15px; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; } /* the whole chip is the target */
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1.5px solid #9a9a9a; border-radius: 4px; font-size: 15px; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 3px; }
@media (hover: hover) { .chip:hover span { border-color: var(--ink); } }
.demo-note { font-size: 15px; padding: 14px 16px; background: var(--wash); border-left: 4px solid var(--red); }
.form-go { display: flex; align-items: center; gap: 16px; }
.talk-done { display: grid; gap: 18px; padding: 8px 0; }
.talk-done .t-label { color: var(--red-deep); }
.done-list { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; padding: 20px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.done-list dt { font-weight: 600; font-size: 15px; }
.done-list dd { color: var(--mute); overflow-wrap: anywhere; }
@media (max-width: 899px) {
  .talk { display: block; }
  .talk-side { margin-bottom: 72px; }
  .field-pair { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 699px) {
  .hero--contact { min-height: 0; }
  .talk { padding: 4px var(--gut) 72px; }
  .talk-side { gap: 24px; margin-bottom: 52px; }
  .talk-lines .t-label { margin-top: 14px; }
  .talk-form { gap: 26px; }
}

/* ---------- legal stand-ins ---------- */
.legal { padding: clamp(40px, 6vh, 72px) var(--gut) clamp(120px, 18vh, 200px); display: grid; gap: 18px; max-width: 900px; }
@media (max-width: 699px) { .legal { padding: 4px var(--gut) 72px; } }
.legal a { text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 5px; overflow-wrap: anywhere; }

/* ---------- page transitions ---------- */
::view-transition-group(*) { animation-duration: .6s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(root) { animation: vt-out .32s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-18px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(28px); } }

/* ---------- reduced motion: still, complete, everything shown ---------- */
@media (prefers-reduced-motion: reduce) {
  .site *, .site *::before, .site *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .mark-hint { display: none !important; }
}

/* Change It removed (14 Oct 2026): the headline no longer offers to be changed, so no caret, no hover rule and no room kept below it. */
.site.is-js .hl { cursor: auto; }
.site.is-js .hl-line::after { display: none; }
.ask--none { height: 0; margin-top: 0; overflow: hidden; }

/* ---------- round 6: the not-found page (both builds) ---------- */
.nf-links { display: flex; flex-wrap: wrap; gap: 0 36px; margin-top: 6px; }

/* ---------- round 6, production only (the classes below appear only in the --live build) ---------- */
/* the cookie banner (c4build/theme/consent.css, shipped unchanged beside this file) drawn in this site's ink and red */
:root { --c4-ink: var(--ink); --c4-accent: var(--red); }
/* "Cookie settings" sits where the preview's concept line was: a 44px target that keeps the line's own height */
.ftr-small .c4-cc-reopen { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
/* the real enquiry form: the honeypot (a field people never see), the privacy line in the demo note's place, and the
   send error under the button */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-small { font-size: 15px; color: var(--mute); }
.form-small a { color: var(--ink); text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.form-status { margin-top: -14px; }

/* While the line is being pulled, the page itself does not bounce or refresh (Dan, 15 Oct 2026). */
html:has(.site.is-pulling) { overscroll-behavior: none; }

/* =====================================================================================================================
   ROUND 7 (16 Oct 2026): the wow on every inner page. Nothing below touches the home page: every rule is scoped to an inner
   page's own classes, or to .site:not([data-page="home"]). Motion is transforms and opacity (and the drawing of thin SVG
   strokes); every hidden starting state lives in a keyframe or behind a class site.js adds only when motion is allowed, so
   without script, or with reduced motion, everything is still, complete and readable. Nothing moves layout.
   ===================================================================================================================== */

/* ---------- the house motion: an inner page's H1 arrives word by word, from below, clipped (quick, once), the label first ---------- */
.hero-h { position: relative; }
.hero-h .w { display: inline-block; max-width: 100%; clip-path: inset(-0.34em -0.08em -0.18em); }
.hero-h .w-i { display: inline-block; }
.h-accent { color: var(--red); }
@media (prefers-reduced-motion: no-preference) {
  .site:not([data-page="home"]) .hero-label { animation: r7-label .5s var(--ease) both; }
  .hero-h .w-i { animation: r7-word .64s cubic-bezier(.2, .8, .2, 1) both; animation-delay: 110ms; }
  .hero-h .wi-1 > .w-i { animation-delay: 158ms; } .hero-h .wi-2 > .w-i { animation-delay: 206ms; } .hero-h .wi-3 > .w-i { animation-delay: 254ms; }
  .hero-h .wi-4 > .w-i { animation-delay: 302ms; } .hero-h .wi-5 > .w-i { animation-delay: 350ms; } .hero-h .wi-6 > .w-i { animation-delay: 398ms; }
  .hero-h .wi-7 > .w-i { animation-delay: 446ms; } .hero-h .wi-8 > .w-i { animation-delay: 494ms; } .hero-h .wi-9 > .w-i { animation-delay: 542ms; }
  .hero-h .wi-10 > .w-i { animation-delay: 590ms; } .hero-h .wi-11 > .w-i { animation-delay: 638ms; } .hero-h .wi-12 > .w-i { animation-delay: 686ms; }
  .hero-h .wi-13 > .w-i { animation-delay: 734ms; } .hero-h .wi-14 > .w-i { animation-delay: 782ms; } .hero-h .wi-15 > .w-i { animation-delay: 830ms; }
  /* the words under the label of a page with no label inside the H1 (review, privacy, terms) follow the eyebrow the same way */
  .hero-lead, .hero--top .about-who, .case-lede, .review-facts { animation: r7-rise .7s var(--ease) .38s both; }
}
/* .01, not 0: the words are painted from the first frame (they are clipped and below their line), so the heading's paint is never
   held back for the largest-contentful-paint measure */
@keyframes r7-word { 0% { opacity: .01; transform: translateY(62%) scale(.84); } 45% { opacity: 1; } 72% { transform: translateY(0) scale(1.03); } 100% { opacity: 1; transform: none; } }
@keyframes r7-label { from { opacity: .01; transform: translateY(10px); } }
@keyframes r7-rise { from { opacity: .01; transform: translateY(14px); } }

/* ---------- the red line under a heading's last line (site.js measures the line and places it; it draws as it arrives) ---------- */
.r-line { position: absolute; left: 0; top: 0; width: 0; height: max(5px, .06em); border-radius: 99px; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.r-line.is-on { transform: scaleX(1); transition: transform .85s var(--ease); }
.r-line--s { height: max(4px, .055em); }
.r-line--label { height: 3px; }
h2.has-rule, h1 .hero-h { position: relative; }

/* ---------- arrivals: an .rv element rises in; a screenshot (.rv-wipe) is uncovered by a sweep with a red edge, then settles ---------- */
@media (prefers-reduced-motion: no-preference) {
  .site.is-rv .rv { transition: opacity .7s var(--ease), transform .9s var(--ease); }
  .site.is-rv .rv:not(.is-in) { opacity: 0; transform: translateY(26px); }
}
.frame.rv-wipe::after, .frame.rv-load::after {
  content: ""; position: absolute; inset: -1px; z-index: 2; pointer-events: none;
  background: var(--paper); box-shadow: inset 0 4px 0 var(--red); transform: translateY(101%);
}
@media (prefers-reduced-motion: no-preference) {
  .site.is-rv .frame.rv-wipe::after { transition: transform .95s cubic-bezier(.7, 0, .2, 1); }
  .site.is-rv .frame.rv-wipe:not(.is-in)::after { transform: none; }
  .site.is-rv .frame.rv-wipe .shot { transition: transform 1.4s var(--ease); }
  .site.is-rv .frame.rv-wipe:not(.is-in) .shot { transform: scale(1.06); }
  .ex > li:nth-child(2) .rv-wipe::after, .order-ex-pics > :nth-child(2).rv-wipe::after { transition-delay: .14s; }
  .ex > li:nth-child(3) .rv-wipe::after { transition-delay: .28s; }
  .frame.rv-load::after { animation: r7-wipe 1s cubic-bezier(.7, 0, .2, 1) .18s both; }
  .frame.rv-load--late::after { animation-delay: .34s; }
  .frame.rv-load .shot { animation: r7-settle 1.5s var(--ease) .18s both; }
}
@keyframes r7-wipe { from { transform: none; } to { transform: translateY(101%); } }
@keyframes r7-settle { from { transform: scale(1.06); } }

/* ---------- line icons (one-line style): each draws itself as its point arrives ---------- */
.ico { display: block; width: 44px; height: 44px; flex: none; overflow: visible; }
.ico path { fill: none; stroke: var(--red); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .site.is-rv .rv .ico path { stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--ease) .18s; }
  .site.is-rv .rv:not(.is-in) .ico path { stroke-dashoffset: 1; }
}
/* the points on a service page: the icon beside the words, the short red bar under the words */
.pts--ico .pt { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 22px; max-width: 36em; }
.pts--ico .pt .ico { grid-row: 1 / span 2; margin-top: -2px; }
.pts--ico .pt::after { left: 66px; }
@media (max-width: 699px) {
  .pts--ico .pt { grid-template-columns: 36px minmax(0, 1fr); column-gap: 16px; }
  .pts--ico .pt .ico { width: 36px; height: 36px; }
  .pts--ico .pt::after { left: 52px; }
}

/* ---------- touch: whatever passes the middle of the screen is lit (site.js .is-lit), never hover-only ---------- */
@media (hover: none) {
  .ex-item.is-lit .ex-name, .next-link.is-lit .next-name, .phones-link.is-lit .phones-name, .row.is-lit .row-name { color: var(--red-deep); }
  .row.is-lit::after { transform: scaleX(1); }
  .phones-link.is-lit .phones-name { color: var(--ink); }
}
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .ex-item .ex-frame .shot, .next-link .frame--next .shot { transition: transform 1.1s var(--ease); }
  .ex-item.is-lit .ex-frame .shot, .next-link.is-lit .frame--next .shot { transform: scale(1.025); }
  .row.is-lit .row-name { transform: translateX(8px); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ex-item .ex-frame .shot, .next-link .frame--next .shot { transition: transform 1.1s var(--ease); }
  .ex-item:hover .ex-frame .shot, .next-link:hover .frame--next .shot { transform: scale(1.025); }
}

/* ---------- the visuals: client screens (laptop and phone overlapping), the drawn checks, the drawn search result ---------- */
.vis { position: relative; margin: 0; }
.vis-stage { position: relative; }
.frame--vis { border-radius: 6px; }
.frame--vis .shot { width: 100%; height: auto; }
.frame--vphone { aspect-ratio: 390 / 760; border-radius: 10px; box-shadow: 0 0 0 1px rgba(17, 17, 17, .1), 0 18px 40px -18px rgba(17, 17, 17, .45); }
.frame--vphone .shot { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.vis-cap { margin-top: 12px; font-size: 14px; color: var(--mute); }
/* a laptop picture with a phone in front of its lower right corner */
.vis--pair .vis-stage { aspect-ratio: 16 / 11; }
.vis--pair .vis-desk { position: absolute; left: 0; top: 0; width: 84%; }
.vis--pair .vis-desk .frame { box-shadow: 0 0 0 1px rgba(17, 17, 17, .08), 0 24px 50px -30px rgba(17, 17, 17, .4); }
.vis--pair .vis-phone { position: absolute; right: 0; bottom: 0; width: 27%; }
.vis--deskchk .vis-chk { position: absolute; right: 0; bottom: 0; width: 50%; }
/* the three websites on Studio */
.vis--trio .vis-stage { aspect-ratio: 16 / 11; }
.vis--trio .vis-desk { position: absolute; left: 0; top: 0; width: 78%; }
.vis--trio .vis-phone { position: absolute; width: 24%; }
.vis--trio .vis-phone--a { right: 19%; bottom: 0; }
.vis--trio .vis-phone--b { right: 0; bottom: 7%; }
/* one phone (online shops) */
.vis--order .vis-stage { display: flex; justify-content: center; }
.vis--order .vis-phone--solo { width: min(52%, 250px); }
.vis--order .vis-cap { text-align: center; }
/* the drawn "checked" panel: the live site, the enquiry form, the certificate, each ticked in turn */
.chk { background: #fff; border: 1.5px solid var(--ink); border-radius: 14px; padding: 14px 20px 8px; box-shadow: 0 24px 50px -30px rgba(17, 17, 17, .35); }
.chk-top { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.mark--chk { width: 26px; height: 26px; }
.chk-bar { display: block; flex: 1; max-width: 160px; height: 8px; border-radius: 8px; background: var(--rule); }
.chk-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; font-size: clamp(16px, 1.2vw, 19px); font-weight: 450; }
.chk-row + .chk-row { border-top: 1px solid var(--rule); }
.chk-ico { width: 30px; height: 30px; flex: none; overflow: visible; }
.chk-ring, .chk-tick { fill: none; stroke: var(--red); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.vis--checks { max-width: 400px; margin: 0 auto; }
/* the drawn search result: Create 4's own title, address and description (no query, no position) */
.serp { background: #fff; border: 1.5px solid var(--ink); border-radius: 14px; padding: 16px clamp(16px, 1.6vw, 22px) 22px; box-shadow: 0 24px 50px -30px rgba(17, 17, 17, .35); }
.serp-bar { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border: 1.5px solid #c9c9c9; border-radius: 22px; }
.serp-glass { width: 20px; height: 20px; flex: none; overflow: visible; }
.serp-glass path { fill: none; stroke: var(--red); stroke-width: 4; stroke-linecap: round; }
.serp-caret { display: block; width: 2px; height: 20px; border-radius: 2px; background: var(--ink); }
.serp-res { margin-top: 18px; display: grid; gap: 8px; }
.serp-site { display: flex; align-items: center; gap: 10px; }
.mark--serp { width: 28px; height: 28px; flex: none; }
.serp-who { display: grid; line-height: 1.25; }
.serp-name { font-size: 14px; font-weight: 600; }
.serp-url { font-size: 13px; color: var(--mute); }
.serp-title { font-size: clamp(19px, 1.5vw, 23px); font-weight: 450; line-height: 1.25; letter-spacing: -.01em; }
.serp-title-t { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.serp-desc { font-size: 15px; line-height: 1.45; color: var(--mute); }
/* the drawings draw themselves: on arrival in a row (.rv), when their slide comes up in the hub's panel, or with the page (a hero) */
@media (prefers-reduced-motion: no-preference) {
  .chk-ring, .chk-tick, .serp-glass path { stroke-dasharray: 1 1; }
  .site.is-rv .rv:not(.is-in) .chk-ring, .site.is-rv .rv:not(.is-in) .chk-tick, .rows-slide:not(.is-on) .chk-ring, .rows-slide:not(.is-on) .chk-tick { stroke-dashoffset: 1; }
  .chk-ring { transition: stroke-dashoffset .6s var(--ease); }
  .chk-tick { transition: stroke-dashoffset .45s var(--ease); }
  .chk-row:nth-child(1) .chk-ring { transition-delay: .25s; } .chk-row:nth-child(1) .chk-tick { transition-delay: .7s; }
  .chk-row:nth-child(2) .chk-ring { transition-delay: .95s; } .chk-row:nth-child(2) .chk-tick { transition-delay: 1.4s; }
  .chk-row:nth-child(3) .chk-ring { transition-delay: 1.65s; } .chk-row:nth-child(3) .chk-tick { transition-delay: 2.1s; }
  .hero-vis .chk-ring, .hero-vis .chk-tick { animation: r7-draw .6s var(--ease) both; }
  .hero-vis .chk-row:nth-child(1) .chk-ring { animation-delay: .7s; } .hero-vis .chk-row:nth-child(1) .chk-tick { animation-delay: 1.15s; }
  .hero-vis .chk-row:nth-child(2) .chk-ring { animation-delay: 1.4s; } .hero-vis .chk-row:nth-child(2) .chk-tick { animation-delay: 1.85s; }
  .hero-vis .chk-row:nth-child(3) .chk-ring { animation-delay: 2.1s; } .hero-vis .chk-row:nth-child(3) .chk-tick { animation-delay: 2.55s; }
  .serp-title-t { background: linear-gradient(var(--red), var(--red)) 0 100% / 0 3px no-repeat; text-decoration-color: transparent; }
  .site.is-rv .rv.is-in .serp-title-t, .rows-slide.is-on .serp-title-t, .hero-vis .serp-title-t { animation: r7-under .9s var(--ease) .5s both; }
  .site.is-rv .rv:not(.is-in) .serp-glass path, .rows-slide:not(.is-on) .serp-glass path { stroke-dashoffset: 1; }
  .serp-glass path { transition: stroke-dashoffset .8s var(--ease) .2s; }
  .hero-vis .serp-glass path { animation: r7-draw .8s var(--ease) .5s both; }
}
@keyframes r7-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes r7-under { from { background-size: 0 3px; } to { background-size: 100% 3px; } }

/* ---------- a service page's hero: the words and, beside them (wide) or under them (phones), the screens that belong to it ---------- */
.hero-vis { margin-top: clamp(30px, 5vh, 56px); max-width: 640px; }
.hero--serv .hero-vis .vis--checks, .hero--serv .hero-vis .vis--serp { max-width: 480px; }
@media (min-width: 1100px) {
  .hero--aside .hero-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 4.5vw, 88px); align-items: center; }
  .hero--aside .hero-h { max-width: 11.5em; }
  .hero--aside .hero-vis { margin-top: 0; max-width: none; }
}
@media (max-width: 699px) {
  .hero-vis { margin-top: 28px; }
  .vis-cap { margin-top: 8px; font-size: 13px; }
  .chk { padding: 10px 14px 4px; border-radius: 12px; }
  .chk-row { padding: 9px 0; gap: 12px; }
  .chk-ico { width: 26px; height: 26px; }
  .serp { padding: 12px 14px 16px; border-radius: 12px; }
  .serp-bar { height: 38px; }
  .serp-res { margin-top: 12px; }
}

/* ---------- the services hub: five rows, each with its picture; on wide screens a sticky panel that changes as you go ---------- */
.rows-grid { position: relative; }
.row-pic { display: none; }
.rows-panel { display: none; }
@media (max-width: 1099px) {
  .row-pic { display: block; grid-column: 1 / -1; width: 100%; max-width: 560px; margin: 18px 0 6px; }
  .row-pic .vis--order .vis-phone--solo { width: min(46%, 210px); }
  .row-pic .vis--checks, .row-pic .vis--serp { max-width: 440px; margin: 0; }
}
@media (min-width: 1100px) {
  .rows-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); column-gap: clamp(48px, 5vw, 104px); align-items: start; }
  .rows .row { grid-template-columns: minmax(0, 1fr) 48px; grid-template-rows: auto auto; row-gap: 10px; min-height: 0; padding: 30px 0 32px; }
  .rows .row-name { grid-column: 1; grid-row: 1; }
  .rows .row-line { grid-column: 1; grid-row: 2; }
  .rows .row-arrow { grid-column: 2; grid-row: 1 / span 2; }
  .rows-panel { display: block; position: sticky; top: max(28px, calc(50vh - 250px)); }
  .rows-panel-in { position: relative; aspect-ratio: 1 / 1; max-height: 520px; }
  .rows-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(18px) scale(.985); pointer-events: none; transition: opacity .45s var(--ease), transform .7s var(--ease); }
  .rows-slide.is-on { opacity: 1; transform: none; }
  .rows-slide > .vis { width: 100%; }
  .rows-slide > .vis--checks { max-width: 420px; }
  .rows-slide > .vis--serp { max-width: 470px; }
  .rows-slide .vis--order .vis-phone--solo { width: min(44%, 230px); }
  .site.is-js .row.is-cur::after { transform: scaleX(1); }
  .site.is-js .row.is-cur .row-name { color: var(--red-deep); }
}

/* ---------- a line through stops: How it works (across on wide screens, down on phones), the places, the contact lines ---------- */
.run { position: relative; }
.run-line { position: absolute; pointer-events: none; background: var(--rule); border-radius: 4px; }
.run-fill { position: absolute; inset: 0; border-radius: inherit; background: var(--red); transform-origin: 0 0; }
.run-dot { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--red); border: 2.5px solid var(--red); box-shadow: 0 0 0 4px var(--paper); }
.site.is-run [data-run] .run-dot { background: var(--paper); border-color: #b5b5b5; transition: background-color .3s, border-color .3s, transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.site.is-run [data-run] .is-lit .run-dot { background: var(--red); border-color: var(--red); }
.site.is-run [data-run="scroll"] .run-fill { transform: scale(0); }
.site.is-run [data-run="arrive"] .run-fill { transform: scaleY(0); }
.site.is-run [data-run="arrive"].is-in .run-fill { transform: none; transition: transform 1.3s var(--ease); }
@media (prefers-reduced-motion: no-preference) { .site.is-run [data-run] .is-lit .run-dot { transform: scale(1.18); } }
/* How it works */
.run--how .how-item { position: relative; border-top: 0; }
.run--how .how-num { color: var(--red-deep); transition: color .3s; }
.site.is-run .run--how .how-item:not(.is-lit) .how-num { color: var(--mute); }
@media (min-width: 900px) {
  .run--how .run-line { left: 0; right: 0; top: 0; height: 3px; }
  .run--how .how-list { margin-top: clamp(40px, 6vh, 64px); }
  .run--how { margin-top: clamp(40px, 6vh, 64px); }
  .run--how .how-list { margin-top: 0; }
  .run--how .how-item { padding-top: 34px; }
  .run--how .run-dot { left: -1px; top: -5.5px; }
}
@media (max-width: 899px) {
  .run--how { margin-top: 28px; }
  .run--how .run-line { left: 5.5px; top: 8px; bottom: 6px; width: 3px; }
  .run--how .how-list { margin-top: 0; padding-left: 40px; gap: 34px; }
  .run--how .how-item { padding-top: 0; }
  .run--how .run-dot { left: -40px; top: 2px; }
}
/* the places Create 4 works, as stops on the line */
.places { padding: clamp(110px, 16vh, 180px) var(--gut) 0; }
.places-h { max-width: 13em; margin-bottom: clamp(36px, 5vh, 56px); }
.run--places .run-line { left: 5.5px; top: 12px; bottom: 44px; width: 3px; }
.places-list { display: grid; gap: clamp(14px, 2vh, 22px); padding-left: 44px; }
.place { position: relative; }
.place .run-dot { left: -44px; top: calc(.62em - 7px); }
.place-name { display: block; transition: color .3s; }
.site.is-run .run--places .place:not(.is-lit) .place-name { color: #6b6b6b; }
.places-more { margin-top: clamp(16px, 2.2vh, 24px); padding-left: 44px; color: var(--mute); font-size: clamp(17px, 1.3vw, 20px); }
@media (min-width: 900px) {
  .places { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .places-h { grid-column: 1 / span 5; position: sticky; top: 40px; }
  .places .run { grid-column: 7 / span 6; }
}
@media (max-width: 699px) { .places { padding-top: 64px; } .places-h { margin-bottom: 28px; } }
/* the contact page's lines: Ring, Email, Where, What happens next, as stops */
.run--talk { padding-left: 30px; }
.run--talk .run-line { left: 5.5px; top: 22px; bottom: 60px; width: 3px; }
.run--talk .t-label { position: relative; }
.run--talk .run-dot { left: -30px; top: 1px; }
.talk-lines.run--talk .t-label:first-of-type { margin-top: 0; }

/* ---------- About: the points as numbered panels with line icons ---------- */
.about-pts .panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(14px, 1.4vw, 22px); }
.panel { position: relative; background: var(--wash); border-radius: 6px; padding: clamp(22px, 2vw, 30px) clamp(20px, 1.8vw, 28px) clamp(26px, 2.4vw, 34px); overflow: hidden; }
.panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--red); transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) {
  .site.is-rv .panel::before { transition: transform 1s var(--ease) .2s; }
  .site.is-rv .panel:not(.is-in)::before { transform: scaleX(0); }
}
.panel-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: clamp(26px, 4vh, 44px); }
.panel-num { color: var(--red-deep); padding-top: 4px; }
.panel .ico { width: 48px; height: 48px; }
.panel-h { margin-bottom: 8px; }
.panel-l { color: var(--mute); }
@media (min-width: 900px) {
  .about-pts { display: block; }
  .about-pts h2 { margin: 0 0 30px; }
}
@media (min-width: 1200px) {
  .about-pts .panels { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; }
  .about-pts .panel:nth-child(even) { margin-top: 64px; }
}
@media (min-width: 900px) and (max-width: 1199px) { .about-pts .panels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- About: the phones strip moves sideways as you scroll down (site.js); the grid it was, with reduced motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .phones-view { overflow: clip; margin: 0 calc(-1 * var(--gut)); padding: 6px var(--gut) 10px; }
  .phones-view .phones { display: flex; width: max-content; gap: clamp(14px, 1.8vw, 28px); will-change: transform; }
  .phones-view .phones-item { width: clamp(150px, 42vw, 200px); flex: none; }
  @media (min-width: 700px) { .phones-view .phones-item { width: clamp(170px, 15vw, 236px); } }
}

/* ---------- Work on a phone: a stack you scroll through (site.js .is-stack). The cards are boxes in every mode, so turning the
   stack on never moves anything; only the sticking, the easing back and the picture's drift are added ---------- */
.card-dim { display: none; }
@media (max-width: 899px) {
  .line .card-link { position: relative; background: var(--paper); border-radius: 10px; padding: 12px 12px 18px; box-shadow: 0 0 0 1px rgba(17, 17, 17, .1); }
  .line .card-text { margin-top: 14px; padding: 0 2px; }
  .line.is-stack .line-list { gap: 26px; }
  .line.is-stack .card { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 14px + var(--k, 0) * 9px); }
  .line.is-stack .card-link { transform-origin: 50% 0; box-shadow: 0 0 0 1px rgba(17, 17, 17, .1), 0 -14px 30px -20px rgba(17, 17, 17, .45); }
  .line.is-stack .card-dim { display: block; position: absolute; inset: 0; border-radius: inherit; background: var(--paper); opacity: 0; pointer-events: none; }
  .line.is-stack .frame--card .shot { transform: translate3d(0, var(--py, 0px), 0) scale(1.08); }
}

/* ---------- the free review page ---------- */
.hero--review .hero-h, .hero--legal .hero-h { max-width: 12.5em; }
.review-facts { margin-top: clamp(22px, 3vh, 32px); display: grid; gap: 8px; }
.review-facts li { display: flex; align-items: center; gap: 12px; font-size: clamp(17px, 1.3vw, 20px); font-weight: 450; }
.ico--tick { width: 26px; height: 26px; }
.ico--tick path { stroke-width: 4; }
.review-grid { display: grid; }
.review { padding: clamp(10px, 3vh, 36px) var(--gut) clamp(120px, 18vh, 200px); }
.review-form-wrap { max-width: 640px; }
.review-vis { width: 100%; max-width: 420px; }
.mk { display: block; width: 100%; height: auto; overflow: visible; }
.mk-p { fill: none; stroke: #b4b4b4; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mk-red { fill: none; stroke: var(--red); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .mk-p, .mk-red { stroke-dasharray: 1 1; animation: r7-draw .9s var(--ease) both; }
  .mk-1 { animation-delay: .25s; } .mk-2 { animation-delay: .4s; } .mk-3 { animation-delay: .55s; } .mk-4 { animation-delay: .7s; } .mk-5 { animation-delay: .85s; }
  .mk-circle { animation-duration: .75s; animation-delay: 1.5s; }
  .mk-under { animation-duration: .5s; animation-delay: 2.1s; }
  .mk-tick { animation-duration: .45s; animation-delay: 2.5s; }
}
.review-form .field-hint { margin-top: 0; }
.review-form .req { color: var(--red-deep); font-weight: 600; }
.review-status:empty { display: none; }
.review-status { font-size: 16px; font-weight: 600; color: var(--ink); margin-top: -12px; }
.review-status.is-error { color: var(--red-deep); }
.review-status.is-ok { margin-top: 0; font-size: clamp(22px, 2.1vw, 32px); font-weight: 300; line-height: 1.25; letter-spacing: -.015em; padding-left: 18px; border-left: 4px solid var(--red); }
.review-form.is-sent > :not(.review-status) { display: none !important; }
.site .review-status:focus { outline: none; }
@media (min-width: 900px) {
  .review-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .review-main { grid-column: 1 / span 7; }
  .review-vis { grid-column: 8 / span 5; max-width: 500px; justify-self: end; position: sticky; top: 48px; margin-top: calc(var(--hdr) + clamp(70px, 14vh, 150px)); padding-right: var(--gut); box-sizing: content-box; }
}
@media (max-width: 899px) {
  .review-main { display: contents; }
  .hero--review { order: 1; }
  .review-vis { order: 2; margin: clamp(28px, 4vh, 40px) var(--gut) 0; max-width: 360px; }
  .review { order: 3; padding-top: 30px; }
}
@media (max-width: 699px) { .review-vis { max-width: 300px; margin-top: 26px; } .review { padding-top: 26px; } }

/* ---------- Privacy and Terms: a reading column, the sections beside it on wide screens, a slim red progress line ---------- */
.read-progress { display: none; position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 40; pointer-events: none; }
.site.is-read .read-progress { display: block; }
.read-progress-bar { display: block; height: 100%; background: var(--red); transform-origin: 0 50%; transform: scaleX(0); }
.legal-wrap { padding: clamp(8px, 2vh, 24px) var(--gut) clamp(120px, 18vh, 200px); }
.legal-toc { display: none; }
.legal-text { max-width: 40em; }
.legal-sec { padding-top: clamp(44px, 6vh, 68px); scroll-margin-top: 24px; }
.legal-sec:first-child { padding-top: 0; }
.legal-h { margin-bottom: 18px; max-width: 18em; }
.legal-text p, .legal-list li { font-size: clamp(18px, 1.25vw, 20px); line-height: 1.6; color: #222; }
.legal-text p + p, .legal-text p + .legal-list, .legal-list + p { margin-top: 14px; }
.lead-in { color: var(--red-deep); font-weight: 600; }
.legal-list { display: grid; gap: 10px; }
.legal-list li { position: relative; padding-left: 28px; }
.legal-list li::before { content: ""; position: absolute; left: 0; top: .8em; width: 14px; height: 3px; border-radius: 3px; background: var(--red); }
.legal-text a { text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 4px; overflow-wrap: anywhere; }
.legal-toc ol { display: grid; border-left: 2px solid var(--rule); }
.legal-toc a { display: flex; align-items: center; min-height: 40px; padding: 4px 0 4px 18px; margin-left: -2px; border-left: 3px solid transparent; text-decoration: none; font-size: 15px; line-height: 1.3; color: var(--mute); transition: color .25s, border-color .25s; }
.legal-toc a.is-current { color: var(--ink); border-left-color: var(--red); font-weight: 500; }
@media (hover: hover) { .legal-toc a:hover { color: var(--ink); } }
@media (min-width: 1100px) {
  .legal-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .legal-toc { display: block; grid-column: 1 / span 3; position: sticky; top: 36px; }
  .legal-text { grid-column: 5 / span 8; }
}
@media (max-width: 699px) { .legal-wrap { padding-top: 4px; padding-bottom: 72px; } .legal-sec { padding-top: 44px; } }
.frame--vfit { aspect-ratio: auto; }
.frame--vfit .shot { height: auto; }
.vis--pair .vis-cap, .vis--trio .vis-cap { margin-top: 30px; }
.hero-words .hero-lead, .hero-words .about-who { margin-top: clamp(28px, 3.6vh, 42px); }
@media (max-width: 699px) { .hero-words .hero-lead, .hero-words .about-who { margin-top: 22px; } .vis--pair .vis-cap, .vis--trio .vis-cap { margin-top: 22px; } }
/* a feature page on the phone (the order page) is shorter than a phone's first screen: shown a little larger */
.vis--pairfeat .vis-phone { width: 32%; }
@media (max-width: 699px) {
  .vis--deskchk .vis-stage { aspect-ratio: 16 / 12.5; }
  .vis--deskchk .vis-chk { width: 64%; }
  .vis--deskchk .chk-row { font-size: 15px; padding: 7px 0; gap: 10px; }
  .vis--deskchk .chk-ico { width: 22px; height: 22px; }
  .vis--deskchk .chk-top { padding-bottom: 8px; }
  .vis--deskchk .mark--chk { width: 22px; height: 22px; }
}
.legal-text .legal-contact a { display: inline-flex; align-items: center; min-height: 44px; }

/* Meld (18 Oct 2026): a case page with two groups of features (its Hub, then the site). The Hub's group has a line under its
   heading; the heading's own gap is shared with that line. */
.does--lead .does-title { margin-bottom: 18px; }
.does-lead { color: var(--mute); max-width: 30em; margin-bottom: clamp(48px, 7vh, 84px); }
@media (max-width: 699px) {
  .does--lead .does-title { margin-bottom: 12px; }
  .does-lead { margin-bottom: 34px; }
}

/* ---------- the call-back page (21 Oct 2026; affiliate-scheme/BUILD-SPEC.md): pick a day, then a time, then say who to ring ---------- */
/* A shorter opening than the contact page's, so the days and the first times share the first screen of a laptop. */
@media (min-width: 700px) { .hero--cb { min-height: max(340px, min(44svh, 460px)); padding-bottom: clamp(36px, 5vh, 56px); } }
@media (max-width: 899px) { .talk--cb .talk-side { margin-bottom: 44px; } }
@media (max-width: 699px) { .talk--cb .talk-side { margin-bottom: 30px; } }
.cb-nojs { display: none; }
.cb-pick { display: grid; gap: 26px; }
/* The days: one row that scrolls inside itself (a phone sees the next day cut by the screen's edge, so it reads as more), never the
   page. The padding is room for the focus ring, which an overflowing box would otherwise clip. */
.cb-days-row { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin;
  margin: -6px -6px 0; padding: 6px 6px 8px; scroll-padding-inline: 6px; }
@media (max-width: 899px) { .cb-days-row { margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scroll-padding-inline: var(--gut); } }
/* The times: a fixed number of columns, so site.js knows how many rows the busiest day needs and holds that height (--cb-rows):
   changing day never moves the fields below. */
.cb-times-grid { --cb-rows: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-content: start;
  min-height: calc(var(--cb-rows) * 48px + (var(--cb-rows) - 1) * 8px); }
@media (min-width: 700px) { .cb-times-grid { --cb-rows: 2; grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* A chip is a label round its radio, as on the contact form; the whole chip is the target, checked is ink, focus is the red ring. */
.cb-chip { position: relative; display: block; flex: none; scroll-snap-align: start; }
.cb-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.cb-chip-in { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 8px; border: 1.5px solid #9a9a9a; border-radius: 4px;
  font-size: 17px; font-weight: 450; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.cb-chip--day .cb-chip-in { flex-direction: column; gap: 3px; width: 64px; height: 68px; padding: 0; }
.cb-dow { font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .1em; text-transform: uppercase; font-stretch: 92%; }
.cb-dnum { font-size: 24px; font-weight: 300; line-height: 1; }
.cb-chip input:checked + .cb-chip-in { background: var(--ink); border-color: var(--ink); color: #fff; }
.cb-chip input:focus-visible + .cb-chip-in { outline: 3px solid var(--red); outline-offset: 3px; }
@media (hover: hover) { .cb-chip:hover .cb-chip-in { border-color: var(--ink); } }
/* the room the chips will take, while the times are on their way */
.cb-ghost { display: block; height: 48px; border-radius: 4px; background: var(--wash); }
.cb-ghost--day { flex: none; width: 64px; height: 68px; }
@media (prefers-reduced-motion: no-preference) { .cb-pick[aria-busy="true"] .cb-ghost { animation: cb-wait 1.2s ease-in-out infinite alternate; } }
@keyframes cb-wait { to { opacity: .4; } }
.cb-pick-msg { display: grid; gap: 14px; }
.cb-form .field-hint { margin-top: 0; }
.cb-chosen { display: grid; gap: 4px; margin-bottom: -12px; font-size: 18px; font-weight: 500; }
.cb-chosen .t-label { color: var(--mute); }
/* booked, nothing free, and the link from the email (manage mode) */
.cb-label { display: block; margin-bottom: 14px; color: var(--red-deep); }
.cb-done .t-xl, .cb-m-h { max-width: 14em; }
.cb-none, .cb-manage { display: grid; gap: 22px; align-content: start; }
/* Manage mode and "no times": the side line is about picking a time, so it steps aside and the panel takes the column under the
   heading (site.js sets the class; without script, NOSCRIPT_R7 in build.mjs does the same). */
.talk--cb.is-manage .talk-side, .talk--cb.is-none .talk-side { display: none; }
@media (min-width: 900px) { .talk--cb.is-manage .talk-form-wrap, .talk--cb.is-none .talk-form-wrap { grid-column: 1 / span 8; } }
.cb-do { display: flex; flex-wrap: wrap; gap: 12px; }
.cb-m-confirm { display: grid; gap: 18px; padding-top: 24px; border-top: 1px solid var(--rule); }
.cb-move { padding-top: 24px; border-top: 1px solid var(--rule); }
.site .cb-m-h:focus, .site .cb-m-confirm .t-l:focus, .site .cb-none:focus { outline: none; }
.cb-wrap a:not(.btn), .talk-cb a { text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (max-width: 699px) { .cb-do .btn { flex: 1 1 auto; } }
/* the contact page's one line to it, under the phone number: quiet, but a full-size target */
.talk-cb { margin-top: -4px; font-size: 16px; color: var(--mute); }
.talk-cb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 500; }

/* ---------- production: the pages' per-element values (build.mjs liftStyles) ---------- */
.st-08ed2cca { --w: 520px; }
.st-0b556c34 { --a: 1.8848; }
.st-0d42799c { view-transition-name: shot-plantationbarandgrill; }
.st-10410585 { --a: 0.4621; }
.st-1ccf6016 { view-transition-name: shot-blindingblinds; }
.st-20ae3775 { view-transition-name: shot-amd; }
.st-2c5ecb93 { --a: 1.7349; }
.st-34016d32 { --w: 1240px; }
.st-34fa47ec { view-transition-name: shot-a1drainage; }
.st-3565d9dc { --a: 1.9407; }
.st-37091b71 { --w: 1110px; }
.st-3ec0bf8f { view-transition-name: shot-ckminitravel; }
.st-41d89269 { --a: 1.9890; }
.st-491c0124 { --w: 1105px; }
.st-5115051b { --a: 1.6000; }
.st-517ed2c7 { --a: 2.0749; }
.st-549c275b { --w: 1140px; }
.st-55bc88a2 { --w: 889px; }
.st-5918c5e3 { --a: 1.3091; }
.st-65d3d6df { --a: 1.8462; }
.st-7e695150 { --a: 1.6744; }
.st-7e9b3fba { --w: 1400px; }
.st-803f87a4 { --a: 1.9945; }
.st-86f906df { --w: 390px; }
.st-8f0bf4c9 { view-transition-name: shot-phprofiles; }
.st-8f94cb28 { --w: 1128px; }
.st-9035e72b { --w: 1080px; }
.st-94a9fd39 { view-transition-name: shot-aposs; }
.st-96606270 { --a: 2.2291; }
.st-96d0e94e { --w: 1260px; }
.st-98966c78 { --w: 1100px; }
.st-9f74b187 { --w: 660px; }
.st-aa71bcea { view-transition-name: shot-facelabcheshire; }
.st-ab844b66 { view-transition-name: shot-zisgarage; }
.st-ae8fe3f3 { --a: 0.6522; }
.st-b3bde284 { view-transition-name: shot-martynwedgeadi; }
.st-c0fa02c8 { --a: 0.5556; }
.st-c2263f3c { view-transition-name: shot-chassisandcabspecialists; }
.st-ca21b354 { --w: 670px; }
.st-cae25e7e { --w: 887px; }
.st-d206684c { --w: 800px; }
.st-d53c4c22 { --w: 595px; }
.st-e356e152 { view-transition-name: shot-bryncommunityclub; }
.st-e9d0261c { --w: 558px; }
.st-f8928944 { --w: 1120px; }
.st-f90fdfd6 { view-transition-name: shot-meld; }
.st-fde70483 { --w: 1440px; }