/* ==================================================================
   Shipping Containers Kansas City — brand system
   Palette from logo: deep navy / signal red / white
   Type: Poppins (display + UI) with system fallback
   Header: fixed; collapses to a compact bar with inline lead form on scroll
   ================================================================== */
:root{
  --navy:#0b2545; --navy-2:#13315c; --navy-deep:#071a33;
  --red:#c0182b; --red-dk:#9a1222; --red-lt:#e0313f;
  --bg:#f5f7fa; --bg-2:#eef2f6; --card:#ffffff; --ink:#152238; --muted:#5b6777;
  --line:#dfe5ec; --ok:#1f7a3a;
  --maxw:1200px;
  --font:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --hdr-h:128px; --sticky-h:78px; --mob-hdr:68px; --mob-bar:64px;
  --shadow:0 12px 40px rgba(7,26,51,.14); --shadow-sm:0 4px 16px rgba(7,26,51,.10);
  --r:10px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; color:var(--ink); background:#fff; font:16px/1.7 var(--font); padding-top:var(--hdr-h)}
h1,h2,h3,h4{font-family:var(--font); line-height:1.15; color:var(--navy); margin:0 0 .5em; font-weight:700}
h1{font-size:2.6rem; letter-spacing:-.5px; font-weight:800}
h2{font-size:1.85rem; letter-spacing:-.3px}
h2::after{content:""; display:block; width:52px; height:4px; background:var(--red); border-radius:2px; margin-top:12px}
h3{font-size:1.15rem}
p{margin:0 0 1em}
a{color:var(--red)}
a:hover{color:var(--red-dk)}
img{max-width:100%; height:auto; display:block}
ul{margin:0 0 1em; padding-left:1.2em}
li{margin-bottom:.45em}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.ic{width:18px; height:18px; fill:currentColor; flex:0 0 auto}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
:focus-visible{outline:3px solid var(--red-lt); outline-offset:2px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; background:var(--red); color:#fff;
  text-decoration:none; font-family:var(--font); font-weight:700; text-transform:uppercase; letter-spacing:.8px;
  font-size:.82rem; line-height:1.1; padding:0 22px; height:48px; border:2px solid transparent; border-radius:6px;
  cursor:pointer; text-align:center; transition:background .15s, color .15s, transform .12s, box-shadow .15s;
  box-shadow:0 6px 18px rgba(192,24,43,.22)}
.btn .ic{width:16px; height:16px}
.btn:hover{background:var(--red-dk); color:#fff; transform:translateY(-1px)}
.btn-red{background:var(--red)}
.btn-navy{background:var(--navy); box-shadow:0 6px 18px rgba(11,37,69,.22)}
.btn-navy:hover{background:var(--navy-2)}
.btn-white{background:#fff; color:var(--navy); box-shadow:0 6px 18px rgba(0,0,0,.18)}
.btn-white:hover{background:var(--bg-2); color:var(--navy)}
.btn-ghost{background:transparent; color:var(--navy); border-color:var(--navy); box-shadow:none}
.btn-ghost:hover{background:var(--navy); color:#fff}
.btn-lg{height:54px; padding:0 28px; font-size:.88rem}
.cta-row{display:flex; flex-wrap:wrap; gap:14px; margin:26px 0}

/* ---------- Header (fixed, transforms on scroll) ---------- */
header .hdr{position:fixed; top:0; left:0; right:0; z-index:100}
.topbar{background:var(--red); color:#fff; height:40px; font-size:.74rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.7px; transition:transform .35s ease, opacity .25s ease}
.topbar-in{display:flex; justify-content:space-between; align-items:center; height:40px}
.util{display:flex; gap:24px}
.util a{color:#fff; text-decoration:none; opacity:.95}
.util a:hover{opacity:1; text-decoration:underline}
.util-right{display:flex; align-items:center; height:40px}
.util-call{display:inline-flex; align-items:center; gap:7px; color:#fff; text-decoration:none; margin-right:20px}
.util-call .ic{width:15px; height:15px}
.util-call b{font-size:.86rem; letter-spacing:.3px}
.util-cta{display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 20px; background:var(--navy);
  color:#fff; text-decoration:none}
.util-cta:hover{background:var(--navy-deep); color:#fff}
.util-cta .ic{width:15px; height:15px}
.mainbar{background:#fff; height:88px; box-shadow:0 2px 14px rgba(7,26,51,.08); transition:transform .35s ease, opacity .25s ease}
.mainbar-in{display:flex; align-items:center; justify-content:space-between; gap:24px; height:88px}
.brand{display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:var(--navy)}
.brand img{height:74px; width:auto}
.brand-text{display:flex; flex-direction:column; line-height:1.05}
.brand-text b{font-weight:800; font-size:1.05rem; letter-spacing:-.2px; text-transform:uppercase}
.brand-text em{font-style:normal; font-weight:700; color:var(--red); font-size:.78rem; letter-spacing:2.2px; text-transform:uppercase}
.brand-text small{font-weight:600; font-size:.62rem; letter-spacing:1.6px; text-transform:uppercase; color:var(--muted); margin-top:3px}
nav.main{display:flex; align-items:center; gap:4px}
nav.main > .has-drop > a{display:flex; align-items:center; gap:5px; padding:10px 14px; color:var(--navy);
  text-decoration:none; font-weight:600; font-size:.98rem; border-radius:6px}
nav.main > .has-drop > a .chev{width:14px; height:14px; transition:transform .2s}
nav.main > .has-drop:hover > a, nav.main > .has-drop:focus-within > a{color:var(--red)}
nav.main > .has-drop:hover > a .chev{transform:rotate(180deg)}
.has-drop{position:relative}
.has-drop::after{content:""; position:absolute; top:100%; left:0; width:100%; height:14px}
.drop{position:absolute; top:calc(100% + 10px); left:0; background:#fff; border-radius:8px; border-top:4px solid var(--red);
  min-width:270px; padding:8px; display:none; box-shadow:0 18px 44px rgba(7,26,51,.18); animation:fade .18s ease}
.has-drop:hover .drop,.has-drop:focus-within .drop{display:block}
.drop a{display:block; padding:10px 14px; white-space:nowrap; color:var(--ink); text-decoration:none; font-weight:500;
  font-size:.94rem; border-radius:6px}
.drop a:hover{background:var(--bg); color:var(--red)}
.mainbar-call{display:none}
.icon-btn{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:0;
  border-radius:8px; background:var(--navy); color:#fff; cursor:pointer; padding:0}
.icon-btn .ic{width:22px; height:22px}
.icon-btn:hover{background:var(--navy-2)}
.menu-toggle{display:none}

/* compact bar (desktop, after scroll) */
.stickybar{position:absolute; top:0; left:0; right:0; background:#fff; border-bottom:3px solid var(--red);
  box-shadow:0 8px 24px rgba(7,26,51,.16); transform:translateY(-110%); visibility:hidden;
  transition:transform .38s cubic-bezier(.2,.8,.2,1), visibility 0s linear .38s}
.stickybar-in{display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:22px;
  max-width:1400px; margin:0 auto; padding:0 20px; min-height:var(--sticky-h)}
.brand-sm img{height:52px}
.brand-sm .brand-text{display:none}
.stickybar .menu-toggle{display:inline-flex}
.sticky-mid{min-width:0}
.sticky-promo{margin:6px 0 2px; font-size:.74rem; font-weight:700; color:var(--red); text-transform:uppercase;
  letter-spacing:.6px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sticky-call{display:flex; flex-direction:column; align-items:flex-start; line-height:1.1; text-decoration:none;
  color:var(--navy); white-space:nowrap}
.sticky-call span{font-size:.64rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--muted)}
.sticky-call b{font-size:1.05rem; font-weight:800}
.sticky-call:hover b{color:var(--red)}
body.scrolled .stickybar{transform:none; visibility:visible; transition:transform .38s cubic-bezier(.2,.8,.2,1), visibility 0s}
body.scrolled .topbar, body.scrolled .mainbar{transform:translateY(-100%); opacity:0; pointer-events:none}

/* inline quote form (compact bar) */
.quote-inline{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 8px; padding:0}
.quote-inline input{height:40px; border:1.5px solid var(--line); border-radius:5px; padding:0 11px;
  font:inherit; font-size:.8rem; color:var(--ink); background:#fff; min-width:0; flex:1 1 105px; margin:0}
.quote-inline input::placeholder{color:#7d8794}
.quote-inline input:focus{outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(11,37,69,.12)}
/* pill selectors replace dropdowns in the compact bar */
form.quote.quote-inline .opt-inline{flex:0 0 auto; display:inline-flex; align-items:center; gap:0; margin:0; height:40px;
  border:1.5px solid var(--line); border-radius:5px; overflow:hidden; background:#fff}
.opt-inline-label{font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--muted);
  padding:0 9px 0 11px; border-right:1.5px solid var(--line); height:100%; display:flex; align-items:center; background:var(--bg)}
form.quote.quote-inline .opt-inline label{flex:0 0 auto; min-width:0; height:100%; display:flex; align-items:center; padding:0 11px;
  border:0; border-right:1.5px solid var(--line); border-radius:0; font-size:.78rem; font-weight:600; color:var(--navy); background:#fff; margin:0}
form.quote.quote-inline .opt-inline label:last-child{border-right:0}
form.quote.quote-inline .opt-inline label:hover{background:var(--bg)}
form.quote.quote-inline .opt-inline input:checked + label{background:var(--navy); color:#fff}
form.quote.quote-inline .opt-inline input:focus-visible + label{outline:3px solid var(--red-lt); outline-offset:-3px}
form.quote.quote-inline .btn{height:40px; padding:0 18px; font-size:.74rem; flex:0 0 auto; width:auto; margin:0; box-shadow:none}
.quote-inline .form-status{flex-basis:100%; margin:0; font-size:.82rem}
.quote-inline .form-status:empty{display:none}

/* ---------- Page hero band (interior pages) ---------- */
.page-hero{background:var(--navy) radial-gradient(ellipse at 80% 20%, rgba(255,255,255,.08), transparent 55%);
  color:#fff; padding:48px 0 44px; border-bottom:5px solid var(--red); position:relative; overflow:hidden}
.page-hero::after{content:""; position:absolute; right:-80px; bottom:-120px; width:420px; height:420px; border-radius:50%;
  border:56px solid rgba(255,255,255,.04)}
.page-hero .wrap{position:relative; max-width:920px; margin:0 auto}
.page-hero h1{color:#fff; margin-bottom:.45em}
.page-hero .lead{color:#d5deea; margin:0}
.page-hero .crumbs,.page-hero .crumbs a{color:#a9b8cc}
.page-hero .crumbs a:hover{color:#fff}

/* ---------- Page layout ---------- */
.page{position:relative; display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:52px; align-items:start;
  max-width:var(--maxw); margin:0 auto; padding:44px 20px 64px}
.page .main >:first-child{margin-top:0}
.lead{font-size:1.14rem; color:#3d4a5c; line-height:1.65}
.section{margin:40px 0}
.crumbs{font-size:.76rem; text-transform:uppercase; letter-spacing:1.2px; font-weight:600; color:var(--muted); margin-bottom:14px}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--red)}
.page > .quote-box{position:sticky; top:calc(var(--sticky-h) + 18px)}

/* ---------- Photos ---------- */
.photo{display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r); box-shadow:var(--shadow-sm); margin:0 0 28px}

/* ---------- Cards ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px; margin:24px 0}
.card{border:1px solid var(--line); border-radius:var(--r); padding:24px; background:var(--card); box-shadow:var(--shadow-sm);
  transition:transform .18s, box-shadow .18s}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.card h3{margin-bottom:.35em}
.card h3 a{color:var(--navy); text-decoration:none}
.card h3 a:hover{color:var(--red)}
.card p{margin:0; color:var(--muted); font-size:.95rem}
.badge{display:inline-block; background:var(--bg-2); color:var(--red); font-size:.66rem; font-weight:700; letter-spacing:1.2px;
  text-transform:uppercase; padding:5px 10px; border-radius:20px; margin-bottom:12px}
.card-ic{width:52px; height:52px; border-radius:12px; background:var(--navy); color:#fff; display:grid; place-items:center; margin-bottom:16px}
.card-ic .ic{width:24px; height:24px}
.card-link{display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-weight:700; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.7px; color:var(--red); text-decoration:none}
.card-link .ic{width:14px; height:14px; transition:transform .15s}
.card-link:hover .ic{transform:translateX(3px)}

/* ---------- Lists ---------- */
.check{list-style:none; padding:0}
.check li{position:relative; padding-left:30px; margin-bottom:11px}
.check li::before{content:""; position:absolute; left:0; top:.32em; width:18px; height:18px; border-radius:50%; background:var(--red)}
.check li::after{content:""; position:absolute; left:6px; top:calc(.32em + 4px); width:5px; height:9px;
  border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg)}
.areas{list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:9px; columns:auto !important}
.areas li{margin:0; break-inside:auto}
.areas li a, .areas li{font-size:.9rem}
.areas a{display:inline-block; text-decoration:none; color:var(--navy); font-weight:600; border:1.5px solid var(--line);
  border-radius:6px; background:#fff; padding:7px 13px; transition:.15s}
.areas a:hover{background:var(--navy); border-color:var(--navy); color:#fff}
.areas small{color:var(--muted); font-weight:400}
.trust-row{display:flex; flex-wrap:wrap; gap:10px; margin:22px 0}
.trust-row span{font-weight:600; font-size:.88rem; background:var(--bg); color:var(--ink); border:1px solid var(--line);
  border-left:4px solid var(--red); padding:9px 14px; border-radius:6px}
.trust-row b{margin-right:4px}

/* ---------- FAQ ---------- */
.faq-item{background:var(--card); border:1px solid var(--line); border-left:5px solid var(--red); padding:16px 20px; margin:0 0 14px;
  border-radius:8px; box-shadow:var(--shadow-sm)}
.faq-item h3{margin-bottom:.4em; font-size:1.02rem}
.faq-item p{margin:0; color:#3d4a5c; font-size:.97rem}

/* ---------- Quote box ---------- */
.quote-box{width:100%; border-radius:var(--r); overflow:hidden; background:var(--card); box-shadow:var(--shadow); border-top:6px solid var(--red)}
.quote-head{text-align:center; padding:24px 22px 6px}
.quote-head > .ic{width:36px; height:36px; fill:var(--red); margin:0 auto 8px; display:block}
.quote-title{font-size:1.45rem; font-weight:800; color:var(--navy); margin:0; line-height:1.15; letter-spacing:-.2px}
.quote-title::after{display:none}
.quote-head span{display:block; font-size:.78rem; font-weight:600; letter-spacing:.6px; text-transform:uppercase; margin-top:6px; color:var(--muted)}
form.quote{padding:14px 22px 22px}
form.quote label{display:block; font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.9px; color:var(--navy); margin:0 0 6px}
form.quote input,form.quote textarea{width:100%; height:46px; padding:0 13px; border:1.5px solid var(--line); border-radius:6px;
  font:inherit; font-size:.95rem; color:var(--ink); margin-bottom:11px; background:#fff}
form.quote textarea{height:auto; padding:11px 13px; resize:vertical; min-height:64px}
form.quote input:focus,form.quote textarea:focus{outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(11,37,69,.12)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.opt-label{display:block; font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.9px; color:var(--navy); margin:0 0 6px}
.opt-group{display:flex; flex-wrap:wrap; gap:7px; margin:0 0 12px}
form.quote .opt-group input{position:absolute; opacity:0; width:1px; height:1px; margin:0; padding:0; pointer-events:none}
.opt-group label{flex:1 1 auto; min-width:58px; text-align:center; padding:10px 10px; border:1.5px solid var(--line); border-radius:6px;
  font-weight:600; font-size:.86rem; color:var(--navy); cursor:pointer; background:#fff; margin:0; user-select:none;
  text-transform:none; letter-spacing:0; transition:background .12s, border-color .12s, color .12s}
.opt-group label:hover{border-color:var(--navy)}
.opt-group input:checked + label{background:var(--navy); border-color:var(--navy); color:#fff}
.opt-group input:focus-visible + label{outline:3px solid var(--red-lt); outline-offset:2px}
.field-note{margin:-6px 0 10px; font-size:.76rem; color:var(--muted)}
.opt-tag{color:var(--muted); font-weight:500; text-transform:none; letter-spacing:0}
form.quote .btn{width:100%; margin-top:4px}
.form-note{margin:12px 0 0; font-size:.78rem; color:var(--muted); text-align:center}
.form-status{margin:12px 0 0; font-weight:600; font-size:.95rem}
.form-status:empty{margin:0}
.form-status.ok{color:var(--ok)} .form-status.err{color:var(--red)}
.hp{position:absolute; left:-9999px}
.req{color:var(--red)}
/* red variant (hero + modal) */
.quote-red{background:var(--red); color:#fff; border-top:0}
.quote-red .quote-head > .ic{fill:#fff}
.quote-red .quote-title{color:#fff}
.quote-red .quote-head span,.quote-red .field-note,.quote-red .form-note,.quote-red .opt-tag{color:rgba(255,255,255,.82)}
.quote-red form.quote label,.quote-red .opt-label,.quote-red .req{color:#fff}
.quote-red form.quote input,.quote-red form.quote textarea{border-color:#fff}
.quote-red form.quote input:focus,.quote-red form.quote textarea:focus{box-shadow:0 0 0 3px rgba(255,255,255,.35); border-color:#fff}
.quote-red form.quote .opt-group label{background:#fff; border-color:#fff; color:var(--navy)}
.quote-red form.quote .opt-group label:hover{border-color:var(--navy)}
.quote-red form.quote .opt-group input:checked + label{background:var(--navy); border-color:var(--navy); color:#fff}
.quote-red .btn{background:var(--navy); box-shadow:0 8px 20px rgba(0,0,0,.25)}
.quote-red .btn:hover{background:var(--navy-deep)}
.quote-red .form-status.ok,.quote-red .form-status.err{color:#fff}
.quote-mobile-cta{display:none}

/* ---------- Modal ---------- */
.modal{position:fixed; inset:0; z-index:210; display:none; align-items:center; justify-content:center; padding:18px}
.modal.open{display:flex}
.modal-bg{position:absolute; inset:0; background:rgba(7,26,51,.72); animation:fade .2s ease}
.modal-card{position:relative; width:min(540px,100%); max-height:calc(100vh - 36px); max-height:calc(100dvh - 36px); overflow-y:auto;
  animation:pop .25s cubic-bezier(.2,.8,.2,1)}
.modal-card .quote-head{padding-top:34px}
.modal-x{position:absolute; top:12px; right:12px; z-index:2; width:40px; height:40px; border-radius:50%; background:#fff; color:var(--red)}
.modal-x:hover{background:var(--bg-2)}
@keyframes pop{from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none}}
@keyframes fade{from{opacity:0} to{opacity:1}}

/* ---------- Drawer ---------- */
.drawer{position:fixed; inset:0; z-index:200; visibility:hidden; transition:visibility 0s linear .38s}
.drawer.open{visibility:visible; transition:visibility 0s}
.drawer-bg{position:absolute; inset:0; background:rgba(7,26,51,.62); opacity:0; transition:opacity .3s}
.drawer.open .drawer-bg{opacity:1}
.drawer-panel{position:absolute; top:0; right:0; bottom:0; width:min(420px,92vw); background:var(--navy); color:#fff;
  transform:translateX(100%); transition:transform .38s cubic-bezier(.2,.8,.2,1); overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:16px 22px 40px; display:flex; flex-direction:column; gap:14px}
.drawer.open .drawer-panel{transform:none}
.drawer-top{display:flex; justify-content:space-between; align-items:center}
.drawer-brand img{height:62px; width:auto; background:#fff; border-radius:8px; padding:3px}
.drawer .icon-btn{background:rgba(255,255,255,.12)}
.drawer .icon-btn:hover{background:rgba(255,255,255,.22)}
.drawer-cta{width:100%; flex:0 0 auto; min-height:48px}
.drawer-call{display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none; padding:12px 14px;
  border:1.5px solid rgba(255,255,255,.2); border-radius:8px}
.drawer-call .ic{width:24px; height:24px; color:var(--red-lt)}
.drawer-call span{display:flex; flex-direction:column; line-height:1.1; font-size:.66rem; text-transform:uppercase; letter-spacing:1px; font-weight:700; color:#a9b8cc}
.drawer-call b{font-size:1.15rem; color:#fff; letter-spacing:0; text-transform:none}
.drawer-nav{display:flex; flex-direction:column}
.acc-btn,.drawer-link{width:100%; display:flex; justify-content:space-between; align-items:center; background:none; border:0;
  border-bottom:1px solid rgba(255,255,255,.12); color:#fff; font:inherit; font-weight:600; font-size:1.02rem; padding:14px 0;
  cursor:pointer; text-align:left; text-decoration:none}
.acc-btn .chev{width:18px; height:18px; transition:transform .2s; color:#a9b8cc}
.acc-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.acc-panel{display:none; flex-direction:column; padding:4px 0 10px 14px; border-bottom:1px solid rgba(255,255,255,.12)}
.acc-btn[aria-expanded="true"] + .acc-panel{display:flex}
.acc-panel a{color:#c9d3e3; text-decoration:none; padding:9px 0; font-size:.95rem}
.acc-panel a:hover{color:#fff}
.drawer-foot{margin-top:auto; padding-top:20px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.drawer-foot span{font-size:.72rem; text-transform:uppercase; letter-spacing:1.2px; font-weight:700; color:#a9b8cc}
.drawer .social-link{background:rgba(255,255,255,.12)}
.drawer .social-link:hover{background:var(--red)}
body.no-scroll{overflow:hidden}

/* ---------- Social icons ---------- */
.social{display:flex; gap:10px; flex-wrap:wrap}
.social-link{width:42px; height:42px; border-radius:50%; background:var(--navy); color:#fff; display:grid; place-items:center;
  text-decoration:none; transition:background .15s, transform .15s}
.social-link svg{width:18px; height:18px; fill:currentColor}
.social-link:hover{background:var(--red); color:#fff; transform:translateY(-2px)}

/* ---------- Home: hero ---------- */
.hero{position:relative; color:#fff; background:var(--navy-deep); overflow:hidden; isolation:isolate}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:-2}
.hero::before{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(7,26,51,.94) 0%, rgba(7,26,51,.82) 42%, rgba(7,26,51,.42) 100%)}
.hero-in{display:grid; grid-template-columns:minmax(0,1fr) 430px; gap:60px; align-items:center; max-width:var(--maxw); margin:0 auto; padding:64px 20px 72px}
.hero h1{color:#fff; font-size:3.05rem; line-height:1.08; margin-bottom:.5em}
.hero .lead{color:#d5deea; font-size:1.15rem; max-width:620px}
.hero-points{list-style:none; padding:0; margin:28px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:12px 20px}
.hero-points li{display:flex; gap:11px; align-items:flex-start; font-weight:600; font-size:.95rem; margin:0; line-height:1.4}
.tick{flex:0 0 26px; width:26px; height:26px; border-radius:50%; background:var(--red); color:#fff; display:grid; place-items:center; margin-top:1px}
.tick .ic{width:14px; height:14px}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px}
.hero .quote-box{box-shadow:0 30px 70px rgba(0,0,0,.45)}
.hero .quote-head{padding-top:28px}
.eyebrow{display:inline-block; font-size:.74rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--red-lt); margin-bottom:14px}
.hero .eyebrow{color:#ff8d98}

/* ---------- Home: generic section helpers ---------- */
.sec{padding:80px 0}
.sec-alt{background:var(--bg)}
.sec-head{text-align:center; max-width:760px; margin:0 auto 44px}
.sec-head h2::after{margin-left:auto; margin-right:auto}
.sec-head p{color:var(--muted); font-size:1.05rem; margin:0}
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.split img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px; box-shadow:0 24px 60px rgba(7,26,51,.18)}
.split.rev > img{order:2}
.split-media{position:relative}
.split-media::before{content:""; position:absolute; inset:auto -18px -18px auto; width:60%; height:60%; border:6px solid var(--red); border-radius:14px; z-index:-1}
.split p:last-child{margin-bottom:0}

/* showcase tabs */
.show{display:grid; grid-template-columns:270px minmax(0,1fr); gap:0; border-radius:14px; overflow:hidden; box-shadow:var(--shadow); background:#fff}
.show-tabs{display:flex; flex-direction:column; background:#fff; border-right:1px solid var(--line)}
.tab{display:flex; align-items:center; gap:12px; padding:20px 20px; background:#fff; border:0; border-left:5px solid transparent;
  border-bottom:1px solid var(--line); font:inherit; font-weight:700; font-size:.86rem; text-transform:uppercase; letter-spacing:.6px;
  color:var(--navy); text-align:left; cursor:pointer; transition:.15s}
.tab .ic{width:20px; height:20px; color:var(--red)}
.tab:hover{background:var(--bg)}
.tab[aria-selected="true"]{background:var(--navy); color:#fff; border-left-color:var(--red)}
.tab[aria-selected="true"] .ic{color:#fff}
.show-panels{position:relative; min-height:520px}
.panel{display:none; position:relative; min-height:520px; height:100%}
.panel.active{display:block}
.panel > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.panel-card{position:absolute; left:32px; bottom:32px; max-width:470px; background:var(--red); color:#fff; padding:30px 32px; border-radius:10px;
  box-shadow:0 20px 50px rgba(0,0,0,.35)}
.panel-card h3{color:#fff; font-size:1.5rem; margin-bottom:.5em}
.panel-card h3 span{font-weight:400}
.panel-card p{color:#ffe1e4; font-size:.97rem; margin-bottom:1.2em}
.panel-card .btn{height:44px; font-size:.76rem; padding:0 18px; box-shadow:none}
.panel-card .btn-white{background:#fff; color:var(--red)}
.panel-card .btn-white:hover{background:var(--bg-2)}

/* process */
.process{display:grid; grid-template-columns:360px minmax(0,1fr); gap:64px; align-items:center}
.badge-logo{width:320px; height:320px; margin:0 auto; border-radius:50%; background:#fff; border:10px solid var(--red);
  box-shadow:0 24px 60px rgba(7,26,51,.18); display:grid; place-items:center; padding:24px}
.badge-logo img{width:100%; height:100%; object-fit:contain}
.steps{list-style:none; padding:0; margin:0; counter-reset:step}
.steps li{position:relative; padding-left:64px; margin:0 0 22px; counter-increment:step}
.steps li::before{content:counter(step); position:absolute; left:0; top:0; width:46px; height:46px; border-radius:50%; background:var(--red);
  color:#fff; font-weight:800; font-size:1.2rem; display:grid; place-items:center}
.steps li > strong{display:block; color:var(--navy); font-size:1.05rem; margin-bottom:2px}
.steps p{margin:0; color:#3d4a5c}

/* why band */
.why{position:relative; color:#fff; background:var(--navy); overflow:hidden; isolation:isolate}
.why-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.14; z-index:-1}
.why h2,.why h3{color:#fff}
.why-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start}
.why p{color:#d5deea}
.why p a{color:#fff; text-decoration-color:var(--red-lt); text-underline-offset:3px}
.why p a:hover{color:#ff8d98}
.why .check li::before{background:var(--red-lt)}
.why .check li{color:#fff}
.acc-light .acc-btn{border-bottom-color:rgba(255,255,255,.2); font-size:1.05rem}
.acc-light .acc-panel{border-bottom-color:rgba(255,255,255,.2); padding-left:0}
.acc-light .areas a{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#fff}
.acc-light .areas a:hover{background:#fff; color:var(--navy)}
.acc-light .acc-panel p{font-size:.92rem; margin:0 0 12px}
.acc-count{font-size:.72rem; font-weight:600; color:#a9b8cc; margin-left:auto; margin-right:12px; text-transform:uppercase; letter-spacing:.8px}

/* gallery */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.gallery figure{position:relative; margin:0; border-radius:12px; overflow:hidden; aspect-ratio:4/3; box-shadow:var(--shadow-sm)}
.gallery img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.gallery figure:hover img{transform:scale(1.06)}
.gallery figcaption{position:absolute; left:0; right:0; bottom:0; padding:38px 16px 14px; color:#fff; font-weight:600; font-size:.9rem;
  background:linear-gradient(to top, rgba(7,26,51,.9), transparent)}

/* CTA band */
.cta-band{background:var(--red) radial-gradient(ellipse at 15% 50%, rgba(255,255,255,.12), transparent 50%); color:#fff; text-align:center; padding:72px 0}
.cta-band h2{color:#fff}
.cta-band h2::after{background:#fff; margin-left:auto; margin-right:auto}
.cta-band p{color:#ffe1e4; font-size:1.1rem; max-width:680px; margin:0 auto 1.6em}
.cta-band .cta-row{justify-content:center; margin:0}
.cta-band .btn-white{color:var(--red)}
.cta-band .phone-big{display:inline-flex; align-items:center; gap:12px; color:#fff; text-decoration:none; font-size:2rem; font-weight:800; margin-bottom:22px}
.cta-band .phone-big .ic{width:30px; height:30px}

/* ---------- Calculator embed ---------- */
.calc-embed{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm); margin:0 0 24px; background:#fff}
.calc-embed iframe{display:block; width:100%; border:0}

/* ---------- Footer ---------- */
footer{margin-top:0; font-size:.94rem}
.foot-cta{background:#fff; border-top:1px solid var(--line)}
.foot-cta-in{display:flex; align-items:center; justify-content:space-between; gap:28px; padding:30px 20px; flex-wrap:wrap}
.foot-logo img{height:110px; width:auto}
.foot-call{display:flex; align-items:center; gap:14px; color:var(--navy); text-decoration:none}
.foot-call .ic{width:34px; height:34px; fill:var(--red)}
.foot-call span{display:flex; flex-direction:column; line-height:1.1}
.foot-call small{font-size:.68rem; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted)}
.foot-call b{font-size:1.55rem; font-weight:800}
.foot-call:hover b{color:var(--red)}
.foot{background:var(--bg); display:grid; grid-template-columns:repeat(4,1fr); gap:32px; padding:48px 20px 44px; max-width:none}
.foot > *{max-width:var(--maxw)}
@media (min-width:1240px){.foot{padding-left:calc((100% - var(--maxw)) / 2 + 20px); padding-right:calc((100% - var(--maxw)) / 2 + 20px)}}
.foot strong{color:var(--navy); display:block; margin-bottom:12px; font-size:.95rem; font-weight:800}
.foot-nav{display:flex; flex-direction:column; gap:9px; align-items:flex-start}
.foot-nav a{color:#3d4a5c; text-decoration:none; font-size:.92rem}
.foot-nav a:hover{color:var(--red)}
.foot-bottom{background:var(--navy-deep); color:#a9b8cc; padding:22px 0 26px; font-size:.8rem}
.foot-bottom-in{display:grid; grid-template-columns:auto 1fr; gap:8px 32px; align-items:center}
.foot-legal{display:flex; gap:22px}
.foot-legal a{color:#fff; text-decoration:none; text-transform:uppercase; letter-spacing:1px; font-weight:700; font-size:.72rem}
.foot-legal a:hover{color:var(--red-lt)}
.foot-bottom-in > span{text-align:right; text-transform:uppercase; letter-spacing:.6px; font-size:.72rem}
.foot-tag{grid-column:1 / -1; margin:6px 0 0; text-align:center; color:#7f91aa; font-size:.8rem}

/* ---------- Mobile bottom bar ---------- */
.mobile-bar{position:fixed; left:0; right:0; bottom:0; z-index:150; display:none; grid-template-columns:1fr 1fr 1fr;
  background:var(--red); color:#fff; height:var(--mob-bar); box-shadow:0 -4px 18px rgba(0,0,0,.25); padding-bottom:env(safe-area-inset-bottom)}
.mobile-bar a,.mobile-bar button{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:#fff;
  text-decoration:none; background:none; border:0; font:inherit; font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.9px; cursor:pointer}
.mobile-bar .ic{width:22px; height:22px}
.mobile-bar a + a,.mobile-bar button{border-left:1px solid rgba(255,255,255,.22)}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .hero-in{grid-template-columns:minmax(0,1fr) 400px; gap:40px}
  .hero h1{font-size:2.6rem}
  .stickybar-in{gap:14px}
  .sticky-promo{display:none}
  .opt-inline-label{display:none}
  .quote-inline input{flex-basis:90px}
}
@media (max-width:1023px){
  :root{--hdr-h:var(--mob-hdr)}
  body{padding-bottom:var(--mob-bar)}
  .topbar{display:none}
  .mainbar,.mainbar-in{height:var(--mob-hdr)}
  .brand img{height:52px}
  .brand-text b{font-size:.8rem}
  .brand-text em{font-size:.62rem; letter-spacing:1.6px}
  .brand-text small{display:none}
  nav.main{display:none}
  .menu-toggle{display:inline-flex}
  .mainbar-call{display:inline-flex; align-items:center; gap:8px; color:var(--navy); text-decoration:none; font-weight:800; margin-left:auto; margin-right:8px}
  .mainbar-call .ic{color:var(--red)}
  .stickybar{display:none}
  body.scrolled .topbar,body.scrolled .mainbar{transform:none; opacity:1; pointer-events:auto}
  body.scrolled .mainbar{box-shadow:0 6px 20px rgba(7,26,51,.16)}
  .mobile-bar{display:grid}
  .page{grid-template-columns:1fr; gap:36px}
  .page > .quote-box{position:static}
  .hero-in{grid-template-columns:1fr; gap:36px; padding:48px 20px 56px}
  .hero h1{font-size:2.35rem}
  .hero .quote-box{max-width:560px}
  .split,.process,.why-grid{grid-template-columns:1fr; gap:40px}
  .split.rev > img{order:0}
  .process{text-align:left}
  .badge-logo{width:260px; height:260px}
  .show{grid-template-columns:1fr}
  .show-tabs{flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line); -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .show-tabs::-webkit-scrollbar{display:none}
  .tab{flex:0 0 auto; border-left:0; border-bottom:4px solid transparent; padding:16px 18px; white-space:nowrap}
  .tab[aria-selected="true"]{border-bottom-color:var(--red); border-left:0}
  .show-panels,.panel{min-height:0}
  .panel > img{position:static; aspect-ratio:16/10; height:auto}
  .panel-card{position:static; max-width:none; border-radius:0}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .foot{grid-template-columns:1fr 1fr}
  .foot-cta-in{justify-content:center; text-align:center}
}
@media (max-width:760px){
  h1{font-size:2rem}
  h2{font-size:1.5rem}
  .sec{padding:56px 0}
  .hero h1{font-size:2rem}
  .hero-points{grid-template-columns:1fr}
  .hero .quote-box form,.hero .quote-box .form-note{display:none}
  .hero .quote-box .quote-head{padding-bottom:22px}
  .quote-mobile-cta{display:inline-flex; width:calc(100% - 44px); margin:0 22px 26px}
  .hero .quote-box{text-align:center}
  .mainbar-call span{display:none}
  .page-hero{padding:36px 0 32px}
  .cards{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr; gap:10px}
  .gallery figcaption{font-size:.78rem; padding:26px 10px 10px}
  .foot{grid-template-columns:1fr; gap:26px}
  .foot-bottom-in{grid-template-columns:1fr; text-align:center}
  .foot-bottom-in > span{text-align:center}
  .foot-legal{justify-content:center}
  .main .btn,.main .btn-lg{width:100%}
  .cta-row{flex-direction:column}
  .cta-band .phone-big{font-size:1.6rem}
  .two{grid-template-columns:1fr}
  .badge-logo{width:220px; height:220px; border-width:8px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important; animation:none !important; scroll-behavior:auto !important}
}