/* ==========================================================================
   KPK Cargo — global stylesheet
   ========================================================================== */

:root {
  /* brand */
  --navy: #16305c;
  --navy-deep: #001b42;
  --navy-700: #2e4673;
  --navy-100: #d8e2ff;
  --red: #c8202e;
  --red-dark: #9e1723;
  --red-tint: #fdecee;

  /* surfaces */
  --bg: #f7f8fb;
  --card: #ffffff;
  --line: #e2e6ed;
  --line-soft: #eef1f6;

  /* text */
  --ink: #12161f;
  --ink-muted: #58627a;

  /* status */
  --green: #0e7a54;
  --green-tint: #e6f5ee;
  --amber: #b06a00;
  --amber-tint: #fdf1de;

  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 4px 12px rgba(22, 48, 92, .08);
  --shadow-lg: 0 18px 40px -12px rgba(22, 48, 92, .22);
  --container: 1200px;

  /* chrome heights — the drawer, scroll offsets and sticky rails all derive
     from these, so they must stay in step with the real rendered bars */
  --topbar-h: 38px;
  --header-h: 60px;
  --chrome-h: calc(var(--topbar-h) + var(--header-h));
  --gutter: 20px;

  --font-head: "Montserrat", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

@media (min-width: 960px) {
  :root { --topbar-h: 40px; --header-h: 72px; }
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* No overflow-x guard on html/body on purpose. The old `overflow-x: hidden`
   here made the sticky header non-sticky (an overflow ancestor becomes the
   sticky containing block, so the header just scrolled away), and it hid
   layout bugs rather than fixing them. Every element is constrained on its
   own instead — see the min-width:0 rules on grid/flex children and the
   .table-wrap scrollers. */

/* Scroll lock for the drawer and the bottom sheet.
   Deliberately NOT `position: fixed` on the body: that takes the body out of
   flow, which strands the sticky header off-screen whenever you open the
   drawer part-way down the page. `overflow: hidden` plus `touch-action` here
   and `overscroll-behavior: contain` on the panel stops scroll chaining
   without touching layout. */
body.scroll-locked { overflow: hidden; touch-action: none; }
body.scroll-locked .mobile-nav, body.scroll-locked .modal { touch-action: auto; }
/* reserve the scrollbar space so locking never shifts the desktop layout */
html { scrollbar-gutter: stable; }

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.15; color: var(--navy-deep); margin: 0 0 .5em; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(1.875rem, 5.2vw, 3.25rem); line-height: 1.08; letter-spacing: -.03em; }
h2 { font-size: clamp(1.4375rem, 4vw, 2.25rem); }
h3 { font-size: clamp(1.0625rem, 2.5vw, 1.375rem); }
p  { margin: 0 0 1rem; text-wrap: pretty; }
/* long unbroken strings (tracking refs, emails) must never widen a column */
p, li, dd, td, th, h1, h2, h3, h4 { overflow-wrap: break-word; }
a  { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-radius: 4px; }
/* red-on-navy fails contrast, so dark surfaces get a light ring instead */
.topbar :focus-visible, .site-footer :focus-visible, .cta-band :focus-visible,
.page-hero :focus-visible, .modal-head :focus-visible, .svc-feature:focus-visible {
  outline-color: #fff;
}

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
/* respect notches/rounded corners in landscape */
@supports (padding: max(0px)) {
  .container { padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
}
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.muted { color: var(--ink-muted); }
.center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .5rem 1.4rem;
  border-radius: var(--radius); border: 1px solid transparent;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  cursor: pointer; text-decoration: none !important;
  /* keep labels on one line where they fit, but never let one blow out the
     layout on a 320px screen */
  text-align: center; text-wrap: balance; min-width: 0; max-width: 100%;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease;
}
.btn svg { flex: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--red); color: #fff; box-shadow: 0 6px 16px -6px rgba(200, 32, 46, .6); }
.btn-primary:hover { background: var(--red-dark); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-deep); }
.btn-outline { background: transparent; color: var(--navy-deep); border-color: var(--line); }
.btn-outline:hover { border-color: var(--navy); background: #fff; }
.btn-ghost-light { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.35); }
.btn-ghost-light:hover { background: rgba(255,255,255,.2); }
.btn-wa { background: #25d366; color: #0b3d20; }
.btn-wa:hover { background: #1eb958; }
.btn-block { width: 100%; }
.btn-lg { min-height: 54px; font-size: 16px; padding: 0 1.75rem; }

/* ---------- top bar ---------- */
.topbar { background: var(--navy-deep); color: #c9d6f0; font-size: 13px; }
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--topbar-h); }
.topbar a { color: #e7eefc; }
.topbar-links { display: flex; align-items: center; gap: 1.25rem; min-width: 0; }
.topbar-links a { display: inline-flex; align-items: center; gap: .4rem; padding-block: .35rem; }
.topbar-social { display: flex; gap: .35rem; }
/* 24px icons in a 34px hit area — tappable without growing the bar */
.topbar-social a { display: grid; place-items: center; width: 34px; height: 34px; margin-block: -4px; opacity: .85; }
.topbar-social a:hover { opacity: 1; }
@media (max-width: 720px) {
  /* scoped to beat `.topbar-links a` on specificity, not just source order */
  .topbar .topbar-hide-sm { display: none; }
  .topbar { font-size: 12.5px; letter-spacing: .01em; }
  .topbar .container { justify-content: center; gap: .5rem; }

  /* Sliding contact ticker: there isn't room for phone + WhatsApp + email side
     by side, and hiding two of the three wasted the strip. Each slide rests
     while it's on screen so it stays tappable — nothing scrolls under a thumb.
     Height is fixed here because the slides are absolutely positioned. */
  .topbar-links[data-ticker] {
    position: relative; flex: 1 1 auto; height: 24px; overflow: hidden;
  }
  .topbar-links[data-ticker] > a {
    position: absolute; inset: 0; justify-content: center; padding-block: 0;
    transform: translateX(55%); opacity: 0; visibility: hidden;
    transition: transform .55s cubic-bezier(.2,.7,.3,1), opacity .4s ease, visibility .55s;
  }
  .topbar-links[data-ticker] > a.is-current { transform: none; opacity: 1; visibility: visible; }
  .topbar-links[data-ticker] > a.is-leaving { transform: translateX(-55%); opacity: 0; }
  /* before JS runs, the first item is the visible one */
  .topbar-links[data-ticker]:not(.is-live) > a:first-child { transform: none; opacity: 1; visibility: visible; }
}
/* a slideshow that can't be stopped is a nuisance; motion-averse users get a
   plain static row instead */
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .topbar-links[data-ticker] { height: auto; }
  .topbar-links[data-ticker] > a { position: static; transform: none; opacity: 1; visibility: visible; }
  .topbar-links[data-ticker] > a:not(:first-child) { display: none; }
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s ease;
}
/* lifts off the page only once you've scrolled — set by main.js */
.site-header.is-stuck { box-shadow: 0 6px 24px -12px rgba(22,48,92,.35); }
.site-header .container { display: flex; align-items: center; gap: .75rem; min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: .65rem; min-height: 44px; margin-right: auto; min-width: 0; text-decoration: none !important; }
.brand img { height: 34px; width: auto; }
@media (min-width: 600px) { .brand img { height: 40px; } }
.brand-tag { display: none; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); border-left: 1px solid var(--line); padding-left: .65rem; line-height: 1.45; white-space: nowrap; }
@media (min-width: 1024px) { .brand-tag { display: block; } .brand img { height: 46px; } }

