/* Construction Xperts: site stylesheet.
   Tokens from docs/plan/07 §2 (sampled from the logo, contrast measured). */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-semi-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-semi-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2"); }

:root {
  --orange: #ff6a00; --orange-hover: #ff8533; --orange-ink: #a84300;
  --black: #0b0b0c; --charcoal: #161618; --graphite: #2a2b30;
  --silver: #c9cad0; --silver-muted: #9a9ba3; --offwhite: #f2f2f3;
  --paper: #f4f4f2; --white: #fff; --ink: #16171a; --ink-muted: #55565e; --line: #dcdcd8;
  --success: #2e7d4f; --error: #b3261e;
  --display: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --label: "Barlow", "Arial Narrow", system-ui, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-xs: .8125rem; --t-sm: .9375rem; --t-base: 1.0625rem;
  --t-lg: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);
  --t-xl: clamp(1.375rem, 1.2rem + .8vw, 1.75rem);
  --t-2xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --t-3xl: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem);
  --t-4xl: clamp(2.6rem, 1.5rem + 4.6vw, 5.25rem);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--t-base)/1.6 var(--sans); overflow-x: hidden; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.06; letter-spacing: -.005em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--orange); color: var(--black); }
table { font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--orange); color: var(--black); padding: 10px 16px; font-weight: 600; border-radius: 4px; }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 768px) { .wrap { padding-inline: 24px; } }
@media (min-width: 1280px) { .wrap { padding-inline: 32px; } }
.section { padding-block: 64px; }
@media (min-width: 1024px) { .section { padding-block: 104px; } }
.section-sm { padding-block: 48px; }
@media (min-width: 1024px) { .section-sm { padding-block: 72px; } }

/* Signature device: eyebrow + orange rule, like the line after XPERTS */
.eyebrow { display: inline-flex; align-items: center; gap: .75rem; font: 600 var(--t-xs)/1.2 var(--label); letter-spacing: .14em; text-transform: uppercase; }
.eyebrow::after { content: ""; width: 2.5rem; height: 2px; background: var(--orange); flex: none; }
.on-dark { color: var(--offwhite); }
.on-dark .eyebrow { color: var(--silver); }
.on-light .eyebrow { color: var(--ink-muted); }
.h2 { font-size: var(--t-3xl); margin-top: 16px; }
.on-dark .h2 { color: var(--white); }
.h3 { font-size: var(--t-2xl); }
.lede { font-size: var(--t-lg); margin-top: 18px; max-width: 60ch; }
.on-dark .lede { color: var(--silver); }
.on-light .lede { color: var(--ink-muted); }
.sec-head { display: grid; gap: 24px; align-items: end; margin-bottom: 48px; }
@media (min-width: 1024px) { .sec-head { grid-template-columns: 1.2fr 1fr; margin-bottom: 56px; } .sec-head .lede { margin: 0; justify-self: end; } }
.muted { color: var(--ink-muted); }
.on-dark .muted { color: var(--silver-muted); }

.bp-grid {
  background-color: var(--black);
  background-image:
    linear-gradient(rgb(201 202 208 / .06) 1px, transparent 1px),
    linear-gradient(90deg, rgb(201 202 208 / .06) 1px, transparent 1px),
    linear-gradient(rgb(201 202 208 / .025) 1px, transparent 1px),
    linear-gradient(90deg, rgb(201 202 208 / .025) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
}
.paper-grid {
  background-color: var(--paper);
  background-image: linear-gradient(rgb(22 23 26 / .04) 1px, transparent 1px), linear-gradient(90deg, rgb(22 23 26 / .04) 1px, transparent 1px);
  background-size: 24px 24px;
}
.bg-white { background: var(--white); }
.bg-black { background: var(--black); }
.rule-top { border-top: 1px solid var(--line); }

/* ---------- Buttons & links ---------- */
/* Black text on orange (6.85:1). White on orange fails (2.87:1), never used. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 48px; padding: .75rem 1.4rem; border-radius: 4px; font: 600 .95rem/1.1 var(--label); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease); background: none; text-align: center; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--orange); border-color: var(--orange); color: var(--black); }
.btn-primary:hover { background: var(--orange-hover); border-color: var(--orange-hover); }
.btn-ghost-dark { border-color: var(--silver-muted); color: var(--white); }
.btn-ghost-dark:hover { border-color: var(--white); }
.btn-ghost-light { border-color: var(--ink); color: var(--ink); }
.btn-ghost-light:hover { background: var(--ink); color: var(--white); }
.btn-black { background: var(--black); color: var(--white); border-color: var(--black); }
.btn-black:hover { background: var(--charcoal); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.arrow { display: inline-flex; align-items: center; gap: .4rem; font: 600 var(--t-sm)/1.2 var(--label); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.arrow::after { content: "→"; transition: transform .18s var(--ease); }
a:hover .arrow::after, .arrow:hover::after { transform: translateX(4px); }
.on-light .arrow { color: var(--orange-ink); }
.on-dark .arrow { color: var(--orange); }
.link { color: var(--orange-ink); text-decoration: underline; text-underline-offset: 3px; }
.on-dark .link { color: var(--orange); }

/* Placeholder for client facts still to come. Search the site for "tbc" to find any that remain before launch. */
.tbc { display: inline-block; padding: 0 .4em; border: 1px dashed var(--orange); border-radius: 3px; font: 400 .85em/1.5 var(--mono); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); font: 600 11px/1 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; }
.chip-dark { background: var(--ink); color: var(--white); border-color: var(--ink); }
.chip-tbc { border-style: dashed; border-color: var(--orange); color: var(--orange-ink); }
.on-dark .chip { border-color: var(--graphite); color: var(--silver-muted); }

/* ---------- Trust bar (G1) ---------- */
.trustbar { background: var(--charcoal); color: var(--silver); font-size: var(--t-xs); border-bottom: 1px solid var(--graphite); }
.trustbar .wrap { display: flex; gap: 24px; align-items: center; justify-content: space-between; min-height: 38px; }
.trustbar ul { display: flex; gap: 22px; flex-wrap: wrap; }
.trustbar li { display: inline-flex; align-items: center; gap: 8px; }
.trustbar li::before { content: ""; width: 6px; height: 6px; background: var(--orange); transform: rotate(45deg); flex: none; }
.trustbar a { text-decoration: none; }
.trustbar a:hover { color: var(--white); }
.trustbar .right { display: none; }
@media (max-width: 767px) { .trustbar li:nth-child(n+2) { display: none; } }
@media (min-width: 1024px) { .trustbar .right { display: flex; } }

/* ---------- Header (G2) ---------- */
.header { position: sticky; top: 0; z-index: 50; background: rgb(11 11 12 / .98); border-bottom: 1px solid var(--graphite); color: var(--white); }
.header > .wrap { display: flex; align-items: center; gap: 24px; height: 80px; transition: height .2s var(--ease); }
.header.is-scrolled > .wrap { height: 64px; }
.logo { flex: none; }
.logo img { height: 52px; width: auto; transition: height .2s var(--ease); }
.header.is-scrolled .logo img { height: 42px; }
.nav { display: none; margin-left: auto; }
.nav > ul { display: flex; gap: 2px; }
.nav a, .nav button { display: inline-flex; align-items: center; gap: 6px; padding: 10px 11px; font: 600 var(--t-sm)/1 var(--label); letter-spacing: .05em; text-transform: uppercase; color: var(--offwhite); text-decoration: none; background: none; border: 0; cursor: pointer; border-radius: 4px; }
.nav a:hover, .nav button:hover, .nav button[aria-expanded="true"], .nav a[aria-current="page"] { color: var(--orange); }
.nav button svg { width: 12px; transition: transform .2s; }
.nav button[aria-expanded="true"] svg { transform: rotate(180deg); }
.head-actions { display: none; align-items: center; gap: 16px; }
.head-phone { display: inline-flex; align-items: center; gap: 8px; font: 600 var(--t-sm)/1 var(--label); letter-spacing: .04em; color: var(--silver); text-decoration: none; white-space: nowrap; }
.head-phone svg { width: 18px; color: var(--orange); }
.burger { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--graphite); border-radius: 4px; background: none; color: var(--white); cursor: pointer; flex: none; }
.burger svg { width: 22px; }
@media (min-width: 1140px) { .nav { display: block; } .head-actions { display: flex; } .burger { display: none; } }
.header-min .wrap { justify-content: space-between; }

/* Mega menu (03 §13) */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--black); border-bottom: 1px solid var(--graphite); box-shadow: 0 24px 48px rgb(0 0 0 / .45); display: none; }
.mega.is-open { display: block; animation: drop .2s var(--ease); }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
.mega .wrap { display: grid; grid-template-columns: repeat(3, 1fr) 1.1fr; gap: 32px; padding-block: 36px 40px; }
.mega .mega-h { font: 600 var(--t-xs)/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--silver-muted); padding-bottom: 14px; border-bottom: 1px solid var(--graphite); margin-bottom: 14px; }
.mega .svc { display: block; text-decoration: none; padding: 8px 0; }
.mega .svc strong { display: block; font: 700 1.2rem/1.2 var(--display); color: var(--white); }
.mega .svc span { display: block; font-size: var(--t-xs); color: var(--silver-muted); margin-top: 2px; }
.mega .svc:hover strong { color: var(--orange); }
.mega .notsure { background: var(--charcoal); border: 1px solid var(--graphite); border-radius: 8px; padding: 22px; }
.mega .notsure a:not(.btn) { display: block; padding: 7px 0; color: var(--offwhite); text-decoration: none; font-size: var(--t-sm); }
.mega .notsure a:not(.btn):hover { color: var(--orange); }
.mega .notsure .btn { margin-top: 14px; width: 100%; }

/* Mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 60; background: var(--black); color: var(--white); display: none; overflow-y: auto; }
.drawer.is-open { display: block; }
.drawer-top { display: flex; align-items: center; justify-content: space-between; height: 72px; padding-inline: 16px; border-bottom: 1px solid var(--graphite); }
.drawer-top img { height: 40px; width: auto; }
.drawer nav { padding: 12px 16px 120px; }
.drawer details { border-bottom: 1px solid var(--graphite); }
.drawer summary, .drawer .d-link { display: flex; justify-content: space-between; align-items: center; min-height: 56px; font: 700 1.35rem/1 var(--display); list-style: none; cursor: pointer; text-decoration: none; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary::after { content: "+"; color: var(--orange); font-size: 1.6rem; }
.drawer details[open] summary::after { content: "\2212"; }
.drawer details a { display: block; padding: 10px 0 10px 12px; color: var(--silver); text-decoration: none; border-left: 2px solid var(--graphite); }
.drawer details div { padding-bottom: 16px; }
.drawer .d-link { border-bottom: 1px solid var(--graphite); }
.drawer .btn { width: 100%; margin-top: 24px; }
.drawer .d-phone { display: flex; justify-content: center; margin-top: 12px; color: var(--silver); }

/* ---------- Home hero ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--graphite); }
.hero .wrap { display: grid; gap: 48px; padding-block: 56px 64px; align-items: center; }
.hero .wrap > * { min-width: 0; }
@media (min-width: 1024px) { .hero .wrap { grid-template-columns: 1.05fr 1fr; gap: 56px; padding-block: 96px 104px; } }
.hero h1 { font-size: var(--t-4xl); margin-top: 22px; color: var(--white); }
.hero h1 em { font-style: normal; color: var(--orange); }
.hero .sub { margin-top: 22px; font-size: var(--t-lg); color: var(--silver); max-width: 54ch; }
.hero .btns { margin-top: 32px; }
.proof-row { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--graphite); font-size: var(--t-sm); color: var(--silver); }
.proof-row li { display: inline-flex; align-items: center; gap: 8px; }
.proof-row svg { width: 18px; height: 18px; color: var(--orange); flex: none; }

/* Drawing sheet: hero visual styled as a construction drawing with a title block */
.sheet { position: relative; border: 1px solid var(--graphite); background: rgb(22 22 24 / .72); border-radius: 8px; color: var(--silver); }
.sheet::before, .sheet::after { content: ""; position: absolute; width: 18px; height: 18px; border-color: var(--orange); border-style: solid; }
.sheet::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-top-left-radius: 8px; }
.sheet::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-bottom-right-radius: 8px; }
.sheet-tabs { display: flex; gap: 4px; padding: 10px; border-bottom: 1px solid var(--graphite); overflow-x: auto; scrollbar-width: none; }
.sheet-tabs button { flex: none; padding: 8px 12px; border-radius: 4px; border: 1px solid transparent; background: none; color: var(--silver-muted); font: 600 var(--t-xs)/1 var(--label); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.sheet-tabs button[aria-selected="true"] { color: var(--black); background: var(--orange); }
.sheet-tabs button:not([aria-selected="true"]):hover { color: var(--white); border-color: var(--graphite); }
.sheet-body { position: relative; padding: 24px 22px 8px; aspect-ratio: 400 / 270; }
.sheet-body svg { position: absolute; inset: 24px 22px 8px; width: calc(100% - 44px); height: calc(100% - 32px); opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.sheet-body svg.is-on { opacity: 1; transform: none; }
.sheet-static { padding: 20px; }
.title-block { display: grid; grid-template-columns: 1.5fr 1fr 1fr; border-top: 1px solid var(--graphite); font: 400 11px/1.35 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.title-block > div { padding: 10px 12px; border-left: 1px solid var(--graphite); min-width: 0; }
.title-block > div:first-child { border-left: 0; }
.title-block span { display: block; color: var(--silver-muted); font-size: 9.5px; }
.title-block b { display: block; color: var(--white); font-weight: 400; margin-top: 2px; }

/* Line drawings (selectors must not depend on ancestors: they style <use> clones) */
.ln, .acc, .ghost, .dim { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.ln { stroke: currentColor; stroke-width: 1.6; }
.acc { stroke: var(--orange); stroke-width: 1.8; }
.th { stroke-width: 1; }
.wall { stroke-width: 3.2; }
.ghost { stroke: currentColor; stroke-width: 1.2; stroke-dasharray: 4 4; opacity: .55; }
.dim { stroke: currentColor; stroke-width: .8; opacity: .65; }
.acc-dim { stroke: var(--orange); opacity: 1; }
.acc-fill { fill: var(--orange); opacity: .14; }
.lbl { fill: currentColor; opacity: .75; font: 9px var(--mono); letter-spacing: .08em; }
.acc-t { fill: var(--orange); opacity: 1; }
.dwg { width: 100%; height: auto; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { border-bottom: 1px solid var(--graphite); }
.page-hero .wrap { display: grid; gap: 40px; padding-block: 40px 56px; align-items: center; }
.page-hero .wrap > * { min-width: 0; }
@media (min-width: 1024px) { .page-hero.has-art .wrap { grid-template-columns: 1.2fr 1fr; gap: 64px; padding-block: 56px 88px; } .page-hero:not(.has-art) .wrap { padding-block: 56px 80px; } }
.page-hero h1 { font-size: var(--t-3xl); margin-top: 18px; color: var(--white); max-width: 22ch; }
.page-hero .sub { margin-top: 18px; font-size: var(--t-lg); color: var(--silver); max-width: 58ch; }
.page-hero .btns { margin-top: 28px; }
.page-hero .proof-row { margin-top: 28px; }
.crumbs { font-size: var(--t-xs); color: var(--silver-muted); margin-bottom: 28px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--graphite); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--orange); }
.crumbs [aria-current] { color: var(--silver); }

/* ---------- Answer block (GEO) ---------- */
.answer { background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--orange); border-radius: 6px; padding: 24px 24px 22px; max-width: 900px; }
.answer .k { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; font: 600 var(--t-xs)/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.answer .k time { font-family: var(--mono); letter-spacing: .04em; text-transform: none; font-weight: 400; }
.answer p { margin-top: 12px; font-size: var(--t-lg); }
.answer-wrap { margin-top: -28px; position: relative; z-index: 2; }
@media (min-width: 1024px) { .answer-wrap { margin-top: -44px; } }

/* ---------- Cards & grids ---------- */
.grid { display: grid; gap: 16px; }
@media (min-width: 700px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 20px; } .grid-4 { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.card { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 24px; }
.card h3 { font-size: var(--t-xl); }
.card p { margin-top: 8px; color: var(--ink-muted); font-size: var(--t-sm); }
.card .chip { margin-bottom: 14px; }
a.card { display: flex; flex-direction: column; text-decoration: none; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
a.card:hover { border-color: var(--ink); box-shadow: 0 18px 40px -18px rgb(22 23 26 / .35); transform: translateY(-2px); }
a.card p { flex: 1; }
a.card .arrow { margin-top: 16px; color: var(--orange-ink); }
.card-dark { background: var(--charcoal); border-color: var(--graphite); color: var(--offwhite); }
.card-dark h3 { color: var(--white); }
.card-dark p { color: var(--silver); }
.card-num { font: 400 var(--t-xs)/1 var(--mono); color: var(--orange-ink); letter-spacing: .08em; display: block; margin-bottom: 14px; }
.on-dark .card-num { color: var(--orange); }

/* Service tiles (home) */
.services-grid { display: grid; gap: 16px; }
@media (min-width: 700px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.tile { position: relative; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 24px; text-decoration: none; color: var(--ink); transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); min-width: 0; }
.tile:hover { border-color: var(--ink); box-shadow: 0 18px 40px -18px rgb(22 23 26 / .35); transform: translateY(-2px); }
.tile .num { font: 400 var(--t-xs)/1 var(--mono); color: var(--ink-muted); letter-spacing: .08em; }
.tile .chip { position: absolute; top: 20px; right: 20px; }
.tile .art { color: var(--ink); margin: 18px -6px 10px; padding: 8px; background: var(--paper); border-radius: 6px; background-image: linear-gradient(rgb(22 23 26 / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(22 23 26 / .05) 1px, transparent 1px); background-size: 16px 16px; }
.tile h3 { font-size: var(--t-xl); margin-top: 10px; }
.tile p { color: var(--ink-muted); margin-top: 8px; font-size: var(--t-sm); flex: 1; }
.tile .arrow { margin-top: 18px; color: var(--orange-ink); }
.tile-dark { background: var(--black); color: var(--offwhite); border-color: var(--black); justify-content: space-between; }
.tile-dark:hover { border-color: var(--orange); }
.tile-dark h3 { color: var(--white); font-size: var(--t-2xl); margin-top: 14px; }
.tile-dark p { color: var(--silver); margin-top: 10px; }
.tile-dark .eyebrow { color: var(--silver); }
.tile-dark .links { display: grid; gap: 6px; margin-top: 22px; }
.tile-dark .links a { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border: 1px solid var(--graphite); border-radius: 4px; text-decoration: none; font-size: var(--t-sm); color: var(--offwhite); }
.tile-dark .links a:hover { border-color: var(--orange); color: var(--orange); }

/* Two audiences split */
.split { display: grid; }
@media (min-width: 1024px) { .split { grid-template-columns: 1fr 1fr; } }
.split > div { padding: 56px 16px; }
@media (min-width: 768px) { .split > div { padding: 72px 48px; } }
@media (min-width: 1280px) { .split > div { padding: 96px max(32px, calc((100vw - 1240px) / 2 + 32px)); } .split > div:first-child { padding-right: 64px; } .split > div:last-child { padding-left: 64px; } }
.split .res { background: var(--white); }
.split h3 { font-size: var(--t-2xl); margin-top: 14px; }
.split .com h3 { color: var(--white); }
.split p.copy { margin-top: 12px; max-width: 46ch; }
.split .res p.copy { color: var(--ink-muted); }
.split .com p.copy { color: var(--silver); }
.split ul { margin-top: 28px; border-top: 1px solid var(--line); }
.split .com ul { border-color: var(--graphite); }
.split li a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; font: 700 1.25rem/1.2 var(--display); }
.split .com li a { border-color: var(--graphite); color: var(--white); }
.split li a small { display: block; font: 400 var(--t-sm)/1.4 var(--sans); color: var(--ink-muted); margin-top: 3px; }
.split .com li a small { color: var(--silver-muted); }
.split li a::after { content: "→"; color: var(--orange-ink); font-family: var(--sans); transition: transform .18s var(--ease); }
.split .com li a::after { color: var(--orange); }
.split li a:hover::after { transform: translateX(4px); }
.split-head { text-align: center; padding: 64px 16px 0; background: linear-gradient(90deg, var(--white) 50%, var(--black) 50%); }
.split-head h2 { display: inline-block; max-width: 28ch; font-size: var(--t-3xl); background: var(--paper); padding: 22px 28px; border: 1px solid var(--line); border-radius: 8px; }
@media (max-width: 1023px) { .split-head { background: var(--paper); padding-bottom: 32px; } .split-head h2 { border: 0; padding: 0; } }

/* Unique offer band */
.combo .wrap { display: grid; gap: 40px; align-items: center; }
.combo .wrap > * { min-width: 0; }
@media (min-width: 1024px) { .combo .wrap { grid-template-columns: 1fr 1.1fr; gap: 72px; } }
.combo h2 em { font-style: normal; color: var(--orange); }
.combo-art { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; color: var(--silver); }
.combo-art figure { margin: 0; border: 1px solid var(--graphite); border-radius: 8px; padding: 14px; background: var(--charcoal); min-width: 0; }
.combo-art figcaption { font: 400 10.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--silver-muted); margin-top: 8px; }
.combo-art .plus { font: 700 2.6rem/1 var(--display); color: var(--orange); }
.ticks { display: grid; gap: 10px; margin-top: 28px; }
.ticks li { display: flex; gap: 12px; }
.ticks svg { width: 20px; height: 20px; flex: none; color: var(--orange); margin-top: 3px; }
.on-light .ticks svg { color: var(--orange-ink); }

/* Pillars */
.pillars { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
@media (min-width: 700px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pillars { grid-template-columns: repeat(4, 1fr); } }
.pillar { background: var(--white); padding: 32px 26px; }
.pillar .no { font: 400 var(--t-xs)/1 var(--mono); color: var(--orange-ink); letter-spacing: .08em; }
.pillar svg { width: 34px; height: 34px; color: var(--ink); margin-top: 22px; }
.pillar h3 { font-size: var(--t-xl); margin-top: 18px; }
.pillar p { margin-top: 10px; color: var(--ink-muted); font-size: var(--t-sm); }

/* Process (horizontal on dark, vertical on light) */
.process { display: grid; counter-reset: s; }
@media (min-width: 1024px) { .process { grid-template-columns: repeat(6, 1fr); } }
.step { position: relative; padding: 0 0 32px 44px; }
.step::before { counter-increment: s; content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 0; width: 30px; height: 30px; display: grid; place-items: center; background: var(--orange); color: var(--black); font: 700 13px/1 var(--mono); border-radius: 4px; }
.step::after { content: ""; position: absolute; left: 14px; top: 38px; bottom: 6px; width: 2px; background: repeating-linear-gradient(var(--graphite) 0 6px, transparent 6px 12px); }
.step:last-child::after { display: none; }
@media (min-width: 1024px) {
  .process .step { padding: 52px 20px 0 0; }
  .process .step::after { left: 40px; right: 10px; top: 14px; bottom: auto; width: auto; height: 2px; background: repeating-linear-gradient(90deg, var(--graphite) 0 6px, transparent 6px 12px); }
}
.step h3 { font-size: 1.3rem; }
.on-dark .step h3 { color: var(--white); }
.step p { margin-top: 8px; font-size: var(--t-sm); color: var(--ink-muted); }
.on-dark .step p { color: var(--silver); }
.step .dur { display: inline-block; margin-top: 12px; font: 400 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--orange-ink); }
.on-dark .step .dur { color: var(--orange); }
.process-v { display: grid; counter-reset: s; max-width: 760px; }
.process-v .step { padding-bottom: 36px; }
.process-v .step::after { background: repeating-linear-gradient(var(--line) 0 6px, transparent 6px 12px); }
.on-dark .process-v .step::after { background: repeating-linear-gradient(var(--graphite) 0 6px, transparent 6px 12px); }

/* Costs */
.costs { display: grid; gap: 16px; }
@media (min-width: 700px) { .costs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .costs { grid-template-columns: repeat(5, 1fr); } }
.cost { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--ink); border-radius: 6px; padding: 22px 20px; text-decoration: none; transition: border-color .2s var(--ease), transform .2s var(--ease); }
.cost:hover { border-top-color: var(--orange); transform: translateY(-2px); }
.cost .q { font: 700 1.2rem/1.2 var(--display); }
.cost .range { margin-top: 18px; font: 700 1.55rem/1.1 var(--display); font-variant-numeric: tabular-nums; }
.cost .range .tbc { font-size: .95rem; }
.cost .unit { font-size: var(--t-xs); color: var(--ink-muted); margin-top: 4px; flex: 1; }
.cost .arrow { margin-top: 18px; color: var(--orange-ink); font-size: var(--t-xs); }
.fine { margin-top: 20px; font-size: var(--t-xs); color: var(--ink-muted); max-width: 90ch; }
.on-dark .fine { color: var(--silver-muted); }

/* Tables */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--ink); }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 520px; }
.tbl th, .tbl td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl thead th { font: 600 var(--t-xs)/1.2 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); background: var(--paper); }
.tbl tbody tr:last-child > * { border-bottom: 0; }
.tbl td.num { font-family: var(--display); font-weight: 700; font-size: 1.15rem; white-space: nowrap; }
.tbl small { display: block; color: var(--ink-muted); font-size: var(--t-xs); margin-top: 2px; }

/* Spec list */
.specs { display: grid; border: 1px solid var(--graphite); border-radius: 8px; overflow: hidden; margin: 0; }
@media (min-width: 768px) { .specs { grid-template-columns: 1fr 1fr; } }
.specs div { display: grid; grid-template-columns: 9rem 1fr; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--graphite); }
@media (min-width: 768px) { .specs div:nth-child(odd) { border-right: 1px solid var(--graphite); } }
.specs dt { font: 600 var(--t-xs)/1.4 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
.specs dd { margin: 0; color: var(--offwhite); font-size: var(--t-sm); }

/* FAQ accordion: <details> works without JS */
.faq { border-top: 1px solid var(--line); max-width: 900px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; gap: 20px; justify-content: space-between; align-items: center; padding: 20px 0; cursor: pointer; list-style: none; font: 700 1.25rem/1.25 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 4px; font: 400 1.3rem/1 var(--sans); color: var(--orange-ink); transition: transform .2s var(--ease); }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--orange-ink); }
.faq .a { padding: 0 52px 22px 0; color: var(--ink-muted); }
.faq-group + .faq-group { margin-top: 56px; }

