/*!
  Packers and Movers Bill for Claim — Design System
  Lightweight, dependency-free, mobile-first CSS.
*/

/* ---------- Tokens ---------- */
:root{
  --navy:#0F2C4C;
  --navy-2:#173A5E;
  --emerald:#0E7C5A;
  --emerald-dark:#0A5E44;
  --emerald-light:#E4F3EC;
  --amber:#F2A93B;
  --amber-dark:#D98E1F;
  --paper:#FAF7F0;
  --paper-2:#F2EDE1;
  --ink:#1B2430;
  --ink-soft:#4B5563;
  --line:#E4DFD3;
  --white:#FFFFFF;
  --danger:#C0392B;

  --font-display:"Fraunces",ui-serif,Georgia,serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --radius-sm:8px;
  --radius:14px;
  --radius-lg:24px;
  --shadow-sm:0 1px 2px rgba(15,44,76,.06), 0 1px 1px rgba(15,44,76,.04);
  --shadow:0 8px 24px rgba(15,44,76,.10);
  --shadow-lg:0 20px 48px rgba(15,44,76,.16);
  --container:1180px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip;max-width:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;padding-top:100px}
/* .site-header is now position:fixed (not sticky) so it always pins to the very top of the
   viewport, no matter how far the page is scrolled — this is what keeps the hamburger menu
   opening exactly where you're looking instead of "back at the top of the page". Since fixed
   elements are taken out of normal flow, body needs matching top padding so page content
   doesn't start underneath it. */
