/* =========================================================
   H REMOVALS: brand stylesheet
   Tokens: Shipping Navy / Packaging Orange / Van Ivory
   Signature device: the "shipping label"; every key module
   is dressed as a consignment label, stamp, or manifest line,
   because a removal is just cargo that happens to be your life.
   ========================================================= */

:root {
  --navy: #373d63;
  --navy-deep: #22243e;
  --orange: #c26f56;
  --ivory: #f5fffe;
  --paper: #e9e4d5;
  --ink: #23242f;

  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  --radius: 2px;
  --shear: skewX(-8deg);
  --container: 1180px;

  --shadow-sm: 0 2px 10px rgba(34,36,62,0.08);
  --shadow-md: 0 14px 34px rgba(34,36,62,0.14);
  --shadow-lg: 0 22px 54px rgba(34,36,62,0.22);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* The header is sticky, so anchor targets need to clear it. */
:target, [id] { scroll-margin-top: 100px; }

/* Keyboard focus ring, kept off mouse clicks. */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Canvas colour, used wherever the document doesn't reach - notably the
   overscroll area past the footer, which otherwise showed body's near-white.
   Deliberately a plain colour: an earlier version used a viewport-fixed
   gradient to match both ends, but iOS Safari does not honour
   background-attachment: fixed, so it could not be relied on. Footer navy is
   the right choice of the two, since the end of the page is what gets
   over-scrolled. */
html { background-color: var(--navy-deep); }

/* The document ends exactly at the footer, but the browser still lets you
   rubber-band beyond it into empty canvas. Pin the scroll to the content so
   the page stops at the footer. Set on both: the root is what governs the
   viewport, and some engines only honour it via body. */
html,
body {
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--ivory);
  font-size: 16px;
  line-height: 1.55;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0 0 0.4em;
  line-height: 1.02;
}

h1 { font-size: clamp(2.4rem, 5vw, 4.1rem); line-height: 1.04; }
/* A single long word in a heading is wider than a phone column and pushes the
   whole document sideways. Let headings break rather than overflow. */
h1, h2, h3, h4 { overflow-wrap: break-word; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.7em;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--orange);
  display: inline-block;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: 84px 0; }
@media (max-width: 720px) {
  section { padding: 56px 0; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.92rem;
  padding: 15px 28px;
  border: 2px solid var(--navy);
  border-radius: var(--radius);
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary { background: var(--orange); border-color: var(--orange); color: var(--ivory); }
.btn-primary:hover { transform: translateY(-2px); background: #ab5d47; border-color: #ab5d47; }
.btn-ghost { background: transparent; color: var(--navy); }
.btn-ghost:hover { background: var(--navy); color: var(--ivory); }
.btn-light { border-color: var(--ivory); color: var(--ivory); }
.btn-light:hover { background: var(--ivory); color: var(--navy); }

/* ---------- Nav (the luggage-tag header) ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ivory);
  border-bottom: 3px solid var(--navy);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* Vertical only: a `padding: 14px 0` shorthand here would override the
     .container gutters on the same element and run the header edge to edge. */
  padding-top: 14px;
  padding-bottom: 14px;
  position: relative;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  text-transform: uppercase;
  color: var(--navy);
  flex-shrink: 0;
  white-space: nowrap;
}
.brand .mark { width: 38px; height: 38px; flex-shrink: 0; }
.brand small {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  color: var(--orange);
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  position: relative;
  padding: 4px 0;
}
.nav-links a.active,
.nav-links a:hover { color: var(--orange); }
.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--orange);
}

.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-phone {
  display: inline-flex;
  /* Not baseline: combined with the 44px tap-target min-height it pins the
     glyphs to the top of the box, leaving the number sitting high in the bar. */
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy);
  white-space: nowrap;
  transition: color 0.15s ease;
}
.nav-phone:hover { color: var(--orange); }
.nav-phone .label {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--orange);
}

/* Icon-only call button, for widths where the full number won't fit
   beside the logo and the menu button. */
.nav-call {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--ivory);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.nav-call:hover { background: #ab5d47; }
.nav-call svg { width: 19px; height: 19px; }

.nav-toggle {
  display: none;
  background: none;
  border: 2px solid var(--navy);
  border-radius: var(--radius);
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.nav-toggle span {
  width: 20px;
  height: 2px;
  background: var(--navy);
  transition: transform 0.25s ease, opacity 0.15s ease;
}
/* Burger folds into a cross while the menu is open. */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Mobile menu ---------- */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }

  .nav-links.open {
    display: flex;
    flex-direction: column;
    /* The base .nav-links is a centred flex row; without this the column
       items shrink to their text and sit centred with stubby dividers. */
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--ivory);
    border-bottom: 3px solid var(--navy);
    box-shadow: var(--shadow-md);
    padding: 4px 24px 20px;
    gap: 0;
    animation: menu-in 0.18s ease-out;
  }
  .nav-links.open li { border-bottom: 1px dashed rgba(55,61,99,0.22); }
  .nav-links.open li:last-child { border-bottom: none; }

  .nav-links.open a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 2px;
    font-size: 1.02rem;
    letter-spacing: 0.05em;
  }
  /* Replaces the desktop underline, which is absolutely positioned. */
  .nav-links.open a::after,
  .nav-links.open a.active::after {
    content: "\2192";
    position: static;
    height: auto;
    background: none;
    color: var(--orange);
    opacity: 0.45;
    font-size: 1.05rem;
  }
  .nav-links.open a.active { color: var(--orange); }
  .nav-links.open a.active::after { opacity: 1; }

  /* Call and WhatsApp live in the menu, since the header bar only has room
     for the icon button at these widths. Scoped to .open so it beats the
     base `display: none` regardless of source order. */
  .nav-links.open .nav-mobile-cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 18px;
  }
  .nav-links.open .nav-mobile-cta .btn {
    width: 100%;
    justify-content: center;
    padding: 15px 20px;
  }
  .nav-links.open .nav-mobile-cta a::after { content: none; }
}
/* On tablets there's width to pair the two actions rather than stack two
   full-bleed bars, and the number is already visible in the header. */