.nav { display: none; gap: .35rem; }
.nav a {
  color: var(--navy-deep); font-weight: 600; font-size: 15px;
  padding: .55rem .8rem; border-radius: 8px; text-decoration: none !important;
}
.nav a:hover { background: var(--line-soft); }
.nav a.active { color: var(--red); }
.header-cta { display: none; gap: .5rem; margin-left: .5rem; }
@media (min-width: 960px) { .nav, .header-cta { display: flex; } }

.burger {
  display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; flex: none;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.burger span { display: block; width: 20px; height: 2px; background: var(--navy-deep); border-radius: 2px; position: relative; transition: .2s; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--navy-deep); border-radius: 2px; transition: .2s; }
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
@media (min-width: 960px) { .burger { display: none; } }

/* The drawer starts *below* the sticky header rather than behind it — the old
   fixed-inset-0 panel put its first link under the header bar. It also uses
   dvh so the iOS URL bar can't clip the bottom CTAs. */
.mobile-nav {
  position: fixed; left: 0; right: 0; top: var(--nav-top, var(--chrome-h)); z-index: 99;
  max-height: calc(100dvh - var(--nav-top, var(--chrome-h)));
  background: #fff; border-bottom: 1px solid var(--line);
  box-shadow: 0 24px 48px -24px rgba(0,27,66,.45);
  padding: .5rem var(--gutter) calc(2rem + env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity .22s ease, transform .28s cubic-bezier(.2,.7,.3,1), visibility .22s;
}
.mobile-nav.open { visibility: visible; opacity: 1; transform: none; }
/* dim the page behind it so the drawer reads as a layer, not a second page */
.mobile-nav::after { content: none; }
/* starts below the header so the chrome above the drawer stays crisp — dimming
   the top bar but not the header (which sits above it) looked like a bug */
.nav-backdrop {
  position: fixed; inset: var(--nav-top, var(--chrome-h)) 0 0; z-index: 98; background: rgba(0,12,32,.42);
  backdrop-filter: blur(2px); opacity: 0; visibility: hidden;
  transition: opacity .22s ease, visibility .22s;
}
.nav-backdrop.open { opacity: 1; visibility: visible; }
@media (min-width: 960px) { .mobile-nav, .nav-backdrop { display: none; } }

.mobile-nav a.mlink {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 56px; padding: .85rem .25rem;
  font-family: var(--font-head); font-size: 1.125rem; font-weight: 700;
  color: var(--navy-deep); border-bottom: 1px solid var(--line-soft); text-decoration: none !important;
}
.mobile-nav a.mlink svg { flex: none; color: var(--ink-muted); }
.mobile-nav a.mlink[aria-current="page"] { color: var(--red); }
.mobile-nav a.mlink[aria-current="page"] svg { color: var(--red); }
.mobile-nav .mcta { display: grid; gap: .6rem; margin-top: 1.25rem; }
.mobile-nav .mcontact { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-muted); }
.mobile-nav .mcontact p { margin-bottom: .75rem; }
.mobile-nav .mcontact strong { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--navy-deep); }

