/* ============================================================ United Safe Van Lines (USVL) — shared design system Brand: trust blue + navy, clean modern. US English site. ============================================================ */ /* ---- Fonts (loaded via preconnect+stylesheet in , not @import, to avoid a render-blocking request chain) ---- */ /* ---- Design tokens ---- */ :root{ /* Brand blues */ --navy-900:#0b1a31; --navy-800:#0f2444; --navy-700:#143057; --blue-700:#1747a8; --blue-600:#1b56c4; /* primary */ --blue-500:#2a6bdb; --blue-400:#5089ec; --blue-200:#bcd2f6; --blue-100:#dbe7fb; --blue-50:#eef4fd; /* Trust / accent */ --green-600:#11936a; --green-500:#16a877; --green-50:#e7f6f0; /* Neutrals (cool, slightly toned) */ --ink:#0e1b2d; --slate-700:#33425a; --slate-600:#4a5a72; --slate-500:#697892; --slate-400:#92a0b5; --line:#e5eaf2; --line-strong:#d4dce8; --bg:#ffffff; --bg-soft:#f4f8fd; --bg-tint:#eef4fd; /* Type */ --font-display:'Sora',system-ui,-apple-system,Segoe UI,sans-serif; --font-body:'Public Sans',system-ui,-apple-system,Segoe UI,sans-serif; /* Radius & shadow */ --r-sm:8px; --r:14px; --r-lg:20px; --r-xl:28px; --shadow-sm:0 1px 2px rgba(15,36,68,.06),0 1px 3px rgba(15,36,68,.08); --shadow:0 6px 18px rgba(15,36,68,.08),0 2px 6px rgba(15,36,68,.05); --shadow-lg:0 24px 60px -12px rgba(11,26,49,.28),0 8px 24px rgba(11,26,49,.10); --shadow-blue:0 18px 40px -12px rgba(27,86,196,.45); --container:1200px; --gutter:clamp(20px,5vw,56px); } /* ---- Reset ---- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0; font-family:var(--font-body); color:var(--ink); background:var(--bg); line-height:1.6; font-size:17px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,svg,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer} h1,h2,h3,h4{font-family:var(--font-display);line-height:1.08;margin:0;letter-spacing:-.02em;color:var(--ink);font-weight:700;text-wrap:balance} p{margin:0;text-wrap:pretty} ul{margin:0;padding:0;list-style:none} /* ---- Layout ---- */ .container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)} .section{padding-block:clamp(56px,8vw,108px)} .section.alt,.section--alt,.alt{background:var(--bg-soft)} .svc{display:flex;gap:18px;align-items:flex-start} .svc .card-icon{flex:none;margin-bottom:0} .svc h3{font-size:18px;margin-bottom:5px} .svc p{font-size:15px;color:var(--slate-600)} .section--tight{padding-block:clamp(28px,3.5vw,48px)} /* Auto-zebra: alternate section backgrounds on long-form pages for clear division */ body.usvl-flow > section.section:not(.subhero){background:#fff} body.usvl-flow > section.section:not(.subhero):nth-of-type(even){background:var(--bg-soft)} .center{text-align:center} .maxw-680{max-width:680px} .mx-auto{margin-inline:auto} /* ---- Typography helpers ---- */ .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-family:var(--font-display);font-weight:600; font-size:13px;letter-spacing:.14em;text-transform:uppercase; color:var(--blue-600); } .eyebrow::before{content:"";width:22px;height:2px;background:var(--blue-500);border-radius:2px} .eyebrow--center::before{display:none} .h-display{font-size:clamp(2.5rem,5.5vw,4.4rem);line-height:1.02;font-weight:800} .h1{font-size:clamp(2.1rem,4.4vw,3.4rem);font-weight:800} .h2{font-size:clamp(1.7rem,3.2vw,2.6rem);font-weight:700} .h3{font-size:clamp(1.2rem,1.8vw,1.5rem);font-weight:600} .lead{font-size:clamp(1.05rem,1.4vw,1.28rem);color:var(--slate-600);line-height:1.55} .muted{color:var(--slate-500)} .text-blue{color:var(--blue-600)} .text-white{color:#fff} /* ---- Buttons ---- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; font-family:var(--font-display);font-weight:600;font-size:16px; padding:15px 26px;border-radius:999px;border:1.5px solid transparent; transition:transform .15s ease,box-shadow .2s ease,background .2s ease,color .2s ease; white-space:nowrap;line-height:1; } .btn svg{width:18px;height:18px} .btn-primary{background:var(--blue-600);color:#fff;box-shadow:var(--shadow-blue)} .btn-primary:hover{background:var(--blue-700);transform:translateY(-2px)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)} .btn-ghost:hover{border-color:var(--blue-400);color:var(--blue-600)} .btn-light{background:#fff;color:var(--navy-800);box-shadow:var(--shadow)} .btn-light:hover{transform:translateY(-2px)} .btn-white-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)} .btn-white-outline:hover{background:rgba(255,255,255,.1);border-color:#fff} .btn-lg{padding:18px 34px;font-size:17px} .btn-block{width:100%} /* ---- Header / Nav ---- */ .site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--line)} .nav{display:flex;align-items:center;gap:32px;height:78px} .brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:800;font-size:19px;color:var(--navy-800);letter-spacing:-.02em} .brand .mark{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--blue-500),var(--blue-700));color:#fff;display:grid;place-items:center;font-size:15px;font-weight:800;box-shadow:var(--shadow-blue)} .brand>span{white-space:nowrap} .brand small{display:block;font-family:var(--font-body);font-weight:500;font-size:11px;letter-spacing:.08em;color:var(--slate-500);text-transform:uppercase;margin-top:1px;white-space:nowrap} .nav-links{display:flex;align-items:center;gap:6px;margin-left:8px} .nav-links a{font-weight:500;font-size:15.5px;color:var(--slate-700);padding:9px 14px;border-radius:9px;transition:.15s;position:relative} .nav-links a:hover{color:var(--blue-600);background:var(--blue-50)} .nav-links a[aria-current="page"]{color:var(--blue-600);background:var(--blue-50)} .nav-item{position:relative} .nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)} .has-caret::after{content:"";display:inline-block;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:6px;opacity:.5} .dropdown{position:absolute;top:calc(100% + 6px);left:0;min-width:240px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s} .dropdown a{display:flex;flex-direction:column;padding:11px 14px;border-radius:9px;font-size:15px;font-weight:600;color:var(--ink)} .dropdown a span{font-weight:400;font-size:12.5px;color:var(--slate-500);margin-top:2px} .dropdown a:hover{background:var(--blue-50)} .nav-spacer{flex:1} .nav-cta{display:flex;align-items:center;gap:14px} .nav-phone{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--navy-800);display:flex;align-items:center;gap:7px;white-space:nowrap} .nav-phone svg{width:16px;height:16px;color:var(--blue-600)} .burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:#fff;flex-direction:column;gap:5px;align-items:center;justify-content:center} .burger span{width:20px;height:2px;background:var(--ink);border-radius:2px} /* ---- Footer ---- */ .site-footer{background:var(--navy-900);color:#c4d2e6} .footer-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:48px;padding-block:72px} .footer-grid .brand{color:#fff} .footer-grid .brand small{color:#7d92b3} .footer-about{margin-top:18px;color:#92a8c8;font-size:15px;max-width:340px} .footer-col h4,.footer-col .footer-h{color:#fff;font-size:14px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 18px;font-family:var(--font-display);font-weight:700} .footer-col a{display:block;padding:7px 0;color:#a7bbd8;font-size:15px;transition:.15s} .footer-col a:hover{color:#fff} .footer-social{display:flex;gap:10px;margin-top:20px} .footer-social a{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.07);display:grid;place-items:center;color:#c4d2e6} .footer-social a:hover{background:var(--blue-600);color:#fff} .footer-social a svg{width:18px;height:18px} .footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-block:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:#7d92b3} .footer-bottom a{color:#a7bbd8} .footer-bottom a:hover{color:#fff} /* ---- Image placeholders ---- */ .ph{ position:relative;border-radius:var(--r);overflow:hidden; background: repeating-linear-gradient(135deg,rgba(27,86,196,.05) 0 10px,rgba(27,86,196,.09) 10px 20px), var(--blue-50); border:1px dashed var(--blue-200); display:grid;place-items:center;color:var(--blue-600);min-height:160px; } .ph::after{ content:attr(data-label); font-family:'Public Sans',monospace;font-size:12.5px;font-weight:600;letter-spacing:.02em; color:var(--blue-600);background:rgba(255,255,255,.78);padding:6px 12px;border-radius:999px; box-shadow:var(--shadow-sm); } .ph--dark{background:repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 10px,rgba(255,255,255,.08) 10px 20px),rgba(255,255,255,.04);border-color:rgba(255,255,255,.18);color:#cfe0fb} .ph--dark::after{background:rgba(11,26,49,.6);color:#cfe0fb} .ph-avatar{width:52px;height:52px;border-radius:50%;min-height:0} .ph-avatar::after{display:none} /* ---- Cards ---- */ .card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s,border-color .2s} .card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--blue-200)} .card-icon{width:54px;height:54px;border-radius:14px;background:var(--blue-50);color:var(--blue-600);display:grid;place-items:center;margin-bottom:18px} .card-icon svg{width:26px;height:26px} .card h3{margin-bottom:8px} .card p{color:var(--slate-600);font-size:15.5px} /* ---- Badges / pills ---- */ .pill{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:999px;background:var(--blue-50);color:var(--blue-700);font-weight:600;font-size:13.5px;font-family:var(--font-display)} .pill svg{width:15px;height:15px} .pill--green{background:var(--green-50);color:var(--green-600)} .pill--glass{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.18)} /* ---- Stats ---- */ .stats{display:grid;grid-template-columns:repeat(4,1fr)} .stat{padding:8px 24px;border-left:1px solid var(--line)} .stat:first-child{border-left:none} .stat .num{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,3.4vw,2.9rem);color:var(--blue-600);line-height:1} .stat .lbl{color:var(--slate-600);font-size:14.5px;margin-top:6px} /* ========================================================= QUOTE QUIZ FORM (shared, works on all variations) ========================================================= */ .quote-card{background:#fff;border-radius:var(--r-xl);box-shadow:var(--shadow-lg);padding:30px;border:1px solid var(--line)} .quote-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px} .quote-head .q-title{font-family:var(--font-display);font-weight:700;font-size:19px} .quote-steps{display:flex;gap:6px;margin:16px 0 22px} .quote-steps .dot{height:5px;flex:1;border-radius:99px;background:var(--line-strong);transition:.3s} .quote-steps .dot.active{background:var(--blue-600)} .q-step{display:none} .q-step.active{display:block} .q-step.q-animate{animation:qfade .35s ease} @keyframes qfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .q-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .field{margin-bottom:14px} .field label{display:block;font-size:13px;font-weight:600;color:var(--slate-700);margin-bottom:7px;font-family:var(--font-display)} .field .with-icon{position:relative} .field .with-icon svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--slate-400)} .field .with-icon input,.field .with-icon select{padding-left:42px} .input,.select,select.input{ width:100%;padding:14px 15px;border:1.5px solid var(--line-strong);border-radius:11px; font-family:var(--font-body);font-size:15.5px;color:var(--ink);background:#fff;transition:.15s; } .input::placeholder{color:var(--slate-400)} .input:focus,.select:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 4px var(--blue-100)} .input.invalid{border-color:#e0556b;box-shadow:0 0 0 4px #fbe1e6} .size-trigger{width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;padding:14px 15px;border:1.5px solid var(--line-strong);border-radius:11px;background:#fff;font-size:15.5px;color:var(--slate-400);font-family:var(--font-body)} .size-trigger.filled{color:var(--ink);font-weight:500} .size-trigger svg{width:18px;height:18px;color:var(--slate-400)} .q-error{color:#d63d57;font-size:13px;margin-top:8px;display:none} .q-error.show{display:block} .q-actions{display:flex;gap:12px;margin-top:6px} .q-back{background:transparent;border:1.5px solid var(--line-strong);color:var(--slate-600);border-radius:999px;padding:15px 22px;font-family:var(--font-display);font-weight:600;font-size:15px} .q-back:hover{border-color:var(--blue-400);color:var(--blue-600)} .q-trust{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:16px;color:var(--slate-500);font-size:13px} .q-trust svg{width:15px;height:15px;color:var(--green-500)} .q-success{text-align:center;padding:20px 6px} .q-success .check{width:66px;height:66px;border-radius:50%;background:var(--green-50);color:var(--green-600);display:grid;place-items:center;margin:0 auto 18px} .q-success .check svg{width:34px;height:34px} /* Size modal */ .size-modal{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:20px} .size-modal.open{display:flex} .size-modal .backdrop{position:absolute;inset:0;background:rgba(11,26,49,.55);backdrop-filter:blur(3px)} .size-modal .panel{position:relative;background:#fff;border-radius:var(--r-xl);max-width:620px;width:100%;max-height:86vh;overflow:auto;box-shadow:var(--shadow-lg);padding:30px} .size-modal .panel h3{margin-bottom:4px} .size-modal .x{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:#fff;font-size:20px;color:var(--slate-500);display:grid;place-items:center} .size-group{margin-top:22px} .size-group .gh{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:15px;margin-bottom:12px} .size-group .gh .ic{width:34px;height:34px;border-radius:9px;background:var(--blue-50);color:var(--blue-600);display:grid;place-items:center} .size-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px} .size-opt{padding:13px 14px;border:1.5px solid var(--line-strong);border-radius:11px;font-size:14.5px;font-weight:500;text-align:left;background:#fff;transition:.12s;color:var(--slate-700)} .size-opt:hover{border-color:var(--blue-400);background:var(--blue-50)} .size-opt.selected{border-color:var(--blue-600);background:var(--blue-50);color:var(--blue-700);font-weight:600} /* ---- Steps (how it works) ---- */ .steps{display:flex;flex-direction:column;gap:clamp(40px,6vw,80px)} .step-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center} .step-row:nth-child(even) .step-media{order:-1} .step-num{font-family:var(--font-display);font-weight:800;font-size:14px;letter-spacing:.14em;color:var(--blue-600);text-transform:uppercase} .step-row h3{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:12px 0 14px} .step-row p{color:var(--slate-600);font-size:16.5px} .step-media{min-height:300px} /* ---- Services / why grid ---- */ .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px} /* ---- Testimonials ---- */ .tcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;box-shadow:var(--shadow-sm);height:100%} .tstars{display:flex;gap:3px;color:#f5a623;margin-bottom:14px} .tstars svg{width:18px;height:18px} .tcard p{color:var(--slate-700);font-size:16px;line-height:1.6} .tperson{display:flex;align-items:center;gap:13px;margin-top:20px} .tperson .nm{font-family:var(--font-display);font-weight:600;font-size:15px} .tperson .loc{color:var(--slate-500);font-size:13px} /* ---- CTA band ---- */ .cta-band{background:linear-gradient(135deg,var(--navy-800),var(--blue-700));border-radius:var(--r-xl);padding:clamp(40px,6vw,72px);color:#fff;position:relative;overflow:hidden} .cta-band::before{content:"";position:absolute;top:-40%;right:-10%;width:480px;height:480px;background:radial-gradient(circle,rgba(80,137,236,.4),transparent 70%);} .cta-band h2{color:#fff;position:relative} .cta-band p{color:#c4d6f5;position:relative;max-width:560px} /* ---- Responsive ---- */ @media(max-width:1080px){ .nav{gap:16px} .nav-links{display:none} .burger{display:flex} } @media(max-width:980px){ .footer-grid{grid-template-columns:1fr 1fr;gap:36px} .step-row{grid-template-columns:1fr} .step-row:nth-child(even) .step-media{order:0} .grid-3{grid-template-columns:1fr 1fr} } @media(max-width:760px){ .nav-phone{display:none} body{font-size:16px} .stats{grid-template-columns:1fr 1fr;gap:8px 0} .stat{padding:14px 18px} .stat:nth-child(odd){border-left:none} .grid-3,.grid-2{grid-template-columns:1fr} .q-grid{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr 1fr;gap:28px} } @media(max-width:480px){ .stats{grid-template-columns:1fr 1fr} } /* Get-a-Quote popup (non-home pages) */ .quote-modal{position:fixed;inset:0;z-index:210;display:none;align-items:flex-start;justify-content:center;padding:clamp(16px,4vh,40px) 16px;overflow:auto} .quote-modal.open{display:flex} .quote-modal>.backdrop{position:fixed;inset:0;background:rgba(11,26,49,.55);backdrop-filter:blur(3px)} .quote-modal .qm-panel{position:relative;width:100%;max-width:460px;margin:auto;animation:qfade .25s ease} .quote-modal .qm-x{position:absolute;top:-13px;right:-13px;width:38px;height:38px;border-radius:50%;border:none;background:#fff;box-shadow:var(--shadow);font-size:20px;color:var(--slate-600);cursor:pointer;z-index:2;display:grid;place-items:center} .quote-modal .qm-x:hover{color:var(--blue-600)} /* Places autocomplete suggestions (fallback list + Google pac container) */ .places-sug{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid var(--line-strong);border-radius:11px;box-shadow:var(--shadow);z-index:320;overflow:hidden;max-height:240px;overflow-y:auto} .ps-item{padding:11px 14px;font-size:14.5px;color:var(--slate-700);cursor:pointer;display:flex;align-items:center;gap:9px} .ps-item svg{width:15px;height:15px;color:var(--blue-500);flex:none} .ps-item:hover{background:var(--blue-50);color:var(--blue-700)} .pac-container{display:none !important} /* Mobile nav drawer */ .mobile-drawer{position:fixed;inset:0;z-index:80;display:none} .mobile-drawer.open{display:block} .mobile-drawer .backdrop{position:absolute;inset:0;background:rgba(11,26,49,.5)} .mobile-drawer .sheet{position:absolute;top:0;right:0;height:100%;width:min(86vw,360px);background:#fff;box-shadow:var(--shadow-lg);overflow:auto;display:flex;flex-direction:column;padding:18px 22px;padding-top:calc(14px + env(safe-area-inset-top));padding-bottom:calc(24px + env(safe-area-inset-bottom))} .sheet-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:6px} .sheet-top .brand{font-size:17px} .sheet-close{flex:none;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:26px;line-height:1;color:var(--ink);display:grid;place-items:center;cursor:pointer} .sheet-links{display:flex;flex-direction:column} .mobile-drawer .sheet-links > a{display:block;padding:13px 4px;font-family:var(--font-display);font-weight:600;font-size:17px;border-bottom:1px solid var(--line);color:var(--ink)} .sheet-group{border-bottom:1px solid var(--line)} .sheet-acc{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 4px;background:none;border:0;font-family:var(--font-display);font-weight:600;font-size:17px;color:var(--ink);text-align:left;cursor:pointer} .sheet-caret{flex:none;width:26px;height:26px;border-radius:50%;background:var(--blue-50);color:var(--blue-600);display:grid;place-items:center;font-size:18px;line-height:1;transition:.2s} .sheet-group.open .sheet-caret{transform:rotate(45deg);background:var(--blue-600);color:#fff} .sheet-sub{display:none;padding:2px 0 12px} .sheet-group.open .sheet-sub{display:block} .mobile-drawer .sheet-sub a{display:block;padding:9px 4px 9px 16px;font-family:var(--font-body);font-weight:500;font-size:15px;color:var(--slate-600);border:0} .mobile-drawer .sheet-sub a:hover{color:var(--blue-700)} .sheet-phone{display:flex;align-items:center;gap:9px;margin-top:18px;padding:13px 16px;border:1px solid var(--line);border-radius:12px;font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--navy-800)} .sheet-phone svg{width:18px;height:18px;color:var(--blue-600);flex:none} .mobile-drawer .sheet .btn{margin-top:12px;width:100%} /* ========================================================= INNER PAGES ========================================================= */ /* sub-page header band */ .subhero{position:relative;background:radial-gradient(120% 130% at 85% 0%,#16356b 0%,var(--navy-800) 50%,var(--navy-900));color:#eaf1fb;overflow:hidden} .subhero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(70% 80% at 75% 20%,#000,transparent);pointer-events:none} .subhero .container{position:relative;z-index:2;padding-block:clamp(40px,5vw,72px)} .subhero .hero-img{max-width:460px;margin:28px auto 0;box-shadow:0 20px 50px -18px rgba(4,16,38,.55)} .breadcrumb{display:flex;align-items:center;gap:8px;font-size:13.5px;color:#9fb6d6;font-family:var(--font-display);font-weight:500;margin-bottom:18px} .breadcrumb a{color:#bcd1ee} .breadcrumb a:hover{color:#fff} .breadcrumb .sep{opacity:.5} .subhero h1{color:#fff;font-size:clamp(2.1rem,4.4vw,3.4rem);max-width:760px} .subhero .lead{color:#bcd1ee;max-width:600px;margin-top:16px} .subhero .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px} .subhero .pill{background:rgba(127,176,255,.14);color:#bcd6ff;border:1px solid rgba(127,176,255,.25);margin-bottom:18px} /* two-column content */ .twocol{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center} .twocol .media .ph{min-height:clamp(280px,32vw,400px)} .prose h2{font-size:clamp(1.7rem,3vw,2.4rem);margin-bottom:16px} .prose p{color:var(--slate-600);font-size:16.5px;margin-bottom:16px} .prose p:last-child{margin-bottom:0} .ticks{display:grid;gap:12px;margin-top:22px} .ticks li{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:var(--slate-700)} .ticks li svg{width:22px;height:22px;color:var(--green-500);flex:none;margin-top:1px} /* feature grid (what's included) */ .feature{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;transition:.2s} .feature:hover{border-color:var(--blue-200);box-shadow:var(--shadow);transform:translateY(-3px)} .feature .card-icon{margin-bottom:16px} .feature h3{font-size:18px;margin-bottom:7px} .feature p{color:var(--slate-600);font-size:15px} /* FAQ */ .faq{max-width:820px;margin-inline:auto;display:grid;gap:12px} .faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:4px 22px;transition:.2s} .faq details[open]{border-color:var(--blue-200);box-shadow:var(--shadow-sm)} .faq summary{list-style:none;cursor:pointer;padding:18px 0;font-family:var(--font-display);font-weight:600;font-size:17px;display:flex;justify-content:space-between;align-items:center;gap:16px} .faq summary::-webkit-details-marker{display:none} .faq summary .ic{width:26px;height:26px;flex:none;border-radius:50%;background:var(--blue-50);color:var(--blue-600);display:grid;place-items:center;transition:.2s} .faq summary .ic svg{width:16px;height:16px} .faq details[open] summary .ic{transform:rotate(45deg);background:var(--blue-600);color:#fff} .faq details p{color:var(--slate-600);font-size:16px;padding:0 0 20px;margin:0} /* contact / vendor layout */ .contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,52px);align-items:start} .contact-form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow);padding:clamp(24px,3vw,38px)} .contact-form-card .field textarea.input{resize:vertical;min-height:130px;line-height:1.5} .info-card{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;margin-bottom:18px} .info-card h3{font-size:18px;margin-bottom:16px} .info-row{display:flex;gap:14px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line)} .info-row:first-of-type{border-top:none} .info-row .ic{width:42px;height:42px;border-radius:11px;background:var(--blue-50);color:var(--blue-600);display:grid;place-items:center;flex:none} .info-row .ic svg{width:20px;height:20px} .info-row .lbl{font-size:12.5px;color:var(--slate-500);font-family:var(--font-display);font-weight:600;letter-spacing:.04em;text-transform:uppercase} .info-row .val{font-size:16px;color:var(--ink);font-weight:500} .info-row a.val:hover{color:var(--blue-600)} /* blog */ .post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .post{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:.2s} .post:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--blue-200)} .post .pimg{aspect-ratio:16/10} .post .pimg.ph{border-radius:0;border:none;border-bottom:1px solid var(--line)} .post .pbody{padding:22px;display:flex;flex-direction:column;flex:1} .post .cat{font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-600)} .post h3{font-size:1.2rem;margin:9px 0 10px;line-height:1.25} .post p{color:var(--slate-600);font-size:14.5px;flex:1} .post .meta{display:flex;gap:10px;align-items:center;color:var(--slate-500);font-size:13px;margin-top:16px} .post.featured{grid-column:1/-1;flex-direction:row} .post.featured .pimg{aspect-ratio:auto;flex:1.1;min-height:300px} .post.featured .pbody{flex:1;justify-content:center} .post.featured h3{font-size:1.7rem} /* offers */ .offer{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;position:relative;overflow:hidden;display:flex;flex-direction:column} .offer .tagline{font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-600)} .offer .big{font-family:var(--font-display);font-weight:800;font-size:clamp(2.2rem,4vw,3rem);color:var(--ink);line-height:1;margin:10px 0} .offer p{color:var(--slate-600);font-size:15px;flex:1} .offer .terms{font-size:12px;color:var(--slate-400);margin-top:14px} .offer.highlight{background:linear-gradient(135deg,var(--navy-800),var(--blue-700));color:#fff;border:none} .offer.highlight .tagline{color:#9fc3ff} .offer.highlight .big,.offer.highlight p{color:#fff} .offer.highlight .terms{color:#a8c5ee} /* legal prose */ .legal{max-width:820px;margin-inline:auto} .legal h2{font-size:1.5rem;margin:36px 0 14px} .legal h2:first-child{margin-top:0} .legal p,.legal li{color:var(--slate-600);font-size:16px;line-height:1.7;margin-bottom:14px} .legal ul{list-style:disc;padding-left:22px;margin-bottom:16px} .legal .note-box{background:var(--blue-50);border:1px solid var(--blue-100);border-radius:12px;padding:16px 20px;color:var(--blue-700);font-size:14.5px} @media(max-width:900px){ .twocol{grid-template-columns:1fr} .contact-grid{grid-template-columns:1fr} .post-grid{grid-template-columns:1fr 1fr} .post.featured{flex-direction:column} .post.featured .pimg{min-height:220px} } @media(max-width:600px){ .post-grid{grid-template-columns:1fr} } /* ========================================================= v3 ADDITIONS — logo, mega-menu, comparison, cities, NAP, SEO text ========================================================= */ /* uploaded logo */ .brand-logo{height:42px;width:auto;display:block} .t-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none} .site-footer .brand-logo{filter:brightness(0) invert(1)} .lp-img{padding:0;background:none} .lp-img img{max-height:34px;max-width:160px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.7;transition:.2s} .lp-img:hover img{filter:none;opacity:1} /* trust-logo strip — consistent centered, wrapping row in every context (hero + footer) */ .logos-strip{display:flex;align-items:center;justify-content:center;gap:22px 30px;flex-wrap:wrap} .footer-partners .logos-strip{gap:18px 30px} .footer-partners .lp-img img{filter:brightness(0) invert(1);opacity:.6} .footer-partners .lp-img:hover img{opacity:.95} /* mega menu (Movers) */ .nav-item.has-mega{position:static} .megamenu{position:absolute;top:calc(100% - 4px);left:50%;transform:translateX(-50%) translateY(8px);width:min(940px,calc(100vw - 40px));background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);padding:22px;opacity:0;visibility:hidden;transition:.18s;z-index:70} .nav-item.has-mega:hover .megamenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 26px} .mega-col h5{font-family:var(--font-display);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-500);margin:6px 8px 8px;font-weight:600} .megamenu a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:9px;font-size:14.5px;font-weight:500;color:var(--slate-700)} .megamenu a:hover{background:var(--blue-50);color:var(--blue-700)} .megamenu a svg{width:16px;height:16px;color:var(--blue-500);flex:none} .mega-foot{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px} .mega-foot .t{font-size:14px;color:var(--slate-600)} .mega-foot .t b{color:var(--ink);font-family:var(--font-display)} /* comparison table (Best X movers) */ .cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);background:#fff} .cmp{width:100%;border-collapse:collapse;min-width:680px} .cmp th,.cmp td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:15px;vertical-align:middle} .cmp thead th{font-family:var(--font-display);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--slate-500);background:var(--bg-soft)} .cmp tbody tr:last-child td{border-bottom:none} .cmp .co{display:flex;align-items:center;gap:13px} .cmp .co .lg{width:46px;height:46px;border-radius:10px;flex:none;background:repeating-linear-gradient(135deg,var(--blue-50) 0 8px,#fff 8px 16px);border:1px solid var(--line)} .cmp .co .nm{font-family:var(--font-display);font-weight:700;font-size:15.5px} .cmp .co .sub{font-size:12.5px;color:var(--slate-500)} .cmp .rate{font-family:var(--font-display);font-weight:700;color:var(--ink)} .cmp .rate svg{width:14px;height:14px;color:#f5a623;vertical-align:-2px;margin-right:2px} .cmp .badge-best{display:inline-block;background:var(--green-50);color:var(--green-600);font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;font-family:var(--font-display);margin-left:6px} .cmp td .btn{padding:10px 18px;font-size:14px} /* city grid */ .city-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .city{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 18px;background:#fff;border:1px solid var(--line);border-radius:12px;font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--slate-700);transition:.15s} .city:hover{border-color:var(--blue-200);background:var(--blue-50);color:var(--blue-700);transform:translateY(-2px)} .city svg{width:16px;height:16px;color:var(--blue-500)} /* Buttons — small variant (used in compact cards) */ .btn-sm{padding:9px 14px;font-size:13.5px;border-radius:10px} /* Services & pricing (state / city pages) */ .svc-block{padding:22px 0;border-top:1px solid var(--line)} .svc-block:first-child{border-top:0} .svc-block-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap} .svc-block-head h3{font-family:var(--font-display);font-size:20px} .svc-range{font-family:var(--font-display);font-weight:700;color:var(--blue-600);font-size:16px;white-space:nowrap} .svc-desc{color:var(--slate-600);margin:6px 0 0;font-size:15px} .svc-co-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px} .svc-co{display:flex;flex-direction:column;align-items:flex-start;gap:10px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:16px} .svc-co-top{display:flex;align-items:center;justify-content:space-between;width:100%;gap:10px;min-height:34px} .svc-co-logo{display:block;width:88px;height:34px;background-size:contain;background-repeat:no-repeat;background-position:left center} .svc-co-rating{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-display);font-weight:700;color:var(--navy-800);font-size:14px} .svc-co-rating svg{width:15px;height:15px;color:#f5a623;fill:#f5a623} .svc-co-name{font-family:var(--font-display);font-weight:700;font-size:15px} .svc-co-name a{color:inherit} /* Top-rated partner rows (Movers hub) */ .top-picks{display:flex;flex-direction:column;gap:14px} .top-pick{display:grid;grid-template-columns:44px 120px 1fr auto;align-items:center;gap:22px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:20px 24px;transition:box-shadow .2s,border-color .2s} .top-pick:hover{box-shadow:var(--shadow);border-color:var(--blue-200)} .tp-rank{font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--blue-600);text-align:center} .tp-logo-wrap{height:54px;display:flex;align-items:center} .tp-logo{display:block;width:120px;height:54px;background-size:contain;background-repeat:no-repeat;background-position:left center} .tp-name{font-family:var(--font-display);font-weight:700;font-size:18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .tp-name a{color:inherit} .tp-flag{font-family:var(--font-body);font-weight:700;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--green-600);background:var(--green-50);padding:3px 9px;border-radius:999px} .tp-best{color:var(--slate-500);font-size:14px;margin-top:2px} .tp-pros{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px} .tp-pros li{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--slate-700)} .tp-pros svg{width:15px;height:15px;color:var(--green-600);flex:none} .tp-side{display:flex;flex-direction:column;align-items:flex-end;gap:10px} .tp-rating{display:flex;align-items:center;gap:5px;font-family:var(--font-display);color:var(--navy-800)} .tp-rating svg{width:18px;height:18px;color:#f5a623;fill:#f5a623} .tp-rating strong{font-size:20px} .tp-rating span{font-size:13px;color:var(--slate-400)} /* State / city link directories */ .dir-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px 26px} .dir-link{display:block;padding:9px 4px;font-weight:500;font-size:15px;color:var(--slate-700);border-bottom:1px solid var(--line)} .dir-link:hover{color:var(--blue-700)} /* collapsible long lists (city directories / route grids) */ .dir-grid.is-collapsed .is-hidden,.city-grid.is-collapsed .is-hidden{display:none} .list-toggle{display:inline-flex;align-items:center;gap:8px;margin:20px auto 0;padding:11px 22px;background:#fff;border:1px solid var(--line);border-radius:999px;font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--blue-700);cursor:pointer;transition:border-color .15s,background .15s,transform .15s} .list-toggle:hover{border-color:var(--blue-200);background:var(--blue-50);transform:translateY(-1px)} .list-toggle svg{width:16px;height:16px;transition:transform .2s} .list-toggle.is-open svg{transform:rotate(180deg)} .section .container .list-toggle{display:flex;width:max-content} /* ===== SEO comparison-page sections ===== */ /* quick answer */ .quick-answer{max-width:680px;margin:0 auto 30px;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow);overflow:hidden} .quick-answer ul{list-style:none;margin:0;padding:0} .quick-answer li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 24px;border-top:1px solid var(--line)} .quick-answer li:first-child{border-top:none} .quick-answer .qa-k{color:var(--slate-600);font-size:15px} .quick-answer .qa-v{font-family:var(--font-display);font-weight:700;color:var(--blue-700);text-align:right} .quick-answer .qa-v.qa-plain{color:var(--slate-800)} .quick-answer .qa-r{display:inline-block;margin-left:8px;background:var(--blue-50);color:var(--blue-700);border-radius:999px;padding:1px 9px;font-size:13px} .trust-stats{max-width:900px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow);padding:22px 8px} /* comparison table */ .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-lg);border:1px solid var(--line)} .compare-table{width:100%;border-collapse:collapse;background:#fff;min-width:760px} .compare-table th,.compare-table td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:14.5px;white-space:nowrap} .compare-table thead th{background:var(--blue-50,#eef4fe);font-family:var(--font-display);font-weight:700;color:var(--slate-700);font-size:13px} .compare-table tbody tr:last-child td{border-bottom:none} .compare-table .ct-co a{font-weight:700;color:var(--blue-700)} .compare-table .ct-c{text-align:center} .compare-table .tick-yes{color:var(--green-600,#0e7a4f)} .compare-table .tick-yes svg{width:17px;height:17px} .btn-sm{padding:7px 14px;font-size:13px} /* methodology weights */ .method-weights{list-style:none;margin:26px auto 0;padding:0;max-width:640px;display:grid;gap:14px} .method-weights .mw-top{display:flex;justify-content:space-between;font-size:15px;color:var(--slate-700);margin-bottom:6px} .method-weights .mw-top strong{color:var(--blue-700)} .method-weights .mw-bar{height:8px;border-radius:999px;background:var(--blue-50,#eef4fe);overflow:hidden} .method-weights .mw-bar span{display:block;height:100%;background:var(--blue-500,#2f6fed);border-radius:999px} /* price factors */ .pf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .pf-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px} .pf-card h3{font-family:var(--font-display);font-size:16px;margin:0 0 6px;color:var(--slate-800)} .pf-card p{margin:0;font-size:14px;color:var(--slate-600);line-height:1.5} /* local vs long-distance */ .ll-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow);padding:28px} .ll-card h3{font-family:var(--font-display);font-size:20px;margin:0 0 10px} .ll-card>p{color:var(--slate-600);font-size:15.5px;margin:0 0 6px} .ll-card .ticks li svg{color:var(--green-500)} /* internal link mesh */ .mesh-grid{margin-top:4px} /* author box */ .author-box{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow);padding:28px clamp(20px,3vw,34px)} .author-box .ab-head{display:flex;align-items:center;gap:16px} .author-box .ab-avatar{width:64px;height:64px;border-radius:50%;flex:none;object-fit:cover} .author-box .ab-kicker{display:block;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--slate-400,#94a3b8);font-weight:600} .author-box .ab-name{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--blue-700)} .author-box .ab-bio{color:var(--slate-600);font-size:15.5px;margin:16px 0 0;line-height:1.6} .author-box .ab-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px} .author-box .ab-links a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;color:var(--slate-600);transition:color .15s,border-color .15s,background .15s} .author-box .ab-links a:hover{color:#fff;background:var(--blue-600);border-color:var(--blue-600)} .author-box .ab-links svg{width:18px;height:18px} /* author archive page */ .author-hero{display:flex;align-items:center;gap:28px;margin-top:10px} .author-hero .ah-photo .ap-photo{width:120px;height:120px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.25)} .author-hero .ah-kicker{display:block;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--blue-200,#b8cdf0);font-weight:600;margin-bottom:6px} .author-hero h1{margin:0 0 10px} .author-hero .ah-links{margin-top:18px} .ab-links{display:flex;flex-wrap:wrap;gap:10px} .ab-links a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;color:var(--slate-600);transition:color .15s,border-color .15s,background .15s} .ab-links a:hover{color:#fff;background:var(--blue-600);border-color:var(--blue-600)} .ab-links svg{width:18px;height:18px} .author-hero .ah-links a{border-color:rgba(255,255,255,.3);color:#fff} .author-hero .ah-links a:hover{background:#fff;color:var(--blue-700);border-color:#fff} .author-posts .post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s} .author-posts .post-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(16,24,40,.1)} .author-posts .pc-media{aspect-ratio:16/9;background:var(--blue-50,#eef4fe) center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:var(--blue-300,#9bbcf5)} .author-posts .pc-media svg{width:40px;height:40px} .author-posts .pc-body{padding:20px 22px;display:flex;flex-direction:column;gap:8px;flex:1} .author-posts .pc-body h3{font-family:var(--font-display);font-size:18px;color:var(--slate-800);margin:0} .author-posts .pc-body p{color:var(--slate-600);font-size:14.5px;margin:0;line-height:1.5} .author-posts .pc-meta{margin-top:auto;font-size:13px;color:var(--slate-400);font-weight:600} .author-pagination{display:flex;justify-content:center;gap:8px;margin-top:34px} .author-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:10px;color:var(--slate-700);font-weight:600;text-decoration:none} .author-pagination .page-numbers.current{background:var(--blue-600);color:#fff;border-color:var(--blue-600)} @media(max-width:640px){.author-hero{flex-direction:column;text-align:center;gap:18px}.author-hero .ah-links{justify-content:center}} /* editorial story body (About / Our Story — post-like content) */ .story-featured{max-width:900px;margin:0 auto 34px;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)} .story-featured img{display:block;width:100%;height:auto} .story-body{max-width:760px;margin:0 auto} .story-body img{max-width:100%;height:auto;border-radius:var(--r-lg);margin:24px 0;box-shadow:var(--shadow)} .story-body h2{font-family:var(--font-display);font-size:clamp(1.5rem,2.6vw,2rem);margin:34px 0 14px} .story-body h3{font-family:var(--font-display);font-size:1.3rem;margin:26px 0 10px} .story-body p{margin:0 0 18px;font-size:17px;line-height:1.7;color:var(--slate-700)} .story-body ul,.story-body ol{margin:0 0 18px;padding-left:22px;color:var(--slate-700)} .story-body li{margin:0 0 8px;line-height:1.6} .story-body blockquote{margin:24px 0;padding:14px 22px;border-left:4px solid var(--blue-400);background:var(--blue-50,#eef4fe);border-radius:0 10px 10px 0;font-size:18px;color:var(--slate-700)} .story-body figure{margin:24px 0} .story-body figcaption{font-size:13.5px;color:var(--slate-400);text-align:center;margin-top:8px} .form-embed{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden} .form-embed iframe{display:block;width:100%;border:0} /* authors listing page */ .authors-list{display:grid;grid-template-columns:1fr 1fr;gap:22px} .author-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow);padding:26px clamp(20px,2.4vw,30px);display:flex;flex-direction:column;gap:18px} .author-card .al-head{display:flex;gap:18px;align-items:flex-start} .author-card .al-photo{flex:none} .author-card .al-avatar{width:88px;height:88px;border-radius:50%;object-fit:cover} .author-card .al-name{font-family:var(--font-display);font-size:20px;margin:0 0 6px} .author-card .al-name a{color:var(--slate-900,#0f172a)} .author-card .al-name a:hover{color:var(--blue-700)} .author-card .al-bio{color:var(--slate-600);font-size:14.5px;line-height:1.55;margin:0 0 12px} .author-card .al-links{gap:8px} .author-card .al-links a{width:34px;height:34px} .author-card .al-links svg{width:16px;height:16px} .author-card .al-recent{border-top:1px solid var(--line);padding-top:16px} .author-card .al-recent-label{display:block;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--slate-400,#94a3b8);font-weight:600;margin-bottom:8px} .author-card .al-recent ul{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:7px} .author-card .al-recent li a{color:var(--slate-700);font-size:14.5px;font-weight:500} .author-card .al-recent li a:hover{color:var(--blue-700)} .author-card .al-all{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--blue-700)} .author-card .al-all svg{width:15px;height:15px} @media(max-width:720px){.authors-list{grid-template-columns:1fr}} @media(max-width:400px){.author-card .al-head{flex-direction:column}.author-card .al-avatar{width:72px;height:72px}} @media(max-width:900px){.pf-grid{grid-template-columns:1fr 1fr}} @media(max-width:520px){.pf-grid{grid-template-columns:1fr}.quick-answer li{flex-direction:column;align-items:flex-start;gap:4px}.quick-answer .qa-v{text-align:left}} /* quick city search */ .city-search-wrap{position:relative;max-width:440px;margin:0 auto 24px} .city-search-ic{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--slate-400,#94a3b8);pointer-events:none;display:inline-flex} .city-search-ic svg{width:18px;height:18px} .city-search{width:100%;padding:13px 18px 13px 46px;border:1px solid var(--line);border-radius:999px;font-family:var(--font-body);font-size:15px;background:#fff;color:var(--slate-800,#1f2937);box-shadow:0 1px 2px rgba(16,24,40,.04)} .city-search::placeholder{color:var(--slate-400,#94a3b8)} .city-search:focus{outline:none;border-color:var(--blue-400);box-shadow:0 0 0 3px var(--blue-100)} .is-filtered-out{display:none !important} .dir-grid.is-searching .is-hidden{display:block} .city-grid.is-searching .is-hidden{display:flex} @media(max-width:760px){ .top-pick{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:18px} .tp-rank{text-align:left;font-size:18px} .tp-logo{width:104px;height:42px} .tp-side{flex-direction:row;align-items:center;justify-content:space-between} .tp-side .btn{flex:1;justify-content:center;margin-left:14px} .dir-grid{grid-template-columns:1fr 1fr;gap:2px 18px} .svc-co-grid{grid-template-columns:1fr 1fr;gap:10px} } /* NAP / map block */ .nap{display:grid;grid-template-columns:1.2fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);background:#fff} .nap .map{min-height:300px;position:relative;background: linear-gradient(0deg,rgba(27,86,196,.04),rgba(27,86,196,.04)), repeating-linear-gradient(0deg,rgba(74,90,114,.10) 0 1px,transparent 1px 34px), repeating-linear-gradient(90deg,rgba(74,90,114,.10) 0 1px,transparent 1px 34px), var(--bg-soft)} .nap .map::after{content:"📍 " attr(data-label);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:99px;padding:8px 16px;font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--blue-700);white-space:nowrap} .nap .map iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .nap .info{padding:clamp(24px,3vw,36px)} .nap .info h3{font-size:1.3rem;margin-bottom:6px} .nap .info .org{font-family:var(--font-display);font-weight:700;color:var(--blue-700);margin-bottom:14px} .nap-row{display:flex;gap:13px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line)} .nap-row:first-of-type{border-top:none} .nap-row .ic{width:38px;height:38px;border-radius:10px;background:var(--blue-50);color:var(--blue-600);display:grid;place-items:center;flex:none} .nap-row .ic svg{width:18px;height:18px} .nap-row .lbl{font-size:11.5px;color:var(--slate-500);font-family:var(--font-display);font-weight:600;letter-spacing:.04em;text-transform:uppercase} .nap-row .val{font-size:15.5px;color:var(--ink);font-weight:500} /* SEO text block */ .seo-text{max-width:880px;margin-inline:auto} .seo-text h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:30px 0 12px} .seo-text h2:first-child{margin-top:0} .seo-text h3{font-size:1.2rem;margin:22px 0 8px;font-family:var(--font-display);font-weight:600} .seo-text p,.seo-text li{color:var(--slate-600);font-size:16px;line-height:1.7;margin-bottom:14px} .seo-text ul{list-style:disc;padding-left:22px;margin-bottom:16px} .seo-text a{color:var(--blue-600);font-weight:500;text-decoration:underline;text-underline-offset:2px} @media(max-width:1080px){ .megamenu{width:min(680px,calc(100vw - 40px))} } @media(max-width:900px){ .city-grid{grid-template-columns:1fr 1fr} .nap{grid-template-columns:1fr} .nap .map{min-height:220px} } @media(max-width:600px){ .city-grid{grid-template-columns:1fr} } /* ============================================================ MOBILE OPTIMIZATION (down to 320px) ============================================================ */ h1,h2,h3,h4{overflow-wrap:break-word} @media(max-width:560px){ :root{--gutter:18px} body{font-size:15.5px} .section{padding-block:clamp(38px,9vw,56px)} .btn{font-size:15px;padding:13px 20px} .btn-lg{padding:15px 22px;font-size:15.5px} .h-display{font-size:clamp(2rem,9vw,2.7rem)} .h1{font-size:clamp(1.9rem,8vw,2.4rem)} .h2{font-size:clamp(1.5rem,6.5vw,2rem)} .lead{font-size:1.02rem} .eyebrow{font-size:12px} .pill{font-size:12px;padding:7px 12px} /* sub-page hero */ .subhero .container{padding-block:clamp(30px,9vw,52px)} .subhero h1{font-size:clamp(1.8rem,8vw,2.4rem)} .subhero .actions{flex-direction:column;align-items:stretch} .subhero .actions .btn{width:100%} .breadcrumb{font-size:12.5px;flex-wrap:wrap;row-gap:4px} /* cards / quote */ .card,.feature{padding:22px} .quote-card{padding:20px;border-radius:20px} .size-modal .panel{padding:22px} .size-opts{grid-template-columns:1fr 1fr} /* sections */ .section-head{margin-bottom:28px} .cta-band{padding:30px 22px} .cta-band .btn{width:100%} .cta-band>div>div:first-child{width:100%} /* trust logos — small & tidy on phones */ .hero .logos-strip,.logos-strip{gap:14px 20px;padding-block:22px} .lp-img img{max-height:24px;max-width:40vw} .footer-partners .logos-strip{gap:16px 22px} .footer-partners .lp-img img{max-height:26px} /* stats */ .stat .num{font-size:1.9rem} .stat{padding:12px 14px} /* steps */ .step-media{min-height:200px} /* nap + table */ .nap .map{min-height:190px} .nap .info{padding:22px} .cmp th,.cmp td{padding:13px 12px;font-size:13.5px} .cmp .co .lg{width:38px;height:38px} .cmp td .btn{padding:9px 13px;font-size:13px} /* testimonials */ .tcard{padding:22px} /* contact */ .contact-form-card{padding:22px} .info-card{padding:20px} /* legal / seo readable */ .seo-text h2{font-size:clamp(1.4rem,6vw,1.8rem)} /* SEO comparison-page blocks */ .grid-3{grid-template-columns:1fr;gap:14px} .author-box{padding:22px} .author-box .ab-avatar,.author-box .ab-head img{width:52px;height:52px} .ll-card{padding:22px} .pf-card{padding:18px} .quick-answer li{padding:13px 18px} .trust-stats{padding:14px 6px} .compare-table th,.compare-table td{padding:11px 12px;font-size:13.5px} .method-weights{margin-top:20px} .story-body p{font-size:16px} .story-featured{margin-bottom:24px} } @media(max-width:360px){ :root{--gutter:13px} .section{padding-block:clamp(32px,8vw,44px)} .section--tight{padding-block:clamp(22px,6vw,34px)} .btn,.btn-lg{width:100%} .actions{flex-direction:column;align-items:stretch;gap:10px} .h1,.subhero h1{font-size:clamp(1.55rem,8vw,1.95rem)} .h2{font-size:clamp(1.35rem,7vw,1.7rem)} .section-head{margin-bottom:22px} .card,.feature,.author-box,.ll-card,.contact-form-card{padding:18px} .trust-stats .stat .num{font-size:1.5rem} .quick-answer .qa-v{font-size:14.5px} .list-toggle,.city-search{font-size:14px} } @media(max-width:400px){ :root{--gutter:14px} .stats{grid-template-columns:1fr 1fr;gap:6px 0} .footer-grid{grid-template-columns:1fr;gap:26px} .footer-bottom{flex-direction:column;gap:8px} .brand{font-size:17px} .brand .mark{width:34px;height:34px} .nav{height:64px} .site-header .btn-primary{padding:11px 16px;font-size:14px} .stat .num{font-size:1.7rem} .h-display,.subhero h1{font-size:clamp(1.7rem,8.5vw,2.1rem)} } @media(max-width:340px){ :root{--gutter:12px} .nav-phone{display:none} } /* ===== byline (author + auto-updating date) on guide pages ===== */ .byline{display:flex;align-items:center;gap:12px;margin:20px 0 2px} .by-av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--blue-400),var(--blue-700));flex:none;border:2px solid rgba(255,255,255,.3);position:relative} .by-av::after{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-linear-gradient(135deg,rgba(255,255,255,.12) 0 5px,transparent 5px 10px)} .by-av-img{width:42px;height:42px;border-radius:50%;flex:none;object-fit:cover;border:2px solid rgba(255,255,255,.35)} .by-meta{display:flex;flex-direction:column;line-height:1.35} .by-author{font-family:var(--font-display);font-weight:600;font-size:14.5px;color:#fff} .by-author span{color:#9fb6d6;font-weight:400} .by-date{font-size:13px;color:#9fb6d6} /* ===== company profile: at-a-glance + pros/cons ===== */ .glance{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow);padding:30px clamp(20px,3vw,40px);margin-top:-44px;position:relative;z-index:5} .glance .stats .stat .num{font-size:clamp(1.4rem,2.4vw,1.9rem)} .proscons{display:grid;grid-template-columns:1fr 1fr;gap:22px} .pc-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px} .pc-card h3{display:flex;align-items:center;gap:9px;margin-bottom:14px;font-size:1.2rem} .pc-card h3 svg{width:22px;height:22px} .pc-card.pros h3{color:var(--green-600)} .pc-card.cons h3{color:#c2506a} .pc-list li{display:flex;gap:11px;align-items:flex-start;padding:8px 0;color:var(--slate-700);font-size:15.5px} .pc-list li svg{width:20px;height:20px;flex:none;margin-top:1px} .pros .pc-list li svg{color:var(--green-500)} .cons .pc-list li svg{color:#d76a83} .rating-row{display:flex;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap} .rating-row .big{font-family:var(--font-display);font-weight:800;font-size:1.8rem;color:#fff} .rating-row .stars{display:flex;gap:2px;color:#f5a623} .rating-row .stars svg{width:18px;height:18px} .rating-row .cnt{color:#bcd1ee;font-size:14px} @media(max-width:760px){.proscons{grid-template-columns:1fr}} /* live Google map (replaces placeholder when configured) */ .nap .map[data-has-map]::after{display:none} /* platform ratings (company pages + comparison) */ .rateplat{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .rp{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;text-align:center;box-shadow:var(--shadow-sm)} .rp .pf{font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--slate-500);letter-spacing:.02em} .rp .sc{font-family:var(--font-display);font-weight:800;font-size:2rem;color:var(--ink);line-height:1;margin:8px 0 4px} .rp .stars{display:flex;gap:1px;justify-content:center;color:#f5a623;margin-bottom:6px} .rp .stars svg{width:14px;height:14px} .rp .cnt{font-size:12.5px;color:var(--slate-500)} @media(max-width:680px){.rateplat{grid-template-columns:1fr 1fr}} /* ===== Front-page (editorial) hero — ported from the static homepage ===== */ .hero{position:relative;background:#fff;overflow:hidden;padding-top:clamp(40px,6vw,72px)} .hero::before{content:"";position:absolute;top:-220px;left:50%;transform:translateX(-50%);width:1100px;height:560px;background:radial-gradient(ellipse at center,rgba(80,137,236,.14),transparent 65%);pointer-events:none} .hero-inner{position:relative;text-align:center;max-width:980px;margin-inline:auto;padding-bottom:clamp(20px,3vw,36px)} .hero h1{font-size:clamp(2.4rem,6vw,4.6rem);font-weight:800;line-height:1;letter-spacing:-.03em;margin-top:22px} .hero h1 .accent{color:var(--blue-600)} .hero .lead{margin:24px auto 0;max-width:600px;font-size:clamp(1.05rem,1.5vw,1.3rem)} .hero-trust{display:flex;align-items:center;gap:18px 26px;margin-top:28px;flex-wrap:wrap;justify-content:center} .hero-trust .t{display:flex;align-items:center;gap:9px;font-weight:600;font-size:14.5px;color:var(--slate-700);font-family:var(--font-display)} .hero-trust .t svg{width:20px;height:20px;flex:none;color:var(--green-500)} .bar-wrap{max-width:1060px;margin:clamp(30px,4vw,46px) auto 0;position:relative} .bar-wrap .quote-card{text-align:left} .quote-form.bar{padding:14px;border-radius:var(--r-xl)} .quote-form.bar .quote-head,.quote-form.bar .quote-steps{display:none} .quote-form.bar .q-step[data-step="1"] .q-grid{display:none} .bar-row{display:grid;grid-template-columns:1fr 1fr 1fr 1fr auto;gap:10px;align-items:end} .bar-row .field{margin-bottom:0} .bar-row .field label{margin-bottom:6px} .quote-form.bar .q-step[data-step="1"] .q-error{margin-left:4px} .quote-form.bar .btn-block{width:auto} .bar-go{height:52px;align-self:end} .quote-form.bar .q-trust{display:none} .quote-form.bar .q-step[data-step="2"]{max-width:560px;margin-inline:auto;text-align:left;padding-top:8px} .quote-form.bar .q-success{padding:30px} .hero-media{margin-top:clamp(28px,4vw,44px)} .hero-media .ph{min-height:clamp(260px,38vw,460px);border-radius:var(--r-xl)} .hero .logos-strip{display:flex;align-items:center;justify-content:center;gap:24px 30px;flex-wrap:wrap;padding-block:36px;opacity:.8} /* base logos strip (used in hero + footer): always a centered wrapping row */ .logos-strip{display:flex;align-items:center;justify-content:center;gap:26px 40px;flex-wrap:wrap} .logos-strip .lp{display:inline-flex;align-items:center;justify-content:center} .logos-strip .lp-img img,.logos-strip .lp img{max-height:64px;width:auto;object-fit:contain} .site-footer .logos-strip{justify-content:flex-start;gap:22px 36px} .site-footer .logos-strip .lp-img img,.site-footer .logos-strip .lp img{max-height:54px;filter:brightness(0) invert(1);opacity:.85} .site-footer .logos-strip a:hover img{opacity:1} /* safety net: any stray inline icon stays small in flex text rows */ .hero-trust svg,.t svg{max-width:22px;max-height:22px} @media(max-width:760px){.bar-row{grid-template-columns:1fr 1fr}.bar-go{grid-column:1/-1}} @media(max-width:560px){.hero h1{font-size:clamp(2rem,9vw,3rem)}.hero .lead{font-size:1.05rem}.bar-wrap{max-width:100%}.bar-row{grid-template-columns:1fr;gap:12px}}