@media (min-width: 601px) and (max-width: 900px) {
  .nav-links.open .nav-mobile-cta { flex-direction: row; }
  .nav-links.open .nav-mobile-cta .btn { flex: 1; }
}
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* The CTA row is a menu-only affordance. */
.nav-mobile-cta { display: none; }

/* Below 900 the burger appears; the written-out number holds on until it
   would crowd the logo, then hands over to the icon button. */
@media (max-width: 900px) {
  .nav-phone .label { display: none; }
}
@media (max-width: 600px) {
  .nav-phone { display: none; }
  .nav-call { display: inline-flex; }
  .brand { font-size: 1.12rem; gap: 8px; }
  .brand .mark { width: 33px; height: 33px; }
  .nav-cta { gap: 10px; }
}
@media (max-width: 360px) {
  .brand { font-size: 1rem; }
  .brand .mark { width: 29px; height: 29px; }
  .brand small { font-size: 0.5rem; letter-spacing: 0.1em; }
}

/* ---------- Shipping-label hero ---------- */
.hero {
  padding: 56px 0 80px;
  background:
    radial-gradient(circle at 1px 1px, rgba(55,61,99,0.14) 1px, transparent 1px) 0 0/16px 16px,
    var(--ivory);
}
/* The hero's consignment-label panel. Deliberately NOT called .label:
   that class is used for small caption text in the nav and stat card. */
.consignment {
  position: relative;
  background: var(--ivory);
  border: 2px dashed var(--navy);
  border-radius: 4px;
  padding: 40px clamp(20px, 5vw, 56px) 46px;
  box-shadow: var(--shadow-lg);
}
.consignment::before {
  content: "";
  position: absolute;
  top: -13px; left: 32px; right: 32px;
  height: 24px;
  background:
    radial-gradient(circle, transparent 6px, var(--ivory) 7px) 0 0 / 26px 26px repeat-x;
}
.route-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--navy);
  margin-bottom: 26px;
}
.route-line .tag {
  background: var(--navy);
  color: var(--ivory);
  padding: 4px 10px;
  border-radius: 2px;
  font-size: 0.7rem;
}
.route-line .arrow { color: var(--orange); font-size: 1rem; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
}
.hero-grid.with-form {
  grid-template-columns: 1.1fr 1fr;
}
@media (max-width: 860px) {
  .hero-grid.with-form { grid-template-columns: 1fr; }
}
.form-card.compact { padding: 22px 22px 24px; }
.form-card.compact .form-grid { grid-template-columns: 1fr; }

.hero h1 { color: var(--navy); }
.hero h1 em {
  font-style: normal;
  color: var(--orange);
  display: inline-block;
  transform: var(--shear);
}
.hero-sub {
  font-size: 1.08rem;
  max-width: 46ch;
  color: var(--ink);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }


.manifest-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 30px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(55,61,99,0.25);
}
.manifest-facts dt {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--orange);
  margin-bottom: 3px;
}
.manifest-facts dd { margin: 0; font-weight: 600; color: var(--navy); font-size: 0.95rem; }

/* ---------- Service detail rows (services page) ---------- */
.service-row {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 48px;
  align-items: start;
  padding-bottom: 56px;
  margin-bottom: 56px;
  border-bottom: 1px dashed rgba(55,61,99,0.25);
}
.service-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
@media (max-width: 860px) {
  .service-row { grid-template-columns: 1fr; gap: 30px; padding-bottom: 40px; margin-bottom: 40px; }
}

/* The spec facts float in dead space unless they're given a container. */
.spec-panel {
  background: var(--paper);
  border: 1px solid rgba(55,61,99,0.2);
  border-radius: var(--radius);
  padding: 24px 26px 26px;
  box-shadow: var(--shadow-sm);
}
.spec-panel h4 {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--navy);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(55,61,99,0.3);
}
.spec-panel .manifest-facts {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  grid-template-columns: 1fr;
  gap: 15px;
}

/* ---------- Trust strip ---------- */
.trust-strip {
  background: var(--navy);
  color: var(--ivory);
  padding: 22px 0;
}
.trust-strip .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px clamp(28px, 5vw, 64px);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}
.trust-item .dot { width: 8px; height: 8px; background: var(--orange); border-radius: 50%; flex-shrink: 0; }