/* ---------- sections ---------- */
.section { padding: 56px 0; }
.section-alt { background: #fff; border-block: 1px solid var(--line); }
@media (min-width: 768px) { .section { padding: 80px 0; } }
.section-head { max-width: 660px; margin: 0 auto 2.5rem; text-align: center; }
.section-head p { color: var(--ink-muted); margin: 0; }
.eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--red); margin-bottom: .75rem;
}

/* ---------- hero ---------- */
.hero { position: relative; background: #fff; overflow: hidden; padding: 40px 0 48px; }
.hero::after {
  content: ""; position: absolute; top: -180px; right: -160px; width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(22,48,92,.07), transparent 68%); border-radius: 50%; pointer-events: none;
}
.hero-grid { display: grid; gap: 2rem; align-items: center; position: relative; z-index: 1; }
@media (min-width: 940px) { .hero { padding: 72px 0 88px; } .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 3.5rem; } }
.hero h1 { margin-bottom: 1rem; }
.hero h1 .accent { color: var(--red); }
.hero-sub { font-size: clamp(1rem, 2.2vw, 1.125rem); color: var(--ink-muted); max-width: 34em; margin-bottom: 1.75rem; }
@media (min-width: 940px) { .hero-sub { margin-bottom: 2.25rem; } }

.hero-media { position: relative; }
.hero-media .photo { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; }
.hero-media .photo img { width: 100%; height: 100%; object-fit: cover; }
.price-float {
  position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,.94);
  backdrop-filter: blur(6px); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: .6rem .85rem;
}
.price-float span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.price-float strong { font-family: var(--font-head); font-size: 1.15rem; color: var(--navy-deep); }
@media (min-width: 600px) { .price-float { top: 18px; left: -8px; padding: .75rem 1rem; } .price-float strong { font-size: 1.35rem; } }
.price-float strong em { font-style: normal; color: var(--red); }
@media (min-width: 940px) { .price-float { left: -28px; top: 28px; } }

/* hero CTA row */
/* one full-width primary action per row on phones — thumb-friendly and it
   stops long labels from being squeezed into two cramped columns */
.hero-cta { display: grid; gap: .65rem; }
@media (min-width: 520px) { .hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; } .hero-cta .btn { flex: 0 0 auto; } }
.hero-note { display: flex; align-items: center; gap: .5rem; margin: 1.5rem 0 0; font-size: 14px; font-weight: 500; color: var(--ink-muted); }
.hero-note svg { flex: none; color: var(--green); }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0, 12, 32, .6); backdrop-filter: blur(4px); animation: mfade .2s ease; }
@keyframes mfade { from { opacity: 0; } }
@keyframes mrise { from { opacity: 0; transform: translateY(18px) scale(.985); } }

.modal-panel {
  position: relative; width: 100%; max-width: 560px; max-height: calc(100dvh - 32px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #fff; border-radius: var(--radius-lg); box-shadow: 0 30px 70px -20px rgba(0,12,32,.6);
  animation: mrise .32s cubic-bezier(.2,.7,.3,1);
}
.modal-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: grid; place-items: center; width: 40px; height: 40px;
  background: rgba(255,255,255,.9); border: 1px solid var(--line); border-radius: 50%;
  color: var(--navy-deep); cursor: pointer;
}
.modal-close:hover { background: var(--line-soft); }