/* Glossary: one card per term, each a deep-link target */
.gloss { display: grid; gap: 14px; }
@media (min-width: 768px) { .gloss { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
.gloss-item { padding: 22px 24px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); scroll-margin-top: 110px; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.gloss-item:target { border-color: var(--orange); box-shadow: 0 0 0 3px rgb(255 106 0 / .18); }
.gloss dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px; margin-bottom: 8px; font: 700 1.25rem/1.25 var(--display); }
.gloss dfn { font-style: normal; }
.gloss abbr { padding: 3px 8px; border: 1px solid var(--line); border-radius: 4px; font: 600 .75rem/1 var(--label); letter-spacing: .08em; text-decoration: none; color: var(--orange-ink); }
.gloss dd { margin: 0; color: var(--ink-muted); }
.gloss dd .link { display: inline-block; margin-top: 10px; }
.faq-group h2 { font-size: var(--t-2xl); margin-bottom: 18px; }

/* Prose (markdown bodies, legal pages) */
.prose { max-width: 72ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: var(--t-2xl); margin-top: 1.9em; }
.prose h3 { font-size: var(--t-xl); margin-top: 1.5em; }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose ul > li { position: relative; padding-left: 1.5rem; }
.prose ul > li + li { margin-top: .5em; }
.prose ul > li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 6px; height: 6px; background: var(--orange); transform: rotate(45deg); }
.prose ol { list-style: decimal; padding-left: 1.4rem; }
.prose ol > li + li { margin-top: .5em; }
.prose a { color: var(--orange-ink); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { font-weight: 600; }
.prose em { color: var(--ink-muted); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); background: var(--white); border: 1px solid var(--line); }
.prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font: 600 var(--t-xs)/1.2 var(--label); text-transform: uppercase; letter-spacing: .08em; background: var(--paper); color: var(--ink-muted); }
.prose .tbl-wrap table { border: 0; }

/* Two-column content layout with sticky aside */
.cols { display: grid; gap: 48px; }
.cols > * { min-width: 0; }
@media (min-width: 1024px) { .cols { grid-template-columns: minmax(0, 1fr) 340px; gap: 72px; align-items: start; } .cols aside { position: sticky; top: 100px; } }
.aside-card { background: var(--black); color: var(--offwhite); border-radius: 8px; padding: 26px; }
.aside-card h2, .aside-card h3 { color: var(--white); font-size: var(--t-xl); }
.aside-card p { color: var(--silver); margin-top: 10px; font-size: var(--t-sm); }
.aside-card .btn { width: 100%; margin-top: 18px; }
.aside-card .btn + .btn { margin-top: 10px; }
.aside-list { margin-top: 18px; border-top: 1px solid var(--graphite); }
.aside-list li { border-bottom: 1px solid var(--graphite); }
.aside-list > li:not(:has(> a)) { padding: 12px 0; font-size: var(--t-sm); }
.aside-list a { display: flex; justify-content: space-between; padding: 12px 0; text-decoration: none; font-size: var(--t-sm); color: var(--offwhite); }
.aside-list a:hover { color: var(--orange); }

/* Callout */
.callout { border: 1px solid var(--line); background: var(--white); border-radius: 8px; padding: 20px 22px; display: flex; gap: 14px; font-size: var(--t-sm); color: var(--ink-muted); }
.callout svg { width: 22px; height: 22px; color: var(--orange-ink); flex: none; }
.callout strong { color: var(--ink); }
.callout-tbc { border-style: dashed; border-color: var(--orange); }

