.display-xl{font-family:var(--font-display);font-size:96px;line-height:0.92;font-weight:800;letter-spacing:0.005em}
.display-lg{font-family:var(--font-display);font-size:64px;line-height:0.95;font-weight:800;letter-spacing:0.005em}
.display-md{font-family:var(--font-display);font-size:40px;line-height:1;font-weight:700;letter-spacing:0.01em}
.title{font-family:var(--font-sans);font-size:22px;line-height:28px;font-weight:600;letter-spacing:-0.01em}
.body-lg{font-family:var(--font-sans);font-size:18px;line-height:28px;font-weight:400;letter-spacing:normal}
.body{font-family:var(--font-sans);font-size:15px;line-height:24px;font-weight:400;letter-spacing:normal}
.caption{font-family:var(--font-sans);font-size:13px;line-height:18px;font-weight:400;letter-spacing:normal}
.label{font-family:var(--font-mono);font-size:12px;line-height:16px;font-weight:500;letter-spacing:0.08em}
.price{font-family:var(--font-mono);font-size:20px;line-height:24px;font-weight:500;letter-spacing:-0.01em}


/* ===== the scene: five planes, one focus plane, haze between ===== */
.boc-scene { position: relative; overflow: hidden; isolation: isolate; color: var(--ink); background: var(--sky-low); }
.boc-sky, .boc-plane { position: absolute; inset: -4% -8% -6% -8%; pointer-events: none; }
.boc-sky svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.boc-s-zenith { stop-color: var(--sky-zenith); } .boc-s-upper { stop-color: var(--sky-upper); } .boc-s-low { stop-color: var(--sky-low); }
.boc-s-horizon { stop-color: var(--sky-horizon); } .boc-s-sun { stop-color: var(--sun); }
.boc-s-star { fill: var(--star); }
/* weather: clouds shrink toward the horizon, a veil greys the sky when it is overcast, rain and snow fall in front of the rooftops and behind the UI */
.boc-weather { position: absolute; inset: -4% -8% -6% -8%; pointer-events: none; }
.boc-clouds { position: absolute; inset: 0; opacity: var(--boc-cloud, 0.2); transition: opacity 2s ease; }
.boc-clouds > svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: blur(3px); animation: boc-drift 140s ease-in-out infinite alternate; }
.boc-s-cloud { fill: var(--cloud); }
.boc-veil { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--overcast), var(--overcast) 55%, transparent 72%); opacity: var(--boc-veil, 0); transition: opacity 2s ease; }
@keyframes boc-drift { from { transform: translateX(-2.5%); } to { transform: translateX(2.5%); } }
.boc-precip { position: absolute; inset: 0; pointer-events: none; display: none; background: var(--precip);
  -webkit-mask-size: 160px 160px; mask-size: 160px 160px; -webkit-mask-repeat: repeat; mask-repeat: repeat; }
