/* Sewers.ca interactive sections — layered on the engine's site.css tokens (--accent, --ink, --on-ink…). */
.x-explorer { background: var(--ink); color: var(--on-ink); }
.x-explorer .sec-head p, .x-flush .sec-head p, .x-cities .sec-head p { max-width: 520px; }
.x-exp { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 20px; align-items: stretch; margin-top: 8px; }
@media (max-width: 980px) { .x-exp { grid-template-columns: 1fr; } }
.x-stage { perspective: 1400px; border-radius: 20px; background: #0b1310; border: 1px solid var(--ink-line); overflow: hidden; }
.x-3d { position: relative; transform-style: preserve-3d; aspect-ratio: 1000 / 560; transition: transform .05s linear; }
.x-l { position: absolute; inset: 0; width: 100%; height: 100%; }
.x-back { transform: translateZ(-60px) scale(1.06); } .x-mid { transform: translateZ(0); } .x-front { transform: translateZ(50px) scale(.95); }
.x-noscript { padding: 30px; color: var(--on-ink-2); }
.x-panel { background: var(--ink-2); border: 1px solid var(--ink-line); border-radius: 20px; padding: 22px 24px; }
.x-panel h3 { font: 700 22px/1.25 var(--f-head); margin: 6px 0 10px; color: var(--on-ink); }
.x-panel p, .x-panel li { color: var(--on-ink-2); font-size: 15.5px; line-height: 1.55; } .x-panel ul { padding-left: 18px; margin: 8px 0 12px; }
.x-panel .x-own { display: flex; gap: 10px; align-items: baseline; font-size: 14px; } .x-own span { font: 600 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.x-good { color: #7ee0a8 !important; font-weight: 600; } .x-bad { color: #ff8a7a !important; font-weight: 600; } .x-note { color: #f0c36a !important; font-size: 14.5px !important; }
.x-cta { margin-top: 10px; display: inline-flex; }
.x-modes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; align-items: center; }
.x-modes button { background: var(--ink-2); border: 1px solid var(--ink-line); color: var(--on-ink-2); border-radius: 999px; padding: 9px 16px; font: 600 14px var(--f-body); cursor: pointer; }
.x-modes button:hover { border-color: var(--accent); color: var(--on-ink); }
.x-modes button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.x-valve { display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; color: var(--on-ink-2); font-size: 14px; }
.x-text { margin-top: 18px; color: var(--on-ink-2); } .x-text summary { cursor: pointer; color: var(--on-ink); font-weight: 600; }
.x-text-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 12px; }
.x-text h3 { color: var(--on-ink); font-size: 17px; } .x-text li { margin-bottom: 6px; font-size: 14.5px; line-height: 1.5; } .x-text a { color: var(--accent); }

/* scene parts */
.x-t { fill: var(--on-ink-2); font: 600 11px var(--f-mono); letter-spacing: .08em; } .x-t-dim { fill: #6d7c75; }
.x-strata { fill: none; stroke: rgba(255,255,255,.035); stroke-width: 2; }
.x-basement { fill: #0c1210; } .x-frostline { fill: none; stroke: #6fa8c8; stroke-dasharray: 6 6; stroke-width: 1.5; opacity: .35; }
.x-road { fill: #2b2f2d; } .x-road-line { stroke: #d9c77a; stroke-dasharray: 18 14; stroke-width: 2; opacity: .6; }
.x-roof { fill: #3a302a; stroke: #c9a85a; stroke-width: 2; } .x-house { fill: #16211d; stroke: #3d4a44; stroke-width: 2; } .x-floor { stroke: #3d4a44; stroke-width: 2; }
.x-win { fill: #203a45; stroke: #3d5a66; } .x-trunk { fill: #5a4632; } .x-canopy { fill: #2f5a3a; opacity: .92; }
.x-rootfine { fill: none; stroke: #8a6a44; stroke-width: 2; stroke-linecap: round; opacity: .8; }
.x-drive { fill: #7c8580; } .x-snow { fill: #e8eef2; opacity: 0; transition: opacity .4s; }
.x-pipe { fill: none; stroke: #8f9c95; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; } .x-pipe-v { stroke-width: 11; } .x-pipe-s { stroke-width: 7; }
.x-cap { fill: #c9d2cc; } .x-fixture { fill: #e6ece8; } .x-grate { fill: #0a0f0c; stroke: #8f9c95; }
.x-valve-body { fill: #1b2320; stroke: var(--accent); stroke-width: 2; } .x-flap { stroke: #ff6f5a; stroke-width: 4; stroke-linecap: round; transform-box: fill-box; transform-origin: top; transition: transform .35s cubic-bezier(.3,1.6,.5,1); transform: rotate(-70deg); }
.x-joint { stroke: #5d6b64; stroke-width: 3; }
.x-lat-sag, .x-pool { display: none; } .x-pool { fill: none; stroke: #4da3ff; stroke-width: 7; stroke-linecap: round; opacity: .8; }
.x-pl { stroke: var(--accent); stroke-dasharray: 8 6; stroke-width: 2; }
.x-shaft { fill: #0c1210; stroke: #5d6b64; } .x-main { fill: #0c1210; stroke: #8f9c95; stroke-width: 6; }
.x-mainwater { fill: #6b5530; transition: y .8s, height .8s; }
.fx { opacity: 0; transition: opacity .4s; } .x-rootmass { fill: #8a6a44; transform-box: fill-box; transform-origin: center; }
.x-grease { stroke: #e0c070; stroke-width: 10; stroke-linecap: round; opacity: .9; }
.x-break { fill: none; stroke: #ff6f5a; stroke-width: 3; } .x-soilin { fill: none; stroke: #2a2217; stroke-width: 9; stroke-linecap: round; }
.x-ice { fill: #cfe8f5; stroke: #fff; }
.x-backup { fill: #6b5530; opacity: .85; transition: y 1.6s ease, height 1.6s ease; }
.x-flow { fill: none; stroke: #4da3ff; stroke-width: 4; stroke-dasharray: 10 14; stroke-linecap: round; animation: xflow 1.1s linear infinite; }
@keyframes xflow { to { stroke-dashoffset: -48; } }
.x-hs { cursor: pointer; } .x-hs circle { fill: #0e1713; stroke: var(--accent); stroke-width: 3; transition: r .2s; } .x-hs text { fill: var(--accent); font: 700 12px var(--f-mono); pointer-events: none; }
.x-hs:hover circle, .x-hs:focus circle, .x-hs.on circle { fill: var(--accent); } .x-hs:hover text, .x-hs:focus text, .x-hs.on text { fill: var(--accent-ink); } .x-hs:focus { outline: none; }
.x-hs circle { animation: xpulse 2.8s ease-in-out infinite; } @keyframes xpulse { 50% { stroke-width: 5; } }

/* modes */
.mode-roots .fx-roots, .mode-grease .fx-grease, .mode-collapse .fx-collapse, .mode-frozen .fx-ice { opacity: 1; }
.mode-roots .x-rootmass { animation: xgrow 1.6s ease-out both; } @keyframes xgrow { from { transform: scale(.2); } to { transform: scale(1); } }
.mode-grease .x-grease { stroke-dasharray: 96; animation: xgrease 1.4s ease-out both; } @keyframes xgrease { from { stroke-dashoffset: 96; } to { stroke-dashoffset: 0; } }
.mode-sag .x-lat { display: none; } .mode-sag .x-lat-sag, .mode-sag .x-pool { display: inline; }
.mode-frozen .x-snow { opacity: .9; } .mode-frozen .x-frostline { opacity: .9; }
/* blocked line: house water backs up to the floor drain; nothing reaches the main */
.mode-roots .x-flow-lat, .mode-grease .x-flow-lat, .mode-collapse .x-flow-lat, .mode-frozen .x-flow-lat, .mode-sag .x-flow-lat { animation-duration: 4s; opacity: .35; }
.mode-roots .x-flow-lat, .mode-collapse .x-flow-lat, .mode-frozen .x-flow-lat, .mode-grease .x-flow-lat { display: none; }
.mode-roots .x-flow-house, .mode-grease .x-flow-house, .mode-collapse .x-flow-house, .mode-frozen .x-flow-house { animation-duration: 3.4s; }
.mode-roots .x-backup, .mode-grease .x-backup, .mode-collapse .x-backup, .mode-frozen .x-backup { y: 292px; height: 20px; }
.mode-collapse .x-backup { y: 284px; height: 28px; }
/* City main surcharge: main fills, flow reverses up the lateral; the valve decides the basement's fate */
.mode-surcharge .x-mainwater { y: 326px; height: 70px; }
.mode-surcharge .x-flow-lat { stroke: #b08a4a; animation-direction: reverse; }
.mode-surcharge .x-flow-house { display: none; }
.mode-surcharge.valve-on .x-flap { transform: rotate(0deg); }
.mode-surcharge.valve-off .x-backup { y: 280px; height: 32px; }
.valve-off .x-valve { opacity: .15; }

/* follow the flush */
.x-flush-stage { background: #0b1310; border: 1px solid var(--ink-line); border-radius: 20px; padding: 10px; margin-top: 8px; }
.x-flush-svg { width: 100%; height: auto; display: block; }
.x-fl-ground { fill: #1b1812; } .x-fl-river { fill: #1f4d5c; } .x-fl-house { fill: #16211d; stroke: #5d6b64; } .x-fl-roof { fill: none; stroke: #c9a85a; stroke-width: 3; }
.x-fl-lift { fill: #1b2320; stroke: var(--accent); } .x-fl-pump { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 5 4; } .x-fl-tank { fill: #1f4d5c; stroke: #6fa8c8; stroke-width: 2; }
.x-fl-path { fill: none; stroke: #3a4540; stroke-width: 14; stroke-linecap: round; } .x-fl-flow { fill: none; stroke: #4da3ff; stroke-width: 3; stroke-dasharray: 8 12; opacity: .45; animation: xflow 1.4s linear infinite; }
.x-fl-stop circle { fill: #0e1713; stroke: #5d6b64; stroke-width: 3; } .x-fl-stop text { fill: #6d7c75; font: 600 10.5px var(--f-mono); letter-spacing: .06em; }
.x-fl-stop.on circle { stroke: var(--accent); fill: var(--accent); } .x-fl-stop.on text { fill: var(--on-ink); }
.x-fl-drop { fill: #4da3ff; stroke: #fff; stroke-width: 2; filter: drop-shadow(0 0 6px rgba(77,163,255,.7)); }
.x-flush-ctl { display: flex; align-items: center; gap: 14px; margin: 14px 0; }
.x-stops { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; padding: 0; list-style: none; counter-reset: st; }
.x-stops li { counter-increment: st; background: var(--ink-2); border: 1px solid var(--ink-line); border-radius: 14px; padding: 12px 14px; transition: border-color .3s, transform .3s; }
.x-stops li::before { content: counter(st, decimal-leading-zero); font: 700 11px var(--f-mono); color: #6d7c75; display: block; margin-bottom: 4px; }
.x-stops li strong { display: block; color: var(--on-ink); font-size: 15px; } .x-stops li span { color: var(--on-ink-2); font-size: 13.5px; line-height: 1.45; display: block; margin-top: 4px; }
.x-stops li.on { border-color: var(--accent); transform: translateY(-3px); } .x-stops li.on::before, .x-stops li.done::before { color: var(--accent); }

/* who owns it */
.x-city-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.x-city-grid article { background: var(--paper-2, rgba(127,127,127,.06)); border: 1px solid var(--line, rgba(127,127,127,.2)); border-radius: 16px; padding: 18px; }
.x-city-grid h3 { margin: 0 0 6px; font-size: 18px; } .x-city-grid p { font-size: 15px; line-height: 1.5; margin: 0 0 10px; } .x-city-grid .mono { color: var(--accent-deep); }

@media (prefers-reduced-motion: reduce) { .x-flow, .x-fl-flow, .x-hs circle { animation: none; } .x-3d { transform: none !important; } }
/* Editorial homepage: a paper HAUSE masthead, useful first actions and room for the evidence. */
:root { --x-paper: #f6f5ef; --x-surface: #fffefa; --x-soft: #eceee5; --x-line: #d6dbce; --x-ink: #1b3026; --x-muted: #58655e; --x-mint: #dcefcf; --x-deep: #2b5b3e; }
body { background: var(--x-paper); color: var(--x-ink); }
.x-home-hero, .x-section, .x-explorer, .x-flush { color: var(--x-ink); }
.x-home-hero h1, .x-section h2, .x-section h3, .x-explorer h2, .x-flush h2 { color: var(--x-ink); }
.x-home-hero .wrap, .x-section .wrap, .x-page-nav .wrap, .x-explorer .wrap, .x-flush .wrap { max-width: 1320px; padding-left: 34px; padding-right: 34px; }
.site-head { background: var(--x-paper); color: var(--x-ink); border-color: var(--x-line); }
.site-head .wrap { max-width: 1320px; padding-left: 34px; padding-right: 34px; min-height: 86px; }
.site-head .brand { color: var(--x-ink); }
.site-head .brand small { color: var(--x-muted); }
.site-head .main-nav a { color: var(--x-ink); font-size: 13px; border: 1px solid var(--x-line); border-radius: 999px; margin: 0 3px; padding: 11px 17px; }
.site-head .main-nav a:hover, .site-head .main-nav a[aria-current="page"] { background: var(--x-soft); color: var(--x-ink); }
.site-head .main-nav .btn { background: var(--x-deep); border-color: var(--x-deep); color: #fffefa; box-shadow: none; }
.site-head .nav-toggle { background: var(--x-soft); color: var(--x-ink); border-color: var(--x-line); border-radius: 999px; }
.x-hause-brand { display:flex; align-items:baseline; gap:12px; color:var(--x-ink); text-decoration:none; font:800 25px var(--f-head); letter-spacing:-.06em; }
.x-hause-brand .x-brand-site { padding-left:13px; border-left:1px solid var(--x-line); color:var(--x-muted); font:500 12px var(--f-body); letter-spacing:0; }
.netbar { background: #e9ece3; color: var(--x-muted); border-bottom: 1px solid var(--x-line); }
.netbar a, .netbar .net-label { color: var(--x-muted); }
.netbar a:hover, .netbar a[aria-current] { color: var(--x-deep); }
.x-eyebrow { display:block; font:600 10px/1.5 var(--f-mono); letter-spacing:.13em; color:var(--x-muted); }
.x-home-hero { padding: 64px 0 38px; }
.x-home-grid { display:grid; grid-template-columns: .95fr 1.05fr; align-items:center; gap:46px; }
.x-home-copy { padding:16px 0 24px; }
.x-home-copy h1 { font-size:clamp(40px,5.6vw,76px); line-height:1.04; font-weight:650; letter-spacing:-.055em; margin:22px 0 26px; }
.x-home-copy h1 em, .x-section h2 em { color:var(--x-deep); font-style:normal; font-weight:500; }
.x-home-deck { color:var(--x-muted); font-size:17px; line-height:1.65; max-width:43ch; }
.x-actions { display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin:28px 0 24px; }
.x-home-hero .btn-accent { background:var(--x-deep); color:var(--x-surface); box-shadow:none; padding:17px 25px; font-size:13px; }
.x-home-hero .btn-accent:hover { background:#1e4730; }
.x-text-link { display:inline-flex; align-items:center; gap:10px; color:var(--x-deep); font-size:13px; line-height:1.5; font-weight:700; text-decoration:none; }
.x-text-link:hover { text-decoration:underline; }
.x-home-note { display:flex; align-items:baseline; gap:8px; font-size:11px; color:var(--x-muted); }
.x-home-note>span { width:6px; height:6px; flex:none; background:var(--x-deep); border-radius:50%; }
.x-home-scene { position:relative; margin:0; padding:0 0 4px; }
.x-home-scene img { display:block; width:100%; height:410px; object-fit:cover; object-position:center; border-radius:100px 6px 6px 6px; filter:saturate(.7); }
.x-home-scene::before { content:''; position:absolute; width:140px; height:140px; top:-17px; right:-18px; border:1px solid var(--x-line); border-radius:50%; z-index:-1; }
.x-home-scene figcaption { display:flex; justify-content:space-between; gap:10px; margin-top:13px; font-size:11px; color:var(--x-muted); }
.x-home-scene figcaption span { font:500 9px var(--f-mono); text-align:right; }
.x-scene-card { position:absolute; left:22px; bottom:54px; max-width:300px; padding:22px 25px; border-radius:3px; background:rgba(247,247,240,.96); box-shadow:0 15px 45px -24px #18291f80; }
.x-scene-card .x-eyebrow { font-size:8px; }
.x-scene-card strong { display:block; font:500 23px/1.15 var(--f-head); letter-spacing:-.035em; margin:10px 0 14px; }
.x-scene-card a { color:var(--x-deep); display:flex; align-items:center; gap:16px; font-size:10px; font-weight:700; text-decoration:none; }
.x-scene-card a:hover { text-decoration:underline; }
.x-page-nav { border-top:1px solid var(--x-line); border-bottom:1px solid var(--x-line); padding:17px 0; }
.x-page-nav .wrap { display:flex; align-items:center; justify-content:space-between; gap:24px; overflow:auto; scrollbar-width:thin; }
.x-page-nav a { white-space:nowrap; color:var(--x-muted); font-size:11px; text-decoration:none; }
.x-page-nav a:hover { color:var(--x-deep); text-decoration:underline; }
.x-section { padding:78px 0; scroll-margin-top:105px; }
.x-section-head { display:grid; grid-template-columns:1.4fr 1fr; align-items:end; gap:65px; margin-bottom:34px; }
.x-section h2 { font-size:clamp(29px,3.3vw,44px); line-height:1.12; font-weight:600; letter-spacing:-.045em; margin:14px 0 0; }
.x-section-head>p { color:var(--x-muted); font-size:15px; line-height:1.65; max-width:39ch; margin:0 0 3px; justify-self:end; }
.x-section-head>.x-text-link { justify-self:end; }
.x-small { color:var(--x-muted); font-size:11px; line-height:1.65; }
.x-small a { color:var(--x-deep); }
.x-path-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.x-path { position:relative; display:flex; flex-direction:column; padding:25px 22px 24px; border:1px solid var(--x-line); border-radius:5px; overflow:hidden; min-height:305px; background:var(--x-surface); }
.x-path-num { font:600 8px var(--f-mono); letter-spacing:.09em; color:var(--x-muted); }
.x-path h3 { font:550 23px/1.15 var(--f-head); letter-spacing:-.04em; margin:31px 0 16px; position:relative; z-index:1; max-width:14ch; }
.x-path h3 a { color:var(--x-ink); text-decoration:none; }
.x-path h3 a:hover { color:var(--x-deep); text-decoration:underline; }
.x-path p { font-size:12px; line-height:1.65; color:var(--x-muted); position:relative; z-index:1; }
.x-path-link { display:flex; justify-content:space-between; gap:12px; margin-top:auto; padding-top:12px; font-size:11px; font-weight:700; color:var(--x-deep); text-decoration:none; position:relative; z-index:1; }
.x-path-link:hover { text-decoration:underline; }
.x-path-shape { position:absolute; right:15px; top:15px; color:#dbe6d4; font:500 70px var(--f-head); opacity:.85; transform:rotate(-8deg); pointer-events:none; }
.x-path-urgent { background:#f0eadc; border-color:#ddd4bd; }
.x-path-urgent .x-path-shape { color:#ded3b8; }
.x-start-foot { max-width:900px; margin:20px 0 0; }
.x-triage { background:var(--x-soft); padding:56px 0; border-top:1px solid var(--x-line); border-bottom:1px solid var(--x-line); }
.x-triage-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:75px; }
.x-triage-intro>p { color:var(--x-muted); font-size:14px; max-width:36ch; margin:23px 0; }
.x-triage-intro>.x-small { font-size:11px; margin-top:22px; max-width:45ch; }
.x-triage-workspace { background:var(--x-surface); border:1px solid var(--x-line); border-radius:6px; padding:27px; }
.x-triage-fields { display:grid; grid-template-columns:1fr 1fr; gap:17px 14px; }
.x-triage-fields>div:first-child { grid-column:1/-1; }
.x-triage-fields label { display:block; font-size:11px; font-weight:650; margin-bottom:7px; color:var(--x-ink); }
.x-triage-fields select { display:block; width:100%; padding:12px 32px 12px 12px; border:1px solid var(--x-line); border-radius:4px; color:var(--x-ink); background:var(--x-paper); font:400 13px/1.4 var(--f-body); }
.x-triage-run { display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:17px; background:var(--x-deep); color:var(--x-surface); border:0; border-radius:4px; padding:13px 15px; font:650 12px var(--f-head); cursor:pointer; }
.x-triage-run[hidden] { display:none; }
.x-triage-result { margin-top:24px; border-top:1px solid var(--x-line); padding-top:23px; }
.x-triage-result h3 { font:600 25px/1.2 var(--f-head); letter-spacing:-.03em; margin:8px 0 12px; }
.x-triage-result p, .x-triage-result li { font-size:12px; line-height:1.65; color:var(--x-muted); }
.x-triage-result ul { padding-left:17px; margin:13px 0; }
.x-triage-result li { margin:5px 0; }
.x-triage-result h4 { font-size:12px; margin:18px 0 8px; }
.x-triage-result .x-triage-follow { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.x-triage-follow a { font-size:11px; text-decoration:none; color:var(--x-deep); border:1px solid var(--x-line); padding:7px 11px; border-radius:999px; }
.x-triage-follow a:hover { background:var(--x-soft); }
.x-triage-result .x-triage-alert { background:#f4ead5; color:#644619; border-left:3px solid #b18439; border-radius:2px; padding:12px 14px; font-size:12px; }
.x-triage-result .btn { background:var(--x-deep); color:var(--x-surface); box-shadow:none; margin-top:14px; padding:12px 17px; font-size:11px; }
.x-brief-status { margin:12px 0 0; }
.x-brief-status:empty { display:none; }
.x-service-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:23px; }
.x-service-card { border-top:2px solid #92ad85; padding:22px 0 0; display:flex; flex-direction:column; }
.x-service-card h3 { font:550 21px/1.2 var(--f-head); letter-spacing:-.035em; margin:17px 0 14px; max-width:18ch; }
.x-service-card p { font-size:12px; line-height:1.7; color:var(--x-muted); min-height:80px; }
.x-service-card>a { display:flex; justify-content:space-between; gap:8px; color:var(--x-deep); font-size:12px; font-weight:600; text-decoration:none; padding:11px 0; border-top:1px solid var(--x-line); }
.x-service-card>a:hover { text-decoration:underline; }
.x-service-limit { margin-top:auto; padding:18px 0 0; color:var(--x-muted); font-size:11px; line-height:1.65; }
.x-service-limit strong { display:block; color:var(--x-ink); font-size:10px; margin-bottom:5px; }
.x-inline-bar { display:flex; justify-content:space-between; align-items:center; gap:20px; border-top:1px solid var(--x-line); margin-top:32px; padding-top:20px; }
.x-inline-bar p { margin:0; color:var(--x-muted); font-size:12px; }
.x-tools { background:#eceee4; }
.x-tool-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.x-tool-card { position:relative; padding:31px 26px 27px; min-height:270px; background:var(--x-surface); color:var(--x-ink); text-decoration:none; border:1px solid var(--x-line); border-radius:5px; display:flex; flex-direction:column; transition:border-color .2s,transform .2s; }
.x-tool-card:hover { border-color:var(--x-deep); transform:translateY(-3px); }
.x-tool-card h3 { font:550 26px/1.15 var(--f-head); letter-spacing:-.035em; margin:27px 0 15px; }
.x-tool-card p { color:var(--x-muted); font-size:13px; max-width:32ch; line-height:1.65; }
.x-tool-card strong { display:flex; justify-content:space-between; font-size:11px; color:var(--x-deep); margin-top:auto; padding-top:13px; }
.x-tool-symbol { position:absolute; right:22px; top:16px; color:#99ae8b; font:500 39px var(--f-head); }
.x-tools .x-small { margin:20px 0 0; max-width:800px; }
/* Preserve the three-layer house and the animated flush, in a calmer light frame. */
.x-explorer { background:var(--x-paper); padding:78px 0 45px; scroll-margin-top:105px; }
.x-explorer .sec-head, .x-flush .sec-head { margin-bottom:28px; }
.x-explorer .depth, .x-flush .depth { color:var(--x-muted); font:600 10px var(--f-mono); letter-spacing:.13em; }
.x-explorer .sec-head h2, .x-flush .sec-head h2 { font-size:clamp(29px,3.3vw,44px); font-weight:600; letter-spacing:-.045em; margin:14px 0 0; }
.x-explorer .sec-head p, .x-flush .sec-head p { color:var(--x-muted); font-size:14px; line-height:1.65; max-width:42ch; }
.x-exp { grid-template-columns:minmax(0,1.8fr) minmax(260px,1fr); gap:22px; }
.x-stage { border-radius:6px; }
.x-panel { background:var(--x-surface); border:1px solid var(--x-line); border-radius:6px; padding:24px; }
.x-panel .mono { color:var(--x-muted); font-size:9px; }
.x-panel h3 { color:var(--x-ink); font-size:22px; font-weight:550; letter-spacing:-.03em; }
.x-panel p, .x-panel li { color:var(--x-muted); font-size:12px; }
.x-panel .x-own { font-size:11px; display:block; margin-top:17px; }
.x-panel .x-own span { color:var(--x-deep); font-size:9px; margin-right:8px; }
.x-panel .x-cta { font-size:11px; padding:12px 15px; border-color:var(--x-line); background:var(--x-deep); color:var(--x-surface); box-shadow:none; line-height:1.4; }
.x-panel .x-note { color:#735728 !important; font-size:11px !important; }
.x-panel .x-good { color:#276137 !important; }
.x-panel .x-bad { color:#a4422b !important; }
.x-modes { gap:7px; margin-top:17px; }
.x-modes button { background:var(--x-surface); color:var(--x-muted); border:1px solid var(--x-line); padding:9px 13px; font-size:11px; }
.x-modes button:hover { border-color:var(--x-deep); color:var(--x-deep); }
.x-modes button[aria-pressed="true"] { background:var(--x-deep); color:var(--x-surface); border-color:var(--x-deep); }
.x-modes .x-valve { color:var(--x-muted); font-size:11px; }
.x-text { color:var(--x-muted); font-size:12px; margin-top:22px; border-top:1px solid var(--x-line); padding-top:15px; }
.x-text summary { color:var(--x-ink); font-size:12px; }
.x-text h3 { color:var(--x-ink); font-size:16px; }
.x-text li { font-size:12px; }
.x-text a { color:var(--x-deep); }
.x-flush { background:var(--x-paper); padding:35px 0 70px; scroll-margin-top:105px; }
.x-flush-stage { border-radius:6px; padding:13px; }
.x-flush-ctl .btn { background:var(--x-deep); color:var(--x-surface); box-shadow:none; font-size:12px; padding:13px 22px; }
.x-flush-ctl .mono { color:var(--x-muted); font-size:10px; }
.x-stops { grid-template-columns:repeat(5,1fr); gap:10px; }
.x-stops li { background:var(--x-surface); border:1px solid var(--x-line); border-radius:4px; padding:15px; }
.x-stops li strong { color:var(--x-ink); font-size:12px; }
.x-stops li span { color:var(--x-muted); font-size:11px; }
.x-stops li.on { border-color:var(--x-deep); }
.x-stops li.on::before, .x-stops li.done::before { color:var(--x-deep); }
.x-responsibility { border-top:1px solid var(--x-line); border-bottom:1px solid var(--x-line); padding:58px 0; }
.x-responsibility-grid, .x-question-grid { display:grid; grid-template-columns:1fr 1fr; gap:85px; }
.x-responsibility-grid>div>p { color:var(--x-muted); font-size:14px; max-width:42ch; margin:24px 0; }
.x-city-links { padding-top:5px; }
.x-city-links a { display:block; position:relative; padding:20px 32px 20px 0; border-bottom:1px solid var(--x-line); color:var(--x-ink); text-decoration:none; }
.x-city-links a:first-child { border-top:1px solid var(--x-line); }
.x-city-links span { font:550 18px var(--f-head); letter-spacing:-.025em; }
.x-city-links small { display:block; margin-top:5px; font-size:11px; color:var(--x-muted); }
.x-city-links b { position:absolute; right:0; top:24px; font-weight:400; color:var(--x-deep); }
.x-city-links a:hover span { color:var(--x-deep); text-decoration:underline; }
.x-reading-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:25px; }
.x-reading-grid>a { display:block; position:relative; color:var(--x-ink); text-decoration:none; padding:22px 0 24px; border-top:1px solid var(--x-line); border-bottom:1px solid var(--x-line); }
.x-reading-grid h3 { font-size:20px; line-height:1.2; font-weight:550; letter-spacing:-.035em; margin:19px 0 14px; }
.x-reading-grid p { font-size:12px; line-height:1.6; color:var(--x-muted); }
.x-reading-grid b { color:var(--x-deep); font-size:20px; font-weight:400; }
.x-reading-grid>a:hover h3 { color:var(--x-deep); text-decoration:underline; }
.x-questions { padding-top:25px; }
.x-question-grid>div>.x-text-link { margin-top:24px; }
.x-faq details { border-bottom:1px solid var(--x-line); padding:17px 0; }
.x-faq details:first-child { border-top:1px solid var(--x-line); }
.x-faq summary { font-size:13px; font-weight:600; cursor:pointer; color:var(--x-ink); }
.x-faq p { font-size:12px; line-height:1.7; color:var(--x-muted); margin:16px 0 5px; }
#quote { scroll-margin-top:105px; }
#quote .lead-wrap { max-width:1320px; padding-left:34px; padding-right:34px; }
@media (max-width:1120px) { .site-head .main-nav { background:var(--x-paper); border-color:var(--x-line); gap:7px; }.site-head .main-nav a { margin:0; }.x-home-grid { gap:32px; }.x-home-copy h1 { font-size:clamp(45px,5.6vw,67px); }.x-home-scene img { height:380px; }.x-path-grid, .x-service-grid { grid-template-columns:repeat(2,1fr); }.x-path { min-height:265px; }.x-service-card p { min-height:0; }.x-triage-grid { gap:40px; }.x-exp { grid-template-columns:1.5fr 1fr; }.x-stops { grid-template-columns:repeat(5,1fr); }.x-reading-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:780px) { .x-home-hero .wrap, .x-section .wrap, .x-page-nav .wrap, .x-explorer .wrap, .x-flush .wrap, .site-head .wrap, #quote .lead-wrap { padding-left:22px; padding-right:22px; }.site-head .wrap { min-height:74px; }.x-home-hero { padding:35px 0 28px; }.x-home-grid { grid-template-columns:1fr; gap:17px; }.x-home-copy { padding:0; }.x-home-copy h1 { font-size:clamp(42px,8.5vw,64px); margin-top:20px; }.x-home-deck { font-size:15px; max-width:46ch; }.x-home-note { font-size:10px; }.x-home-scene img { height:310px; border-radius:70px 4px 4px 4px; }.x-home-scene::before { display:none; }.x-scene-card { left:15px; bottom:47px; padding:17px 20px; }.x-scene-card strong { font-size:20px; }.x-home-scene figcaption { font-size:10px; }.x-page-nav { padding:13px 0; }.x-page-nav .wrap { justify-content:flex-start; gap:24px; }.x-section { padding:49px 0; }.x-section-head { grid-template-columns:1fr; gap:18px; margin-bottom:25px; }.x-section-head>p, .x-section-head>.x-text-link { justify-self:start; }.x-section h2 { font-size:35px; }.x-path-grid { gap:12px; }.x-path { padding:22px 19px; }.x-path h3 { font-size:22px; }.x-triage-grid { grid-template-columns:1fr; gap:27px; }.x-triage-intro>p { margin:18px 0; max-width:46ch; }.x-triage-intro>.x-small { margin-bottom:0; max-width:none; }.x-triage-workspace { padding:22px; }.x-service-grid { gap:29px 20px; }.x-tool-grid { grid-template-columns:1fr; gap:13px; }.x-tool-card { min-height:220px; padding:26px; }.x-tool-card h3 { margin-top:18px; }.x-tool-card p { max-width:43ch; }.x-inline-bar { flex-direction:column; align-items:flex-start; gap:10px; }.x-explorer { padding:50px 0 22px; }.x-explorer .sec-head, .x-flush .sec-head { display:block; }.x-explorer .sec-head p, .x-flush .sec-head p { margin-top:18px; max-width:45ch; }.x-exp { grid-template-columns:1fr; gap:15px; }.x-panel { padding:22px; }.x-panel p, .x-panel li { font-size:13px; }.x-panel .x-note { font-size:12px !important; }.x-text-grid { grid-template-columns:1fr; }.x-stops { grid-template-columns:repeat(2,1fr); }.x-flush { padding:22px 0 49px; }.x-flush-stage { padding:9px 3px; }.x-responsibility-grid, .x-question-grid { grid-template-columns:1fr; gap:28px; }.x-responsibility-grid>div>p { max-width:46ch; }.x-reading-grid { gap:18px; }.x-reading-grid h3 { font-size:20px; }.x-questions { padding-top:15px; }.x-small { font-size:11px; } }
@media (max-width:460px) { .x-home-copy h1 { font-size:42px; }.x-actions { gap:17px; }.x-actions .x-text-link { font-size:12px; }.x-home-scene img { height:285px; }.x-home-scene figcaption { flex-wrap:wrap; gap:3px; }.x-home-scene figcaption span { text-align:left; }.x-scene-card { bottom:57px; max-width:255px; }.x-section h2 { font-size:32px; }.x-path-grid, .x-service-grid, .x-reading-grid { grid-template-columns:1fr; }.x-path { min-height:242px; }.x-path h3 { max-width:20ch; margin-top:25px; }.x-path p { max-width:43ch; }.x-triage-fields { grid-template-columns:1fr; }.x-triage-workspace { padding:19px; }.x-service-grid { gap:30px; }.x-service-card h3 { max-width:none; }.x-service-limit { padding-top:13px; }.x-home-note { align-items:flex-start; }.x-home-note>span { margin-top:5px; }.x-text-link { font-size:12px; }.x-modes .x-valve { width:100%; margin-top:4px; margin-left:0; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.x-tool-card { transition:none; }.x-tool-card:hover { transform:none; }.x-home-hero .btn:hover { transform:none; }.x-stops li.on { transform:none; } }
.x-hause-brand .x-hause-sub { padding-left:13px; border-left:1px solid var(--x-line); color:var(--x-muted); font:500 10px var(--f-mono); letter-spacing:.06em; } .x-hause-brand .x-hause-word { color:var(--x-ink); }