/* v1.217 — hero "I'm building a…" chooser (option 6). Scoped under .hc. */
.hc{--hc-teal:#003841;--hc-orange:#F69810;--hc-orange-ink:#A34F00;--hc-ink:#0F2226;--hc-muted:#4C6066;--hc-line:#E3E6E4;--hc-paper:#F7F8F9;
    --hc-mono:ui-monospace,'Cascadia Mono',Consolas,'Liberation Mono',monospace;--hc-ease:cubic-bezier(.2,.7,.2,1);
    position:relative;border-radius:24px;background:#fff;border:1px solid var(--hc-line);box-shadow:0 30px 60px -34px rgba(0,57,66,.45);overflow:hidden;min-width:0;
    animation:hcIn .7s var(--hc-ease) .15s both}
.hc-ask{padding:14px 18px 0;font-family:var(--hc-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--hc-orange-ink)}
.hc-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--hc-line)}
.hc-tabs button{padding:12px 6px 14px;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:6px;font:inherit;font-size:13px;font-weight:600;color:var(--hc-muted);position:relative;cursor:pointer;transition:color .3s,background .3s}
.hc-tabs button>span{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#F1F3F2;color:var(--hc-teal);transition:all .3s}
.hc-tabs button:hover>span{transform:translateY(-2px)}
.hc-tabs button[aria-selected="true"]{color:var(--hc-teal);background:var(--hc-paper)}
.hc-tabs button[aria-selected="true"]>span{background:var(--hc-orange);color:var(--hc-teal);box-shadow:0 8px 18px -8px rgba(246,152,16,.9)}
.hc-tabs button::after{content:"";position:absolute;left:18%;right:18%;bottom:-1px;height:3px;border-radius:2px;background:var(--hc-orange);transform:scaleX(0);transition:transform .35s var(--hc-ease)}
.hc-tabs button[aria-selected="true"]::after{transform:scaleX(1)}
.hc-tabs button:focus-visible{outline:2px solid var(--hc-orange);outline-offset:-3px}
.hc-body{display:grid;grid-template-columns:170px minmax(0,1fr)}
.hc-body[hidden]{display:none}
.hc-vis{background:var(--hc-teal);position:relative;min-height:320px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:30px;overflow:hidden}
.hc-vis::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:18px 18px}
.hc-b{position:relative;display:flex;flex-direction:column-reverse;gap:2px;--hc-h:240px}
.hc-b i{display:block;background:rgba(255,255,255,.14);border-radius:2px;transform-origin:bottom;animation:hcFloor .5s var(--hc-ease) both}
.hc-b i:nth-child(2n){animation-delay:.03s}.hc-b i:nth-child(3n){animation-delay:.06s}.hc-b i:nth-child(5n){animation-delay:.09s}
.hc-car{position:absolute;left:50%;bottom:0;width:12px;margin-left:-6px;border-radius:3px;background:var(--hc-orange);box-shadow:0 0 14px rgba(246,152,16,.85);animation:hcRide 3.6s cubic-bezier(.65,0,.35,1) infinite alternate}
.hc-roof{position:absolute;left:-10px;right:-10px;bottom:100%;height:34px;clip-path:polygon(50% 0,100% 100%,0 100%);background:rgba(255,255,255,.16)}
.hc-crane{position:absolute;right:12px;top:56px;width:62px;height:4px;background:var(--hc-orange);opacity:.85}
.hc-crane::before{content:"";position:absolute;right:0;top:0;width:4px;height:240px;background:repeating-linear-gradient(0deg,rgba(246,152,16,.8) 0 3px,transparent 3px 9px)}
.hc-count{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-family:var(--hc-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#9FB4B8}
.hc-txt{padding:22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.hc-txt small{font-family:var(--hc-mono);font-size:10.5px;letter-spacing:.12em;color:var(--hc-orange-ink)}
.hc .hc-h{margin:0;font-size:22px;font-weight:700;color:var(--hc-teal);line-height:1.2}
.hc-stack{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.hc-stack li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--hc-muted)}
.hc-stack li b{color:var(--hc-ink);font-weight:600}
.hc-stack li::before{content:"";flex-shrink:0;width:8px;height:8px;margin-top:6px;border-radius:2px;background:var(--hc-orange)}
.hc-cta{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;height:46px;padding:0 22px;border-radius:999px;background:var(--hc-orange);color:var(--hc-teal);font-weight:700;font-size:14.5px;text-decoration:none;box-shadow:0 14px 28px -14px rgba(246,152,16,.9);transition:transform .3s var(--hc-ease),box-shadow .3s}
.hc-cta:hover{transform:translateY(-2px);box-shadow:0 18px 32px -14px rgba(246,152,16,1)}
.hc-cta svg{transition:transform .3s var(--hc-ease)}.hc-cta:hover svg{transform:translateX(4px)}
.hc-cta:focus-visible{outline:2px solid var(--hc-teal);outline-offset:3px}
.hc-body.is-in .hc-txt>*{animation:hcUp .45s var(--hc-ease) both}
.hc-body.is-in .hc-txt>*:nth-child(2){animation-delay:.05s}.hc-body.is-in .hc-txt>*:nth-child(3){animation-delay:.1s}.hc-body.is-in .hc-txt>*:nth-child(4){animation-delay:.15s}
/* hero trust chips (replace the single proof line) */
.hero-trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;padding-top:20px;border-top:1px solid rgba(0,56,65,.12)}
.hero-trust span{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:#fff;border:1px solid rgba(0,56,65,.14);font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:11.5px;color:#0F2226}
.hero-trust svg{color:#A34F00;flex:none}
@keyframes hcIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes hcUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes hcFloor{from{transform:scaleY(0);opacity:0}to{transform:none;opacity:1}}
@keyframes hcRide{from{bottom:0}to{bottom:calc(100% - 20px)}}
@media (max-width:620px){.hc-body{grid-template-columns:1fr}.hc-vis{min-height:190px}.hc-tabs button{font-size:11.5px}.hc-tabs button>span{width:32px;height:32px}}
@media (prefers-reduced-motion:reduce){.hc,.hc *{animation:none!important;transition:none!important}}
/* the chooser needs a wider column than the old shaft, and no overhang room */
.hero-visual--chooser{margin-bottom:0}
@media (min-width:901px){.hero-grid:has(.hero-visual--chooser){grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}}