[data-sky="rain"] .boc-precip { display: block; opacity: .4; animation: boc-rain .5s linear infinite;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg stroke='%23000' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M20 4l-6 30M68 40l-6 30M120 12l-6 30M150 84l-6 30M38 96l-6 30M92 118l-6 30M4 140l-3 16M136 146l-3 14'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg stroke='%23000' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M20 4l-6 30M68 40l-6 30M120 12l-6 30M150 84l-6 30M38 96l-6 30M92 118l-6 30M4 140l-3 16M136 146l-3 14'/%3E%3C/g%3E%3C/svg%3E"); }
[data-sky="snow"] .boc-precip { display: block; background: var(--snow); opacity: .75; -webkit-mask-size: 230px 230px; mask-size: 230px 230px; animation: boc-snow 11s linear infinite;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%23000'%3E%3Ccircle cx='18' cy='12' r='2.2'/%3E%3Ccircle cx='70' cy='44' r='1.6'/%3E%3Ccircle cx='124' cy='20' r='2.6'/%3E%3Ccircle cx='150' cy='92' r='1.8'/%3E%3Ccircle cx='40' cy='100' r='2.4'/%3E%3Ccircle cx='96' cy='126' r='1.5'/%3E%3Ccircle cx='8' cy='148' r='2'/%3E%3Ccircle cx='134' cy='150' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%23000'%3E%3Ccircle cx='18' cy='12' r='2.2'/%3E%3Ccircle cx='70' cy='44' r='1.6'/%3E%3Ccircle cx='124' cy='20' r='2.6'/%3E%3Ccircle cx='150' cy='92' r='1.8'/%3E%3Ccircle cx='40' cy='100' r='2.4'/%3E%3Ccircle cx='96' cy='126' r='1.5'/%3E%3Ccircle cx='8' cy='148' r='2'/%3E%3Ccircle cx='134' cy='150' r='1.4'/%3E%3C/g%3E%3C/svg%3E"); }
@keyframes boc-rain { from { -webkit-mask-position: 0 0; mask-position: 0 0; } to { -webkit-mask-position: -32px 160px; mask-position: -32px 160px; } }
@keyframes boc-snow { from { -webkit-mask-position: 0 0; mask-position: 0 0; } to { -webkit-mask-position: 46px 230px; mask-position: 46px 230px; } }
/* fog and falling weather swallow the far planes: the skyline nearly goes, the haze thickens */
[data-sky="fog"] .boc-plane-skyline, [data-sky="snow"] .boc-plane-skyline { opacity: .28; }
[data-sky="rain"] .boc-plane-skyline { opacity: .55; }
[data-sky="fog"] .boc-plane-far, [data-sky="snow"] .boc-plane-far { opacity: .6; }
/* G2 (VERDICTS.md "RULING + DECLARE — SITE CP5c"): `height` here used to jump 56%/40% -> 80%
   the moment the live weather fetch resolved (fog/snow/rain), well after first paint — a real,
   measured CLS source (0.12-0.14). The mood still reads (opacity alone), but the box no longer
   resizes, so it can never shift layout again. Colour/scrim untouched (Robert's RULING B). */
/* SITE-V35 repair 3 (coordinator, verdict 3ae962d finding (i)): restores the `height:80%` v35
   carries at this same selector (design/site-mock-v35.html line 55) — dropped live by the G2 CLS
   fix above (this comment block), which traded the resize-on-weather-resolve layout shift for a
   fixed-height, opacity-only haze. Restoring height reopens that CLS source (a measured 0.12-0.14
   when the box still jumped 56/40% -> 80% the moment followChicagoSky's fetch resolved); this is
   an explicit, named instruction from the coordinator (repair 3, item 2), not a re-discovery that
   the CLS problem stopped mattering — flagged in the build report for Robert/coordinator's own
   call on which one wins going forward. */
[data-sky="fog"] .boc-haze, [data-sky="snow"] .boc-haze, [data-sky="rain"] .boc-haze { opacity: 1; height: 80%; }
.boc-plane-skyline, .boc-plane-far { transition: opacity 2s ease; }
.boc-plane { will-change: transform; }
.boc-plane > svg, .boc-photo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.boc-photo { object-fit: cover; object-position: 50% 100%; }
/* a real skyline photograph behind the drawn suburb. Blended (the default) it is shrunk to horizon size, mirrored to the view from the west, bleached and tinted so it reads as a pale, hazy, far-off city on the drawn sky; its own sky drops out under multiply */
.boc-backdrop { position: absolute; display: block; max-width: none; filter: blur(var(--blur-skyline)); }
.boc-scene-backdrop .boc-sky { display: none; }
.boc-scene-blend .boc-backdrop { filter: grayscale(1) sepia(1) hue-rotate(175deg) saturate(.55) brightness(1.75) contrast(1.6) blur(var(--blur-skyline)); mix-blend-mode: multiply; opacity: .55;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18%, #000 82%, transparent 100%), linear-gradient(to bottom, transparent 12%, #000 52%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 18%, #000 82%, transparent 100%), linear-gradient(to bottom, transparent 12%, #000 52%); mask-composite: intersect; }
.boc-scene-blend .boc-backdrop.boc-flip, .boc-scene-backdrop .boc-backdrop.boc-flip { transform: scaleX(-1); }
/* dark themes: the photo is inverted so the towers glow out of the dark sky instead of printing onto it */
[data-theme="dawn"] .boc-scene-blend .boc-backdrop, [data-theme="evening"] .boc-scene-blend .boc-backdrop { filter: grayscale(1) invert(1) sepia(1) hue-rotate(-20deg) saturate(.7) brightness(.62) contrast(1.5) blur(var(--blur-skyline)); mix-blend-mode: screen; opacity: .6; }
[data-theme="night"] .boc-scene-blend .boc-backdrop { filter: grayscale(1) invert(1) sepia(1) hue-rotate(185deg) saturate(.6) brightness(.42) contrast(1.5) blur(var(--blur-skyline)); mix-blend-mode: screen; opacity: .7; }
[data-theme="morning"] .boc-scene-blend .boc-backdrop { opacity: .45; }
/* one real photo sliced into planes: the base frame carries the sky, the foreground band is pushed out of focus and enlarged, haze is halved */
.boc-scene-photo .boc-sky { display: none; }
.boc-scene-photo .boc-plane-fore > .boc-photo { transform: scale(1.12); transform-origin: 50% 100%; }
.boc-scene-photo .boc-haze { opacity: .45; }
.boc-plane-skyline > svg, .boc-plane-skyline > .boc-photo { filter: blur(var(--blur-skyline)); }
.boc-plane-far > svg, .boc-plane-far > .boc-photo { filter: blur(var(--blur-far)) drop-shadow(0 -8px 14px var(--ridge-glow)); }
.boc-plane-focus > svg, .boc-plane-focus > .boc-photo { filter: blur(var(--blur-focus)) drop-shadow(0 -10px 18px var(--ridge-glow)); }
.boc-plane-near > svg, .boc-plane-near > .boc-photo { filter: blur(var(--blur-near)) drop-shadow(0 -14px 26px var(--ridge-glow)); }
.boc-plane-fore > svg, .boc-plane-fore > .boc-photo { filter: blur(var(--blur-fore)); }
.boc-haze { position: absolute; left: 0; right: 0; bottom: 0; height: 56%; background: linear-gradient(to top, transparent 0%, var(--fog) 55%, transparent 100%); }
.boc-plane-focus .boc-haze { height: 40%; opacity: .7; }

.boc-s-5 { fill: var(--scene-5); } .boc-s-4 { fill: var(--scene-4); } .boc-s-3 { fill: var(--scene-3); }
.boc-s-2 { fill: var(--scene-2); } .boc-s-1 { fill: var(--scene-1); }
.boc-s-lake { fill: var(--lake); } .boc-s-glint { fill: var(--sun); opacity: .8; }
.boc-s-light { fill: var(--roof-light); }
.boc-s-tuft { fill: var(--roof-light); opacity: .22; }
.boc-s-glow { fill: var(--window-glow); }
.boc-s-mast { fill: none; stroke: currentColor; stroke-width: 1.4; }
.boc-s-5 .boc-s-mast { stroke: var(--scene-5); } .boc-s-4 .boc-s-mast { stroke: var(--scene-4); stroke-width: 2; } .boc-s-3 .boc-s-mast { stroke: var(--scene-3); stroke-width: 2.5; }
.boc-s-ladder path { fill: none; stroke: var(--hivis); stroke-width: 3.5; stroke-linecap: round; }

/* content floats above the near roofs; only the out-of-focus foreground canopy passes in front of it */
.boc-plane.boc-scene-content { inset: 0; pointer-events: none; position: relative; z-index: auto; }
.boc-scene-content > * { pointer-events: auto; }

/* ===== hero layout ===== */
.boc-hero { min-height: clamp(720px, 100vh, 960px); }
.boc-hero-inner { display: flex; flex-direction: column; align-items: center; width: 100%; will-change: transform, opacity; }
.boc-hero .boc-scene-content { display: flex; flex-direction: column; align-items: center; min-height: inherit; padding: var(--space-16) var(--space-6) var(--space-16); box-sizing: border-box; text-align: center; }
.boc-hero-copy { max-width: 880px; box-sizing: border-box; min-height: calc(var(--boc-horizon, 0px) - var(--space-16) - var(--space-4)); }
.boc-hero-copy h1 { color: var(--ink); margin: var(--space-4) 0 0; text-transform: uppercase; text-wrap: balance; }
.boc-hero-copy .body-lg { margin: var(--space-6) auto 0; max-width: 560px; color: var(--ink); text-wrap: pretty; }
.boc-hero-copy .boc-row { justify-content: center; margin-top: var(--space-8); }
.boc-hero-stage { width: min(440px, 100%); text-align: left; }
.boc-hero-card { width: 100%; }
/* tiles inside the picture: positioned off the horizon the scene reports, thin glass, slightly smaller than life, bottoms tucked behind the near roofs */
.boc-plane-inside { inset: 0; }
.boc-tile-inside { position: absolute; width: 232px; box-sizing: border-box; background: var(--glass-thin); transform: scale(.94); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.15); backdrop-filter: blur(var(--blur-glass)) saturate(1.15); }
.boc-tile-inside-1 { left: max(3%, calc(50% - 540px)); top: calc(var(--boc-horizon, 60%) + 120px); }
.boc-tile-inside-2 { right: max(3%, calc(50% - 560px)); top: calc(var(--boc-horizon, 60%) + 100px); }
.boc-tile-inside-3 { left: max(1%, calc(50% - 820px)); top: calc(var(--boc-horizon, 60%) + 60px); }
.boc-tile-inside .caption, .boc-tile-inside .boc-tile-job { color: var(--ink); }
/* SITE-V35 repair 3 (AMEND 3 check 12: "hidden below 1000px, shown at 1000px and above" — was
   max-width:1000px, matching the mock's own inclusive breakpoint; AMEND 3 explicitly narrows the
   hidden range to exclude 1000px itself). */
@media (max-width: 999px) { .boc-tile-inside { display: none; } }
.boc-eyebrow { margin: 0; text-transform: uppercase; color: var(--hivis-text); }
.boc-hero-copy .boc-eyebrow { color: var(--ink); }
.boc-hero-copy .body-lg, .boc-hero-copy .boc-eyebrow { text-shadow: 0 0 4px var(--sky-low), 0 0 18px var(--sky-low); }
.boc-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
@media (max-width: 720px) {
  .boc-hero .boc-scene-content { padding: var(--space-16) var(--space-4) 0; }
  .boc-hero-copy h1 { font-size: 56px; }
}

/* ===== Wordmark: Boots in ink, OnCall in hi-vis ===== */
.boc-wordmark { font: 800 26px/1 var(--font-display); letter-spacing: .01em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.boc-wordmark em { font-style: normal; color: var(--hivis); }

/* ===== Button ===== */
.boc-btn { display: inline-flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-pill); border: 1px solid transparent; font: 600 15px/1 var(--font-sans); letter-spacing: -0.005em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease; }
.boc-btn-lg { height: 52px; padding: 0 var(--space-6); font-size: 16px; }
.boc-btn-primary { background: var(--hivis); color: var(--on-hivis); box-shadow: var(--lift-2); }
.boc-btn-primary:hover { transform: translateY(-2px); box-shadow: var(--lift-3); }
.boc-btn-primary:active { transform: translateY(0); box-shadow: var(--lift-1); }
.boc-btn-quiet { background: var(--glass); color: var(--ink); border-color: var(--ink); box-shadow: inset 0 1px 0 var(--glass-edge); -webkit-backdrop-filter: blur(var(--blur-glass)); backdrop-filter: blur(var(--blur-glass)); }
.boc-btn-quiet:hover { border-color: var(--ink); }
.boc-btn-text { background: none; color: var(--hivis-text); padding: 0 var(--space-1); text-decoration: underline; text-underline-offset: 4px; }
.boc-btn:focus-visible, .boc-chip:focus-visible, .boc-field input:focus-visible, .boc-field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.boc-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.boc-icon { flex: none; }

/* ===== Badge ===== */
.boc-badge { display: inline-flex; align-items: center; gap: var(--space-2); height: 26px; padding: 0 var(--space-3) 0 10px; border-radius: var(--radius-pill); border: 1px solid var(--glass-line); background: var(--glass); color: var(--ink); font: 500 13px/1 var(--font-sans); white-space: nowrap; }
.boc-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--steel); }
.boc-badge-ok i { background: var(--ok); } .boc-badge-warn i { background: var(--warn); } .boc-badge-danger i { background: var(--danger); }
.boc-badge-live i { background: var(--hivis-text); box-shadow: 0 0 0 4px var(--fog); }

