/* ========================================================================== Number Two Crew, LLC — site styles Brand system: concept 03 "The Ring" + System C (Navy & Lime), Montserrat ========================================================================== */ /* ---------- tokens ---------- */ :root{ --navy:#0D1B2A; --navy-800:#0A1621; --navy-900:#060F18; --navy-700:#132639; --navy-600:#1B3450; --green:#76B82A; --green-ink:#46711A; /* small text on light — clears 4.5:1 on white and stone */ --lime:#8DC63F; --lime-bright:#A5E04A; --white:#F5F5F5; --stone:#EFEDE7; --stone-2:#E3E0D8; --ink:#0D1B2A; --ink-60:rgba(13,27,42,.62); --ink-40:rgba(13,27,42,.42); --on-navy:rgba(245,245,245,.72); --on-navy-dim:rgba(245,245,245,.5); --line-dark:rgba(245,245,245,.12); --line-dark-2:rgba(245,245,245,.07); --line-light:rgba(13,27,42,.12); --red:#E5484D; --amber:#F5A524; --ff:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --maxw:1220px; --gutter:clamp(18px,4vw,40px); --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:32px; --shadow-1:0 2px 8px rgba(6,15,24,.08); --shadow-2:0 18px 44px rgba(6,15,24,.16); --shadow-3:0 34px 90px rgba(6,15,24,.34); --ease:cubic-bezier(.16,1,.3,1); --ease-out:cubic-bezier(.22,.61,.36,1); --sticky-h:64px; } /* Self-hosted variable Montserrat — one 37KB file for every weight. Preloaded in and set to font-display:block so text paints once, in the real font, with no swap and therefore no layout shift. */ @font-face{ font-family:'Montserrat'; font-style:normal; font-weight:400 900; font-display:block; src:url('/assets/fonts/montserrat-var.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- reset ---------- */ *,*::before,*::after{box-sizing:border-box} *{margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--sticky-h) + 16px)} body{ font-family:var(--ff);font-weight:400;font-size:17px;line-height:1.65; color:var(--ink);background:var(--white); -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; overflow-x:hidden; } @supports (overflow:clip){body{overflow-x:clip}} img,svg,video{display:block;max-width:100%} img{height:auto} a{color:inherit;text-decoration:none} button,input,textarea,select{font:inherit;color:inherit} button{background:none;border:0;cursor:pointer} ul,ol{list-style:none} :focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:4px} ::selection{background:var(--lime);color:var(--navy)} /* ---------- type ---------- */ h1,h2,h3,h4,h5{font-weight:800;line-height:1.05;letter-spacing:-.025em;text-wrap:balance} h1{font-size:clamp(38px,6.4vw,78px);font-weight:900} h2{font-size:clamp(30px,4.4vw,54px)} h3{font-size:clamp(21px,2.4vw,30px)} h4{font-size:clamp(17px,1.5vw,20px);letter-spacing:-.01em} p{text-wrap:pretty} .eyebrow{ font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--green-ink);display:inline-flex;align-items:center;gap:10px; } .sec--navy .eyebrow,.sec--navy-deep .eyebrow,.hero .eyebrow,.phero .eyebrow, .on-dark .eyebrow,.cta .eyebrow,.band .eyebrow{color:var(--lime)} .eyebrow::before{content:"";width:26px;height:2px;background:currentColor;flex:0 0 auto} .eyebrow--plain::before{display:none} .lead{font-size:clamp(17px,1.55vw,20.5px);line-height:1.62;color:var(--ink-60);max-width:64ch} .on-dark .lead,.sec--navy .lead,.sec--navy-deep .lead, .phero .lead,.hero .lead{color:var(--on-navy)} .tiny{font-size:13px;line-height:1.5} .mono-num{font-variant-numeric:tabular-nums} /* ---------- layout ---------- */ .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} .wrap--wide{max-width:1440px} .wrap--narrow{max-width:820px} .sec{padding-block:clamp(64px,8vw,124px);position:relative} .sec--tight{padding-block:clamp(46px,5vw,72px)} .sec--navy{background:var(--navy);color:var(--white)} .sec--navy-deep{background:var(--navy-900);color:var(--white)} .sec--stone{background:var(--stone)} .sec--white{background:var(--white)} .grid{display:grid;gap:clamp(16px,2vw,24px)} .g-2{grid-template-columns:repeat(2,minmax(0,1fr))} .g-3{grid-template-columns:repeat(3,minmax(0,1fr))} .g-4{grid-template-columns:repeat(4,minmax(0,1fr))} .split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center} .split>*{min-width:0} .grid>*{min-width:0} .stack-sm>*+*{margin-top:12px} .stack>*+*{margin-top:20px} .stack-lg>*+*{margin-top:34px} .center{text-align:center;margin-inline:auto} .center .lead{margin-inline:auto} /* ---------- buttons ---------- */ .btn{ --btn-bg:var(--lime);--btn-fg:var(--navy); position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:16px 26px;border-radius:100px;font-weight:700;font-size:16px;letter-spacing:-.01em; background:var(--btn-bg);color:var(--btn-fg);overflow:hidden;isolation:isolate; transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s; box-shadow:0 10px 26px rgba(118,184,42,.24); white-space:nowrap;max-width:100%;min-width:0; } .btn>span,.btn>b{min-width:0;overflow:hidden;text-overflow:ellipsis} .btn::after{ content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit; background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%); transform:translateX(-120%);transition:transform .8s var(--ease); } .btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(118,184,42,.34)} .btn:hover::after{transform:translateX(120%)} .btn:active{transform:translateY(0)} .btn--lg{padding:19px 32px;font-size:17px} .btn--hero{padding:21px 34px;font-size:clamp(17px,1.6vw,19.5px);font-weight:800} .btn--phone{--btn-bg:var(--lime);letter-spacing:-.02em} .btn--ghost{ --btn-bg:transparent;--btn-fg:var(--white); box-shadow:inset 0 0 0 1.5px var(--line-dark); } .btn--ghost:hover{--btn-bg:rgba(245,245,245,.06);box-shadow:inset 0 0 0 1.5px rgba(245,245,245,.28)} .btn--dark{--btn-bg:var(--navy);--btn-fg:var(--white);box-shadow:0 10px 26px rgba(13,27,42,.2)} .btn--dark:hover{box-shadow:0 16px 36px rgba(13,27,42,.28)} .btn--outline-dark{--btn-bg:transparent;--btn-fg:var(--navy);box-shadow:inset 0 0 0 1.5px var(--line-light)} .btn--outline-dark:hover{--btn-bg:rgba(13,27,42,.04)} .btn--block{width:100%} .btn svg{width:18px;height:18px;flex:0 0 auto} .btns{display:flex;flex-wrap:wrap;gap:12px} .link-arrow{ display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--green-ink); } .link-arrow svg{width:16px;height:16px;transition:transform .3s var(--ease)} .link-arrow:hover svg{transform:translateX(4px)} .on-dark .link-arrow{color:var(--lime)} /* ---------- chips / pills ---------- */ .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{ display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:100px; font-size:13px;font-weight:600;letter-spacing:.01em; background:rgba(245,245,245,.06);box-shadow:inset 0 0 0 1px var(--line-dark);color:var(--white); } .chip svg{width:14px;height:14px;color:var(--lime)} .chip--light{background:rgba(13,27,42,.04);box-shadow:inset 0 0 0 1px var(--line-light);color:var(--ink)} .chip--light svg{color:var(--green)} .badge{ display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:100px; font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase; background:var(--lime);color:var(--navy); } .badge--red{background:var(--red);color:#fff} .badge--ghost{background:rgba(118,184,42,.12);color:var(--green-ink); box-shadow:inset 0 0 0 1.5px rgba(118,184,42,.34)} .sec--navy .badge--ghost,.sec--navy-deep .badge--ghost,.phero .badge--ghost, .hero .badge--ghost{background:transparent;color:var(--lime); box-shadow:inset 0 0 0 1.5px rgba(141,198,63,.4)} /* ========================================================================== header ========================================================================== */ .topbar{ background:var(--navy-900);color:var(--on-navy);font-size:13px;font-weight:500; border-bottom:1px solid var(--line-dark-2); } .topbar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:38px} .topbar-l,.topbar-r{display:flex;align-items:center;gap:20px;min-width:0} .topbar b{color:var(--white);font-weight:700} .topbar .dot{width:6px;height:6px;border-radius:50%;background:var(--lime);flex:0 0 auto; box-shadow:0 0 0 3px rgba(141,198,63,.2)} .topbar a:hover{color:var(--white)} .nav{ position:sticky;top:0;z-index:60;background:rgba(13,27,42,.86); backdrop-filter:saturate(140%) blur(18px);-webkit-backdrop-filter:saturate(140%) blur(18px); border-bottom:1px solid var(--line-dark-2); transition:background .3s,box-shadow .3s; } .nav.is-stuck{background:rgba(6,15,24,.94);box-shadow:0 10px 30px rgba(0,0,0,.28)} .nav-in{display:flex;align-items:center;gap:clamp(12px,2vw,28px);height:var(--sticky-h)} .brand{display:flex;align-items:center;gap:11px;flex:0 0 auto} .brand img{height:40px;width:auto;object-fit:contain} .brand-txt{display:block;line-height:1.05} .brand-txt b{display:block;font-family:var(--ff);font-weight:900;font-size:16px;letter-spacing:-.02em;color:#fff} .brand-txt span{display:block;font-size:8.6px;font-weight:700;letter-spacing:.26em;color:var(--lime);margin-top:2px} @media (max-width:420px){.brand-txt{display:none}} .nav-links{display:flex;align-items:center;gap:2px;margin-left:auto} .nav-links a{ position:relative;padding:10px 13px;border-radius:8px;font-size:14.5px;font-weight:600; color:var(--on-navy);transition:color .2s,background .2s;white-space:nowrap; } .nav-links a:hover{color:var(--white);background:rgba(245,245,245,.06)} .nav-links a[aria-current="page"]{color:var(--white)} .nav-links a[aria-current="page"]::after{ content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;background:var(--lime);border-radius:2px; } .has-menu{position:relative} .has-menu>button{ display:flex;align-items:center;gap:6px;padding:10px 13px;border-radius:8px; font-size:14.5px;font-weight:600;color:var(--on-navy);transition:color .2s,background .2s; } .has-menu>button:hover{color:var(--white);background:rgba(245,245,245,.06)} .has-menu>button svg{width:12px;height:12px;transition:transform .3s var(--ease)} .has-menu[data-open="true"]>button{color:var(--white)} .has-menu[data-open="true"]>button svg{transform:rotate(180deg)} .submenu{ position:absolute;top:calc(100% + 10px);left:-8px;min-width:290px;padding:10px; background:var(--navy-800);border:1px solid var(--line-dark);border-radius:var(--r); box-shadow:var(--shadow-3);opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .25s,transform .25s var(--ease),visibility .25s; } .has-menu[data-open="true"] .submenu{opacity:1;visibility:visible;transform:none} .submenu a{display:block;padding:11px 13px;border-radius:10px;font-size:14.5px} .submenu a span{display:block;font-size:12.5px;font-weight:500;color:var(--on-navy-dim);margin-top:2px} .submenu a:hover span{color:var(--on-navy)} .nav-cta{display:flex;align-items:center;gap:10px;flex:0 0 auto} .nav-cta .btn{padding:12px 20px;font-size:14.5px;box-shadow:none} .burger{ display:none;width:44px;height:44px;border-radius:10px;align-items:center;justify-content:center; box-shadow:inset 0 0 0 1px var(--line-dark); } .burger span{display:block;width:19px;height:2px;background:var(--white);border-radius:2px;position:relative} .burger span::before,.burger span::after{ content:"";position:absolute;left:0;width:19px;height:2px;background:var(--white);border-radius:2px; transition:transform .3s var(--ease),opacity .2s; } .burger span::before{top:-6px}.burger span::after{top:6px} body.menu-open .burger span{background:transparent} body.menu-open .burger span::before{transform:translateY(6px) rotate(45deg)} body.menu-open .burger span::after{transform:translateY(-6px) rotate(-45deg)} .mobile-menu{ position:fixed;inset:var(--header-h,102px) 0 0 0;z-index:75;background:var(--navy-900); padding:22px var(--gutter) calc(40px + env(safe-area-inset-bottom)); overflow-y:auto;overflow-x:hidden;max-width:100vw;overscroll-behavior:contain; opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px); transition:opacity .3s,transform .35s var(--ease),visibility .3s; } body.menu-open .mobile-menu{pointer-events:auto} /* the call bar would otherwise cover the menu's own CTAs */ body.menu-open .callbar{opacity:0;visibility:hidden;pointer-events:none} body.menu-open .dex-fab,body.menu-open .dex-nudge{opacity:0;visibility:hidden;pointer-events:none} body.menu-open .mobile-menu{opacity:1;visibility:visible;transform:none} .mobile-menu h5{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--green); font-weight:800;margin:22px 0 6px} /* scoped to the old flat list only — the accordion components style themselves */ .mobile-menu>a:not(.btn):not(.mm-call){display:block;padding:13px 0;font-size:19px;font-weight:700; color:#fff;border-bottom:1px solid var(--line-dark)} .mobile-menu .btns{margin-top:26px;flex-direction:column} /* ========================================================================== hero ========================================================================== */ .hero{ position:relative;background:var(--navy);color:var(--white);overflow:hidden; padding-block:clamp(48px,7vw,86px) clamp(0px,2vw,20px); } .hero::before{ /* aurora */ content:"";position:absolute;left:50%;top:-30%;width:min(1500px,150%);aspect-ratio:1; transform:translateX(-50%);pointer-events:none; background: radial-gradient(closest-side,rgba(118,184,42,.20),transparent 70%) 30% 40%/60% 60% no-repeat, radial-gradient(closest-side,rgba(27,52,80,.85),transparent 72%) 72% 26%/62% 62% no-repeat; filter:blur(6px); } .hero::after{ /* fine grid */ content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; background-image:linear-gradient(var(--line-dark-2) 1px,transparent 1px), linear-gradient(90deg,var(--line-dark-2) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 78%); -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 78%); } .hero-in{position:relative;z-index:2} .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(24px,4vw,60px);align-items:center} .hero h1{margin:18px 0 20px;max-width:16ch} .hero h1 em{font-style:normal;color:var(--lime);position:relative;white-space:nowrap} .hero h1 em::after{ content:"";position:absolute;left:0;right:0;bottom:.06em;height:.09em;border-radius:4px; background:linear-gradient(90deg,var(--green),var(--lime-bright)); transform:scaleX(0);transform-origin:left;animation:underline 1.1s .5s var(--ease) forwards; } @keyframes underline{to{transform:scaleX(1)}} .hero-sub{font-size:clamp(16.5px,1.5vw,19.5px);line-height:1.62;color:var(--on-navy);max-width:52ch} .hero-cta{margin-top:30px} .hero-cta .btn:first-child{font-size:clamp(16px,1.5vw,19px);padding:19px 30px} .hero-note{margin-top:16px;font-size:13.5px;color:var(--on-navy-dim);display:flex;align-items:center;gap:9px} .hero-note svg{width:15px;height:15px;color:var(--lime);flex:0 0 auto} .hero-chips{margin-top:26px} /* trust strip under hero */ .trustbar{ position:relative;z-index:2;color:var(--white); border-top:1px solid var(--line-dark-2);border-bottom:1px solid var(--line-dark-2); background:var(--navy-900); } .trustbar-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px} .trustbar-i{padding:22px 20px;position:relative} .trustbar-i+.trustbar-i::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:var(--line-dark-2)} .trustbar-i b{display:block;font-family:var(--ff);font-weight:800;font-size:clamp(19px,2vw,25px);letter-spacing:-.02em} .trustbar-i>span{display:block;font-size:12.5px;color:var(--on-navy-dim);margin-top:3px;font-weight:500} .trustbar-i em{font-style:normal;color:var(--lime)} /* hero art — underground cross-section */ .hero-art{position:relative} .hero-art svg{width:100%;height:auto;overflow:visible} .flow-dot{opacity:.9} @media (prefers-reduced-motion:no-preference){ .flow{stroke-dasharray:5 9;animation:flow 2.4s linear infinite} @keyframes flow{to{stroke-dashoffset:-28}} .pulse-ring{transform-origin:center;animation:pulsering 3.4s var(--ease-out) infinite} @keyframes pulsering{0%{transform:scale(.72);opacity:.55}70%,100%{transform:scale(1.5);opacity:0}} .float{animation:float 7s ease-in-out infinite} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} } .hero-card{ position:absolute;background:rgba(6,15,24,.82);backdrop-filter:blur(14px); border:1px solid var(--line-dark);border-radius:var(--r);padding:14px 16px; box-shadow:var(--shadow-3);min-width:190px; } .hero-card b{display:block;font-size:14px;font-weight:800;letter-spacing:-.01em} .hero-card span{display:block;font-size:12px;color:var(--on-navy-dim);margin-top:2px} .hero-card--a{top:6%;right:-2%} .hero-card--b{bottom:12%;left:-4%} .hero-card .row{display:flex;align-items:center;gap:10px} .hero-card .ic{ width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto; background:rgba(141,198,63,.14);color:var(--lime); } .hero-card .ic svg{width:17px;height:17px} /* ========================================================================== emergency band ========================================================================== */ .emg{background:linear-gradient(100deg,var(--navy-700),var(--navy-600));color:var(--white); border-block:1px solid var(--line-dark)} .emg-in{display:flex;align-items:center;gap:clamp(14px,3vw,36px);padding-block:20px;flex-wrap:wrap} .emg-in .btn{flex:0 0 auto} .emg-badge{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:12px; letter-spacing:.14em;text-transform:uppercase;color:#fff} .emg-badge i{width:9px;height:9px;border-radius:50%;background:var(--red);position:relative;flex:0 0 auto} .emg-badge i::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--red);opacity:.5} @media (prefers-reduced-motion:no-preference){ .emg-badge i::after{animation:pulsering 2.4s var(--ease-out) infinite} } .emg p{flex:1;min-width:240px;font-size:16px;color:rgba(255,255,255,.9)} .emg p b{color:#fff} /* ========================================================================== section headers ========================================================================== */ .sec-head{max-width:76ch} .sec-head h2{margin:16px 0 16px} .sec-head.center{margin-inline:auto} .sec-head--split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,4vw,60px);align-items:end} .sec-head--split h2{margin-bottom:0} /* ========================================================================== stacking service cards ========================================================================== */ .stackwrap{position:relative} .stack-card{ position:sticky;top:calc(var(--sticky-h) + 24px); border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-3); background:var(--navy-800);color:var(--white);border:1px solid var(--line-dark); margin-bottom:24px; } .stack-card:last-child{margin-bottom:0} .stack-card{align-self:start} .stack-card::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5; background:rgba(6,15,24,var(--dim,0)); } .stack-card-in{ display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(20px,3.4vw,46px); padding:clamp(24px,3.4vw,50px);align-items:center;min-height:clamp(340px,40vw,440px); } .stack-card .num{ font-size:12px;font-weight:900;letter-spacing:.16em;color:var(--lime); } .stack-card h3{margin:14px 0 14px} .stack-card p{color:var(--on-navy);font-size:15.8px} .stack-card ul{margin-top:18px;display:grid;gap:9px} .stack-card li{display:flex;gap:10px;font-size:14.6px;color:var(--on-navy);align-items:flex-start} .stack-card li svg{width:16px;height:16px;color:var(--lime);flex:0 0 auto;margin-top:3px} .stack-card .btns{margin-top:26px} .stack-visual{ position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3; background:linear-gradient(160deg,var(--navy-700),var(--navy-900)); box-shadow:inset 0 0 0 1px var(--line-dark);display:grid;place-items:center; } .stack-visual img{width:100%;height:100%;object-fit:cover;opacity:.92} .stack-visual svg{width:76%;height:auto} .stack-visual .tagpill{ position:absolute;bottom:14px;left:14px;background:rgba(6,15,24,.8);backdrop-filter:blur(10px); border:1px solid var(--line-dark);border-radius:100px;padding:8px 14px;font-size:12px;font-weight:700; letter-spacing:.06em;text-transform:uppercase; } /* ========================================================================== cards ========================================================================== */ .card{ position:relative;background:#fff;border-radius:var(--r-lg);padding:clamp(22px,2.4vw,30px); box-shadow:var(--shadow-1);border:1px solid rgba(13,27,42,.07); transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s; overflow:hidden; } .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:rgba(118,184,42,.4)} .card h4{margin-bottom:9px} .card p{font-size:15px;color:var(--ink-60);line-height:1.6} .sec--navy .card:not(.card--dark) p,.sec--navy-deep .card:not(.card--dark) p{color:var(--ink-60)} .card .ic{ width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:18px; background:linear-gradient(150deg,rgba(118,184,42,.16),rgba(118,184,42,.06));color:var(--green); } .card .ic svg{width:23px;height:23px} .card--dark{background:var(--navy-800);border-color:var(--line-dark);color:var(--white)} .card--dark p,.card--dark b,.card--dark h4{color:var(--on-navy)} .card--dark h4,.card--dark .ilist b{color:#fff} .card--dark:hover{border-color:rgba(141,198,63,.4)} .card--dark .ic{background:rgba(141,198,63,.13);color:var(--lime)} .card--link::after{ content:"";position:absolute;inset:0;border-radius:inherit; } .card-top{display:flex;align-items:center;justify-content:space-between;gap:12px} .card .step{ font-size:12px;font-weight:900;letter-spacing:.14em;color:var(--green-ink); } .card--flat{box-shadow:none;background:transparent;border:1px solid var(--line-light)} .card--warn{border-left:3px solid var(--amber)} .card--urgent{border-left:3px solid var(--red)} /* icon list */ .ilist{display:grid;gap:14px} .ilist li{display:flex;gap:13px;align-items:flex-start} .ilist .ic{ width:34px;height:34px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center; background:rgba(118,184,42,.12);color:var(--green); } .ilist .ic svg{width:17px;height:17px} .ilist b{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.01em} .ilist span{display:block;font-size:14.5px;color:var(--ink-60);line-height:1.55;margin-top:2px} .on-dark .ilist .ic,.sec--navy .ilist .ic,.sec--navy-deep .ilist .ic, .card--dark .ilist .ic{background:rgba(141,198,63,.13);color:var(--lime)} .on-dark .ilist span,.sec--navy .ilist span,.sec--navy-deep .ilist span, .card--dark .ilist span{color:var(--on-navy)} /* ========================================================================== system diagram ========================================================================== */ .diagram{ position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--navy-900); border:1px solid var(--line-dark);padding:clamp(18px,2.4vw,32px); } .diagram svg{width:100%;height:auto;overflow:visible} .dg-label{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;fill:var(--on-navy-dim)} .dg-title{font-size:13px;font-weight:800;fill:#fff;letter-spacing:-.01em} .dg-note{font-size:11px;fill:var(--on-navy-dim)} .dg-hot{cursor:pointer} .dg-hot circle.hit{fill:rgba(141,198,63,.001)} .diagram-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:22px} .dgl{padding:14px;border-radius:var(--r);background:rgba(245,245,245,.04);border:1px solid var(--line-dark-2)} .dgl b{display:block;font-size:13.5px;color:#fff;font-weight:800} .dgl span{display:block;font-size:12.6px;color:var(--on-navy);margin-top:3px;line-height:1.5} .dgl i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:7px;background:var(--lime)} /* ========================================================================== marquee ========================================================================== */ .marquee{overflow:hidden;position:relative;padding-block:16px; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .marquee-track{display:flex;gap:44px;width:max-content} @media (prefers-reduced-motion:no-preference){ .marquee-track{animation:marq 34s linear infinite} @keyframes marq{to{transform:translateX(-50%)}} } .marquee-track span{ display:inline-flex;align-items:center;gap:12px;font-size:14px;font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:var(--on-navy-dim);white-space:nowrap; } .marquee-track span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)} /* ========================================================================== service area ========================================================================== */ .area-grid{display:grid;grid-template-columns:1fr .92fr;gap:clamp(26px,4vw,60px);align-items:center} .map-wrap{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--navy-900); border:1px solid var(--line-dark);padding:clamp(12px,1.6vw,20px)} .map-wrap svg{width:100%;height:auto;display:block} .cty{fill:rgba(245,245,245,.04);stroke:rgba(245,245,245,.13);stroke-width:.8; vector-effect:non-scaling-stroke} .cty--core{fill:rgba(118,184,42,.15);stroke:var(--lime);stroke-width:1.6; vector-effect:non-scaling-stroke} .ctyname{font-family:var(--ff);font-size:10.5px;font-weight:800;letter-spacing:.14em; fill:rgba(141,198,63,.8)} .stateline{stroke:rgba(245,245,245,.26);stroke-dasharray:7 6;stroke-width:1;fill:none; vector-effect:non-scaling-stroke} .statelabel{font-family:var(--ff);font-size:9px;font-weight:800;letter-spacing:.22em; fill:rgba(245,245,245,.44)} .statelabel.dim{fill:rgba(245,245,245,.24)} .town text{font-family:var(--ff);font-size:10.5px;font-weight:700;fill:rgba(245,245,245,.86)} .town--hq text{font-size:13.5px;font-weight:800;fill:#fff} .pt{fill:var(--lime)} .ping{fill:none;stroke:var(--lime);stroke-width:1.5;opacity:.5;transform-origin:center;transform-box:fill-box} @media (prefers-reduced-motion:no-preference){ .ping{animation:mapping 3.2s var(--ease-out) infinite} @keyframes mapping{0%{transform:scale(.6);opacity:.7}70%,100%{transform:scale(1.9);opacity:0}} } @media (max-width:640px){ .town text{font-size:13px} .town--hq text{font-size:16px} .ctyname{font-size:12px} } .town-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px} .town-list a,.town-list span{ display:flex;align-items:center;gap:8px;padding:10px 13px;border-radius:10px;font-size:14px;font-weight:600; background:rgba(245,245,245,.05);border:1px solid var(--line-dark-2);transition:.25s; } .town-list a:hover{background:rgba(141,198,63,.12);border-color:rgba(141,198,63,.4)} .town-list i{width:5px;height:5px;border-radius:50%;background:var(--lime);flex:0 0 auto} /* ========================================================================== pricing ========================================================================== */ .ptable{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-light);background:#fff} .prow{display:grid;grid-template-columns:1.6fr 1fr 1.4fr;gap:16px;padding:18px clamp(16px,2vw,26px); align-items:center;border-bottom:1px solid var(--line-light)} .prow:last-child{border-bottom:0} .prow:nth-child(odd){background:rgba(13,27,42,.02)} .prow.head{background:var(--navy);color:#fff;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase} .prow b{font-size:15.5px;font-weight:700} .prow .price{font-weight:800;font-size:16.5px;color:var(--navy);white-space:nowrap} .prow .note{font-size:13.6px;color:var(--ink-60);line-height:1.5} /* ========================================================================== FAQ ========================================================================== */ .faq{border-top:1px solid var(--line-light)} .faq details{border-bottom:1px solid var(--line-light)} .faq summary{ list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative; font-size:clamp(16.5px,1.6vw,19px);font-weight:700;letter-spacing:-.015em; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"";position:absolute;right:8px;top:50%;width:13px;height:13px;margin-top:-7px; border-right:2.5px solid var(--green);border-bottom:2.5px solid var(--green); transform:rotate(45deg);transition:transform .3s var(--ease); } .faq details[open] summary::after{transform:rotate(-135deg)} .faq .ans{padding:0 clamp(20px,6vw,80px) 24px 0} .faq .ans p{color:var(--ink-60);font-size:16px} .faq .ans p+p{margin-top:12px} .sec--navy .faq,.sec--navy-deep .faq{border-color:var(--line-dark)} .sec--navy .faq details,.sec--navy-deep .faq details{border-color:var(--line-dark)} .sec--navy .faq .ans p,.sec--navy-deep .faq .ans p{color:var(--on-navy)} .sec--navy .faq summary::after,.sec--navy-deep .faq summary::after{border-color:var(--lime)} /* ========================================================================== quote form ========================================================================== */ .formcard{ background:#fff;border-radius:var(--r-xl);padding:clamp(24px,3vw,40px);box-shadow:var(--shadow-2); border:1px solid rgba(13,27,42,.07); } .field{display:block;margin-bottom:16px} .field>span{display:block;font-size:13px;font-weight:700;letter-spacing:.02em;margin-bottom:7px} .field .req{color:var(--red)} .field input,.field select,.field textarea{ width:100%;padding:14px 16px;border-radius:12px;background:#fff; border:1.5px solid rgba(13,27,42,.14);font-size:16px;transition:border-color .2s,box-shadow .2s; } .field textarea{min-height:112px;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(118,184,42,.14); } .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .radios{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px} .radios label{ position:relative;display:flex;align-items:center;gap:10px;padding:13px 15px;border-radius:12px; border:1.5px solid rgba(13,27,42,.14);font-size:14.5px;font-weight:600;cursor:pointer;transition:.2s; } .radios input{position:absolute;opacity:0;pointer-events:none} .radios label:has(input:checked){border-color:var(--green);background:rgba(118,184,42,.08)} .radios label:has(input:focus-visible){box-shadow:0 0 0 4px rgba(118,184,42,.16)} .radios .tick{width:18px;height:18px;border-radius:50%;border:2px solid rgba(13,27,42,.24);flex:0 0 auto; display:grid;place-items:center;transition:.2s} .radios label:has(input:checked) .tick{border-color:var(--green);background:var(--green)} .radios .tick::after{content:"";width:7px;height:7px;border-radius:50%;background:#fff;opacity:0;transition:.2s} .radios label:has(input:checked) .tick::after{opacity:1} .form-note{font-size:13px;color:rgba(13,27,42,.66);margin-top:14px;line-height:1.55} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* ========================================================================== CTA band ========================================================================== */ .cta{ position:relative;overflow:hidden;background:var(--navy);color:#fff; border-radius:var(--r-xl);padding:clamp(30px,5vw,68px); } .cta::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(closest-side at 18% 20%,rgba(118,184,42,.22),transparent 65%), radial-gradient(closest-side at 88% 80%,rgba(27,52,80,.9),transparent 70%); } .cta-in{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(22px,4vw,54px);align-items:center} .cta h2{margin-bottom:14px} .cta p{color:var(--on-navy);font-size:17px;max-width:52ch} /* ========================================================================== footer ========================================================================== */ .foot{background:var(--navy-900);color:var(--on-navy);padding-block:clamp(46px,6vw,76px) 26px; border-top:1px solid var(--line-dark-2)} .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(22px,3vw,44px)} .foot h5{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--white); font-weight:800;margin-bottom:16px} .foot a:not(.btn){display:block;padding:5px 0;font-size:14.5px;transition:color .2s} .foot a:not(.btn):hover{color:var(--white)} .foot img.flogo{height:76px;width:auto;margin-bottom:16px} .foot p{font-size:14.5px;line-height:1.65} .foot-bottom{ margin-top:clamp(30px,4vw,52px);padding-top:22px;border-top:1px solid var(--line-dark-2); display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px; } .foot-bottom a{display:inline} .built{color:var(--on-navy-dim);display:inline-flex;align-items:center;gap:9px} .built img{height:26px;width:auto;opacity:.92;flex:none} .built a{color:var(--lime);display:inline} /* ========================================================================== sticky mobile call bar ========================================================================== */ .callbar{ position:fixed;left:0;right:0;bottom:0;z-index:70;display:none; transition:opacity .25s,visibility .25s; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:rgba(6,15,24,.94);backdrop-filter:blur(16px);border-top:1px solid var(--line-dark); gap:9px; } .callbar .btn{flex:1;padding:14px 12px;font-size:15px;box-shadow:none} .callbar .btn--ghost{flex:0 0 auto;padding:14px 16px} /* ========================================================================== AI concierge ========================================================================== */ .dex-fab{ position:fixed;right:18px;bottom:18px;z-index:80;display:flex;align-items:center;gap:11px; padding:12px 20px 12px 13px;border-radius:100px;background:var(--lime);color:var(--navy); font-weight:800;font-size:14.5px;box-shadow:0 18px 40px rgba(6,15,24,.4); transition:transform .35s var(--ease),opacity .3s; } .dex-fab:hover{transform:translateY(-3px)} .dex-fab{opacity:0;visibility:hidden;transform:translateY(14px) scale(.94); transition:transform .4s var(--ease),opacity .3s,visibility .3s} body.past-hero .dex-fab{opacity:1;visibility:visible;transform:none} body.past-hero .dex-fab:hover{transform:translateY(-3px)} .dex-fab .av{ width:32px;height:32px;border-radius:50%;background:var(--navy);color:var(--lime); display:grid;place-items:center;font-weight:900;font-size:14px;flex:0 0 auto; } .dex-fab .ping{ position:absolute;top:9px;right:15px;width:9px;height:9px;border-radius:50%;background:var(--red); box-shadow:0 0 0 3px var(--lime); } body.dex-open .dex-fab,body.dex-open.past-hero .dex-fab{opacity:0;visibility:hidden;transform:scale(.9)} .dex-nudge{ position:fixed;right:18px;bottom:82px;z-index:79;max-width:300px; background:#fff;border-radius:18px 18px 6px 18px;padding:14px 16px;box-shadow:var(--shadow-3); font-size:14.5px;line-height:1.5;color:var(--ink); opacity:0;visibility:hidden;transform:translateY(10px) scale(.96); transition:opacity .4s,transform .5s var(--ease),visibility .4s; } .dex-nudge.show{opacity:1;visibility:visible;transform:none} .dex-nudge b{font-weight:800} .dex-nudge button{position:absolute;top:6px;right:8px;font-size:17px;color:var(--ink-40);padding:4px 6px;line-height:1} .dex{ position:fixed;right:18px;bottom:18px;z-index:81;width:min(400px,calc(100vw - 24px)); height:min(640px,calc(100vh - 36px));display:flex;flex-direction:column; background:var(--white);border-radius:22px;overflow:hidden;box-shadow:0 40px 110px rgba(6,15,24,.5); opacity:0;visibility:hidden;transform:translateY(18px) scale(.97);transform-origin:bottom right; transition:opacity .35s,transform .45s var(--ease),visibility .35s; } body.dex-open .dex{opacity:1;visibility:visible;transform:none} .dex-head{ background:var(--navy);color:#fff;padding:15px 16px;display:flex;align-items:center;gap:12px;flex:0 0 auto; } .dex-head .av{ width:40px;height:40px;border-radius:50%;background:var(--lime);color:var(--navy); display:grid;place-items:center;font-weight:900;font-size:16px;flex:0 0 auto; } .dex-head b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.01em} .dex-head span{display:block;font-size:12.4px;color:var(--on-navy);display:flex;align-items:center;gap:6px} .dex-head span i{width:6px;height:6px;border-radius:50%;background:var(--lime)} .dex-head .x{margin-left:auto;color:var(--on-navy);font-size:21px;padding:4px 7px;line-height:1;border-radius:8px} .dex-head .x:hover{background:rgba(255,255,255,.1);color:#fff} .dex-body{flex:1;overflow-y:auto;padding:18px 16px 8px;background:var(--stone);scroll-behavior:smooth} .dex-msg{display:flex;gap:9px;margin-bottom:14px;max-width:92%} .dex-msg .av{ width:28px;height:28px;border-radius:50%;background:var(--navy);color:var(--lime);flex:0 0 auto; display:grid;place-items:center;font-weight:900;font-size:11.5px; } .dex-msg .bub{ background:#fff;border-radius:4px 16px 16px 16px;padding:12px 14px;font-size:15px;line-height:1.55; box-shadow:var(--shadow-1); } .dex-msg .bub p+p,.dex-msg .bub ul+p{margin-top:9px} .dex-msg .bub a{color:var(--green-ink);font-weight:700;text-decoration:underline} .dex-msg .bub ul{margin:8px 0 0;display:grid;gap:6px} .dex-msg .bub li{padding-left:16px;position:relative;font-size:14.5px} .dex-msg .bub li::before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--lime)} .dex-msg--me{margin-left:auto;flex-direction:row-reverse} .dex-msg--me .bub{background:var(--navy);color:#fff;border-radius:16px 4px 16px 16px} .dex-typing{display:flex;gap:4px;padding:14px} .dex-typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-40)} @media (prefers-reduced-motion:no-preference){ .dex-typing i{animation:blink 1.3s infinite} .dex-typing i:nth-child(2){animation-delay:.18s} .dex-typing i:nth-child(3){animation-delay:.36s} @keyframes blink{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}} } .dex-quick{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 12px;background:var(--stone);flex:0 0 auto} .dex-quick button{ padding:9px 14px;border-radius:100px;background:#fff;border:1.5px solid rgba(13,27,42,.12); font-size:13.6px;font-weight:700;color:var(--navy);transition:.2s; } .dex-quick button:hover{border-color:var(--green);background:rgba(118,184,42,.08);transform:translateY(-1px)} .dex-quick button.primary{background:var(--lime);border-color:var(--lime)} .dex-foot{flex:0 0 auto;background:#fff;border-top:1px solid var(--line-light);padding:10px 12px} .dex-inrow{display:flex;gap:8px;align-items:flex-end} .dex-inrow textarea{ flex:1;border:1.5px solid rgba(13,27,42,.14);border-radius:14px;padding:11px 13px;font-size:15px; resize:none;max-height:96px;min-height:44px;line-height:1.4; } .dex-inrow textarea:focus{outline:none;border-color:var(--green)} .dex-send{ width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;flex:0 0 auto; transition:.25s; } .dex-send:hover{background:var(--green)} .dex-send svg{width:19px;height:19px} .dex-legal{font-size:11px;color:rgba(13,27,42,.62);text-align:center;margin-top:8px;line-height:1.4} .dex-legal a{color:var(--green-ink);font-weight:700} /* ========================================================================== reveals + utilities ========================================================================== */ .rv{opacity:0;transform:translateY(26px)} .rv.in{opacity:1;transform:none;transition:opacity .8s var(--ease-out),transform .9s var(--ease)} .rv-d1.in{transition-delay:.08s}.rv-d2.in{transition-delay:.16s} .rv-d3.in{transition-delay:.24s}.rv-d4.in{transition-delay:.32s} .rv-d5.in{transition-delay:.4s}.rv-d6.in{transition-delay:.48s} @media (prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none} html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important} } .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} .nowrap{white-space:nowrap} .mt-0{margin-top:0} .hr{height:1px;background:var(--line-light);border:0} .sec--navy .hr,.sec--navy-deep .hr{background:var(--line-dark)} /* breadcrumbs */ .crumbs{font-size:13px;color:var(--on-navy-dim);padding-top:20px} .crumbs ol{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .crumbs li{display:flex;align-items:center;gap:8px} .crumbs li+li::before{content:"/";color:var(--line-dark);} .crumbs a:hover{color:var(--white)} .crumbs--light{color:var(--ink-40)} .crumbs--light li+li::before{color:var(--line-light)} .crumbs--light a:hover{color:var(--navy)} /* page hero (inner pages) */ .phero{background:var(--navy);color:#fff;position:relative;overflow:hidden; padding-block:clamp(26px,3vw,40px) clamp(46px,6vw,86px)} .phero::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(closest-side at 12% 0%,rgba(118,184,42,.18),transparent 62%), radial-gradient(closest-side at 92% 100%,rgba(27,52,80,.85),transparent 68%); } .phero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr; gap:clamp(22px,4vw,54px);align-items:center} .phero h1{font-size:clamp(33px,5vw,60px);margin:16px 0 18px} .phero p{color:var(--on-navy);font-size:clamp(16px,1.5vw,19px);max-width:56ch} .phero .btns{margin-top:28px} .phero-side{display:grid;gap:12px} /* content prose (guide pages) */ .prose{max-width:74ch;min-width:0} .prose h2{font-size:clamp(25px,3vw,36px);margin:44px 0 16px} .prose h3{font-size:clamp(19px,2vw,24px);margin:32px 0 12px} .prose p{margin-bottom:16px;color:var(--ink-60);font-size:17px;line-height:1.72} .prose ul,.prose ol{margin:0 0 20px;display:grid;gap:10px} .prose li{padding-left:24px;position:relative;color:var(--ink-60);font-size:16.5px;line-height:1.6} .prose li::before{content:"";position:absolute;left:4px;top:10px;width:7px;height:7px;border-radius:50%; background:var(--green)} .prose ol{counter-reset:o} .prose ol li{counter-increment:o} .prose ol li::before{content:counter(o);background:none;color:var(--green);font-weight:800;font-size:14px; width:auto;height:auto;top:0;left:2px;border-radius:0} .prose strong{color:var(--ink);font-weight:700} .prose a{color:var(--green-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px} .prose blockquote{ margin:26px 0;padding:20px 24px;border-left:3px solid var(--green);background:rgba(118,184,42,.06); border-radius:0 var(--r) var(--r) 0; } .prose blockquote p{margin:0;color:var(--ink);font-size:16.5px} .tablewrap{position:relative;overflow-x:auto;max-width:100%;margin:22px 0;border-radius:var(--r); border:1px solid var(--line-light);-webkit-overflow-scrolling:touch; background: linear-gradient(90deg,#fff 34%,rgba(255,255,255,0)) left / 44px 100% no-repeat, linear-gradient(90deg,rgba(255,255,255,0),#fff 66%) right / 44px 100% no-repeat, radial-gradient(farthest-side at 0 50%,rgba(13,27,42,.16),transparent) left / 16px 100% no-repeat, radial-gradient(farthest-side at 100% 50%,rgba(13,27,42,.16),transparent) right / 16px 100% no-repeat; background-attachment:local,local,scroll,scroll; } .tablehint{display:none;font-size:12.5px;color:var(--ink-40);margin:-14px 0 20px; align-items:center;gap:7px;font-weight:600} .tablehint svg{width:14px;height:14px} @media (max-width:760px){.tablehint{display:flex}} table{width:100%;border-collapse:collapse;font-size:15px;background:#fff;min-width:520px} th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line-light)} th{background:var(--navy);color:#fff;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase} tr:last-child td{border-bottom:0} td:first-child{font-weight:700;color:var(--ink)} /* toc */ .toc{background:var(--stone);border-radius:var(--r-lg);padding:24px;border:1px solid var(--line-light)} .toc h4{margin-bottom:12px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--green-ink)} .toc a{display:block;padding:7px 0;font-size:15px;font-weight:600;border-bottom:1px solid var(--line-light)} .toc a:last-child{border-bottom:0} .toc a:hover{color:var(--green)} /* ========================================================================== responsive ========================================================================== */ @media (max-width:1080px){ .nav-links{display:none} .burger{display:flex} .hero-grid,.phero-in{grid-template-columns:1fr} .hero-art{order:-1;max-width:560px} .hero-card--a{right:0}.hero-card--b{left:0} .split,.area-grid,.cta-in,.sec-head--split{grid-template-columns:1fr} .stack-card-in{grid-template-columns:1fr} .stack-visual{aspect-ratio:16/9} .g-4{grid-template-columns:repeat(2,minmax(0,1fr))} .foot-grid{grid-template-columns:1fr 1fr} .trustbar-in{grid-template-columns:repeat(2,1fr)} .trustbar-i:nth-child(3)::before{display:none} } @media (max-width:760px){ body{font-size:16.5px} /* keep small labels legible and tappable on phones */ .eyebrow{letter-spacing:.13em;font-size:12px} .topbar{font-size:13.5px} .topbar-in{height:auto;min-height:44px;padding-block:6px} .topbar a{display:inline-flex;align-items:center;min-height:44px;padding-inline:2px} .foot a:not(.btn){padding:11px 0;min-height:44px;display:flex;align-items:center} .foot-bottom a{min-height:0;display:inline} .brand{min-height:44px;padding:4px 6px 4px 0} .card h4,.tstep h4,.pcard b{overflow-wrap:break-word;hyphens:auto} .dex-fab{padding:11px;font-size:0;gap:0} .dex-fab .av{width:34px;height:34px;font-size:14px} .dex-fab .ping{top:6px;right:6px} .topbar-l span.hide-sm,.topbar-r span.hide-sm{display:none} .g-2,.g-3{grid-template-columns:1fr} .prow{grid-template-columns:1fr;gap:6px} .prow.head{display:none} .prow .price{font-size:19px;color:var(--green)} .field-row{grid-template-columns:1fr} .callbar{display:flex} body{padding-bottom:calc(76px + env(safe-area-inset-bottom))} .dex-fab{bottom:calc(78px + env(safe-area-inset-bottom))} .dex-nudge{bottom:calc(142px + env(safe-area-inset-bottom))} .dex{height:min(78vh,620px);bottom:calc(78px + env(safe-area-inset-bottom));right:12px} .hero-card{position:static;margin-top:12px;min-width:0} .hero-art{margin-bottom:6px} .stack-card{position:sticky;top:calc(var(--sticky-h) + 10px);margin-bottom:14px} .stack-card-in{padding:22px 20px} .stack-card h3{margin:10px 0 10px;font-size:22px} .stack-card p{font-size:15px;line-height:1.5} .stack-card ul{margin-top:12px;gap:7px} .stack-card li{font-size:14px} .stack-card .btns{margin-top:16px} .marquee-track{gap:26px} .foot-grid{grid-template-columns:1fr} .cta{padding:26px 20px} } /* Wherever the burger is shown the nav must fit — the phone number in the nav button is redundant there (the sticky call bar carries it) and it was what pushed the burger off-screen at 440px. Gate on the burger, not on a guess. */ @media (max-width:760px){ .brand img{height:34px;object-fit:contain} .nav-cta .btn span.hide-xs{display:none} .nav-cta .btn{padding:12px 14px} .nav-in{min-width:0;gap:10px} .brand{min-width:0;flex:0 1 auto;overflow:hidden} .nav-cta{margin-left:auto} .brand-txt{min-width:0} .brand-txt b{white-space:nowrap} .nav-cta{flex:0 0 auto} } /* very narrow / zoomed: let long CTA labels wrap instead of clipping */ @media (max-width:374px){ .topbar-l{display:none} .card h4{font-size:16px;letter-spacing:-.005em} .prow .price{font-size:18px} .topbar-in{justify-content:flex-end} .btn{white-space:normal;text-align:center;line-height:1.25;padding-inline:18px} .btn--lg,.btn--hero{padding:16px 18px;font-size:15.5px} .btns{gap:10px} .btns .btn{width:100%} .hero-cta .btn:first-child{font-size:16px} .wrap{padding-inline:14px} } @media print{ .nav,.callbar,.dex,.dex-fab,.dex-nudge,.topbar{display:none!important} body{color:#000;background:#fff} } /* ========================================================================== hero — photographic variant ========================================================================== */ .hero--photo{padding-block:clamp(40px,5vw,72px) 0;min-height:min(92vh,880px); min-height:min(92dvh,880px);display:flex;flex-direction:column} .hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden} .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:62% 56%} .hero-bg::after{ content:"";position:absolute;inset:0; background: linear-gradient(97deg,rgba(13,27,42,.96) 4%,rgba(13,27,42,.86) 28%, rgba(13,27,42,.42) 52%,rgba(13,27,42,.16) 78%,rgba(13,27,42,.24) 100%), linear-gradient(0deg,var(--navy) 1%,rgba(13,27,42,.06) 34%); } .hero--photo .hero-in{flex:1;display:flex;align-items:center;padding-block:clamp(24px,4vw,52px)} .hero--photo::after{opacity:.28} .hero-form{ background:rgba(6,15,24,.82);backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%); border:1px solid var(--line-dark);border-radius:var(--r-xl);padding:clamp(20px,2.4vw,30px); box-shadow:var(--shadow-3); } .hero-form h3{font-size:clamp(19px,1.9vw,23px);margin-bottom:6px} .hero-form>p{font-size:14px;color:var(--on-navy-dim);margin-bottom:18px} .hero-form .field>span{color:var(--white)} .hero-form .field input,.hero-form .field select,.hero-form .field textarea{ background:rgba(245,245,245,.06);border-color:var(--line-dark);color:#fff; } .hero-form .field textarea::placeholder{color:rgba(245,245,245,.38)} .hero-form .field textarea:focus{ border-color:var(--lime);box-shadow:0 0 0 4px rgba(141,198,63,.16);background:rgba(245,245,245,.09); } .hero-form .field input::placeholder{color:rgba(245,245,245,.38)} .hero-form .field input:focus,.hero-form .field select:focus,.hero-form .field textarea:focus{ border-color:var(--lime);box-shadow:0 0 0 4px rgba(141,198,63,.16);background:rgba(245,245,245,.09); } .hero-form .field select option{background:var(--navy-800);color:#fff} .hero-form .form-note{color:var(--on-navy-dim)} .hero-rating{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-size:13.5px;color:var(--on-navy)} .hero-rating .stars{display:flex;gap:2px;color:var(--lime)} .hero-rating svg{width:15px;height:15px} /* scroll cue */ .scrollcue{ position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:10px; padding-bottom:22px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase; color:var(--on-navy-dim);font-weight:700; } .scrollcue i{display:block;width:1px;height:26px;background:linear-gradient(var(--lime),transparent)} @media (prefers-reduced-motion:no-preference){ .scrollcue i{animation:cue 2.2s ease-in-out infinite} @keyframes cue{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}} } /* photo frames */ .pframe{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-3); contain:paint} .pframe img{width:100%;height:100%;object-fit:cover;display:block} .pframe--tall{aspect-ratio:4/5} .pframe--wide{aspect-ratio:16/9} .pframe--sq{aspect-ratio:1} .pframe .cap{ position:absolute;left:14px;bottom:14px;right:14px;display:flex;align-items:center;gap:9px; background:rgba(6,15,24,.74);backdrop-filter:blur(12px);border:1px solid var(--line-dark); border-radius:100px;padding:9px 15px;font-size:12.6px;font-weight:600;color:#fff; } .pframe .cap i{width:6px;height:6px;border-radius:50%;background:var(--lime);flex:0 0 auto} .media-2{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;align-items:stretch} .media-2>div:last-child{display:grid;gap:14px} /* stat row */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,22px)} .stat b{display:block;font-size:clamp(30px,4vw,50px);font-weight:900;letter-spacing:-.03em;line-height:1} .stat>span{display:block;font-size:13.5px;color:var(--ink-60);margin-top:8px;font-weight:500} .sec--navy .stat>span,.sec--navy-deep .stat>span{color:var(--on-navy-dim)} .stat em{font-style:normal;color:var(--green)} .sec--navy .stat em,.sec--navy-deep .stat em{color:var(--lime)} @media (max-width:760px){ .stats{grid-template-columns:1fr 1fr} .media-2{grid-template-columns:1fr} .hero--photo{min-height:0} .hero-bg img{object-position:64% 45%} } /* ========================================================================== plans ========================================================================== */ .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start} .plan{ position:relative;background:#fff;border-radius:var(--r-xl);padding:clamp(24px,2.6vw,34px); border:1px solid rgba(13,27,42,.09);box-shadow:var(--shadow-1); transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s; } .plan:hover{transform:translateY(-5px);box-shadow:var(--shadow-2)} .plan--feature{ background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:var(--shadow-3); transform:translateY(-8px); } .plan--feature:hover{transform:translateY(-13px)} .plan-tag{ position:absolute;top:-13px;left:50%;transform:translateX(-50%); background:var(--lime);color:var(--navy);font-size:10.5px;font-weight:900;letter-spacing:.14em; text-transform:uppercase;padding:6px 14px;border-radius:100px;white-space:nowrap; } .plan h4{font-size:19px;letter-spacing:-.01em} .plan .who{font-size:13.5px;color:var(--ink-60);margin-top:6px;min-height:2.9em;line-height:1.5} .plan--feature .who{color:var(--on-navy)} .plan .price{display:flex;align-items:baseline;gap:6px;margin:18px 0 4px} .plan .price b{font-size:clamp(32px,3.4vw,42px);font-weight:900;letter-spacing:-.03em;line-height:1} .plan .price span{font-size:14px;color:var(--ink-60);font-weight:600} .plan--feature .price span{color:var(--on-navy)} .plan .cadence{font-size:12.5px;color:var(--ink-40);font-weight:600;letter-spacing:.04em;text-transform:uppercase} .plan--feature .cadence{color:var(--on-navy-dim)} .plan ul{margin:22px 0 24px;display:grid;gap:10px} .plan li{display:flex;gap:10px;font-size:14.6px;line-height:1.5;color:var(--ink-60)} .plan--feature li{color:var(--on-navy)} .plan li svg{width:16px;height:16px;color:var(--green);flex:0 0 auto;margin-top:3px} .plan--feature li svg{color:var(--lime)} .plan .btn{width:100%} .plan-note{font-size:12.6px;color:rgba(13,27,42,.66);margin-top:12px;text-align:center;line-height:1.5} .plan--feature .plan-note{color:var(--on-navy-dim)} /* ========================================================================== process timeline ========================================================================== */ .tline{position:relative;display:grid;gap:0;margin-top:clamp(28px,4vw,48px)} .tline::before{ content:"";position:absolute;left:23px;top:14px;bottom:14px;width:2px; background:linear-gradient(var(--lime),rgba(141,198,63,.12)); } .tstep{display:grid;grid-template-columns:48px 1fr;gap:clamp(16px,2vw,28px);padding-bottom:clamp(24px,3vw,38px)} .tstep:last-child{padding-bottom:0} .tstep .dot{ width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto; background:var(--navy-800);border:2px solid var(--lime);color:var(--lime); font-weight:900;font-size:15px;position:relative;z-index:2; } .sec--white .tstep .dot,.sec--stone .tstep .dot{background:#fff;border-color:var(--green);color:var(--green)} .tstep h4{margin-bottom:7px} .tstep p{font-size:15.4px;line-height:1.62;color:var(--on-navy);max-width:62ch} .sec--white .tstep p,.sec--stone .tstep p{color:var(--ink-60)} .tstep .when{ display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase; color:var(--lime);margin-bottom:8px; } .sec--white .tstep .when,.sec--stone .tstep .when{color:var(--green-ink)} /* promise / guarantee row */ .promise{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .pcard{ padding:24px 22px;border-radius:var(--r-lg);background:rgba(245,245,245,.045); border:1px solid var(--line-dark-2); } .sec--white .pcard,.sec--stone .pcard{background:#fff;border-color:rgba(13,27,42,.08);box-shadow:var(--shadow-1)} .pcard .ic{ width:40px;height:40px;border-radius:11px;display:grid;place-items:center;margin-bottom:14px; background:rgba(141,198,63,.13);color:var(--lime); } .sec--white .pcard .ic,.sec--stone .pcard .ic{background:rgba(118,184,42,.12);color:var(--green)} .pcard .ic svg{width:20px;height:20px} .pcard b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.01em;margin-bottom:6px} .pcard span{display:block;font-size:14px;line-height:1.55;color:var(--on-navy)} .sec--white .pcard span,.sec--stone .pcard span{color:var(--ink-60)} /* county chips on home */ .chip--county{transition:.25s} .chip--county:hover{background:rgba(141,198,63,.14);box-shadow:inset 0 0 0 1px rgba(141,198,63,.45)} /* wide feature image band */ .band{position:relative;overflow:hidden;border-radius:var(--r-xl);isolation:isolate} .band img{width:100%;height:100%;object-fit:cover;object-position:58% 42%;aspect-ratio:21/9} .band-in{ position:absolute;inset:0;display:flex;align-items:flex-end;padding:clamp(24px,4vw,54px); background:linear-gradient(9deg,rgba(6,15,24,.94) 8%,rgba(6,15,24,.62) 42%,rgba(6,15,24,.06) 74%); } .band-in>div{max-width:56ch} .band h3{color:#fff;margin-bottom:12px} .band p{color:var(--on-navy);font-size:16px} @media (max-width:1000px){ .plans{grid-template-columns:1fr;gap:20px} .plan--feature{transform:none} .plan--feature:hover{transform:translateY(-5px)} .promise{grid-template-columns:1fr 1fr} .band img{aspect-ratio:16/10} } @media (max-width:640px){ .promise{grid-template-columns:1fr} .tstep{grid-template-columns:38px 1fr;gap:14px} .tstep .dot{width:38px;height:38px;font-size:13px} .tline::before{left:18px} .band-in{background:linear-gradient(0deg,rgba(6,15,24,.94) 30%,rgba(6,15,24,.55))} .band img{aspect-ratio:4/5} } /* ========================================================================== custom select ========================================================================== */ .sel{position:relative} .sel select{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px; clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;border:0;padding:0;margin:-1px} .sel-btn{ width:100%;display:flex;align-items:center;gap:12px;text-align:left; padding:14px 16px;border-radius:12px;background:#fff;border:1.5px solid rgba(13,27,42,.14); font-size:16px;font-weight:500;color:var(--ink);cursor:pointer; transition:border-color .2s,box-shadow .2s,background .2s; } .sel-btn:hover{border-color:rgba(13,27,42,.3)} .sel[data-open="true"] .sel-btn{border-color:var(--green);box-shadow:0 0 0 4px rgba(118,184,42,.14)} .sel-btn .val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sel-btn.is-empty .val{color:rgba(13,27,42,.68);font-weight:400} .sel-btn .caret{ width:11px;height:11px;flex:0 0 auto;border-right:2px solid var(--green); border-bottom:2px solid var(--green);transform:rotate(45deg) translate(-2px,-2px); transition:transform .3s var(--ease); } .sel[data-open="true"] .sel-btn .caret{transform:rotate(-135deg) translate(-3px,-3px)} .sel-list{ position:absolute;z-index:40;top:calc(100% + 8px);left:0;right:0; max-height:var(--sel-max,min(300px,52vh)); background:#fff;border:1px solid rgba(13,27,42,.1);border-radius:14px; box-shadow:0 24px 60px rgba(6,15,24,.22);padding:7px; overflow-y:auto;overscroll-behavior:contain; opacity:0;visibility:hidden;transform:translateY(-8px) scale(.985);transform-origin:top center; transition:opacity .2s,transform .28s var(--ease),visibility .2s; } /* flip above the control when there is not room below */ .sel[data-flip="up"] .sel-list{top:auto;bottom:calc(100% + 8px);transform-origin:bottom center; transform:translateY(8px) scale(.985)} .sel[data-open="true"] .sel-list{opacity:1;visibility:visible;transform:none} .sel-opt{ display:flex;align-items:center;gap:10px;width:100%;text-align:left; padding:11px 13px;border-radius:9px;font-size:15px;font-weight:500;color:var(--ink); cursor:pointer;transition:background .16s,color .16s; } .sel-opt:hover,.sel-opt.cursor{background:rgba(118,184,42,.1)} .sel-opt[aria-selected="true"]{background:rgba(118,184,42,.14);font-weight:700} .sel-opt .tick{width:15px;height:15px;flex:0 0 auto;opacity:0;color:var(--green)} .sel-opt[aria-selected="true"] .tick{opacity:1} .sel-opt .meta{margin-left:auto;font-size:12.5px;color:var(--ink-40);font-weight:500} .sel-group{ padding:12px 13px 6px;font-size:10.5px;font-weight:800;letter-spacing:.16em; text-transform:uppercase;color:var(--ink-40); } /* dark surfaces */ .hero-form .sel-btn,.formcard--dark .sel-btn{ background:rgba(245,245,245,.06);border-color:var(--line-dark);color:#fff; } .hero-form .sel-btn.is-empty .val{color:rgba(245,245,245,.62)} .hero-form .sel[data-open="true"] .sel-btn{ border-color:var(--lime);box-shadow:0 0 0 4px rgba(141,198,63,.16);background:rgba(245,245,245,.09); } .hero-form .sel-btn .caret{border-color:var(--lime)} .hero-form .sel-list{background:var(--navy-800);border-color:var(--line-dark)} .hero-form .sel-opt{color:#fff} .hero-form .sel-opt:hover,.hero-form .sel-opt.cursor{background:rgba(141,198,63,.14)} .hero-form .sel-opt[aria-selected="true"]{background:rgba(141,198,63,.18)} .hero-form .sel-opt .tick{color:var(--lime)} .hero-form .sel-group,.hero-form .sel-opt .meta{color:var(--on-navy-dim)} /* ========================================================================== motion system — Framer-style ========================================================================== */ /* headline mask reveal: each line wipes up from behind its own edge */ .reveal-lines{--rl-d:0ms} .rl{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em} .rl>span{ display:block;transform:translateY(112%); transition:transform 1.05s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--rl-i,0) * 90ms + var(--rl-d)); } .in .rl>span,.reveal-lines.in .rl>span{transform:none} /* generic scroll-in variants */ .rv--up{transform:translateY(34px)} .rv--left{transform:translateX(-34px)} .rv--right{transform:translateX(34px)} /* horizontal entrances would push content past the viewport edge before they animate in, so below the split breakpoint they fall back to a vertical rise */ @media (max-width:1000px){ .rv--left,.rv--right{transform:translateY(28px)} } .rv--scale{transform:scale(.955)} .rv--blur{filter:blur(9px)} .rv--up.in,.rv--left.in,.rv--right.in,.rv--scale.in{transform:none} .rv--blur.in{filter:none} .rv{transition:opacity .85s var(--ease-out),transform .95s var(--ease),filter .85s var(--ease-out)} /* stagger children automatically */ .stagger>*{opacity:0;transform:translateY(26px); transition:opacity .75s var(--ease-out),transform .85s var(--ease)} .stagger.in>*{opacity:1;transform:none} .stagger.in>*:nth-child(1){transition-delay:.04s} .stagger.in>*:nth-child(2){transition-delay:.12s} .stagger.in>*:nth-child(3){transition-delay:.2s} .stagger.in>*:nth-child(4){transition-delay:.28s} .stagger.in>*:nth-child(5){transition-delay:.36s} .stagger.in>*:nth-child(6){transition-delay:.44s} .stagger.in>*:nth-child(7){transition-delay:.52s} .stagger.in>*:nth-child(8){transition-delay:.6s} .stagger.in>*:nth-child(9){transition-delay:.68s} /* parallax media — driven by --par from JS */ .par{will-change:transform;overflow:clip} .par>img,.par-img{transform:translate3d(0,calc(var(--par,0) * 1px),0) scale(1.09);will-change:transform} /* image mask wipe */ .wipe{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--ease)} .wipe.in{clip-path:inset(0 0 0 0)} /* magnetic-ish hover lift on cards + buttons */ .btn,.card,.plan,.tile,.pcard{will-change:transform} .card,.plan{transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s} /* progress rail at the very top */ .scrollbar{ position:fixed;top:0;left:0;height:2px;z-index:100; background:linear-gradient(90deg,var(--green),var(--lime-bright)); width:var(--sp,0%);transition:width .1s linear;pointer-events:none; } /* section number ticker */ .secnum{ font-family:var(--ff);font-weight:900;font-size:11px;letter-spacing:.2em; color:var(--green);opacity:.6; } /* counters keep their box so nothing shifts */ [data-count]{display:inline-block;min-width:1ch;font-variant-numeric:tabular-nums} @media (prefers-reduced-motion:reduce){ .rl>span{transform:none!important} .stagger>*{opacity:1!important;transform:none!important} .par>img,.par-img{transform:none!important} .wipe{clip-path:none!important} .scrollbar{display:none} } /* ========================================================================== mobile overrides — must come last so they win on source order ========================================================================== */ /* backdrop-filter is the single biggest scroll cost on phones (measured ~33ms → ~17ms median frame with it off). Use solid fills instead below the breakpoint. */ @media (pointer:coarse){ .foot a:not(.btn){padding:11px 0;min-height:44px;display:flex;align-items:center} .foot-bottom a{min-height:0;display:inline} .crumbs a{display:inline-flex;align-items:center;min-height:44px;padding-inline:2px} .topbar a{display:inline-flex;align-items:center;min-height:44px} .eyebrow a{display:inline-flex;align-items:center;min-height:44px} .foot-grid h5,#mobileMenu h5{font-size:12.5px} .dg-hot circle.hit{r:26} } @media (max-width:760px){ .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(13,27,42,.97)} .nav.is-stuck{background:rgba(6,15,24,.98)} .callbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(6,15,24,.98)} .hero-form{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(6,15,24,.93)} .stack-visual .tagpill{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(6,15,24,.9)} .pframe .cap{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(6,15,24,.88)} .hero-card{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(6,15,24,.92)} .sel-backdrop{backdrop-filter:none;-webkit-backdrop-filter:none} .drawer{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(15,15,21,.98)} .sel-group{font-size:12px;letter-spacing:.12em;padding:14px 13px 6px} .sel-opt{padding:14px 13px;font-size:15.5px;min-height:48px} .sel-btn{padding:15px 16px;min-height:52px} .chip{font-size:13.5px;padding:9px 15px} .town-list a,.town-list span{min-height:46px;font-size:14.5px} .faq summary{padding-block:20px;min-height:56px} .nav-links a,.has-menu>button{min-height:44px} .dgl b{font-size:14.5px} .dgl span{font-size:13.5px} .plan .cadence,.tstep .when{font-size:12px} .trustbar-i>span{font-size:13px} .hero-note{font-size:14px} .form-note,.plan-note,.cmp-note{font-size:13.5px} .mock figcaption,.pframe .cap{font-size:12.5px} .badge{font-size:12px} .dex-legal{font-size:12px} .scrollcue{font-size:12px} .crumbs{font-size:13.5px} .crumbs a{display:inline-flex;align-items:center;min-height:44px;padding-inline:2px} .crumbs li+li::before{align-self:center} .f-kicker a,.eyebrow a{display:inline-flex;align-items:center;min-height:44px} .dex-head .x{min-width:44px;min-height:44px;display:grid;place-items:center;font-size:24px} .dex-nudge button{min-width:40px;min-height:40px;display:grid;place-items:center} .dex-legal a{display:inline-block;padding:6px 2px} .brand{gap:9px} .brand-txt b{font-size:15px} .brand-txt span{font-size:9.4px;letter-spacing:.2em} .plan-tag{font-size:11.5px;padding:7px 15px} .nav-cta .btn{min-height:46px;font-size:15px} .topbar,.topbar b{font-size:13.5px} } /* ========================================================================== select as a bottom sheet on phones — a floating list can always be clipped inside sticky/overflow ancestors, a sheet never can ========================================================================== */ @media (max-width:760px){ .sel-backdrop{ position:fixed;inset:0;z-index:90;background:rgba(6,15,24,.55); backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s; } body.sheet-open .sel-backdrop{opacity:1;visibility:visible} .sel-list--sheet, .sel[data-open="true"] .sel-list, .sel[data-flip="up"] .sel-list{ position:fixed;z-index:91;left:0;right:0;bottom:0;top:auto; max-height:min(68vh,520px);border-radius:20px 20px 0 0; padding:8px 10px calc(14px + env(safe-area-inset-bottom)); transform:translateY(100%);transform-origin:bottom center; box-shadow:0 -20px 60px rgba(6,15,24,.5); } .sel[data-open="true"] .sel-list, body.sheet-open .sel-list--sheet{opacity:1;visibility:visible;transform:none} .sel-list::before{ content:"";display:block;width:42px;height:4px;border-radius:3px;margin:6px auto 12px; background:rgba(13,27,42,.18); } .hero-form .sel-list::before{background:rgba(245,245,245,.24)} .sel-opt{padding:16px 14px;font-size:16px;min-height:54px} .sel-group{position:sticky;top:0;background:inherit;z-index:2} } /* ========================================================================== mobile alignment pass — emergency band + menu ========================================================================== */ @media (max-width:760px){ .emg-in{flex-direction:column;align-items:stretch;gap:14px;text-align:left} /* CTA pairs read as one block on a phone rather than two ragged pills */ .stack-card .btns .btn,.phero .btns .btn,.cta .btns .btn, .close .btns .btn,.sec-head .btns .btn{width:100%;justify-content:center} .hero-cta .btn{width:100%;justify-content:center} .btns{gap:10px} .emg-in .btn{width:100%;justify-content:center} .emg p{min-width:0} .mobile-menu .btns{margin-top:26px;padding-top:20px;border-top:1px solid var(--line-dark)} .mobile-menu .btns .btn{width:100%;justify-content:center} } /* ========================================================================== Mobile menu — CSS-driven so it cannot depend on JavaScript running. A hidden checkbox is the state; the burger is its