.modal-head {
  padding: 1.75rem 1.5rem 1.25rem; background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; color: #fff;
}
.modal-head h2 { color: #fff; font-size: 1.4rem; margin: .35rem 0 .35rem; }
.modal-head p { color: #b9c8e6; font-size: 15px; margin: 0; }
.modal-head .eyebrow { color: #ff8f98; }
.modal-body { padding: 1.5rem; }
.modal-foot { margin: 1rem 0 0; font-size: 13px; color: var(--ink-muted); text-align: center; }

.qm-estimate {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
  margin: 1.25rem 0; padding: 1rem 1.15rem;
  background: var(--red-tint); border: 1px solid rgba(200,32,46,.2); border-radius: var(--radius);
}
.qm-estimate > div:first-child { display: flex; align-items: baseline; gap: .6rem; }
.qm-estimate span { font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.qm-estimate b { font-family: var(--font-head); font-size: 1.75rem; color: var(--red); font-variant-numeric: tabular-nums; line-height: 1; }
.qm-estimate-meta { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.qm-estimate-meta span:first-child { color: var(--navy-deep); }
@media (max-width: 420px) { .qm-estimate-meta { align-items: flex-start; text-align: left; } }

.qm-tick {
  display: grid; place-items: center; width: 68px; height: 68px; margin: .5rem auto 1.25rem;
  background: var(--green-tint); color: var(--green); border-radius: 50%;
}

@media (max-width: 560px) {
  .modal { padding: 0; place-items: end stretch; }
  .modal-panel {
    max-width: none; max-height: 92dvh; border-radius: 18px 18px 0 0;
    animation: msheet .34s cubic-bezier(.2,.7,.3,1); overscroll-behavior: contain;
  }
  .modal-head { border-radius: 18px 18px 0 0; padding: 1.5rem 1.25rem 1.15rem; }
  /* the home-bar inset lives on the panel, so the last field is never buried */
  .modal-body { padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); }
  /* grab handle: signals "drag/scroll me" the way native sheets do */
  .modal-panel::before {
    content: ""; position: absolute; top: 8px; left: 50%; translate: -50% 0; z-index: 3;
    width: 38px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.4);
  }
  .modal-close { top: 16px; right: 12px; }
  /* The form is taller than a phone screen, so the primary action rides along
     the bottom of the sheet instead of hiding below the fold. The white ring
     masks the content scrolling underneath it. */
  #qm-form > button[type="submit"] {
    position: sticky; bottom: .35rem; z-index: 2;
    box-shadow: 0 8px 18px -8px rgba(200,32,46,.7), 0 0 0 8px #fff;
  }
}
@keyframes msheet { from { transform: translateY(100%); } }

/* tracking widget */
.track-widget {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 1rem;
}
.track-widget form { display: grid; gap: .65rem; }
@media (min-width: 560px) { .track-widget form { grid-template-columns: 1fr auto; } }
.track-hint { font-size: 13px; color: var(--ink-muted); margin: .75rem .25rem 0; }

/* ---------- forms ---------- */
.field { display: grid; gap: .35rem; }
.field > label { font-size: 13px; font-weight: 600; color: var(--navy-deep); }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: .7rem .9rem;
  font-family: var(--font-body); font-size: 16px; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: #9aa3b5; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(22,48,92,.12);
}
.textarea { min-height: 130px; resize: vertical; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2358627a' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 2.5rem; }
.form-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .form-grid-2 { grid-template-columns: 1fr 1fr; } .span-2 { grid-column: 1 / -1; } }

.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; padding: .3rem; background: var(--line-soft); border-radius: var(--radius); }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 44px; border-radius: 8px; font-weight: 600; font-size: 15px;
  color: var(--ink-muted); cursor: pointer; transition: .15s;
}
.segmented input:checked + label { background: #fff; color: var(--navy-deep); box-shadow: var(--shadow); }
.segmented input:focus-visible + label { outline: 3px solid var(--red); outline-offset: 2px; }

/* ---------- trust strip ---------- */
.trust { background: #fff; border-block: 1px solid var(--line); }
.trust ul { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; padding: 1.25rem 0; }
@media (min-width: 900px) { .trust ul { grid-template-columns: repeat(4, 1fr); } }
.trust li { display: flex; align-items: center; gap: .6rem; font-size: 14px; font-weight: 600; color: var(--navy-deep); }
.trust svg { flex: none; color: var(--red); }

/* ---------- cards / grids ---------- */
/* grid/flex children must be allowed to shrink below their content width,
   otherwise wide tables push the whole page sideways on phones */
.grid > *, .split > *, .quote-layout > *, .steps > *, .hero-grid > *, .footer-grid > * { min-width: 0; }

.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #cfd7e6; }
.card h3 { margin-bottom: .4rem; }
.card p { color: var(--ink-muted); font-size: 15px; margin: 0; }
.card-icon {
  display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 1rem;
  background: var(--red-tint); color: var(--red); border-radius: var(--radius);
}
.card-link { display: inline-flex; align-items: center; gap: .35rem; margin-top: 1rem; font-weight: 600; font-size: 14px; }

/* ---------- services bento ---------- */
.svc-grid { display: grid; gap: 1rem; }
@media (min-width: 700px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .svc-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }

.svc {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  padding: 1.75rem 1.5rem 1.5rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  text-decoration: none !important; color: inherit; isolation: isolate;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, border-color .35s ease;
}
/* navy wash that sweeps up on hover */
.svc::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  transform: translateY(101%); transition: transform .45s cubic-bezier(.2,.7,.3,1);
}
/* red accent rule that grows along the top */
.svc::after {
  content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 100%;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.2,.7,.3,1);
}
.svc:hover, .svc:focus-visible { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--navy-deep); }
.svc:hover::before, .svc:focus-visible::before { transform: translateY(0); }
.svc:hover::after, .svc:focus-visible::after { transform: scaleX(1); }