/* ===== TradeChip ===== */
.boc-chip { display: inline-flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-4) 0 var(--space-3); border-radius: var(--radius-pill); border: 1px solid var(--ink); background: var(--glass); color: var(--ink); font: 500 15px/1 var(--font-sans); cursor: pointer; box-shadow: var(--lift-1); -webkit-backdrop-filter: blur(var(--blur-glass)); backdrop-filter: blur(var(--blur-glass)); }
.boc-chip .boc-icon { color: var(--ink); }
.boc-chip:hover { border-color: var(--ink); }
.boc-chip[aria-pressed="true"] { border-color: var(--hivis-text); box-shadow: 0 0 0 1px var(--hivis-text), var(--lift-1); }
.boc-chip[aria-pressed="true"] .boc-icon { color: var(--hivis-text); }

/* ===== JobCard ===== */
.boc-card { padding: var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--glass-line); background: var(--glass); color: var(--ink); box-shadow: inset 0 1px 0 var(--glass-edge), var(--lift-3); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.2); backdrop-filter: blur(var(--blur-glass)) saturate(1.2); --boc-muted: var(--ink); --boc-accent: var(--ink); }
.boc-card-solid { --boc-muted: var(--ink-muted); --boc-accent: var(--hivis-text); background: var(--surface-raised); border-color: var(--line); border-radius: var(--radius-md); box-shadow: var(--lift-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
.boc-card header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.boc-card h3 { margin: var(--space-3) 0 0; }
.boc-card .boc-eyebrow { color: var(--boc-accent, var(--hivis-text)); }
.boc-card-where { display: flex; align-items: center; gap: var(--space-1); margin: var(--space-1) 0 0; color: var(--boc-muted, var(--ink-muted)); font: 400 15px/24px var(--font-sans); }
.boc-card dl { display: flex; gap: var(--space-8); margin: var(--space-6) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--glass-line); }
.boc-card dt { color: var(--boc-muted, var(--ink-muted)); text-transform: uppercase; }
.boc-card dd { margin: var(--space-1) 0 0; }
.boc-card dd.price { font-variant-numeric: tabular-nums; }
.boc-card footer { display: flex; gap: var(--space-3); margin-top: var(--space-6); }

/* ===== PriceTile ===== */
.boc-tile { --boc-muted: var(--ink); --boc-accent: var(--ink); padding: var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--glass-line); background: var(--glass); color: var(--ink); box-shadow: inset 0 1px 0 var(--glass-edge), var(--lift-2); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.2); backdrop-filter: blur(var(--blur-glass)) saturate(1.2); }
.boc-tile-solid { --boc-muted: var(--ink-muted); --boc-accent: var(--leather); background: var(--surface-raised); border-color: var(--line); border-radius: var(--radius-md); -webkit-backdrop-filter: none; backdrop-filter: none; }
.boc-tile p { margin: 0; }
.boc-tile-job { display: flex; align-items: center; gap: var(--space-2); text-transform: uppercase; color: var(--boc-muted); }
.boc-tile-job .boc-icon { color: var(--boc-accent); }
.boc-tile .price { margin-top: var(--space-2); font-variant-numeric: tabular-nums; }
.boc-tile .caption { margin-top: var(--space-1); color: var(--boc-muted); }

/* ===== AssistantCard: the chat card, living inside the picture ===== */
.boc-assistant { position: relative; padding-bottom: var(--space-6); }
.boc-assistant > header { justify-content: flex-start; text-transform: uppercase; }
.boc-assistant-name { display: inline-flex; align-items: center; gap: var(--space-2); }
.boc-assistant-name i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.boc-assistant-ask { display: flex; gap: var(--space-2); align-items: flex-end; margin-top: var(--space-3); }
.boc-assistant-ask textarea { flex: 1; resize: none; box-sizing: border-box; min-height: 48px; max-height: 96px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--ink); background: var(--glass); color: var(--ink); font: 400 16px/24px var(--font-sans); }
.boc-assistant-ask textarea::placeholder { color: var(--ink); opacity: .85; }
.boc-assistant-ask textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.boc-assistant-send { width: 48px; height: 48px; padding: 0; justify-content: center; flex: none; }
.boc-assistant-hint { margin: var(--space-3) 0 0; color: var(--ink); }
/* replies stack upward, above the ask box, so they rise into the sky instead of sinking behind the rooftops */
.boc-assistant-thread { display: grid; gap: var(--space-2); max-height: 0; overflow: hidden; transition: max-height .35s ease, margin-top .35s ease; }
.boc-assistant-thread.is-open { max-height: 220px; margin-top: var(--space-3); overflow-y: auto; }
.boc-bubble { max-width: 88%; padding: 10px 14px; border-radius: 16px; font: 400 14px/20px var(--font-sans); }
.boc-bubble-me { justify-self: end; background: var(--ink); color: var(--ground); border-bottom-right-radius: 4px; }
.boc-bubble-bot { justify-self: start; background: var(--surface-raised); color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.boc-bubble-bot b { font-family: var(--font-mono); font-weight: 500; white-space: nowrap; }
.boc-bubble-bot small { display: block; margin-top: 4px; font-size: 12px; opacity: .85; }
/* in the hero: anchored by its bottom edge below the treeline, so the near trees and roofs hide about its lowest third */
.boc-hero-assistant { position: absolute; left: 50%; top: 80%; width: min(500px, calc(100% - 2 * var(--space-4))); transform: translate(-50%, -100%); pointer-events: auto; will-change: opacity; }
/* here the card is a solid object, not a pane: what is behind it is hidden, what is in front of it hides it. That is the whole depth cue. */
.boc-hero-assistant > .boc-assistant { background: var(--glass-deep); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); }
.boc-hero-assistant > .boc-assistant { padding-bottom: 64px; }
@media (max-width: 600px) { .boc-hero-assistant > .boc-assistant { padding-bottom: 92px; } }
.boc-hero-assistant > .boc-assistant:has(.boc-assistant-rows) { padding-bottom: var(--space-6); }
.boc-assistant-thread.is-open ~ .boc-assistant-hint { display: none; }
.boc-assistant-rows { margin-top: var(--space-4); border-top: 1px solid var(--glass-line); }
.boc-assistant-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; width: 100%; padding: 11px 2px; border: 0; border-bottom: 1px solid var(--glass-line); background: none; color: var(--ink); font: 500 14px/20px var(--font-sans); text-align: left; cursor: pointer; }
.boc-assistant-row .price { font-size: 14px; }
.boc-assistant-row:hover { color: var(--hivis-text); }
.boc-assistant-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.boc-hero .body-lg { transition: opacity .3s ease; }
.boc-hero.is-answering .boc-hero-copy .body-lg { opacity: 0; }
/* SITE-CHAT-CLEAN Design item 1, "ONE THING AT A TIME" (DECLARE-SITE-CHAT-CLEAN-2026-09-23.md):
   after the first send the WHOLE hero statement steps back, not just the sub-copy — headline and
   eyebrow fade with it, leaving the conversation as the one thing on screen. */