/* ---------- Section headers ---------- */
.section-head { max-width: 640px; margin-bottom: 46px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Service / package cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
}
.pkg-card {
  background: var(--paper);
  border: 1px solid rgba(55,61,99,0.2);
  border-radius: var(--radius);
  padding: 28px 26px 26px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pkg-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}
.pkg-card .num {
  position: absolute;
  top: 18px; right: 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--orange);
  border: 1px solid var(--orange);
  padding: 2px 7px;
  border-radius: 2px;
}
.pkg-card h3 { margin-bottom: 2px; }
.pkg-card p { color: var(--ink); font-size: 0.95rem; margin-bottom: 0; flex-grow: 1; }
.pkg-card a.more {
  margin-top: 10px;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--navy);
  border-top: 1px dashed rgba(55,61,99,0.35);
  padding-top: 10px;
}
.pkg-card a.more:hover { color: var(--orange); }

/* A 5th card orphaned on its own row reads as a mistake. This one spans the
   full width instead and lays out horizontally, so it reads as deliberate. */
.pkg-card.wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 30px;
  background: var(--navy);
  border-color: var(--navy);
}
.pkg-card.wide h3,
.pkg-card.wide p { color: var(--ivory); }
.pkg-card.wide p { opacity: 0.82; max-width: 62ch; }
.pkg-card.wide .num { color: var(--orange); border-color: var(--orange); }
.pkg-card.wide .wide-text { flex-grow: 1; }
.pkg-card.wide a.more {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
  flex-shrink: 0;
  color: var(--ivory);
  border: 2px solid var(--ivory);
  padding: 13px 24px;
  border-radius: var(--radius);
  transition: background 0.15s ease, color 0.15s ease;
}
.pkg-card.wide a.more:hover { background: var(--ivory); color: var(--navy); }
@media (max-width: 720px) {
  .pkg-card.wide { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ---------- Route / process steps ---------- */
.route-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .route-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .route-steps { grid-template-columns: 1fr; } }
.route-steps::before {
  content: "";
  position: absolute;
  top: 22px; left: 6%; right: 6%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--navy) 0 10px, transparent 10px 18px);
}
@media (max-width: 900px) { .route-steps::before { display: none; } }
.step { position: relative; }
.step .stop {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--ivory);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  position: relative;
  z-index: 1;
  margin-bottom: 16px;
}
.step h3 { font-size: 1.05rem; }
.step p { font-size: 0.92rem; }

/* ---------- Areas grid ---------- */
.zone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  align-items: start; /* let each zone size to its own list, not the tallest */
}
.zone {
  background: var(--ivory);
  border: 2px solid var(--navy);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.zone:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.zone-head {
  background: var(--navy);
  color: var(--ivory);
  padding: 13px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  /* Sized so the longest name plus its badge stays on one line; a wrapped
     name here makes the four zone headers different heights. */
  font-size: 0.86rem;
  white-space: nowrap;
}
.zone-head span.count {
  font-size: 0.6rem;
  color: var(--orange);
  border: 1px solid var(--orange);
  padding: 2px 6px;
  border-radius: 2px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.06em;
}
.zone ul { list-style: none; margin: 0; padding: 14px 18px 18px; }
.zone li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(55,61,99,0.2);
  font-size: 0.92rem;
}
.zone li:last-child { border-bottom: none; }
/* "COVERED" reads as noise repeated down a 32-row list, so show a tick
   instead and keep the word for screen readers. */
.zone li .check {
  font-size: 0;
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(194,111,86,0.14);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
}
.zone li .check::before {
  content: "\2713";
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}

/* ---------- Why us checklist ---------- */
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start;
}
@media (max-width: 860px) { .why-grid { grid-template-columns: 1fr; } }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.checklist li { display: flex; gap: 16px; }
.checklist .box {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border: 2px solid var(--orange);
  border-radius: 3px;
  color: var(--orange);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
}
.checklist h3 { margin-bottom: 2px; font-size: 1.05rem; }
.checklist p { margin: 0; font-size: 0.92rem; color: var(--ink); }

.stat-card {
  background: var(--navy-deep);
  color: var(--ivory);
  border-radius: var(--radius);
  padding: 34px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  box-shadow: var(--shadow-md);
}
.stat-card .num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: var(--orange);
  line-height: 1;
  margin-bottom: 6px;
}
.stat-card .label {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: rgba(245,255,254,0.75);
}

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--orange);
  color: var(--ivory);
  text-align: center;
}
.cta-band h2 { color: var(--ivory); }
.cta-band .phone-big {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  font-weight: 700;
}
.cta-band .hero-actions { justify-content: center; }
.cta-band .btn-ghost { border-color: var(--ivory); color: var(--ivory); }
.cta-band .btn-ghost:hover { background: var(--ivory); color: var(--orange); }

