/* DN Van Lines — single shared stylesheet.
Inlined via partials/header.php for first-paint perf; every byte counts.
============================================================================
TABLE OF CONTENTS
============================================================================
1. Tokens & resets :root, *, html, body
2. Buttons .btn, .btn-attention (legacy)
3. Header & navigation header, .nav, .mega-panel, .m-drawer
4. Mobile drawer
5. Page wrap & layout primitives .wrap, .crumbs, .alert
6. Service-page layout (.svc-*)
7. State-page layout (.st-*)
8. Long-form prose & how-to helpers .prose, .video-embed, .check-list
9. Pill list & stats band .region-cities, .stats-band
10. Service-card grids (.svc-card-v2)
11. HOW-TO PACK GUIDES (V2 — visual workshop)
.howto-v2, .hwt-* (kitchen + 11
topic pages). Hero, supplies,
video feature, steps, pro-tip,
mistakes, navy CTA. Share-bar
sticky-pill belongs to this set.
12. MERGED INLINE STYLES (extracted) Per-page styles previously inline:
12a. Partial modules .as-*, .rv-*, .qw, .ac-*
12b. Team-member bio pages .team-hero, .team-bio, .pp-*
12c. Location pages
12d. Quote flow
12e. Resources (FAQ, blog, how-to-videos)
12f. About pages
12g. Partner pages
12h. Legal pages
12i. Homepage
13. News posts .svc-hero-news, .post-body
============================================================================
When adding new styles, append to the most-specific category. If you're
tempted to inline-style a page, add a class here instead and prefix it so
the source file (or feature) is obvious.
============================================================================ */
:root{
--navy:#15324a;
--navy-2:#0f2942;
--navy-deep:#091929;
--blue:#1f6fae;
--blue-2:#1d4ed8;
--gold:#f2b84b;
--gold-2:#e0a431;
--ink:#1d2730;
--muted:#66717b;
--bg:#fafbfc;
--line:#e5ebf1;
--line-2:#f1f5f9;
--white:#fff;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
color:var(--ink);
line-height:1.55;
background:var(--white);
-webkit-font-smoothing:antialiased;
font-feature-settings:"cv11","ss03";
letter-spacing:-.005em;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
/* ============================================================
LAYOUT PRIMITIVES
============================================================ */
.wrap{max-width:1200px;margin:auto;padding:0 24px}
section{padding:64px 0 80px}
.eyebrow{color:var(--gold);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.12em}
.muted{color:var(--muted)}
.section-title,h1,h2{color:var(--navy);letter-spacing:-.025em;line-height:1.1;font-weight:800}
.section-title{font-size:38px;margin:0 0 16px;text-wrap:balance}
.section-head{margin-bottom:48px}
.section-head .kicker,.section-head .eyebrow{margin-bottom:10px;display:inline-block}
.section-head h2{font-size:38px;margin-bottom:14px;text-wrap:balance}
.section-head p{font-size:17px;color:var(--muted);max-width:560px;line-height:1.6}
/* ============================================================
BUTTONS
.btn / .btn.primary (gold) / .btn.secondary (outline white)
.btn.lg — hero-size variant
.btn.submit — shimmer animation, used on form CTAs
.btn-attention — legacy reusable shimmer wrapper (kept for older pages)
============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 18px;border-radius:8px;font-weight:600;font-size:14px;cursor:pointer;transition:all .15s;border:1px solid transparent;font-family:inherit;letter-spacing:-.005em;white-space:nowrap;text-decoration:none}
.btn.primary{background:var(--gold);color:var(--navy-deep)}
.btn.primary:hover{background:var(--gold-2);color:#fff;transform:translateY(-1px);box-shadow:0 8px 22px rgba(242,184,75,.35)}
.btn.secondary{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.btn.secondary:hover{background:rgba(255,255,255,.08);border-color:#fff}
.btn.ghost{background:transparent;color:var(--navy);border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--navy);background:#fff}
.btn.blue{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn.blue:hover{background:#185c92;border-color:#185c92;color:#fff;transform:translateY(-1px);box-shadow:0 8px 22px rgba(31,111,174,.32)}
.btn.lg{padding:16px 28px;font-size:16px}
.btn.primary.submit{position:relative;overflow:hidden}
.btn.primary.submit::after{
content:"";position:absolute;top:0;left:0;
width:55%;height:100%;
background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);
transform:translateX(-150%) skewX(-18deg);
animation:btn-shimmer 5s ease-out infinite;
pointer-events:none;
}
@keyframes btn-shimmer{
0% {transform:translateX(-150%) skewX(-18deg)}
35% {transform:translateX(280%) skewX(-18deg)}
100% {transform:translateX(280%) skewX(-18deg)}
}
/* Legacy .btn-attention — kept so existing pages (apply, careers, get-a-quote)
continue to render their soft-pulse CTA. */
.btn-attention{position:relative;overflow:hidden;--attn-shimmer:255,232,170}
.btn-attention > *{position:relative;z-index:2}
.btn-attention::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0%,transparent 35%,rgba(var(--attn-shimmer),.32) 50%,transparent 65%,transparent 100%);transform:translateX(-110%);animation:btn-attention-shimmer 7s ease-in-out infinite;pointer-events:none;z-index:1}
.btn-attention:disabled::after,.btn-attention[aria-disabled="true"]::after{animation:none}
@keyframes btn-attention-shimmer{0%,60%{transform:translateX(-110%)}82%{transform:translateX(110%)}100%{transform:translateX(110%)}}
@media (prefers-reduced-motion: reduce){
.btn.primary.submit::after,
.btn-attention::after{display:none}
}
/* ============================================================
CARDS — generic, used across many pages
============================================================ */
.card{border:1px solid var(--line);border-radius:14px;padding:24px;background:#fff}
.card h3{color:var(--navy);margin-top:0}
/* ============================================================
TOPBAR — phone + service-area links above the header
============================================================ */
.topbar{background:var(--navy-deep);color:#cfdbe7;font-size:13px;font-weight:500}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding:9px 24px;gap:16px;flex-wrap:wrap}
.topbar a{color:#fff;font-weight:600;border-bottom:1px solid transparent;transition:border-color .15s,color .15s}
.topbar a:hover{border-bottom-color:rgba(255,255,255,.6);color:var(--gold)}
.topbar .areas{color:#8da4bd}
.topbar .areas a{color:#cfdbe7;font-weight:500;margin:0 4px}
/* ============================================================
HEADER + NAVIGATION
Spans full viewport for consistent edge padding regardless of
.wrap centering at large sizes.
============================================================ */
header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
header .wrap{max-width:none}
.nav{display:flex;align-items:center;justify-content:flex-start;padding:4px 32px 2px 0;gap:24px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;color:var(--navy);font-size:18px;letter-spacing:-.01em;padding-left:14px;flex-shrink:0}
.brand img{height:84px;width:auto;display:block;flex-shrink:0;max-width:none}
/* Hamburger — desktop hidden, mobile visible */
.hamburger{
display:none;
flex-direction:column;justify-content:center;align-items:center;
width:44px;height:44px;background:transparent;border:0;
border-radius:8px;cursor:pointer;gap:5px;margin-right:14px;
transition:background .15s;
}
.hamburger:hover{background:rgba(15,50,74,.06)}
.hamburger span{display:block;width:22px;height:2.5px;background:var(--ink);border-radius:2px}
/* ============================================================
MEGA MENU
.nav ul — top-level link row, anchored right
li.has-mega — top-level item with a panel
.mega-panel — single white box, multi-section, no fly-outs
.mega-panel.right — anchor to right edge (last items)
.mega-grid.cols-{2,3,4} — column layouts inside panels
============================================================ */
.nav ul{display:flex;gap:32px;list-style:none;margin-left:auto}
.nav ul a{font-weight:600;font-size:15px;color:var(--ink);position:relative;padding:6px 0;transition:color .15s;text-decoration:none}
.nav ul a:hover{color:var(--blue)}
.nav ul a.active{color:var(--navy)}
.nav ul li{position:relative;display:flex;align-items:center}
.nav ul li.has-mega > a{padding-right:18px}
.nav ul li.has-mega > a::after{
content:"";display:inline-block;
position:absolute;right:0;top:50%;
width:8px;height:8px;
border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
transform:translateY(-70%) rotate(45deg);
transition:transform .15s ease;opacity:.55;
}
.nav ul li.has-mega:hover > a::after,
.nav ul li.has-mega:focus-within > a::after{transform:translateY(-30%) rotate(-135deg);opacity:1}
/* Hover bridge */
.nav ul li.has-mega::after{content:"";position:absolute;top:100%;left:-12px;right:-12px;height:14px}
.mega-panel{
position:absolute;top:calc(100% + 14px);
background:#fff;border:1px solid var(--line);border-radius:14px;
box-shadow:0 28px 60px -12px rgba(15,23,42,.18),0 4px 14px rgba(15,23,42,.06);
padding:28px 32px;
opacity:0;visibility:hidden;
transition:opacity .18s ease,transform .18s ease,visibility .18s;
pointer-events:none;z-index:60;
left:50%;transform:translateX(-50%) translateY(-6px);
}
.nav ul li.has-mega:hover > .mega-panel,
.nav ul li.has-mega:focus-within > .mega-panel{
opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:auto;
}
.mega-panel.right{left:auto;right:0;transform:translateY(-6px)}
.nav ul li.has-mega:hover > .mega-panel.right,
.nav ul li.has-mega:focus-within > .mega-panel.right{transform:translateY(0)}
.mega-grid{display:grid;gap:24px 40px}
.mega-grid.cols-2{grid-template-columns:1fr 1fr;min-width:480px}
.mega-grid.cols-3{grid-template-columns:repeat(3,1fr);min-width:640px}
.mega-grid.cols-4{grid-template-columns:repeat(4,1fr);min-width:780px}
.mega-col h4{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.mega-col ul{list-style:none;display:flex;flex-direction:column;gap:0;margin:0;padding:0}
.mega-col li{display:block;padding:0}
.mega-col li a{display:block;padding:7px 0;font-size:14px;font-weight:500;color:var(--ink);letter-spacing:-.005em;line-height:1.4;transition:color .12s,padding .12s}
.mega-col li a:hover{color:var(--blue);padding-left:4px}
.mega-col li a small{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:1px;letter-spacing:0}
/* CTA on right side of nav */
.nav-cta{display:flex;align-items:center;gap:14px}
/* ============================================================
MOBILE DRAWER
Slide-in panel from right with accordion sub-menus.
Activates at <=880 px (hamburger breakpoint).
============================================================ */
.m-drawer-overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s;z-index:90}
.m-drawer{position:fixed;top:0;right:0;bottom:0;width:min(360px,86vw);background:#fff;z-index:91;transform:translateX(100%);transition:transform .28s ease;display:flex;flex-direction:column;box-shadow:-12px 0 32px rgba(15,23,42,.14)}
body.m-drawer-open .m-drawer-overlay{opacity:1;visibility:visible}
body.m-drawer-open .m-drawer{transform:translateX(0)}
body.m-drawer-open{overflow:hidden}
.m-drawer-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line);flex-shrink:0}
.m-drawer-title{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.14em}
.m-drawer-close{background:transparent;border:0;font-size:30px;line-height:1;cursor:pointer;color:var(--ink);width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:background .15s}
.m-drawer-close:hover{background:rgba(15,50,74,.08)}
.m-drawer-nav{flex:1;overflow-y:auto;padding:6px 0}
.m-drawer-nav ul{list-style:none;margin:0;padding:0}
.m-drawer-nav > ul > li{border-bottom:1px solid var(--line)}
.m-drawer-nav a{display:block;padding:15px 22px;font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;transition:background .12s,padding-left .12s}
.m-drawer-nav a:hover{background:var(--bg)}
.m-drawer-nav .m-has-children > a{position:relative;padding-right:48px}
.m-drawer-nav .m-has-children > a::after{content:"";position:absolute;right:24px;top:50%;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-70%) rotate(45deg);transition:transform .18s ease;opacity:.55}
.m-drawer-nav .m-has-children.expanded > a::after{transform:translateY(-30%) rotate(-135deg);opacity:1}
.m-drawer-nav .m-has-children > ul{display:none;background:var(--bg);border-top:1px solid var(--line)}
.m-drawer-nav .m-has-children.expanded > ul{display:block}
.m-drawer-nav .m-has-children > ul a{padding:11px 22px 11px 38px;font-size:14px;font-weight:500;color:#3a4754}
@media (min-width:881px){
.m-drawer,.m-drawer-overlay{display:none}
}
/* ============================================================
RESPONSIVE — header / nav ladder
See trade-pro mockup for full reasoning.
============================================================ */
/* On wide viewports, snap the header inside the page content grid
(1200px max-width with 24px gutter) so the logo aligns with the
content below. Below 1280px the header keeps its edge-to-edge
layout to avoid a CTA-padding regression on the 1200-1248 range. */
@media (min-width:1280px){
header .wrap{max-width:1200px}
.brand{padding-left:24px}
}
@media (max-width:1180px){.brand img{height:76px}}
@media (max-width:1200px){.nav{padding-right:24px} .nav ul{gap:24px}}
@media (max-width:1100px){
.nav{padding-right:18px}
.nav ul{gap:18px}
.nav-cta .btn{padding:10px 12px}
}
@media (max-width:1024px){
.brand img{height:68px}
}
@media (max-width:1000px){
.nav-cta{display:none}
.nav{padding-right:24px}
.nav ul{gap:24px}
}
@media (max-width:880px){
.nav{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px;padding:6px 0 8px}
.nav::before{content:"";display:block;width:44px;flex-shrink:0;height:0}
.nav ul{display:none}
.brand{padding-left:0}
.hamburger{display:inline-flex;margin-left:0}
.nav-cta{display:flex;order:99;flex:0 0 100%;padding:0 14px;margin-top:2px}
.nav-cta .btn{width:100%;justify-content:center;padding:13px 18px;font-size:15px;border-radius:10px}
.brand img{height:64px}
}
@media (max-width:680px){
.topbar .areas{display:none}
}
@media (max-width:480px){.brand img{height:56px}}
/* ============================================================
FOOTER
.foot-brand — wordmark + phone block, sits above the grid
.foot-grid — 4 column link grid
.foot-bottom — copyright + USDOT badge row
============================================================ */
footer{background:var(--navy-deep);color:#8da4bd;padding:28px 0 16px;font-size:14px}
footer .brand{color:#fff;font-size:32px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px;padding-left:0;display:block;line-height:1.05}
.foot-brand{margin-bottom:10px;max-width:420px}
.foot-phone{margin:0;font-size:13px}
.foot-phone a{display:inline-flex;align-items:baseline;gap:8px;color:#fff;text-decoration:none;font-size:15px;font-weight:700;letter-spacing:-.005em}
.foot-phone a .label{font-size:13px;font-weight:500;color:rgba(255,255,255,.55)}
.foot-phone a:hover{color:var(--gold)}
.foot-phone a:hover .label{color:var(--gold)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;margin-bottom:16px}
.foot-grid > div:first-child{margin-top:10px}
footer p{line-height:1.6;margin-bottom:14px}
footer h4{color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px}
footer ul{list-style:none}
footer ul li{margin-bottom:7px}
footer ul a{color:inherit;text-decoration:none}
footer ul a:hover{color:var(--gold)}
.foot-locations li{margin-bottom:5px}
.foot-locations li strong{color:#fff;font-weight:700}
.foot-bottom{padding-top:14px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;align-items:center;font-size:13px;flex-wrap:wrap;gap:14px}
.foot-bottom .badge{background:rgba(242,184,75,.1);color:var(--gold);padding:6px 12px;border-radius:6px;font-weight:600;font-size:12px}
@media (max-width:1024px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:680px){
.foot-grid{grid-template-columns:1fr}
footer .foot-brand,footer .foot-grid{display:none}
footer{padding:18px 0}
.foot-bottom{padding-top:0;border-top:0;flex-wrap:wrap;gap:8px;font-size:12px}
.foot-bottom .badge{font-size:10px;padding:4px 8px}
}
/* ============================================================
PAGE HEROES & SHARED SECTIONS
Used by service pages (/moving-services, /local-moving-services,
etc.) and non-service hub pages (/about-us, …). Each page picks
its hero photo via a `.svc-hero-{slug}` modifier class, and sets
`$lcpImage` so header.php emits a matching LCP preload link.
The .svc- naming is historical (these started as service-page
classes); they're general-purpose now.
============================================================ */
.svc-hero{position:relative;color:#fff;background-color:#0f2942;background-position:center;background-size:cover;background-repeat:no-repeat;padding:96px 24px 88px;text-align:center}
/* Per-service hero photo. Each service page adds its own modifier
class (.svc-hero-moving, .svc-hero-local, etc.). Mobile loads the
768 variant; tablet+ swaps to 1280. The page also sets $lcpImage
so header.php emits a matching for LCP. */
.svc-hero-moving {background-image:linear-gradient(rgba(8,16,28,.72),rgba(8,16,28,.72)),url('/assets/img/uploads/2021/01/IMG_7712-scaled-768.webp')}
.svc-hero-local {background-image:linear-gradient(rgba(8,16,28,.72),rgba(8,16,28,.72)),url('/assets/img/uploads/2021/01/IMG_7747-scaled-768.webp')}
.svc-hero-long {background-image:linear-gradient(rgba(8,16,28,.72),rgba(8,16,28,.72)),url('/assets/img/uploads/2020/04/NbeZM7JC-scaled-768.webp')}
.svc-hero-office {background-image:linear-gradient(rgba(8,16,28,.72),rgba(8,16,28,.72)),url('/assets/img/uploads/2021/01/IMG_7712-scaled-768.webp')}
.svc-hero-military{background-image:linear-gradient(rgba(8,16,28,.72),rgba(8,16,28,.72)),url('/assets/img/uploads/2024/10/militarys-moving-slow-768.webp')}
.svc-hero-packing {background-image:linear-gradient(rgba(8,16,28,.72),rgba(8,16,28,.72)),url('/assets/img/uploads/2020/04/Packed-Room-2-768.webp')}
.std-hero-howto{background-image:linear-gradient(rgba(15,25,40,.55),rgba(15,25,40,.42)),url('/assets/img/uploads/2020/04/Packed-Room-2-768.webp')}
.svc-hero-storage {background-image:linear-gradient(rgba(8,16,28,.72),rgba(8,16,28,.72)),url('/assets/img/uploads/2021/01/IMG_7747-scaled-768.webp')}
.svc-hero-about {background-image:linear-gradient(rgba(8,16,28,.72),rgba(8,16,28,.72)),url('/assets/img/uploads/2020/04/Team-1-e1521482104459-768.webp')}
.svc-hero-sustain {background-image:linear-gradient(rgba(8,16,28,.72),rgba(8,16,28,.72)),url('/assets/img/uploads/2024/12/donate-food-truck-edited-768.webp')}
.svc-hero-news {background-image:linear-gradient(rgba(8,16,28,.72),rgba(8,16,28,.72)),url('/assets/img/uploads/2024/06/edited-oded-on-felger-and-mazz-UPDATED-768.webp')}
@media (min-width:769px){
.svc-hero-moving {background-image:linear-gradient(rgba(8,16,28,.72),rgba(8,16,28,.72)),url('/assets/img/uploads/2021/01/IMG_7712-scaled-1280.webp')}
.svc-hero-local {background-image:linear-gradient(rgba(8,16,28,.72),rgba(8,16,28,.72)),url('/assets/img/uploads/2021/01/IMG_7747-scaled-1280.webp')}
.svc-hero-long {background-image:linear-gradient(rgba(8,16,28,.72),rgba(8,16,28,.72)),url('/assets/img/uploads/2020/04/NbeZM7JC-scaled-1280.webp')}
.svc-hero-office {background-image:linear-gradient(rgba(8,16,28,.72),rgba(8,16,28,.72)),url('/assets/img/uploads/2021/01/IMG_7712-scaled-1280.webp')}
.svc-hero-military{background-image:linear-gradient(rgba(8,16,28,.72),rgba(8,16,28,.72)),url('/assets/img/uploads/2024/10/militarys-moving-slow-1280.webp')}
.svc-hero-packing {background-image:linear-gradient(rgba(8,16,28,.72),rgba(8,16,28,.72)),url('/assets/img/uploads/2020/04/Packed-Room-2-1280.webp')}
.std-hero-howto{background-image:linear-gradient(rgba(15,25,40,.55),rgba(15,25,40,.42)),url('/assets/img/uploads/2020/04/Packed-Room-2-1280.webp')}
.svc-hero-storage {background-image:linear-gradient(rgba(8,16,28,.72),rgba(8,16,28,.72)),url('/assets/img/uploads/2021/01/IMG_7747-scaled-1280.webp')}
.svc-hero-about {background-image:linear-gradient(rgba(8,16,28,.72),rgba(8,16,28,.72)),url('/assets/img/uploads/2020/04/Team-1-e1521482104459-1280.webp')}
.svc-hero-sustain {background-image:linear-gradient(rgba(8,16,28,.72),rgba(8,16,28,.72)),url('/assets/img/uploads/2024/12/donate-food-truck-edited-1280.webp')}
.svc-hero-news {background-image:linear-gradient(rgba(8,16,28,.72),rgba(8,16,28,.72)),url('/assets/img/uploads/2024/06/edited-oded-on-felger-and-mazz-UPDATED-1280.webp')}
}
.svc-hero .wrap{max-width:920px;text-align:center;padding:0}
.svc-hero .eyebrow{color:var(--gold);margin-bottom:10px;display:inline-block}
.svc-hero h1{color:#fff;font-size:54px;line-height:1.06;font-weight:800;letter-spacing:-.025em;margin-bottom:16px;text-wrap:balance}
.svc-hero .lede{font-size:19px;color:#e3ebf3;line-height:1.6;margin:0 auto 28px;max-width:680px}
.svc-hero .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.svc-intro{padding:80px 0;background:#fff}
.svc-intro .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:start}
.svc-intro .eyebrow{margin-bottom:10px;display:inline-block}
.svc-intro h2{color:var(--navy);font-size:34px;line-height:1.1;letter-spacing:-.025em;margin-bottom:16px;font-weight:800}
.svc-intro p{font-size:17px;line-height:1.7;color:var(--ink);margin-bottom:14px}
.svc-intro p:last-child{margin-bottom:0}
/* Sticky quote widget in 2-col intro layout. Disabled on the
single-column mobile layout (handled below the 1024px breakpoint). */
@media (min-width:1025px){
.svc-intro .qw{position:sticky;top:96px;align-self:start}
}
.svc-chips{padding:64px 0 72px;background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.svc-chips .wrap{text-align:center}
.svc-chips .eyebrow{margin-bottom:10px;display:inline-block}
.svc-chips h2{color:var(--navy);font-size:32px;font-weight:800;letter-spacing:-.02em;margin-bottom:32px;text-wrap:balance}
.svc-chips ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;text-align:left;max-width:980px;margin:0 auto}
.svc-chips li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px 18px;font-weight:600;color:var(--navy);font-size:14px;display:flex;align-items:center;gap:12px;transition:transform .15s,box-shadow .15s,border-color .15s}
.svc-chips li::before{content:"\2713";flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:rgba(31,111,174,.1);color:var(--blue);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900}
.svc-chips li:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,30,50,.06);border-color:transparent}
.svc-cards{padding:80px 0 72px;background:#fff}
.svc-cards .section-head{text-align:center;margin-bottom:40px}
.svc-cards .section-head .eyebrow{margin-bottom:10px;display:inline-block}
.svc-cards .section-head h2{font-size:36px;line-height:1.1;letter-spacing:-.025em;margin:0 auto;font-weight:800;text-wrap:balance;max-width:720px}
.svc-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.svc-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.svc-card-v2{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:32px 30px;display:flex;flex-direction:column;gap:14px;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.svc-card-v2::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.svc-card-v2:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(15,50,74,.08);border-color:transparent}
.svc-card-v2:hover::after{transform:scaleX(1)}
.svc-card-v2 .icon{width:54px;height:54px;border-radius:12px;background:rgba(31,111,174,.08);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0}
.svc-card-v2 h3{font-size:22px;font-weight:700;color:var(--navy);letter-spacing:-.015em;margin:0}
.svc-card-v2 p{color:var(--muted);font-size:15px;line-height:1.65;margin:0}
.svc-card-v2 p strong{color:var(--ink);font-weight:600}
.svc-card-v2 .more{color:var(--blue);font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:6px;text-decoration:none;transition:gap .15s}
.svc-card-v2 .more:hover{gap:10px}
/* ============================================================
STATE LANDING PAGES (.st-*)
Used by /massachusetts, /florida, /virginia, /maryland.
Each state sets a hero photo modifier class (.st-hero-ma, etc.).
============================================================ */
/* --- Hero --- */
.st-hero{position:relative;color:#fff;padding:108px 20px 96px;text-align:center;overflow:hidden;background-color:#0f2942;background-position:center;background-size:cover;background-repeat:no-repeat}
.st-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 50%,rgba(15,25,40,.3) 100%);pointer-events:none}
.st-hero .wrap{position:relative;z-index:1;max-width:920px;margin:auto}
.st-hero .eyebrow{color:var(--gold);letter-spacing:.12em;font-size:13px}
.st-hero h1{color:#fff;font-size:56px;line-height:1.04;margin:10px 0 18px;font-weight:800;text-shadow:0 4px 24px rgba(0,0,0,.35)}
.st-hero .lede{font-size:20px;max-width:720px;margin:0 auto 32px;color:#fff;opacity:.96;line-height:1.55}
.st-hero .buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.st-hero .btn{box-shadow:0 8px 24px rgba(0,0,0,.18);transition:transform .15s ease,box-shadow .15s ease}
.st-hero .btn:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(0,0,0,.24)}
/* Per-state hero photos — 768 mobile, 1280 tablet+. */
.st-hero-ma{background-image:linear-gradient(rgba(15,25,40,.55),rgba(15,25,40,.42)),url('/assets/img/uploads/2021/01/IMG_7712-scaled-768.webp')}
.st-hero-fl{background-image:linear-gradient(rgba(15,25,40,.55),rgba(15,25,40,.42)),url('/assets/img/uploads/2020/05/19702902_10155045095538509_4933585947507131632_o-768.webp')}
.st-hero-va{background-image:linear-gradient(rgba(15,25,40,.55),rgba(15,25,40,.42)),url('/assets/img/uploads/2021/01/IMG_7712-scaled-768.webp')}
.st-hero-md{background-image:linear-gradient(rgba(15,25,40,.55),rgba(15,25,40,.42)),url('/assets/img/uploads/2020/04/NbeZM7JC-scaled-768.webp')}
@media (min-width:769px){
.st-hero-ma{background-image:linear-gradient(rgba(15,25,40,.55),rgba(15,25,40,.42)),url('/assets/img/uploads/2021/01/IMG_7712-scaled-1280.webp')}
.st-hero-fl{background-image:linear-gradient(rgba(15,25,40,.55),rgba(15,25,40,.42)),url('/assets/img/uploads/2020/05/19702902_10155045095538509_4933585947507131632_o-1280.webp')}
.st-hero-va{background-image:linear-gradient(rgba(15,25,40,.55),rgba(15,25,40,.42)),url('/assets/img/uploads/2021/01/IMG_7712-scaled-1280.webp')}
.st-hero-md{background-image:linear-gradient(rgba(15,25,40,.55),rgba(15,25,40,.42)),url('/assets/img/uploads/2020/04/NbeZM7JC-scaled-1280.webp')}
}
/* --- Stats / trust strip --- */
.st-stats{background:#fff;border-bottom:1px solid var(--line);padding:24px 20px}
.st-stats .wrap{max-width:1120px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.st-stat{text-align:center;display:flex;flex-direction:column;gap:4px}
.st-stat strong{color:var(--navy);font-size:22px;font-weight:800;line-height:1.1}
.st-stat span{color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.st-stat .star{color:var(--gold);font-size:18px;letter-spacing:1px}
/* --- Founder note --- */
.st-founder{padding:84px 20px;background:#fff}
.st-founder .wrap{max-width:1120px;margin:auto;display:grid;grid-template-columns:1.5fr 1fr;gap:56px;align-items:start}
.st-founder h2{margin:6px 0 24px;color:var(--navy);font-size:32px;font-weight:800;line-height:1.15}
.st-founder-bio{display:flex;gap:22px;align-items:center;margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.st-founder-bio img{width:140px;height:140px;border-radius:50%;object-fit:cover;flex:0 0 140px;box-shadow:0 12px 28px rgba(15,30,50,.18)}
.st-founder-bio .who strong{display:block;color:var(--navy);font-size:20px;font-weight:800;letter-spacing:-.01em}
.st-founder-bio .who span{color:var(--muted);font-size:14px;display:block;margin-top:2px}
.st-founder-bio .who .signature{color:var(--gold);font-style:italic;font-size:13px;margin-top:8px;letter-spacing:.04em;text-transform:uppercase;font-weight:700}
.st-founder p:first-of-type{font-size:19px;line-height:1.6;color:var(--navy);font-weight:500;border-left:4px solid var(--gold);padding-left:20px;margin:0 0 22px}
.st-founder p{font-size:16px;line-height:1.75;margin:0 0 16px;color:var(--ink)}
/* Sticky quote widget in 2-col founder layout. The layout collapses
to one column at <=800px (see media block below); only stick when
the right column actually exists. */
@media (min-width:801px){
.st-founder .qw{position:sticky;top:96px;align-self:start}
}
/* --- Branches --- */
.st-branches{padding:72px 20px;background:var(--bg)}
.st-branches .wrap{max-width:1120px;margin:auto}
.st-branches .section-title{font-size:30px;margin:6px 0 8px}
.st-branches .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;margin-top:32px}
.st-branch{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px;box-shadow:0 6px 18px rgba(15,30,50,.06);display:flex;flex-direction:column;gap:6px;transition:box-shadow .2s ease,transform .2s ease}
.st-branch:hover{box-shadow:0 16px 40px rgba(15,30,50,.12);transform:translateY(-3px)}
.st-branch .pin{width:44px;height:44px;border-radius:12px;background:rgba(31,111,174,.08);color:var(--blue);display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.st-branch h3{margin:0;color:var(--navy);font-size:21px;font-weight:800}
.st-branch .addr{color:var(--ink);font-size:15px;line-height:1.55;margin:6px 0 4px}
.st-branch .phones{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.st-branch .phones a{color:var(--navy);font-weight:800;text-decoration:none;font-size:18px;letter-spacing:-.01em}
.st-branch .phones a:hover{color:var(--blue)}
.st-branch .links{display:flex;gap:18px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.st-branch .links a{color:var(--blue);text-decoration:none;font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:4px}
.st-branch .links a:hover{color:var(--navy)}
.st-branch--soon{border-style:dashed;background:transparent;align-items:flex-start;justify-content:flex-start}
.st-branch--soon h3{color:var(--muted)}
.st-branch--soon p{color:var(--muted);font-size:15px;margin:8px 0 0}
.st-branch--soon .badge{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--blue);background:rgba(31,111,174,.1);border-radius:999px;padding:6px 12px;margin-bottom:8px}
/* --- Services with photo circles --- */
.st-services{padding:84px 20px;background:#fff}
.st-services .wrap{max-width:1120px;margin:auto;text-align:center}
.st-services .section-title{margin:6px 0 8px;font-size:32px}
.st-services .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:40px;text-align:left}
.st-services .card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px 28px 28px;transition:box-shadow .2s ease,transform .2s ease;display:flex;flex-direction:column}
.st-services .card:hover{box-shadow:0 16px 40px rgba(15,30,50,.12);transform:translateY(-3px)}
.st-services .card .pic{width:96px;height:96px;border-radius:50%;background:#dde5ec center/cover no-repeat;margin:0 0 18px;box-shadow:0 8px 20px rgba(15,30,50,.12)}
.st-services .card h3{color:var(--navy);margin:0 0 10px;font-size:21px;font-weight:800}
.st-services .card p{color:var(--ink);margin:0 0 18px;font-size:15px;line-height:1.6;flex:1}
.st-services .card a{color:var(--blue);font-weight:700;text-decoration:none;font-size:14px;display:inline-flex;align-items:center;gap:4px}
.st-services .card a:hover{color:var(--navy)}
.st-services .card .pic-icon{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;font-size:36px}
/* --- Why DN Van Lines feature strip --- */
.st-why{padding:72px 20px;background:linear-gradient(180deg,var(--bg),#fff)}
.st-why .wrap{max-width:1120px;margin:auto;text-align:center}
.st-why .eyebrow{color:var(--blue)}
.st-why h2{margin:6px 0 32px;color:var(--navy);font-size:30px;font-weight:800}
.st-why .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.st-why-item{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px}
.st-why-item .icon{width:56px;height:56px;border-radius:14px;background:rgba(242,184,75,.15);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:26px}
.st-why-item strong{color:var(--navy);font-size:16px;font-weight:800;letter-spacing:-.01em}
.st-why-item span{color:var(--muted);font-size:14px;line-height:1.5;max-width:240px}
/* --- Bottom CTA --- */
.st-cta{position:relative;padding:88px 20px;background:linear-gradient(135deg,var(--navy) 0%,#1a4870 60%,var(--blue) 100%);color:#fff;text-align:center;overflow:hidden}
.st-cta::before{content:"";position:absolute;inset:0;background:url('/assets/img/uploads/2021/01/IMG_7712-scaled-1280.webp') center/cover;opacity:.08;pointer-events:none}
.st-cta .wrap{position:relative;z-index:1;max-width:780px;margin:auto}
.st-cta h2{color:#fff;font-size:42px;line-height:1.1;margin:0 0 12px;font-weight:800;text-shadow:0 2px 16px rgba(0,0,0,.25)}
.st-cta p{margin:0 0 28px;font-size:19px;opacity:.94}
.st-cta .buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.st-cta .btn{box-shadow:0 8px 24px rgba(0,0,0,.18)}
.st-cta .btn.primary{background:var(--gold);color:#162636}
.st-cta .btn.secondary{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.45)}
@media (max-width: 800px){
.st-hero{padding:80px 20px 72px}
.st-hero h1{font-size:36px}
.st-hero .lede{font-size:17px}
.st-stats .wrap{grid-template-columns:repeat(2,1fr);gap:18px}
.st-founder{padding:64px 20px}
.st-founder .wrap{grid-template-columns:1fr;gap:36px}
.st-founder h2{font-size:26px}
.st-founder-bio img{width:104px;height:104px;flex:0 0 104px}
.st-branches .grid{grid-template-columns:1fr}
.st-services .cards{grid-template-columns:1fr;gap:20px}
.st-why .grid{grid-template-columns:repeat(2,1fr)}
.st-cta{padding:64px 20px}
.st-cta h2{font-size:30px}
}
/* Long-form prose body. Used by news post pages and any standalone
article-style content. Constrained line-length, generous spacing. */
.prose{font-size:17px;line-height:1.7;color:var(--ink)}
.prose h1,.prose h2,.prose h3,.prose h4{color:var(--navy);letter-spacing:-.015em;line-height:1.2;font-weight:700;margin:32px 0 12px}
.prose h1{font-size:30px;font-weight:800}
.prose h2{font-size:26px}
.prose h3{font-size:21px}
.prose h4{font-size:18px}
.prose p{margin:0 0 18px}
.prose a{color:var(--blue);text-decoration:none;font-weight:600;border-bottom:1px solid rgba(31,111,174,.3);transition:color .15s,border-color .15s}
.prose a:hover{color:var(--navy);border-bottom-color:var(--navy)}
.prose ul,.prose ol{margin:0 0 22px;padding-left:22px}
.prose li{margin-bottom:6px}
.prose img{max-width:100%;height:auto;border-radius:8px;margin:18px 0;display:block}
.prose img.aligncenter{margin-left:auto;margin-right:auto}
.prose img.alignleft{float:left;margin:8px 22px 14px 0}
.prose img.alignright{float:right;margin:8px 0 14px 22px}
.prose figure{margin:24px 0;display:block}
.prose figure img{margin:0 0 8px}
.prose figure.aligncenter{text-align:center}
.prose figure.aligncenter img{margin-left:auto;margin-right:auto}
.prose figure.alignleft{float:left;margin:8px 22px 14px 0;max-width:50%}
.prose figure.alignright{float:right;margin:8px 0 14px 22px;max-width:50%}
.prose figcaption{font-size:14px;color:var(--muted);font-style:italic;line-height:1.5;text-align:inherit}
/* Responsive 16:9 video embed wrapper for YouTube/Vimeo iframes. */
.video-embed{position:relative;padding-bottom:56.25%;height:0;margin:24px 0;border-radius:10px;overflow:hidden;box-shadow:0 8px 24px rgba(15,30,50,.1)}
.video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
/* Checkmark list — used in how-to guides for "Key Concepts" callouts. */
.check-list{list-style:none;padding-left:0;margin:0 0 22px}
.check-list li{padding-left:36px;position:relative;margin-bottom:10px;font-size:16px;line-height:1.6;color:var(--ink)}
.check-list li::before{content:"\2713";position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:50%;background:rgba(31,111,174,.1);color:var(--blue);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:900}
/* Related-guides cross-link grid — 4 across desktop, 2 on tablet, 1 on mobile. */
.related-guides{padding:64px 20px;background:var(--bg);border-top:1px solid var(--line)}
.related-guides .wrap{max-width:1120px;margin:auto}
.related-guides .head{text-align:center;margin-bottom:28px}
.related-guides .eyebrow{margin-bottom:8px;display:inline-block}
.related-guides h2{color:var(--navy);font-size:26px;margin:0;font-weight:800;text-wrap:balance}
.related-guides .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.related-guides .grid a{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;color:var(--navy);font-weight:600;font-size:15px;line-height:1.4;display:flex;align-items:center;gap:10px;transition:transform .15s,box-shadow .15s,border-color .15s,gap .15s;text-decoration:none}
.related-guides .grid a:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,30,50,.08);border-color:transparent;gap:14px}
.related-guides .grid a::after{content:"\2192";color:var(--blue);font-weight:800;margin-left:auto;font-size:18px;transition:transform .15s}
.related-guides .grid a:hover::after{transform:translateX(2px)}
@media (max-width:1000px){
.related-guides .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:540px){
.related-guides .grid{grid-template-columns:1fr}
}
.prose blockquote{margin:24px 0;padding:8px 0 8px 20px;border-left:3px solid var(--gold);font-style:italic;color:var(--navy)}
.prose strong{font-weight:700;color:var(--navy)}
.prose hr{border:0;border-top:1px solid var(--line);margin:32px 0}
/* Pill-style city links inside region cards (used on /maryland and any
future region/county landing pages). Compact, clickable, low-density. */
.region-cities{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.region-cities li{margin:0}
.region-cities li a{display:inline-block;padding:5px 11px;background:rgba(31,111,174,.08);color:var(--blue);font-size:13px;font-weight:600;border-radius:6px;text-decoration:none;transition:background .12s,color .12s,transform .12s;letter-spacing:-.005em}
.region-cities li a:hover{background:var(--blue);color:#fff;transform:translateY(-1px)}
/* Stats band — navy bg with 4 large gold numbers + labels.
Used on /about-us; reusable on other landing pages. */
.stats-band{background:var(--navy-deep);color:#fff;padding:72px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.stats-band .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stats-band .stat{padding:0 8px}
.stats-band .stat-num{font-size:54px;font-weight:800;color:var(--gold);letter-spacing:-.025em;line-height:1;margin-bottom:10px}
.stats-band .stat-label{font-size:13px;color:#cfdbe7;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
@media (max-width:680px){
.stats-band{padding:48px 0}
.stats-band .wrap{grid-template-columns:1fr 1fr;gap:32px 16px}
.stats-band .stat-num{font-size:38px}
}
.svc-cta{padding:80px 0;background:linear-gradient(135deg,var(--navy-2) 0%,var(--blue) 100%);color:#fff;text-align:center}
.svc-cta h2{color:#fff;font-size:40px;font-weight:800;letter-spacing:-.025em;line-height:1.05;margin-bottom:14px;text-wrap:balance}
.svc-cta p{font-size:18px;color:#cfdbe7;margin:0 auto 30px;max-width:560px;text-align:center}
.svc-cta .actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
@media (max-width:1024px){
.svc-hero{padding:80px 24px 72px}
.svc-hero h1{font-size:42px}
.svc-intro .wrap{grid-template-columns:1fr;gap:36px}
.svc-chips ul{grid-template-columns:repeat(2,1fr)}
.svc-grid-3{grid-template-columns:1fr 1fr}
.svc-grid-2{grid-template-columns:1fr}
}
@media (max-width:680px){
.svc-hero{padding:64px 20px 56px}
.svc-hero h1{font-size:32px}
.svc-hero .lede{font-size:16px}
.svc-intro{padding:48px 0}
.svc-intro h2,.svc-cards .section-head h2{font-size:26px}
.svc-chips{padding:48px 0 56px}
.svc-chips h2{font-size:24px}
.svc-chips ul{grid-template-columns:1fr}
.svc-cards{padding:48px 0}
.svc-card-v2{padding:24px}
.svc-card-v2 h3{font-size:20px}
.svc-grid-3{grid-template-columns:1fr}
.svc-cta{padding:56px 0}
.svc-cta h2{font-size:30px}
}
/* ========================================================
HOW-TO PACK GUIDES — V2 (visual workshop)
Used by /how-to-pack-* pages. All selectors prefixed .hwt- to
avoid clashing with anything else; supplies/tip/mistake palettes
add three accent colors (green, amber, red) on top of the brand.
======================================================== */
.howto-v2{--hwt-tip:#F59E0B;--hwt-tip-bg:#FEF7E6;--hwt-warn:#DC2626;--hwt-warn-bg:#FEEBEB;--hwt-supply:#0E9F6E;--hwt-supply-bg:#E7F7F1;--hwt-cream:#FAF7F0}
.hwt-crumbs{padding:18px 0 0;font-size:13px;color:var(--muted)}
.hwt-crumbs a{color:var(--muted);text-decoration:none}
.hwt-crumbs a:hover{color:var(--blue)}
.hwt-crumbs span:not([class]){margin:0 8px;opacity:.55}
/* HERO */
.hwt-hero{padding:32px 0 74px;background:linear-gradient(180deg,#fff 0%,var(--hwt-cream) 100%)}
.hwt-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hwt-hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:14px}
.hwt-hero-eyebrow::before{content:"";width:24px;height:2px;background:var(--blue);border-radius:2px}
.howto-v2 h1{font-weight:900;font-size:54px;line-height:1.05;letter-spacing:-.02em;color:var(--navy);margin:0 0 18px}
.howto-v2 .hwt-lede{font-size:19px;color:var(--muted);max-width:540px;margin:0 0 28px}
.hwt-hero-meta{display:flex;flex-wrap:wrap;gap:24px;padding:18px 0 22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:24px}
.hwt-meta{display:flex;align-items:center;gap:10px}
.hwt-meta-icon{width:36px;height:36px;border-radius:8px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:18px}
.hwt-meta-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.hwt-meta-value{font-size:15px;font-weight:700;color:var(--navy)}
.hwt-hero-actions{display:flex;flex-wrap:wrap;gap:12px}
/* Hero photo (clickable jump-to-video) */
.hwt-hero-photo{position:relative;display:block;border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(15,30,50,.18);aspect-ratio:4/5;text-decoration:none;cursor:pointer}
.hwt-hero-photo img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.hwt-hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.45) 100%);transition:opacity .25s ease}
.hwt-hero-photo:hover img{transform:scale(1.03)}
.hwt-hero-photo:hover{text-decoration:none}
.hwt-hero-badge{position:absolute;top:18px;left:18px;background:#fff;color:var(--navy);padding:8px 14px;border-radius:999px;font-size:12px;font-weight:700;box-shadow:0 6px 14px rgba(0,0,0,.12);z-index:2}
.hwt-hero-badge::before{content:"●";color:var(--hwt-warn);margin-right:6px;font-size:9px;vertical-align:middle}
.hwt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;box-shadow:0 14px 32px rgba(31,111,174,.55);z-index:2;transition:transform .2s ease,background .2s ease}
.hwt-play::before{content:"";border-left:26px solid #fff;border-top:15px solid transparent;border-bottom:15px solid transparent;margin-left:7px}
.hwt-hero-photo:hover .hwt-play{transform:translate(-50%,-50%) scale(1.08);background:var(--navy)}
.hwt-play-label{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);background:rgba(15,30,50,.78);color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:7px 14px;border-radius:999px;z-index:2;white-space:nowrap}
/* SUPPLIES */
.hwt-supplies{background:var(--hwt-supply-bg);padding:56px 0;border-top:1px solid rgba(14,159,110,.18);border-bottom:1px solid rgba(14,159,110,.18)}
.hwt-supplies-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:16px}
.hwt-supplies-head h2{font-size:28px;font-weight:800;color:var(--navy);margin:0;letter-spacing:-.01em}
.hwt-supplies-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--hwt-supply);margin-bottom:6px}
.hwt-supplies-eyebrow::before{content:"";width:18px;height:2px;background:var(--hwt-supply);border-radius:2px}
.hwt-supplies-note{color:var(--muted);font-size:14px;max-width:380px}
.hwt-supplies-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.hwt-supply{background:#fff;border-radius:12px;padding:20px 16px 18px;text-align:center;border:1px solid rgba(14,159,110,.15);transition:transform .15s,box-shadow .15s}
.hwt-supply:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(15,30,50,.08)}
.hwt-supply-icon{width:56px;height:56px;margin:0 auto 12px;border-radius:50%;background:var(--hwt-supply-bg);display:flex;align-items:center;justify-content:center;font-size:26px}
.hwt-supply-name{font-weight:800;color:var(--navy);font-size:14px;margin-bottom:4px}
.hwt-supply-why{font-size:12px;color:var(--muted);line-height:1.4}
/* VIDEO FEATURE */
.hwt-video{padding:72px 0;background:#fff}
.hwt-vf-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center}
.hwt-vf-video{position:relative;border-radius:16px;overflow:hidden;background:#000;aspect-ratio:16/9;box-shadow:0 24px 50px rgba(15,30,50,.18)}
.hwt-vf-video iframe{width:100%;height:100%;border:0}
.hwt-vf-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.hwt-vf-text h2{font-size:34px;font-weight:800;color:var(--navy);margin:0 0 14px;letter-spacing:-.01em;line-height:1.15}
.hwt-vf-text p{color:var(--muted);font-size:16px;margin:0 0 20px}
.hwt-vf-credit{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--bg);border-radius:10px;border:1px solid var(--line)}
.hwt-vf-avatar{width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex-shrink:0}
.hwt-vf-name{font-weight:700;color:var(--navy);font-size:14px}
.hwt-vf-role{font-size:12px;color:var(--muted)}
/* STEPS */
.hwt-steps{padding:80px 0;background:var(--bg)}
.hwt-steps-head{text-align:center;max-width:680px;margin:0 auto 56px}
.hwt-steps-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
.hwt-steps-eyebrow::before,.hwt-steps-eyebrow::after{content:"";width:18px;height:2px;background:var(--blue);border-radius:2px}
.hwt-steps-head h2{font-size:40px;font-weight:900;color:var(--navy);margin:0 0 12px;letter-spacing:-.02em}
.hwt-steps-head p{color:var(--muted);font-size:17px;margin:0}
.hwt-step{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-bottom:64px}
.hwt-step:nth-child(even) .hwt-step-img{order:2}
.hwt-step-img{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:var(--hwt-cream);box-shadow:0 14px 36px rgba(15,30,50,.08);border:1px solid var(--line)}
.hwt-step-img img{width:100%;height:100%;object-fit:contain}
.hwt-step-num{display:inline-flex;align-items:center;gap:14px;margin-bottom:14px}
.hwt-step-circle{width:54px;height:54px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;box-shadow:0 8px 20px rgba(31,111,174,.35)}
.hwt-step-label{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--blue);font-weight:800}
.hwt-step h3{font-size:30px;font-weight:800;color:var(--navy);margin:0 0 14px;letter-spacing:-.01em;line-height:1.15}
.hwt-step p{color:var(--muted);font-size:16px;margin:0 0 14px}
.hwt-step-checklist{list-style:none;padding:0;margin:18px 0 0}
.hwt-step-checklist li{padding:8px 0 8px 32px;position:relative;font-size:15px;color:var(--ink,#1A2433)}
.hwt-step-checklist li::before{content:"✓";position:absolute;left:0;top:7px;width:22px;height:22px;border-radius:50%;background:var(--hwt-supply-bg);color:var(--hwt-supply);font-weight:900;font-size:12px;display:flex;align-items:center;justify-content:center}
/* PRO TIP CALLOUT */
.hwt-tip-wrap{padding:0 0 80px}
.hwt-tip{background:linear-gradient(135deg,var(--hwt-tip-bg),#FFFCF4);border:1px solid #F5E6BC;border-radius:18px;overflow:hidden;display:grid;grid-template-columns:1fr 1.2fr;align-items:center}
.hwt-tip-img{aspect-ratio:1/1;background:#fff;display:flex;align-items:center;justify-content:center;padding:32px;border-right:1px dashed #F5E6BC}
.hwt-tip-img img{max-width:80%;height:auto}
.hwt-tip-body{padding:48px 56px}
.hwt-tip-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--hwt-tip);margin-bottom:14px}
.hwt-tip-body h3{font-size:30px;font-weight:800;color:var(--navy);margin:0 0 14px;letter-spacing:-.01em;line-height:1.2}
.hwt-tip-body p{color:var(--ink,#1A2433);font-size:16px;margin:0}
.hwt-tip-body p strong{color:var(--navy)}
/* MISTAKES */
.hwt-mistakes{padding:72px 0;background:#fff}
.hwt-mistakes-head{text-align:center;max-width:600px;margin:0 auto 40px}
.hwt-mistakes-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--hwt-warn);margin-bottom:8px}
.hwt-mistakes-eyebrow::before,.hwt-mistakes-eyebrow::after{content:"";width:18px;height:2px;background:var(--hwt-warn);border-radius:2px}
.hwt-mistakes-head h2{font-size:34px;font-weight:800;color:var(--navy);margin:0 0 10px;letter-spacing:-.01em}
.hwt-mistakes-head p{color:var(--muted);font-size:16px;margin:0}
.hwt-mistakes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hwt-mistake{background:var(--hwt-warn-bg);border:1px solid #F5C2C2;border-radius:14px;padding:24px;position:relative;overflow:hidden}
.hwt-mistake::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--hwt-warn)}
.hwt-mistake-icon{width:42px;height:42px;border-radius:10px;background:var(--hwt-warn);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;margin-bottom:14px}
.hwt-mistake h3{font-size:17px;font-weight:800;color:var(--navy);margin:0 0 8px;line-height:1.3}
.hwt-mistake p{font-size:14px;color:var(--ink,#1A2433);margin:0;line-height:1.5}
/* CTA — navy band */
.hwt-cta{padding:80px 0;background:var(--navy);color:#fff;text-align:center}
.hwt-cta h2{font-size:36px;font-weight:900;margin:0 0 12px;letter-spacing:-.01em;color:#fff}
.hwt-cta p{font-size:17px;margin:0 0 24px;opacity:.85}
.hwt-cta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
/* Reusable .btn ghost variant — light/transparent border button.
Existing .btn primary / .btn blue stay as-is. */
.btn.ghost{background:#fff;color:var(--navy);border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--blue);color:var(--blue);text-decoration:none}
.hwt-cta .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.hwt-cta .btn.ghost:hover{border-color:#fff;color:#fff}
@media (max-width:980px){
.hwt-hero-grid{grid-template-columns:1fr;gap:32px}
.howto-v2 h1{font-size:40px}
.hwt-supplies-grid{grid-template-columns:repeat(3,1fr)}
.hwt-vf-grid{grid-template-columns:1fr;gap:28px}
.hwt-step{grid-template-columns:1fr;gap:24px;margin-bottom:48px}
.hwt-step:nth-child(even) .hwt-step-img{order:0}
.hwt-tip{grid-template-columns:1fr}
.hwt-tip-img{border-right:0;border-bottom:1px dashed #F5E6BC}
.hwt-tip-body{padding:32px}
.hwt-mistakes-grid{grid-template-columns:1fr}
.hwt-steps-head h2{font-size:32px}
.hwt-steps{padding:56px 0}
}
@media (max-width:560px){
.hwt-supplies-grid{grid-template-columns:repeat(2,1fr)}
.howto-v2 h1{font-size:32px}
.hwt-step h3{font-size:24px}
.hwt-tip-body h3{font-size:24px}
.hwt-tip-body{padding:24px}
.hwt-cta h2{font-size:28px}
.hwt-meta-icon{width:32px;height:32px;font-size:16px}
.hwt-hero-meta{gap:14px}
}
/* SHARE BAR — sits in the cream hero area, snug under the photo's bottom.
Sticky context is (full article height) so it pins below the header
for the entire scroll once the user passes its natural position. The negative
top margin pulls it visually up into the hero's padding-bottom band. */
.hwt-share{position:sticky;top:104px;z-index:30;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:999px;padding:8px 14px;box-shadow:0 8px 22px rgba(15,30,50,.10);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);max-width:max-content;margin:-64px max(24px,calc((100vw - 1200px)/2 + 24px)) 10px auto;flex-wrap:wrap;justify-content:center}
.hwt-share-label{font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;padding:0 6px}
.hwt-share-btn{width:36px;height:36px;border-radius:50%;background:#fff;border:1.5px solid var(--line);color:var(--navy);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;transition:transform .15s ease,background .15s ease,border-color .15s ease,color .15s ease;padding:0;position:relative}
.hwt-share-btn:hover{transform:translateY(-2px);text-decoration:none}
.hwt-share-btn.pinterest:hover{background:#E60023;border-color:#E60023;color:#fff}
.hwt-share-btn.facebook:hover{background:#1877F2;border-color:#1877F2;color:#fff}
.hwt-share-btn.twitter:hover{background:#000;border-color:#000;color:#fff}
.hwt-share-btn.email:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.hwt-share-btn.copy:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.hwt-share-btn .hwt-icon-check{display:none}
.hwt-share-btn.copied{background:#0E9F6E;border-color:#0E9F6E;color:#fff;transform:translateY(-2px)}
.hwt-share-btn.copied .hwt-icon-link{display:none}
.hwt-share-btn.copied .hwt-icon-check{display:inline-block}
/* Match the header height drop at narrower breakpoints */
@media (max-width:1180px){.hwt-share{top:96px}}
@media (max-width:680px){.hwt-share{top:84px;padding:6px 10px;gap:6px}.hwt-share-label{display:none}}
/* ============================================================================ */
/* MERGED INLINE STYLES — extracted from page-level