.boc-hero-copy h1, .boc-hero-copy .boc-eyebrow { transition: opacity .3s ease; }
.boc-hero.is-answering .boc-hero-copy h1, .boc-hero.is-answering .boc-hero-copy .boc-eyebrow { opacity: 0; }
.boc-assistant-ask textarea:placeholder-shown { white-space: nowrap; overflow: hidden; }

/* ===== the journey: a pinned hero you scroll through ===== */
.boc-track { position: relative; height: 300vh; }
.boc-track-anchor { position: absolute; top: 60%; left: 0; }
.boc-hero.boc-sticky { position: sticky; top: 0; height: 100vh; min-height: 0; }
.boc-browser { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 88px var(--space-4) 5vh; box-sizing: border-box; pointer-events: none; will-change: transform, opacity; }
.boc-browser > * { pointer-events: auto; }
/* F5 (SITE CP5 hardening, check 5): while faded near-invisible at the top of the scroll journey the
   browser must stay reachable by Tab (that's the fix — see boc.js onProgress) but not clickable by a
   mouse; `.is-inert` blocks pointer interaction without touching visibility/display, so it never
   leaves the accessibility tree. */
.boc-browser.is-inert, .boc-browser.is-inert > * { pointer-events: none; }
.boc-track-still { height: auto; }
.boc-track-still .boc-hero.boc-sticky { position: relative; height: auto; min-height: 100vh; }
.boc-track-still .boc-browser { position: relative; inset: auto; background: var(--ground); padding: var(--space-16) var(--space-4); }

/* ===== PriceBrowser: a coverflow with real perspective, on clear glass ===== */
.boc-browser-ui { width: min(1080px, 100%); color: var(--ink); text-align: center; }
.boc-browser-head { display: grid; justify-items: center; gap: var(--space-2); }
.boc-browser-head h2 { margin: 0; text-transform: uppercase; text-wrap: balance; }
.boc-browser-head .boc-eyebrow, .boc-browser-head h2 { text-shadow: 0 0 4px var(--sky-low), 0 0 18px var(--sky-low); }
.boc-browser-search { width: min(360px, 100%); margin-top: var(--space-3); text-align: left; }
.boc-browser-search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.boc-flow { outline: none; margin-top: var(--space-3); touch-action: pan-y; }
.boc-flow:focus-visible .is-active { outline: 2px solid var(--focus); outline-offset: 3px; }
.boc-flow-stage { position: relative; height: 316px; perspective: 1300px; perspective-origin: 50% 40%; display: flex; align-items: center; justify-content: center; }
.boc-flow-card { position: absolute; width: 224px; height: 296px; box-sizing: border-box; padding: var(--space-6) var(--space-4) var(--space-4); display: flex; flex-direction: column; text-align: left; cursor: pointer;
  border-radius: var(--radius-lg); border: 1px solid var(--glass-line); background: var(--glass-thin); color: var(--ink); box-shadow: inset 0 1px 0 var(--glass-edge), var(--lift-3);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.15); backdrop-filter: blur(var(--blur-glass)) saturate(1.15);
  transition: transform .5s cubic-bezier(.22,.9,.32,1), opacity .4s ease; transform-style: preserve-3d; }
.boc-flow-card p { margin: 0; }
.boc-flow-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-md); border: 1px solid var(--glass-line); color: var(--ink); }
.boc-flow-job { margin-top: var(--space-3) !important; font: 600 16px/22px var(--font-sans); }
.boc-flow-k { margin-top: auto !important; text-transform: uppercase; color: var(--ink); }
.boc-flow-typ { font: 800 44px/1 var(--font-display); letter-spacing: .005em; }
.boc-flow-range { margin-top: 2px !important; font-size: 15px; font-variant-numeric: tabular-nums; }
.boc-flow-card .caption { margin-top: var(--space-2) !important; color: var(--ink); }
.boc-flow-cta { display: none; margin-top: var(--space-3); align-self: flex-start; height: 36px; }
.boc-flow-card.is-active { cursor: default; }
.boc-flow-card.is-active .caption { display: none; }
.boc-flow-card.is-active .boc-flow-cta { display: inline-flex; }
.boc-flow-none { max-width: 420px; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--glass-thin); border: 1px solid var(--glass-line); }
.boc-flow-nav { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-3); }
.boc-flow-nav .label { min-width: 64px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--glass-thin); }
.boc-flow-arrow { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ink); -webkit-backdrop-filter: blur(var(--blur-glass)); backdrop-filter: blur(var(--blur-glass)); background: var(--glass); color: var(--ink); cursor: pointer; }
.boc-flow-arrow:disabled { opacity: .4; cursor: default; }
.boc-flow-arrow:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.boc-flow-prev svg { transform: scaleX(-1); }
@media (max-height: 760px) { .boc-browser-head h2 { font-size: 30px; } .boc-flow-stage { height: 300px; } .boc-flow { margin-top: var(--space-3); } }
@media (max-width: 720px) { .boc-flow-card { width: 200px; } .boc-browser-head h2 { font-size: 30px; } }

/* CP6a v2 (VERDICTS.md AMEND "CP6a v2", second and last attempt): the phone scroll-snap +
   wrap-clone list was rejected live (the re-centre jump was visible). Phones now share the SAME
   transform-ring engine as desktop coverflow (boc.js layout()) — every card is absolutely
   positioned and centred, translateX'd by its modular offset from `active`, flat (no rotateY/
   scale/3D fan; desktop keeps that look untouched below this query). Card width is 88% of the
   stage so neighbours peek both sides; there is no clone, no native scroll, no first or last card.
   Desktop (>=980px) is untouched — this query never reaches that floor. */
@media (max-width: 900px), (pointer: coarse) {
  .boc-flow-stage { position: relative; height: 316px; perspective: none; overflow: hidden; touch-action: pan-y; }
  .boc-flow-card { width: 88%; max-width: 88%; transition: transform .28s ease; }
  .boc-flow-stage.is-dragging .boc-flow-card { transition: none; }
}

/* the scene dissolves into the page instead of ending on an edge */
.boc-track::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34vh; z-index: 3; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--ground)); }
.boc-track-still::after { display: none; }
.boc-fade-top { position: absolute; left: 0; right: 0; top: 0; height: 46%; pointer-events: none; background: linear-gradient(to top, transparent, var(--ground)); }

/* ===== Statement ===== */
.boc-statement { background: var(--ground); color: var(--ink); padding: var(--space-24) var(--space-6); }
.boc-statement-in { max-width: 760px; margin: 0 auto; }
.boc-statement .boc-eyebrow { margin-bottom: var(--space-6); }
.boc-statement-p { margin: 0 0 var(--space-8); font: 500 32px/1.28 var(--font-sans); letter-spacing: -0.015em; text-wrap: pretty; }
.boc-statement-p:last-child { margin-bottom: 0; }
.boc-w { opacity: .2; transition: opacity .35s ease; }
@media (prefers-reduced-motion: reduce) { .boc-w { opacity: 1; transition: none; } }
.boc-w.is-lit { opacity: 1; }
@media (max-width: 720px) { .boc-statement { padding: var(--space-16) var(--space-4); } .boc-statement-p { font-size: 24px; } }

/* ===== StepStack ===== */
.boc-steps { background: var(--ground); color: var(--ink); padding: var(--space-16) 0 var(--space-24); }
.boc-steps-head { max-width: 1120px; margin: 0 auto var(--space-12); padding: 0 var(--space-6); }
.boc-steps-head h2 { margin: var(--space-3) 0 0; text-transform: uppercase; }
.boc-steps-list { display: grid; gap: var(--space-12); max-width: 1120px; margin: 0 auto; padding: 0 var(--space-6); }
.boc-step { position: sticky; top: calc(88px + var(--i, 0) * 28px); display: grid; grid-template-columns: 1.3fr 1fr; min-height: 470px; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--lift-3); }
.boc-step-scene { min-height: 470px; }
.boc-step-scene .boc-scene-content { display: grid; place-items: center; min-height: 470px; padding: var(--space-8); box-sizing: border-box; }
.boc-step-mock { width: min(380px, 100%); }
.boc-step-copy { display: flex; flex-direction: column; justify-content: center; padding: var(--space-12); }
.boc-step-num { margin: 0; text-transform: uppercase; color: var(--leather); }
.boc-step-copy h3 { margin: var(--space-4) 0 0; text-transform: uppercase; text-wrap: balance; }
.boc-step-copy .body-lg { margin: var(--space-4) 0 0; color: var(--ink-muted); text-wrap: pretty; }
@media (max-width: 860px) {
  .boc-step { position: relative; top: auto; grid-template-columns: 1fr; }
  .boc-step-scene, .boc-step-scene .boc-scene-content { min-height: 360px; }
  .boc-step-copy { padding: var(--space-8) var(--space-6); }
  .boc-steps-list { gap: var(--space-8); padding: 0 var(--space-4); } .boc-steps-head { padding: 0 var(--space-4); }
}