@media(max-width:430px){body{padding-top:88px}}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0}
button{font-family:inherit}
input,select,textarea{font-family:inherit;font-size:16px}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--navy);line-height:1.15;margin:0 0 .5em;font-weight:600}
h1{font-size:clamp(1.9rem,4vw + 1rem,3rem)}
h2{font-size:clamp(1.5rem,2.6vw + .6rem,2.2rem)}
h3{font-size:clamp(1.15rem,1.4vw + .6rem,1.4rem)}
h4{font-size:1.05rem}
p{margin:0 0 1em;color:var(--ink-soft)}
strong{color:var(--ink)}
.container{max-width:var(--container);margin-inline:auto;padding-inline:20px}
section{padding:28px 0}
@media (min-width:900px){section{padding:44px 0}}
[id]{scroll-margin-top:100px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- Eyebrow / labels ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--emerald-dark);background:var(--emerald-light);border:1px solid #cfe9dd;padding:6px 14px;border-radius:99px;margin-bottom:16px}
.eyebrow.amber{color:var(--amber-dark);background:#FDF1DC;border-color:#f3ddad}
.section-head{max-width:680px;margin:0 auto 28px;text-align:center}
.section-head p{font-size:1.05rem}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:.98rem;padding:14px 26px;border-radius:99px;border:2px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--emerald);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--emerald-dark);box-shadow:var(--shadow)}
.btn-outline{background:transparent;border-color:var(--navy);color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff}
.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{background:var(--paper-2)}
.btn-whatsapp{background:var(--emerald-dark);color:#fff}
.btn-whatsapp:hover{background:var(--emerald);color:#fff}
.btn-amber{background:var(--amber);color:var(--navy)}
.btn-amber:hover{background:var(--amber-dark);color:#fff}
.btn-block{width:100%}
.btn-sm{padding:10px 18px;font-size:.88rem}
.btn svg{width:18px;height:18px;flex:none}

/* ---------- Icon ---------- */
.icon{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;flex:none;vertical-align:-4px}
.icon-lg{width:30px;height:30px}
.icon-sm{width:16px;height:16px;stroke-width:2;vertical-align:-3px}
.icon-inline{width:19px;height:19px;vertical-align:-4px;margin-right:2px}

/* ---------- Header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;width:100%;z-index:60;background:rgba(250,247,240,.96);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
.topbar{background:var(--navy);color:#dfe8f1;font-size:.78rem}
.topbar .container{display:flex;align-items:center;justify-content:space-between;padding-block:7px;gap:10px;flex-wrap:wrap;row-gap:4px}
.topbar a{color:#fff;font-weight:600;white-space:nowrap}
.topbar .topbar-links{display:flex;gap:16px;flex-wrap:wrap;min-width:0}
.topbar .topbar-links span{opacity:.92;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.topbar-mail{display:inline-flex;align-items:center;gap:5px}
@media (max-width:640px){.topbar .topbar-links span:nth-child(2){display:none}}
@media (max-width:460px){.topbar-mail{display:none}}

.navbar{display:flex;align-items:center;justify-content:space-between;padding-block:10px;gap:14px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;color:var(--navy);font-size:1rem;line-height:1.25;min-width:0}
.brand .brand-mark{width:44px;height:44px;border-radius:12px;flex:none;object-fit:contain;background:#fff;border:1px solid var(--line);padding:4px}
.brand .brand-text{min-width:0}
.brand small{display:block;font-family:var(--font-body);font-weight:600;font-size:.66rem;color:var(--emerald-dark);letter-spacing:.05em}

.nav-links{display:none;align-items:center;gap:2px;flex-wrap:nowrap}
.nav-links a,.nav-links .dropdown-toggle{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;padding:9px 11px;border-radius:99px;font-weight:600;font-size:.88rem;color:var(--navy);background:none;border:none;font-family:var(--font-body);cursor:pointer}
.nav-links a:hover,.nav-links .dropdown-toggle:hover{background:var(--paper-2)}
.nav-links .dropdown{position:relative;display:flex}
.nav-links .dropdown-panel{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:8px;min-width:210px;z-index:80}
.nav-links .dropdown:hover .dropdown-panel,.nav-links .dropdown:focus-within .dropdown-panel,.nav-links .dropdown.open .dropdown-panel{display:block}
.nav-links .dropdown-panel a{display:block;border-radius:8px;padding:9px 12px;white-space:normal}

.nav-actions{display:flex;align-items:center;gap:10px;flex:none}
.nav-actions .call-pill{display:none;align-items:center;gap:7px;font-weight:700;color:var(--navy);font-family:var(--font-mono);font-size:.86rem;white-space:nowrap}
.menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:10px;border:1px solid var(--line);background:#fff;flex:none}
.menu-toggle .icon{width:22px;height:22px}
@media (min-width:960px){
  .nav-links{display:flex}
  .menu-toggle{display:none}
}
@media (min-width:1240px){
  .nav-actions .call-pill{display:flex}
}
#mobile-menu{display:none;border-top:1px solid var(--line);padding:10px 0 18px}
#mobile-menu.open{display:block;overflow-y:auto;-webkit-overflow-scrolling:touch}
/* Stop the page scrolling "behind" the menu while it's open — the menu itself scrolls instead. */
body.menu-open{overflow:hidden}
#mobile-menu a{display:flex;align-items:center;gap:10px;padding:12px 6px;font-weight:600;border-bottom:1px solid var(--line)}
#mobile-menu .sub-links{padding-left:14px}
#mobile-menu .sub-links a{border-bottom:none;color:var(--ink-soft);font-weight:500;padding:8px 6px;font-size:.9rem}
/* Cities collapsible group inside the mobile menu */
#mobile-menu .mobile-dropdown{border-bottom:1px solid var(--line)}
#mobile-menu .mobile-dropdown summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 6px;font-weight:600;cursor:pointer;list-style:none;color:var(--ink)}
#mobile-menu .mobile-dropdown summary::-webkit-details-marker{display:none}
#mobile-menu .mobile-dropdown summary .chev{transition:transform .2s ease}
#mobile-menu .mobile-dropdown[open] summary .chev{transform:rotate(180deg)}
#mobile-menu .mobile-dropdown .sub-links{padding-bottom:6px}
/* Prevent the mobile slide-down menu from staying open/visible once the desktop nav takes over */
@media(min-width:960px){
  #mobile-menu, #mobile-menu.open{display:none!important}
}
/* Small phones (iPhone SE 375px, Pixel 3 393px, etc.) — the logo, "Get Your Bill" button and
   hamburger used to be too wide to fit the row, so text got clipped off the right edge.
   Tighten everything so it fits with room to spare. */
@media(max-width:430px){
  .navbar{gap:8px}
  .brand{font-size:.82rem;gap:7px}
  .brand .brand-mark{width:34px;height:34px;padding:3px}
  .brand small{font-size:.6rem}
  .nav-actions{gap:8px}
  .nav-actions .btn-sm{padding:9px 14px;font-size:.82rem}
  .menu-toggle{width:38px;height:38px}
  .menu-toggle .icon{width:20px;height:20px}
}


/* ---------- Breadcrumb ---------- */
.breadcrumb{font-size:.85rem;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding-top:18px}
.breadcrumb a{color:var(--emerald-dark);font-weight:600}
.breadcrumb span{opacity:.6}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:34px 0 52px;background:
  radial-gradient(700px 420px at 100% -10%,#eaf5ee 0,transparent 60%),
  radial-gradient(600px 400px at -10% 110%,#fdf1dc 0,transparent 60%),
  var(--paper);}
.hero .container{display:grid;gap:36px}
@media (min-width:960px){.hero .container{grid-template-columns:1.1fr .9fr;align-items:center;gap:48px}}
.hero h1{margin-bottom:.4em}
.hero .lede{font-size:1.12rem;max-width:52ch}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 26px}
.hero-badge{display:flex;align-items:center;gap:8px;background:var(--emerald-light);border:1px solid #bfe3d2;padding:9px 16px;border-radius:99px;font-size:.85rem;font-weight:700;color:var(--emerald-dark);box-shadow:var(--shadow-sm)}
.hero-badge .icon{color:var(--emerald-dark);stroke-width:2.1}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px}
@media(min-width:560px){.hero-stats{grid-template-columns:repeat(4,1fr)}}
.hero-stat b{display:block;font-family:var(--font-mono);font-size:1.5rem;color:var(--navy)}
.hero-stat span{font-size:.8rem;color:var(--ink-soft)}

/* invoice mock card + stamp signature */
.hero-visual{overflow:visible;max-width:100%;padding-inline:14px}
.invoice-card{position:relative;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:22px;padding-bottom:94px;transform:rotate(-2deg);border:1px solid var(--line);max-width:400px;width:100%;margin-inline:auto}
@media(max-width:420px){.invoice-card{transform:rotate(0deg);padding:18px;padding-bottom:80px}}
.invoice-card::before{content:"";position:absolute;inset:10px;border:1px dashed #d8d2c2;border-radius:calc(var(--radius-lg) - 8px);pointer-events:none}
.invoice-card .inv-top{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid var(--navy);padding-bottom:12px;margin-bottom:14px}
.invoice-card .inv-top h4{margin:0;font-size:1rem}
.invoice-card .inv-top span{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-soft)}
.invoice-card table{width:100%;border-collapse:collapse;font-size:.82rem}
.invoice-card td{padding:6px 0;border-bottom:1px dashed var(--line);color:var(--ink-soft)}
.invoice-card td:last-child{text-align:right;font-family:var(--font-mono);color:var(--ink)}
.invoice-card .inv-total{font-weight:700;color:var(--navy)!important}
.stamp{position:absolute;right:20px;bottom:10px;width:82px;height:82px;border-radius:50%;border:3px solid var(--emerald);color:var(--emerald);display:grid;place-items:center;text-align:center;font-family:var(--font-mono);font-size:.54rem;letter-spacing:.06em;font-weight:700;transform:rotate(12deg);background:#fff;text-transform:uppercase;pointer-events:none}
.stamp span{display:block;font-size:.88rem;margin:2px 0}
@media(max-width:420px){.stamp{width:70px;height:70px;font-size:.46rem;right:14px;bottom:8px}.stamp span{font-size:.72rem}}

/* ---------- Bill samples infographic grid ---------- */
.sample-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:760px){.sample-grid{grid-template-columns:repeat(4,1fr)}}
.sample-tile{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease}
.sample-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.sample-tile img{width:100%;height:150px;object-fit:cover;background:var(--paper-2)}
.sample-tile figcaption{padding:10px 12px;font-size:.82rem;font-weight:600;color:var(--navy);display:flex;align-items:center;gap:6px}

/* ---------- Cards / features ---------- */
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:1fr}
@media(min-width:640px){.grid-2{grid-template-columns:repeat(2,1fr)}.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card .icon-badge{width:48px;height:48px;border-radius:12px;background:var(--emerald-light);color:var(--emerald-dark);display:grid;place-items:center;margin-bottom:14px}
.card h3{margin-bottom:.4em;font-size:1.08rem}
.card p{margin-bottom:0;font-size:.94rem}

.use-card{text-align:left}
.use-card .icon-badge{background:#FDF1DC;color:var(--amber-dark)}

/* Useful Tips article preview cards */
.tip-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.tip-card img{width:100%;height:275px;object-fit:cover;background:var(--paper-2)}
.tip-card-body{padding:20px}
.tip-card-body h3{margin-bottom:8px}
.tip-card-body p{margin-bottom:0;font-size:.92rem}

/* ---------- Stat bar ---------- */
.stat-bar{background:var(--navy);border-radius:var(--radius-lg);padding:28px;display:grid;gap:20px;grid-template-columns:repeat(2,1fr);color:#fff;margin-top:-32px;position:relative;z-index:2;box-shadow:var(--shadow-lg)}
@media(min-width:760px){.stat-bar{grid-template-columns:repeat(4,1fr)}}
.stat-bar .stat{text-align:center}
.stat-bar b{display:block;font-family:var(--font-mono);font-size:1.7rem;color:#fff}
.stat-bar span{font-size:.82rem;color:#c9d8e6}

/* ---------- Process / timeline (route motif) ---------- */
.route{position:relative;max-width:900px;margin-inline:auto;padding-left:34px}
.route::before{content:"";position:absolute;left:14px;top:6px;bottom:6px;border-left:3px dashed #cfc7ac}
.route-step{position:relative;padding-bottom:36px}
.route-step:last-child{padding-bottom:0}
.route-step::before{content:"";position:absolute;left:-34px;top:0;width:30px;height:30px;border-radius:50%;background:var(--emerald);border:4px solid var(--paper);box-shadow:0 0 0 2px var(--emerald)}
.route-step .step-num{font-family:var(--font-mono);font-size:.76rem;color:var(--emerald-dark);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:4px}
.route-step h3{margin-bottom:6px}
.route-step p{margin-bottom:0}

/* ---------- Table ---------- */
.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
table.styled{width:100%;border-collapse:collapse;background:#fff;min-width:560px}
table.styled th{background:var(--navy);color:#fff;text-align:left;padding:12px 16px;font-size:.86rem;font-weight:600;white-space:nowrap}
table.styled td{padding:12px 16px;border-bottom:1px solid var(--line);font-size:.9rem;color:var(--ink-soft)}
table.styled tr:last-child td{border-bottom:none}
table.styled tr:nth-child(even) td{background:#fbf9f4}

/* ---------- Testimonials ---------- */
.testi-scroll{display:flex;gap:18px;overflow-x:auto;padding:6px 2px 20px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.testi-scroll::-webkit-scrollbar{height:8px}
.testi-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.testi-card{scroll-snap-align:start;flex:0 0 300px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm)}
@media(min-width:640px){.testi-card{flex-basis:340px}}
.testi-stars{color:var(--amber);margin-bottom:10px;font-size:.95rem}
.testi-card p{font-size:.93rem;color:var(--ink)}
.testi-who{display:flex;align-items:center;gap:10px;margin-top:14px}
.testi-avatar{width:38px;height:38px;border-radius:50%;background:var(--emerald-light);color:var(--emerald-dark);display:grid;place-items:center;font-weight:700;font-family:var(--font-mono);flex:none}
.testi-who b{display:block;font-size:.88rem;color:var(--navy)}
.testi-who span{font-size:.78rem;color:var(--ink-soft)}

/* client logos */
.logo-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:640px){.logo-strip{grid-template-columns:repeat(4,1fr)}}
@media(min-width:900px){.logo-strip{grid-template-columns:repeat(6,1fr)}}
.logo-strip .logo-tile{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);display:grid;place-items:center;padding:14px;height:76px}
.logo-strip img{max-height:36px;max-width:100%;object-fit:contain;filter:grayscale(1);opacity:.75;transition:.2s}
.logo-strip .logo-tile:hover img{filter:none;opacity:1}

/* ---------- FAQ accordion ---------- */
.faq-list{max-width:820px;margin:0 auto;display:grid;gap:12px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px;background:none;border:none;text-align:left;font-weight:700;color:var(--navy);cursor:pointer;font-size:1rem;font-family:var(--font-body)}
.faq-q .chev{transition:transform .2s ease;flex:none}
.faq-item[open] .faq-q .chev{transform:rotate(180deg)}
.faq-a{padding:0 20px 18px;color:var(--ink-soft);font-size:.94rem}
.faq-a p{margin-bottom:.6em}
summary::-webkit-details-marker{display:none}
summary{list-style:none}

/* ---------- Locality chips ---------- */
.chip-cloud{display:flex;flex-wrap:wrap;gap:10px}
.chip{background:#fff;border:1px solid var(--line);padding:9px 16px;border-radius:99px;font-size:.85rem;font-weight:600;color:var(--navy)}

/* ---------- Lead form ---------- */
.lead-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow)}
.lead-form h3{margin:-26px -26px 18px;padding:16px 26px;background:var(--emerald-light);color:var(--emerald-dark);border-bottom:1px solid #cfe9dd;border-radius:var(--radius-lg) var(--radius-lg) 0 0;font-size:1.1rem}
.lead-form h3 .icon-inline{color:var(--emerald-dark)}
.field{margin-bottom:12px}
.field label{display:block;font-size:.8rem;font-weight:700;color:var(--navy);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);transition:border-color .15s}
/* Mobile: drop visible field labels to shrink form height; placeholders carry the label text.
   Labels stay in the DOM (visually-hidden) so screen readers still announce them. */
@media(max-width:640px){
  .lead-form{padding:20px}
  .lead-form h3{margin:-20px -20px 14px;padding:14px 20px;font-size:1.02rem}
  .field{margin-bottom:10px}
  .field label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
  .field input,.field select,.field textarea{padding:11px 13px}
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--emerald);outline:none;background:#fff}
.field-row{display:grid;gap:12px}
@media(min-width:480px){.field-row-2{grid-template-columns:1fr 1fr}}
.hp{position:absolute;left:-9999px;opacity:0}
.check-group{display:flex;flex-wrap:wrap;gap:14px;margin:8px 0 4px}
.check-pill{display:flex;align-items:center;gap:7px;font-size:.86rem;color:var(--ink-soft)}
.form-note{font-size:.78rem;color:var(--ink-soft);background:var(--paper-2);border-radius:10px;padding:10px 12px;margin-top:10px}

.sidebar-cta{position:sticky;top:96px}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(120deg,var(--emerald-dark),var(--emerald));border-radius:var(--radius-lg);color:#fff;padding:36px 26px;text-align:center;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;inset:0;background:radial-gradient(300px 200px at 90% 0%,rgba(255,255,255,.18),transparent 60%)}
.cta-band h2{color:#fff}
.cta-band p{color:#e8f5ee}
.cta-band .hero-cta{justify-content:center}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy);color:#c9d8e6;padding-top:56px}
.footer-grid{display:grid;gap:32px;grid-template-columns:1fr}
@media(min-width:760px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.footer-grid h4{color:#fff;font-family:var(--font-body);font-size:.92rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px}
.footer-grid ul{display:grid;gap:9px}
.footer-grid a{font-size:.9rem;color:#c9d8e6}
.footer-grid a:hover{color:#fff}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px;color:#fff;font-family:var(--font-display);font-weight:700;font-size:1.02rem;line-height:1.25}
.footer-brand .brand-mark{width:40px;height:40px;border-radius:10px;flex:none;object-fit:contain;background:#fff;padding:4px}
.footer-bottom{border-top:1px solid #223f5c;margin-top:40px;padding:18px 0;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;font-size:.82rem}
.social-row{display:flex;gap:10px}
.social-row a{width:36px;height:36px;border-radius:50%;background:#173A5E;display:inline-flex;align-items:center;justify-content:center;color:#fff}
.social-row a:hover{background:var(--emerald)}
.social-row .icon{vertical-align:0}

/* ---------- Sticky mobile action bar ---------- */
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(15,44,76,.12)}
.mobile-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:13px 8px;font-weight:700;font-size:.9rem;white-space:nowrap}
.mobile-bar a .icon{vertical-align:0}
.mobile-bar a.call{color:var(--navy)}
.mobile-bar a.wa{background:var(--emerald-dark);color:#fff}
@media(min-width:1000px){.mobile-bar{display:none}}
body.menu-open .mobile-bar{display:none}
body{padding-bottom:60px}
@media(min-width:1000px){body{padding-bottom:0}}

/* back to top */
.to-top{position:fixed;right:16px;bottom:76px;width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s;z-index:65}
.to-top.show{opacity:1;visibility:visible;transform:none}
@media(min-width:1000px){.to-top{bottom:24px}}
/* Don't let the floating back-to-top button float on top of the open mobile menu's links. */
body.menu-open .to-top{opacity:0!important;visibility:hidden!important;pointer-events:none}
/* The shared "i-arrow" icon points right by default (used elsewhere for bullets/links) —
   rotate it to point up here so it actually reads as "back to top". */
.to-top .icon{transform:rotate(-90deg)}

/* ---------- Utility ---------- */
.text-center{text-align:center}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.two-col{display:grid;gap:40px}
@media(min-width:960px){.two-col{grid-template-columns:2fr 1fr;align-items:start}}
.prose h2{margin-top:1.6em}
.prose h3{margin-top:1.2em}
.prose ul{margin:0 0 1.2em;padding-left:1.3em}
.prose ul li{margin-bottom:.4em;color:var(--ink-soft)}
.prose img{border-radius:var(--radius);border:1px solid var(--line);margin:1.2em 0}
.badge-yes{color:var(--emerald-dark);font-weight:700}
.badge-no{color:var(--danger);font-weight:700}
.divider{height:1px;background:var(--line);border:none;margin:40px 0}
.note-box{background:#FDF1DC;border:1px solid #f3ddad;border-radius:var(--radius);padding:16px 18px;font-size:.88rem;color:#7a5311}

/* Scrollable "about" content box */
.about-scroll-box{margin:0 auto;max-height:220px;overflow-y:auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px;scrollbar-width:thin}
.about-scroll-box p{font-size:.95rem}
.about-scroll-box p:last-child{margin-bottom:0}
.about-scroll-box::-webkit-scrollbar{width:8px}
.about-scroll-box::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.about-scroll-box::-webkit-scrollbar-thumb:hover{background:var(--emerald)}
.error-code{font-family:var(--font-mono);font-size:5rem;color:var(--navy);line-height:1;margin-bottom:0}