/* ---------- Form ---------- */
.form-card {
  background: var(--paper);
  border: 2px dashed var(--navy);
  border-radius: var(--radius);
  padding: clamp(22px, 4vw, 40px);
  box-shadow: var(--shadow-md);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--navy);
}
.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 12px 14px;
  border: 1.5px solid rgba(55,61,99,0.4);
  border-radius: 2px;
  background: var(--ivory);
  color: var(--ink);
  transition: border-color 0.15s ease;
  width: 100%;
}
.field input:hover, .field select:hover, .field textarea:hover {
  border-color: rgba(55,61,99,0.7);
}
.field textarea { resize: vertical; min-height: 90px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 3px solid var(--orange);
  outline-offset: 1px;
}
.form-note { font-size: 0.85rem; margin-top: 16px; color: var(--ink); }

.field .error-msg {
  display: none;
  font-size: 0.78rem;
  color: #a3392a;
}
.field.invalid input,
.field.invalid select,
.field.invalid textarea { border-color: #a3392a; }
.field.invalid .error-msg { display: block; }

.btn[disabled] { opacity: 0.65; cursor: not-allowed; transform: none !important; }

.form-status {
  display: none;
  align-items: flex-start;
  gap: 12px;
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: var(--radius);
  font-size: 0.92rem;
}
.form-status.show { display: flex; }
.form-status.success { background: rgba(55,61,99,0.08); border: 1px solid var(--navy); color: var(--navy); }
.form-status.error { background: rgba(163,57,42,0.08); border: 1px solid #a3392a; color: #a3392a; }
.form-status .icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
}
.form-status.success .icon { background: var(--navy); color: var(--ivory); }
.form-status.error .icon { background: #a3392a; color: var(--ivory); }

/* ---------- Testimonials ---------- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.testimonial-card {
  background: var(--ivory);
  border: 1px solid rgba(55,61,99,0.2);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.testimonial-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.testimonial-stars { color: var(--orange); font-size: 0.95rem; letter-spacing: 0.12em; }
.testimonial-card p.quote { margin: 0; color: var(--ink); font-size: 0.95rem; flex-grow: 1; }
.testimonial-who { display: flex; align-items: center; gap: 12px; }
.testimonial-who .avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--ivory);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.testimonial-who strong { display: block; color: var(--navy); font-size: 0.9rem; }
.testimonial-who span { display: block; font-size: 0.78rem; color: rgba(35,36,47,0.6); }

/* ---------- Contact info cards ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 34px; } }

/* Reassurance panel that fills the column beside the form. */
.assurance {
  background: var(--navy-deep);
  color: var(--ivory);
  border-radius: var(--radius);
  padding: 26px 26px 24px;
  box-shadow: var(--shadow-md);
}
.assurance h3 {
  color: var(--ivory);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}
.assurance ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.assurance li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.9rem;
  color: rgba(245,255,254,0.85);
}
.assurance li .tick {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--ivory);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.66rem;
  font-weight: 700;
  margin-top: 1px;
}
.info-list { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.info-list li { display: flex; gap: 14px; align-items: flex-start; }
.info-list .ico {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--ivory);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
}
.info-list strong { display: block; color: var(--navy); font-family: var(--font-display); text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.04em; }

/* ---------- FAQ ---------- */
/* Answers cap at ~66ch, so a full-width list leaves them stranded. */
.faq-wrap { max-width: 820px; }
.faq-item {
  border-bottom: 1px solid rgba(55,61,99,0.2);
}
.faq-item summary {
  padding: 20px 4px;
  cursor: pointer;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1rem;
  color: var(--navy);
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  color: var(--orange);
  font-size: 1.4rem;
  font-family: var(--font-body);
  flex-shrink: 0;
  margin-left: 16px;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { padding: 0 4px 20px; max-width: 66ch; color: var(--ink); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  padding: 54px 0 46px;
  border-bottom: 3px solid var(--navy);
  background:
    radial-gradient(circle at 1px 1px, rgba(55,61,99,0.14) 1px, transparent 1px) 0 0/16px 16px,
    var(--ivory);
}
/* 46ch is right beside the hero form, but too narrow standing alone here. */
.page-hero .hero-sub { max-width: 62ch; font-size: 1.12rem; }
.breadcrumb {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--orange);
  margin-bottom: 14px;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-deep);
  color: rgba(245,255,254,0.82);
  padding: 60px 0 26px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 34px;
  margin-bottom: 40px;
}
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
/* Kept at two columns on phones. Collapsing to one stacked all four blocks
   and made the footer taller than the screen. The link labels are short
   enough to sit side by side; only the intro paragraph needs full width. */
@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px 18px;
  }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
}
/* Desktop footer padding is generous; on a phone it just adds scrolling. */
@media (max-width: 560px) {
  .site-footer { padding: 40px 0 20px; }
  .footer-grid { margin-bottom: 26px; }
  .footer-grid h4 { margin-bottom: 10px; }
}
.footer-grid h4 {
  color: var(--ivory);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-brand span {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ivory);
  font-size: 1.1rem;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 0.9rem; }
.footer-grid ul a:hover { color: var(--orange); }
.footer-bottom {
  border-top: 1px solid rgba(245,255,254,0.15);
  padding-top: 22px;
  font-size: 0.78rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  color: rgba(245,255,254,0.55);
}