/* ===== ClosingScene ===== */
.boc-closing { min-height: min(92vh, 860px); }
.boc-closing .boc-scene-content { display: flex; flex-direction: column; align-items: center; min-height: inherit; box-sizing: border-box; padding: 24vh var(--space-6) var(--space-24); text-align: center; }
.boc-closing-in h2 { margin: 0 auto; max-width: 14ch; text-transform: uppercase; text-wrap: balance; }
.boc-closing-in .body-lg { margin: var(--space-4) auto 0; max-width: 520px; text-shadow: 0 0 4px var(--sky-low), 0 0 18px var(--sky-low); }
.boc-closing-in .boc-row { justify-content: center; margin-top: var(--space-8); }
.boc-closing-foot { position: absolute; left: 50%; bottom: var(--space-6); transform: translateX(-50%); z-index: 2; width: min(760px, calc(100% - 2 * var(--space-4))); box-sizing: border-box; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-6); border-radius: var(--radius-pill); border: 1px solid var(--glass-line); background: var(--glass); color: var(--ink); font: 400 13px/18px var(--font-sans); box-shadow: inset 0 1px 0 var(--glass-edge), var(--lift-2); -webkit-backdrop-filter: blur(var(--blur-glass)); backdrop-filter: blur(var(--blur-glass)); }
.boc-closing-foot b { font: 800 20px/1 var(--font-display); letter-spacing: .01em; }
@media (max-width: 720px) { .boc-closing-foot { border-radius: var(--radius-lg); justify-content: center; text-align: center; } .boc-closing-in h2 { font-size: 44px; } }

/* ===== Field ===== */
.boc-field { display: grid; gap: var(--space-2); color: var(--ink); }
.boc-field label { text-transform: uppercase; color: var(--ink-muted); }
.boc-field input, .boc-field textarea { box-sizing: border-box; width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--control-line); background: var(--surface); color: var(--ink); font: 400 15px/24px var(--font-sans); box-shadow: var(--lift-1); }
.boc-field input::placeholder, .boc-field textarea::placeholder { color: var(--ink-muted); opacity: 1; }
.boc-field .caption { margin: 0; color: var(--ink-muted); }
.boc-field-error input, .boc-field-error textarea { border-color: var(--danger); }
.boc-field-error .caption { color: var(--danger); }

@media (prefers-reduced-motion: reduce) { .boc-btn, .boc-flow-card { transition: none; } .boc-plane { transform: none !important; } .boc-clouds > svg, .boc-precip { animation: none !important; } }

*{box-sizing:border-box} html{scroll-behavior:smooth} html,body{margin:0;overflow-x:clip}
body{background:var(--ground);color:var(--ink);font-family:var(--font-sans);font-size:15px;line-height:24px;-webkit-font-smoothing:antialiased;transition:background-color .4s ease,color .4s ease}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--space-6)}
@media(max-width:720px){.wrap{padding:0 var(--space-4)}}
/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) var(--space-6);transition:background-color .3s ease,box-shadow .3s ease}
.nav.solid{background:var(--glass);-webkit-backdrop-filter:blur(var(--blur-glass));backdrop-filter:blur(var(--blur-glass));box-shadow:0 1px 0 var(--glass-line)}
.nav-links{display:none;gap:var(--space-6);font-weight:500}
.nav-links a:hover{color:var(--hivis-text)}
@media(min-width:980px){.nav-links{display:flex}}
.nav-right{display:flex;align-items:center;gap:var(--space-3)}
@media(max-width:720px){.nav{padding:var(--space-2) var(--space-4)}.nav .boc-wordmark{font-size:22px}}
/* hero */
.boc-hero .boc-scene-content{padding-top:calc(var(--space-24) + var(--space-4))}
.boc-hero-copy{min-height:0}
.mock{position:fixed;right:12px;bottom:12px;z-index:60;padding:8px 12px;border-radius:var(--radius-md);background:var(--ink);color:var(--ground);font-size:11px;line-height:1.35;max-width:60vw}

@media(max-height:820px){.boc-hero-copy h1{font-size:72px}.boc-hero .boc-scene-content{padding-top:var(--space-24)}}


/* ===== v21-v35 design carry (SITE-V35, DECLARE-SITE-V35-2026-09-22): hero assistant far/deep plane, six far-ridge tags, phone-scale block, carousel readability, step numbering, closing footer plane, sky storm/conditions look ===== */
/* the hero ask bar: a thin pane of 85 percent glass sitting on the horizon, one rounded bar with the send inside it */
.boc-hero-assistant { width: min(600px, calc(100% - 2 * var(--space-4))); }
.boc-hero-assistant > .boc-assistant { padding: 12px 14px 44px; border-radius: 22px; background: color-mix(in srgb, var(--surface) 15%, transparent); border-color: color-mix(in srgb, var(--ink) 22%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 14%, transparent), 0 20px 50px -30px rgba(0,0,0,.6); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); }
.boc-hero-assistant .boc-assistant-name { font-size: 11px; opacity: .8; }
.boc-hero-assistant .boc-assistant-ask { position: relative; margin-top: 8px; align-items: stretch; gap: 0; }
.boc-hero-assistant .boc-assistant-ask textarea { min-height: 54px; max-height: 120px; padding: 15px 64px 15px 18px; border-radius: 16px; font-size: 17px; line-height: 24px; background: color-mix(in srgb, var(--surface) 35%, transparent); border-color: color-mix(in srgb, var(--ink) 40%, transparent); }
.boc-hero-assistant .boc-assistant-send { position: absolute; right: 6px; top: 6px; width: 42px; height: 42px; }
.boc-hero-assistant .boc-assistant-hint { margin: 8px 4px 0; font-size: 12px; line-height: 16px; opacity: .85; }
.boc-hero-assistant .boc-assistant-thread { max-height: 40vh; }
@media (max-width: 720px) {
  .boc-hero-assistant { width: min(360px, calc(100% - 2 * var(--space-4))); }
  .boc-hero-assistant > .boc-assistant { padding: 10px 12px 72px; }
  .boc-hero-assistant .boc-assistant-ask textarea { min-height: 50px; padding: 13px 56px 13px 14px; font-size: 16px; }
  .boc-hero-assistant .boc-assistant-send { width: 38px; height: 38px; top: 6px; right: 6px; }
}
@media (min-width: 721px) { .boc-hero-assistant .boc-assistant-hint { display: none; } .boc-hero-assistant > .boc-assistant { padding-bottom: 34px; } }
/* deep: the bar lives on the far plane, the one the far suburbs are drawn on. It drifts and flies with them, the mid rooftops pass in front of its foot,
   and it is drawn smaller, as a thing that far away would be. Chasing the horizon. */
