/*
 * CentriWeb finishing layer (15 Nov 2026). Loaded last, on every page.
 *
 * Direction (unslop pass, Jerald: "luxury, no AI slop"):
 *   Character   composed, exact, quietly confident.
 *   World       a well-run front office after hours: night navy, lamp light, white paper, glass.
 *   Moments     two, and only two: the live card stack in the home hero and the sample call on dark glass.
 *   Signature   the blue ring: one blue outline or dot marks the thing that is happening now.
 *
 * What this sheet does:
 *   1. One typeface for the whole site (Switzer), tight on display sizes, never on small text.
 *   2. Quiet chrome: one neutral ramp, one blue, hairlines, soft neutral shadows. Cards are plain raised
 *      surfaces. Glass is kept for things that really float over content: the bar, the menus, the booking
 *      window, and the dark panels on the night sections.
 *   3. Motion with a reason: a short fade and rise as content arrives, a cross-fade between pages, the
 *      call that plays, the figures that draw once. No pointer effects, no parallax, no loops for show.
 *   4. Two home sections: .cw-out (what a system has to earn) and .cw-voice (a sample call).
 *
 * Kept from earlier reviews: no numerals as labels, no mono type, no all-caps tracked labels, no purple,
 * sections full width with straight edges, rounded corners only on cards and buttons.
 * Spacing in this file sits on a 4px grid.
 */