/* utility */
.mt-0 { margin-top: 0; }
.text-orange { color: var(--orange); }

/* =========================================================
   TOUCH AND SMALL-SCREEN REFINEMENTS
   Breakpoints above handle reflow; this section handles the
   things that only matter on a real phone or tablet.
   ========================================================= */

/* iOS Safari zooms the whole page in when you focus a control whose text is
   under 16px, which throws the visitor out of the layout mid-enquiry. Bump
   the controls to 16px on touch-sized screens; the labels stay small. */
@media (max-width: 900px) {
  .field input,
  .field select,
  .field textarea { font-size: 16px; }
}

/* Stop iOS inflating body text when a phone is turned to landscape. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Coarse pointers need room to hit things accurately. Links that sit in
   flowing text keep their size; standalone nav/list links get a real target. */
@media (pointer: coarse) {
  .info-list a,
  .pkg-card a.more,
  .footer-bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Footer links are full-width rows, so vertical padding gives a comfortable
     target without a 44px min-height, which doubled each 22px link and left
     the footer over 1000px tall - a screenful of near-empty space to scroll. */
  .footer-grid ul { gap: 0; }
  .footer-grid ul a {
    display: block;
    padding: 7px 0;
  }
  /* Height only. Setting `display` here would resurrect the phone number at
     widths where the header has already handed over to the icon button. */
  .nav-phone { min-height: 44px; }
  .nav-links a { padding: 12px 0; }
  .faq-item summary { padding: 22px 4px; }
  .zone li { padding: 11px 0; }
  /* No sticky hover states on touch: they latch after a tap. */
  .pkg-card:hover, .zone:hover, .testimonial-card:hover { transform: none; }
}

/* The sticky header is shorter on phones than on desktop, so anchors need a
   matching offset or they land with the target tucked under the header. */
@media (max-width: 900px) {
  :target, [id] { scroll-margin-top: 88px; }
}

/* Once the hero stacks, its compact form spans the full width. Single-column
   fields then stretch to ~600px each, which looks broken on an iPad. */
@media (max-width: 860px) and (min-width: 561px) {
  .form-card.compact .form-grid { grid-template-columns: 1fr 1fr; }
  .form-card.compact .form-grid .field.full { grid-column: 1 / -1; }
}

/* Phones: the hero is the whole first screen, so tighten it up and get the
   quote form closer to the top. */
@media (max-width: 560px) {
  .hero { padding: 28px 0 44px; }
  .consignment { padding: 30px 18px 32px; }
  .consignment::before { left: 20px; right: 20px; }
  .hero h1 { font-size: clamp(2rem, 8.5vw, 2.5rem); }
  .hero-sub { font-size: 1rem; }
  .hero-grid.with-form { gap: 28px; }
  .manifest-facts { gap: 14px 20px; margin-top: 24px; padding-top: 20px; }

  /* Full-width actions are far easier to hit one-handed than side-by-side. */
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; width: 100%; }

  .page-hero { padding: 34px 0 32px; }
  .section-head { margin-bottom: 32px; }
  .stat-card { padding: 26px 22px; gap: 20px; }
  .form-card.compact { padding: 20px 18px 22px; }
}

/* Grid and flex children default to min-width:auto, so a single nowrap item
   (the phone-number button) can hold a whole column wider than the screen. */
.hero-grid > *,
.contact-grid > *,
.service-row > *,
.why-grid > *,
.card-grid > * { min-width: 0; }

/* Narrowest phones: let button labels wrap rather than force a wider column. */
@media (max-width: 380px) {
  .btn {
    font-size: 0.85rem;
    padding: 14px 16px;
    white-space: normal;
    text-align: center;
  }
}

/* Shrink the route line so it stays on one line where it can. The arrow is
   kept even when it does wrap, since it's what connects the two legs. */
@media (max-width: 480px) {
  .route-line { font-size: 0.7rem; gap: 8px 9px; margin-bottom: 20px; }
  .route-line .tag { font-size: 0.62rem; padding: 3px 8px; }
}

/* =========================================================
   MOTION
   Everything here is opacity/transform only, so it composites
   on the GPU and never triggers layout while scrolling.
   ========================================================= */

/* Reveal-on-scroll. Gated behind .js (set by an inline script in <head>)
   so that if JavaScript is unavailable or fails, nothing is ever left
   hidden - the content simply renders as normal. */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.55s ease,
    transform 0.55s cubic-bezier(0.22, 0.7, 0.3, 1);
  will-change: opacity, transform;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Children of a grid stagger in sequence rather than all at once. */
.js .card-grid > .reveal:nth-child(2),
.js .zone-grid > .reveal:nth-child(2),
.js .testimonial-grid > .reveal:nth-child(2),
.js .route-steps > .reveal:nth-child(2) { transition-delay: 0.08s; }
.js .card-grid > .reveal:nth-child(3),
.js .zone-grid > .reveal:nth-child(3),
.js .testimonial-grid > .reveal:nth-child(3),
.js .route-steps > .reveal:nth-child(3) { transition-delay: 0.16s; }
.js .card-grid > .reveal:nth-child(4),
.js .zone-grid > .reveal:nth-child(4),
.js .route-steps > .reveal:nth-child(4) { transition-delay: 0.24s; }
.js .card-grid > .reveal:nth-child(5) { transition-delay: 0.32s; }
.js .trust-strip .reveal:nth-child(2) { transition-delay: 0.07s; }
.js .trust-strip .reveal:nth-child(3) { transition-delay: 0.14s; }
.js .trust-strip .reveal:nth-child(4) { transition-delay: 0.21s; }