@media (min-width: 721px) {
  .boc-hero-assistant { width: min(760px, calc(100% - 2 * var(--space-4))); }
  .boc-hero-assistant-deep > .boc-assistant { transform: scale(.78); transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
  .boc-hero-assistant-deep > .boc-assistant:focus-within, .boc-hero.is-answering .boc-hero-assistant-deep > .boc-assistant { transform: scale(.92); }
  .boc-hero-assistant .boc-assistant-ask textarea { font-size: 20px; min-height: 62px; padding: 19px 72px 19px 22px; }
  .boc-hero-assistant .boc-assistant-send { width: 46px; height: 46px; top: 8px; right: 8px; }
}
/* ===== v21: tiles, browser and footer on the far plane; sky from the observation ===== */
@media (min-width: 1000px) {
  /* price tags planted on far rooftops: small, on a stem, like a sign left where the job was done */
  .boc-tile-deep { width: 200px; transform-origin: 50% 100%; padding: 12px 14px; }
  .boc-tile-deep::after { content: ''; position: absolute; left: 50%; top: 100%; width: 2px; height: 26px; background: var(--ink); opacity: .45; }
  /* six tags, six sizes, planted along the far ridge at the sides; the middle stays clear for the bar */
  /* SITE-V35 repair 3 (AMEND 3 check 7: "tag rects must not overlap at 1440x800 and 1280x800"):
     these six offsets are otherwise byte-identical to design/site-mock-v35.html's own — and the
     mock ITSELF overlaps at 1440x800 (measured live: pairs 1x3, 2x4, 2x6 by its own numbering,
     0-indexed 0x2/1x3/1x5 here), so this is not a build-introduced regression, but AMEND 3's
     requirement is absolute, not "matches the mock's own overlap". Tiles 1 and 2 are the largest
     (scale .78/.86) and closest to the ones under them (3/5 on the left, 4/6 on the right); nudged
     their `top` further from the horizon (more negative = higher) so their footprint clears the
     smaller tiles below instead of resizing or repositioning the other four (which stay pixel-for-
     pixel the mock's own numbers). */
  .boc-tile-inside-1.boc-tile-deep { left: max(15%, calc(50% - 640px)); top: calc(var(--boc-horizon, 60%) - 76px); transform: scale(.78); }
  .boc-tile-inside-2.boc-tile-deep { right: max(14%, calc(50% - 660px)); top: calc(var(--boc-horizon, 60%) - 92px); transform: scale(.86); }
  .boc-tile-inside-3.boc-tile-deep { left: calc(50% - 470px); top: calc(var(--boc-horizon, 60%) - 12px); transform: scale(.56); }
  .boc-tile-inside-4.boc-tile-deep { right: calc(50% - 480px); top: calc(var(--boc-horizon, 60%) - 4px); transform: scale(.6); }
  .boc-tile-inside-5.boc-tile-deep { left: max(9%, calc(50% - 790px)); top: calc(var(--boc-horizon, 60%) + 6px); transform: scale(.5); }
  .boc-tile-inside-6.boc-tile-deep { right: max(9%, calc(50% - 820px)); top: calc(var(--boc-horizon, 60%) - 18px); transform: scale(.66); }
  .boc-tile-inside-3.boc-tile-deep::after, .boc-tile-inside-4.boc-tile-deep::after, .boc-tile-inside-5.boc-tile-deep::after { height: 16px; }
}
/* the assistant stays up through the journey; the browser rises on the same line beneath it */
.boc-hero.is-browsing .boc-hero-assistant { z-index: 3; }
.boc-browser-deep { padding-top: calc(var(--boc-horizon, 60%) + 10px); padding-bottom: 3vh; }
.boc-browser-deep .boc-browser-head { display: none; }
.boc-browser-deep .boc-browser-ui { display: flex; flex-direction: column; } .boc-browser-deep .boc-flow-nav { order: 0; margin: 0 0 var(--space-3); }
.boc-browser-deep .boc-browser-head h2 { display: none; }
.boc-browser-deep .boc-browser-head .boc-eyebrow { margin-top: 0; }
.boc-browser-deep .boc-flow { margin-top: 0; }
@media (max-width: 720px) {
  .boc-browser-deep { padding-top: 160px; padding-bottom: 2vh; align-items: flex-start; }
  .boc-browser-deep .boc-flow-nav { order: 3; margin: var(--space-2) 0 0; }
  .boc-browser-deep .boc-flow-stage { height: 250px; }
  .boc-hero.is-browsing .boc-hero-assistant .boc-assistant-thread { display: none; }
}
/* the footer stands behind the near houses on the closing scene */
.boc-closing-foot-deep { bottom: auto; top: calc(var(--boc-horizon, 60%) - 64px); transform: translateX(-50%) scale(.9); transform-origin: 50% 0; z-index: 1; pointer-events: auto; }
.boc-closing .boc-plane-far { pointer-events: none; } .boc-closing .boc-plane-far > * { pointer-events: none; } .boc-closing .boc-plane-far .boc-closing-foot-deep, .boc-closing .boc-plane-far .boc-closing-foot-deep * { pointer-events: auto; }
.boc-closing .boc-scene-content { padding-bottom: calc(var(--foot-h, 320px) * .9 + 28vh); }
/* sky: stars fade with the cloud cover; storms flash; wind moves the clouds */
.boc-s-star { opacity: calc(1 - var(--boc-cloud, .15) * 1.1); transition: opacity 2s ease; }
.boc-clouds > svg { animation-duration: calc(140s / var(--boc-wind, 1)); }
[data-storm] .boc-veil { animation: boc-lightning 9s linear infinite; }
@keyframes boc-lightning { 0%, 88%, 92%, 100% { filter: brightness(1); } 89%, 91% { filter: brightness(1.9); } 90% { filter: brightness(3.2); } }
[data-storm] .boc-scene::before { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: #fff; opacity: 0; animation: boc-flash 9s linear infinite; }
@keyframes boc-flash { 0%, 88.5%, 91.5%, 100% { opacity: 0; } 89% { opacity: .22; } 89.6% { opacity: .04; } 90.2% { opacity: .3; } 91% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { [data-storm] .boc-veil, [data-storm] .boc-scene::before { animation: none; } }
/* ===== v22: quieter step mocks, readable carousel ===== */
.step-mock { display: grid; gap: var(--space-3); justify-items: start; }
.step-mock .boc-bubble { max-width: 100%; font-size: 17px; line-height: 24px; box-shadow: var(--lift-2); }
.step-mock .boc-bubble-me { justify-self: end; }
.step-mock-pro, .step-mock-done { padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--lift-3); }
.step-mock b { display: block; font: 700 26px/30px var(--font-sans); letter-spacing: -.01em; }
.step-mock .line { display: block; margin-top: 6px; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.step-mock .badge { display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--space-3); padding: 4px 10px; border-radius: var(--radius-pill); background: var(--surface-raised); font: 500 12px/16px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.step-mock .badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--hivis); } .step-mock .badge.ok i { background: var(--ok); }
/* the carousel: solid enough to read, big arrows */
.boc-flow-card { background: color-mix(in srgb, var(--surface) 78%, transparent); border-color: color-mix(in srgb, var(--ink) 28%, transparent); }
.boc-flow-card.is-active { background: var(--surface); border-color: color-mix(in srgb, var(--ink) 45%, transparent); }
.boc-flow-card .caption { display: none; }
.boc-flow-arrow { width: 52px; height: 52px; background: var(--surface); border: 1px solid var(--ink); box-shadow: var(--lift-2); }
.boc-flow-nav { margin-top: var(--space-4); } .boc-flow-nav .label { background: var(--surface); border: 1px solid var(--line); font-size: 13px; padding: 8px 14px; }
@media (max-width: 720px) { .step-mock b { font-size: 21px; line-height: 26px; } }
/* the conditions line, bottom right of the hero, in the sky: what today's picture was drawn from */
.conditions { position: absolute; right: var(--space-6); top: 84px; z-index: 6; display: none; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--surface) 35%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ink); font: 500 12px/16px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }
.conditions.on { display: inline-flex; } .conditions i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); } .conditions small { font-size: 10px; opacity: .7; text-transform: none; }
.conditions:hover { border-color: var(--ink); }
#hero { position: relative; }
@media (max-width: 720px) { .conditions { right: var(--space-4); top: auto; bottom: 14px; font-size: 11px; } }
/* v24: job icons, drawn as objects, no box */
.boc-flow-icon { width: auto; height: auto; border: 0; color: var(--ink); }
.boc-flow-icon .boc-icon { stroke-width: 2; }
.boc-flow-card.is-active .boc-flow-icon { color: var(--hivis-text); }
/* v25: steps say Step 1, 2, 3 out loud */
.boc-step-big { margin: 0; display: flex; align-items: baseline; gap: 10px; font: 800 64px/1 var(--font-display); color: var(--hivis-text); }
.boc-step-big .label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--leather); }
.boc-step-big .boc-step-when { margin-left: 6px; color: var(--ink-muted); }
.boc-step-copy h3 { margin-top: var(--space-3); }
.boc-step-copy .body-lg { font-size: 20px; line-height: 30px; }
.step-mock .boc-bubble b { font-size: 22px; }
@media (max-width: 720px) { .boc-step-big { font-size: 48px; } .boc-step-copy .body-lg { font-size: 17px; line-height: 25px; } }
/* v26: the bar reads as a place to type. Solid field, strong edge, chat icon, big send, a soft pulse until it is touched */
.boc-hero-assistant .boc-assistant-name { font-size: 12px; opacity: 1; color: var(--ink); }
.boc-hero-assistant .boc-assistant-lead { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--hivis-text); pointer-events: none; }
.boc-hero-assistant .boc-assistant-ask textarea { background: color-mix(in srgb, var(--surface) 92%, transparent); border: 2px solid color-mix(in srgb, var(--ink) 55%, transparent); padding-left: 52px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--hivis) 14%, transparent), var(--lift-2); }
.boc-hero-assistant .boc-assistant-ask textarea::placeholder { color: var(--ink); opacity: .75; }
.boc-hero-assistant .boc-assistant-ask textarea:focus-visible { outline: 0; border-color: var(--hivis); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hivis) 30%, transparent), var(--lift-2); }
.boc-hero-assistant .boc-assistant-ask textarea:focus::placeholder { opacity: .4; }
.boc-hero-assistant .boc-assistant-send { width: 48px; height: 48px; top: 8px; right: 8px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--hivis) 25%, transparent), var(--lift-2); }
.boc-hero-assistant > .boc-assistant:not(:focus-within) .boc-assistant-ask textarea { animation: boc-invite 3.2s ease-in-out infinite; }
@keyframes boc-invite { 0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--hivis) 10%, transparent), var(--lift-2); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--hivis) 24%, transparent), var(--lift-2); } }
@media (prefers-reduced-motion: reduce) { .boc-hero-assistant .boc-assistant-ask textarea { animation: none !important; } }
@media (max-width: 720px) { .boc-hero-assistant .boc-assistant-lead { left: 14px; } .boc-hero-assistant .boc-assistant-ask textarea { padding-left: 44px; } }
@media (max-width: 720px) { .boc-hero-assistant .boc-assistant-ask textarea { padding-right: 58px; min-height: 50px; font-size: 14px; padding-top: 13px; padding-bottom: 13px; } .boc-hero-assistant .boc-assistant-send { width: 40px; height: 40px; top: 5px; right: 5px; } }
/* v27: Steve sits beside the step tiles while they are on screen, then drops back to the corner */
.alex-btn { transition: opacity .25s ease, transform .25s ease, bottom .45s cubic-bezier(.2,.7,.2,1), right .45s cubic-bezier(.2,.7,.2,1); }
.alex-btn.beside { bottom: calc(50vh - 22px); right: max(16px, calc(50% - 720px - 12px)); }
@media (max-width: 1500px) { .alex-btn.beside { right: 16px; } }
.alex { z-index: 56; }