.svc-index {
  position: absolute; top: 1.25rem; right: 1.35rem;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  color: var(--outline-variant, #c4c6d0); transition: color .35s ease;
}
.svc-ico {
  display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 1.25rem;
  background: var(--red-tint); color: var(--red); border-radius: 14px;
  transition: background .35s ease, color .35s ease, transform .45s cubic-bezier(.2,.7,.3,1);
}
.svc:hover .svc-ico { background: var(--red); color: #fff; transform: rotate(-6deg) scale(1.06); }
.svc h3 { font-size: 1.15rem; margin-bottom: .45rem; transition: color .35s ease; }
.svc p { font-size: 15px; color: var(--ink-muted); margin: 0 0 1.25rem; transition: color .35s ease; }
.svc-more {
  margin-top: auto; display: inline-flex; align-items: center; gap: .45rem;
  font-size: 14px; font-weight: 700; color: var(--red); transition: color .35s ease, gap .35s ease;
}
.svc-more svg { transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.svc:hover .svc-more { color: #fff; gap: .8rem; }
.svc:hover .svc-more svg { transform: translateX(4px); }
.svc:hover h3 { color: #fff; }
.svc:hover p { color: #b9c8e6; }
.svc:hover .svc-index { color: rgba(255,255,255,.45); }

/* featured tile — spans two columns on wide screens */
.svc-feature { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%); border-color: var(--navy-deep); color: #fff; }
@media (min-width: 1040px) { .svc-feature { grid-column: span 2; flex-direction: row; align-items: center; gap: 2rem; padding: 2rem; } }
.svc-feature::before { display: none; }
.svc-feature h3 { color: #fff; font-size: clamp(1.3rem, 3vw, 1.75rem); }
.svc-feature p { color: #b9c8e6; }
.svc-feature .svc-ico { background: rgba(255,255,255,.12); color: #fff; }
.svc-feature:hover .svc-ico { background: var(--red); }
.svc-feature .svc-index { color: rgba(255,255,255,.4); }
.svc-feature .svc-more { color: #fff; }
.svc-feature:hover { transform: translateY(-6px); }
.svc-stats { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 0 0 1.25rem; }
.svc-stats div { min-width: 84px; }
.svc-stats b { display: block; font-family: var(--font-head); font-size: 1.5rem; color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums; }
.svc-stats span { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #8fa6d2; font-weight: 600; }
.svc-feature-body { flex: 1; }

/* closing CTA tile inside the services bento */
.svc-cta {
  display: flex; flex-direction: column; gap: 1.25rem; justify-content: center;
  padding: 1.75rem 1.5rem;
  background: var(--red-tint); border: 1px dashed rgba(200,32,46,.35); border-radius: var(--radius-lg);
}
.svc-cta h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.svc-cta p { font-size: 15px; color: var(--ink-muted); margin: 0; }
.svc-cta-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.svc-cta-actions .btn { flex: 1 1 auto; }
.svc-cta-actions .btn-outline { background: #fff; }
@media (min-width: 1040px) {
  .svc-cta { grid-column: span 2; flex-direction: row; align-items: center; justify-content: space-between; padding: 1.75rem 2rem; }
  .svc-cta-actions { flex: none; }
}

/* ---------- scroll reveal ---------- */
/* Content is hidden ONLY once JS has confirmed it can reveal it again
   (html.js-anim is set by main.js). Without JS, nothing is ever hidden. */
.js-anim .reveal { opacity: 0; transform: translateY(22px); }
.reveal { transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.js-anim .reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .07s; }
.reveal[data-d="2"] { transition-delay: .14s; }
.reveal[data-d="3"] { transition-delay: .21s; }
.reveal[data-d="4"] { transition-delay: .28s; }
.reveal[data-d="5"] { transition-delay: .35s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* rate cards */
.rate-card { position: relative; display: flex; flex-direction: column; }
.rate-card.featured { border-color: var(--navy); box-shadow: var(--shadow); }
.ribbon {
  position: absolute; top: -11px; left: 1.5rem; background: var(--red); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .25rem .6rem; border-radius: 6px;
}
.rate-route { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--navy-deep); min-height: 2.6em; }
.rate-price { display: flex; align-items: baseline; gap: .25rem; margin: .5rem 0 1rem; }
.rate-price b { font-family: var(--font-head); font-size: 2.25rem; color: var(--red); line-height: 1; font-variant-numeric: tabular-nums; }
.rate-price span { font-size: 14px; color: var(--ink-muted); font-weight: 600; }
.rate-meta { display: grid; gap: .5rem; font-size: 14px; color: var(--ink-muted); margin-bottom: 1.25rem; }
.rate-meta li { display: flex; align-items: center; gap: .5rem; }
.rate-meta svg { flex: none; color: var(--navy); }
.rate-card .btn { margin-top: auto; }

/* steps */
.steps { counter-reset: s; display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); position: relative; } }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem 1.5rem; text-align: center; }
.step-num {
  display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 1rem;
  background: var(--navy); color: #fff; border-radius: 50%;
  font-family: var(--font-head); font-weight: 700; font-size: 1.1rem;
}
.step:last-child .step-num { background: var(--red); }

/* ---------- what can you send ---------- */
.send-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 520px) { .send-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 820px)  { .send-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
@media (min-width: 1100px) { .send-grid { grid-template-columns: repeat(6, 1fr); } }
.send-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .6rem; padding: 1.25rem .75rem; text-align: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), border-color .25s ease, box-shadow .25s ease;
}
.send-item svg { color: var(--navy); transition: color .25s ease, transform .35s cubic-bezier(.2,.7,.3,1); }
.send-item span { font-size: 13px; font-weight: 600; color: var(--navy-deep); line-height: 1.3; }
.send-item:hover { transform: translateY(-4px); border-color: var(--navy); box-shadow: var(--shadow); }
.send-item:hover svg { color: var(--red); transform: scale(1.12); }
/* the accent tile is also matched by class: once the marquee clones the set,
   :last-child no longer lands on the original "and much more" tile */
.send-item:last-child, .send-item--more { background: var(--red-tint); border-style: dashed; border-color: rgba(200,32,46,.35); }
.send-item:last-child svg, .send-item:last-child span,
.send-item--more svg, .send-item--more span { color: var(--red); }

/* ---------- send marquee (phones) ----------
   Ten tiles in a 2-column grid ran to five rows of dead vertical space on a
   phone. main.js adds .is-marquee (and the duplicate set the loop needs), so
   without JS this stays the plain grid above. */
/* The viewport is a wrapper div (a <ul> may only contain <li>, so the animated
   track has to be the list itself). */
.send-viewport {
  overflow: hidden;
  /* full-bleed: the row runs off both screen edges rather than stopping at the gutter */
  margin-inline: calc(var(--gutter) * -1);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
@media (max-width: 700px) {
  .send-grid.is-marquee {
    display: flex; gap: .75rem; width: max-content;
    /* --marquee-shift is measured in JS: exactly one set plus one gap, so the
       loop point is seamless rather than a guessed -50% */
    animation: send-marquee var(--marquee-dur, 30s) linear infinite;
  }
  .send-grid.is-marquee:hover, .send-grid.is-marquee:focus-within { animation-play-state: paused; }
  .send-grid.is-marquee .send-item { flex: none; width: 108px; padding: 1rem .5rem; }
  .send-grid.is-marquee .send-item span { font-size: 12.5px; }
}
@keyframes send-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(var(--marquee-shift, 50%) * -1)); }
}
/* no crawling row for motion-averse users — they keep the static grid */
@media (prefers-reduced-motion: reduce) {
  .send-grid.is-marquee { animation: none; }
}

/* pill list */
.pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem; background: #fff; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--navy-deep); }
.pill svg { color: var(--red); }

/* do / don't */
.dos li, .donts li { display: flex; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; }
.dos li:last-child, .donts li:last-child { border-bottom: 0; }
.dos svg { color: var(--green); flex: none; margin-top: 4px; }
.donts svg { color: var(--red); flex: none; margin-top: 4px; }
.dos strong, .donts strong { display: block; color: var(--navy-deep); font-size: 15px; }
.dos span, .donts span { color: var(--ink-muted); font-size: 14px; }

/* ---------- accordion ---------- */
.faq { max-width: 780px; margin-inline: auto; display: grid; gap: .75rem; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem; cursor: pointer; font-weight: 600; color: var(--navy-deep); list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-head); font-size: 1.4rem; color: var(--red); line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq .faq-body { padding: 0 1.25rem 1.25rem; color: var(--ink-muted); font-size: 15px; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--navy-deep); color: #fff; position: relative; overflow: hidden; }
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(1000px 320px at 85% 120%, rgba(200,32,46,.35), transparent 70%);
}
.cta-band .container { position: relative; display: grid; gap: 1.5rem; padding-block: 48px; align-items: center; }
@media (min-width: 900px) { .cta-band .container { grid-template-columns: 1fr auto; padding-block: 60px; } }
.cta-band h2 { color: #fff; margin-bottom: .35rem; }
.cta-band p { color: #b9c8e6; margin: 0; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- footer ---------- */
.site-footer { background: var(--navy-deep); color: #a9bce0; font-size: 15px; padding: 48px 0 env(safe-area-inset-bottom); }
.site-footer h4 { color: #fff; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1.1rem; }
.site-footer a { color: #cfdcf5; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; gap: 2.25rem; padding-bottom: 2.5rem; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1040px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.footer-logo { height: 44px; width: auto; margin-bottom: 1rem; }
.site-footer ul li { margin-bottom: .6rem; }
/* On phones the footer link lists become a comfortable tap column: 19px text
   links are fine with a mouse and miserable with a thumb. */
@media (max-width: 759px) {
  .site-footer ul li { margin-bottom: 0; }
  .site-footer ul a { display: flex; align-items: center; min-height: 42px; }
  .footer-contact li { min-height: 42px; align-items: center; }
  .footer-contact li svg { margin-top: 0; }
  .site-footer h4 { margin-bottom: .5rem; }
}
.footer-contact li { display: flex; gap: .6rem; align-items: flex-start; }
.footer-contact svg { flex: none; margin-top: 5px; color: #7f9ad0; }
.footer-hours { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.footer-hours .closed { color: #ff8f98; }
.footer-social { display: flex; gap: .75rem; margin-top: 1.25rem; }
.footer-social a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; }
.footer-social a:hover { background: rgba(255,255,255,.1); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); padding: 1.25rem 0;
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; font-size: 13px;
}
.footer-bottom ul { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.footer-bottom li { margin: 0; }
@media (max-width: 959px) { .footer-grid { gap: 1.75rem; } }

/* ---------- floating whatsapp + mobile bar ---------- */
.wa-float {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  width: 56px; height: 56px; display: grid; place-items: center;
  background: #25d366; border-radius: 50%; box-shadow: 0 10px 24px -6px rgba(37,211,102,.7);
  color: #fff;
}
.wa-float:hover { background: #1eb958; }
/* sits clear of the home-bar gesture area on phones */
@media (max-width: 959px) {
  .wa-float {
    bottom: calc(14px + env(safe-area-inset-bottom));
    right: 14px; width: 52px; height: 52px;
  }
}

/* ---------- page hero (inner pages) ---------- */
.page-hero { background: var(--navy-deep); color: #fff; padding: 40px 0 48px; position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(760px 300px at 15% 0%, rgba(200,32,46,.3), transparent 70%); }
.page-hero .container { position: relative; }
.page-hero h1 { color: #fff; margin-bottom: .5rem; }
.page-hero p { color: #b9c8e6; max-width: 46em; margin: 0; }
.crumbs { font-size: 13px; color: #8fa6d2; margin-bottom: 1rem; }
.crumbs a { color: #cfdcf5; display: inline-block; padding: .25rem .1rem; }
@media (min-width: 768px) { .page-hero { padding: 56px 0 64px; } }

/* ---------- tracking timeline ---------- */
.status-pill {
  display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem;
  border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .02em;
}
.status-pill.transit { background: var(--amber-tint); color: var(--amber); }
.status-pill.done { background: var(--green-tint); color: var(--green); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.dot.pulse { animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.timeline { position: relative; padding-left: 34px; }
.timeline::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.tl-item { position: relative; padding-bottom: 1.75rem; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -34px; top: 3px; width: 24px; height: 24px;
  border-radius: 50%; background: #fff; border: 2px solid var(--line);
}
.tl-item.done::before { background: var(--navy); border-color: var(--navy); }
.tl-item.done::after {
  content: ""; position: absolute; left: -27px; top: 10px; width: 10px; height: 5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
}
.tl-item.current::before { background: var(--red); border-color: var(--red); box-shadow: 0 0 0 5px rgba(200,32,46,.16); }
.tl-item h4 { margin: 0 0 .15rem; font-size: 15px; }
.tl-item.pending h4 { color: var(--ink-muted); }
.tl-meta { font-size: 13px; color: var(--ink-muted); }

.kv { display: grid; gap: .1rem; }
.kv-row { display: flex; justify-content: space-between; gap: .75rem 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.kv-row:last-child { border-bottom: 0; }
.kv-row dt { color: var(--ink-muted); flex: none; }
/* long refs/emails wrap inside the value column instead of stretching the row */
.kv-row dd { margin: 0; min-width: 0; font-weight: 600; color: var(--navy-deep); text-align: right; overflow-wrap: anywhere; }
@media (max-width: 380px) {
  .kv-row { flex-direction: column; gap: .15rem; }
  .kv-row dd { text-align: left; }
}

.copy-field { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.copy-btn { display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; padding: .35rem .75rem; font-size: 13px; font-weight: 600; background: var(--line-soft); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; color: var(--navy-deep); }
.copy-btn:hover { background: #fff; }

.notice { display: flex; gap: .75rem; padding: 1rem 1.15rem; border-radius: var(--radius); font-size: 14px; }
.notice svg { flex: none; margin-top: 2px; }
.notice-info { background: #eef3ff; color: var(--navy-700); }
.notice-error { background: var(--red-tint); color: var(--red-dark); }
.notice-ok { background: var(--green-tint); color: var(--green); }

.is-hidden { display: none !important; }

/* ---------- quote summary ---------- */
.summary { position: sticky; top: calc(var(--header-h) + 20px); }
.summary-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-top: .9rem; margin-top: .3rem; border-top: 2px solid var(--navy-deep); }
.summary-total b { font-family: var(--font-head); font-size: 2rem; color: var(--red); }
.quote-layout { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 940px) { .quote-layout { grid-template-columns: 1.55fr 1fr; gap: 2.5rem; } }

/* ---------- tables ---------- */
/* The old version bolted a permanent "Swipe to see more →" bar under every
   table, even ones that fit. A scroll-driven edge fade tells the truth
   instead: it only appears while there is actually more table to the right. */
/* .scroll-x is wrapped around the scroller by main.js so the fades can sit
   outside the scrolling box; without JS you simply get a plain scroller. */
.scroll-x { position: relative; }
.scroll-x::before, .scroll-x::after {
  content: ""; position: absolute; top: 1px; bottom: 1px; width: 34px; z-index: 2;
  pointer-events: none; opacity: 0; transition: opacity .2s ease;
}
.scroll-x::before { left: 1px; background: linear-gradient(to right, rgba(0,27,66,.13), rgba(0,27,66,0)); }
.scroll-x::after  { right: 1px; background: linear-gradient(to left,  rgba(0,27,66,.13), rgba(0,27,66,0)); }
.scroll-x.at-start::after, .scroll-x.scrolled::before { opacity: 1; }
.scroll-x.at-end::after { opacity: 0; }

.table-wrap {
  position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  overscroll-behavior-x: contain;
}
table { width: 100%; border-collapse: collapse; min-width: 460px; font-size: 15px; }
thead th { background: var(--navy-deep); color: #fff; font-family: var(--font-head); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; text-align: left; padding: .85rem 1rem; white-space: nowrap; }
tbody td { padding: .85rem 1rem; border-bottom: 1px solid var(--line-soft); }
@media (max-width: 560px) {
  table { font-size: 14px; }
  thead th, tbody td { padding: .7rem .8rem; }
}
tbody tr:nth-child(even) { background: #fafbfe; }
tbody tr:last-child td { border-bottom: 0; }
td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--navy-deep); font-weight: 500; }

/* ---------- misc layout helpers ---------- */
.split { display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 940px) { .split { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.stack-sm > * + * { margin-top: .75rem; }
.stack > * + * { margin-top: 1.25rem; }
.map-embed { border: 0; width: 100%; height: 320px; border-radius: var(--radius); }
.contact-card { display: flex; gap: 1rem; align-items: flex-start; }
.contact-card .card-icon { margin-bottom: 0; }
.service-nav {
  display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  scroll-snap-type: x proximity; overscroll-behavior-x: contain;
  /* bleed to the screen edge on phones so the strip reads as scrollable */
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  scroll-padding-left: var(--gutter);
}
@media (min-width: 700px) { .service-nav { margin-inline: 0; padding-inline: 0; } }
.service-nav::-webkit-scrollbar { display: none; }
.service-nav a { flex: none; scroll-snap-align: start; }

/* Hover transforms are a mouse idiom; on touch they fire on tap and stick,
   which is a big part of why the site felt unfinished on a phone. */
@media (hover: none) {
  .card-hover:hover, .svc:hover, .send-item:hover, .svc-feature:hover { transform: none; box-shadow: none; }
  .svc:hover::before { transform: translateY(101%); }
  .svc:hover h3 { color: var(--navy-deep); }
  .svc:hover p { color: var(--ink-muted); }
  .svc:hover .svc-ico { background: var(--red-tint); color: var(--red); transform: none; }
  .svc:hover .svc-more { color: var(--red); gap: .45rem; }
  .svc-feature:hover h3 { color: #fff; }
  .svc-feature:hover p { color: #b9c8e6; }
  /* keep the tap feedback that does make sense */
  .svc:active { transform: scale(.99); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}