/* Segment toggle (shed hub: residential | commercial). Both panels are in the HTML for crawlers. */
.seg-tabs { display: inline-flex; padding: 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); gap: 4px; margin-bottom: 32px; }
.seg-tabs button { padding: 12px 20px; border: 0; border-radius: 4px; background: none; cursor: pointer; font: 600 var(--t-sm)/1 var(--label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.seg-tabs button[aria-selected="true"] { background: var(--ink); color: var(--white); }
.js .seg-panel[hidden] { display: none; }
.seg-panel + .seg-panel { margin-top: 48px; }
.js .seg-panel + .seg-panel { margin-top: 0; }
.seg-title { font-size: var(--t-xl); margin-bottom: 20px; }
.js .seg-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Proof placeholders */
.ph { border: 1.5px dashed var(--orange); border-radius: 8px; background: var(--white); padding: 22px; display: flex; flex-direction: column; justify-content: space-between; min-height: 240px; }
.ph .img { flex: 1; min-height: 130px; border-radius: 4px; display: grid; place-items: center; color: var(--ink-muted); font: 400 var(--t-xs)/1.4 var(--mono); text-align: center; padding: 12px; background: repeating-linear-gradient(135deg, var(--paper) 0 10px, #ebebe8 10px 20px); }
.ph h3 { font-size: 1.25rem; margin-top: 16px; }
.ph p { font-size: var(--t-sm); color: var(--ink-muted); margin-top: 6px; }
.stars { color: #ffb400; letter-spacing: 2px; font-size: 1.1rem; }
.empty { text-align: center; border: 1.5px dashed var(--line); border-radius: 8px; padding: 56px 24px; background: var(--white); }
.empty h2 { font-size: var(--t-2xl); }
.empty p { margin: 12px auto 0; color: var(--ink-muted); max-width: 52ch; }
.empty .btns { justify-content: center; margin-top: 24px; }

/* Areas */
.areas { display: grid; gap: 32px; }
.areas > * { min-width: 0; }
@media (min-width: 1024px) { .areas { grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: center; } }
.area-cols { display: grid; gap: 20px; margin-top: 32px; }
@media (min-width: 600px) { .area-cols { grid-template-columns: 1fr 1fr; } }
.area-col { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 22px; }
.area-col h3 { font: 600 var(--t-xs)/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chips li { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: var(--t-sm); background: var(--paper); }
.map { margin: 0; color: var(--ink); }
.map .act { fill: rgb(255 106 0 / .1); stroke: var(--orange-ink); stroke-width: 1.6; }
.map .ring { fill: none; stroke: var(--ink-muted); stroke-width: .8; stroke-dasharray: 2 4; }
.map circle.pin { fill: var(--orange); stroke: var(--black); stroke-width: 1.5; }
.map circle.hq { fill: var(--black); stroke: var(--orange); stroke-width: 3; }
.map text { font: 600 11px var(--label); letter-spacing: .06em; text-transform: uppercase; fill: var(--ink); }
.map text.sm { font: 400 9px var(--mono); fill: var(--ink-muted); letter-spacing: .1em; }

/* Tools */
.tool { border: 1px solid var(--graphite); background: var(--charcoal); border-radius: 8px; padding: 26px; display: flex; flex-direction: column; text-decoration: none; transition: border-color .2s var(--ease); }
a.tool:hover { border-color: var(--orange); }
.tool .chip { align-self: flex-start; }
.tool svg.ic { width: 40px; height: 40px; color: var(--orange); margin-top: 22px; }
.tool h3 { color: var(--white); font-size: var(--t-xl); margin-top: 16px; }
.tool p { color: var(--silver); font-size: var(--t-sm); margin-top: 8px; flex: 1; }
.tool .arrow { color: var(--orange); margin-top: 20px; }

/* ---------- CTA band (G5) ---------- */
.cta-band { position: relative; overflow: hidden; background: var(--orange); color: var(--black); }
.cta-band .wrap { position: relative; display: grid; gap: 28px; align-items: center; padding-block: 64px; }
@media (min-width: 1024px) { .cta-band .wrap { grid-template-columns: 1.4fr 1fr; padding-block: 88px; } }
.cta-band h2 { font-size: var(--t-3xl); max-width: 20ch; }
.cta-band p { margin-top: 14px; font-size: var(--t-lg); max-width: 52ch; }
@media (min-width: 1024px) { .cta-band .btns { justify-content: flex-end; } }
.cta-band .btn-line { border-color: var(--black); color: var(--black); }
.cta-band .btn-line:hover { background: rgb(0 0 0 / .08); }
.cta-band .tbc { border-color: var(--black); }
.cta-band .hatch { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: .09; -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000); mask-image: linear-gradient(90deg, transparent 40%, #000); }
/* The stripes sit on their own layer, one repeat wider, so the drift is a GPU slide rather than a repaint */
.cta-band .hatch::before { content: ""; position: absolute; inset: 0 0 0 -39.6px; background-image: repeating-linear-gradient(135deg, var(--black) 0 2px, transparent 2px 14px); }

/* ---------- Footer (G6) ---------- */
.footer { background: var(--black); color: var(--silver); font-size: var(--t-sm); }
.footer .top { display: grid; gap: 40px; padding-block: 64px 48px; }
@media (min-width: 1024px) { .footer .top { grid-template-columns: 1.4fr repeat(5, 1fr); gap: 32px; } }
.footer .brand img { height: 50px; width: auto; }
.footer .brand p { margin-top: 18px; max-width: 34ch; }
.footer .brand .contact { margin-top: 18px; display: grid; gap: 6px; }
.footer h2 { font: 600 var(--t-xs)/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--white); margin-bottom: 16px; }
.footer li + li { margin-top: 9px; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--orange); }
.fcols { display: grid; gap: 32px; grid-template-columns: 1fr 1fr; }
@media (min-width: 1024px) { .fcols { display: contents; } }
.footer .tb { display: grid; border: 1px solid var(--graphite); border-radius: 6px; font: 400 11px/1.35 var(--mono); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 28px; }
@media (min-width: 768px) { .footer .tb { grid-template-columns: repeat(5, 1fr); } }
.footer .tb > div { padding: 12px 14px; border-top: 1px solid var(--graphite); }
.footer .tb > div:first-child { border-top: 0; }
@media (min-width: 768px) { .footer .tb > div { border-top: 0; border-left: 1px solid var(--graphite); } .footer .tb > div:first-child { border-left: 0; } }
.footer .tb span { display: block; color: var(--silver-muted); font-size: 9.5px; }
.footer .tb b { display: block; color: var(--white); font-weight: 400; margin-top: 3px; }
.footer .legal { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; padding: 22px 0 32px; border-top: 1px solid var(--graphite); color: var(--silver-muted); font-size: var(--t-xs); }
.footer .legal ul { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer .legal li + li { margin: 0; }

/* ---------- Mobile action bar (G3) ---------- */
.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgb(11 11 12 / .98); border-top: 1px solid var(--graphite); transform: translateY(110%); transition: transform .25s var(--ease); }
.mbar.is-on { transform: none; }
.mbar .btn { min-height: 46px; padding-inline: 8px; font-size: .8rem; letter-spacing: .04em; }
@media (min-width: 769px) { .mbar { display: none; } }
@media (max-width: 768px) { body.has-mbar { padding-bottom: 72px; } }

/* ---------- Forms ---------- */
.form-shell { max-width: 760px; margin-inline: auto; }
.progress { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.progress-bar { flex: 1; height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; }
.progress-bar span { display: block; height: 100%; width: 25%; background: var(--orange); transition: width .3s var(--ease); }
.progress-txt { font: 400 var(--t-xs)/1 var(--mono); color: var(--ink-muted); white-space: nowrap; }
.form-step { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 28px 22px; }
@media (min-width: 768px) { .form-step { padding: 40px; } }
.js .form-step:not(.is-active) { display: none; }
.form-step > h2 { font-size: var(--t-2xl); }
.form-step > h2:focus { outline: none; }
.form-step > p.help { margin-top: 8px; color: var(--ink-muted); }
.fields { display: grid; gap: 26px; margin-top: 28px; }
.fields-2 { display: grid; gap: 20px; }
@media (min-width: 640px) { .fields-2 { grid-template-columns: 1fr 1fr; } }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend, .lab { display: block; font-weight: 600; margin-bottom: 10px; padding: 0; }
.opt { font-weight: 400; color: var(--ink-muted); font-size: var(--t-sm); }
.hint { display: block; color: var(--ink-muted); font-size: var(--t-sm); margin: -4px 0 10px; }
.inp { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid #b9bab6; border-radius: 4px; background: var(--white); font-size: 1rem; transition: border-color .15s; }
.inp:hover { border-color: var(--ink-muted); }
.inp:focus { outline: 3px solid rgb(255 106 0 / .35); outline-offset: 0; border-color: var(--ink); }
textarea.inp { min-height: 120px; resize: vertical; }
select.inp { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2316171a' stroke-width='1.8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; padding-right: 40px; }
.inp[aria-invalid="true"] { border-color: var(--error); }
.err { display: block; color: var(--error); font-size: var(--t-sm); margin-top: 6px; }
.err:empty { display: none; }
.tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tiles-lg { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.tiles label { position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 6px; cursor: pointer; background: var(--white); font-size: var(--t-sm); font-weight: 500; transition: border-color .15s, background-color .15s; }
.tiles label:hover { border-color: var(--ink-muted); }
.tiles input { position: absolute; opacity: 0; pointer-events: none; }
.tiles label::before { content: ""; flex: none; width: 18px; height: 18px; border: 1.5px solid var(--ink-muted); border-radius: 50%; background: var(--white); }
.tiles label.multi::before { border-radius: 3px; }
.tiles label:has(input:checked) { border-color: var(--ink); background: #fff6ef; }
.tiles label:has(input:checked)::before { border-color: var(--orange); background: var(--orange); box-shadow: inset 0 0 0 3px var(--white); }
.tiles label:has(input:focus-visible) { outline: 3px solid var(--orange); outline-offset: 2px; }
.svc-tiles label { flex-direction: column; align-items: flex-start; padding: 16px; min-height: 0; }
.svc-tiles label::before { position: absolute; top: 14px; right: 14px; }
.svc-tiles svg { width: 100%; max-width: 150px; height: auto; color: var(--ink); }
.svc-tiles strong { font: 700 1.15rem/1.15 var(--display); }
.svc-tiles small { color: var(--ink-muted); font-weight: 400; }
.form-nav { display: flex; gap: 12px; justify-content: space-between; align-items: center; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.form-nav .back { background: none; border: 0; color: var(--ink-muted); font: 600 var(--t-sm)/1 var(--label); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; padding: 12px 0; }
.form-nav .back:hover { color: var(--ink); }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: var(--t-sm); color: var(--ink-muted); }
.consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--orange); flex: none; }
.form-note { font-size: var(--t-xs); color: var(--ink-muted); margin-top: 18px; }
.form-note a { color: var(--orange-ink); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-alert { margin-top: 20px; padding: 14px 16px; border-radius: 6px; border: 1px solid var(--error); color: var(--error); background: #fdf1f0; font-size: var(--t-sm); }
.form-alert:empty { display: none; }
.trust-chips { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: center; margin-top: 28px; font-size: var(--t-sm); color: var(--ink-muted); }
.trust-chips li { display: inline-flex; gap: 8px; align-items: center; }
.trust-chips svg { width: 16px; height: 16px; color: var(--orange-ink); }

/* Preview note */

/* Reveal: only hidden when JS runs, so nothing is lost without it */
.js .reveal { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}
@media print {
  .trustbar, .header, .mbar, .cta-band, .drawer { display: none !important; }
  body { background: #fff; }
}

/* ---------- Utilities (no inline styles: the CSP blocks them) ---------- */
.mt-12 { margin-top: 12px; } .mt-14 { margin-top: 14px; } .mt-16 { margin-top: 16px; } .mt-18 { margin-top: 18px; }
.mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px; } .mt-26 { margin-top: 26px; } .mt-28 { margin-top: 28px; }
.mt-32 { margin-top: 32px; } .mt-56 { margin-top: 56px; } .mt-64 { margin-top: 64px; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-20 { margin-bottom: 20px; } .mb-24 { margin-bottom: 24px; }
.items-center { align-items: center; }
.text-white { color: var(--white); }
.text-orange, .tile-dark .arrow { color: var(--orange); }
.thanks-steps { margin: 40px auto 0; text-align: left; max-width: 520px; }
.range { font-family: var(--display); font-size: 1.2rem; }

/* ---------- Small-screen refinements ---------- */
@media (max-width: 640px) {
  /* Spec lists: label above value */
  .specs div { grid-template-columns: 1fr; gap: 4px; }
  /* Tables become stacked cards: no sideways scrolling on phones */
  .tbl { min-width: 0; }
  .tbl thead { display: none; }
  .tbl tr { display: block; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .tbl tbody tr:last-child { border-bottom: 0; }
  .tbl th, .tbl td { display: block; padding: 0; border: 0; }
  .tbl tr > * + * { margin-top: 4px; }
  .tbl td.num { font-size: 1.25rem; }
  .prose table { display: block; }
  .prose thead { display: none; }
  .prose tr { display: block; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .prose th, .prose td { display: block; padding: 0; border: 0; }
  .prose td:first-child { font-weight: 600; color: var(--ink); }
  .prose tr > * + * { margin-top: 2px; }
  /* Quote form service choices: compact rows */
  .svc-tiles { grid-template-columns: 1fr; }
  .svc-tiles label { display: grid; grid-template-columns: 84px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 12px 44px 12px 12px; }
  .svc-tiles svg { grid-row: 1 / 3; max-width: 84px; }
  .svc-tiles strong { align-self: end; font-size: 1.05rem; }
  .svc-tiles small { align-self: start; font-size: var(--t-xs); }
  .svc-tiles label::before { top: 50%; transform: translateY(-50%); }
  .eyebrow { letter-spacing: .1em; }
}
@media (max-width: 640px) {
  .tbl td[data-label]::before, .prose td[data-label]::before { content: attr(data-label); display: block; font: 600 11px/1.4 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 2px; }
  .prose td:first-child { font-weight: 400; }
  .prose tr > * + * { margin-top: 10px; }
  .tbl tr > * + * { margin-top: 10px; }
}

/* ==========================================================================
   Homepage polish (body.home)
   ========================================================================== */

/* Hero atmosphere: warm glow behind the drawing sheet */
.home .hero { isolation: isolate; }
.hero-glow { position: absolute; z-index: -1; right: -8%; top: 0; width: min(64vw, 920px); aspect-ratio: 1; background: radial-gradient(circle at center, rgb(255 106 0 / .3), rgb(255 106 0 / .1) 34%, transparent 62%); pointer-events: none; }
.home .hero::after { content: ""; position: absolute; z-index: -1; inset: auto 0 0 0; height: 40%; background: linear-gradient(transparent, rgb(11 11 12 / .9)); pointer-events: none; }
.home .hero h1 { letter-spacing: -.012em; }

/* Drawing sheet: depth + ruler ticks like a plan border */
.home .sheet { box-shadow: 0 50px 90px -40px rgb(0 0 0 / .9), 0 0 0 1px rgb(255 255 255 / .02) inset; background: linear-gradient(160deg, rgb(28 28 31 / .92), rgb(16 16 18 / .92)); }
.home .sheet-body {
  background:
    repeating-linear-gradient(90deg, rgb(201 202 208 / .2) 0 1px, transparent 1px 16px) top / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, rgb(201 202 208 / .4) 0 1px, transparent 1px 80px) top / 100% 10px no-repeat,
    repeating-linear-gradient(0deg, rgb(201 202 208 / .2) 0 1px, transparent 1px 16px) left / 5px 100% no-repeat,
    repeating-linear-gradient(0deg, rgb(201 202 208 / .4) 0 1px, transparent 1px 80px) left / 10px 100% no-repeat;
}

/* Services strip under the hero */
.ticker { background: var(--orange); color: var(--black); overflow: hidden; border-bottom: 1px solid var(--black); }
.ticker-track { display: flex; width: max-content; }
.ticker ul { display: flex; padding: 16px 0; }
.ticker li { display: flex; align-items: center; gap: 30px; padding-right: 30px; font: 700 1.2rem/1 var(--display); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.ticker li::after { content: ""; width: 8px; height: 8px; background: var(--black); transform: rotate(45deg); }

/* Service tiles: the drawing panel turns into a lit blueprint on hover */
.tile .art { transition: background-color .35s var(--ease), color .35s var(--ease); }
.tile:hover .art, .tile:focus-visible .art { background-color: var(--black); color: var(--silver); background-image: linear-gradient(rgb(201 202 208 / .07) 1px, transparent 1px), linear-gradient(90deg, rgb(201 202 208 / .07) 1px, transparent 1px); }
.tile:not(.tile-dark)::after { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 3px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.tile:not(.tile-dark):hover::after, .tile:not(.tile-dark):focus-visible::after { transform: scaleX(1); }

/* Small hover details */
.pillar { transition: background-color .25s var(--ease); }
.pillar svg { transition: color .25s var(--ease), transform .25s var(--ease); }
.pillar:hover { background: #fbfbfa; }
.pillar:hover svg { color: var(--orange-ink); transform: translateY(-2px); }
.cost .range { transition: color .2s var(--ease); }
.cost:hover .range { color: var(--orange-ink); }
.home .process .step::before { box-shadow: 0 0 0 6px rgb(255 106 0 / .14); }
.combo-art figure { transition: transform .35s var(--ease), border-color .35s var(--ease); }
.combo-art figure:hover { transform: translateY(-4px); border-color: var(--orange); }

@media (prefers-reduced-motion: no-preference) {
  /* Hero entrance */
  .home .hero .wrap > div:first-child > * { animation: rise .8s var(--ease) both; }
  .home .hero .wrap > div:first-child > :nth-child(2) { animation-delay: .08s; }
  .home .hero .wrap > div:first-child > :nth-child(3) { animation-delay: .16s; }
  .home .hero .wrap > div:first-child > :nth-child(4) { animation-delay: .24s; }
  .home .hero .wrap > div:first-child > :nth-child(5) { animation-delay: .32s; }
  .home .hero .sheet { animation: rise 1s .2s var(--ease) both; }

  /* Lines draw themselves in, like a pen on a plan (each tab switch replays it) */
  .js .sheet-body [data-d] { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .sheet-body .is-on [data-d] { animation: draw 1.6s cubic-bezier(.6, .05, .3, 1) forwards; }
  .js .sheet-body .is-on .acc[data-d], .js .sheet-body .is-on .acc [data-d] { animation-duration: 1s; animation-delay: .75s; }
  .js .sheet-body .is-on .dim [data-d] { animation-duration: .8s; animation-delay: 1.15s; }
  .js .sheet-body text, .js .sheet-body .ghost, .js .sheet-body .acc-fill { opacity: 0; }
  .js .sheet-body .is-on text { animation: fade-lbl .6s 1.4s forwards; }
  .js .sheet-body .is-on .ghost { animation: fade-ghost .6s .1s forwards; }
  .js .sheet-body .is-on .acc-fill { animation: fade-fill .8s 1s forwards; }

  .ticker-track { animation: ticker 48s linear infinite; }
  .ticker:hover .ticker-track { animation-play-state: paused; }

  /* Stagger the service tiles as they scroll in */
  .js .services-grid > .reveal:nth-child(2) { transition-delay: .07s; }
  .js .services-grid > .reveal:nth-child(3) { transition-delay: .14s; }
  .js .services-grid > .reveal:nth-child(4) { transition-delay: .07s; }
  .js .services-grid > .reveal:nth-child(5) { transition-delay: .14s; }
  .js .services-grid > .reveal:nth-child(6) { transition-delay: .21s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade-lbl { to { opacity: .8; } }
@keyframes fade-ghost { to { opacity: .55; } }
@keyframes fade-fill { to { opacity: .14; } }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (max-width: 640px) {
  .ticker li { font-size: 1rem; gap: 22px; padding-right: 22px; }
  .hero-glow { right: -40%; top: auto; bottom: 0; width: 120vw; }
}

/* ---------- 3D wireframe stages (assets/js/wire3d.js) ----------
   Hidden until the script confirms it can run; the flat SVG drawings are the fallback. */
.wire-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wire-stage { display: none; position: relative; border: 1px solid var(--graphite); border-radius: 10px; overflow: hidden; touch-action: pan-y; cursor: grab;
  background: radial-gradient(120% 90% at 50% 100%, rgb(255 106 0 / .1), transparent 60%), linear-gradient(160deg, #19191c, #0e0e10);
  box-shadow: 0 50px 90px -40px rgb(0 0 0 / .9); }
.wire-stage.is-dragging, .sheet.is-3d .sheet-body.is-dragging { cursor: grabbing; }
.wire-tag { position: absolute; z-index: 1; padding: 6px 10px; border: 1px solid rgb(255 106 0 / .55); border-radius: 4px; background: rgb(11 11 12 / .7); color: var(--offwhite); font: 400 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; pointer-events: none; }
.wire-tag-a { top: 14px; left: 14px; }
.wire-tag-b { bottom: 14px; right: 14px; }

/* Hero sheet in 3D */
.sheet.is-3d .sheet-body svg { display: none; }
.sheet.is-3d .sheet-body { cursor: grab; touch-action: pan-y; }
.sheet.is-3d .sheet-body .wire-canvas { inset: 12px 6px 0 14px; width: calc(100% - 20px); height: calc(100% - 12px); }
.sheet-hint { position: absolute; right: 14px; bottom: 10px; font: 400 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--silver-muted); pointer-events: none; }

/* Shed + office band */
.combo.is-3d .combo-art { display: none; }
.combo.is-3d .wire-combo { display: block; aspect-ratio: 4 / 3; }

/* Process band: house builds as you scroll; current step lights up */
section.is-3d .wire-process { display: block; height: clamp(240px, 30vw, 400px); margin-bottom: 40px; }
section.is-3d .process .step { opacity: .55; transition: opacity .35s var(--ease); }
section.is-3d .process .step.is-active { opacity: 1; }
section.is-3d .process .step::before { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
section.is-3d .process .step.is-active::before { transform: scale(1.15); box-shadow: 0 0 0 8px rgb(255 106 0 / .22), 0 0 24px rgb(255 106 0 / .5); }
section.is-3d .process .step.is-active h3 { color: var(--orange); }

/* 3D tilt + glare on service tiles (pointer-driven, see site.js) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html .tile[data-tilt], html .tile[data-tilt].is-in { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0)); transform-style: preserve-3d; transition: opacity .6s var(--ease), transform .2s var(--ease), border-color .2s var(--ease), box-shadow .3s var(--ease); }
  html .tile[data-tilt]:hover { --ty: -4px; box-shadow: 0 30px 60px -24px rgb(22 23 26 / .45); }
  .tile[data-tilt] .art { transform: translateZ(36px); }
  .tile[data-tilt] h3, .tile[data-tilt] .arrow { transform: translateZ(22px); }
  .tile[data-tilt]::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease);
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgb(255 106 0 / .12), transparent 45%); }
  .tile[data-tilt]:hover::before { opacity: 1; }
}

/* ==========================================================================
   Site-wide polish (every page)
   ========================================================================== */

/* Inner page heroes: same atmosphere as the homepage */
.page-hero { position: relative; isolation: isolate; overflow: hidden; }
.page-hero::after { content: ""; position: absolute; z-index: -1; inset: auto 0 0 0; height: 45%; background: linear-gradient(transparent, rgb(11 11 12 / .85)); pointer-events: none; }
.page-hero:not(.has-art) .hero-glow { right: -25%; top: -60%; opacity: .8; }

/* Drawing sheets everywhere: depth, gradient paper and ruler ticks like a plan border */
.sheet { box-shadow: 0 50px 90px -40px rgb(0 0 0 / .9), 0 0 0 1px rgb(255 255 255 / .02) inset; background: linear-gradient(160deg, rgb(28 28 31 / .92), rgb(16 16 18 / .92)); }
.sheet-body, .sheet-static {
  background:
    repeating-linear-gradient(90deg, rgb(201 202 208 / .2) 0 1px, transparent 1px 16px) top / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, rgb(201 202 208 / .4) 0 1px, transparent 1px 80px) top / 100% 10px no-repeat,
    repeating-linear-gradient(0deg, rgb(201 202 208 / .2) 0 1px, transparent 1px 16px) left / 5px 100% no-repeat,
    repeating-linear-gradient(0deg, rgb(201 202 208 / .4) 0 1px, transparent 1px 80px) left / 10px 100% no-repeat;
}
.sheet-static { position: relative; }
.sheet-static.is-3d { aspect-ratio: 400 / 290; cursor: grab; touch-action: pan-y; }
.sheet-static.is-3d > svg { display: none; }
.sheet-static.is-3d .wire-canvas { inset: 14px 8px 8px 16px; width: calc(100% - 24px); height: calc(100% - 22px); }
.sheet-static.is-3d.is-dragging { cursor: grabbing; }

/* Primary buttons: a light sweep on hover */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ease); }
.btn-primary:hover::after { transform: translateX(120%); }

/* Answer blocks: lifted card */
.answer { background: linear-gradient(180deg, #fff, #fdfaf7); box-shadow: 0 30px 60px -32px rgb(22 23 26 / .35); }

/* FAQ: + turns into an orange ×, answers fade in */
.faq summary::after { transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.faq details[open] summary::after { content: "+"; transform: rotate(45deg); background: var(--orange); border-color: var(--orange); color: var(--black); }
.faq details[open] .a { animation: fade-in .4s var(--ease); }
.faq details { transition: background-color .2s var(--ease); }
.faq details:hover { background: linear-gradient(90deg, rgb(255 106 0 / .04), transparent 60%); }

/* Spec rows highlight on hover */
.specs div { transition: background-color .2s var(--ease); }
.specs div:hover { background: rgb(255 106 0 / .06); }

/* Vertical timelines light up as you scroll past each step (site.js) */
.js .process-v .step::before { transition: transform .4s var(--ease), box-shadow .4s var(--ease), background-color .4s var(--ease); }
.js .process-v .step:not(.is-lit)::before { background: var(--line); color: var(--ink-muted); }
.js .on-dark .process-v .step:not(.is-lit)::before { background: var(--graphite); color: var(--silver-muted); }
.js .process-v .step.is-lit::before { box-shadow: 0 0 0 6px rgb(255 106 0 / .16); }

/* Reading progress bar under the header (site.js) */
.scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--orange-ink), var(--orange)); transform-origin: left; transform: scaleX(var(--p, 0)); pointer-events: none; }

/* Footer: orange hairline */
.footer { border-top: 1px solid transparent; border-image: linear-gradient(90deg, transparent, var(--orange), transparent) 1; }

/* Empty states get the drawing-paper grid */
.empty { background-color: var(--white); background-image: linear-gradient(rgb(22 23 26 / .035) 1px, transparent 1px), linear-gradient(90deg, rgb(22 23 26 / .035) 1px, transparent 1px); background-size: 24px 24px; }

/* 3D tilt + glare on linked cards and cost cards (pointer only) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html a.card[data-tilt], html a.card[data-tilt].is-in, html a.cost[data-tilt] { position: relative; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0)); transition: opacity .6s var(--ease), transform .2s var(--ease), border-color .2s var(--ease), box-shadow .3s var(--ease); }
  html a.card[data-tilt]:hover, html a.cost[data-tilt]:hover { --ty: -4px; box-shadow: 0 28px 56px -26px rgb(22 23 26 / .45); }
  a.card[data-tilt]::before, a.cost[data-tilt]::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease);
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgb(255 106 0 / .1), transparent 45%); }
  a.card[data-tilt]:hover::before, a.cost[data-tilt]:hover::before { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Inner hero entrance */
  .page-hero .wrap > div:first-child > * { animation: rise .8s var(--ease) both; }
  .page-hero .wrap > div:first-child > :nth-child(2) { animation-delay: .06s; }
  .page-hero .wrap > div:first-child > :nth-child(3) { animation-delay: .12s; }
  .page-hero .wrap > div:first-child > :nth-child(4) { animation-delay: .18s; }
  .page-hero .wrap > div:first-child > :nth-child(5) { animation-delay: .24s; }
  .page-hero .wrap > div:first-child > :nth-child(6) { animation-delay: .3s; }
  .page-hero .sheet { animation: rise 1s .15s var(--ease) both; }

  /* Stagger cards in any grid as they scroll in */
  .js .grid > .reveal:nth-child(2) { transition-delay: .06s; }
  .js .grid > .reveal:nth-child(3) { transition-delay: .12s; }
  .js .grid > .reveal:nth-child(4) { transition-delay: .18s; }
  .js .grid > .reveal:nth-child(5) { transition-delay: .06s; }
  .js .grid > .reveal:nth-child(6) { transition-delay: .12s; }

  /* Eyebrow rules draw in with their section */
  .js .reveal .eyebrow::after { width: 0; transition: width .7s .25s var(--ease); }
  .js .reveal.is-in .eyebrow::after { width: 2.5rem; }

  /* Orange band stripes drift slowly */
  .cta-band .hatch::before { animation: hatch-drift 6s linear infinite; will-change: transform; }

  /* Quote form steps slide in */
  .js .form-step.is-active { animation: rise .45s var(--ease); }
}
/* Looping decoration rests while it's off screen (site.js sets .is-paused) */
.is-paused, .is-paused *, .is-paused *::before, .is-paused *::after, .is-paused::before { animation-play-state: paused !important; }
@keyframes fade-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes hatch-drift { to { transform: translateX(39.6px); } }

/* ==========================================================================
   Homepage, round 3
   ========================================================================== */

/* Floating fact panels over the hero drawing sheet */
.float-chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 11px 15px; border: 1px solid var(--graphite); border-radius: 8px; background: rgb(20 20 22 / .88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--offwhite); font: 600 12.5px/1.2 var(--label); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 24px 48px -18px rgb(0 0 0 / .8); pointer-events: none; white-space: nowrap; }
.float-chip b { font: 700 1.5rem/1 var(--display); color: var(--orange); letter-spacing: 0; }
.float-chip i { font-style: normal; color: var(--orange); }
.float-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgb(255 106 0 / .2); }
.float-b { right: -24px; bottom: 92px; }
@media (max-width: 1100px) { .float-b { right: 12px; } }
@media (max-width: 640px) { .float-chip { display: none; } }

/* 3D scenes in the residential | commercial split */
.wire-stage.is-3d { display: block; }
.wire-split { height: clamp(200px, 19vw, 260px); margin-top: 28px; }
.wire-light { border-color: var(--line); background: radial-gradient(120% 90% at 50% 100%, rgb(255 106 0 / .08), transparent 60%), linear-gradient(160deg, #fbfbfa, #f0f0ed); box-shadow: 0 30px 60px -36px rgb(22 23 26 / .35); }
.wire-light .wire-tag { background: rgb(255 255 255 / .9); color: var(--ink); border-color: rgb(168 67 0 / .45); }

/* Project files: drawing-sheet cards waiting for the client's photos */
.file { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--graphite); border-radius: 10px; background: linear-gradient(160deg, #1c1c1f, #101012); color: var(--offwhite); box-shadow: 0 40px 70px -40px rgb(0 0 0 / .55); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.file:hover { transform: translateY(-4px); border-color: rgb(255 106 0 / .6); box-shadow: 0 50px 80px -40px rgb(0 0 0 / .65); }
.file-art { position: relative; padding: 34px 24px 16px; color: var(--silver);
  background:
    repeating-linear-gradient(90deg, rgb(201 202 208 / .2) 0 1px, transparent 1px 16px) top / 100% 5px no-repeat,
    repeating-linear-gradient(0deg, rgb(201 202 208 / .2) 0 1px, transparent 1px 16px) left / 5px 100% no-repeat,
    radial-gradient(90% 80% at 50% 100%, rgb(255 106 0 / .1), transparent 70%); }
.file-art .chip { position: absolute; top: 14px; right: 14px; }
.file .chip-tbc { color: var(--orange); background: rgb(11 11 12 / .6); }
.file-meta { padding: 16px 18px 20px; color: var(--silver-muted); font-size: var(--t-sm); }
.file-review { padding: 26px 26px 6px; justify-content: space-between; background: radial-gradient(100% 70% at 0% 0%, rgb(255 106 0 / .16), transparent 60%), linear-gradient(160deg, #1c1c1f, #101012); }
.quote-mark { display: block; height: 52px; font: 700 7rem/1 var(--display); color: var(--orange); }
.file-quote { margin-top: 14px; font: 600 1.45rem/1.3 var(--display); color: var(--white); }
.file-rating { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 26px; color: var(--silver); font-size: var(--t-sm); }
.file-review .file-meta { padding: 8px 0 20px; }

/* Service-area map: pins breathe, range rings turn, Canberra pulses */
.map .hq-pulse { fill: none; stroke: none; }
@media (prefers-reduced-motion: no-preference) {
  .float-b { animation: float 8s 1s ease-in-out infinite alternate-reverse; }
  .map .ring { transform-box: view-box; transform-origin: 250px 230px; animation: spin 90s linear infinite; }
  .map .ring + .ring { animation-duration: 140s; animation-direction: reverse; }
  .map circle.pin { transform-box: fill-box; transform-origin: center; animation: pin-breathe 2.8s ease-in-out infinite; }
  .map circle.pin:nth-of-type(odd) { animation-delay: 1.4s; }
  .map .hq-pulse { stroke: var(--orange); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: hq-ping 2.4s ease-out infinite; }
}
@keyframes float { to { transform: translateY(-10px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pin-breathe { 50% { transform: scale(1.35); } }
@keyframes hq-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(4.5); opacity: 0; } }

/* ==========================================================================
   Homepage, search and AI visibility (docs/plan/13)
   ========================================================================== */

/* Hero: the eyebrow sits inside the H1 so the heading carries "builders in Canberra" */
.home .hero h1 { margin-top: 0; }
.hero h1 .eyebrow { display: flex; width: fit-content; margin-bottom: 22px; }

/* At a glance: a direct answer beside a company fact sheet */
.glance { border-bottom: 1px solid var(--line); }
.glance-grid { display: grid; gap: 40px; align-items: center; }
.glance-grid > * { min-width: 0; }
@media (min-width: 1024px) { .glance-grid { grid-template-columns: 1fr 1.05fr; gap: 72px; } }
.glance .h2 { font-size: var(--t-2xl); }
.glance-answer { margin-top: 18px; padding-left: 18px; border-left: 3px solid var(--orange); font-size: var(--t-lg); max-width: 56ch; }
.glance-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 28px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.glance-stats li { background: var(--paper); padding: 16px 16px 14px; transition: background-color .25s var(--ease); }
.glance-stats li:hover { background: #fff6ef; }
.glance-stats b { display: block; font: 700 2.4rem/1 var(--display); color: var(--orange-ink); }
.glance-stats span { display: block; margin-top: 6px; font-size: var(--t-xs); line-height: 1.35; color: var(--ink-muted); }
.reviewed { display: flex; gap: 8px; align-items: flex-start; margin-top: 18px; font-size: var(--t-xs); color: var(--ink-muted); }
.reviewed svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--orange-ink); }
.reviewed time { font-family: var(--mono); }

.factsheet { position: relative; border: 1px solid var(--graphite); border-radius: 8px; background: linear-gradient(160deg, #1c1c1f, #101012); color: var(--offwhite); box-shadow: 0 40px 80px -40px rgb(0 0 0 / .6); }
.factsheet::before, .factsheet::after { content: ""; position: absolute; width: 18px; height: 18px; border-color: var(--orange); border-style: solid; }
.factsheet::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-top-left-radius: 8px; }
.factsheet::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-bottom-right-radius: 8px; }
.fs-head { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--graphite); font: 400 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--silver-muted); }
.fs-head span:first-child { color: var(--orange); }
.factsheet dl { margin: 0; }
.factsheet dl > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--graphite); transition: background-color .2s var(--ease); }
.factsheet dl > div:last-child { border-bottom: 0; }
.factsheet dl > div:hover { background: rgb(255 106 0 / .06); }
.factsheet dt { font: 400 10.5px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--silver-muted); }
.factsheet dd { margin: 0; font-size: var(--t-sm); line-height: 1.5; }
.factsheet .tbc { margin-right: 4px; }
@media (max-width: 520px) {
  .factsheet dl > div { grid-template-columns: 1fr; gap: 2px; }
  .glance-stats b { font-size: 2rem; }
  .glance-stats li { padding: 14px 12px 12px; }
}

/* Your builder: the person behind the licence (E-E-A-T) */
.builder { display: grid; grid-template-columns: auto 1fr; gap: 18px 22px; align-items: center; margin-top: 20px; padding: 22px 24px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; }
@media (min-width: 768px) { .builder { grid-template-columns: auto 1fr auto; } }
.builder-mark { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--black); color: var(--orange); font: 700 1.4rem/1 var(--display); letter-spacing: .04em; box-shadow: 0 0 0 4px var(--white), 0 0 0 5px var(--line); }
.builder-k { font: 600 var(--t-xs)/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--orange-ink); }
.builder-name { margin-top: 6px; font: 700 1.3rem/1.2 var(--display); }
.builder-bio { margin-top: 4px; font-size: var(--t-sm); color: var(--ink-muted); }
.builder-txt { min-width: 0; }
.builder .tbc { white-space: normal; }
.builder .arrow { grid-column: 1 / -1; color: var(--orange-ink); }
@media (min-width: 768px) { .builder .arrow { grid-column: auto; } }
@media (max-width: 520px) { .builder { padding: 20px 18px; gap: 14px 16px; } .builder-mark { width: 48px; height: 48px; font-size: 1.1rem; } }

/* Cited sources under facts */
.card p.src { margin-top: 12px; font-size: var(--t-xs); }
.src a { color: var(--orange-ink); text-underline-offset: 2px; }

/* Costs: short answer, then the side-by-side table */
.cost-answer { margin-bottom: 28px; }
.tbl-h { font-size: var(--t-xl); margin: 48px 0 16px; }
.cost-tbl { box-shadow: 0 30px 60px -40px rgb(22 23 26 / .35); }
.cost-tbl tbody tr { transition: background-color .2s var(--ease); }
.cost-tbl tbody tr:hover { background: #fffaf5; }
.cost-tbl tbody th a { font: 700 1.15rem/1.2 var(--display); text-decoration: none; white-space: nowrap; }
.cost-tbl tbody th a::after { content: " →"; color: var(--orange-ink); font-family: var(--sans); }
.cost-tbl tbody th a:hover { color: var(--orange-ink); }
.tbl td.num small { font: 400 var(--t-xs)/1.4 var(--sans); white-space: normal; }

/* FAQ questions are real headings inside <summary> */
.faq-q { font: inherit; letter-spacing: inherit; margin: 0; }

/* Inner pages: two even columns (copy beside a drawing or 3D model) */
@media (min-width: 1024px) { .cols.cols-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }

/* "On this page" jump links under the short answer (service pages) */
.jump { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.jump-k { flex: none; font: 600 var(--t-xs)/1 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.jump ul { display: flex; gap: 8px; margin: 0; padding: 2px 0 6px; list-style: none; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; min-width: 0; }
.jump li { flex: none; }
.jump a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font-size: var(--t-sm); text-decoration: none; white-space: nowrap; transition: border-color .2s var(--ease), color .2s var(--ease); }
.jump a:hover, .jump a:focus-visible { border-color: var(--orange); color: var(--orange-ink); }
@media (max-width: 640px) { .jump { flex-direction: column; align-items: stretch; gap: 10px; } }
.faq-jump li { padding: 0; }
.faq-jump a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; color: var(--ink); text-decoration: none; }
.faq-jump a:hover, .faq-jump a:focus-visible { color: var(--orange-ink); }

/* Tap targets: every standalone link at least 24px tall (WCAG 2.2 target size) */
.footer li + li { margin-top: 1px; }
.footer li > a { display: inline-block; padding-block: 4px; }
.arrow { min-height: 28px; }
.tbl th > a { display: inline-block; padding-block: 3px; }
.trustbar a { display: inline-flex; align-items: center; min-height: 24px; }
.footer .tb span { font-size: 10.5px; }
/* Very small phones: keep the licence line in the trust bar on one line */
@media (max-width: 400px) {
  .trustbar { font-size: 11px; }
  .trustbar li { white-space: nowrap; gap: 6px; }
  .trustbar .tbc { font-size: 9.5px; padding-inline: 3px; }
}

/* ---------- Blog ---------- */
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 22px; font: 600 var(--t-xs)/1.3 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--silver); }
.post-meta span { display: inline-flex; align-items: center; gap: 8px; }
.post-meta span + span::before { content: ""; width: 5px; height: 5px; background: var(--orange); transform: rotate(45deg); }
.takeaways { border: 1px solid var(--line); border-left: 4px solid var(--orange); border-radius: 8px; background: var(--white); padding: 24px 26px; margin-bottom: 40px; }
.takeaways h2 { font: 700 var(--t-lg)/1.2 var(--display); margin-bottom: 12px; }
.takeaways ul { display: grid; gap: 8px; }
.takeaways li { position: relative; padding-left: 22px; }
.takeaways li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 7px; height: 7px; background: var(--orange); transform: rotate(45deg); }
.post-body h2 { scroll-margin-top: 100px; }
.post-feature { display: grid; gap: 32px; align-items: center; text-decoration: none; color: inherit; border: 1px solid var(--graphite); border-radius: 12px; padding: 28px; background: linear-gradient(160deg, #1c1c1f, #101012); transition: border-color .3s var(--ease), transform .3s var(--ease); }
.post-feature:hover { border-color: var(--orange); transform: translateY(-3px); }
@media (min-width: 1024px) { .post-feature { grid-template-columns: 1.1fr 1fr; padding: 40px; gap: 48px; } }
.post-feature h2 { font: 700 clamp(1.8rem, 3.2vw, 2.6rem)/1.08 var(--display); color: var(--white); margin: 14px 0 14px; }
.post-feature p { color: var(--silver); }
.post-feature .arrow { margin-top: 22px; color: var(--orange); }
.post-feature .sheet { pointer-events: none; }
.post-grid { display: grid; gap: 24px; }
@media (min-width: 768px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--ink); text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
a.post-card:hover { transform: translateY(-4px); border-color: var(--orange); box-shadow: 0 30px 60px -36px rgb(0 0 0 / .35); }
.post-art { position: relative; padding: 30px 24px 14px; background: linear-gradient(160deg, #1c1c1f, #101012); color: var(--silver); }
.post-art .chip { position: absolute; top: 14px; left: 14px; }
.post-body-card { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 26px; }
.post-body-card .post-meta { margin: 0 0 10px; color: var(--ink-muted); }
.post-body-card h3 { font: 700 var(--t-lg)/1.18 var(--display); margin-bottom: 10px; }
.post-body-card p { color: var(--ink-muted); font-size: var(--t-sm); }
.post-body-card .arrow { margin-top: auto; padding-top: 18px; color: var(--orange-ink); }
.post-card.is-soon { background: var(--paper); }
.post-card.is-soon .post-art { opacity: .55; }
.topic-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.topic-chips span { padding: 7px 14px; border: 1px solid var(--graphite); border-radius: 999px; font: 600 var(--t-xs)/1.2 var(--label); letter-spacing: .08em; text-transform: uppercase; color: var(--silver); }
.post-art .chip:not(.chip-tbc) { color: var(--offwhite); border-color: var(--graphite); background: rgb(0 0 0 / .35); }

/* ---------- Blog, v2: frameless 3D stages, bylines, numbered sections ---------- */
.blog-hero .wrap { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .blog-hero .wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; } }
.blog-stage { position: relative; aspect-ratio: 5 / 4; border-radius: 16px; border: 1px solid var(--graphite); overflow: hidden; cursor: grab; touch-action: pan-y;
  background: radial-gradient(70% 55% at 50% 78%, rgb(255 106 0 / .18), transparent 70%), linear-gradient(160deg, #19191c, #0c0c0e); box-shadow: 0 50px 90px -50px rgb(0 0 0 / .8); }
.blog-stage.is-dragging { cursor: grabbing; }
.blog-stage > svg { position: absolute; inset: 9%; width: 82%; height: 82%; color: var(--silver); }
.blog-stage.is-3d > svg { display: none; }
.blog-stage .wire-canvas { inset: 0; width: 100%; height: 100%; }
.blog-stage.wide { aspect-ratio: 16 / 7; }
.stage-cap { position: absolute; left: 18px; bottom: 16px; z-index: 1; font: 400 10.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--silver-muted); pointer-events: none; }
.stage-cap b { color: var(--orange); font-weight: 400; }
.stage-tag { position: absolute; left: 16px; top: 16px; z-index: 1; padding: 6px 12px; border: 1px solid var(--graphite); border-radius: 999px; background: rgb(0 0 0 / .35); font: 600 10.5px/1 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--offwhite); pointer-events: none; }
.byline { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.byline .badge { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: var(--black); font: 700 15px/1 var(--display); letter-spacing: .02em; }
.byline b { display: block; color: var(--white); font-weight: 600; font-size: var(--t-sm); }
.byline small { display: block; color: var(--silver); font-size: var(--t-xs); margin-top: 2px; }
.blog-hero .post-meta { margin-top: 18px; }
.post-body { counter-reset: sec; }
.post-body > h2.h3 { counter-increment: sec; display: flex; align-items: baseline; gap: 14px; }
.post-body > h2.h3::before { content: counter(sec, decimal-leading-zero); flex: none; font: 600 13px/1 var(--mono); letter-spacing: .08em; color: var(--orange-ink); transform: translateY(-4px); }
.post-body .prose p, .post-body .prose li, .post-body > p { font-size: 1.05rem; line-height: 1.75; }
.post-quote { position: relative; margin: 44px 0; padding: 30px 30px 28px 64px; border-radius: 14px; background: var(--black); color: var(--offwhite); font: 700 clamp(1.3rem, 2.2vw, 1.7rem)/1.25 var(--display); }
.post-quote::before { content: "“"; position: absolute; left: 20px; top: 8px; font-size: 4rem; line-height: 1; color: var(--orange); }
.post-quote cite { display: block; margin-top: 14px; font: 400 var(--t-xs)/1.4 var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--silver-muted); }
.post-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 56px; padding: 24px 26px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.post-end p { margin: 0; font-weight: 600; }
.share { display: flex; flex-wrap: wrap; gap: 8px; }
.share a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: var(--t-sm); text-decoration: none; transition: border-color .2s var(--ease), color .2s var(--ease); }
.share a:hover, .share a:focus-visible { border-color: var(--orange); color: var(--orange-ink); }
.post-art { aspect-ratio: 400 / 250; padding: 0; }
.post-art > svg { position: absolute; inset: 10% 6% 4%; width: 88%; height: 86%; }
.post-art.is-3d > svg { display: none; }
.post-art .wire-canvas { inset: 0; width: 100%; height: 100%; }
.post-art .chip { z-index: 1; }
.timeline-band .wire-process { height: clamp(220px, 26vw, 360px); }
.stage-cap .dot { display: inline-block; width: 5px; height: 5px; margin: 0 8px 1px; background: var(--orange); transform: rotate(45deg); }
.post-feature .post-feature-h { font: 700 clamp(1.8rem, 3.2vw, 2.6rem)/1.08 var(--display); color: var(--white); margin: 14px 0; }
.post-feature .blog-stage { box-shadow: none; }
.blog-stage .sheet-hint { top: 22px; bottom: auto; right: 18px; }

/* Projects page: filters, live 3D file cards and the project file viewer (projects.js) */
.pf-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 28px; }
.pf-bar[hidden] { display: none; }
.pf-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-filters button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); cursor: pointer; font: 600 var(--t-xs)/1 var(--label); letter-spacing: .1em; text-transform: uppercase; transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease); }
.pf-filters button:hover { border-color: var(--orange); }
.pf-filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.pf-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--paper); color: var(--ink-muted); font: 400 11px/1 var(--mono); letter-spacing: 0; }
.pf-filters button[aria-pressed="true"] .pf-n { background: var(--orange); color: var(--black); }
.pf-count { margin: 0; font: 400 var(--t-xs)/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
[data-pf-grid] > [hidden] { display: none !important; }
::view-transition-group(*) { animation-duration: .38s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }

.file { position: relative; }
.file-art.is-3d > svg { visibility: hidden; }
.file-art .wire-canvas { inset: 0; width: 100%; height: 100%; }
.file-art .chip { z-index: 1; }
.file-open { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding: 14px 18px; border: 0; border-top: 1px solid var(--graphite); background: none; color: var(--orange); cursor: pointer; font: 600 var(--t-xs)/1 var(--label); letter-spacing: .12em; text-transform: uppercase; text-align: left; }
.file-open::before { content: ""; position: absolute; inset: 0; z-index: 2; }
.file-open::after { content: "\2192"; font-size: 1rem; transition: transform .25s var(--ease); }
.file:hover .file-open::after, .file-open:focus-visible::after { transform: translateX(4px); }
.file-open:focus-visible { outline: 0; }
.file:has(.file-open:focus-visible) { outline: 3px solid var(--orange); outline-offset: 3px; }

html.pf-lock { overflow: hidden; }
.pf-dialog { width: min(1120px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--graphite); border-radius: 16px; background: linear-gradient(160deg, #1c1c1f, #0e0e10); box-shadow: 0 60px 120px -40px rgb(0 0 0 / .8); }
.pf-dialog::backdrop { background: rgb(11 11 12 / .74); backdrop-filter: blur(4px); }
.pf-dialog[open] { animation: pf-in .32s var(--ease); }
@keyframes pf-in { from { opacity: 0; transform: translateY(18px) scale(.985); } }
.pf-shell { display: grid; max-height: calc(100dvh - 34px); overflow: auto; overscroll-behavior: contain; }
@media (min-width: 900px) { .pf-shell { grid-template-columns: 1.3fr 1fr; } }
.pf-stage { position: relative; display: flex; flex-direction: column; border-bottom: 1px solid var(--graphite);
  background: radial-gradient(90% 70% at 50% 90%, rgb(255 106 0 / .12), transparent 70%), linear-gradient(rgb(201 202 208 / .06) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgb(201 202 208 / .06) 1px, transparent 1px) 0 0 / 24px 24px; }
@media (min-width: 900px) { .pf-stage { border-bottom: 0; border-right: 1px solid var(--graphite); } }
.pf-canvas { position: relative; flex: 1; min-height: 240px; aspect-ratio: 4 / 3; color: var(--silver); cursor: grab; touch-action: pan-y; }
.pf-canvas.is-dragging { cursor: grabbing; }
.pf-canvas > svg { position: absolute; inset: 12% 8% 8%; width: 84%; height: 80%; }
.pf-canvas.is-3d > svg { display: none; }
.pf-canvas .sheet-hint { right: 18px; bottom: 8px; }
.pf-scrub { padding: 0 20px 20px; }
.pf-scrub[hidden] { display: none; }
.pf-scrub-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 10px; }
.pf-scrub-top label { font: 600 var(--t-xs)/1 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--silver); }
.pf-scrub-top output { font: 400 var(--t-xs)/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--orange); }
.pf-play { margin-left: auto; min-height: 40px; padding: 0 14px; border: 1px solid var(--graphite); border-radius: 999px; background: rgb(0 0 0 / .3); color: var(--offwhite); cursor: pointer; font: 600 11px/1 var(--label); letter-spacing: .12em; text-transform: uppercase; }
.pf-play:hover { border-color: var(--orange); }
#pf-range { width: 100%; height: 32px; margin: 0; accent-color: var(--orange); cursor: pointer; }
.pf-ticks { display: grid; grid-template-columns: repeat(5, 1fr); margin: 4px 0 0; padding: 0; list-style: none; font: 400 10px/1.25 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--silver-muted); }
.pf-ticks li { padding-top: 8px; border-top: 2px solid var(--graphite); transition: color .2s var(--ease), border-color .2s var(--ease); }
.pf-ticks li + li { margin-left: 4px; }
.pf-ticks li.is-on { color: var(--offwhite); border-color: var(--orange); }
.pf-info { display: flex; flex-direction: column; gap: 18px; padding: 24px 24px 22px; }
@media (min-width: 900px) { .pf-info { padding: 32px 32px 26px; } }
.pf-top { display: flex; align-items: center; min-height: 44px; padding-right: 52px; }
.pf-note .chip-tbc { border-color: var(--orange); color: var(--orange); }
.pf-close { position: absolute; top: 14px; right: 14px; z-index: 3; background: rgb(14 14 16 / .85) !important; display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid var(--graphite); border-radius: 50%; background: none; color: var(--white); cursor: pointer; font-size: 1.5rem; line-height: 1; }
.pf-close:hover { border-color: var(--orange); color: var(--orange); }
.pf-title { margin: 0; font: 700 var(--t-2xl)/1.05 var(--display); color: var(--white); }
.pf-meta { margin: 0; color: var(--silver); }
.pf-spec { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border: 1px solid var(--graphite); border-radius: 10px; overflow: hidden; }
.pf-spec > div { padding: 10px 14px; border-top: 1px solid var(--graphite); min-width: 0; }
.pf-spec > div:nth-child(-n+2) { border-top: 0; }
.pf-spec > div:nth-child(even) { border-left: 1px solid var(--graphite); }
.pf-spec dt { font: 400 10px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--silver-muted); }
.pf-spec dd { margin: 4px 0 0; color: var(--white); font: 400 var(--t-sm)/1.3 var(--mono); }
.pf-note { margin: 0; color: var(--silver-muted); font-size: var(--t-sm); }
.pf-note .chip { margin-right: 6px; }
.pf-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.pf-cta .btn { flex: 1 1 auto; white-space: nowrap; }
.pf-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--graphite); font: 400 var(--t-xs)/1 var(--mono); color: var(--silver-muted); }
.pf-nav button { min-height: 44px; padding: 0 14px; border: 1px solid var(--graphite); border-radius: 999px; background: none; color: var(--offwhite); cursor: pointer; font: 600 11px/1 var(--label); letter-spacing: .12em; text-transform: uppercase; }
.pf-nav button:hover { border-color: var(--orange); color: var(--orange); }
.pf-nav [data-pf-prev]::before { content: "\2190\00a0"; }
.pf-nav [data-pf-next]::after { content: "\00a0\2192"; }
@media (max-width: 480px) { .pf-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); } .pf-shell { max-height: calc(100dvh - 18px); } .pf-info { padding: 20px 16px; } .pf-scrub { padding: 0 16px 16px; } .pf-spec { grid-template-columns: 1fr; } .pf-spec > div:nth-child(even) { border-left: 0; } .pf-spec > div:nth-child(2) { border-top: 1px solid var(--graphite); } }
@media (prefers-reduced-motion: reduce) { .pf-dialog[open] { animation: none; } }