/* v29: footer sits lower on the closing scene so the copy above it stays clear */
.boc-closing-foot-deep { top: calc(var(--boc-horizon, 60%) + 4px); }
.boc-closing .boc-scene-content { padding-top: 12vh; }

/* v30: Steve rides the closing scene too; the footer's last line stays above the roofs */
.boc-closing-foot-deep { top: calc(var(--boc-horizon, 60%) - 40px); }
.boc-closing .boc-plane-far .boc-closing-foot-deep { z-index: 2; }
.boc-closing-foot-deep { top: calc(var(--boc-horizon, 60%) - 96px); }
.boc-closing .boc-scene-content { padding-top: 10vh; }
/* v31: no pane. Just the field, the label above it, the roofs crossing its foot */
.boc-hero-assistant > .boc-assistant { background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 0 0 26px !important; border-radius: 0; }
.boc-hero-assistant .boc-assistant-name { margin-left: 6px; text-shadow: 0 0 6px var(--sky-low); }
.boc-hero-assistant .boc-assistant-thread { margin: 0 0 8px; }
@media (max-width: 720px) { .boc-hero-assistant > .boc-assistant { padding-bottom: 40px !important; } }
@media (max-width: 720px) {
  .boc-hero-assistant .boc-assistant-hint { display: none; }
  .boc-browser-deep { padding-top: 200px; }
  .boc-hero.is-browsing .boc-hero-assistant > .boc-assistant { padding-bottom: 0 !important; }
}

/* v34: the carousel stands on the far plane: the second row of houses passes in front of the cards' feet, like the tags */
@media (min-width: 721px) {
  .boc-browser-far { padding-top: calc(var(--boc-horizon, 60%) - 120px); align-items: flex-start; }
  .boc-browser-far .boc-browser-ui { transform: scale(.86); transform-origin: 50% 0; }
  .boc-browser-far .boc-flow-nav { order: 0; margin: 0 0 var(--space-2); }
  .boc-hero.is-browsing .boc-hero-assistant { z-index: 3; }
}
.boc-hero .boc-plane-far .boc-browser-far, .boc-hero .boc-plane-far .boc-browser-far * { pointer-events: auto; }
.boc-hero .boc-plane-far { pointer-events: none; }
@media (min-width: 721px) {
  .boc-browser-far .boc-flow-card { height: 250px; padding-top: var(--space-4); }
  .boc-browser-far .boc-flow-typ { font-size: 38px; }
  .boc-browser-far .boc-flow-stage { height: 270px; }
  .boc-browser-far .boc-flow-cta { margin-top: var(--space-2); }
}

/* ===== phone scale: everything about 20 percent smaller below 720px, so the page reads like a page, not a billboard ===== */
@media (max-width: 720px) {
  body { font-size: 13px; line-height: 20px; }
  .display-xl, .boc-hero-copy h1 { font-size: 34px; line-height: 0.94; }
  .display-lg, .boc-closing-in h2, .proof h2, .legal-head h1, .boc-browser-head h2, .boc-steps-head h2 { font-size: 28px; line-height: 0.98; }
  .display-md, .boc-step-copy h3 { font-size: 22px; }
  .body-lg, .boc-hero-copy .body-lg, .boc-closing-in .body-lg { font-size: 14px; line-height: 21px; }
  .label, .boc-eyebrow { font-size: 11px; }
  .price { font-size: 17px; }
  .boc-hero .boc-scene-content { padding: calc(var(--space-16) + var(--space-2)) var(--space-4) 0; }
  .boc-hero-copy .body-lg { margin-top: var(--space-4); max-width: 34ch; }
  .boc-track { height: 220vh; }
  .boc-hero-assistant { width: min(320px, calc(100% - 2 * var(--space-4))); }
  .boc-hero-assistant > .boc-assistant { padding: var(--space-4) var(--space-4) 100px; }
  .boc-assistant-ask textarea { min-height: 44px; font-size: 15px; }
  .boc-assistant-send { width: 44px; height: 44px; }
  .boc-statement { padding: var(--space-12) var(--space-4); } .boc-statement-p { font-size: 20px; line-height: 28px; }
  .boc-step-scene, .boc-step-scene .boc-scene-content { min-height: 280px; }
  .boc-step-copy { padding: var(--space-6) var(--space-4); }
  .boc-step-copy p { font-size: 15px; line-height: 23px; }
  .boc-steps-list { gap: var(--space-6); }
  .boc-flow-card { width: 150px; height: 220px; padding: 14px 12px 12px; } .boc-flow-stage { height: 240px; } .boc-flow-typ { font-size: 32px; } .boc-flow-job { font-size: 14px; line-height: 18px; }
  .proof { padding: var(--space-12) var(--space-4); }
  .proof-grid { margin-top: var(--space-8); } .proof-grid > div { padding: var(--space-4) 0; }
  .proof-num { font-size: 52px; } .proof-grid p { font-size: 15px; line-height: 23px; }
  .trust { margin-top: var(--space-8); font-size: 11px; }
  .more { padding-top: var(--space-8); } .more a { font-size: 16px; }
  .boc-closing { min-height: 0; } .boc-closing .boc-scene-content { padding-top: 14vh; }
  .boc-closing-foot.site-foot { padding: var(--space-5) var(--space-4); font-size: 13px; line-height: 20px; gap: var(--space-4); }
  .site-foot .boc-wordmark { font-size: 24px; }
  .btn-lg, .boc-btn-lg { height: 48px; font-size: 15px; }
  .prose { font-size: 15px; line-height: 25px; } .prose h2 { font-size: 24px; line-height: 28px; }
  .legal-head { padding-top: calc(var(--space-16) + var(--space-8)); }
  .sheet-head h2 { font-size: 28px; line-height: 28px; }
  .nav .boc-wordmark { font-size: 18px; } .nav .boc-btn { height: 38px; font-size: 13px; padding: 0 12px; }
}