/* Hero arrival: plays on load rather than on scroll, since it's already
   in view. Short and staggered so the page feels awake immediately. */
@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
.js .hero .consignment { animation: rise 0.6s cubic-bezier(0.22, 0.7, 0.3, 1) both; }
.js .hero .route-line   { animation: rise 0.5s 0.10s ease-out both; }
.js .hero h1            { animation: rise 0.6s 0.16s cubic-bezier(0.22, 0.7, 0.3, 1) both; }
.js .hero .hero-sub     { animation: rise 0.6s 0.26s ease-out both; }
.js .hero .hero-actions { animation: rise 0.6s 0.34s ease-out both; }
.js .hero .manifest-facts { animation: rise 0.6s 0.42s ease-out both; }
.js .hero .form-card   { animation: rise 0.65s 0.30s cubic-bezier(0.22, 0.7, 0.3, 1) both; }
.js .page-hero h1       { animation: rise 0.55s ease-out both; }
.js .page-hero .hero-sub { animation: rise 0.55s 0.12s ease-out both; }

/* The hero's route arrow keeps nudging toward the destination. */
@keyframes shunt {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(5px); }
}
.js .route-line .arrow {
  display: inline-block;
  animation: shunt 2.4s ease-in-out infinite;
}

/* Header gains a shadow once you leave the top, so it reads as a layer
   above the page rather than part of it. */
.site-header {
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.site-header.scrolled { box-shadow: 0 6px 20px rgba(34, 36, 62, 0.13); }

/* Micro-interactions: arrows lead the eye toward the action. */
.pkg-card a.more,
.footer-grid ul a,
.breadcrumb { transition: color 0.15s ease; }
.pkg-card a.more::after {
  content: "";
  display: inline-block;
  width: 0;
}
.pkg-card:hover a.more { color: var(--orange); }

.btn { will-change: auto; }
.btn-primary:active,
.btn-ghost:active { transform: translateY(0) scale(0.985); }

.nav-links a::before {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -4px;
  height: 2px;
  background: var(--orange);
  transition: right 0.22s ease;
}
.nav-links a:hover::before { right: 0; }
.nav-links a.active::before { content: none; }

/* Stat counters sit on their own line while animating, so reserve the
   width and stop the label jumping as digits are added. */
.stat-card .num { font-variant-numeric: tabular-nums; }

/* FAQ answers fade in instead of snapping open. */
@keyframes faq-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.js .faq-item[open] p { animation: faq-in 0.24s ease-out both; }

/* Zone rows brighten their tick on hover. */
.zone li .check { transition: background 0.15s ease, transform 0.15s ease; }
.zone li:hover .check { background: rgba(194, 111, 86, 0.28); transform: scale(1.12); }

/* Anyone who has asked for less motion gets none of it: no reveal offsets,
   no keyframes, no infinite loops. */
@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
  .js .hero .consignment,
  .js .hero .route-line,
  .js .hero h1,
  .js .hero .hero-sub,
  .js .hero .hero-actions,
  .js .hero .manifest-facts,
  .js .hero .form-card,
  .js .page-hero h1,
  .js .page-hero .hero-sub,
  .js .route-line .arrow,
  .js .faq-item[open] p {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   ICONOGRAPHY
   One hand-drawn set, 24x24 on a 1.6 stroke, all currentColor
   so each icon takes the colour of whatever it sits in. Inline
   SVG means no image requests and no blurring when scaled.
   ========================================================= */
.svc-icon,
.ico-svg {
  display: block;
  flex-shrink: 0;
}

/* Service cards: icon leads, number badge stays top-right. */
.pkg-card .svc-icon {
  width: 34px;
  height: 34px;
  color: var(--orange);
  margin-bottom: 4px;
  transition: transform 0.25s cubic-bezier(0.22, 0.7, 0.3, 1);
}
.pkg-card:hover .svc-icon { transform: translateY(-3px) scale(1.06); }
.pkg-card.wide .svc-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 0;
}
/* This card lays out horizontally, so the absolutely-positioned number badge
   would sit on top of the button in the top-right. Put it in the row instead. */
.pkg-card.wide .num {
  position: static;
  align-self: center;
}

/* Process steps: number and icon share a row, the icon tinted back so the
   numbered stop stays the primary marker. */
.step-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.step-head .stop { margin-bottom: 0; }
.step-head .svc-icon {
  width: 26px;
  height: 26px;
  color: var(--navy);
  opacity: 0.55;
  /* The dashed route line runs behind this row, so sit above it on the
     section's own background - the icon reads as another stop on the route
     rather than having dashes struck through it. */
  position: relative;
  z-index: 1;
  background: var(--paper);
  padding: 4px 7px;
  box-sizing: content-box;
}

/* Services page headings. */
h2.with-icon {
  display: flex;
  align-items: center;
  gap: 14px;
}
h2.with-icon .svc-icon {
  width: 32px;
  height: 32px;
  color: var(--orange);
}
@media (max-width: 480px) {
  h2.with-icon { gap: 10px; }
  h2.with-icon .svc-icon { width: 26px; height: 26px; }
}

/* Contact list: proper icons instead of unicode glyphs, which rendered
   inconsistently across platforms (one arrived as a colour emoji). */
.info-list .ico { padding: 10px; }
.info-list .ico-svg { width: 20px; height: 20px; }

/* ---------------------------------------------------------
   Decorative moving scene behind the closing call to action.
   Drawn as a background so it stays out of the reading order
   and needs no markup on any page.
   --------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  right: 20px;
  bottom: 0;
  width: 340px;
  height: 190px;
  opacity: 0.16;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right bottom;
  /* van, boxes and a house, in the footer navy */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 190' fill='none' stroke='%2322243e' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M150 60h96v74h-96z'/%3E%3Cpath d='M246 88h32l26 27v19h-58z'/%3E%3Ccircle cx='178' cy='146' r='14'/%3E%3Ccircle cx='268' cy='146' r='14'/%3E%3Cpath d='M192 146h62M150 134h14M282 134h22'/%3E%3Cpath d='M36 108l30-15 30 15v32l-30 15-30-15z'/%3E%3Cpath d='M36 108l30 15 30-15M66 123v47'/%3E%3Cpath d='M6 168h328'/%3E%3C/svg%3E");
}
@media (max-width: 720px) {
  .cta-band::before { width: 220px; height: 125px; opacity: 0.12; }
}
@media (max-width: 480px) {
  .cta-band::before { display: none; }
}