/* Responsive 3D frames: never taller than the screen (landscape phones), hints fade once used */
.sheet-static.is-3d, .blog-stage, .wire-split.is-3d { max-height: 72vh; max-height: 72svh; }
.sheet-hint { transition: opacity .4s var(--ease); }
.was-dragged > .sheet-hint, .was-dragged .sheet-hint { opacity: 0; }
@media (max-width: 600px) {
  .pf-bar { display: block; }
  .pf-filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 10px; padding: 2px 16px 6px; scroll-padding-inline: 16px; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 32px), transparent); }
  .pf-filters::-webkit-scrollbar { display: none; }
  .pf-filters button { flex: none; scroll-snap-align: start; }
}
/* Viewer: one column on portrait screens with the model kept short enough to see the slider,
   side by side on wide or landscape screens with the model pinned while the details scroll */
.pf-canvas { min-height: 200px; max-height: 46vh; max-height: 46svh; }
@media (min-width: 900px), (min-width: 600px) and (max-height: 560px) and (orientation: landscape) {
  .pf-shell { grid-template-columns: 1.3fr 1fr; }
  .pf-stage { position: sticky; top: 0; align-self: start; max-height: calc(100dvh - 34px); border-bottom: 0; border-right: 1px solid var(--graphite); }
  .pf-canvas { flex: 1 1 auto; min-height: 0; max-height: none; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .pf-scrub { padding: 0 16px 12px; }
  .pf-scrub-top { margin-bottom: 4px; }
  .pf-ticks { display: none; }
  .pf-info { gap: 12px; padding: 20px 18px; }
  .pf-title { font-size: var(--t-xl); }
}
@media (min-width: 900px), (min-width: 600px) and (max-height: 560px) and (orientation: landscape) {
  .pf-stage { height: 100%; }
  .pf-canvas { aspect-ratio: auto; min-height: 200px; }
}

/* Process page: numbered step chips in the hero, service timelines beside a model that follows the tab */
.step-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; counter-reset: step; }
.step-chips li { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 6px; border: 1px solid var(--graphite); border-radius: 999px; background: rgb(0 0 0 / .3); color: var(--offwhite); font: 600 var(--t-xs)/1 var(--label); letter-spacing: .08em; text-transform: uppercase; counter-increment: step; }
.step-chips li::before { content: "0" counter(step); display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--orange); color: var(--black); font: 400 10px/1 var(--mono); letter-spacing: 0; }
.step-chips li:last-child { border-color: rgb(255 106 0 / .6); }
.seg-flow .seg-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg-flow .seg-tabs::-webkit-scrollbar { display: none; }
.seg-flow .seg-tabs button { flex: none; }
.seg-flow-grid { display: grid; gap: 32px; }
.seg-flow-art { order: -1; }
.seg-flow-art .blog-stage { aspect-ratio: 16 / 10; }
.seg-flow-art .fine { margin-top: 12px; }
@media (min-width: 1024px) {
  .seg-flow-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 56px; align-items: start; }
  .seg-flow-art { order: 0; position: sticky; top: 110px; }
  .seg-flow-art .blog-stage { aspect-ratio: 5 / 4; }
}
.seg-flow .seg-panel { animation: seg-in .35s var(--ease); }
@keyframes seg-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .seg-flow .seg-panel { animation: none; } }
.paper-grid .post-quote { margin: 40px 0 0; }
@media (max-width: 700px) { .seg-flow .seg-tabs { display: flex; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); } .seg-flow .seg-tabs button { scroll-margin-inline: 24px; } }
.seg-flow .seg-tabs.at-end { -webkit-mask-image: none; mask-image: none; }
@media (max-width: 899px) { .timeline-band.is-3d .wire-process { position: sticky; top: 74px; z-index: 2; height: 190px; margin-bottom: 28px; background-color: #121214; box-shadow: 0 -12px 0 0 var(--black), 0 20px 30px -10px rgb(0 0 0 / .7); } }

/* Process page v3: journey rail (every job), handover sheet, ACT and NSW rules, payment ladder */
.journey-stage.is-3d { display: block; height: clamp(220px, 26vw, 360px); margin-bottom: 18px; }
.journey-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 30px; }
.journey-status { margin: 0; font: 400 var(--t-xs)/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--orange); }
.journey-play { min-height: 40px; padding: 0 16px; border: 1px solid var(--graphite); border-radius: 999px; background: rgb(0 0 0 / .3); color: var(--offwhite); cursor: pointer; font: 600 11px/1 var(--label); letter-spacing: .12em; text-transform: uppercase; transition: border-color .2s var(--ease); }
.journey-play::before { content: "\21BB\00a0"; color: var(--orange); }
.journey-play:hover { border-color: var(--orange); }
.is-journey .process { position: relative; }
.is-journey .process .step::after { display: none; }
.is-journey .process .step::before { z-index: 1; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease); }
.is-journey .process .step { opacity: .5; transition: opacity .35s var(--ease); }
.is-journey .process .step.is-done, .is-journey .process .step.is-active { opacity: 1; }
.is-journey .process .step:not(.is-done):not(.is-active)::before { background: #1c1c1f; color: var(--silver); box-shadow: inset 0 0 0 1px var(--graphite); }
.is-journey .process .step.is-active::before { transform: scale(1.15); box-shadow: 0 0 0 8px rgb(255 106 0 / .22), 0 0 24px rgb(255 106 0 / .5); }
.is-journey .process .step.is-active h3, .is-journey .process .step:hover h3 { color: var(--orange); }
.jr-rail { position: absolute; z-index: 0; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--graphite) 0 6px, transparent 6px 12px); pointer-events: none; }
.jr-rail.is-down { background: repeating-linear-gradient(180deg, var(--graphite) 0 6px, transparent 6px 12px); }
.jr-fill { position: absolute; left: 0; top: 0; width: calc(var(--jp, 1) * 100%); height: 100%; border-radius: 4px; background: linear-gradient(90deg, #6e2b00, var(--orange) 55%, #ffb36b); box-shadow: 0 0 18px rgb(255 106 0 / .55); }
.jr-rail.is-down .jr-fill { width: 100%; height: calc(var(--jp, 1) * 100%); background: linear-gradient(180deg, #6e2b00, var(--orange) 55%, #ffb36b); }
.jr-head { position: absolute; left: calc(var(--jp, 1) * 100%); top: 50%; width: 14px; height: 14px; border-radius: 50%; background: #fff3e6; box-shadow: 0 0 0 4px rgb(255 106 0 / .45), 0 0 22px 4px rgb(255 106 0 / .8); transform: translate(-50%, -50%); }
.jr-rail.is-down .jr-head { left: 50%; top: calc(var(--jp, 1) * 100%); }
.jr-hit { position: absolute; inset: -10px -6px; z-index: 2; border: 0; border-radius: 10px; background: none; cursor: pointer; }
.jr-hit:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

.handover-sheet { overflow: hidden; border: 1px solid var(--graphite); border-radius: 14px; background: linear-gradient(160deg, #1c1c1f, #101012); color: var(--offwhite); box-shadow: 0 40px 70px -40px rgb(0 0 0 / .55); }
.hs-row { display: grid; grid-template-columns: minmax(150px, 1fr) 2fr 1.4fr; border-top: 1px solid var(--graphite); transition: background-color .25s var(--ease); }
.hs-row > span { padding: 18px 22px; min-width: 0; }
.hs-row > span + span { border-left: 1px solid var(--graphite); }
.hs-row:not(.hs-head):hover { background: rgb(255 106 0 / .06); }
.hs-head { border-top: 0; font: 400 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--silver-muted); }
.hs-head > span { padding-block: 14px; }
.hs-row [role="rowheader"] { font: 700 1.15rem/1.2 var(--display); color: var(--white); }
.hs-row [role="rowheader"] b { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 10px; border-radius: 4px; background: var(--orange); color: var(--black); font: 700 12px/1 var(--mono); vertical-align: 2px; }
.hs-row [role="cell"] { color: var(--silver); font-size: var(--t-sm); }
.hs-row [role="cell"]:last-child { color: var(--offwhite); }
.hs-last [role="rowheader"] b { box-shadow: 0 0 0 6px rgb(255 106 0 / .18); }
@media (max-width: 767px) {
  .hs-head { display: none; }
  .hs-row { grid-template-columns: 1fr; padding: 16px 0; }
  .hs-row:first-child + .hs-row { border-top: 0; }
  .hs-row > span { padding: 4px 18px; }
  .hs-row > span + span { border-left: 0; }
  .hs-row [role="cell"]::before { display: block; margin: 8px 0 2px; font: 400 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
  .hs-row [role="cell"]:nth-child(2)::before { content: "You get"; }
  .hs-row [role="cell"]:nth-child(3)::before { content: "You decide"; }
}

.rules { border: 1px solid var(--graphite); border-radius: 14px; overflow: hidden; background: rgb(11 11 12 / .6); }
.rules-row { display: grid; grid-template-columns: minmax(160px, .8fr) 1.4fr 1.4fr; border-top: 1px solid var(--graphite); }
.rules-row > span { padding: 18px 22px; min-width: 0; color: var(--silver); font-size: var(--t-sm); }
.rules-row > span + span { border-left: 1px solid var(--graphite); }
.rules-head { border-top: 0; background: rgb(255 255 255 / .03); }
.rules-head > span { color: var(--offwhite); font: 600 var(--t-xs)/1.4 var(--label); letter-spacing: .08em; text-transform: uppercase; }
.rules-tag { display: inline-grid; place-items: center; min-width: 44px; height: 26px; margin-right: 8px; padding: 0 8px; border-radius: 999px; background: var(--orange); color: var(--black); font: 700 11px/1 var(--mono); letter-spacing: .06em; }
.rules-head > span:last-child .rules-tag { background: var(--silver); }
.rules-k { font: 400 11px/1.4 var(--mono) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--offwhite) !important; }
.rules-src { margin-top: 18px; max-width: 900px; color: var(--silver-muted); font-size: var(--t-xs); }
.rules-src a { color: var(--silver); text-underline-offset: 3px; }
.rules-src a:hover { color: var(--orange); }
@media (max-width: 899px) {
  .rules-head { display: none; }
  .rules-row { grid-template-columns: 1fr; padding: 14px 0; }
  .rules-row:nth-child(2) { border-top: 0; }
  .rules-row > span { padding: 6px 18px; }
  .rules-row > span + span { border-left: 0; }
  .rules-row > span:nth-child(2)::before, .rules-row > span:nth-child(3)::before { display: inline-grid; place-items: center; min-width: 40px; height: 22px; margin-right: 8px; padding: 0 6px; border-radius: 999px; font: 700 10px/1 var(--mono); color: var(--black); vertical-align: 1px; }
  .rules-row > span:nth-child(2)::before { content: "ACT"; background: var(--orange); }
  .rules-row > span:nth-child(3)::before { content: "NSW"; background: var(--silver); }
}

.pay-ladder { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; align-items: end; margin: 0; padding: 0; list-style: none; counter-reset: pay; }
.pay-ladder li { --i: 0; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; counter-increment: pay; }
.pay-ladder li:nth-child(2) { --i: 1; } .pay-ladder li:nth-child(3) { --i: 2; } .pay-ladder li:nth-child(4) { --i: 3; } .pay-ladder li:nth-child(5) { --i: 4; } .pay-ladder li:nth-child(6) { --i: 5; }
.pay-ladder li::before { content: "0" counter(pay); display: flex; align-items: flex-start; padding: 10px 12px; height: calc(46px + var(--i) * 26px); border-radius: 8px 8px 0 0; background: linear-gradient(180deg, var(--orange), #b54700); color: var(--black); font: 700 12px/1 var(--mono); transform-origin: bottom; transition: transform .7s var(--ease) calc(var(--i) * 90ms); }
.pay-ladder li:last-child::before { background: linear-gradient(180deg, #ffb36b, var(--orange)); box-shadow: 0 -10px 30px -10px rgb(255 106 0 / .6); }
.js .pay-ladder.reveal:not(.is-in) li::before { transform: scaleY(.08); }
.pay-ladder b { display: block; padding: 14px 2px 4px; border-top: 2px solid var(--ink); font: 700 1.15rem/1.15 var(--display); }
.pay-ladder span { color: var(--ink-muted); font-size: var(--t-sm); }
@media (max-width: 899px) {
  .pay-ladder { grid-template-columns: 1fr; gap: 10px; }
  .pay-ladder li { display: grid; grid-template-columns: 1fr; }
  .pay-ladder li::before { height: 34px; width: calc(22% + var(--i) * 15.6%); align-items: center; border-radius: 0 8px 8px 0; transform-origin: left; transition-property: transform; }
  .js .pay-ladder.reveal:not(.is-in) li::before { transform: scaleX(.08); }
  .pay-ladder b { border-top: 0; padding: 6px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .pay-ladder li::before { transition: none; } .js .pay-ladder.reveal:not(.is-in) li::before { transform: none; } }

/* About and contact v2: service chips, the usual way vs one builder, promise ledger, crew cards,
   live hours, contact channels, what happens next, and the area check */
.svc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.svc-chips a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--graphite); border-radius: 999px; background: rgb(0 0 0 / .3); color: var(--offwhite); font: 600 var(--t-xs)/1 var(--label); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: border-color .2s var(--ease), color .2s var(--ease); }
.svc-chips a:hover, .svc-chips a:focus-visible { border-color: var(--orange); color: var(--orange); }

.gap-list { display: grid; gap: 14px; max-width: 640px; margin: 0; padding: 0; list-style: none; }
.gap-list li { position: relative; padding: 18px 20px 18px 54px; border: 1px dashed var(--ink-muted); border-radius: 10px; background: var(--white); color: var(--ink-muted); }
.gap-list li::before { content: "\00d7"; position: absolute; left: 18px; top: 16px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); color: var(--ink); font: 700 15px/1 var(--sans); }
.gap-list b { color: var(--ink); }
.gap-list.is-ours li { border: 1px solid rgb(255 106 0 / .45); background: linear-gradient(90deg, rgb(255 106 0 / .07), var(--white) 40%); }
.gap-list.is-ours li::before { content: "\2713"; background: var(--orange); color: var(--black); }

.promise-sheet a { padding-block: 4px; color: var(--orange); text-underline-offset: 3px; }
.promise-sheet a:hover { color: #ffb36b; }
.hs-tbc [role="rowheader"] b { background: transparent; color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
@media (max-width: 767px) {
  .promise-sheet .hs-row [role="cell"]:nth-child(2)::before { content: "What it means"; }
  .promise-sheet .hs-row [role="cell"]:nth-child(3)::before { content: "How you can check"; }
}

.story-quote { margin: 0 0 24px; background: rgb(255 255 255 / .04); border: 1px solid var(--graphite); }
.story-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0; padding: 0; list-style: none; border: 1px solid var(--graphite); border-radius: 10px; overflow: hidden; background: var(--graphite); }
.story-facts li { padding: 14px 16px; background: var(--black); }
.story-facts span { display: block; font: 400 10px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--silver-muted); }
.story-facts b { display: block; margin-top: 6px; color: var(--white); font-weight: 600; }
.ph-dark { background: rgb(255 255 255 / .03); }
.ph-dark .img { background: repeating-linear-gradient(135deg, #151517 0 10px, #1c1c1f 10px 20px); color: var(--silver-muted); }

.crew { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--white); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.crew:hover { transform: translateY(-4px); border-color: rgb(255 106 0 / .5); box-shadow: 0 30px 50px -30px rgb(22 23 26 / .35); }
.crew-photo { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 12px; background: repeating-linear-gradient(135deg, var(--paper) 0 10px, #ebebe8 10px 20px); border-bottom: 1.5px dashed var(--orange); color: var(--ink-muted); font: 400 var(--t-xs)/1.4 var(--mono); text-align: center; }
.crew-tag { display: flex; justify-content: space-between; gap: 12px; padding: 10px 18px; background: var(--black); color: var(--silver); font: 400 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.crew-tag b { color: var(--orange); font-weight: 400; }
.crew h3 { margin: 16px 18px 0; font-size: 1.25rem; }
.crew p { margin: 6px 18px 20px; color: var(--ink-muted); font-size: var(--t-sm); }

.hours-pill { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 22px 0 0; padding: 8px 16px 8px 12px; border: 1px solid var(--graphite); border-radius: 999px; background: rgb(0 0 0 / .35); color: var(--offwhite); font: 600 var(--t-xs)/1.2 var(--label); letter-spacing: .08em; text-transform: uppercase; }
.hours-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--silver-muted); }
.hours-pill.is-open .hours-dot { background: #3ddc84; box-shadow: 0 0 0 4px rgb(61 220 132 / .2); }
.hours-tz { color: var(--silver-muted); font: 400 10px/1 var(--mono); letter-spacing: .1em; }
@media (prefers-reduced-motion: no-preference) { .hours-pill.is-open .hours-dot { animation: hours-pulse 2.4s ease-out infinite; } }
@keyframes hours-pulse { 50% { box-shadow: 0 0 0 7px rgb(61 220 132 / .05); } }

.channel { position: relative; display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.channel:hover { transform: translateY(-4px); border-color: rgb(255 106 0 / .5); box-shadow: 0 30px 50px -30px rgb(22 23 26 / .3); }
.channel-k { display: inline-flex; align-items: center; gap: 8px; font: 600 var(--t-xs)/1 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--orange-ink); }
.channel-k svg { width: 18px; height: 18px; }
.channel h3 { margin-top: 14px; font-size: var(--t-xl); }
.channel p { margin-top: 8px; color: var(--ink-muted); font-size: var(--t-sm); }
.channel-best { margin-top: auto; padding-top: 18px; font: 400 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.channel-best::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; background: var(--orange); transform: rotate(45deg) translateY(-1px); }
.channel-hot { border-color: var(--black); background: linear-gradient(160deg, #1c1c1f, #101012); color: var(--offwhite); }
.channel-hot h3 { color: var(--white); }
.channel-hot p { color: var(--silver); }
.channel-hot .channel-k { color: var(--orange); }
.channel-hot .channel-best { color: var(--offwhite); }

.reply-by { margin-top: 14px; padding-left: 12px; border-left: 3px solid var(--orange); color: var(--ink); font-size: var(--t-sm); font-weight: 600; }
.next-steps { display: grid; gap: 0; margin: 6px 0 0; padding: 0; list-style: none; counter-reset: nx; }
.next-steps li { position: relative; padding: 0 0 18px 40px; counter-increment: nx; }
.next-steps li::before { content: counter(nx); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 4px; background: var(--orange); color: var(--black); font: 700 12px/1 var(--mono); }
.next-steps li::after { content: ""; position: absolute; left: 12px; top: 32px; bottom: 4px; width: 2px; background: repeating-linear-gradient(var(--line) 0 5px, transparent 5px 10px); }
.next-steps li:last-child::after { display: none; }
.next-steps b { display: block; }
.next-steps span { color: var(--ink-muted); font-size: var(--t-sm); }
.next-steps i { display: block; margin-top: 4px; font: 400 10.5px/1.2 var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-ink); }

.area-check { margin-top: 26px; max-width: 520px; }
.area-row { display: flex; gap: 8px; margin-top: 8px; }
.area-row .inp { flex: 1; min-width: 0; }
.area-row .btn { flex: none; }
.area-out { margin-top: 14px; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--white); font-size: var(--t-sm); }
.area-out b { display: block; margin-bottom: 4px; font-size: var(--t-base); }
.area-out.is-yes { border-color: rgb(46 125 79 / .5); background: linear-gradient(90deg, rgb(46 125 79 / .08), var(--white) 60%); }
.area-out.is-yes b { color: var(--success); }
.area-out a { color: var(--orange-ink); }
.map circle.pin { transition: r .25s var(--ease), fill .25s var(--ease); }
.map circle.is-hit { r: 9; fill: var(--success); }
.map circle.hq.is-hit { r: 11; }
.map text.is-hit { fill: var(--success); }
.aside-card .next-steps span { color: var(--silver); }
.aside-card .next-steps i { color: var(--orange); }
.aside-card .next-steps li::after { background: repeating-linear-gradient(var(--graphite) 0 5px, transparent 5px 10px); }
.hours-pill-card { margin: 16px 0 18px; }

/* Short landscape screens (phones turned sideways): slimmer sticky header and call bar, two-up cards,
   and drawing frames sized by the screen height so each one fits on screen whole */
@media (orientation: landscape) and (max-height: 500px) {
  .header > .wrap { height: 60px; }
  .header.is-scrolled > .wrap { height: 52px; }
  .mbar { padding-block: 6px calc(6px + env(safe-area-inset-bottom)); }
  .mbar .btn { min-height: 40px; }
  body.has-mbar { padding-bottom: 56px; }
  .sheet { max-width: calc((100vh - 190px) * 1.48); max-width: calc((100svh - 190px) * 1.48); margin-inline: auto; width: 100%; }
  .sheet-static { max-width: calc((100vh - 110px) * 1.38); max-width: calc((100svh - 110px) * 1.38); }
  .combo.is-3d .wire-combo { width: 100%; max-width: calc((100vh - 100px) * 1.33); max-width: calc((100svh - 100px) * 1.33); margin-inline: auto; }
}
@media (orientation: landscape) and (max-height: 500px) and (min-width: 560px) {
  .grid-2, .grid-3, .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Real contact details (client answers): phone and email are links now */
.head-phone:hover, .head-phone:focus-visible { color: var(--white); }
.drawer .d-phone { text-decoration: none; font-weight: 600; }
.footer .contact a { color: inherit; text-decoration: none; }
.footer .contact a:hover, .footer .contact a:focus-visible { color: var(--orange); }
.lic-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 20px 0 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--line); }
.lic-facts > div { padding: 12px 16px; background: var(--white); min-width: 0; }
.lic-facts dt { font: 400 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.lic-facts dd { margin: 4px 0 0; font-weight: 600; }
@media (max-width: 480px) { .lic-facts { grid-template-columns: 1fr; } }
.story-cards { margin-top: 48px; }
@media (min-width: 768px) and (max-width: 1180px) { .trustbar ul:not(.right) li:nth-child(2) { display: none; } }
a[href^="tel:"]:not(.btn):not(.head-phone):not(.d-phone), a[href^="mailto:"]:not(.btn) { display: inline-block; padding-block: 3px; }