/* Umbral Vision v3: structure, components, motion, breakpoints.
   Class names are shared with index.html; rename nothing here without renaming there. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bone); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
svg { display: block; }
.wrap { max-width: var(--container); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.kicker { font-family: var(--body); font-weight: 600; font-size: 15px; color: var(--gold-deep); }
h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.06; font-weight: 600; } /* 600 since round 4: Jamie wanted the section headings bolder */
h2 .gold, .big .gold { color: var(--gold-head); }
.band-black h2 .gold, .band-black .big .gold { color: var(--gold); }
h3 { font-size: 22px; line-height: 1.2; }
p { margin: 0; }
.sub { font-size: clamp(17px, 1.6vw, 20px); color: var(--penumbra); max-width: 34em; }
.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--body); font-weight: 600; font-size: 15px; padding: 13px 22px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, background .15s ease; }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn-gold { background: var(--gold); color: var(--black); }
.btn-gold:hover { background: #D6B66F; transform: translateY(-1px); }
.btn-ghost { border-color: var(--mist); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); }
.btn-ghost.on-dark { border-color: rgba(241,238,230,.28); color: var(--bone); }
.btn-ghost.on-dark:hover { border-color: var(--bone); }
.arrow { width: 16px; height: 16px; }

section { padding-block: clamp(64px, 9vw, 120px); }
.band-bone { background: var(--bone); }
.band-sand { background: var(--sand); }
.band-black { background: var(--black); color: var(--bone); }
.band-black .kicker { color: var(--gold); }
.band-black .sub { color: #A9A69E; }
.head { display: grid; gap: 14px; margin-bottom: clamp(36px, 5vw, 60px); max-width: 46em; }
.head.center { justify-items: center; text-align: center; margin-inline: auto; }
.head.center .sub { margin-inline: auto; }
.head.center .cta { display: flex; justify-content: center; margin-top: 12px; }
.sub-hint { display: block; margin-top: 8px; font-weight: 600; color: var(--gold-head); font-size: .92em; }

/* Nav + hero */
.top { position: relative; overflow: hidden; }
.nav { display: flex; align-items: center; justify-content: space-between; padding-block: 22px; position: relative; }
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 600; letter-spacing: .3em; text-transform: uppercase; font-size: 13px; }
.brand img { width: 34px; height: 34px; }
/* Round 4 (2026-09-21): the hero is one centred column, no drawing. The four-layer drawing lives at assets/four-layers.svg. */
.hero { padding-block: clamp(48px, 7vw, 96px) clamp(64px, 8vw, 110px); position: relative; display: grid; justify-items: center; text-align: center; }
.hero > div { display: grid; justify-items: center; max-width: 56em; }
.hero h1 { font-size: clamp(42px, 5.6vw, 76px); line-height: 1.02; margin-top: 18px; max-width: 13.5em; } /* Round 7 (2026-09-21): sized so the line sits on two rows at desktop width, not three (round-6 note) */
.hero h1 .gold { color: var(--gold); }
.hero .sub { margin-top: 26px; max-width: 32em; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 36px; }
.hero-proof { display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(241,238,230,.14); font-size: 14px; color: #A9A69E; width: 100%; max-width: 40em; }
.hero-proof strong { color: var(--bone); font-weight: 500; }

/* Pain: four quotes, each paired with what it costs and what changes */
/* Round 5 (2026-09-21): four columns. Each column is a black quote card in the page's card language, with its answer card under it. */
.pairs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; }
/* Round 10 (2026-09-21): the quote cards share one row track (subgrid), so they stay level, and an open answer sits in the
   second track under its own card only. Before this, closed pairs stretched to the open pair's height and all four
   looked as if they had dropped. Browsers without subgrid get level-enough cards from the min-height and align-items: start. */
