/* ==========================================================================
   Steel & Stud, homepage sections (v202)
   Promo band (moved under "Shelter solutions"), Shop-by-size cards,
   Building finder form, Installation gallery, state links, Learning center.
   Loaded on the front page only, after ss-wp.css.
   ========================================================================== */

/* ---------- 1. Promo band (3 cards, moved out of the hero) ---------- */
.h7promo{position:relative;isolation:isolate;overflow:clip;background:var(--grad-navy);color:#dbe4f1;padding-block:clamp(26px,3.4vw,42px)}
.h7promo::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--rib-light);opacity:.32}
.h7promo::after{content:"";position:absolute;inset:-40% -10%;z-index:-1;pointer-events:none;background:radial-gradient(520px 300px at 10% 0%,rgba(11,87,160,.5),transparent 60%),radial-gradient(560px 320px at 92% 100%,rgba(240,115,0,.18),transparent 62%)}
.h7promo .pg-card{min-height:0;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.06);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#dbe4f1;border-radius:var(--r-lg);padding:16px 18px;display:block}
.h7promo .pg-card img{display:none}
.h7promo .pg-card .k{font-size:var(--fs-xs);font-weight:800;text-transform:uppercase;color:#ffb066;letter-spacing:.1em}
.h7promo .pg-card h2,.h7promo .pg-card h3{color:#fff;font-size:1.02rem;margin:4px 0;font-family:var(--display);font-weight:800;letter-spacing:-.012em}
.h7promo .pg-card p{color:#a9bcd6;font-size:var(--fs-xs);margin:0 0 8px;max-width:none}
.h7promo .pg-card>span:last-child{font-family:var(--display);font-weight:800;font-size:var(--fs-sm);color:#fff}
.h7promo .pg-card:hover{background:rgba(255,255,255,.1);border-color:rgba(255,177,102,.5)}

/* ---------- 2. Shop by size, product cards inside the tabs ---------- */
.sz-sec .tabpane .sz-cards{margin-top:2px}
.sz-sec .sz-empty{text-align:center;padding:28px 0;margin:0}

/* ---------- 3. Building finder, form layout ---------- */
.fq.fq2{display:grid;grid-template-columns:minmax(260px,330px) minmax(0,1fr);background:#fff;border:1px solid var(--rule);border-radius:28px;overflow:hidden;box-shadow:0 1px 2px rgba(0,29,61,.04),0 34px 64px -34px rgba(0,66,128,.34)}
.fq2 .fq-side{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:22px;padding:30px 28px;background:var(--grad-navy);color:#cfdbea}
.fq2 .fq-side::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--rib-light);opacity:.22}
.fq2 .fq-side::after{content:"";position:absolute;z-index:-1;width:340px;height:340px;right:-170px;bottom:-150px;border-radius:50%;background:radial-gradient(circle,rgba(240,115,0,.34),transparent 65%)}
.fq-side-k{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#ffb066}
.fq-side-h{margin:0;font-family:var(--display);font-weight:800;font-size:1.3rem;line-height:1.25;letter-spacing:-.015em;color:#fff}
.fq-steps{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.fq-steps li{position:relative;display:flex;gap:14px;align-items:flex-start;padding:9px 0}
.fq-steps li:not(:last-child)::after{content:"";position:absolute;left:16px;top:45px;bottom:-7px;width:2px;border-radius:2px;background:rgba(255,255,255,.14);transition:background .4s}
.fq-steps .n{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:.84rem;color:#9fb3cc;border:1.5px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04);transition:background .3s,border-color .3s,color .3s,box-shadow .3s}
.fq-steps li>div{padding-top:2px;min-width:0}
.fq-steps b{display:block;font-family:var(--display);font-size:.94rem;color:#fff;opacity:.62;transition:opacity .3s}
.fq-steps small{display:block;margin-top:2px;font-size:.76rem;color:#8fa6c2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fq-steps li.on .n{background:var(--grad-molten);border-color:transparent;color:#fff;box-shadow:0 0 0 5px rgba(240,115,0,.2)}
.fq-steps li.on b,.fq-steps li.done b{opacity:1}
.fq-steps li.done .n{background:#fff;border-color:#fff;color:var(--primary)}
.fq-steps li.done small{color:#ffb066;font-weight:700}
.fq-steps li.done::after{background:linear-gradient(#ffb066,rgba(255,176,102,.25))}
.fq-trust{list-style:none;margin:auto 0 0;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.12);display:grid;gap:9px;font-size:.78rem;color:#a9bcd6}
.fq-trust li{display:flex;gap:9px;align-items:center}
.fq-trust svg{flex:none;color:#ffb066}
.fq-trust a{color:#fff;font-weight:700;text-decoration:none}
.fq-trust a:hover{text-decoration:underline}

.fq2 .fq-main{display:flex;flex-direction:column;min-width:0}
.fq2 .fq-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 34px;background:#fff;border-bottom:1px solid #EDF2F8}
.fq2 .fq-step{color:var(--primary)}
.fq2 .fq-bar{width:min(260px,45%);height:6px;background:#EDF2F8}
.fq2 .fq-bar i{background:var(--grad-molten);transition:width .45s var(--ease-out)}
.fq2 .fq-pane{padding:30px 34px 28px}
.fq2 .fq-pane.on{display:block;animation:ssFqIn .45s var(--ease-out)}
@keyframes ssFqIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.fq2 .fq-pane h3{margin:0 0 6px;font-size:clamp(1.25rem,1.7vw,1.55rem);letter-spacing:-.018em}
.fq2 .fq-pane>p{margin:0 0 22px}
.fq2 .fq-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fq2 .fq-pane[data-q="size"] .fq-opts,.fq2 .fq-pane[data-q="budget"] .fq-opts{grid-template-columns:minmax(0,1fr)}
.fq2 .fq-opt{flex-direction:row;align-items:center;gap:14px;width:100%;padding:14px 16px;background:#fff;border:1.5px solid var(--rule);border-radius:16px;box-shadow:0 1px 2px rgba(0,29,61,.04);transition:border-color .2s,box-shadow .25s,transform .25s var(--ease-out),background .2s}
.fq2 .fq-opt:hover{border-color:#A9BCD6;transform:translateY(-2px);box-shadow:0 14px 26px -16px rgba(0,66,128,.38)}
.fq2 .fq-opt:focus-visible{outline:3px solid rgba(240,115,0,.38);outline-offset:2px}
.fq2 .fq-ic{flex:none;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,#F2F6FB,#E2EAF4);color:var(--primary);transition:background .25s,color .25s}
.fq2 .fq-ic svg{width:24px;height:24px}
.fq2 .fq-ic-t{font-family:var(--display);font-weight:800;font-size:.92rem;letter-spacing:-.02em}
.fq2 .fq-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fq2 .fq-tx b{font-family:var(--display);font-size:.98rem;color:var(--ink)}
.fq2 .fq-tx small{font-size:.78rem;color:var(--muted)}
.fq2 .fq-radio{flex:none;position:relative;width:22px;height:22px;border-radius:50%;border:2px solid #C5D3E4;transition:border-color .2s,background .2s}
.fq2 .fq-radio::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .25s var(--ease-spring)}
.fq2 .fq-opt.on{border-color:var(--accent);background:linear-gradient(135deg,#FFF6EC,#fff 70%);box-shadow:0 0 0 4px rgba(240,115,0,.1),0 16px 28px -18px rgba(240,115,0,.55)}
.fq2 .fq-opt.on .fq-ic{background:var(--grad-molten);color:#fff}
.fq2 .fq-opt.on .fq-radio{border-color:var(--accent);background:var(--accent)}
.fq2 .fq-opt.on .fq-radio::after{transform:scale(1)}
.fq2 .fq-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px;padding-top:18px;border-top:1px dashed var(--rule)}
.fq2 .fq-pane[data-q="use"] .fq-foot{justify-content:flex-end}
.fq-hint{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;color:var(--muted)}
.fq-hint::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(240,115,0,.15)}
.fq2 .fq-reco{text-align:center;padding:40px 34px 34px}
.fq-reco-ic{width:62px;height:62px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:var(--grad-molten);color:#fff;box-shadow:0 0 0 8px rgba(240,115,0,.12),0 18px 30px -12px rgba(240,115,0,.55)}
.fq2 .fq-reco h3{margin:0}
.fq2 .fq-name{font-size:clamp(1.3rem,2.1vw,1.75rem);letter-spacing:-.02em}
.fq-reco-acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.fq2 .fq-restart{margin-top:16px;border:0;background:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:.82rem;font-weight:700;color:var(--muted)}
.fq2 .fq-restart:hover{color:var(--primary)}
.fq-note{margin:8px 0 0;font-size:.74rem;color:var(--muted)}
@media (max-width:900px){
 .fq.fq2{grid-template-columns:1fr;border-radius:22px}
 .fq2 .fq-side{padding:20px 18px 18px;gap:14px}
 .fq-side-h,.fq-trust{display:none}
 .fq-steps{grid-template-columns:repeat(4,1fr);gap:6px}
 .fq-steps li{flex-direction:column;align-items:center;text-align:center;gap:6px;padding:0}
 .fq-steps li:not(:last-child)::after{display:none}
 .fq-steps .n{width:30px;height:30px;font-size:.78rem}
 .fq-steps b{font-size:.74rem}
 .fq-steps small{display:none}
 .fq2 .fq-head{padding:16px 18px}
 .fq2 .fq-pane{padding:22px 18px 20px}
 .fq2 .fq-reco{padding:30px 18px 26px}
}
@media (max-width:600px){
 .fq2 .fq-opts{grid-template-columns:minmax(0,1fr)}
 .fq2 .fq-opt{padding:12px 14px}
 .fq2 .fq-ic{width:40px;height:40px;border-radius:11px}
 .fq2 .fq-hint{display:none}
}

/* ---------- 4. Installation gallery, abstract bento ---------- */
.gal2{position:relative;isolation:isolate;overflow:clip;background:#00172F;color:#cfdbea;padding-block:clamp(56px,7vw,96px)}
.gal2::before{content:"";position:absolute;inset:0;z-index:-3;background:radial-gradient(900px 520px at 88% -12%,rgba(11,87,160,.55),transparent 62%),radial-gradient(720px 480px at -6% 108%,rgba(240,115,0,.2),transparent 60%),linear-gradient(180deg,#001D3D,#00142A)}
.gal2::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 25%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 25%,transparent 75%)}
.gal2 .wrap{position:relative}
.gal2-orb{position:absolute;z-index:-1;border-radius:50%;filter:blur(50px);pointer-events:none}
.gal2-orb-a{width:320px;height:320px;right:-90px;top:10px;background:radial-gradient(circle,rgba(240,115,0,.55),transparent 70%);opacity:.35;animation:ssGalOrb 14s ease-in-out infinite alternate}
.gal2-orb-b{width:380px;height:380px;left:-140px;bottom:-80px;background:radial-gradient(circle,rgba(11,87,160,.9),transparent 70%);opacity:.45;animation:ssGalOrb 18s ease-in-out infinite alternate-reverse}
@keyframes ssGalOrb{to{transform:translate3d(-40px,30px,0) scale(1.12)}}
.gal2-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 28px;flex-wrap:wrap;margin-bottom:30px}
.gal2 .eyebrow{color:#ffb066}
.gal2 h2{margin:0;color:#fff;font-size:clamp(1.9rem,3.4vw,2.9rem);letter-spacing:-.025em;line-height:1.08}
.gal2 .gtabs{margin:0;padding:5px;gap:4px;flex-wrap:wrap;border-radius:99px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.gal2 .gtab{border:0;background:transparent;color:#a9bcd6;padding:8px 16px;border-radius:99px;font-size:.82rem;font-weight:700}
.gal2 .gtab:hover{transform:none;color:#fff;background:rgba(255,255,255,.07)}
.gal2 .gtab[aria-selected=true]{background:#fff;color:#001D3D;box-shadow:0 10px 22px -12px rgba(0,0,0,.7)}
.gal2 .gal2-grid{columns:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(150px,15vw,210px);grid-auto-flow:dense;gap:14px}
.gal2 .gal2-grid figure{position:relative;margin:0;border-radius:22px;overflow:hidden;background:#0a2747;border:1px solid rgba(255,255,255,.08);box-shadow:0 26px 44px -26px rgba(0,0,0,.75);animation:ssGalIn .6s var(--ease-out) both}
@keyframes ssGalIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.gal2 .g-xl{grid-column:span 2;grid-row:span 2}
.gal2 .g-tall{grid-row:span 2}
.gal2 .g-wide{grid-column:span 2}
.gal2 .gal2-grid img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;transition:transform 1.1s var(--ease-out),filter .6s}
.gal2 .gal2-grid figure::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,23,47,0) 42%,rgba(0,23,47,.82));transition:opacity .4s}
.gal2 .gal2-grid figure:hover img{transform:scale(1.07);filter:saturate(1.08)}
.gal2 .gal2-grid figcaption{position:absolute;left:16px;right:16px;bottom:15px;z-index:2;padding:0;background:none;display:flex;flex-direction:column;align-items:flex-start;gap:6px;color:#fff;transform:translateY(4px);transition:transform .45s var(--ease-out)}
.gal2 .gal2-grid figure:hover figcaption{transform:none}
.gal2 .gk{font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#ffb066;padding:4px 9px;border-radius:99px;background:rgba(0,23,47,.55);border:1px solid rgba(255,176,102,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.gal2 .gal2-grid figcaption b{font-family:var(--display);font-size:.98rem;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.gal2 .g-xl figcaption b{font-size:1.4rem}
.gal2 .gn{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border-radius:99px;background:rgba(0,23,47,.5);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-family:var(--display);font-weight:800;font-size:.66rem;letter-spacing:.14em;color:#fff}
.gal2 .gn::after{content:"";width:14px;height:1px;background:#ffb066}
.gal2-cta{grid-column:span 2;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px;padding:24px 28px;border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.gal2-cta::before{content:"";position:absolute;right:-56px;top:-56px;width:190px;height:190px;border-radius:50%;border:1px solid rgba(255,176,102,.35);box-shadow:0 0 0 26px rgba(255,176,102,.05),0 0 0 52px rgba(255,176,102,.03)}
.gal2-cta-k{font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#ffb066}
.gal2-cta b{max-width:30ch;font-family:var(--display);font-size:1.12rem;line-height:1.3;color:#fff}
.gal2-cta .btn{margin-top:6px}
.gal2 .gal2-grid.is-filtered{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));grid-auto-rows:clamp(230px,25vw,340px)}
.gal2 .gal2-grid.is-filtered figure,.gal2 .gal2-grid.is-filtered .gal2-cta{grid-column:auto;grid-row:auto}
@media (max-width:760px){
 .gal2 .gal2-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:140px;gap:10px}
 .gal2 .gal2-grid figure,.gal2-cta{border-radius:18px}
 .gal2 .g-xl figcaption b{font-size:1.1rem}
 .gal2 .gal2-grid figcaption b{font-size:.86rem}
 .gal2 .gn{top:10px;left:12px}
 .gal2 .gal2-grid figcaption{left:12px;right:12px;bottom:11px}
 .gal2-cta{padding:20px}
 .gal2 .gtabs{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none}
 .gal2 .gtabs::-webkit-scrollbar{display:none}
 .gal2 .gtab{white-space:nowrap}
 .gal2 .gal2-grid.is-filtered{grid-template-columns:1fr;grid-auto-rows:220px}
}
@media (prefers-reduced-motion:reduce){.gal2-orb{animation:none}.gal2 .gal2-grid figure{animation:none}}

/* ---------- 5. Nationwide coverage, state cards as links ---------- */
.states a{display:inline-block;border-radius:8px;padding:6px 12px;font-size:.8rem;color:var(--body);background:var(--surface);border:1px solid var(--rule);text-decoration:none;transition:background .15s,color .15s,border-color .15s,transform .18s var(--ease-spring)}
.states a:hover,.states a:focus-visible{border-color:var(--accent);color:var(--accent-dark);transform:translateY(-2px)}

/* ---------- 6. Learning center, editorial blog ---------- */
.lc2{position:relative;isolation:isolate;overflow:clip;background:#fff}
.lc2::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(700px 360px at 100% 0%,rgba(240,115,0,.07),transparent 60%),radial-gradient(800px 420px at 0% 100%,rgba(0,66,128,.06),transparent 60%)}
.lc2-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px 28px;align-items:end;margin-bottom:30px}
.lc2-head h2{margin:0;max-width:18ch}
.lc2-head-r{display:flex;flex-direction:column;align-items:flex-end;gap:14px;text-align:right}
.lc2-head-r p{margin:0;max-width:40ch;color:var(--muted)}
.lc2-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:22px;align-items:stretch}
.lc2-feat a{height:100%;display:flex;flex-direction:column;overflow:hidden;color:inherit;text-decoration:none;background:#fff;border:1px solid var(--rule);border-radius:26px;box-shadow:0 1px 2px rgba(0,29,61,.04),0 26px 50px -32px rgba(0,66,128,.38);transition:transform .35s var(--ease-out),box-shadow .35s}
.lc2-feat a:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(0,29,61,.05),0 38px 64px -32px rgba(0,66,128,.48)}
.lc2-fig{position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;background:#E3EBF5}
.lc2-fig img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
.lc2-feat a:hover .lc2-fig img{transform:scale(1.05)}
.lc2-fig::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,29,61,.12),rgba(0,29,61,0) 30%,rgba(0,29,61,0) 62%,rgba(0,29,61,.32))}
.lc2-pill,.lc2-flag{position:absolute;top:18px;z-index:1;padding:6px 12px;border-radius:99px;font-size:.64rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.lc2-pill{left:18px;background:rgba(255,255,255,.93);color:var(--accent-ink);box-shadow:0 8px 18px -10px rgba(0,0,0,.4)}
.lc2-flag{right:18px;background:var(--grad-molten);color:#fff;box-shadow:0 8px 18px -10px rgba(240,115,0,.7)}
.lc2-body{flex:1;display:flex;flex-direction:column;gap:10px;padding:24px 28px 26px}
.lc2-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:.76rem;font-weight:600;color:var(--muted)}
.lc2-meta i{width:4px;height:4px;border-radius:50%;background:#A9BCD6}
.lc2-meta span{display:inline-flex;align-items:center;gap:5px}
.lc2-feat h3{margin:0;font-size:clamp(1.35rem,2vw,1.75rem);line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.lc2-feat p{margin:0;font-size:.92rem;line-height:1.65;color:var(--body)}
.lc2-go{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:800;font-size:.9rem;color:var(--primary)}
.lc2-go svg{transition:transform .3s var(--ease-out)}
.lc2-feat a:hover .lc2-go svg{transform:translateX(4px)}
.lc2-list{display:grid;grid-template-rows:repeat(4,minmax(0,1fr));gap:14px}
.lc2-item a{height:100%;display:grid;grid-template-columns:168px minmax(0,1fr) auto;gap:18px;align-items:center;padding:12px 18px 12px 12px;color:inherit;text-decoration:none;background:#fff;border:1px solid var(--rule);border-radius:20px;box-shadow:0 1px 2px rgba(0,29,61,.04);transition:transform .3s var(--ease-out),box-shadow .3s,border-color .3s}
.lc2-item a:hover{transform:translateX(4px);border-color:#C5D3E4;box-shadow:0 18px 34px -24px rgba(0,66,128,.45)}
.lc2-thumb{position:relative;display:block;width:168px;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:#E3EBF5}
.lc2-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.lc2-item a:hover .lc2-thumb img{transform:scale(1.08)}
.lc2-num{position:absolute;left:8px;top:8px;padding:3px 7px;border-radius:8px;background:rgba(0,29,61,.74);color:#fff;font-family:var(--display);font-weight:800;font-size:.62rem;letter-spacing:.08em}
.lc2-tx{display:flex;flex-direction:column;gap:5px;min-width:0}
.lc2-cat{font-size:.62rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-ink)}
.lc2-tx b{font-family:var(--display);font-size:1rem;line-height:1.3;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lc2-arrow{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--rule);color:var(--primary);transition:background .3s,border-color .3s,color .3s}
.lc2-item a:hover .lc2-arrow{background:var(--primary);border-color:var(--primary);color:#fff}
.lc2-topics{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:26px;padding-top:22px;border-top:1px solid #EDF2F8}
.lc2-topics-k{margin-right:6px;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lc2-topics a{display:inline-flex;align-items:center;gap:8px;padding:7px 8px 7px 14px;border-radius:99px;border:1px solid var(--rule);background:#fff;color:var(--body);font-size:.82rem;font-weight:700;text-decoration:none;transition:border-color .2s,color .2s,transform .2s var(--ease-spring)}
.lc2-topics a em{font-style:normal;font-size:.66rem;font-weight:800;color:var(--primary);background:#EDF2F8;border-radius:99px;padding:2px 8px}
.lc2-topics a:hover{border-color:var(--accent);color:var(--accent-dark);transform:translateY(-2px)}
@media (max-width:960px){
 .lc2-head{grid-template-columns:1fr}
 .lc2-head-r{align-items:flex-start;text-align:left}
 .lc2-grid{grid-template-columns:1fr}
 .lc2-list{grid-template-rows:none}
}
@media (max-width:560px){
 .lc2-item a{grid-template-columns:112px minmax(0,1fr);gap:14px;padding:10px}
 .lc2-thumb{width:112px}
 .lc2-arrow{display:none}
 .lc2-body{padding:18px 18px 20px}
 .lc2-feat a{border-radius:20px}
}

/* ---------- 7. "Factory-direct since 2004" (v204) ---------- */
.ss-seo3{position:relative;isolation:isolate;overflow:clip;background:linear-gradient(180deg,#F6F9FC,#FFFFFF 62%);padding-block:clamp(60px,7vw,100px)}
.ss-seo3::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(760px 420px at 100% 0%,rgba(240,115,0,.08),transparent 60%),radial-gradient(820px 460px at 0% 100%,rgba(0,66,128,.08),transparent 62%)}
.ss-seo3::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(rgba(0,66,128,.13) 1px,transparent 1.3px);background-size:22px 22px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 48%);mask-image:linear-gradient(180deg,#000,transparent 48%)}
.ss-seo3 .wrap{position:relative}
.seo3-year{position:absolute;right:-6px;top:-46px;z-index:-1;font-family:var(--display);font-weight:800;font-size:clamp(6rem,15vw,12.5rem);line-height:1;letter-spacing:-.045em;color:transparent;-webkit-text-stroke:1.5px rgba(0,66,128,.11);user-select:none;pointer-events:none}
.seo3-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:24px 56px;align-items:end}
.seo3-title h2{margin:0;font-size:clamp(1.8rem,3.1vw,2.65rem);line-height:1.1;letter-spacing:-.025em;max-width:21ch}
.seo3-intro p{margin:0;font-size:1rem;line-height:1.75;color:var(--body)}
.seo3-intro b{color:var(--ink)}
.seo3-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.seo3-proof{list-style:none;margin:40px 0 34px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;border:1px solid var(--rule);border-radius:22px;background:rgba(255,255,255,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 24px 46px -34px rgba(0,66,128,.4)}
.seo3-proof li{position:relative;display:flex;flex-direction:column;gap:5px;padding:22px 26px}
.seo3-proof li+li::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:var(--rule)}
.seo3-proof b{font-family:var(--display);font-weight:800;font-size:clamp(1.55rem,2.4vw,2.05rem);line-height:1.05;letter-spacing:-.025em;background:linear-gradient(135deg,#001D3D,#0B57A0);-webkit-background-clip:text;background-clip:text;color:transparent}
.seo3-proof li:nth-child(2) b{background-image:var(--grad-molten)}
.seo3-proof span{font-size:.8rem;line-height:1.4;color:var(--muted)}
.seo3-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.seo3-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px;padding:26px 24px 28px;background:#fff;border:1px solid var(--rule);border-radius:24px;box-shadow:0 1px 2px rgba(0,29,61,.04);transition:transform .35s var(--ease-out),box-shadow .35s,border-color .35s}
.seo3-card::before{content:"";position:absolute;left:24px;right:24px;top:0;height:3px;border-radius:0 0 3px 3px;background:var(--grad-molten);transform:scaleX(.18);transform-origin:left;transition:transform .45s var(--ease-out)}
.seo3-card::after{content:"";position:absolute;right:-60px;bottom:-60px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(0,66,128,.06),transparent 70%);pointer-events:none}
.seo3-card:hover{transform:translateY(-6px);border-color:#C5D3E4;box-shadow:0 32px 54px -32px rgba(0,66,128,.48)}
.seo3-card:hover::before{transform:scaleX(1)}
.seo3-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.seo3-ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--grad-navy);color:#fff;box-shadow:0 12px 22px -12px rgba(0,66,128,.75)}
.seo3-card:hover .seo3-ic{background:var(--grad-molten);box-shadow:0 12px 22px -12px rgba(240,115,0,.75)}
.seo3-n{font-family:var(--display);font-weight:800;font-size:1.7rem;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px #B9C9DC}
.seo3-card h3{margin:0;font-size:1.06rem;line-height:1.3;letter-spacing:-.012em;color:var(--ink)}
.seo3-card p{margin:0;font-size:.86rem;line-height:1.7;color:var(--muted)}
@media (max-width:1060px){.seo3-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
 .seo3-head{grid-template-columns:1fr;gap:14px}
 .seo3-proof{grid-template-columns:repeat(2,minmax(0,1fr))}
 .seo3-proof li:nth-child(3)::before{display:none}
 .seo3-proof li:nth-child(n+3){border-top:1px solid var(--rule)}
}
@media (max-width:560px){
 .seo3-grid{grid-template-columns:1fr}
 .seo3-proof li{padding:16px 16px 18px}
 .seo3-year{font-size:5.6rem;top:-14px}
 .seo3-cta .btn{flex:1 1 100%}
}

/* ---------- 8. 3D Designer section: "Popular builds" are plain product links (v204) ---------- */
.s3d-presets a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border:2px solid var(--rule);border-radius:var(--r);background:#fff;color:var(--body);font-size:.86rem;font-weight:700;text-align:left;text-decoration:none;transition:border-color .15s,background .15s,transform .2s var(--ease-out)}
.s3d-presets a small{display:block;font-size:.72rem;font-weight:600;color:var(--muted)}
.s3d-presets a em{font-family:var(--display);font-style:normal;font-weight:800;white-space:nowrap;color:var(--primary)}
.s3d-presets a:hover{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-1px)}

/* v213 - 3D Designer section back to full size: 17-color strip + taller preview */
.s3d-colors{display:flex;flex-wrap:wrap;gap:7px;align-items:center;text-decoration:none}
.s3d-colors i{width:24px;height:24px;border-radius:99px;border:2px solid rgba(0,0,0,.14);transition:transform .15s}
.s3d-colors:hover i{transform:scale(1.08)}
.s3d-colors span{flex-basis:100%;margin-top:6px;font-size:.76rem;font-weight:600;color:var(--muted)}
.s3d-colors:hover span{color:var(--accent-dark)}
@media(min-width:901px){.s3d-home .s3d-showcase{min-height:460px}}

/* ==========================================================================
   Hero photo on the right (replaced the animated building designer, 7 Oct 2026)
   Desktop: the whole photo at its own shape (no crop), full width of the right
   column, so it runs from the badge down to the stats row. The photo has the
   building in its upper half, so it is in view the moment the page opens.
   Phone / tablet: a 4:3 card under the text with room above and below.
   ========================================================================== */
.hero7 .h7media{margin:0;position:relative;isolation:isolate;width:100%;border-radius:var(--r-xl);overflow:hidden;background:#0b1f3a;border:1px solid rgba(255,255,255,.14);box-shadow:0 34px 70px -30px rgba(0,8,20,.85),0 12px 28px -18px rgba(0,8,20,.6)}
.hero7 .h7media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%;display:block;transform-origin:50% 45%;animation:h7kb 1.8s cubic-bezier(.2,.7,.2,1)}
.hero7 .h7media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(6,18,38,.38),rgba(6,18,38,0) 26%)}
.hero7 .h7media::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.2);pointer-events:none}
.hero7 .h7chip{position:absolute;z-index:3;top:16px;left:16px;display:flex;align-items:center;gap:10px;padding:9px 14px 9px 9px;border-radius:14px;background:rgba(8,24,48,.5);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);color:#fff;box-shadow:0 10px 26px -12px rgba(0,0,0,.6);animation:chipfloat 5s ease-in-out 1.6s infinite}
.hero7 .h7chip-ic{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:var(--grad-molten);box-shadow:0 4px 12px rgba(240,115,0,.45);flex:none}
.hero7 .h7chip b{display:block;font-family:var(--display);font-weight:800;font-size:.92rem;line-height:1.15;letter-spacing:-.01em;color:#fff}
.hero7 .h7chip small{display:block;font-size:.72rem;color:#c9d6e8;line-height:1.3}
@keyframes h7kb{from{transform:scale(1.07)}to{transform:none}}
@media (hover:hover){.hero7 .h7media img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}.hero7 .h7media:hover img{transform:scale(1.025)}}
@media (prefers-reduced-motion:reduce){.hero7 .h7media img,.hero7 .h7chip{animation:none}}
@media (min-width:961px){
 .hero7 .h7grid{padding-top:clamp(28px,4vw,56px)}
 .hero7 .h7media{align-self:center}
 .hero7 .h7media img{position:static;height:auto}
}
@media (max-width:960px){
 .hero7 .h7grid{row-gap:30px;padding-bottom:40px}
 .hero7 .h7media{aspect-ratio:4/3;max-width:640px;margin-inline:auto;border-radius:20px}
 .hero7 .h7media img{object-position:50% 34%}
 .hero7 .h7chip{top:12px;left:12px;padding:7px 12px 7px 7px;gap:8px;border-radius:12px}
 .hero7 .h7chip-ic{width:28px;height:28px;border-radius:8px}
 .hero7 .h7chip-ic svg{width:16px;height:16px}
 .hero7 .h7chip b{font-size:.82rem}
 .hero7 .h7chip small{font-size:.66rem}
}
@media (max-width:760px){
 .hero7 .h7grid{row-gap:28px;padding-bottom:36px}
 .hero7 .h7media{border-radius:18px;box-shadow:0 22px 44px -24px rgba(0,8,20,.9)}
}

/* ---------- v255 Building Finder: real product matches ---------- */
.fq-rhead{display:flex;flex-direction:column;align-items:center}
.fq-rsum:empty,.fq-res:empty{display:none}
.fq-more[hidden]{display:none}
.fq.has-res .fq-reco{text-align:left;padding:28px 30px 26px}
.fq.has-res .fq-rhead{flex-direction:row;align-items:center;gap:16px;margin-bottom:14px}
.fq.has-res .fq-rhead .fq-reco-ic{width:50px;height:50px;margin:0;flex:none;box-shadow:0 0 0 6px rgba(240,115,0,.12),0 14px 24px -12px rgba(240,115,0,.55)}
.fq.has-res .fq-rhead .eyebrow{justify-content:flex-start;margin:0 0 4px}
.fq.has-res .fq-rhead-tx{min-width:0}
.fq-rsum{margin:6px 0 0;font-size:.86rem;line-height:1.5;color:var(--muted);max-width:62ch}
.fq.has-res .fq-name{display:none}
.fq.has-res .fq-chips{justify-content:flex-start;margin:0 0 16px}
.fq-res{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fq-card{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--rule);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 1px 2px rgba(0,29,61,.04);transition:border-color .2s,box-shadow .25s,transform .25s var(--ease-out);animation:ssFqCard .45s var(--ease-out) both}
.fq-card:hover{border-color:#A9BCD6;transform:translateY(-3px);box-shadow:0 18px 30px -20px rgba(0,66,128,.45)}
.fq-card:focus-visible{outline:3px solid rgba(240,115,0,.38);outline-offset:2px}
.fq-card-img{position:relative;display:block;aspect-ratio:4/3;background:#EDF2F8;overflow:hidden}
.fq-card-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)}
.fq-card:hover .fq-card-img img{transform:scale(1.04)}
.fq-badge{position:absolute;left:10px;top:10px;padding:4px 9px;border-radius:99px;font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;line-height:1.3;background:rgba(255,255,255,.95);color:var(--primary);box-shadow:0 4px 12px -4px rgba(0,29,61,.4)}
.fq-card.is-exact .fq-badge{background:var(--grad-molten);color:#fff}
.fq-card-body{flex:1;display:flex;flex-direction:column;gap:4px;padding:12px 14px 14px;min-width:0}
.fq-card-name{font-family:var(--display);font-size:.92rem;line-height:1.3;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fq-card-meta{font-size:.74rem;color:var(--muted)}
.fq-card-why{font-size:.72rem;font-weight:700;color:#b45309}
.fq-card-foot{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:auto;padding-top:8px}
.fq-card-price{font-family:var(--display);font-weight:800;font-size:1.02rem;color:var(--primary);white-space:nowrap}
.fq-card-price small{font-weight:600;font-size:.68rem;color:var(--muted);margin-right:2px}
.fq-card-go{font-size:.76rem;font-weight:800;color:var(--accent);white-space:nowrap}
.fq-card.is-skel{pointer-events:none;animation:none;box-shadow:none}
.fq-card.is-skel .fq-card-img,.fq-card.is-skel i{background:linear-gradient(90deg,#EDF2F8 25%,#F7FAFD 50%,#EDF2F8 75%);background-size:200% 100%;animation:ssFqSk 1.2s linear infinite}
.fq-card.is-skel i{display:block;height:10px;border-radius:6px}
.fq-card.is-skel i:nth-child(1){width:88%}
.fq-card.is-skel i:nth-child(2){width:62%}
.fq-card.is-skel i:nth-child(3){width:40%;height:14px;margin-top:8px}
.fq-res .fq-card:nth-child(6n+2){animation-delay:.05s}
.fq-res .fq-card:nth-child(6n+3){animation-delay:.1s}
.fq-res .fq-card:nth-child(6n+4){animation-delay:.15s}
.fq-res .fq-card:nth-child(6n+5){animation-delay:.2s}
.fq-res .fq-card:nth-child(6n){animation-delay:.25s}
@keyframes ssFqCard{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ssFqSk{to{background-position:-200% 0}}
.fq-more-wrap{display:flex;justify-content:center;margin-top:16px}
.fq-more-wrap:has(.fq-more[hidden]){display:none}
.fq.has-res .fq-reco-acts{justify-content:flex-start;margin-top:18px;padding-top:18px;border-top:1px dashed var(--rule)}
.fq.has-res .fq-note{text-align:left}
.fq.is-loading .fq-reco-acts,.fq.is-loading .fq-restart{visibility:hidden}
@media (max-width:1180px){.fq-res{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.fq.has-res .fq-reco{padding:22px 18px 20px}}
@media (max-width:540px){
 .fq-res{grid-template-columns:minmax(0,1fr);gap:10px}
 .fq-card{flex-direction:row}
 .fq-card-img{flex:none;width:118px;aspect-ratio:auto;min-height:118px}
 .fq-badge{left:6px;top:6px;padding:3px 7px;font-size:.56rem}
 .fq-card-body{padding:10px 12px}
 .fq.has-res .fq-rhead .fq-reco-ic{width:42px;height:42px}
 .fq.has-res .fq-reco-acts .btn{flex:1 1 100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.fq-card{animation:none}.fq-card.is-skel .fq-card-img,.fq-card.is-skel i{animation:none}}

/* ---------- v256 Building Finder: width x length pickers ---------- */
.fq-dims{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:12px}
.fq-dim{display:flex;flex-direction:column;gap:8px;min-width:0;margin:0}
.fq-dim-k{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-weight:800;font-size:.86rem;color:var(--ink)}
.fq-dim-k svg{color:var(--accent)}
.fq-sel{position:relative;display:block}
.fq-sel::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;border-right:2px solid var(--primary);border-bottom:2px solid var(--primary);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.fq-sel select{-webkit-appearance:none;appearance:none;width:100%;height:56px;margin:0;padding:0 44px 0 16px;border:1.5px solid var(--rule);border-radius:14px;background:#fff;font:inherit;font-family:var(--display);font-weight:700;font-size:1rem;color:var(--ink);cursor:pointer;box-shadow:0 1px 2px rgba(0,29,61,.04);transition:border-color .2s,box-shadow .2s}
.fq-sel select:hover{border-color:#A9BCD6}
.fq-sel select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(240,115,0,.12)}
.fq-dim-x{padding-bottom:15px;font-size:1.35rem;font-weight:800;line-height:1;color:var(--muted)}
.fq2 .fq-pane>p.fq-dim-out{margin:16px 0 0;padding:12px 14px;border-radius:12px;background:#F4F7FB;border:1px solid #E6EDF5;font-size:.86rem;line-height:1.45;color:var(--muted)}
.fq-dim-out b{color:var(--primary)}
.fq2 .fq-pane-dims .fq-foot{justify-content:space-between}
@media (max-width:540px){
 .fq-dims{grid-template-columns:minmax(0,1fr);gap:14px}
 .fq-dim-x{display:none}
 .fq-sel select{height:52px}
}

/* v265: the keyword-led hero H1 is longer, so it runs a touch smaller to stay
   about four lines on desktop. */
.h7tx h1{font-size:clamp(2rem,4vw,3.1rem);text-wrap:balance}

/* v265: delivery / DIY kit / cold-formed note under "Shop by category" */
.ss-fulfil{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:22px;border:1px solid #F3D3AE;border-radius:18px;background:linear-gradient(180deg,#FFFBF6,#FFF3E6);overflow:hidden}
.ss-fulfil-i{display:flex;align-items:flex-start;gap:12px;min-width:0;padding:16px 20px;border-left:1px solid #F3D3AE}
.ss-fulfil-i:first-child{border-left:0}
.ss-fulfil-ic{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#fff;color:var(--accent,#f07300);box-shadow:0 1px 3px rgba(0,29,61,.08)}
.ss-fulfil-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.ss-fulfil-t b{font-family:var(--display,inherit);font-size:.95rem;line-height:1.3;color:var(--primary-dark,#001d3d)}
.ss-fulfil-t small{font-size:.82rem;line-height:1.5;color:#6B4A22}
.ss-fulfil-t a{align-self:flex-start;margin-top:4px;font-size:.82rem;font-weight:800;color:var(--accent-dark,#c45f00);text-decoration:none}
.ss-fulfil-t a:hover{color:var(--accent,#f07300);text-decoration:underline}
@media (max-width:860px){
 .ss-fulfil{grid-template-columns:minmax(0,1fr)}
 .ss-fulfil-i{border-left:0;border-top:1px solid #F3D3AE;padding:14px 16px}
 .ss-fulfil-i:first-child{border-top:0}
}