@font-face{font-family:Manrope;src:url('assets/manrope-regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url('assets/manrope-semibold.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:Manrope;src:url('assets/manrope-bold.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('assets/instrument-serif-italic.woff2') format('woff2');font-style:italic;font-weight:400;font-display:swap}

:root{
  --paper:#f6f5f0;--paper-2:#eeebe2;--white:#fffefa;--ink:#1d3036;--ink-2:#34505a;--muted:#56625e;--line:#dcdcd1;--line-2:#cfcbbf;
  --accent:#bc5d38;--logo-orange:#f39320;--accent-dark:#9c4524;--accent-light:#d88d67;--accent-wash:#f5e5d9;--markup:#cf4a2e;--sage:#e7ebe2;--green:#3f7350;--green-wash:#e2ece3;--blue-wash:#e1e9ee;--dark:#1c3037;
  --font:'Manrope',Arial,sans-serif;--serif:'Instrument Serif',Georgia,serif;
  --shell:1240px;--gutter:clamp(20px,5vw,56px);--header:80px;
  --r-sm:10px;--r:16px;--r-lg:24px;
  --shadow:0 1px 2px rgba(29,48,54,.05),0 10px 28px -14px rgba(29,48,54,.2);
  --shadow-lg:0 2px 6px rgba(29,48,54,.05),0 30px 60px -28px rgba(29,48,54,.35);
  /* Motion tokens */
  --ease-out-quad:cubic-bezier(.25,.46,.45,.94);--ease-out-quart:cubic-bezier(.165,.84,.44,1);--ease-out-expo:cubic-bezier(.19,1,.22,1);--ease-in-out-cubic:cubic-bezier(.645,.045,.355,1);
  --dur-1:120ms;--dur-2:180ms;--dur-3:240ms;--dur-4:300ms;--dur-5:500ms
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 16px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font:inherit;color:inherit}
button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
button:disabled{cursor:wait}
img,svg{max-width:100%;display:block}
svg{stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
h1,h2,h3,h4{font-weight:700;text-wrap:balance}
h1 em,h2 em{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;color:var(--accent)}
h2{font-size:clamp(2.1rem,4.2vw,3.3rem);line-height:1.06;letter-spacing:-.045em}
h3{font-size:1.25rem;line-height:1.3;letter-spacing:-.02em}
p{text-wrap:pretty}
abbr{text-decoration:none}
::selection{background:#e9b995;color:var(--ink)}
[hidden]{display:none!important}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.svg-library{position:absolute;width:0;height:0;overflow:hidden}
.skip-link{position:fixed;top:10px;left:10px;z-index:100;padding:10px 20px;border-radius:999px;background:var(--ink);color:white;transform:translateY(-200%)}
.skip-link:focus{transform:none}
.shell{width:min(var(--shell),100% - 2 * var(--gutter));margin-inline:auto}
.section{padding-block:clamp(72px,9vw,120px)}

/* Shared type */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;line-height:1.4;letter-spacing:.13em;text-transform:uppercase}
.accent-square{width:7px;height:7px;flex:none;background:var(--accent);border-radius:2px}
.section-head{max-width:760px;margin-bottom:clamp(32px,4.5vw,52px)}
.section-head h2{margin-top:16px}
.section-head-center{text-align:center;margin-inline:auto}
.section-head-center h2{margin-top:0}
.section-lead{font-size:clamp(1.05rem,1.35vw,1.2rem);line-height:1.6;color:var(--muted);margin-top:16px;max-width:620px}
.location-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block;flex:none}

/* Buttons */
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:14px 22px 14px 26px;border-radius:999px;border:1.5px solid transparent;font-size:15.5px;font-weight:700;line-height:1.2;transition:background-color 150ms ease,color 150ms ease,border-color 150ms ease,transform var(--dur-1) var(--ease-out-quad)}
.button svg{width:18px;height:18px;flex:none;stroke-width:2;transition:transform var(--dur-3) var(--ease-out-quart)}
.button:active{transform:scale(.98)}
.button-dark{background:var(--ink);color:var(--white)}
.button-accent{background:var(--accent);color:#fff;box-shadow:0 10px 24px -12px rgba(188,93,56,.8)}
.button-ghost{border-color:#b6bdb5;color:var(--ink);background:transparent}
.button-small{min-height:44px;padding:10px 16px 10px 20px;font-size:14.5px}
@media(hover:hover){
  .button-dark:hover{background:var(--ink-2)}
  .button-accent:hover{background:var(--accent-dark)}
  .button-ghost:hover{background:var(--white);border-color:var(--ink)}
  .button:hover svg{transform:translateX(3px)}
}

/* Scroll progress */

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(246,245,240,.9);-webkit-backdrop-filter:saturate(1.3) blur(12px);backdrop-filter:saturate(1.3) blur(12px);transition:box-shadow var(--dur-3) ease}
.site-header.is-scrolled{box-shadow:0 1px 0 var(--line),0 12px 30px -22px rgba(29,48,54,.4)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--header)}
.brand{display:inline-flex;flex-direction:column;align-items:flex-start;flex:none;font-size:30px;line-height:1}
.brand-word{font-size:1em;line-height:1.14;font-weight:700;letter-spacing:-.055em;position:relative}
.brand-sun{position:absolute;box-sizing:border-box;width:1.04em;height:.52em;left:1.62em;top:-.1em;border:.105em solid var(--logo-orange);border-bottom:0;border-radius:1em 1em 0 0}
.brand-descriptor{font-size:.215em;letter-spacing:.16em;font-weight:700;margin-top:.2em}
.main-nav{display:flex;align-items:center;gap:2px}
.main-nav>a:not(.button){font-size:15px;font-weight:600;padding:9px 13px;border-radius:999px;transition:background-color 150ms ease}
.main-nav>a:not(.button):hover{background:rgba(29,48,54,.07)}
.main-nav .button{margin-left:12px}
.menu-toggle{display:none}

/* Hero */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;padding-block:clamp(36px,5vw,64px) clamp(72px,8vw,104px)}
.hero-title{font-size:clamp(2.8rem,5vw,4.6rem);line-height:1.02;letter-spacing:-.055em;margin-top:22px}
.hero-title .line{display:block;overflow:hidden;padding:0 .12em .08em 0;margin-bottom:-.08em}
.hero-title .line>span{display:block}
.hero-lead{font-size:clamp(1.08rem,1.4vw,1.25rem);line-height:1.55;color:var(--muted);max-width:480px;margin-top:22px}
.hero-rotator{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin-top:18px;font-size:clamp(1.05rem,1.4vw,1.2rem);font-weight:700}
.rotator{display:inline-grid;overflow:hidden;color:var(--accent);font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.35em;line-height:1.25;max-width:100%}
.rotator-item{grid-area:1/1}
.motion .rotator-item{transition:transform var(--dur-5) var(--ease-out-quart),opacity var(--dur-5) var(--ease-out-quart)}
.rotator-item:not(.is-active){opacity:0;transform:translateY(90%)}
.rotator-item.is-leaving{opacity:0;transform:translateY(-90%)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-location{display:flex;align-items:center;gap:10px;margin-top:24px;font-size:14px;font-weight:600;color:var(--muted)}

.hero-visual{position:relative}
.hero-photo{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-lg);aspect-ratio:1/1.02;background:#a4aaa3;box-shadow:var(--shadow-lg)}
.hero-photo:after{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(15,32,35,.12),transparent 38%,rgba(12,25,28,.5));pointer-events:none}
.hero-photo>img{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:saturate(.8)}
/* Service preview drawn over the skyline. The SVG shares the photo's coordinates (1536×1024, centered cover). */
.hero-sim{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;stroke:none;filter:drop-shadow(0 2px 5px rgba(8,18,22,.45))}
.sim-scene{opacity:0;transition:opacity .45s ease}
.sim-scene.is-active{opacity:1}
.hero-sim :is(.s-brackets,.s-handle,.s-tag,.s-arrows,.s-cols,.s-floors path,.s-grid,.s-outline-lines){fill:none;stroke:#fffaf0}
.s-brackets{stroke-width:5}
.s-lens{fill:rgba(255,250,240,.16);stroke:#fffaf0;stroke-width:5}
.s-crack{fill:none;stroke:#ff5a36;stroke-width:6}
.s-handle{stroke-width:12}
.s-tag,.s-arrows{stroke-width:4}
.s-scanzone{fill:rgba(255,250,240,.16);stroke:#fffaf0;stroke-width:3;stroke-dasharray:10 8}
.s-rebar path{stroke:#ff5a36;stroke-width:6}
.s-hbar{fill:none;stroke:#ff5a36;stroke-width:5}
.s-scanbeam{fill:#fffaf0}
.s-doc2 rect{fill:rgba(255,250,240,.55)}
.s-sheet{fill:#fffaf0}
.s-doc-lines{fill:none;stroke:#d6d0c3;stroke-width:7}
.s-doc-plan{fill:none;stroke:var(--ink);stroke-width:3.5}
.s-stamp circle{fill:rgba(255,90,54,.14);stroke:#ff5a36;stroke-width:6}
.s-stamp path{fill:none;stroke:#ff5a36;stroke-width:7}
.s-leader{fill:none;stroke:#fffaf0;stroke-width:3;stroke-dasharray:8 8}
.s-grid{stroke-width:3.5}
.s-jackets rect{fill:rgba(255,90,54,.45);stroke:#ff5a36;stroke-width:4}
.s-outline{fill:rgba(255,250,240,.14);stroke:#fffaf0;stroke-width:4}
.s-outline-lines{stroke-width:3}
.s-wave{fill:none;stroke:#ff5a36;stroke-width:5}
.s-wave2{opacity:.7}
.s-cols,.s-floors path{stroke-width:4}
.s-dim{fill:none;stroke:#ff5a36;stroke-width:4}
.hero-sim :is(.s-brackets,.s-lens,.s-stamp,.s-jackets rect,.s-cols,.s-dim,.s-sway,.s-rebar path,.s-floors path,.s-tag){transform-box:fill-box;transform-origin:center}
.hero-sim .s-tag{transform-origin:0 50%}
.hero-sim :is(.s-sway,.s-cols,.s-dim){transform-origin:50% 100%}
.hero-sim .s-rebar path{transform-origin:50% 0}
.sim-menu{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:5px;border:1px solid rgba(255,255,255,.16);border-radius:16px;background:rgba(14,28,32,.58);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.sim-dot{position:relative;display:flex;align-items:center;gap:8px;min-width:0;padding:10px 10px 12px;overflow:hidden;border:0;border-radius:11px;background:transparent;color:#e9efe9;font-size:13.5px;font-weight:700;line-height:1.2;text-align:left;transition:background-color 150ms ease,color 150ms ease}
.sim-num{flex:none;font-family:var(--serif);font-size:1.2rem;font-style:italic;font-weight:400;line-height:1;color:#f3b593;transition:color 150ms ease}
.sim-name{min-width:0}
.sim-bar{position:absolute;left:10px;right:10px;bottom:5px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left}
.sim-dot.is-active{background:rgba(255,250,240,.96);color:var(--ink)}
.sim-dot.is-active .sim-num{color:var(--accent)}
.sim-dot.is-active .sim-bar{transform:scaleX(1)}
@media(hover:hover){.sim-dot:not(.is-active):hover{background:rgba(255,255,255,.13)}}

/* Audience marquee */
.audience{display:flex;align-items:center;gap:24px;border-block:1px solid var(--line);padding:18px max(var(--gutter),calc((100% - var(--shell)) / 2))}
.audience-label{flex:none;font-size:12.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
.marquee{flex:1;min-width:0}
.marquee ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.marquee li{padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:var(--white);font-size:14px;font-weight:600;line-height:1.3;white-space:nowrap}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Service cards (styled after the original Google Site) */
.services{background:var(--white);border-block:1px solid var(--line)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;list-style:none;margin:0;padding:0}
.svc-grid-2{grid-template-columns:repeat(2,1fr)}
.svc-card{display:flex;align-items:stretch;gap:20px;padding:18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);transition:border-color var(--dur-3) ease,box-shadow var(--dur-3) ease}
@media(hover:hover){.svc-card:hover{border-color:#c9c5b8;box-shadow:var(--shadow)}}
.svc-thumb{flex:none;width:118px;height:118px;overflow:hidden;border-radius:16px;box-shadow:inset 0 0 0 1px rgba(29,48,54,.08)}
.svc-thumb svg{width:100%;height:100%;stroke:none}
.svc-body{display:flex;flex:1;min-width:0;flex-direction:column;align-items:flex-start}
.svc-body h3{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:1rem;line-height:1.3;letter-spacing:.04em;text-transform:uppercase}
.svc-body p{margin-top:6px;font-size:15px;line-height:1.5;color:var(--muted)}
.svc-body .svc-note{margin-top:4px;font-size:13px;color:#7a817c}
.svc-body>p:last-of-type{margin-bottom:16px}
.svc-button{margin-top:auto;padding:8px 16px;border:1.5px solid var(--accent);border-radius:10px;color:var(--accent-dark);font-size:14px;font-weight:700;line-height:1.2;transition:background-color 150ms ease,color 150ms ease,transform var(--dur-1) var(--ease-out-quad)}
.svc-button:active{transform:scale(.97)}
@media(hover:hover){.svc-button:hover{background:var(--accent);color:#fff}}
.soon-badge{padding:3px 9px;border-radius:999px;background:var(--blue-wash);color:#2b4a5d;font-size:11px;letter-spacing:.08em}
.svc-card.is-soon .svc-thumb{filter:grayscale(.6);opacity:.8}
.svc-subhead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;margin:56px 0 20px;padding-top:36px;border-top:1px solid var(--line)}
.svc-subhead h3{font-size:clamp(1.5rem,2.4vw,1.9rem);letter-spacing:-.035em}
.svc-subhead p{font-size:15px;color:var(--muted)}
/* Thumbnail drawing: concrete, ink, and red-pen markup */
.th-crack{fill:none;stroke:#3d3a34;stroke-width:2.4}
.th-thin{stroke-width:1.4}
.th-paper{fill:#fbfaf6;stroke:#c9c4b8;stroke-width:1}
.th-lines{fill:none;stroke:#cdc8bc;stroke-width:2.5}
.th-plan{fill:none;stroke:#6f7b78;stroke-width:1.6}
.th-block{fill:#c3bdb1;stroke:#8f897d;stroke-width:1.2}
.th-block-lines{fill:none;stroke:#8f897d;stroke-width:1.2}
.th-ink{fill:none;stroke:#5d5a53;stroke-width:2}
.th-bar-faint{fill:none;stroke:#c3bdb1;stroke-width:7}
.th-bar{fill:none;stroke:#6c6559;stroke-width:7}
.th-hole{fill:#8f897d}
.th-rebar{fill:#7b7366}
.th-ribs{fill:none;stroke:#5a5348;stroke-width:1.6}
.th-probe{fill:#3c4a4f}
.mk{fill:none;stroke:var(--markup);stroke-width:2.2;stroke-dasharray:5 4}
.mk-fill{fill:rgba(207,74,46,.14)}
.mk-solid{fill:none;stroke:var(--markup);stroke-width:2.4}
.mk-thick{stroke-width:5}
.mk-dots circle{fill:var(--markup)}
.a-scanline{fill:var(--markup)}
.svc-thumb :is(.mk,.mk-solid,.a-stamp,.a-drop,.a-core,.a-sway,.mk-dots circle){transform-box:fill-box;transform-origin:center}
.svc-thumb .a-measure{transform-origin:0 50%}
.svc-thumb .a-sway{transform-origin:50% 100%}

/* Warning signs */
.signs-layout{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(24px,4vw,52px);align-items:start}
.signs-visual{position:sticky;top:calc(var(--header) + 24px);padding:clamp(12px,2vw,22px);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white)}
.signs-stage{position:relative}
.signs-building{width:100%;height:auto;stroke:none}
.sb-sun{fill:#f6e3d4}
.sb-earth{fill:#ece6d9}
.sb-groundline{stroke:var(--ink);stroke-width:1.5}
.sb-shrub circle{fill:#a8c3ab}
.sb-shrub circle:nth-child(2){fill:#93b598}
.sb-wall{fill:#f3eee4}
.sb-windows rect{stroke:var(--ink);stroke-width:1.2}
.sb-glint{stroke:#fff;stroke-width:2.4;opacity:.8}
.sb-sills rect{fill:#d8cfbd;stroke:var(--ink);stroke-width:1}
.sb-frame rect{fill:#dcd3c1;stroke:var(--ink);stroke-width:1.3}
.sign{color:#8b928f;stroke:currentColor;stroke-width:2.2;opacity:.8;transition:color var(--dur-3) ease,opacity var(--dur-3) ease}
.sign.is-active{color:var(--accent);opacity:1;stroke-width:2.8}
.sign .sign-fill{fill:currentColor;fill-opacity:.25}
.sign .sign-thin{stroke-width:1.5}
.sign .sign-footing{fill:#dcd3c1}
.sign .sign-door{fill:#e8dfcf;transform:rotate(3deg);transform-origin:422px 404px;transform-box:view-box}
.sign .sign-tank{fill:#ebe6dc}
.sign circle{fill:currentColor;stroke:none}
.hotspot{position:absolute;left:var(--x);top:var(--y);display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;border-radius:50%;background:none}
.hotspot>span{position:relative;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;font-size:13px;font-weight:700;box-shadow:0 0 0 3px var(--white),0 6px 14px -4px rgba(29,48,54,.5);transition:transform var(--dur-2) var(--ease-out-quart),background-color var(--dur-2) ease,color var(--dur-2) ease,box-shadow var(--dur-2) ease}
.hotspot>span:after{content:'';position:absolute;inset:0;z-index:-1;border-radius:50%;background:var(--accent)}
.hotspot.is-active>span{background:transparent;color:transparent;transform:scale(1.7);box-shadow:0 0 0 2px var(--accent),0 0 0 6px rgba(188,93,56,.15)}
.hotspot.is-active>span:after{display:none}
@media(hover:hover){.hotspot:not(.is-active):hover>span{transform:scale(1.15)}}
@keyframes pulse{from{transform:scale(1);opacity:.5}to{transform:scale(2.4);opacity:0}}
.sign-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.sign-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 7px;border:1.5px solid var(--line-2);border-radius:999px;background:var(--white);font-size:14.5px;font-weight:700;line-height:1.2;transition:background-color var(--dur-2) ease,border-color var(--dur-2) ease,color var(--dur-2) ease}
.sign-chip>span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent-wash);color:var(--accent-dark);font-size:12px}
.sign-chip[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:var(--white)}
.sign-chip[aria-selected=true]>span{background:var(--accent);color:#fff}
@media(hover:hover){.sign-chip[aria-selected=false]:hover{border-color:var(--ink)}}
.sign-panel{padding:24px 24px 20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white)}
.js .sign-panel:not(.is-active){display:none}
.sign-panel h3{font-size:1.4rem;letter-spacing:-.03em}
.sign-panel dl{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin-top:16px}
.sign-panel dt{padding-top:3px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.sign-panel dd{font-size:16px;color:var(--muted)}
.urgent-note{display:flex;align-items:flex-start;gap:12px;margin:16px 0 22px;padding:14px 16px;border:1px solid #efc9b6;border-radius:var(--r);background:#fbe9e0;font-size:14.5px;line-height:1.5;color:#5c3524}
.urgent-note svg{width:22px;height:22px;flex:none;color:var(--accent-dark);stroke-width:2}

/* Savings & performance targets */
.savings{background:var(--paper-2);border-block:1px solid #e0dccf}
.savings-top{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:center}
.savings-copy h2{margin-top:16px}
.savings-points{display:grid;gap:16px;list-style:none;margin:30px 0 0;padding:0}
.savings-points li{display:flex;align-items:center;gap:16px}
.point-icon{display:grid;place-items:center;flex:none;width:50px;height:50px;border-radius:15px;background:var(--white);border:1px solid #e3ddcf;color:var(--accent)}
.point-icon svg{width:26px;height:26px}
.savings-points h3{font-size:1.1rem}
.savings-points p{font-size:15px;color:var(--muted)}
.savings-honest{margin-top:26px;padding-top:18px;border-top:1px solid var(--line-2);font-size:14px;color:var(--muted);max-width:520px}
.compare-card{padding:clamp(20px,3vw,30px);border-radius:var(--r-lg);background:var(--dark);color:var(--paper);box-shadow:var(--shadow-lg)}
.compare-title{margin-bottom:12px;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#aebdb8}
.compare-toggle{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:14px;background:rgba(255,255,255,.08)}
.compare-toggle:before{content:'';position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 16px) / 3);border-radius:10px;background:var(--paper);transform:translateX(calc(var(--idx,0) * (100% + 4px)));transition:transform var(--dur-5) var(--ease-in-out-cubic)}
[data-target=ls]{--idx:1}
[data-target=io]{--idx:2}
.compare-toggle button{position:relative;z-index:1;padding:10px 8px;border:0;border-radius:10px;background:none;color:#c5d0cb;font-size:14px;font-weight:700;line-height:1.25;transition:color var(--dur-4) ease}
.compare-toggle button[aria-pressed=true]{color:var(--ink)}
.compare-frame{width:100%;max-width:440px;height:auto;margin:18px auto 6px;stroke:none}
.cf-ground{stroke:#90a39d;stroke-width:1.5}
.cf-wall{fill:#26414a}
.cf-windows rect{fill:#18292f;stroke:#48646c;stroke-width:1}
.cf-core rect{fill:#d2cbbb}
.cf-jackets rect{stroke:#eda07a;stroke-width:1.6;opacity:0;transform:scale(.75);transform-box:fill-box;transform-origin:center;transition:opacity var(--dur-4) ease,transform var(--dur-5) var(--ease-out-expo);transition-delay:calc(var(--i) * 70ms)}
[data-target=cp] .cf-jackets [data-level="1"],
[data-target=ls] .cf-jackets [data-level="1"],[data-target=ls] .cf-jackets [data-level="2"],
[data-target=io] .cf-jackets rect{opacity:1;transform:none}
.target-info{min-height:3.3em;font-size:15px;line-height:1.55;color:#dbe3dd}
.target-info strong{color:var(--accent-light)}
.js .target-meaning:not(.is-active){display:none}
.motion .target-meaning.is-active{animation:fade-up var(--dur-5) var(--ease-out-quart)}
.compare-meter{display:grid;grid-template-columns:1fr auto;gap:8px 14px;align-items:center;margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12)}
.meter-label{font-size:14px;font-weight:600;color:#dbe3dd}
.meter-value{font-size:14px;font-weight:700;color:var(--accent-light)}
.meter{grid-column:1/-1;height:10px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.meter>span{display:block;height:100%;border-radius:inherit;background:var(--accent-light);transform-origin:left;transform:scaleX(.25);transition:transform 700ms var(--ease-in-out-cubic)}
[data-target=ls] .meter>span{transform:scaleX(.55)}
[data-target=io] .meter>span{transform:scaleX(.9)}
.compare-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:14px;font-size:13.5px;color:#c5d0cb}
.compare-legend span{display:inline-flex;align-items:center;gap:8px}
.compare-legend .compare-note{margin-left:auto;font-size:12.5px;color:#93a6a0}
.key{width:18px;height:10px;border-radius:3px}
.key-work{background:repeating-linear-gradient(45deg,#f3b593 0 2px,rgba(224,145,106,.35) 2px 5px);outline:1.5px solid #eda07a}
.key-keep{background:#d2cbbb}
.code-explainer{margin-top:clamp(40px,5vw,56px);border-block:1px solid var(--line-2)}
.code-explainer summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 0;cursor:pointer;list-style:none;font-size:15.5px;font-weight:700}
.code-explainer summary::-webkit-details-marker{display:none}
.code-explainer summary>span{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.explainer-badge{padding:4px 10px;border-radius:999px;background:var(--blue-wash);color:#2b4a5d;font-size:12px;font-weight:700;letter-spacing:.04em}
.code-explainer summary>svg{width:20px;height:20px;flex:none;color:var(--accent);stroke-width:2;transition:transform var(--dur-3) var(--ease-in-out-cubic)}
.code-explainer[open] summary>svg{transform:rotate(45deg)}
.code-explainer-body{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:4px 0 26px}
.code-explainer-body p{font-size:15px;line-height:1.75;color:var(--muted)}
.code-explainer-body a{display:block;width:fit-content;margin-top:12px;color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:4px}

/* Compliance */
.compliance-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.compliance-copy h2{margin-top:16px}
.occasions{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:28px 0 0;padding:0}
.occasions a{display:inline-flex;align-items:center;gap:10px;padding:10px 14px 10px 12px;border:1px solid var(--line);border-radius:999px;background:var(--white);font-size:15px;font-weight:700;transition:border-color 150ms ease,box-shadow var(--dur-3) ease,transform var(--dur-1) var(--ease-out-quad)}
.occasions svg{width:22px;height:22px;color:#2b4a5d}
.occasions .occasion-arrow{width:16px;height:16px;color:var(--accent);stroke-width:2.2;transition:transform var(--dur-3) var(--ease-out-quart)}
.occasions a:active{transform:scale(.98)}
@media(hover:hover){.occasions a:hover{border-color:var(--accent);box-shadow:var(--shadow)}.occasions a:hover .occasion-arrow{transform:translateX(3px)}}
.fine-print{margin-top:20px;font-size:14px;color:var(--muted)}
.timeline-wrap{padding:clamp(22px,3vw,34px);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white)}
.timeline{position:relative;list-style:none;margin:0;padding:0 0 0 58px}
.timeline:before,.timeline:after{content:'';position:absolute;left:19px;top:20px;bottom:20px;width:2px;border-radius:2px;background:var(--line)}
.timeline:after{background:var(--accent);transform-origin:top;transform:scaleY(var(--p,1))}
.timeline li{position:relative;padding-bottom:24px}
.timeline li:last-child{padding-bottom:0}
.timeline-dot{position:absolute;left:-58px;top:0;z-index:1;display:grid;place-items:center;width:40px;height:40px;border:2px solid var(--line);border-radius:50%;background:var(--white);font-size:15px;font-weight:700;color:var(--muted);transition:background-color var(--dur-4) ease,border-color var(--dur-4) ease,color var(--dur-4) ease,transform var(--dur-4) var(--ease-out-quart)}
.timeline li.is-on .timeline-dot,html:not(.motion) .timeline-dot{background:var(--accent);border-color:var(--accent);color:#fff}
.timeline li.is-on .timeline-dot{transform:scale(1.06)}
.timeline h3{padding-top:7px;font-size:1.1rem}
.timeline p{margin-top:2px;font-size:15px;color:var(--muted)}

/* ASCE 41 tiers (dark) */
.approach{position:relative;overflow:hidden;background:var(--dark);color:var(--paper)}
.approach:before{content:'';position:absolute;right:-200px;top:-310px;width:700px;height:700px;border:1px solid #ffffff0a;border-radius:50%;box-shadow:0 0 0 60px #ffffff03,0 0 0 120px #ffffff02;pointer-events:none}
.approach-heading{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:60px;margin-bottom:40px}
.approach-heading h2{margin-top:16px;max-width:640px}
.approach h2 em{color:var(--accent-light)}
.approach .accent-square{background:var(--accent-light)}
.approach-intro{max-width:340px;flex:none}
.standard-label{display:inline-block;margin-bottom:12px;padding:5px 11px;border:1px solid #70817f;border-radius:999px;font-size:11.5px;letter-spacing:.12em;color:#e2e8de}
.approach-intro p{font-size:15.5px;color:#bdc9c6}
.tier-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tier-tab{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 22px 20px;overflow:hidden;border:1px solid #ffffff1f;border-radius:var(--r);background:none;color:#c0cdca;text-align:left;transition:background-color var(--dur-2) ease,color var(--dur-2) ease,border-color var(--dur-2) ease}
.tier-tab:after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--accent-light);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-5) var(--ease-out-quart)}
.tier-tab[aria-selected=true]{background:#ffffff0d;border-color:#ffffff33;color:var(--paper)}
.tier-tab[aria-selected=true]:after{transform:scaleX(1)}
@media(hover:hover){.tier-tab:hover{background:#ffffff0a;color:var(--paper)}}
.tier-number{font-size:11px;font-weight:700;letter-spacing:.12em;color:#9fb0ab}
.tier-tab[aria-selected=true] .tier-number{color:var(--accent-light)}
.tier-name{font-size:1.35rem;font-weight:700;letter-spacing:-.025em}
.tier-content{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center;padding:40px 16px 36px}
.tier-diagram{width:100%;max-width:400px;justify-self:center}
.tier-diagram svg{width:100%;stroke:none}
.td-ground{stroke:#90a39d;stroke-width:1.5}
.td-wall{fill:#ffffff08}
.td-windows rect{fill:#203a42;stroke:#4a666e;stroke-width:1}
.td-frame rect{fill:#b4c2bd}
.td-t1,.td-t2,.td-t3{opacity:0;transition:opacity var(--dur-4) ease}
[data-active-tier="1"] .td-t1,[data-active-tier="2"] .td-t2,[data-active-tier="3"] .td-t3{opacity:1}
.td-box{fill:none;stroke:var(--accent-light);stroke-width:1.5;stroke-dasharray:6 5}
.td-card{fill:#26434c;stroke:#4f6d75;stroke-width:1}
.td-check{fill:none;stroke:var(--accent-light);stroke-width:2.4}
.td-flag{fill:none;stroke:#f0c36b;stroke-width:2.6}
.td-lines{fill:none;stroke:#6f8a86;stroke-width:2.5}
.td-lock circle{fill:none;stroke:var(--accent-light);stroke-width:2;transform-box:fill-box;transform-origin:center}
.td-seek{transform:translate(140px,144px)}
.td-seek circle:first-child,.td-seek path{fill:none;stroke:var(--accent-light);stroke-width:2.2}
.td-dot{fill:var(--accent-light)}
.td-ghost{fill:none;stroke:#d8e0d5;stroke-width:1.5;stroke-dasharray:5 5;opacity:.45}
.td-arrows{fill:none;stroke:var(--accent-light);stroke-width:2.4}
.td-building{transform-box:fill-box;transform-origin:50% 100%;transition:transform var(--dur-5) var(--ease-in-out-cubic)}
.tier-diagram[data-active-tier="3"] .td-building{transform:skewX(-6deg)}
@keyframes dash-flow{to{stroke-dashoffset:-22}}
.motion [data-active-tier="2"] .td-seek{animation:td-seek 4.8s var(--ease-in-out-cubic) infinite}
.motion [data-active-tier="2"] .td-lock circle{animation:td-lock 4.8s var(--ease-out-quart) infinite backwards;animation-delay:calc(1.34s + var(--k) * 1.63s)}
.motion [data-active-tier="3"] .td-building{animation:td-push 3.8s var(--ease-in-out-cubic) infinite}
.motion [data-active-tier="3"] .td-arrows{animation:td-arrows 3.8s var(--ease-in-out-cubic) infinite}
@keyframes td-seek{0%,8%{transform:translate(175px,84px)}28%,42%{transform:translate(105px,114px)}62%,76%{transform:translate(140px,144px)}96%,100%{transform:translate(175px,84px)}}
@keyframes td-lock{0%{opacity:.25;transform:scale(1.6)}8%{opacity:1;transform:none}40%{opacity:1;transform:none}60%,100%{opacity:.25;transform:none}}
@keyframes td-push{0%,8%{transform:none}48%,66%{transform:skewX(-7deg)}96%,100%{transform:none}}
@keyframes td-arrows{0%,8%{opacity:.35;transform:translateX(-14px)}48%,66%{opacity:1;transform:none}96%,100%{opacity:.35;transform:translateX(-14px)}}
.diagram-key{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:6px;font-size:13px;color:#adbbb6}
.diagram-key>span:first-child{width:6px;height:6px;flex:none;border-radius:50%;background:var(--accent-light)}
.js .tier-panel:not(.is-active){display:none}
.tier-panel h3{margin-bottom:10px;font-size:clamp(1.5rem,2.4vw,1.9rem);line-height:1.25;letter-spacing:-.035em}
.tier-panel>p{font-size:16px;color:#bccac5}
.tier-output{display:flex;align-items:baseline;gap:16px;margin-top:20px;padding-top:18px;border-top:1px solid #ffffff22}
.tier-output>span{flex:none;font-size:11.5px;font-weight:700;letter-spacing:.11em;color:#a9b9b3}
.tier-output>p{font-size:16px;font-weight:600;color:#e1e8df}
.approach-footnote{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;padding-top:22px;border-top:1px solid #ffffff22}
.approach-footnote>p{max-width:700px;font-size:14px;color:#9fb0aa}
.approach-footnote>a{display:flex;flex:none;align-items:center;gap:10px;padding-bottom:4px;border-bottom:1px solid #859a92;font-size:14px;font-weight:600;color:#d4dfd6}
.approach-footnote>a:hover{color:#fff}
.approach-footnote svg{width:15px;height:15px}

/* Process */
.process-steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;list-style:none;margin:0;padding:0}
.process-steps:before,.process-steps:after{content:'';position:absolute;top:25px;left:28px;right:calc(25% - 4px);height:2px;border-radius:2px;background:var(--line)}
.process-steps:after{background:var(--accent);transform-origin:left}
.motion .process-steps:after{transform:scaleX(0);transition:transform 1.6s var(--ease-in-out-cubic) .3s}
.motion .process-steps.is-visible:after{transform:none}
.process-steps li{position:relative}
.step-dot{position:relative;z-index:1;display:grid;place-items:center;width:52px;height:52px;border:2px solid var(--accent);border-radius:50%;background:var(--paper);color:var(--accent);font-size:18px;font-weight:700}
.process-steps h3{margin-top:18px;font-size:1.15rem}
.process-steps p{margin-top:4px;font-size:15px;color:var(--muted)}
.motion .process-steps.reveal{opacity:1;transform:none}
.motion .process-steps .step-dot{opacity:0;transform:scale(.6);transition:transform var(--dur-5) var(--ease-out-quart),opacity var(--dur-4) ease;transition-delay:calc(.3s + var(--d) * .4s)}
.motion .process-steps li{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease-out-quart),transform .7s var(--ease-out-quart);transition-delay:calc(.25s + var(--d) * .4s)}
.motion .process-steps.is-visible li,.motion .process-steps.is-visible .step-dot{opacity:1;transform:none}
.cta-band{display:flex;align-items:center;gap:24px;margin-top:clamp(48px,6vw,64px);padding:clamp(20px,3vw,30px) clamp(22px,3.4vw,40px);border:1px solid #edcfbb;border-radius:var(--r-lg);background:var(--accent-wash)}
.cta-band h3{font-size:1.35rem}
.cta-band p{margin-top:2px;font-size:15.5px;color:#5d4537}
.cta-band .button{flex:none;margin-left:auto}
.cta-icon{display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:18px;background:var(--accent);color:#fff}
.cta-icon svg{width:28px;height:28px}

/* Team */
.practice{background:var(--white);border-block:1px solid var(--line)}
.people-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.person{display:grid;grid-template-columns:140px 1fr;align-items:center;gap:26px;padding:26px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper)}
.person-photo{width:140px;height:140px;overflow:hidden;border-radius:50%;background:#e5e8de;box-shadow:0 0 0 6px var(--white),0 0 0 7px var(--line)}
.person-photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform var(--dur-5) var(--ease-out-quart)}
@media(hover:hover){.person:hover .person-photo img{transform:scale(1.14)}}
.person-role{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--accent)}
.person-copy h3{margin-top:2px;font-size:1.45rem;letter-spacing:-.03em}
.person-creds{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.person-creds abbr{padding:3px 9px;border-radius:7px;background:var(--ink);color:var(--white);font-size:12.5px;font-weight:700;letter-spacing:.05em;cursor:help}
.person-school{display:flex;align-items:flex-start;gap:8px;margin-top:12px;font-size:14.5px;font-weight:600;line-height:1.45}
.person-school svg{width:20px;height:20px;flex:none;color:var(--accent)}
.person-bio{margin-top:10px;font-size:15px;color:var(--muted)}
.creds-legend{margin-top:20px;font-size:13px;color:var(--muted);text-align:center}

/* FAQ */
.faq-layout{display:grid;grid-template-columns:.7fr 1.5fr;gap:clamp(36px,6vw,96px);align-items:start}
.faq-heading{position:sticky;top:calc(var(--header) + 32px)}
.faq-heading h2{margin-top:16px}
.faq-list{border-top:1px solid var(--line-2)}
.faq-list details{border-bottom:1px solid var(--line-2)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;cursor:pointer;list-style:none;font-size:17px;font-weight:700;line-height:1.4;transition:color 150ms ease}
.faq-list summary::-webkit-details-marker{display:none}
@media(hover:hover){.faq-list summary:hover{color:var(--accent-dark)}}
.faq-list summary>svg{display:block;width:34px;height:34px;flex:none;padding:8px;border-radius:50%;background:var(--accent-wash);color:var(--accent);stroke-width:2.2;transition:transform var(--dur-3) var(--ease-in-out-cubic),background-color var(--dur-2) ease,color var(--dur-2) ease}
.faq-list details[open] summary>svg{transform:rotate(45deg);background:var(--accent);color:#fff}
.faq-list details>div{padding:0 50px 22px 0}
.faq-list p{font-size:16px;color:var(--muted)}
.motion .faq-list details[open]>div{animation:fade-up var(--dur-4) var(--ease-out-quart)}

/* Inquiry */
.inquiry{background:var(--sage);border-top:1px solid #dde3d6}
.inquiry-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,6vw,96px);align-items:start}
.inquiry-copy h2{margin-top:16px}
.inquiry-points{display:grid;gap:10px;list-style:none;margin:26px 0 0;padding:0}
.inquiry-points li{display:flex;align-items:center;gap:12px;font-weight:600}
.inquiry-points svg{width:26px;height:26px;padding:5px;border-radius:50%;background:var(--white);color:var(--green);stroke-width:2.6}
.contact-note{display:flex;gap:16px;max-width:420px;margin-top:32px;padding-top:22px;border-top:1px solid #cad3c3}
.contact-note-icon{flex:none;font-size:24px;line-height:1;color:var(--accent)}
.contact-note h3{margin-bottom:4px;font-size:15.5px}
.contact-note p{font-size:14.5px;color:#5f6e5b}
.inquiry-form-wrap{padding:clamp(22px,3vw,36px);border-radius:var(--r-lg);background:var(--white);box-shadow:var(--shadow-lg)}
.form-heading{display:flex;justify-content:space-between;gap:20px;font-size:12px;font-weight:700;letter-spacing:.1em}
.form-heading>span:last-child{font-weight:500;letter-spacing:0;color:var(--muted)}
.form-progress{display:flex;align-items:center;gap:12px;margin:14px 0 24px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.form-progress-bar{flex:1;height:6px;overflow:hidden;border-radius:999px;background:var(--sage)}
.form-progress-bar>span{display:block;height:100%;border-radius:inherit;background:var(--green);transform-origin:left;transform:scaleX(var(--fill,0));transition:transform var(--dur-5) var(--ease-out-quart)}
.form-progress-text{font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.form-progress.is-complete .form-progress-text{color:var(--green)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-field{margin-bottom:18px}
.form-field label{display:block;margin-bottom:7px;font-size:14.5px;font-weight:700;line-height:1.4}
.form-field label>span{color:var(--accent)}
.form-field label>.optional{margin-left:6px;font-size:12.5px;font-weight:500;color:var(--muted)}
.form-field input,.form-field select,.form-field textarea{width:100%;min-height:50px;padding:12px 14px;border:1.5px solid #d3dacb;border-radius:12px;background:#fcfcf8;font-size:16px;line-height:1.5;transition:border-color 150ms ease,background-color 150ms ease,box-shadow var(--dur-2) ease}
.form-field select{appearance:none;padding-right:40px;background:#fcfcf8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d3036' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center/18px no-repeat}
.form-field input::placeholder,.form-field textarea::placeholder{color:#8e9789;opacity:1}
.form-field input:hover,.form-field select:hover,.form-field textarea:hover{border-color:#9faa97}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--accent);background-color:#fff;box-shadow:0 0 0 4px rgba(188,93,56,.14)}
.form-field textarea{min-height:120px;resize:vertical}
.form-submit{width:100%;margin-top:4px}
.form-privacy{margin-top:12px;font-size:13.5px;color:var(--muted);text-align:center}
.motion .brief-result{animation:fade-up var(--dur-5) var(--ease-out-quart)}
.brief-heading{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.brief-heading .eyebrow{font-size:12px;color:var(--green)}
.brief-check{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--green);color:#fff}
.brief-check svg{width:18px;height:18px;stroke-width:2.6}
.motion .brief-check{animation:pop var(--dur-5) var(--ease-out-quart) .1s both}
.brief-result h3{margin-bottom:8px;font-size:2rem;line-height:1.2;letter-spacing:-.045em}
.brief-intro{font-size:15px;color:var(--muted)}
#brief-content{max-height:380px;overflow:auto;margin:22px 0;padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:#3e4d47;font:14px/1.8 var(--font);white-space:pre-wrap;overflow-wrap:anywhere}
.brief-actions{display:flex;flex-wrap:wrap;gap:10px}
.brief-actions .button{min-height:48px;font-size:14.5px}
.brief-status{min-height:22px;margin-top:12px;font-size:14px;color:var(--green)}
.edit-brief{margin-top:12px;padding:0 0 3px;border:0;border-bottom:1.5px solid #a6b298;background:none;font-size:14.5px;font-weight:700}

/* Footer */
.site-footer{padding:64px 0 28px;background:var(--ink);color:var(--paper)}
.footer-top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:56px;padding-bottom:40px}
.brand-footer{font-size:36px}
.footer-top>p{font-size:1.25rem;line-height:1.45;letter-spacing:-.02em;color:#c4d0c5}
.footer-top>p em{font-family:var(--serif);font-size:1.15em;color:#e2c1ad}
.footer-nav{display:grid;grid-template-columns:repeat(2,auto);gap:6px 28px}
.footer-nav a{font-size:14.5px;color:#c2cec6;transition:color 150ms ease}
.footer-nav a:hover{color:#fff}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;padding-top:22px;border-top:1px solid #ffffff1c;font-size:13px;color:#9bad9f}
.footer-bottom>a{color:#9bad9f;text-decoration:underline;text-decoration-color:#536b5b;text-underline-offset:3px}
.footer-bottom>a:hover{color:var(--paper)}
.footer-bottom .back-top{display:inline-flex;align-items:center;gap:8px;margin-left:auto;text-decoration:none;font-weight:600;color:#c2cec6}
.back-top svg{width:15px;height:15px}

/* Motion: entrances, reveals, and loops. All gated behind .motion (set only when reduced motion is not requested). */
@keyframes fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes line-up{from{transform:translateY(108%)}to{transform:none}}
@keyframes hero-reveal{from{opacity:.4;clip-path:inset(14% 0 0 0 round var(--r-lg))}to{opacity:1;clip-path:inset(0 0 0 0 round var(--r-lg))}}
@keyframes settle{from{transform:scale(1.12)}to{transform:scale(1)}}
@keyframes sunrise{from{transform:translateY(80%);clip-path:inset(0 0 80% 0)}to{transform:none;clip-path:inset(0)}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes draw-on{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes focus-in{from{opacity:0;transform:scale(1.3)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}}
@keyframes grow-x{from{opacity:0;transform:scaleX(0)}}
@keyframes grow-y{from{opacity:0;transform:scaleY(0)}}
@keyframes stamp{0%{opacity:0;transform:scale(1.8) rotate(-18deg)}70%{opacity:1;transform:scale(.92) rotate(0)}100%{opacity:1;transform:none}}
@keyframes beam{0%{opacity:1;transform:none}88%{opacity:1;transform:translateX(99px)}100%{opacity:0;transform:translateX(99px)}}
@keyframes quake{0%,100%{transform:none}6%{transform:skewX(-5deg)}13%{transform:skewX(5deg)}20%{transform:skewX(-4.5deg)}27%{transform:skewX(4.5deg)}34%{transform:skewX(-3.5deg)}41%{transform:skewX(3.5deg)}48%{transform:skewX(-2.5deg)}55%{transform:skewX(2.5deg)}62%{transform:skewX(-1.5deg)}69%{transform:skewX(1deg)}76%{transform:skewX(-.5deg)}84%{transform:none}}
@keyframes ground-wave{0%{opacity:0;transform:translateX(-40px)}12%,70%{opacity:1}100%{opacity:0;transform:translateX(40px)}}
@keyframes blink-out{0%{opacity:0}10%,70%{opacity:1}100%{opacity:0}}
@keyframes dot-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* Service thumbnail loops: act, hold, fade, repeat */
@keyframes t-draw{0%{stroke-dashoffset:1;opacity:1}35%,86%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes t-ring{0%,25%{opacity:0;transform:scale(.6)}40%{opacity:1;transform:scale(1)}86%{opacity:1;transform:rotate(50deg)}95%,100%{opacity:0;transform:rotate(50deg)}}
@keyframes t-measure{0%,40%{opacity:0;transform:scaleX(0)}54%,86%{opacity:1;transform:scaleX(1)}95%,100%{opacity:0;transform:scaleX(1)}}
@keyframes t-stamp{0%,32%{opacity:0;transform:scale(1.8) rotate(-18deg)}42%{opacity:1;transform:scale(.9) rotate(0)}48%,86%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
@keyframes t-drop{0%{opacity:0;transform:translateY(-22px)}28%{opacity:1;transform:none}33%{transform:translateY(-3px)}38%,86%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
@keyframes t-lens{0%,100%{transform:none}30%{transform:translate(22px,8px)}62%{transform:translate(4px,26px)}}
@keyframes t-quake{0%{transform:none}5%{transform:skewX(-7deg)}10%{transform:skewX(7deg)}15%{transform:skewX(-6deg)}20%{transform:skewX(6deg)}25%{transform:skewX(-4deg)}30%{transform:skewX(4deg)}35%{transform:skewX(-2deg)}40%{transform:skewX(1.5deg)}45%,100%{transform:none}}
@keyframes t-ground{0%,40%,100%{transform:none}5%,15%,25%{transform:translateX(-2.5px)}10%,20%,30%{transform:translateX(2.5px)}35%{transform:translateX(-1px)}}
@keyframes t-wave{0%{opacity:0;transform:translateX(-14px)}6%,36%{opacity:1}46%,100%{opacity:0;transform:translateX(14px)}}
@keyframes t-shake{0%,48%,100%{opacity:0}6%,38%{opacity:1}}
@keyframes t-core{0%,40%{opacity:0;transform:scale(.3)}55%,86%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
@keyframes t-spin{to{transform:rotate(360deg)}}
@keyframes t-scan{from{transform:none}to{transform:translateX(77px)}}
@keyframes t-tap{0%{opacity:0;transform:scale(0)}5%{opacity:1;transform:scale(1.7)}10%,70%{opacity:1;transform:none}78%,100%{opacity:0;transform:none}}
@keyframes t-flow{to{stroke-dashoffset:-24}}
@keyframes t-pulse{to{transform:scale(1.14)}}
/* The label, headline, and intro are visible from the first paint; only the extras animate in. */
.motion .hero-rotator,.motion .hero-actions,.motion .hero-location{animation:rise .9s var(--ease-out-expo) both}
.motion .hero-rotator{animation-delay:.15s}
.motion .hero-actions{animation-delay:.25s}
.motion .hero-location{animation-delay:.35s}
.motion .hero-photo{animation:hero-reveal 1.3s var(--ease-out-expo) .15s both}
.motion .hero-photo>img{animation:settle 2.2s var(--ease-out-expo) .15s both}
.motion .sim-menu{animation:rise 1s var(--ease-out-expo) 1s both}
.motion .site-header .brand-sun{animation:sunrise 1.4s var(--ease-out-expo) .25s both}
.motion .reveal{opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease-out-quart),transform .9s var(--ease-out-expo);transition-delay:calc(var(--d,0) * 80ms)}
.motion .reveal.is-visible{opacity:1;transform:none}

/* Hero service preview: each scene replays its steps whenever it becomes active */
.motion .sim-dot.is-active .sim-bar{animation:dot-fill var(--dur,4.8s) linear both}
@media(hover:hover){.hero-visual:hover .sim-bar{animation-play-state:paused}}
.hero-visual.is-paused .sim-bar{animation-play-state:paused}
.motion .sim-scene:is(.is-active,.is-leaving) .s-brackets{animation:focus-in .7s var(--ease-out-expo) both}
.motion .sim-scene:is(.is-active,.is-leaving) .s-lens{animation:pop .6s var(--ease-out-quart) .3s both}
.motion .sim-scene:is(.is-active,.is-leaving) .s-handle{animation:fade-in .4s ease .5s both}
.motion .sim-scene:is(.is-active,.is-leaving) :is(.s-crack,.s-hbar,.s-doc-plan,.s-grid){stroke-dasharray:1}
.motion .sim-scene:is(.is-active,.is-leaving) .s-crack{animation:draw-on 1.1s var(--ease-in-out-cubic) .8s both}
.motion .sim-scene:is(.is-active,.is-leaving) .s-tag{animation:grow-x .5s var(--ease-out-quart) 1.9s both}
.motion .sim-scene:is(.is-active,.is-leaving) .s-scanzone{animation:fade-in .4s ease both}
.motion .sim-scene:is(.is-active,.is-leaving) .s-scanbeam{animation:beam 1.7s var(--ease-in-out-cubic) .4s both}
.motion .sim-scene:is(.is-active,.is-leaving) .s-rebar path{animation:grow-y .45s var(--ease-out-quart) both;animation-delay:calc(.55s + var(--n) * .38s)}
.motion .sim-scene:is(.is-active,.is-leaving) .s-hbar{animation:draw-on .9s var(--ease-in-out-cubic) 2.1s both}
.motion .sim-scene:is(.is-active,.is-leaving) .s-doc2{animation:rise .6s var(--ease-out-expo) both}
.motion .sim-scene:is(.is-active,.is-leaving) .s-doc{animation:rise .7s var(--ease-out-expo) .12s both}
.motion .sim-scene:is(.is-active,.is-leaving) .s-doc-plan{animation:draw-on 1.2s var(--ease-in-out-cubic) .6s both}
.motion .sim-scene:is(.is-active,.is-leaving) .s-leader{animation:fade-in .5s ease 1.5s both}
.motion .sim-scene:is(.is-active,.is-leaving) .s-stamp{animation:stamp .5s var(--ease-out-quart) 1.9s both}
.motion .sim-scene:is(.is-active,.is-leaving) .s-grid{animation:draw-on 1.4s var(--ease-in-out-cubic) .3s both}
.motion .sim-scene:is(.is-active,.is-leaving) .s-jackets rect{animation:pop .45s var(--ease-out-quart) both;animation-delay:calc(1.6s + var(--n) * .32s)}
.motion .sim-scene:is(.is-active,.is-leaving) .s-sway{animation:quake 2.8s ease-in-out .3s both}
.motion .sim-scene:is(.is-active,.is-leaving) .s-wave{animation:ground-wave 2.8s linear .3s both}
.motion .sim-scene:is(.is-active,.is-leaving) .s-wave2{animation-delay:.5s}
.motion .sim-scene:is(.is-active,.is-leaving) .s-arrows{animation:blink-out 2.8s ease .3s both}
.motion .sim-scene:is(.is-active,.is-leaving) .s-cols{animation:grow-y 1.1s var(--ease-out-quart) .2s both}
.motion .sim-scene:is(.is-active,.is-leaving) .s-floors path{animation:fade-up .4s var(--ease-out-quart) both;animation-delay:calc(.8s + var(--n) * .18s)}
.motion .sim-scene:is(.is-active,.is-leaving) .s-dim{animation:grow-y .8s var(--ease-out-quart) 2.1s both}

/* Service thumbnails loop while on screen; cards are offset so they don't move in lockstep */
.svc-card{--off:calc(var(--d,0) * -.7s)}
.motion .svc-card.is-playing .a-sway{animation:t-quake 3.4s ease-in-out infinite}
.motion .svc-card.is-playing .a-ground{animation:t-ground 3.4s ease-in-out infinite}
.motion .svc-card.is-playing .a-wave{animation:t-wave 3.4s linear infinite}
.motion .svc-card.is-playing .a-shake{animation:t-shake 3.4s ease infinite}
.motion .sign-panel.is-active,.motion .tier-panel.is-active{animation:fade-up var(--dur-5) var(--ease-out-quart)}

/* Responsive */
@media(max-width:1180px){
  .main-nav>a:not(.button){padding-inline:10px;font-size:14.5px}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .tier-content{gap:40px;padding-inline:8px}
}
@media(max-width:1120px){
  :root{--header:72px}
  .brand{font-size:27px}
  .menu-toggle{display:flex;align-items:center;gap:12px;padding:10px 4px 10px 12px;border:0;background:none;font-size:15px;font-weight:700}
  .menu-lines{position:relative;width:22px;height:12px;border-block:2px solid var(--ink);transition:transform var(--dur-3) var(--ease-in-out-cubic)}
  .menu-lines:after{content:'';position:absolute;left:0;right:0;top:3px;border-top:2px solid var(--ink);transition:transform var(--dur-3) var(--ease-in-out-cubic)}
  .menu-toggle[aria-expanded=true] .menu-lines{height:2px;border-bottom:0;transform:rotate(45deg)}
  .menu-toggle[aria-expanded=true] .menu-lines:after{top:-2px;transform:rotate(90deg)}
  .main-nav{display:none;position:absolute;left:0;right:0;top:var(--header);flex-direction:column;align-items:stretch;gap:2px;padding:12px var(--gutter) 24px;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 24px 40px -24px rgba(29,48,54,.35)}
  .main-nav.is-open{display:flex}
  .motion .main-nav.is-open{animation:menu-in var(--dur-3) var(--ease-out-quart)}
  .main-nav>a:not(.button){padding:14px 12px;font-size:17px;border-radius:12px}
  .main-nav .button{margin:12px 0 0}
  .hero{grid-template-columns:1fr;padding-bottom:64px}
  .hero-photo{aspect-ratio:16/11}
  .signs-layout,.savings-top,.compliance-layout,.inquiry-layout,.faq-layout{grid-template-columns:1fr}
  .signs-visual{position:relative;top:0}
  .faq-heading{position:static}
  .people-grid{grid-template-columns:1fr}
  .approach-heading{flex-direction:column;align-items:flex-start;gap:20px}
  .approach-intro{max-width:620px}
  .tier-content{grid-template-columns:1fr;gap:24px;padding:28px 0}
  .tier-diagram{max-width:340px;order:2}
  .footer-top{grid-template-columns:1fr auto;gap:28px 40px}
  .footer-top>p{grid-column:1/-1;grid-row:2}
}
@keyframes menu-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(max-width:760px){
  body{font-size:16px}
  .svc-grid,.svc-grid-2{grid-template-columns:1fr}
  .process-steps{grid-template-columns:1fr;gap:0}
  .process-steps:before,.process-steps:after{top:26px;bottom:26px;left:25px;right:auto;width:2px;height:auto}
  .process-steps:after{transform-origin:top}
  .motion .process-steps:after{transform:scaleY(0)}
  .motion .process-steps.is-visible:after{transform:none}
  .process-steps li{display:grid;grid-template-columns:52px 1fr;column-gap:18px;padding-bottom:24px}
  .process-steps li:last-child{padding-bottom:0}
  .step-dot{grid-row:1/3}
  .process-steps h3{margin-top:12px}
  .cta-band{flex-wrap:wrap}
  .cta-band .button{width:100%;margin-left:0}
  .code-explainer-body{grid-template-columns:1fr;gap:20px}
  .tier-tabs{grid-template-columns:1fr}
  .tier-tab{flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 18px}
  .tier-name{order:-1;font-size:1.15rem}
  .approach-footnote{flex-direction:column;align-items:flex-start;gap:14px}
  .audience{flex-direction:column;align-items:stretch;gap:12px;padding-block:20px}
  .sim-menu{position:static;grid-template-columns:repeat(2,1fr);margin-top:10px;background:var(--ink);border-color:var(--ink)}

}
@media(max-width:560px){
  .hero-title{font-size:clamp(2.2rem,10vw,3.4rem)}
  .hero-actions .button{width:100%}
  .hero-photo{aspect-ratio:4/3.6}
  .sim-dot{padding:9px 9px 11px;font-size:13px}
  .svc-card{gap:16px;padding:14px}
  .svc-thumb{width:92px;height:92px;border-radius:14px}
  .svc-body h3{font-size:.95rem}
  .hotspot>span{width:22px;height:22px;font-size:11px}
  .sign-panel dl{grid-template-columns:1fr;gap:2px}
  .sign-panel dd{margin-bottom:10px}
  .signs-detail .button{width:100%}
  .compare-toggle button{padding:9px 4px;font-size:12.5px}
  .compare-legend .compare-note{margin-left:0;width:100%}
  .person{grid-template-columns:1fr;justify-items:start}
  .person-photo{width:120px;height:120px}
  .form-row{grid-template-columns:1fr;gap:0}
  .faq-list summary{font-size:16px}
  .faq-list details>div{padding-right:0}
  .footer-top{grid-template-columns:1fr}
  .footer-nav{grid-row:3}
  .footer-bottom .back-top{margin-left:0}
}
@media(max-width:380px){
  .brand{font-size:24px}
  .menu-toggle>span:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
}

@media print{
  .site-header,.scroll-progress,.hero,.audience,.services,.signs,.savings,.compliance,.approach,.process,.practice,.faq,.site-footer,.inquiry-copy,.brief-actions,.edit-brief,.brief-status,.form-privacy{display:none!important}
  .inquiry{padding:0;background:white;border:0}
  .shell{width:100%;max-width:none}
  .inquiry-layout{display:block}
  .inquiry-form-wrap{padding:0;background:white;box-shadow:none}
  .inquiry-form-wrap form{display:none}
  .brief-result{display:block!important}
  #brief-content{max-height:none;overflow:visible;border:0;background:white;padding:0;font-size:11pt}
  .brief-result h3{font-size:22pt}
}

/* Hero: renovation scene and the retrofit jackets that follow the earthquake sway */
.s-newfloor{fill:rgba(255,90,54,.22);stroke:#fffaf0;stroke-width:4;stroke-dasharray:10 8}
.s-plus{fill:none;stroke:#ff5a36;stroke-width:6}
.hero-sim :is(.s-newfloor,.s-plus){transform-box:fill-box;transform-origin:center}
@keyframes drop-in{from{opacity:0;transform:translateY(-46px)}60%{opacity:1}to{opacity:1;transform:none}}
.motion .sim-scene:is(.is-active,.is-leaving) .s-newfloor{animation:drop-in .9s var(--ease-out-quart) 1.3s both}
.motion .sim-scene:is(.is-active,.is-leaving) .s-plus{animation:pop .45s var(--ease-out-quart) 2.1s both}
.motion .sim-scene:is(.is-active,.is-leaving) .s-late rect{animation-delay:calc(3.3s + var(--n) * .3s)}

/* Projects page */
.main-nav a[aria-current=page]{background:rgba(29,48,54,.07)}
.projects-hero{padding-block:clamp(48px,7vw,88px) clamp(28px,4vw,44px)}
.projects-hero h1{margin-top:16px;font-size:clamp(2.6rem,5vw,4.2rem);line-height:1.04;letter-spacing:-.05em}
.project-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.filter-chip{padding:8px 16px;border:1.5px solid var(--line-2);border-radius:999px;background:var(--white);font-size:14.5px;font-weight:700;transition:background-color 150ms ease,border-color 150ms ease,color 150ms ease}
.filter-chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--white)}
@media(hover:hover){.filter-chip[aria-pressed=false]:hover{border-color:var(--ink)}}
.projects-body{padding-bottom:clamp(72px,9vw,120px)}
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;list-style:none;margin:0;padding:0}
.project-card{overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);transition:box-shadow var(--dur-3) ease,border-color var(--dur-3) ease}
@media(hover:hover){.project-card:hover{border-color:#c9c5b8;box-shadow:var(--shadow)}.project-card:hover .project-photo img{transform:scale(1.04)}}
.project-photo{position:relative;aspect-ratio:4/3;overflow:hidden;background:#d7d4cd}
.project-photo img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-5) var(--ease-out-quart)}
.project-type{position:absolute;left:12px;top:12px;padding:4px 10px;border-radius:999px;background:rgba(255,254,250,.94);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.project-copy{padding:20px 22px 24px}
.project-meta{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--muted)}
.project-meta svg{width:16px;height:16px;color:var(--accent)}
.project-copy h2{margin-top:8px;font-size:1.25rem;line-height:1.3;letter-spacing:-.02em}
.project-copy>p:not(.project-meta){margin-top:8px;font-size:15px;color:var(--muted)}
.project-scope{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:14px 0 0;padding:0}
.project-scope li{padding:4px 10px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:12.5px;font-weight:600}
.motion .project-card{animation:fade-up .6s var(--ease-out-quart) both;animation-delay:calc(var(--d) * 80ms)}
.projects-empty{display:flex;flex-direction:column;align-items:center;max-width:620px;margin:0 auto;padding:clamp(40px,6vw,64px) clamp(20px,4vw,48px);border:1.5px dashed var(--line-2);border-radius:var(--r-lg);background:var(--white);text-align:center}
.projects-empty h2{margin-top:22px;font-size:clamp(1.7rem,3vw,2.3rem)}
.projects-empty p{margin:12px 0 26px;color:var(--muted)}
.empty-mark{display:grid;grid-template-columns:repeat(3,22px);align-items:end;gap:6px;height:60px}
.empty-mark span{display:block;border-radius:4px 4px 0 0;background:var(--accent-wash);border:1.5px solid var(--accent-light)}
.empty-mark span:nth-child(1){height:30px}.empty-mark span:nth-child(2){height:56px}.empty-mark span:nth-child(3){height:42px}
.motion .empty-mark span{animation:grow-y .8s var(--ease-out-expo) both;transform-origin:bottom}
.motion .empty-mark span:nth-child(2){animation-delay:.12s}.motion .empty-mark span:nth-child(3){animation-delay:.24s}
@media(max-width:1020px){.project-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.project-grid{grid-template-columns:1fr}}

.inline-email{color:var(--accent-dark);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.contact-note a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.projects-empty p a{color:var(--accent-dark);font-weight:700}
.asep-badge{display:flex;align-items:center;justify-content:center;gap:12px;width:fit-content;max-width:100%;margin:28px auto 0;padding:10px 18px 10px 10px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:15px;color:var(--muted)}
.asep-badge strong{color:var(--ink)}
.asep-mark{flex:none;padding:6px 10px;border-radius:999px;background:var(--ink);color:var(--white);font-size:12px;font-weight:700;letter-spacing:.1em}
@media(max-width:560px){.asep-badge{border-radius:var(--r);align-items:flex-start;text-align:left}}
.person-creds .cred-assoc{padding:3px 9px;border:1px solid var(--line-2);border-radius:7px;background:var(--white);font-size:12.5px;font-weight:700;color:var(--ink)}
.core-badge{padding:3px 9px;border-radius:999px;background:var(--accent);color:#fff;font-size:10.5px;letter-spacing:.08em}

/* Phones: keep each interactive section's controls, drawing, and explanation on one screen */
@media(max-width:760px){
  .tier-tabs{grid-template-columns:repeat(3,1fr);gap:6px}
  .tier-tab{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px;padding:10px 10px 12px}
  .tier-number{font-size:9.5px;letter-spacing:.08em}
  .tier-number{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tier-name{order:0;font-size:.95rem;line-height:1.2}
  .tier-content{gap:14px;padding:20px 0 24px}
  .tier-panel h3{font-size:1.3rem;margin-bottom:6px}
  .tier-panel>p{font-size:15px}
  .tier-output{margin-top:12px;padding-top:12px}
  .tier-diagram{max-width:230px}
  .diagram-key{font-size:12px}

  .signs-detail{display:contents}
  .sign-chips{order:1;flex-wrap:nowrap;overflow-x:auto;margin:0 calc(var(--gutter) * -1) 2px;padding:0 var(--gutter) 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .sign-chips::-webkit-scrollbar{display:none}
  .sign-chip{flex:none}
  .signs-visual{order:2}
  .sign-panel{order:3;padding:18px 18px 14px}
  .signs-layout>.urgent-note,.signs-detail>.urgent-note{order:4;margin:0}
  .signs-detail>.button{order:5}
  .signs-layout{gap:14px}
}

/* Savings & compliance, merged into one section */
.savings-top{align-items:start}
.merged-steps{margin-top:30px}
.merged-steps li{padding-bottom:18px}
.merged-label{margin-top:26px;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.savings-copy .occasions{margin-top:12px}
.compare-card{position:sticky;top:calc(var(--header) + 24px)}
@media(max-width:1120px){.compare-card{position:static}}