.pair { display: grid; grid-template-rows: auto auto; row-gap: 12px; }
@supports (grid-template-rows: subgrid) { .pair { grid-template-rows: subgrid; grid-row: span 2; } }
.pair-q { position: relative; overflow: hidden; background: linear-gradient(160deg, #1C1B18 0%, var(--black) 68%); border: 1px solid #2A2823; color: var(--bone); border-radius: var(--r); padding: 20px 22px 22px; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; align-content: start; min-height: 230px; }
.pair-q::before { content: ""; position: absolute; inset: 0; background: radial-gradient(110% 90% at 100% 100%, rgba(198,163,91,.16), transparent 62%); pointer-events: none; }
.pair-q::after { content: "\201D"; position: absolute; right: -2px; bottom: -58px; font-family: var(--display); font-weight: 600; font-size: 190px; line-height: 1; color: var(--gold); opacity: .16; pointer-events: none; }
.pair-q .n { position: relative; font-family: var(--display); font-weight: 300; font-size: 16px; color: var(--gold); }
.pair-q .n::before { content: "0"; }
.pair-q blockquote { position: relative; margin: 0; display: grid; gap: 10px; }
.pair-q p { font-family: var(--display); font-weight: 300; font-size: 18px; line-height: 1.3; letter-spacing: -.01em; }
.pair-q p::before { content: "\201C"; color: var(--gold); }
.pair-q p::after { content: "\201D"; color: var(--gold); }
.pair-q cite { font-style: normal; font-size: 13px; color: #A9A69E; }
.pair-cue { position: relative; display: none; font-size: 13px; font-weight: 600; color: var(--gold); align-self: end; }
.pair-cue::after { content: "+"; margin-left: 8px; display: inline-block; width: 18px; height: 18px; line-height: 17px; text-align: center; border: 1px solid rgba(198,163,91,.6); border-radius: 50%; font-weight: 500; }
/* Round 8 (2026-09-21): with JS the answers are closed until the quote is tapped */
.pairs.is-live .pair-q { cursor: pointer; transition: border-color .2s ease, transform .2s ease; }
.pairs.is-live .pair-q:hover { border-color: rgba(198,163,91,.55); transform: translateY(-2px); }
.pairs.is-live .pair-q:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.pairs.is-live .pair-cue { display: block; }
.pairs.is-live .pair.is-open .pair-cue::after { content: "\2212"; }
.pairs.is-live .pair-a { display: none; }
.pairs.is-live .pair.is-open .pair-a { display: grid; animation: pair-in .35s ease; }
@keyframes pair-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.pair-a { background: var(--chalk); border: 1px solid var(--mist-2); border-radius: var(--r); padding: 20px 20px; display: grid; gap: 12px; align-content: start; font-size: 14.5px; color: var(--penumbra); }
.pair-a b { display: block; font-weight: 600; margin-bottom: 3px; }
.pair-cost b { color: var(--ink); }
.pair-fix { padding: 14px 18px; border-radius: 10px; background: var(--gold-wash); border: 1px solid rgba(198,163,91,.35); color: #3B3E45; }
.pair-fix b { color: var(--gold-deep); }
.callout { margin-top: 48px; display: grid; justify-items: center; text-align: center; gap: 18px; padding: 0; } /* round 8: no box */
.callout-k { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(24px, 2.6vw, 34px); color: var(--gold-head); margin-bottom: 6px; letter-spacing: -.01em; }
.callout p { color: var(--penumbra); max-width: 34em; font-size: clamp(16px, 1.4vw, 18px); }
.pain-note { margin-top: 28px; color: var(--penumbra); font-size: 15px; max-width: 40em; }

/* About */
.about { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
/* Round 4 (2026-09-21): no border, no frame. The photo fades into the page at its edges. */
.portrait { aspect-ratio: 4 / 5; background: linear-gradient(160deg, var(--mist-2), var(--mist)); display: grid; place-items: center; text-align: center; padding: 24px; color: var(--penumbra); position: relative; overflow: hidden; margin: 0; font-size: 15px; -webkit-mask-image: radial-gradient(ellipse 52% 48% at 50% 47%, #000 58%, rgba(0,0,0,0) 100%); mask-image: radial-gradient(ellipse 52% 48% at 50% 47%, #000 58%, rgba(0,0,0,0) 100%); } /* round 5: more oval */
.portrait b { display: block; color: var(--ink); margin-bottom: 6px; font-weight: 600; }
.about-copy { display: grid; gap: 18px; }
.about-copy p { color: #3B3E45; max-width: 36em; }
.about-copy .lede { font-family: var(--display); font-weight: 300; font-size: 22px; line-height: 1.3; color: var(--ink); }
.about-copy .byline { font-size: 14px; color: var(--penumbra); }
.about-copy .role { font-weight: 600; font-size: 18px; color: var(--gold-head); margin-top: -6px; }

/* The UV way: four solutions + one board */
.way-grid { display: grid; gap: 22px; }
/* Round 4 (2026-09-21): the four cards match the step cards in #how: square, black, one large transparent icon, a number */
.solutions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sol { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r); background: linear-gradient(160deg, #1C1B18 0%, var(--black) 68%); color: var(--bone); border: 1px solid rgba(241,238,230,.09); padding: 40px 20px 24px; display: grid; place-items: center; text-align: center; font: inherit; cursor: pointer; transition: transform .2s ease, border-color .2s ease; } /* round 7: shorter, everything centred, edge lighter */
.sol::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 50%, rgba(198,163,91,.12), transparent 70%); pointer-events: none; transition: opacity .25s ease; }
.sol .mark { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 64%; height: 64%; stroke: var(--gold); fill: none; stroke-width: .8; stroke-linecap: round; stroke-linejoin: round; opacity: .14; pointer-events: none; transition: opacity .25s ease, transform .25s ease; } /* round 7: centred, more transparent */
.sol .num { position: absolute; top: 14px; left: 50%; translate: -50% 0; font-family: var(--display); font-weight: 300; font-size: 15px; color: var(--gold); }
.sol-text { position: relative; display: grid; gap: 6px; justify-items: center; }
.sol:hover { transform: translateY(-3px); border-color: rgba(198,163,91,.55); }
.sol:hover .mark { opacity: .24; transform: scale(1.04); }
.sol:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.sol.is-on { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-wash); }
.sol.is-on .mark { opacity: .32; transform: scale(1.06); }
.sol h4 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(20px, 1.9vw, 25px); line-height: 1.2; letter-spacing: -.02em; }
.sol p { font-size: 13.5px; color: #A9A69E; line-height: 1.4; min-height: 4.2em; } /* round 8: three lines reserved so the four headings sit level */

/* Board chrome: light, its own accent, the glazier's own mark */
.dash { background: var(--db-bg); color: var(--db-text); border-radius: 18px; border: 1px solid var(--db-line); box-shadow: 0 30px 70px -30px rgba(20,19,17,.35), 0 1px 0 rgba(255,255,255,.6) inset; overflow: hidden; display: grid; grid-template-columns: 172px 1fr; font-size: 12px; line-height: 1.35; } /* round 7: tighter, so it fits a laptop screen */
@media (min-width: 961px) { .dash { zoom: .86; } } /* round 7: and scaled down at desktop, where the board is an illustration rather than the thing itself */
.rail { background: var(--db-surface); border-right: 1px solid var(--db-line); padding: 14px 10px; display: grid; align-content: start; gap: 2px; }
.rail .mark { display: flex; align-items: center; gap: 10px; padding: 2px 8px 18px; font-weight: 700; font-size: 13.5px; color: var(--db-text); letter-spacing: -.01em; }
.rail .mark svg { width: 28px; height: 28px; flex: none; }
.rail button { all: unset; display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 8px; color: var(--db-muted); font-family: var(--body); font-size: 12.5px; font-weight: 500; cursor: default; }
.rail button svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.rail button.is-on { background: #EAF3F7; color: var(--db-accent); }
.rail .rail-gap { height: 12px; }
.rail .rail-label { font-size: 12px; font-weight: 600; color: #9AA3AF; padding: 6px 10px 2px; }
.rail .count { margin-left: auto; font-size: 11px; font-weight: 600; background: var(--db-late-wash); color: var(--db-late); border-radius: 999px; padding: 1px 7px; }
.main { padding: 14px 16px 16px; display: grid; gap: 10px; min-width: 0; }
.dash-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.dash-top h5 { margin: 0; font-family: var(--body); font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.dash-top .when { font-size: 12.5px; color: var(--db-muted); margin-top: 2px; }
.dash-tools { display: flex; gap: 8px; align-items: center; }
.dash-search { border: 1px solid var(--db-line); background: var(--db-surface); border-radius: 8px; padding: 8px 12px; color: #9AA3AF; min-width: 220px; display: flex; gap: 8px; align-items: center; }
.dash-search svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--db-accent); color: #fff; font-weight: 600; font-size: 12px; display: grid; place-items: center; }
.brief { background: #EAF3F7; border: 1px solid #CFE3EB; border-radius: 10px; padding: 9px 12px; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
.brief b { color: var(--db-accent); font-weight: 600; font-size: 13px; }
.brief p { font-size: 13px; }
.brief .ago { font-size: 12px; color: var(--db-muted); }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.kpi { background: var(--db-surface); border: 1px solid var(--db-line); border-radius: 10px; padding: 9px 12px; display: grid; gap: 3px; }
.kpi .k { font-size: 12.5px; color: var(--db-muted); font-weight: 500; }
.kpi .v { font-family: var(--display); font-size: 21px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; font-weight: 400; }
.kpi .d { font-size: 12px; color: var(--db-muted); }
.kpi .d.good { color: var(--db-good); }
.kpi .d.bad { color: var(--db-late); }
.panel { background: var(--db-surface); border: 1px solid var(--db-line); border-radius: 10px; min-width: 0; }
.panel-h { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 12px 4px; gap: 10px; }
.panel-h h6 { margin: 0; font-family: var(--body); font-weight: 600; font-size: 13.5px; }
.panel-h span { font-size: 12px; color: var(--db-muted); }
.row2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 8px; }
.row2.even { grid-template-columns: 1fr 1fr; }

/* Cash pipeline chart */
.pipe { padding: 2px 12px 8px; display: grid; gap: 6px; }
.pipe-total { display: flex; gap: 22px; align-items: baseline; flex-wrap: wrap; }
.pipe-total .big { font-family: var(--display); font-size: 24px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pipe-total .part { font-size: 12.5px; color: var(--db-muted); display: flex; align-items: center; gap: 6px; }
.pipe-total .part i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.pipe-total .part b { color: var(--db-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.pipe svg { width: 100%; height: auto; }
.pipe text { font-family: var(--body); font-size: 11px; fill: var(--db-muted); }
.pipe .axis { stroke: var(--db-line); }
.pipe .grid { stroke: var(--db-line-2); }

.board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 0 10px 10px; overflow-x: auto; }
.col { display: grid; gap: 6px; align-content: start; min-width: 124px; }
.col .ch { font-size: 12px; font-weight: 600; color: var(--db-muted); display: flex; justify-content: space-between; padding: 2px 2px 6px; border-bottom: 2px solid var(--db-line); }
.job { background: var(--db-bg); border: 1px solid var(--db-line); border-radius: 7px; padding: 6px 8px; display: grid; gap: 2px; }
.job b { font-weight: 600; font-size: 12px; }
.job small { font-size: 11px; color: var(--db-muted); }
.job .age { font-size: 11px; color: var(--db-muted); display: flex; align-items: center; gap: 5px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.job .age::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #B8BEC7; }
.job.late { border-color: #EFC2BB; background: var(--db-late-wash); }
.job.late .age { color: var(--db-late); font-weight: 600; }
.job.late .age::before { background: var(--db-late); }
.job.ok .age::before { background: var(--db-good); }
.list { display: grid; padding: 0 0 6px; }
.li { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; padding: 7px 12px; border-top: 1px solid var(--db-line-2); align-items: center; }
.li b { font-weight: 600; font-size: 12.5px; }
.li small { font-size: 11.5px; color: var(--db-muted); grid-column: 1; }
.li .amt { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; grid-row: 1; grid-column: 2; text-align: right; }
.chip { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--db-line-2); color: var(--db-muted); grid-column: 2; justify-self: end; }
.chip.warn { background: var(--db-late-wash); color: var(--db-late); }
.chip.good { background: var(--db-good-wash); color: var(--db-good); }
.chip.amber { background: var(--db-amber-wash); color: var(--db-amber); }
.margins { padding: 2px 12px 8px; display: grid; gap: 7px; }
.mrow { display: grid; grid-template-columns: 138px 1fr 48px; gap: 10px; align-items: center; font-size: 12px; }
.mrow b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bars { position: relative; height: 14px; background: var(--db-line-2); border-radius: 3px; overflow: hidden; }
.bars i { position: absolute; left: 0; top: 0; bottom: 0; }
.bars .q { background: var(--db-accent-3); }
.bars .a { background: var(--db-accent); top: 4px; bottom: 4px; }
.bars .a.neg { background: var(--db-late); }
.mrow .pct { font-size: 12px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; color: var(--db-good); }
.mrow .pct.neg { color: var(--db-late); }
.mkey { display: flex; gap: 14px; font-size: 11.5px; color: var(--db-muted); padding: 0 14px 12px; }
.mkey i { display: inline-block; width: 10px; height: 8px; margin-right: 5px; vertical-align: middle; border-radius: 2px; }
.sources { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--db-line); padding-top: 9px; }
.sources > span:first-child { font-size: 12.5px; color: var(--db-muted); margin-right: 4px; }
.src { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--db-line); background: var(--db-surface); border-radius: 999px; padding: 5px 11px 5px 6px; font-size: 12.5px; font-weight: 500; }
.src i { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; font-size: 9.5px; font-weight: 700; color: #fff; font-style: normal; }
.src small { font-size: 11px; color: var(--db-muted); font-weight: 400; }
.src .live { width: 7px; height: 7px; border-radius: 50%; background: var(--db-good); box-shadow: 0 0 0 3px var(--db-good-wash); }
.dash-caption { text-align: center; margin-top: 18px; font-size: 14px; color: var(--penumbra); }
/* Board focus: a tapped solution card lights its panels and dims the rest */
.dash .panel, .dash .kpi, .dash .brief, .dash .rail button { transition: opacity .25s ease, box-shadow .25s ease; }
.dash.is-focus .panel, .dash.is-focus .kpi, .dash.is-focus .brief { opacity: .32; }
.dash.is-focus [data-area].is-lit { opacity: 1; box-shadow: 0 0 0 2px var(--gold), 0 0 0 7px var(--gold-wash); border-color: var(--gold); }
.dash.is-focus .rail button.is-lit { background: var(--gold-wash); color: var(--db-text); }

/* Round 7 (2026-09-21): the phone. The same board answering from a handset. The phone is somebody else's device, so it is the
   one place on the page with a fully rounded shape. Figures are invented (see the caption). */
.scene { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: clamp(28px, 5vw, 72px); background: var(--sand); border-radius: 22px; padding: clamp(28px, 4vw, 56px) clamp(24px, 5vw, 72px); margin-top: 22px; }
.scene-side { display: grid; gap: 14px; max-width: 24em; }
.scene-lead { font-family: var(--display); font-weight: 300; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.15; letter-spacing: -.02em; color: var(--ink); }
.scene-lead .gold { color: var(--gold-head); }
.scene-note { color: #3B3E45; font-size: 16px; max-width: 30em; }
.phone { width: 310px; max-width: 100%; background: #000; border-radius: 42px; padding: 10px; box-shadow: 0 34px 70px -24px rgba(20,19,17,.55), 0 0 0 1px rgba(241,238,230,.08); justify-self: end; }
.screen { background: #1A1917; color: var(--bone); border-radius: 33px; overflow: hidden; position: relative; min-height: 560px; display: grid; grid-template-rows: auto auto 1fr auto auto; }
.statusbar { display: flex; align-items: center; justify-content: space-between; padding: 13px 24px 8px; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sig { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.sig i { display: block; width: 3px; border-radius: 1px; background: var(--bone); }
.sig i:nth-child(1) { height: 4px; } .sig i:nth-child(2) { height: 6px; } .sig i:nth-child(3) { height: 8px; } .sig i:nth-child(4) { height: 10px; opacity: .35; }
.ph-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px 12px; border-bottom: 1px solid rgba(241,238,230,.08); }
.ph-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; }
.ph-brand svg { width: 22px; height: 22px; }
.ph-when { font-size: 11px; color: #A9A69E; }
.chat { padding: 16px 14px 8px; display: grid; gap: 10px; align-content: start; transition: opacity .3s ease; }
.chat.out { opacity: 0; }
.bubble { justify-self: end; max-width: 86%; background: var(--gold); color: var(--black); font-size: 13px; line-height: 1.35; padding: 9px 12px; border-radius: 16px 16px 4px 16px; min-height: 36px; }
.caret { display: inline-block; width: 1.5px; height: 13px; background: var(--black); vertical-align: -2px; margin-left: 1px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.reply { display: grid; gap: 8px; }
.reply > * { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; }
.reply > .in { opacity: 1; transform: none; }
.rc { background: #26251F; border: 1px solid rgba(241,238,230,.08); border-radius: 12px; padding: 10px 12px; display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; align-items: center; font-size: 12.5px; }
.rc b { font-weight: 600; }
.rc small { grid-column: 1 / -1; font-size: 11.5px; color: #A9A69E; line-height: 1.35; }
.rc .chip { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(198,163,91,.6); background: transparent; color: var(--gold); white-space: nowrap; grid-column: auto; justify-self: auto; }
.rc .chip.good { background: var(--gold); color: var(--black); }
.rline { margin: 0; font-size: 12.5px; color: #A9A69E; padding: 0 4px; line-height: 1.4; }
.rstat { display: flex; align-items: baseline; gap: 8px; padding: 2px 4px; }
.rstat b { font-family: var(--display); font-weight: 400; font-size: 28px; color: var(--gold); letter-spacing: -.02em; line-height: 1; }
.rstat span { font-size: 12px; color: #A9A69E; }
.rbtn { justify-self: start; border: 1px solid rgba(241,238,230,.28); border-radius: 999px; padding: 6px 12px; font-size: 11.5px; color: var(--bone); }
.ask { margin: 8px 14px 6px; background: #26251F; border-radius: 999px; padding: 10px 14px; font-size: 12.5px; color: #A9A69E; display: flex; align-items: center; gap: 9px; }
.ask i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(198,163,91,.22); }
.homebar { display: block; width: 104px; height: 4px; border-radius: 999px; background: rgba(241,238,230,.32); margin: 12px auto 10px; }
.modes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.mode { font: inherit; font-weight: 600; font-size: 14px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--mist); background: transparent; color: var(--ink); cursor: pointer; transition: background .15s ease, color .15s ease; }
.mode:hover { border-color: var(--ink); }
.mode:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.mode.is-on { background: var(--black); color: var(--bone); border-color: var(--black); }
.bubble.voice { max-width: 92%; display: grid; gap: 6px; }
.vhead { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; opacity: .75; }
.wave { display: inline-flex; align-items: center; gap: 2px; height: 14px; }
.wave i { display: block; width: 3px; border-radius: 2px; background: var(--black); height: 40%; animation: wave 1s ease-in-out infinite; }
.wave i:nth-child(2) { animation-delay: .1s; height: 70%; } .wave i:nth-child(3) { animation-delay: .2s; height: 100%; } .wave i:nth-child(4) { animation-delay: .3s; height: 55%; } .wave i:nth-child(5) { animation-delay: .4s; height: 85%; } .wave i:nth-child(6) { animation-delay: .5s; height: 45%; } .wave i:nth-child(7) { animation-delay: .6s; height: 65%; }
@keyframes wave { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1.15); } }
.rphoto { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; background: #26251F; border: 1px solid rgba(241,238,230,.08); border-radius: 12px; padding: 8px 10px; font-size: 12px; }
.rphoto i { display: block; width: 64px; height: 48px; border-radius: 8px; background: linear-gradient(160deg, #3A3830, #221F1A); position: relative; overflow: hidden; }
.rphoto i::after { content: ""; position: absolute; inset: 8px 14px; border: 1.5px solid rgba(198,163,91,.75); border-radius: 2px; }
.rphoto i::before { content: ""; position: absolute; left: 50%; top: 8px; bottom: 8px; width: 1px; background: rgba(198,163,91,.45); }
.rphoto b { display: block; font-weight: 600; }
.rphoto small { font-size: 11.5px; color: #A9A69E; }
.rq { background: #26251F; border: 1px solid rgba(241,238,230,.08); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; font-size: 12px; }
.rq-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 600; }
.rq-h span { color: var(--gold); font-size: 11px; }
.rq-r { display: flex; justify-content: space-between; gap: 10px; color: #A9A69E; }
.rq-r b { color: var(--bone); font-weight: 500; text-align: right; white-space: nowrap; }
.rq-t { display: flex; justify-content: space-between; border-top: 1px solid rgba(241,238,230,.1); padding-top: 6px; font-weight: 600; }
.rq-t b { color: var(--gold); }
.rbtns { display: flex; gap: 6px; flex-wrap: wrap; }
.rbtn.gold { background: var(--gold); color: var(--black); border-color: var(--gold); font-weight: 600; }

/* The Umbral Vision way: four black step cards, each with one large transparent icon behind a centred heading (round 7) */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.step { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r); background: linear-gradient(160deg, #1C1B18 0%, var(--black) 68%); color: var(--bone); border: 1px solid rgba(241,238,230,.09); padding: 40px 20px 24px; display: grid; place-items: center; text-align: center; transition: transform .2s ease, border-color .2s ease; } /* round 7: shorter, everything centred, edge lighter */
.step::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 50%, rgba(198,163,91,.12), transparent 70%); pointer-events: none; }
.step:hover { transform: translateY(-3px); border-color: rgba(198,163,91,.55); }
.step .mark { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 64%; height: 64%; stroke: var(--gold); fill: none; stroke-width: .8; stroke-linecap: round; stroke-linejoin: round; opacity: .14; pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.step:hover .mark { opacity: .24; transform: scale(1.04); }
.step .num { position: absolute; top: 18px; left: 50%; translate: -50% 0; display: grid; justify-items: center; gap: 7px; font-family: var(--body); font-weight: 600; font-size: 14px; color: var(--gold); white-space: nowrap; } /* round 10: no pill; gold word with a short rule under it */
.step .num::after { content: ""; width: 28px; height: 2px; background: var(--gold); border-radius: 1px; }
.step-text { position: relative; display: grid; gap: 6px; justify-items: center; }
.step .when { font-size: 13.5px; font-weight: 500; color: #A9A69E; } /* round 10: muted, so the Stage line is the only gold */
.step h3 { font-size: clamp(20px, 1.9vw, 25px); color: var(--bone); min-height: 2.4em; display: grid; align-content: start; } /* round 8: two lines reserved so the four headings sit level */
.steps-line { margin: 28px auto 0; text-align: center; color: var(--penumbra); font-size: clamp(16px, 1.4vw, 18px); max-width: 40em; }

/* The free audit: a centred head with the button, then one black card across the page listing what the report holds */
.audit-fine { font-size: 14px; color: var(--penumbra); }
/* round 5: "What comes back" as three black cards in the page's card language */
.comes { display: grid; gap: 18px; justify-items: center; }
.audit-k { font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2.4vw, 28px); color: var(--gold-head); letter-spacing: -.01em; }
.audit-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: 100%; }
.audit-list li { position: relative; overflow: hidden; aspect-ratio: 5 / 3; border-radius: var(--r); background: linear-gradient(160deg, #1C1B18 0%, var(--black) 68%); color: var(--bone); border: 1px solid #2A2823; padding: 40px 24px 24px; display: grid; place-items: center; text-align: center; } /* round 7: icon and text centred; edge unchanged by request */
.audit-list li::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 50%, rgba(198,163,91,.14), transparent 70%); pointer-events: none; }
.audit-list .mark { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 150px; height: 150px; stroke: var(--gold); fill: none; stroke-width: .8; stroke-linecap: round; stroke-linejoin: round; opacity: .22; pointer-events: none; }
.audit-list .num { position: absolute; top: 14px; left: 50%; translate: -50% 0; font-family: var(--display); font-weight: 300; font-size: 15px; color: var(--gold); }
.audit-list .li-text { position: relative; display: grid; gap: 5px; justify-items: center; }
.audit-list b { font-family: var(--display); font-weight: 400; font-size: clamp(20px, 1.9vw, 24px); letter-spacing: -.02em; line-height: 1.2; }
.audit-list span { font-size: 14px; color: #A9A69E; max-width: 22em; min-height: 2.9em; }

/* Close + footer */
.close .wrap { display: grid; justify-items: center; text-align: center; }
.close .copy { display: grid; gap: 22px; justify-items: center; max-width: 44em; }
.close h2 { max-width: 15em; font-size: clamp(36px, 5.2vw, 64px); }
.close .sub { max-width: 32em; }
.close-mark { width: 80px; height: 80px; margin-bottom: 4px; } /* round 5: bigger */
footer { background: var(--black); color: #85837E; padding-block: 34px; font-size: 13.5px; }
footer .wrap { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: center; }
footer .brand { color: var(--bone); }

.stages-m { display: none; } /* phones only, see the 720px block */

@media (max-width: 960px) {
  .about { grid-template-columns: 1fr; }
  .portrait { width: 100%; max-width: 340px; margin-inline: auto; } /* round 11: one column, so the photo no longer fills the screen */
  .audit-list { grid-template-columns: 1fr; gap: 12px; } /* round 11: was gap 0, which stacked the three cards edge to edge */
  .pairs { grid-template-columns: 1fr 1fr; }
  .solutions { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .audit-list li { aspect-ratio: auto; min-height: 150px; }
  .dash { grid-template-columns: 1fr; }
  .rail { display: flex; align-items: center; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--db-line); } /* round 11: below desktop the rail is the glazier's name only; the menu buttons, search and avatar are gone */
  .rail .mark { padding: 0; }
  .rail button, .rail .rail-gap, .rail .rail-label, .dash-tools { display: none; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .row2, .row2.even { grid-template-columns: 1fr; }
  .scene { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .scene-side { justify-items: center; }
  .modes { justify-content: center; }
  .phone { justify-self: center; }
}

/* Round 11 (2026-09-21), phones: the board reads like the app on a handset. The rail menus, the search box, the avatar,
   the eight-week chart and the kanban all go. Each area keeps one compact panel, so a tapped card above still lights
   something: jobs light the KPIs and the stage list, quotes and invoices their trimmed lists, finance the money total and
   the margin rows. Nothing inside the board scrolls sideways any more. */
@media (max-width: 720px) {
  .dash { font-size: 13px; border-radius: 14px; box-shadow: 0 18px 40px -24px rgba(20,19,17,.35); }
  .rail { padding: 12px 14px; }
  .rail .mark { font-size: 14px; }
  .main { padding: 12px 12px 14px; gap: 8px; }
  .dash-top { gap: 8px; }
  .dash-top h5 { font-size: 16px; }
  .brief { grid-template-columns: 1fr; gap: 4px; padding: 10px 12px; }
  .brief .ago { display: none; }
  .kpi { padding: 10px 12px; }
  .kpi .v { font-size: 22px; }
  .pipe svg { display: none; }
  .pipe { padding: 2px 12px 10px; }
  .pipe-total { flex-direction: column; align-items: stretch; gap: 5px; }
  .pipe-total .big { font-size: 26px; margin-bottom: 4px; }
  .pipe-total .part { font-size: 13px; }
  .pipe-total .part b { margin-left: auto; }
  .board-panel { display: none; }
  .stages-m { display: block; }
  .m-hide { display: none; }
  .li { padding: 8px 12px; }
  .li b { font-size: 13px; }
  .li small { font-size: 12px; }
  .mrow { grid-template-columns: 1fr auto; row-gap: 5px; font-size: 12.5px; }
  .mrow .pct { grid-row: 1; grid-column: 2; }
  .mrow .bars { grid-row: 2; grid-column: 1 / -1; height: 10px; }
  .panel-h { display: grid; gap: 1px; padding-bottom: 6px; }
  .mkey { padding: 0 12px 12px; flex-wrap: wrap; gap: 10px; }
  .sources { gap: 6px; }
  .sources > span:first-child, .src small { display: none; }
  .src { padding: 4px 9px 4px 5px; font-size: 12px; }
  .screen { min-height: 520px; }
}

@media (max-width: 600px) {
  .pairs { grid-template-columns: 1fr; }
  .pair-q { min-height: 0; }
  .pair-q::after { font-size: 150px; bottom: -46px; } /* round 11: the big closing quote sat over the attribution on a narrow card */
  .steps, .solutions { gap: 10px; }
  .step, .sol { aspect-ratio: auto; min-height: 168px; padding: 36px 14px 18px; } /* round 7: room for the number above centred text */
  .step h3, .sol h4 { font-size: 19px; }
  .sol p { font-size: 12px; }
  .audit-list .mark { width: 120px; height: 120px; }
  .brief { grid-template-columns: 1fr; }
  .scene { padding: 24px 16px 28px; border-radius: 16px; }
  .audit-list li { padding: 36px 18px 20px; }
}

/* Round 11 (2026-09-21), small phones: the nav was a few pixels short of fitting at 360px wide, and the hero heading broke to four lines */
@media (max-width: 480px) {
  .nav { padding-block: 16px; }
  .brand { letter-spacing: .2em; font-size: 12px; gap: 10px; }
  .brand img { width: 30px; height: 30px; }
  .nav .btn { padding: 10px 16px; font-size: 14px; }
  .hero { padding-block: 40px 64px; }
  .hero h1 { font-size: clamp(34px, 10.5vw, 42px); }
  .hero .sub { margin-top: 20px; }
  .hero .cta { margin-top: 28px; }
  .head { margin-bottom: 32px; }
  .callout { margin-top: 36px; }
  .btn, .sol, .pair-q, .mode { -webkit-tap-highlight-color: transparent; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn, .sol, .step { transition: none; } .caret { animation: none; } .reply > * { transition: none; } .wave i { animation: none; } .pairs.is-live .pair.is-open .pair-a { animation: none; } }

/* Portrait: the img swaps itself in when assets/jamie.jpg exists (see index.html) */
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.portrait figcaption { position: relative; }
.portrait:not(.is-empty) figcaption, .portrait:not(.is-empty)::after { display: none; }

/* Scroll reveals. Resting state is visible; JS arms an element only when it is below the fold,
   so a shared link, a screenshot or a browser without JS never shows an empty page. */
.reveal.is-armed { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-armed.is-in { opacity: 1; transform: none; }

/* Booking modal: every "Book a call" opens the calendar in place */
.modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 48px); visibility: hidden; opacity: 0; transition: opacity .25s ease, visibility 0s linear .25s; }
.modal.is-open { visibility: visible; opacity: 1; transition: opacity .25s ease, visibility 0s; }
.modal-scrim { position: absolute; inset: 0; background: rgba(20,19,17,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal-panel { position: relative; display: flex; flex-direction: column; width: min(100%, 1020px); max-height: 100%; border: 1px solid var(--mist); border-radius: var(--r); background: var(--chalk); color: var(--ink); opacity: 0; transform: translateY(20px) scale(.985); transition: transform .4s ease .05s, opacity .3s ease .05s; overflow: hidden; }
.modal.is-open .modal-panel { opacity: 1; transform: translateY(0) scale(1); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-shrink: 0; padding: 14px 14px 14px 24px; border-bottom: 1px solid var(--mist-2); }
.modal-head span { font-weight: 600; font-size: 15px; }
.modal-close { all: unset; position: relative; width: 42px; height: 42px; flex-shrink: 0; border-radius: 10px; border: 1px solid var(--mist); cursor: pointer; transition: border-color .15s ease; }
.modal-close::before, .modal-close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 1px; background: var(--ink); }
.modal-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.modal-close:hover { border-color: var(--ink); }
.modal-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.modal-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--mist) transparent; }
.modal-cal { height: clamp(460px, calc(100dvh - 12rem), 720px); }
.modal-fallback { display: none; flex-direction: column; align-items: flex-start; gap: 22px; padding: 48px 24px; color: var(--penumbra); }
.modal-fallback.is-shown { display: flex; }
body.is-locked .nav { padding-right: var(--sbw, 0px); }

/* Support pages: privacy, terms, 404 */
.legal { padding-block: clamp(56px, 8vw, 96px); }
.legal .prose { max-width: 40em; display: grid; gap: 16px; }
.legal h1 { font-size: clamp(34px, 4.6vw, 52px); line-height: 1.05; }
.legal h2 { font-family: var(--body); font-weight: 600; font-size: 19px; margin-top: 18px; }
.legal p { color: #3B3E45; }
.legal p a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; }
.legal .updated { color: var(--penumbra); font-size: 14px; }
.notfound { min-height: 70vh; display: grid; place-content: center; justify-items: start; gap: 18px; padding-block: 64px; }
.notfound img { width: 56px; height: 56px; }
.notfound h1 { font-size: clamp(34px, 4.6vw, 52px); }
.notfound p { color: var(--penumbra); }
.notfound .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

@media (max-width: 1000px) {
  .portrait.is-empty { display: none; }
}
@media (max-width: 600px) {
  .modal { padding: 0; align-items: flex-end; }
  .modal-panel { height: 94dvh; max-height: 94dvh; border-radius: var(--r) var(--r) 0 0; }
  .modal-cal { height: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal.is-armed { opacity: 1; transform: none; transition: none; }
  .modal-panel, .modal.is-open .modal-panel { transform: none; transition: opacity .16s linear; }
}

/* WhatsApp bubble (2026-09-22). Fixed bottom-right on every page, under the booking modal (200), hidden in print.
   WhatsApp's own green on purpose: the bubble is recognised, not read. The label shows on hover at desktop only. */
.wa { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 150; display: flex; align-items: center; gap: 10px; text-decoration: none; }
.wa svg { width: 56px; height: 56px; padding: 13px; box-sizing: border-box; border-radius: 50%; background: #25D366; fill: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.22); transition: transform .15s ease, box-shadow .15s ease; }
.wa:hover svg, .wa:focus-visible svg { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.28); }
.wa:focus-visible { outline: none; }
.wa:focus-visible svg { outline: 2px solid var(--gold); outline-offset: 3px; }
.wa-label { font-family: var(--body); font-weight: 600; font-size: 14px; color: var(--bone); background: var(--black); border: 1px solid rgba(241,238,230,.18); padding: 8px 14px; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,.18); opacity: 0; transform: translateX(6px); transition: opacity .15s ease, transform .15s ease; pointer-events: none; }
.wa:hover .wa-label, .wa:focus-visible .wa-label { opacity: 1; transform: none; }
@media (hover: none), (max-width: 600px) { .wa-label { display: none; } }
@media (max-width: 600px) { .wa { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } .wa svg { width: 52px; height: 52px; padding: 12px; } }
@media (prefers-reduced-motion: reduce) { .wa svg, .wa-label { transition: none; } }
@media print { .wa { display: none; } }

/* Questions (#faq, added 2026-09-23): native details/summary so every answer is on the page for search with JS off.
   Chalk cards on the Sand band, same edge and gold as the week answers. No monospace, no letter-spaced caps. */
.faq { display: grid; gap: 10px; max-width: 46em; margin-inline: auto; }
.faq-item { background: var(--chalk); border: 1px solid var(--mist-2); border-radius: var(--r); transition: border-color .2s ease; }
.faq-item:hover, .faq-item[open] { border-color: rgba(198,163,91,.55); }
.faq-item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: 18px 22px; font-family: var(--display); font-weight: 500; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.3; letter-spacing: -.01em; color: var(--ink); border-radius: var(--r); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; width: 26px; height: 26px; line-height: 25px; text-align: center; border: 1px solid rgba(198,163,91,.6); border-radius: 50%; color: var(--gold-deep); font-family: var(--body); font-weight: 500; font-size: 18px; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.faq-item .a { display: grid; gap: 10px; padding: 0 22px 20px; max-width: 42em; }
.faq-item .a p { margin: 0; color: #3B3E45; font-size: 15.5px; line-height: 1.6; }
.faq-line { margin: 28px auto 0; text-align: center; color: var(--penumbra); font-size: clamp(16px, 1.4vw, 18px); max-width: 40em; }
@media (max-width: 600px) { .faq-item summary { padding: 16px 18px; } .faq-item .a { padding: 0 18px 18px; } }
@media (prefers-reduced-motion: reduce) { .faq-item { transition: none; } }