/* =========================================================
   SOCIAL LINKS
   Selectors carry an extra element so they outrank the
   footer's `.footer-grid ul a` stacked-link styling, which
   would otherwise make these full-width blocks in a column.
   ========================================================= */
ul.social {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}
ul.social li {
  border-bottom: none;
  padding: 0;
}
ul.social li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(245, 255, 254, 0.22);
  color: rgba(245, 255, 254, 0.82);
  transition: background 0.18s ease, color 0.18s ease,
              border-color 0.18s ease, transform 0.18s ease;
}
ul.social li a:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--ivory);
  transform: translateY(-2px);
}
ul.social li a svg {
  width: 18px;
  height: 18px;
}

/* Same set on a light background (contact page). */
ul.social.on-light li a {
  border-color: rgba(55, 61, 99, 0.25);
  color: var(--navy);
}
ul.social.on-light li a:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--ivory);
}

.social-block { margin-bottom: 28px; }
.social-block h3 {
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.social-block ul.social { margin-top: 12px; }

/* A network whose URL has not been filled in yet is removed by script.js,
   so an unfinished profile is never linked. This is the no-JS fallback. */
.js ul.social li a[href*="SET_YOUR_URL"] { display: none; }

/* =========================================================
   PRICING
   ========================================================= */

/* Shown only while any rate is still the XX placeholder; script.js removes
   it as soon as real figures are in. Better to say plainly that prices
   aren't published than to leave invented numbers looking authoritative. */
.price-draft-notice {
  background: #8a5a12;
  color: #fff7e8;
  font-size: 0.88rem;
  padding: 12px 0;
  border-bottom: 2px solid #6d460c;
}
.price-draft-notice .container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
}
.price-draft-notice strong {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.rate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  align-items: start;
}
.rate-card {
  position: relative;
  background: var(--paper);
  border: 1px solid rgba(55, 61, 99, 0.2);
  border-radius: var(--radius);
  padding: 30px 26px 26px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rate-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

/* The middle tier is the one most people want, so it carries the emphasis. */
.rate-card.featured {
  background: var(--navy);
  border-color: var(--navy);
  box-shadow: var(--shadow-md);
}
.rate-card.featured h3,
.rate-card.featured .amount { color: var(--ivory); }
.rate-card.featured .unit,
.rate-card.featured .rate-meta,
.rate-card.featured .rate-fits { color: rgba(245, 255, 254, 0.82); }
.rate-card.featured .rate-fits li::before { color: var(--orange); }
.rate-card.featured .rate-meta { border-color: rgba(245, 255, 254, 0.22); }

.rate-flag {
  position: absolute;
  top: -11px;
  left: 26px;
  background: var(--orange);
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
}

.rate-head { display: flex; align-items: center; gap: 11px; }
.rate-head .svc-icon { width: 30px; height: 30px; color: var(--orange); }
.rate-head h3 { margin: 0; }

.rate-price { display: flex; align-items: baseline; gap: 8px; }
.rate-price .amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--navy);
}
.rate-price .unit {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
}

.rate-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 12px 0;
  border-top: 1px dashed rgba(55, 61, 99, 0.3);
  border-bottom: 1px dashed rgba(55, 61, 99, 0.3);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  color: var(--navy);
}