/* ===== SITE-CHAT-CLEAN (DECLARE-SITE-CHAT-CLEAN-2026-09-23.md, Robert's GO 2026-09-23):
   Design item 1 "ONE THING AT A TIME" (tag fade on typing), item 2 "ONE CARD, NOT A STACK"
   (fold/Earlier), item 3 "ONE ORANGE ACTION" (latest-only link visibility) ===== */

/* item 1: the six far-ridge price tags fade while the visitor is mid-sentence. `!important` is
   required because boc.js's SkylineHero.onProgress writes an inline `t.style.opacity` on every
   scroll/resize tick (boc.js ~832) — without it a single scroll tick after mount would silently
   out-rank this class. Placed OUTSIDE the max-width:999px query (boc.css:114 sets the tiles
   display:none on phone) so a phone falsifier read of computed opacity still sees 0, not the
   display:none element's default 1. `.is-answering` also keeps them gone once a conversation has
   started (Design item 1's "no conversation has started" return condition). */
.boc-tile-inside { transition: opacity .3s ease; }
.boc-hero.is-typing .boc-tile-inside, .boc-hero.is-answering .boc-tile-inside { opacity: 0 !important; }

/* item 2: the thread is the one card — a pane of glass directly above the field (the field itself
   stays bare, "v31: no pane" above, untouched). Only the latest visitor line + latest bot reply
   show by default; JS (boc.js AssistantCard, o.fold) tags them `.is-latest` on every change since
   `:last-of-type` cannot select by class on a run of <div>s. Declared max height: the existing
   220px `.boc-assistant-thread.is-open` cap (boc.css:189) — Earlier reveals inside that same cap,
   scrolling internally, never growing the card. */
.boc-hero-assistant .boc-assistant-thread.is-open {
  padding: var(--space-4);
  border-radius: 18px;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--surface) 30%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent), 0 14px 40px -24px rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
}
.boc-assistant.is-fold .boc-bubble:not(.is-latest) { display: none; }
.boc-assistant.is-fold .boc-assistant-thread.show-earlier .boc-bubble:not(.is-latest) { display: block; }
/* the visible last visitor line reads as a small quiet line, not a chat pill — Steve's reply below
   it keeps its own card treatment (unchanged .boc-bubble-bot). Text on glass is ink (no new colour). */
.boc-assistant.is-fold .boc-bubble-me { background: none; color: var(--ink); opacity: .72; padding: 0 2px; max-width: 100%; font-size: 13px; line-height: 18px; border-radius: 0; }
.boc-earlier { justify-self: start; margin: 0 0 var(--space-2); padding: 0; border: 0; background: none; color: var(--ink); opacity: .75; font: 600 12px/16px var(--font-sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.boc-earlier[hidden] { display: none; }
.boc-earlier:hover { opacity: 1; }
.boc-earlier:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* item 3: ONE orange action — whichever button (site.js's `.book`, or boc.js's `.boc-assistant-book`
   / `.boc-assistant-handoff`) landed on an OLDER bot reply never shows; only the latest bot bubble's
   link is visible. Belt-and-braces alongside the JS dispatch-ordering fix (boc.js AssistantCard.ask):
   holds even if a future change re-introduces a duplicate. */
.boc-bubble-bot:not(.is-latest) .book, .boc-bubble-bot:not(.is-latest) .boc-assistant-handoff, .boc-bubble-bot:not(.is-latest) .boc-assistant-book { display: none; }

@media (prefers-reduced-motion: reduce) {
  .boc-tile-inside, .boc-hero-copy h1, .boc-hero-copy .boc-eyebrow, .boc-hero .body-lg { transition: none; }
}

/* ===== SITE-PHONE-CHAT (DECLARE-SITE-PHONE-CHAT-2026-09-24.md) ===== */

/* RULING R3 "search on pause": a soft crossfade while site.js's debounced filter() call rebuilds
   the stage, so the deck doesn't hard-cut when the visitor stops typing. `is-refiltering` is
   toggled by site.js around the filter() call only — never on plain navigation (go()/select()),
   which keeps its own existing card-to-card transition (boc.css:245) untouched. */
.boc-flow-stage { transition: opacity .2s ease; }
.boc-flow-stage.is-refiltering { opacity: .35; }
@media (prefers-reduced-motion: reduce) { .boc-flow-stage { transition: none; } }

/* Change 4 "PHONE GLASS": below 720px every translucent glass surface (--glass/--glass-thin/
   --glass-deep, blur(var(--blur-glass))) becomes a solid tinted panel from the SAME token the
   desktop "solid" variants already use (.boc-card-solid/.boc-tile-solid, both above: background
   var(--surface-raised)) — no new colour values anywhere in this block. `.boc-flow-card` was the
   single biggest source of the measured 207 blur elements (up to 165 of them existed before
   change 3's virtualisation capped the DOM at 15) — with that fixed, this block clears the
   remainder: the carousel's own chrome, the hero's price tags, and the handful of other glass
   surfaces a phone visitor's eye actually crosses. This does NOT touch the skyline artwork's own
   depth-of-field blur (--blur-skyline/far/focus/near/fore on the drawn planes, boc.css above) —
   that is the picture, not a glass panel, and stays exactly as drawn so the scene keeps its
   premium look. Desktop (>=720px) is untouched: every rule here lives inside this one query. */
@media (max-width: 720px) {
  .boc-flow-card, .boc-flow-none, .boc-flow-nav .label, .boc-flow-arrow,
  .boc-tile-inside, .boc-tile, .boc-card, .boc-chip, .boc-btn-quiet,
  .boc-closing-foot, .nav.solid, .conditions, .boc-hero-assistant .boc-assistant-thread.is-open {
    background: var(--surface-raised);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* `--blur-focus`/`--blur-near` (tokens.css) are both `0px` at every theme — `blur(0px)` never
     had any visual effect at any width, but its computed `filter` string still contains the word
     "blur", so it still counted. Dropping the dead term (keeping the SAME drop-shadow) is a
     no-op for what's on screen and the last bit of headroom this DECLARE's phone-glass change
     needed to clear the <=10%-of-live blur-element check. */
  .boc-plane-focus > svg, .boc-plane-focus > .boc-photo { filter: drop-shadow(0 -10px 18px var(--ridge-glow)); }
  .boc-plane-near > svg, .boc-plane-near > .boc-photo { filter: drop-shadow(0 -14px 26px var(--ridge-glow)); }
}