:root {
  --cw-display: "Switzer", "Helvetica Neue", Helvetica, Arial, sans-serif; /* one family for the whole site */
  --cw-page: #F5F5F2; --cw-sand: #ECEBE6;
  --cw-ink: #09090B; --cw-body: #4A4C53; --cw-muted: #696B72; --cw-line: rgba(9,9,11,.10);
  --cw-night: #05070D; --cw-night-2: #0A0E18;
  --cw-sec: clamp(72px, 7.6vw, 128px);
  --cw-fs-h2: clamp(36px, 4.4vw, 68px);
  --lx-ease: cubic-bezier(.16, 1, .3, 1);
  --lx-blur: saturate(180%) blur(24px);
  /* raised surface on the light page */
  --lx-card: #fff;
  --lx-card-line: rgba(9,9,11,.07);
  --lx-card-sh: 0 1px 2px rgba(9,9,11,.04), 0 12px 32px -20px rgba(9,9,11,.20);
  --lx-card-sh-up: 0 1px 2px rgba(9,9,11,.05), 0 24px 48px -24px rgba(9,9,11,.28);
  /* raised surface on night */
  --lx-night-card: linear-gradient(180deg, #0B0F1A, #06080F);
  --lx-night-line: rgba(255,255,255,.09);
  /* dark glass: only over the lamp light of a night section */
  --lx-d: rgba(255,255,255,.06);
  --lx-d-line: rgba(255,255,255,.12);
  --lx-d-sh: inset 0 1px 0 rgba(255,255,255,.12), 0 32px 64px -40px rgba(0,0,0,.9);
  /* lamp light: the one soft light on a night section, as in the home hero */
  --lx-lamp: radial-gradient(760px 620px at 80% 42%, rgba(47,127,212,.16), rgba(47,127,212,0) 70%);
}

/* ───────── Type ───────── */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
h1, h2 { letter-spacing: -0.035em; }
h3, h4, h5 { letter-spacing: -0.02em; }
.cw-head h2, .cw-vg-head h2, .cw-ov h2, .cw-cta h2 { line-height: 1; }
.cw-head h2 span, h2 span, .cw-soft { color: #8C8E96; }
.cw-night h2 span, .cw-dark h2 span, .cw-cta h2 span, .cw-ov h2 span, .cw-voice h2 span { color: rgba(255,255,255,.46); }
.cw-hero--live h1 { letter-spacing: -.04em; line-height: .96; }
/* small text is never tightened */
.cw-btn, .cw-link, .cw-idx, .cw-nav > a, .cw-nav > button, .cw-chip, .cw-pill, .cw-mark { letter-spacing: 0; }
.cw-mark { letter-spacing: -0.01em; }
.cw-nums b, .cw-ov-mtime, .cw-v-amt, .cw-v-big { font-variant-numeric: lining-nums tabular-nums; }
::selection { background: #2F7FD4; color: #fff; }

/* ───────── Motion: arrive once, then hold ───────── */
.cw-js .cw-rv { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity .8s var(--lx-ease), transform .9s var(--lx-ease); transition-delay: calc(var(--lx-i, 0) * 70ms); }
.cw-js .cw-rv.cw-in { opacity: 1; transform: none; }
.cw-js .cw-rv[style*="--lx-i"]:nth-child(n) { transition-delay: calc(var(--lx-i, 0) * 70ms); }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: lx-vt-out .2s ease-in both; }
::view-transition-new(root) { animation: lx-vt-in .5s var(--lx-ease) both; }
@keyframes lx-vt-out { to { opacity: 0; } }
@keyframes lx-vt-in { from { opacity: 0; transform: translateY(8px); } }
.cw-header { view-transition-name: cw-header; }
::view-transition-group(cw-header) { animation-duration: .01s; }

/* ───────── Header: the one glass bar ───────── */
.cw-bar { background: rgba(10,14,24,.4); border-color: rgba(255,255,255,.10); -webkit-backdrop-filter: var(--lx-blur); backdrop-filter: var(--lx-blur); }
.cw-header.cw-solid .cw-bar, .cw-header.cw-menu-open .cw-bar { background: rgba(255,255,255,.76); border-color: rgba(9,9,11,.06); box-shadow: 0 1px 2px rgba(9,9,11,.04), 0 16px 40px -28px rgba(9,9,11,.32); }
.cw-mega { background: rgba(255,255,255,.9); -webkit-backdrop-filter: var(--lx-blur); backdrop-filter: var(--lx-blur); border: 1px solid rgba(9,9,11,.06); box-shadow: 0 1px 2px rgba(9,9,11,.04), 0 40px 80px -40px rgba(9,9,11,.4); transition: opacity .3s var(--lx-ease), transform .4s var(--lx-ease), visibility .3s; }
.cw-mega.cw-on { transition: opacity .3s var(--lx-ease), transform .4s var(--lx-ease), visibility 0s; }
.cw-scrim { background: rgba(5,7,13,.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* ───────── Buttons: flat, one blue, neutral shadow ───────── */
.cw-btn { transition: background-color .3s var(--lx-ease), color .3s var(--lx-ease), box-shadow .3s var(--lx-ease), transform .3s var(--lx-ease); }
.cw-btn-blue { background: #2A75C6; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 20px -12px rgba(9,9,11,.5); }
.cw-btn-blue:hover { background: #1F64B0; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 12px 24px -12px rgba(9,9,11,.55); }
.cw-btn:active { transform: scale(.985); }
.cw-btn-ink { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 20px -12px rgba(9,9,11,.5); }
.cw-btn-white { box-shadow: 0 8px 20px -12px rgba(0,0,0,.5); }
.cw-btn:hover i { transform: translateX(2px); }
.cw-btn-ghost { background: var(--lx-d); border-color: var(--lx-d-line); -webkit-backdrop-filter: var(--lx-blur); backdrop-filter: var(--lx-blur); }

/* ───────── Night sections: one lamp, nothing else ───────── */
.cw-hero.cw-hero--live, .cw-ov, .cw-cta.cw-cta--glow, .cw-voice, .cw-footer { background-color: var(--cw-night); }
.cw-hero.cw-hero--live::before { background: var(--lx-lamp); }
.cw-hl-kicker { color: rgba(255,255,255,.6); }
.cw-hl-intro { color: rgba(255,255,255,.74); }
/* "I run a ..." choices: small rounded controls, not pills */
.cw-hl-biz button { border-radius: 10px; padding: 10px 14px; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); transition: background-color .3s var(--lx-ease), color .3s var(--lx-ease), border-color .3s var(--lx-ease); }
.cw-hl-card { transition: transform .7s var(--lx-ease), filter .7s var(--lx-ease), box-shadow .7s var(--lx-ease); }
/* the signature: one blue ring on the card that is live */
.cw-hl-card.cw-live { box-shadow: 0 0 0 2px #2F7FD4, 0 48px 96px -32px rgba(0,0,0,.8); }
.cw-hl-bar { background: rgba(255,255,255,.14); }
.cw-hl-now b { font-weight: 500; }

/* Interface samples: a quiet "Example" word, not a capital-letter pill */
.cw-v-head em { text-transform: none; letter-spacing: 0; border: 0; padding: 0; font-size: 12px; color: #9A9CA3; }
.cw-v { border-color: rgba(9,9,11,.07); box-shadow: 0 1px 2px rgba(9,9,11,.05), 0 24px 48px -28px rgba(9,9,11,.34); }

/* ───────── Light sections: plain raised cards ───────── */
.cw-marquee { border-bottom: 1px solid var(--cw-line); }
.cw-nums { border-top-color: var(--cw-line); }
.cw-vg-grid { gap: 16px; }
.cw-vg-card { border-radius: 24px; background: var(--lx-card); border: 1px solid var(--lx-card-line); box-shadow: var(--lx-card-sh); transition: transform .5s var(--lx-ease), box-shadow .5s var(--lx-ease), border-color .5s var(--lx-ease); }
a.cw-vg-card:hover { transform: translateY(-2px); box-shadow: var(--lx-card-sh-up); }
.cw-vg-card p { color: var(--cw-body); }
.cw-vg-dark { background: var(--lx-night-card); border-color: var(--lx-night-line); box-shadow: 0 24px 48px -32px rgba(5,7,13,.6); }
.cw-vg-dark p { color: rgba(255,255,255,.72); }
a.cw-vg-dark:hover { box-shadow: 0 32px 56px -32px rgba(5,7,13,.7); }
a.cw-vg-card:hover .cw-vg-v { transform: none; }

.cw-partner { background: var(--lx-card); border: 1px solid var(--lx-card-line); box-shadow: var(--lx-card-sh); border-radius: 16px; transition: transform .5s var(--lx-ease), box-shadow .5s var(--lx-ease); }
a.cw-partner:hover { transform: translateY(-2px); box-shadow: var(--lx-card-sh-up); }

.cw-step, .cw-feat, .cw-pga-col, .cw-pgl-group { background: var(--lx-card); border: 1px solid var(--lx-card-line); box-shadow: var(--lx-card-sh); border-radius: 20px; }
.cw-feat { transition: transform .5s var(--lx-ease), box-shadow .5s var(--lx-ease); }
a.cw-feat:hover { transform: translateY(-2px); box-shadow: var(--lx-card-sh-up); }
.cw-night .cw-feat, .cw-dark .cw-feat, .cw-night .cw-pga-col { background: var(--lx-night-card); border-color: var(--lx-night-line); box-shadow: none; }
.cw-ixp-app { box-shadow: var(--lx-card-sh-up); border: 1px solid var(--lx-card-line); border-radius: 24px; }

.cw-ind { border-radius: 20px; transition: transform .5s var(--lx-ease), box-shadow .5s var(--lx-ease); }
.cw-ind.cw-ind--type:not(.cw-ind--dark) { background: var(--lx-card); border: 1px solid var(--lx-card-line); box-shadow: var(--lx-card-sh); }
.cw-ind.cw-ind--dark { background: var(--lx-night-card); border: 1px solid var(--lx-night-line); }
a.cw-ind:hover { transform: translateY(-2px); }
.cw-track-nav button { background: var(--lx-card); border-color: var(--lx-card-line); }

.cw-cover { border-radius: 20px; }
.cw-cover.cw-cover--night { background: var(--lx-night-card); }
.cw-post:hover .cw-cover-v { transform: translateY(-2px); }

.cw-faq details { border-color: var(--cw-line); }
.cw-faq summary { padding: 28px 0; }

/* ───────── Night panels: dark glass over the lamp ───────── */
.cw-ov { position: relative; isolation: isolate; background-image: var(--lx-lamp); }
.cw-ov-canvas { position: relative; z-index: 1; }
.cw-ov-morning { background: var(--lx-d); border: 1px solid var(--lx-d-line); box-shadow: var(--lx-d-sh); -webkit-backdrop-filter: var(--lx-blur); backdrop-filter: var(--lx-blur); color: #fff; border-radius: 20px; }
.cw-ov-morning .cw-ov-mlabel { color: rgba(255,255,255,.6); }
.cw-ov-morning .cw-ov-mtime { color: #fff; }
.cw-ov-morning .cw-ov-mtext { color: rgba(255,255,255,.74); }
.cw-cta.cw-cta--glow { position: relative; isolation: isolate; background-image: var(--lx-lamp); }
.cw-cta .cw-cta-in, .cw-cta .cw-cta-meta { position: relative; z-index: 1; }
.cw-glass { background: var(--lx-d); border: 1px solid var(--lx-d-line); box-shadow: var(--lx-d-sh); -webkit-backdrop-filter: var(--lx-blur); backdrop-filter: var(--lx-blur); border-radius: 20px; }

/* ───────── Inner pages ───────── */
.cw-vpanel--dark, .cw-phero--glow, .cw-phero--split .cw-vpanel--dark { background-image: var(--lx-lamp); background-color: var(--cw-night); }
.cw-vpanel--light { background: var(--cw-sand); }
.cw-bk { background: rgba(5,7,13,.5); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
.cw-bk-card { border-radius: 24px; box-shadow: 0 48px 96px -40px rgba(0,0,0,.6); transition: transform .5s var(--lx-ease); }

/* ═════════ What it does for you (widgets/class-cw-outcomes-widget.php) ═════════ */
.cw-out-head { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: end; margin-bottom: clamp(40px, 4.6vw, 64px); }
.cw-out-head h2 { margin-top: 20px; font-size: var(--cw-fs-h2); line-height: 1; }
.cw-out-head h2 span { display: block; }
.cw-out-head p { justify-self: end; max-width: 30em; font-size: 17px; line-height: 1.6; color: var(--cw-body); }
.cw-out-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cw-out-card { --fg-a: rgba(9,9,11,.18); --fg-b: var(--cw-blue); --fg-c: var(--cw-ink); --fg-track: rgba(9,9,11,.08); --fg-page: var(--cw-page);
  position: relative; display: flex; flex-direction: column; padding: 12px; border-radius: 24px; background: var(--lx-card); border: 1px solid var(--lx-card-line); box-shadow: var(--lx-card-sh); color: var(--cw-ink); transition: transform .5s var(--lx-ease), box-shadow .5s var(--lx-ease); }
a.cw-out-card:hover { transform: translateY(-2px); box-shadow: var(--lx-card-sh-up); }
.cw-out-card.cw-out--dark { --fg-a: rgba(255,255,255,.3); --fg-c: #fff; --fg-track: rgba(255,255,255,.1); --fg-page: #10141F; background: var(--lx-night-card); border-color: var(--lx-night-line); box-shadow: 0 24px 48px -32px rgba(5,7,13,.6); color: #fff; }
/* the chart sits in its own panel: 12px in from a 24px card, so a 12px corner */
.cw-out-fig { flex: none; display: flex; min-height: 280px; padding: 20px; border-radius: 12px; background: var(--fg-page); }
.cw-out-body { flex: 1; display: flex; flex-direction: column; padding: 28px 20px 20px; }
.cw-out-k { font: 500 14px/1 var(--cw-sans); color: var(--cw-blue); }
.cw-out--dark .cw-out-k { color: var(--cw-blue-soft); }
.cw-out-card h3 { margin-top: 12px; font: 500 clamp(26px, 2.3vw, 32px)/1.06 var(--cw-display); letter-spacing: -.035em; color: inherit; }
.cw-out-body > p { margin: 12px 0 24px; font-size: 15px; line-height: 1.55; color: var(--cw-body); max-width: 36ch; }
.cw-out--dark .cw-out-body > p { color: rgba(255,255,255,.72); }
.cw-out-list { list-style: none; margin: auto 0 0; padding: 20px 0 0; border-top: 1px solid var(--cw-line); display: grid; gap: 12px; font-size: 15px; line-height: 1.4; color: var(--cw-ink); }
.cw-out--dark .cw-out-list { border-top-color: rgba(255,255,255,.12); color: rgba(255,255,255,.9); }
.cw-out-list li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; }
.cw-out-list li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; margin-top: 1px; background: var(--cw-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.2 9.3 7.9 12l5-5.6' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.cw-out-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font: 500 15px/1.2 var(--cw-sans); color: var(--cw-blue); }
.cw-out--dark .cw-out-go { color: var(--cw-blue-soft); }
.cw-out-go i { font-style: normal; transition: transform .4s var(--lx-ease); }
a.cw-out-card:hover .cw-out-go i { transform: translateX(4px); }
/* the line and button under the cards */
.cw-out-ask { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 16px; padding: 20px 20px 20px 32px; border-radius: 20px; background: var(--lx-card); border: 1px solid var(--lx-card-line); box-shadow: var(--lx-card-sh); }
.cw-out-ask p { margin: 0; max-width: 46em; font: 500 clamp(17px, 1.4vw, 20px)/1.35 var(--cw-display); letter-spacing: -.015em; color: var(--cw-ink); }
.cw-out-ask .cw-btn { flex: none; }
.cw-out-note { margin-top: 16px; font-size: 13px; color: var(--cw-muted); }

/* Charts: a title, the drawing, a key. Three colours with one meaning each: a = today, b = done for you, c = yours. */
.cw-fg { width: 100%; display: flex; flex-direction: column; font: 500 13px/1.25 var(--cw-sans); color: var(--fg-c); }
.cw-fg p { margin: 0; max-width: none; }
.cw-fg .cw-fg-top { font: 600 13px/1.2 var(--cw-sans); color: var(--fg-c); }
.cw-fg .cw-fg-key { display: flex; flex-wrap: wrap; gap: 4px 16px; font: 500 12px/1.2 var(--cw-sans); color: var(--cw-muted); }
.cw-out--dark .cw-fg-key { color: rgba(255,255,255,.62); }
.cw-fg-key span { display: inline-flex; align-items: center; gap: 6px; }
.cw-fg-key span::before { content: ""; width: 8px; height: 8px; border-radius: 2px; }
.cw-fg-key .cw-fg-a::before { background: var(--fg-a); }
.cw-fg-key .cw-fg-b::before { background: var(--fg-b); }
.cw-fg-key .cw-fg-c::before { background: var(--fg-c); }
/* a week of admin */
.cw-wk { display: grid; grid-template-columns: minmax(72px, auto) repeat(5, minmax(0, 1fr)); gap: 6px; align-items: center; margin-block: auto; padding-block: 16px; }
.cw-wk em { font: 500 12px/1 var(--cw-sans); color: var(--cw-muted); text-align: center; }
.cw-wk span { padding-right: 8px; white-space: nowrap; }
.cw-wk i { height: 22px; border-radius: 6px; background: var(--fg-track); transition: background-color .6s var(--lx-ease); transition-delay: calc(.3s + var(--n, 0) * 70ms); }
.cw-wk i.cw-fg-b { background: var(--fg-b); }
.cw-wk i.cw-fg-c { background: var(--fg-c); }
.cw-js .cw-out-card:not(.cw-in) .cw-wk i { background: var(--fg-track); }
/* from enquiry to paid work */
.cw-fn { display: grid; grid-template-columns: minmax(72px, auto) minmax(0, 1fr); gap: 16px 8px; align-items: center; margin-block: auto; padding-block: 16px; }
.cw-fn div { display: grid; gap: 4px; }
.cw-fn i { height: 10px; border-radius: 5px; width: var(--w); transform-origin: 0 50%; transition: transform 1.1s var(--lx-ease); transition-delay: calc(.3s + var(--n, 0) * .14s); }
.cw-fn .cw-fg-a { background: var(--fg-a); }
.cw-fn .cw-fg-b { background: var(--fg-b); }
.cw-js .cw-out-card:not(.cw-in) .cw-fn i { transform: scaleX(0); }
/* one customer, more than one job */
.cw-lp { display: grid; grid-template-columns: minmax(0, 1fr) 148px minmax(0, 1fr); grid-template-rows: auto 148px auto; gap: 8px 12px; align-items: center; justify-items: center; margin-block: auto; padding-block: 12px; }
.cw-lp svg { grid-area: 2 / 2; width: 148px; height: 148px; overflow: visible; }
.cw-lp-0 { grid-area: 1 / 2; white-space: nowrap; }
.cw-lp-2 { grid-area: 3 / 2; white-space: nowrap; }
.cw-lp-1 { grid-area: 2 / 3; justify-self: start; }
.cw-lp-3 { grid-area: 2 / 1; justify-self: end; text-align: right; }
.cw-lp-track { stroke: var(--fg-track); }
.cw-lp-arc, .cw-lp-head { stroke: var(--fg-b); }
.cw-lp-dot { stroke: var(--fg-page); stroke-width: 3; }
.cw-lp-dot.cw-fg-b { fill: var(--fg-b); }
.cw-lp-dot.cw-fg-c, .cw-lp-face { fill: var(--fg-c); }
.cw-lp-skin { fill: var(--fg-page); }
.cw-lp-arc { stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset .6s var(--lx-ease); transition-delay: calc(.4s + var(--n, 0) * .5s); }
.cw-lp-head { transition: opacity .3s linear; transition-delay: calc(.9s + var(--n, 0) * .5s); }
.cw-js .cw-out-card:not(.cw-in) .cw-lp-arc { stroke-dashoffset: 100; }
.cw-js .cw-out-card:not(.cw-in) .cw-lp-head { opacity: 0; }

/* ═════════ A short prompt to book a call, mid-page (widgets/class-cw-callout-widget.php) ═════════ */
.cw-callout { padding-block: 0 var(--cw-sec); }
.cw-co { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: center; padding: clamp(28px, 3.4vw, 48px); border-radius: 24px; background: var(--lx-card); border: 1px solid var(--lx-card-line); box-shadow: var(--lx-card-sh); }
.cw-co h2 { font: 500 clamp(26px, 2.6vw, 38px)/1.08 var(--cw-display); letter-spacing: -.035em; color: var(--cw-ink); max-width: 22ch; }
.cw-co p { margin: 16px 0 0; max-width: 46em; font-size: 17px; line-height: 1.6; color: var(--cw-body); }
.cw-co-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 20px 0 0; padding: 0; font: 500 13px/1.2 var(--cw-sans); color: var(--cw-muted); }
.cw-co-meta li { display: inline-flex; align-items: center; gap: 8px; }
.cw-co-meta li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cw-blue); }
.cw-co-act { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.cw-co-act .cw-btn { height: 56px; padding-inline: 28px; font-size: 16px; }

/* ═════════ Process: four steps in one row on a wide screen (widgets/class-cw-process-widget.php) ═════════ */
.cw-step:nth-child(even):not(:last-child) { background: var(--lx-card); }
.cw-step > span { color: var(--cw-blue); }
.cw-step:last-child > span { color: var(--cw-blue-soft); }
@media (min-width: 1101px) {
  .cw-proc-top { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cw-proc-top > .cw-idx { margin-bottom: 20px; }
  .cw-proc-head { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: end; margin-bottom: clamp(40px, 4.6vw, 64px); }
  .cw-proc-head .cw-proc-intro { margin: 0; justify-self: end; max-width: 30em; }
  /* one row whatever the number of steps: industry pages have five */
  .cw-steps { grid-column: 1; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; }
  .cw-step { position: relative; top: auto; display: flex; flex-direction: column; gap: 0; padding: 28px; min-height: 0; }
  .cw-step > span { display: flex; align-items: center; gap: 12px; padding-top: 0; }
  .cw-step > span::after { content: ""; flex: 1; height: 1px; background: rgba(9,9,11,.14); }
  .cw-step:last-child > span::after { background: rgba(255,255,255,.16); }
  .cw-step h3 { margin-top: 48px; font-size: clamp(24px, 2vw, 30px); }
  .cw-step > div { flex: 1; display: flex; flex-direction: column; margin-top: 12px; }
  .cw-step p { font-size: 15px; line-height: 1.55; max-width: none; }
  .cw-step ul { margin-top: auto; padding-top: 20px; }
}

/* ═════════ The problem: three plain cards instead of loose columns (widgets/class-cw-pg-problem-widget.php) ═════════ */
.cw-pgp-list { gap: 16px; }
.cw-pgp-item { padding: 28px; border-top: 0; border-radius: 20px; background: var(--cw-page); border: 1px solid var(--lx-card-line); }
.cw-pgp:not(.cw-pgp--white) .cw-pgp-item { background: var(--lx-card); box-shadow: var(--lx-card-sh); }

/* ═════════ Footer: the columns, then the legal line. No wordmark. ═════════ */
.cw-legal { margin-top: clamp(48px, 5.6vw, 80px); }

/* ═════════ New: a sample call (widgets/class-cw-voice-widget.php) ═════════ */
.cw-voice { position: relative; isolation: isolate; overflow: hidden; color: #fff; background-image: var(--lx-lamp); padding-block: var(--cw-sec); }
.cw-voice-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(40px, 6vw, 96px); align-items: center; }
.cw-voice .cw-idx { color: var(--cw-blue-soft); }
.cw-voice h2 { margin-top: 22px; color: #fff; font-size: var(--cw-fs-h2); line-height: 1; max-width: 17ch; }
.cw-voice-text { margin-top: 24px; max-width: 30em; font-size: var(--cw-fs-lead); line-height: 1.55; color: rgba(255,255,255,.74); }
.cw-voice-pts { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(255,255,255,.12); }
.cw-voice-pts li { padding: 20px 20px 0 0; font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.66); }
.cw-voice-pts li + li { padding-left: 20px; border-left: 1px solid rgba(255,255,255,.12); }
.cw-voice-pts b { display: block; margin-bottom: 8px; font: 500 16px/1.25 var(--cw-display); color: #fff; }
.cw-voice-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 40px; }
.cw-voice .cw-link { color: #fff; } .cw-voice .cw-link::after { background: rgba(255,255,255,.4); }

.cw-call { position: relative; border-radius: 24px; padding: 24px; background: var(--lx-d); border: 1px solid var(--lx-d-line); box-shadow: var(--lx-d-sh); -webkit-backdrop-filter: var(--lx-blur); backdrop-filter: var(--lx-blur); }
.cw-call-top { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 0 0 20px; border-bottom: 1px solid rgba(255,255,255,.10); }
.cw-call-orb { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #2A75C6; box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.cw-call-orb::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(111,168,232,.55); opacity: 0; }
.cw-play .cw-call-orb::before { animation: lx-ring 2s var(--lx-ease) 2; }
@keyframes lx-ring { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
.cw-call-orb svg { width: 20px; height: 20px; }
.cw-call-who b { display: block; font: 500 16px/1.25 var(--cw-display); color: #fff; }
.cw-call-who span { display: block; margin-top: 4px; font-size: 13px; color: rgba(255,255,255,.58); }
.cw-call-tag { font-size: 13px; color: rgba(255,255,255,.5); }
.cw-wave { display: flex; align-items: center; justify-content: center; gap: 4px; height: 56px; margin: 16px 0 8px; }
.cw-wave i { width: 3px; height: 8px; border-radius: 2px; background: #6FA8E8; }
.cw-play .cw-wave i { animation: lx-wave 1.25s ease-in-out infinite; animation-delay: calc(var(--w) * -97ms); }
@keyframes lx-wave { 0%, 100% { height: 8px; } 50% { height: calc(10px + var(--h) * 1px); } }
.cw-call-log { display: grid; gap: 12px; padding: 12px 0 4px; min-height: 244px; align-content: start; }
.cw-call-line { max-width: 86%; padding: 12px 16px; border-radius: 16px 16px 16px 4px; font-size: 15px; line-height: 1.45; background: rgba(255,255,255,.07); color: rgba(255,255,255,.88); border: 1px solid rgba(255,255,255,.07); }
.cw-call-line small { display: block; margin-bottom: 4px; font-size: 12px; color: rgba(255,255,255,.5); }
.cw-call-line.cw-ai { justify-self: end; border-radius: 16px 16px 4px 16px; background: rgba(47,127,212,.26); border-color: rgba(111,168,232,.28); color: #fff; }
.cw-call-done { display: grid; gap: 8px; margin-top: 16px; padding: 16px 0 0; border-top: 1px solid rgba(255,255,255,.10); }
.cw-call-act { display: grid; grid-template-columns: 20px 1fr auto; gap: 12px; align-items: center; font-size: 14px; color: rgba(255,255,255,.9); }
.cw-call-act i { width: 20px; height: 20px; border-radius: 50%; background: var(--cw-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.2 9.3 7.9 12l5-5.6' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.cw-call-act span { font-size: 13px; color: rgba(255,255,255,.55); }
.cw-call-foot { margin-top: 16px; font-size: 13px; color: rgba(255,255,255,.5); text-align: center; }
/* the call plays in steps: each line and each action has --t (seconds) set by the widget */
.cw-js .cw-call-line, .cw-js .cw-call-act { opacity: 0; transform: translateY(8px); }
.cw-js .cw-play .cw-call-line, .cw-js .cw-play .cw-call-act { animation: lx-say .6s var(--lx-ease) both; animation-delay: calc(var(--t) * 1s); }
@keyframes lx-say { to { opacity: 1; transform: none; } }
.cw-js .cw-call-act i { transform: scale(0); }
.cw-js .cw-play .cw-call-act i { animation: lx-tick .7s var(--lx-ease) both; animation-delay: calc(var(--t) * 1s + .25s); }
@keyframes lx-tick { to { transform: none; } }

/* ───────── Phones and tablets ───────── */
@media (max-width: 1100px) {
  .cw-out-grid { grid-template-columns: 1fr; }
  .cw-out-card { flex-direction: row; }
  .cw-out-fig { flex: 0 0 min(46%, 380px); }
  .cw-out-body { padding: 20px 20px 20px 32px; }
  .cw-co { grid-template-columns: 1fr; }
  .cw-voice-in { grid-template-columns: 1fr; }
  .cw-call { max-width: 560px; }
}
@media (max-width: 720px) {
  .cw-out-head { grid-template-columns: 1fr; gap: 18px; }
  .cw-out-head p { justify-self: start; }
  .cw-out-card { flex-direction: column; }
  .cw-out-fig { flex: none; min-height: 0; padding: 16px; }
  .cw-out-body { padding: 24px 12px 12px; }
  .cw-out-ask { flex-direction: column; align-items: stretch; padding: 24px; }
  .cw-out-ask .cw-btn, .cw-co-act .cw-btn { justify-content: center; }
  .cw-co-act { align-items: stretch; }
  .cw-vg-grid { gap: 12px; }
  .cw-voice-pts { grid-template-columns: 1fr; }
  .cw-voice-pts li, .cw-voice-pts li + li { padding: 16px 0; border-left: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .cw-call { padding: 16px; border-radius: 20px; }
  .cw-call-log { min-height: 0; }
  .cw-call-line { max-width: 94%; }
}

/* ───────── No motion when the visitor asks for none ───────── */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .cw-js .cw-rv { opacity: 1; transform: none; transition: none; }
  .cw-js .cw-out-card .cw-wk i.cw-fg-b { background: var(--fg-b); transition: none; }
  .cw-js .cw-out-card .cw-wk i.cw-fg-c { background: var(--fg-c); transition: none; }
  .cw-js .cw-out-card .cw-fn i { transform: none; transition: none; }
  .cw-js .cw-out-card .cw-lp-arc { stroke-dashoffset: 0; transition: none; }
  .cw-js .cw-out-card .cw-lp-head { opacity: 1; transition: none; }
  .cw-play .cw-wave i, .cw-play .cw-call-orb::before { animation: none; }
  .cw-js .cw-call-line, .cw-js .cw-call-act, .cw-js .cw-call-act i { opacity: 1; transform: none; animation: none; }
}

/* ───────── Fit: every screen size (responsive audit, 15 Nov 2026) ───────── */
/* Measured: 16 pages x 10 widths (360 to 1920). Rules below only fix what the audit found. */

/* Rhythm: the short section step follows the main one, so guides and articles keep the same beat. */
:root { --cw-sec-s: var(--cw-sec); }

/* Page heroes: the kicker ("Voice AI · 6 min read") sat on the headline; give it one step of air. */
.cw-phero--light .cw-eyebrow + h1 { margin-top: 16px; }

/* Cards made from old column blocks: lux turned these into raised cards, so they need card padding and a gap.
   Without it the text touched the card edge and the first card lost its left border. */
.cw-pga-cols { gap: 16px; }
.cw-pga-col, .cw-pga-col:first-child { padding: clamp(24px, 2.4vw, 32px); border: 1px solid var(--lx-card-line); }
.cw-night .cw-pga-col, .cw-night .cw-pga-col:first-child { border-color: var(--lx-night-line); }
.cw-pga-col .cw-ticks li:last-child { padding-bottom: 0; border-bottom: 0; }
.cw-pgl-groups { gap: 16px; }
.cw-pgl-group { padding: clamp(24px, 2.4vw, 32px) clamp(24px, 2.4vw, 32px) 8px; }
.cw-pgl-group h3 { height: auto; margin-bottom: 16px; }
.cw-pgl-group li:last-child a { border-bottom: 0; }

/* Tablets and phones (to 900): the home hero used a fixed 22px side padding; every other section uses --cw-edge. */
@media (max-width: 900px) {
  .cw-hero.cw-hero--live { padding-inline: var(--cw-edge); }
  .cw-hl-biz { margin-inline: calc(-1 * var(--cw-edge)); padding-inline: var(--cw-edge); }
}

/* Below 1024 the overnight timeline turns vertical and the invoice lands in a light "morning" band (home.css).
   lux's dark glass card broke that band into a rounded dark card flush with the screen edges. Restore the band. */
@media (max-width: 1023px) {
  .cw-ov-morning { background: #E9E6DE; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--cw-ink); }
  .cw-ov-morning .cw-ov-mlabel { color: #5A5D66; }
  .cw-ov-morning .cw-ov-mtime { color: var(--cw-ink); }
  .cw-ov-morning .cw-ov-mtext { color: #3A3D45; }
}

/* Phones */
@media (max-width: 720px) {
  /* the 1100 rule centres the card's children; stacked, they should sit on the left like everything else */
  .cw-lp { grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr); grid-template-rows: auto 112px auto; gap: 8px; }
  .cw-lp svg { width: 112px; height: 112px; }
}
@media (max-width: 640px) {
  /* one side padding on every section: heroes had 22px, sections 20px */
  .cw-phero-in, .cw-phero--split, .cw-ed-in, .cw-hero-in { padding-inline: var(--cw-edge); }
  /* full-width buttons: the label sat at the left of a wide bar with nothing on the right */
  .cw-ctas .cw-btn-blue { justify-content: center; }
  /* closing call to action: same size step as the other section headings on a phone */
  .cw-cta h2 { font-size: clamp(36px, 10.4vw, 44px); line-height: 1; }
  .cw-pgl-group + .cw-pgl-group { margin-top: 0; }
  /* tap targets: 40px or more without moving the text */
  .cw-c-info dd a { display: inline-block; padding-block: 10px; margin-block: -10px; }
}
.cw-mcta .cw-btn, .cw-mnav .cw-btn { justify-content: center; }
/* Mobile menu open: the bar sits on the night menu, so it stays dark glass (site.css .cw-mob); the white bar above
   (.cw-menu-open) turned it grey with a white logo on it. */
.cw-header.cw-mob.cw-menu-open .cw-bar { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); box-shadow: none; }
.cw-header.cw-mob.cw-menu-open .cw-pal-trigger { color: rgba(255,255,255,.82); border-color: rgba(255,255,255,.2); }
/* Booking window, side panel: the sample card ran under the headline; let the fade reach solid before the headline. */
.cw-bk-side::before { background: linear-gradient(180deg, rgba(7,11,22,0) 22%, rgba(7,11,22,.96) 50%); }
@media (max-width: 1080px) {
  .cw-fcols a { padding-block: 12px; }
}
/* Tablets: post lists run two to a row, so an odd last post sat alone with half the row empty.
   It takes the full row instead, cover on the left in the first column, title beside it. */
@media (min-width: 641px) and (max-width: 1080px) {
  .cw-posts > .cw-post:nth-child(odd):last-child { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: var(--cw-gap); }
  .cw-posts > .cw-post:nth-child(odd):last-child > .cw-cover { grid-column: 1; grid-row: 1 / span 3; }
  .cw-posts > .cw-post:nth-child(odd):last-child > small, .cw-posts > .cw-post:nth-child(odd):last-child > h3 { grid-column: 2; padding-left: 16px; }
  .cw-posts > .cw-post:nth-child(odd):last-child > small { margin-top: 0; }
}

/* Interface samples (.cw-v): nothing under 11px as rendered. Several contexts shrank them with zoom (.74 to .92),
   which took labels down to 8.6px. Samples now render at full size and their containers give them room instead;
   narrow ones already drop to two lanes through the container query in vignettes.css. */
.cw-cover-v, .cw-vg-v, .cw-vg--crm .cw-vg-v, .cw-vg--soft .cw-vg-v, .cw-vg--mkt .cw-vg-v, .cw-vg--pay .cw-vg-v, .cw-vg--aut .cw-vg-v,
.cw-vp-a, .cw-vp-b, .cw-ov-card { zoom: 1; }
.cw-v-colh span:last-child, .cw-v-deal i, .cw-v-ch, .cw-v-st, .cw-v-rule > span, .cw-v-site > div > small { font-size: 11px; }
.cw-v-site > div > small { letter-spacing: .04em; }
/* Overnight row: five cards need about 240px each. The canvas is 1600px wide at most, so its side padding is
   measured from that width, not the window, or the row shrank to 184px columns on wide screens. */
.cw-ov-canvas { padding-inline: max(var(--cw-pad), calc((min(100vw, 1600px) - var(--cw-container)) / 2)); }
/* Small laptops (1024 to 1279): three cards a row instead of five squeezed ones. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .cw-ov-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; gap: 40px 20px; }
  .cw-ov-s2 .cw-ov-mark::after { display: none; }
}
@media (max-width: 640px) {
  .cw-vg-card .cw-vg-v { zoom: 1; }
  .cw-vp-a, .cw-vp-b { zoom: 1; }
}
/* Narrow samples: the grey note beside the sample's title ("Updated just now") was cut to a letter and an ellipsis. */
@container (max-width: 280px) { .cw-v-head > span { display: none; } }


/* ═════════ One rhythm between sections (15 Nov 2026) ═════════
   Every section carries one --cw-sec of space above and below. Two sections on the page colour in a row used to
   stack both, so the gap between them was twice the space inside a dark or white band. Now the second of a pair
   drops its top padding: one gap between neighbours, a full measure inside every band. */
.cw-sec, .cw-callout, .cw-ind-sec { padding-block: var(--cw-sec); }
.elementor-widget:not(:has(> :is(.cw-night, .cw-dark, .cw-dark-shell, .cw-voice, .cw-ov, .cw-cta, .cw-hero, .cw-phero:not(.cw-phero--light.cw-phero--split), .cw-pgp--white, .cw-pga--white, .cw-partners), > * > :is(.cw-night, .cw-dark, .cw-dark-shell, .cw-voice, .cw-ov, .cw-cta, .cw-hero, .cw-phero:not(.cw-phero--light.cw-phero--split), .cw-pgp--white, .cw-pga--white, .cw-partners))) + .elementor-widget:not(:has(> :is(.cw-night, .cw-dark, .cw-dark-shell, .cw-voice, .cw-ov, .cw-cta, .cw-hero, .cw-phero:not(.cw-phero--light.cw-phero--split), .cw-pgp--white, .cw-pga--white, .cw-partners), > * > :is(.cw-night, .cw-dark, .cw-dark-shell, .cw-voice, .cw-ov, .cw-cta, .cw-hero, .cw-phero:not(.cw-phero--light.cw-phero--split), .cw-pgp--white, .cw-pga--white, .cw-partners))) :is(.cw-sec, .cw-callout, .cw-ind-sec) { padding-top: 0; }

/* ═════════ Headings without the dash-and-label (15 Nov 2026) ═════════
   One pattern everywhere: the heading on the left edge, its supporting line to the right on the same baseline. */
.cw-idx { display: none; }
.cw-head { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px 40px; align-items: end; margin-bottom: clamp(40px, 4.6vw, 64px); }
.cw-head > div:first-child:empty { display: none; }
.cw-head > div:last-child { display: contents; }
.cw-head h2 { grid-column: 1; max-width: 20ch; }
.cw-head p { grid-column: 2; justify-self: end; margin: 0; max-width: 30em; font-size: 17px; line-height: 1.6; }
.cw-pgp .cw-head { margin-bottom: clamp(40px, 4.6vw, 64px); }
.cw-pgp-list { margin-top: 0; }
.cw-vg-head h2, .cw-out-head h2, .cw-voice h2, .cw-ind-top h2, .cw-ixp-head h2, .cw-ixt-head h2 { margin-top: 0; }
.cw-copy h2, .cw-walk h2 { margin-top: 0; }
.cw-svc-top { grid-template-columns: minmax(0, 1fr); }
.cw-proc-top { grid-template-columns: minmax(0, 1fr); gap: 0; }
.cw-steps { grid-column: 1; }
.cw-cols { grid-template-columns: minmax(0, 1fr); }
.cw-cols > div:first-child:empty { display: none; }
.cw-cols .cw-prose { max-width: 46em; }
/* Questions: the heading holds the left, the answers read at a comfortable width on the right. */
.cw-faq-wrap { display: block; }
.cw-faq-wrap > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 32px clamp(40px, 6vw, 96px); align-items: start; }
.cw-faq-wrap h2 { margin: 0; max-width: 12ch; }
@media (max-width: 900px) {
  .cw-head, .cw-faq-wrap > div { grid-template-columns: minmax(0, 1fr); }
  .cw-head p { grid-column: 1; justify-self: start; }
  .cw-faq-wrap h2 { max-width: none; }
}
/* A light split hero is a section on the page colour like any other: same measure below it, shared with the next. */
.cw-phero--light.cw-phero--split { padding-bottom: var(--cw-sec); }

/* ═════════ Renovation pass (15 Nov 2026, night) ═════════
   From two reviews made through the published principles of Rams, Vignelli and Müller-Brockmann (order, one scale,
   one grid) and Pawson, Ando and Hara (reduction, thresholds, emptiness). Each rule below removes something. */
:root { --cw-sec: clamp(72px, 8.8vw, 144px); --cw-fs-h2: clamp(36px, 4.4vw, 64px); }

/* 1. One heading colour. The grey half is kept for a page's opening line and its closing ask, nowhere else. */
h2 span, .cw-head h2 span, .cw-out-head h2 span, .cw-night h2 span, .cw-dark h2 span, .cw-ov h2 span, .cw-voice h2 span,
.cw-co h2 span, .cw-night .cw-head h2 span, .cw-contact .cw-c-book h2 span { color: inherit; }
.cw-cta h2 span, .cw-gcta h2 span { color: rgba(255,255,255,.46); }
.cw-walk h2 span { color: var(--cw-blue); } /* the industry name that changes: the one word that is different */

/* 2. The line beside a heading starts on the same column line in every section. */
.cw-out-head p, .cw-proc-head .cw-proc-intro, .cw-head p, .cw-vg-intro { justify-self: start; padding-bottom: 4px; }

/* 3. Night belongs to the night sections. Cards in a light section are all light. */
.cw-step:last-child { background: var(--lx-card); border: 1px solid var(--lx-card-line); color: var(--cw-body); }
.cw-step:last-child h3 { color: var(--cw-ink); }
.cw-step:last-child > span { color: var(--cw-blue); }
.cw-step:last-child p { color: var(--cw-body); }
.cw-step:last-child li { color: var(--cw-ink); border-color: var(--cw-line); }
@media (min-width: 1101px) { .cw-step:last-child > span::after { background: rgba(9,9,11,.14); } }

/* 4. Two night sections in a row read as one room: no label, one headline size, no doubled padding at the seam. */
.cw-ov-kicker { display: none; }
.cw-ov h2 { margin-top: 0; font-size: var(--cw-fs-h2); line-height: 1; letter-spacing: -.035em; }
.elementor-widget:has(.cw-voice) + .elementor-widget:has(.cw-ov) .cw-ov { background: var(--cw-night); }
.elementor-widget:has(.cw-voice) + .elementor-widget:has(.cw-ov) .cw-ov-canvas { padding-top: 0; }

/* 5. One type scale: 12 / 13 / 15 / 17 / 20 / 28 / 64 / 104. */
.cw-hero--live h1 { font-size: clamp(58px, 7vw, 104px); }
.cw-out-card h3, .cw-ind--type h3 { font-size: 28px; }
@media (min-width: 1101px) { .cw-step h3 { font-size: 28px; } }
.cw-vg-card h3, .cw-post h3 { font-size: 20px; }
.cw-co h2 { font-size: clamp(26px, 2.4vw, 32px); }

/* 6. The page ends calmer than it begins: the closing heading is no longer the largest on the site. */
.cw-cta h2 { font-size: clamp(40px, 5vw, 72px); line-height: .98; letter-spacing: -.04em; }
.cw-cta h2 span { display: block; }
@media (max-width: 640px) { .cw-cta h2 { font-size: clamp(36px, 10.4vw, 44px); line-height: 1; } }

/* 7. Two corner sizes: 24 for a card in a section, 16 for anything inside or floating over one. */
.cw-step, .cw-ind, .cw-cover, .cw-out-ask, .cw-pgp-item, .cw-feat, .cw-pga-col, .cw-pgl-group, .cw-partner { border-radius: 24px; }

/* 8. Industry cards: label, title and list start on the same lines across the row. */
.cw-ind--type { min-height: 0; }
.cw-ind--type small { display: block; min-height: 3.2em; }
.cw-ind--type h3 { margin: 8px 0 0; min-height: 2.1em; }
.cw-ind--type ol { margin: 32px 0 0; }

/* 9. Numbers that order nothing: the eight services are not a sequence. */
.cw-acc-btn { grid-template-columns: minmax(0, 1fr) auto; }
.cw-acc-btn .cw-n { display: none; }

/* 10. No looping motion (About and Services heroes). */
.cw-ed-float { animation: none !important; }

/* 11. Guides: a comparison cover is a band, not a slab; the article starts on the first screen. */
.cw-cover--wide.cw-cover--vs { aspect-ratio: auto; height: clamp(128px, 12vw, 200px); }
@media (max-width: 720px) { .cw-cover--wide.cw-cover--vs { height: 168px; } }

/* 12. Contact: the words and the button on the booking card sit together. */
.cw-contact .cw-c-book { min-height: 0; justify-content: center; }
.cw-contact .cw-c-book .cw-ctas { margin-top: 0; padding-top: 32px; }
.cw-contact .cw-c-book .cw-btn { height: 56px; padding-inline: 28px; font-size: 16px; }
.cw-contact .cw-c-book h2 { margin-top: 0; }

/* 13. Phones: the eight service cards are one row you swipe, a card at a time, instead of 4,400px of scrolling. */
@media (max-width: 640px) {
  .cw-vg-grid { grid-template-areas: none; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--cw-edge);
    margin-inline: calc(-1 * var(--cw-edge)); padding-inline: var(--cw-edge); padding-bottom: 8px; scrollbar-width: none; }
  .cw-vg-grid::-webkit-scrollbar { display: none; }
  .cw-vg-grid > .cw-vg-card { grid-area: auto; scroll-snap-align: start; }
}
/* A narrow website sample stacks its form under its headline instead of wrapping a word a line. */
@container (max-width: 340px) { .cw-v-site { grid-template-columns: minmax(0, 1fr); } }
.cw-cover--wide.cw-cover--vs .cw-vs { height: 100%; padding: 0 8%; font-size: clamp(17px, 2.2cqw, 28px); }
@media (max-width: 720px) { .cw-cover--wide.cw-cover--vs .cw-vs { padding: 16px 8%; } }
/* Launch sweep: nothing under 11px, and no topic card left alone on its own row. */
.cw-vs i { font-size: max(11px, .5em); }
@media (min-width: 1081px) {
  .cw-gbrowse > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
}

/* ═════════ From the live browser review (15 Nov 2026) ═════════ */
/* A closed booking window can never leave a clickable calendar over the page (site.js also removes it). */
.cw-bk:not(.cw-on) iframe { visibility: hidden !important; pointer-events: none !important; }
.cw-cal-wait { margin: 0; padding: 64px 0; text-align: center; font-size: 15px; color: var(--cw-muted); }
/* Blue used as text passes 4.5:1 on white and on the page colour; the header button matches the other buttons. */
:root { --cw-blue-text: #2568B4; }
.cw-out-k, .cw-out-go, .cw-step > span, .cw-step:last-child > span, .cw-walk h2 span { color: var(--cw-blue-text); }
.cw-bar .cw-btn-blue, .cw-mcta .cw-btn-blue, .cw-mnav .cw-btn-blue { background: #2A75C6; }
/* Sound bars move a few times, then rest: nothing loops. */
.cw-v--on .cw-v-wave span, .cw-play .cw-wave i { animation-iteration-count: 4 !important; }
/* Footer: phone under the email. */
.cw-fcontact a + a { display: block; margin-top: 4px; }
/* Guides index: topics on the left, search on the right of the same row. */
.cw-gtopnav { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
/* search first, then the topics under it */
.cw-gtopnav form { order: -1; flex: 1 1 100%; max-width: 440px; }
.cw-gtopnav .cw-gchips { flex: 1 1 100%; }

/* ═════════ Search and AI visibility pass (15 Nov 2026) ═════════ */
/* Guide cards: only the title is the link text; its ::after stretches over the whole card, so the card stays clickable. */
.cw-post, .cw-glead { position: relative; }
.cw-post-link { color: inherit; }
.cw-post-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--cw-r-m); }
.cw-glead .cw-post-link::after { border-radius: var(--cw-r); }
.cw-post-link:focus-visible { outline: none; }
.cw-post-link:focus-visible::after { outline: 2px solid var(--cw-blue); outline-offset: 6px; }
/* Under a guides block: one link to the topic page, and on the home page a quiet row of every topic. */
.cw-posts-more { margin: clamp(28px, 3vw, 40px) 0 0; }
.cw-posts-topics { margin-top: clamp(36px, 4vw, 56px); padding-top: 22px; border-top: 1px solid var(--cw-line); display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; }
.cw-posts-topics h3 { margin: 0; font: 500 13px/1.3 var(--cw-display); color: var(--cw-muted); letter-spacing: 0; }
.cw-posts-topics ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; min-width: 0; }
.cw-posts-topics a { display: inline-block; padding: 4px 0; font: 500 15px/1.3 var(--cw-display); color: var(--cw-body); border-bottom: 1px solid transparent; transition: color .25s, border-color .25s; }
.cw-posts-topics a:hover { color: var(--cw-ink); border-bottom-color: currentColor; }
/* Contact: the plain calendar link under the booking button (works without JavaScript). */
.cw-c-direct { margin: 20px 0 0; }
.cw-contact .cw-c-book .cw-c-direct .cw-link { color: #fff; font-size: 15px; }
/* Guides index on phones: the topic row scrolls inside itself instead of widening the page. */
.cw-gtopnav > .cw-gtopics { flex: 1 1 100%; min-width: 0; }