.rate-fits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.rate-fits li { position: relative; padding-left: 20px; font-size: 0.92rem; }
.rate-fits li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--orange);
  font-weight: 700;
  font-size: 0.8rem;
}
.rate-cta { justify-content: center; margin-top: 4px; }
.rate-card.featured .btn-primary { background: var(--orange); border-color: var(--orange); }

.rate-footnote {
  margin-top: 30px;
  font-size: 0.9rem;
  color: var(--ink);
  max-width: 74ch;
}

/* Extras table. Wrapper scrolls rather than letting the table push the page
   sideways on a narrow screen. */
.extras-wrap { overflow-x: auto; }
.extras {
  width: 100%;
  border-collapse: collapse;
  background: var(--ivory);
  border: 1px solid rgba(55, 61, 99, 0.2);
  box-shadow: var(--shadow-sm);
  /* No min-width: two columns fit a phone comfortably, and forcing one made
     the whole document scroll sideways rather than just the wrapper. */
}
.extras thead th {
  background: var(--navy);
  color: var(--ivory);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  text-align: left;
  padding: 13px 18px;
}
.extras thead th:last-child,
.extras td { text-align: right; }
.extras tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--ink);
}
.extras tbody th,
.extras td {
  padding: 13px 18px;
  border-bottom: 1px dashed rgba(55, 61, 99, 0.22);
  font-size: 0.93rem;
}
.extras tbody tr:last-child th,
.extras tbody tr:last-child td { border-bottom: none; }
.extras tbody tr:hover { background: rgba(194, 111, 86, 0.06); }
.extras td { font-weight: 600; color: var(--navy); white-space: nowrap; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 560px) {
  .rate-card { padding: 26px 20px 22px; }
  .rate-price .amount { font-size: 2.2rem; }
  .extras thead th,
  .extras tbody th,
  .extras td { padding: 11px 12px; font-size: 0.86rem; }
  .extras td { white-space: normal; }
}

/* ---------- Price estimator ---------- */
.calc {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 30px;
  align-items: start;
}
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }

.calc-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  background: var(--ivory);
  border: 1px solid rgba(55, 61, 99, 0.2);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 560px) { .calc-form { grid-template-columns: 1fr; padding: 20px 18px; } }
.calc-form .hint {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: rgba(35, 36, 47, 0.55);
}

.calc-extras {
  border: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
}
@media (max-width: 480px) { .calc-extras { grid-template-columns: 1fr; } }
/* Rule sits on the legend, not the fieldset: a fieldset's own border renders
   through the legend text rather than above it. */
.calc-extras legend {
  grid-column: 1 / -1;
  width: 100%;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--navy);
  border-top: 1px dashed rgba(55, 61, 99, 0.3);
  padding: 16px 0 0;
  margin-bottom: 6px;
}
.calc-extras label {
  display: flex;
  align-items: center;
  gap: 9px;
  /* .field label is uppercase display type; these read as sentences. */
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.92rem;
  color: var(--ink);
  cursor: pointer;
  min-height: 32px;
}
.calc-extras input { width: 17px; height: 17px; accent-color: var(--orange); flex-shrink: 0; }

.calc-result {
  background: var(--navy);
  color: var(--ivory);
  border-radius: var(--radius);
  padding: 28px 26px;
  box-shadow: var(--shadow-md);
}
.calc-result h3 { color: var(--ivory); font-size: 1.05rem; }
.calc-result p { color: rgba(245, 255, 254, 0.8); font-size: 0.9rem; }
.calc-label {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--orange);
}
.calc-range {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.5vw, 2.7rem);
  line-height: 1.1;
  margin: 6px 0 16px;
  color: var(--ivory);
}
.calc-range .calc-dash {
  font-size: 0.95rem;
  font-family: var(--font-body);
  font-weight: 400;
  color: rgba(245, 255, 254, 0.6);
  margin: 0 4px;
}
.calc-breakdown {
  list-style: none;
  margin: 0 0 16px;
  padding: 16px 0 0;
  border-top: 1px dashed rgba(245, 255, 254, 0.25);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.9rem;
  color: rgba(245, 255, 254, 0.85);
}
.calc-breakdown li { position: relative; padding-left: 16px; }
.calc-breakdown li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
}
.calc-note { font-size: 0.83rem !important; margin-bottom: 18px; }
.calc-cta { width: 100%; justify-content: center; }

/* ---------- Persistent mobile contact bar ----------
   Phones only. Two thumb-sized targets fixed to the bottom so calling never
   requires scrolling back to the header. */
.callbar { display: none; }

@media (max-width: 760px) {
  .callbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    border-top: 2px solid var(--navy-deep);
    box-shadow: 0 -6px 20px rgba(34, 36, 62, 0.22);
    /* Clears the iOS home indicator. */
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: var(--navy);
  }
  .callbar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 56px;
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.9rem;
    color: var(--ivory);
  }
  .callbar a svg { width: 18px; height: 18px; }
  .callbar-call { background: var(--orange); }
  .callbar-call:active { background: #ab5d47; }
  .callbar-wa { background: var(--navy); }
  .callbar-wa:active { background: var(--navy-deep); }

  /* Keep the bar from covering the end of the page. */
  body { padding-bottom: 56px; }
}