/* ==========================================================================
   Home Movers & Packers — core stylesheet
   Design system → layout → components. Mobile rules live in responsive.css.
   No external fonts or icon libraries: everything renders on first paint.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --navy-900: #081a30;
  --navy-800: #0d2440;
  --navy-700: #143458;
  --navy-600: #1c4676;
  --navy-500: #2a5c94;

  /* Gold accent. Three values because gold needs different tones for fills
     and for text: --accent-500 fills, --accent-600 is its hover, and
     --accent-700 is the only one dark enough to read as text on white. */
  --accent-700: #a5760a;   /* text on light backgrounds — 4.6:1 on white */
  --accent-600: #dc9c11;   /* hover fill */
  --accent-500: #f5b21d;   /* primary fill */
  --accent-400: #ffc63d;   /* highlight on dark */
  --accent-100: #fdf3dc;   /* tint */

  /* Gold is too light for white text — buttons put navy on top of it. */
  --on-accent: #10192a;

  --green-600: #1da851;
  --green-500: #25d366;

  /* Neutrals */
  --ink-900: #10192a;
  --ink-700: #2c3a4f;
  --ink-500: #5b6b80;
  --ink-400: #7c8a9c;
  --line: #e2e7ee;
  --line-strong: #cdd5e0;
  --surface: #ffffff;
  --surface-alt: #f5f7fa;
  --surface-tint: #eef2f7;

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.1875rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 1.85rem;
  --fs-4xl: 2.4rem;

  /* Space */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2rem;
  --sp-8: 2.25rem;
  --sp-9: 3.5rem;

  /* Shape */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(16, 25, 42, 0.06), 0 1px 3px rgba(16, 25, 42, 0.05);
  --shadow: 0 2px 6px rgba(16, 25, 42, 0.07), 0 8px 24px rgba(16, 25, 42, 0.07);
  --shadow-lg: 0 12px 40px rgba(8, 26, 48, 0.16);

  --container: 1200px;
  --container-narrow: 820px;
  --header-h: 76px;
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  /* Cheap guard against any single element widening the page sideways.
     `clip` rather than `hidden`: hidden would make this a scroll container
     and break the sticky header. */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--ink-700);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--sp-4);
  color: var(--ink-900);
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 700;
}
h1 { font-size: var(--fs-4xl); letter-spacing: -0.025em; }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--navy-600); text-decoration: none; }
a:hover { color: var(--accent-700); text-decoration: underline; }

img, svg, video { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25rem; }
li { margin-bottom: var(--sp-2); }

strong { color: var(--ink-900); font-weight: 650; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0; }

:focus-visible {
  outline: 3px solid var(--accent-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--navy-800);
  color: #fff;
  padding: var(--sp-3) var(--sp-5);
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: #fff; }

.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;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
.container-narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--sp-8); }
.section-tight { padding-block: var(--sp-7); }
.section-alt { background: var(--surface-alt); }
.section-tint { background: var(--surface-tint); }

.section-head { max-width: 760px; margin-bottom: var(--sp-6); }
.section-head-center { margin-inline: auto; text-align: center; }
.section-title { font-size: var(--fs-3xl); margin-bottom: var(--sp-3); }
.section-lead { font-size: var(--fs-lg); color: var(--ink-500); margin: 0; }

.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-700);
  margin-bottom: var(--sp-3);
}
.eyebrow-light { color: var(--accent-400); }

.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.icon { width: 22px; height: 22px; flex: none; }
.icon-sm { width: 17px; height: 17px; }
.icon-lg { width: 30px; height: 30px; }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 0.7rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--accent-500); color: var(--on-accent); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-600); color: var(--on-accent); }

/* Gold pill used for the header WhatsApp CTA */
.btn-gold { background: var(--accent-500); color: var(--on-accent); }
.btn-gold:hover { background: var(--accent-600); color: var(--on-accent); }

/* White button for use on the gold band */
.btn-white { background: #fff; color: var(--navy-800); box-shadow: var(--shadow-sm); }
.btn-white:hover { background: #fff; color: var(--accent-700); }
.btn-white .icon { color: var(--green-600); }

.btn-phone { background: var(--navy-800); color: #fff; }
.btn-phone:hover { background: var(--navy-700); color: #fff; }

/* Stacked "Call Now / number" label used in the hero and the gold band.
   color:inherit is load-bearing — the global `strong` rule would otherwise
   paint the number navy on a navy button. */
.btn-stack { text-align: left; line-height: 1.15; }
.btn-stack small { display: block; font-size: 0.6875rem; font-weight: 600; opacity: .8; color: inherit; }
.btn-stack strong { display: block; font-size: var(--fs-base); font-weight: 750; color: inherit; }

.btn-whatsapp { background: var(--green-500); color: #06301a; }
.btn-whatsapp:hover { background: var(--green-600); color: #fff; }

.btn-outline { background: transparent; border-color: var(--line-strong); color: var(--ink-900); }
.btn-outline:hover { background: var(--surface-alt); border-color: var(--navy-600); color: var(--navy-700); }

.btn-ghost-light { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .38); color: #fff; }
.btn-ghost-light:hover { background: rgba(255, 255, 255, .2); color: #fff; }

.btn-lg { min-height: 54px; font-size: var(--fs-base); padding: 0.85rem 1.7rem; }
.btn-block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* --------------------------------------------------------------------------
   5. Topbar + header + navigation
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--navy-900);
  color: #b6c6d8;
  font-size: var(--fs-xs);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 32px;
}
.topbar-item { display: inline-flex; align-items: center; gap: var(--sp-2); }
.topbar-item .icon { color: var(--accent-500); }
.topbar a { color: #fff; font-weight: 600; }
.topbar a:hover { color: var(--accent-400); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s ease;
}
.site-header.is-stuck { box-shadow: 0 4px 18px rgba(16, 25, 42, .09); }

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; gap: var(--sp-3); flex: none; }
.brand:hover { text-decoration: none; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--radius);
  background: var(--navy-800);
  color: #fff;
}
.brand-mark .icon { width: 24px; height: 24px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong {
  font-size: 1.0625rem; font-weight: 750; color: var(--navy-800); letter-spacing: -0.02em;
}
.brand-text span { font-size: var(--fs-xs); color: var(--ink-500); letter-spacing: 0.03em; }

.primary-nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.nav-item { position: relative; margin: 0; }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-700);
  white-space: nowrap;
}
.nav-link:hover { color: var(--navy-700); background: var(--surface-alt); text-decoration: none; }
.nav-link.is-current { color: var(--accent-700); }

.nav-caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .55;
  transition: transform .15s ease;
}
.has-dropdown:hover .nav-caret, .has-dropdown.is-open .nav-caret { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: calc(100% - 2px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 270px;
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
  z-index: 120;
}
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown,
.has-dropdown.is-open > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.dropdown-wide { min-width: 560px; }
.dropdown-list { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.dropdown-wide .dropdown-list { grid-template-columns: 1fr 1fr; gap: 1px var(--sp-2); }
.dropdown-list li { margin: 0; }
.dropdown-list a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--ink-700);
}
.dropdown-list a:hover { background: var(--surface-alt); color: var(--navy-700); text-decoration: none; }
.dropdown-list a.is-current { color: var(--accent-700); background: var(--accent-100); }
.dropdown-list .icon { color: var(--navy-500); }
.dropdown-foot { margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.dropdown-all {
  display: inline-flex; align-items: center; gap: 6px;
  padding-inline: 0.7rem; font-size: var(--fs-sm); font-weight: 650; color: var(--accent-700);
}

.header-cta { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.header-phone { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--ink-900); }
.header-phone:hover { text-decoration: none; color: var(--accent-700); }
.header-phone .icon { color: var(--accent-500); width: 26px; height: 26px; }
.header-phone-text { display: flex; flex-direction: column; line-height: 1.2; }

/* Language switcher — a quiet pill, so it reads as a utility rather than
   competing with the section links beside it. */
.nav-item-lang { margin-inline-start: var(--sp-2); }
.nav-lang {
  display: inline-flex; align-items: center; gap: 6px;
  padding-inline: var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--navy-700);
}
.nav-lang:hover { border-color: var(--accent-500); background: var(--surface-tint); text-decoration: none; }
.nav-lang .icon { width: 16px; height: 16px; opacity: .8; }
.header-phone-text small { font-size: 0.6875rem; color: var(--ink-400); text-transform: uppercase; letter-spacing: .06em; }
.header-phone-text strong { font-size: 1.0625rem; font-weight: 750; }

.nav-toggle { display: none; }
.nav-cta-mobile { display: none; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: linear-gradient(150deg, var(--navy-900) 0%, var(--navy-800) 45%, var(--navy-700) 100%);
  color: #dfe8f2;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(115deg, transparent 58%, rgba(242, 106, 27, .12) 58.2%, rgba(242, 106, 27, .12) 61%, transparent 61.2%),
    linear-gradient(115deg, transparent 72%, rgba(255, 255, 255, .05) 72.2%, rgba(255, 255, 255, .05) 78%, transparent 78.2%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--sp-8);
  align-items: center;
  padding-block: var(--sp-8);
}
.hero-copy { max-width: 620px; }
.hero h1 { color: #fff; margin-bottom: var(--sp-4); }
.hero-sub { font-size: var(--fs-lg); color: #c3d3e4; margin-bottom: var(--sp-5); }

.hero-points { list-style: none; margin: 0 0 var(--sp-6); padding: 0; display: grid; gap: var(--sp-2); }
.hero-points li { display: flex; align-items: flex-start; gap: var(--sp-3); margin: 0; font-size: var(--fs-sm); color: #d6e2ee; }
.hero-points .icon { color: var(--accent-500); margin-top: 3px; }

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-5); }

.hero-assurance {
  display: flex; flex-wrap: wrap; gap: var(--sp-5);
  padding-top: var(--sp-5); border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: var(--fs-sm); color: #a9bed4;
}
.hero-assurance span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.hero-assurance .icon { color: var(--accent-500); }

/* Slightly shorter hero for inner pages that use the homepage hero layout */
.hero-compact .hero-home-inner { min-height: 0; }
.hero-compact .hero-home h1 { font-size: clamp(1.6rem, 2.3vw, 2.1rem); }
.hero-compact .hero-home-media { min-height: 0; }

/* Duotone illustration inside a plain card, no tinted circle behind it */
.card-icon-plain { display: block; margin-bottom: var(--sp-3); }
.card-icon-plain .svc-icon { width: 46px; height: 46px; }

/* Compact hero for inner pages */
.hero-inner-page .hero-inner { grid-template-columns: 1fr; padding-block: var(--sp-7); }
.hero-inner-page .hero-copy { max-width: 780px; }
.hero-inner-page h1 { font-size: var(--fs-3xl); }

/* --------------------------------------------------------------------------
   7. Quote form card (in-hero and standalone)
   -------------------------------------------------------------------------- */
.quote-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.quote-card-head {
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line);
}
.quote-card-head h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.quote-card-head p { font-size: var(--fs-sm); color: var(--ink-500); margin: 0; }
.quote-card-body { padding: var(--sp-5); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-full { grid-column: 1 / -1; }

.field label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-900); }
.field .req { color: #c92a2a; }
.field-hint { font-size: var(--fs-xs); color: var(--ink-400); }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  padding: 0.6rem 0.75rem;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--ink-900);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-500) 50%), linear-gradient(135deg, var(--ink-500) 50%, transparent 50%); background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.2rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--navy-600);
  box-shadow: 0 0 0 3px rgba(28, 70, 118, .13);
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: #c92a2a;
  box-shadow: 0 0 0 3px rgba(201, 42, 42, .1);
}
.field-error { font-size: var(--fs-xs); font-weight: 600; color: #c92a2a; min-height: 0; }

/* Honeypot — hidden from people, visible to naive bots */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-foot { margin-top: var(--sp-4); }
.form-legal { font-size: var(--fs-xs); color: var(--ink-400); margin-top: var(--sp-3); }
.form-alt {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--ink-500); flex-wrap: wrap;
}

.alert {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius);
  border: 1px solid;
  margin-bottom: var(--sp-5);
  font-size: var(--fs-sm);
}
.alert-success { background: #e8f8ee; border-color: #a8ddbd; color: #14532d; }
.alert-error { background: #fdecec; border-color: #f0b4b4; color: #7f1d1d; }
.alert strong { display: block; margin-bottom: 4px; color: inherit; font-size: var(--fs-base); }

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
a.card:hover {
  text-decoration: none;
  border-color: var(--navy-500);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.card-icon {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  margin-bottom: var(--sp-4);
  border-radius: var(--radius);
  background: var(--surface-tint);
  color: var(--navy-700);
  transition: background-color .16s ease, color .16s ease;
}
a.card:hover .card-icon { background: var(--navy-800); color: #fff; }
.card-title { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.card-text { font-size: var(--fs-sm); color: var(--ink-500); margin-bottom: var(--sp-4); flex: 1; }
.card-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); font-weight: 650; color: var(--accent-700);
}
a.card:hover .card-link .icon { transform: translateX(3px); }
.card-link .icon { transition: transform .16s ease; }

/* --------------------------------------------------------------------------
   9. Trust / value strip
   -------------------------------------------------------------------------- */
.trust-strip { border-bottom: 1px solid var(--line); background: var(--surface); }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); padding-block: var(--sp-6); }
.trust-item { display: flex; gap: var(--sp-4); align-items: flex-start; }
.trust-item .icon {
  width: 40px; height: 40px; padding: 8px; flex: none;
  border-radius: var(--radius); background: var(--accent-100); color: var(--accent-700);
}
.trust-item h3 { font-size: var(--fs-base); margin-bottom: 4px; }
.trust-item p { font-size: var(--fs-sm); color: var(--ink-500); margin: 0; }

/* --------------------------------------------------------------------------
   10. Content blocks
   -------------------------------------------------------------------------- */
.prose { max-width: 760px; }
.prose h2 { font-size: var(--fs-2xl); margin-top: var(--sp-7); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--fs-lg); margin-top: var(--sp-5); }
.prose ul { padding-left: 1.15rem; }
.prose li { color: var(--ink-700); }

.split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--sp-8); align-items: start; }
.split-reverse { grid-template-columns: 0.85fr 1.15fr; }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.checklist li { display: flex; gap: var(--sp-3); align-items: flex-start; margin: 0; font-size: var(--fs-sm); }
.checklist .icon { color: var(--green-600); margin-top: 3px; flex: none; width: 18px; height: 18px; }
.checklist-2 { grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-5); }

.panel {
  padding: var(--sp-5);
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.panel-accent { border-left: 4px solid var(--accent-500); }
.panel h3 { font-size: var(--fs-lg); }

.tag-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.tag-list li { margin: 0; }
.tag {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  background: var(--surface-tint);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: var(--fs-sm);
  color: var(--ink-700);
}

/* Numbered process steps */
.steps { counter-reset: step; display: grid; gap: var(--sp-5); list-style: none; margin: 0; padding: 0; }
.steps-4 { grid-template-columns: repeat(4, 1fr); }
.steps-5 { grid-template-columns: repeat(5, 1fr); }
.step { position: relative; margin: 0; padding-top: var(--sp-5); border-top: 3px solid var(--line); }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 750;
  letter-spacing: .05em;
  color: var(--accent-700);
}
.step h3 { font-size: var(--fs-base); margin-bottom: var(--sp-2); }
.step p { font-size: var(--fs-sm); color: var(--ink-500); margin: 0; }

/* Benefit blocks */
.benefit { display: flex; gap: var(--sp-4); align-items: flex-start; }
.benefit .icon {
  width: 38px; height: 38px; padding: 8px; flex: none;
  border-radius: var(--radius); background: var(--navy-800); color: #fff;
}
.benefit h3 { font-size: var(--fs-base); margin-bottom: 4px; }
.benefit p { font-size: var(--fs-sm); color: var(--ink-500); margin: 0; }

/* --------------------------------------------------------------------------
   11. Breadcrumbs
   -------------------------------------------------------------------------- */
.breadcrumbs { background: var(--surface-alt); border-bottom: 1px solid var(--line); }
.breadcrumb-list {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin: 0; padding-block: 0.7rem; padding-left: 0; list-style: none;
  font-size: var(--fs-xs);
}
.breadcrumb-item { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0; }
.breadcrumb-item a { color: var(--ink-500); }
.breadcrumb-item a:hover { color: var(--accent-700); }
.breadcrumb-item [aria-current] { color: var(--ink-900); font-weight: 600; }
.breadcrumb-sep { color: var(--line-strong); }

/* --------------------------------------------------------------------------
   12. FAQ
   -------------------------------------------------------------------------- */
.section-faq { background: var(--surface-alt); }
.faq-list { display: grid; gap: var(--sp-3); }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq-item[open] { border-color: var(--navy-500); }
.faq-question {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-base);
  font-weight: 650;
  color: var(--ink-900);
  cursor: pointer;
  list-style: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
  content: "";
  flex: none;
  width: 11px; height: 11px;
  border-right: 2px solid var(--accent-500);
  border-bottom: 2px solid var(--accent-500);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease;
}
.faq-item[open] .faq-question::after { transform: rotate(225deg) translateY(-2px); }
.faq-question:hover { background: var(--surface-alt); }
.faq-answer { padding: 0 var(--sp-5) var(--sp-4); }
.faq-answer p { font-size: var(--fs-sm); color: var(--ink-500); margin: 0; }

/* --------------------------------------------------------------------------
   13. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
  color: #fff;
}
.cta-band-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6); padding-block: var(--sp-7); flex-wrap: wrap;
}
.cta-band h2 { color: #fff; font-size: var(--fs-2xl); margin-bottom: var(--sp-2); }
.cta-band p { color: #c3d3e4; margin: 0; max-width: 560px; }
.cta-band-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* --------------------------------------------------------------------------
   14. Blog
   -------------------------------------------------------------------------- */
.post-meta { font-size: var(--fs-xs); color: var(--ink-400); display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.post-card .card-title { font-size: var(--fs-lg); }
.post-body { max-width: 760px; }
.post-body h2 { font-size: var(--fs-2xl); margin-top: var(--sp-7); }
.post-body h3 { font-size: var(--fs-lg); margin-top: var(--sp-5); }
.post-body ul, .post-body ol { padding-left: 1.2rem; }
.post-body li { margin-bottom: var(--sp-2); }
.post-toc {
  padding: var(--sp-5); background: var(--surface-alt);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.post-toc h2 { font-size: var(--fs-base); margin-bottom: var(--sp-3); }
.post-toc ol { margin: 0; padding-left: 1.1rem; font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy-900); color: #a9bed4; margin-top: 0; }
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.9fr 1.1fr;
  gap: var(--sp-5);
  padding-block: var(--sp-5) var(--sp-4);
}
.brand-footer .brand-mark { background: var(--accent-500); }
.brand-footer .brand-text strong { color: #fff; }
.brand-footer .brand-text span { color: #8fa6bd; }
.footer-about { font-size: var(--fs-xs); margin: var(--sp-3) 0 var(--sp-3); max-width: 40ch; }
.footer-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.footer-title {
  font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: #fff; margin-bottom: var(--sp-3);
}
.footer-title-spaced { margin-top: var(--sp-4); }
.footer-list, .footer-contact { list-style: none; margin: 0; padding: 0; }
.footer-list li, .footer-contact li { margin-bottom: 0.2rem; font-size: var(--fs-xs); }
.footer-list a { color: #a9bed4; }
.footer-list a:hover { color: var(--accent-400); text-decoration: none; }
.footer-contact li { display: flex; align-items: flex-start; gap: var(--sp-3); }
.footer-contact .icon { color: var(--accent-500); margin-top: 3px; }
.footer-contact a { color: #fff; font-weight: 600; }
.footer-contact a:hover { color: var(--accent-400); }
.footer-note { font-size: 0.75rem; color: #7e93aa; margin-top: var(--sp-3); }

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); }
.footer-bottom-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding-block: var(--sp-4); flex-wrap: wrap;
  font-size: var(--fs-xs);
}
.footer-bottom p { margin: 0; }
.footer-legal { display: flex; gap: var(--sp-4); list-style: none; margin: 0; padding: 0; }
.footer-legal li { margin: 0; }
.footer-legal a { color: #a9bed4; }
.footer-legal a:hover { color: var(--accent-400); }

/* --------------------------------------------------------------------------
   16. Mobile sticky CTA bar (shown by responsive.css)
   -------------------------------------------------------------------------- */
.mobile-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  background: var(--navy-800);
  border-top: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 -2px 14px rgba(8, 26, 48, .22);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-bar-item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 58px;
  padding: 6px 4px;
  font-size: 0.6875rem;
  font-weight: 650;
  color: #fff;
  border-right: 1px solid rgba(255, 255, 255, .12);
}
.mobile-bar-item:last-child { border-right: 0; }
.mobile-bar-item:hover { text-decoration: none; color: #fff; }
.mobile-bar-item .icon { width: 20px; height: 20px; }
.mobile-bar-whatsapp { background: var(--green-600); }

/* --------------------------------------------------------------------------
   17. 404
   -------------------------------------------------------------------------- */
.error-page { text-align: center; padding-block: var(--sp-9); }
.error-code {
  font-size: 5rem; font-weight: 800; line-height: 1;
  color: var(--navy-800); letter-spacing: -0.04em; margin-bottom: var(--sp-4);
}

/* ==========================================================================
   20. Homepage composition
   Navy + gold layout: photo hero, service strip, why-us, process, service
   areas, reviews, gold CTA band and blog strip.
   ========================================================================== */

/* --- Image placeholders ---------------------------------------------------
   Rendered wherever a photo has not been supplied yet. Keeps the exact aspect
   ratio the real image will occupy, so adding the photo causes no layout shift.
   -------------------------------------------------------------------------- */
.img-placeholder {
  position: relative;
  width: 100%;
  height: 0;
  background: linear-gradient(140deg, var(--navy-700) 0%, var(--navy-800) 55%, var(--navy-900) 100%);
  border-radius: inherit;
  overflow: hidden;
}
.img-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 58%, rgba(245, 178, 29, .16) 58.2%, rgba(245, 178, 29, .16) 62%, transparent 62.2%),
    linear-gradient(115deg, transparent 74%, rgba(255, 255, 255, .06) 74.2%, rgba(255, 255, 255, .06) 80%, transparent 80.2%);
}
.img-placeholder-inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  color: rgba(255, 255, 255, .5);
  text-align: center;
  padding: var(--sp-4);
}
.img-placeholder-hint {
  font-size: 0.6875rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: rgba(255, 255, 255, .45);
  word-break: break-all;
  max-width: 90%;
}

/* --- Topbar ---------------------------------------------------------------- */
.topbar-left { display: inline-flex; align-items: center; gap: var(--sp-2); }
.topbar-right { display: inline-flex; align-items: center; gap: var(--sp-5); }

/* --- Brand logo ------------------------------------------------------------ */
.brand-logo { height: 54px; width: auto; }
.brand-footer .brand-logo { height: 60px; }

/* --- Section heading with gold rules --------------------------------------- */
.heading-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.heading-rule::before,
.heading-rule::after {
  content: "";
  height: 3px;
  width: 54px;
  background: var(--accent-500);
  border-radius: 2px;
  flex: none;
}
.heading-rule h2 {
  margin: 0;
  font-size: var(--fs-2xl);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--navy-800);
  text-align: center;
}

/* --- Hero ------------------------------------------------------------------ */
.hero-home {
  position: relative;
  background: linear-gradient(100deg, #ffffff 0%, #f7f9fc 46%, var(--surface-tint) 100%);
  overflow: hidden;
  /*
   * A fixed, comfortable height rather than the photograph's own ratio. Taking
   * the ratio meant a ~920px hero on a desktop, which was far too tall; the
   * picture is kept whole by `contain` below instead of by stretching the
   * section to match it.
   */
  height: clamp(500px, 41vw, 660px);
}
.hero-home-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  /*
   * Top-aligned, not centred. The section now matches the photograph's ratio
   * so nothing is cropped, which makes it ~920px tall on a desktop — centring
   * the copy in that pushed "Call Now" and "Get a Free Quote" below the fold,
   * and those are the page's primary conversions.
   */
  align-items: start;
  gap: var(--sp-5);
  height: 100%;
}
.hero-home-copy { padding-block: var(--sp-8) var(--sp-7); max-width: 560px; }
.hero-home h1 {
  color: var(--navy-800);
  font-size: clamp(1.8rem, 2.7vw, 2.5rem);
  line-height: 1.15;
  margin-bottom: var(--sp-3);
}
.hero-home-sub {
  font-size: var(--fs-base);
  color: var(--ink-500);
  margin-bottom: var(--sp-4);
  max-width: 44ch;
}

/* Small trust markers under the hero copy */
/* Three markers on one row, each label free to wrap to two lines — the
   arrangement in the reference. Forcing one line per label pushed the third
   item onto its own row once the copy column narrowed. */
.hero-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, max-content));
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
  padding-block: var(--sp-3);
  border-top: 1px solid rgba(16, 25, 42, .12);
  border-bottom: 1px solid rgba(16, 25, 42, .12);
  max-width: 560px;
}
.hero-trust-item { display: flex; align-items: center; gap: 7px; }
.hero-trust-item .icon { color: var(--navy-600); width: 20px; height: 20px; }
.hero-trust-item span {
  font-size: 0.75rem;
  font-weight: 650;
  color: var(--ink-900);
  line-height: 1.2;
}

/*
 * The photograph is the background of the WHOLE hero, not a column beside the
 * copy — the text sits on top of it. A gradient scrim keeps the left side
 * light enough for navy body text to stay readable (the copy is dark-on-light,
 * so the scrim is doing real contrast work here, not decoration) and thins out
 * to the right so the picture reads properly.
 */
.hero-home-media {
  position: absolute;
  inset: 0;
  width: 100%;
  z-index: 0;
}
/* Blurred fill behind the sharp photo, so there is no hard edge where the
   contained image starts. Scaled up slightly so the blur has no soft border. */
.hero-home-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: blur(26px) saturate(.9);
  transform: scale(1.1);
}

.hero-home-media img:not(.hero-home-backdrop),
.hero-home-media .img-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding-bottom: 0 !important;
  /*
   * contain, never cover: the photograph is shown whole and is never cropped.
   * Anchored right, so the part of the section it does not cover is the light
   * left-hand area the copy sits in — and the scrim above is ~95% opaque
   * there, which hides the picture's left edge rather than leaving a seam.
   */
  object-fit: contain;
  object-position: right center;
  border: 0;
  border-radius: 0;
}
.hero-home-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      rgba(248, 250, 253, .97) 0%,
      rgba(248, 250, 253, .95) 34%,
      rgba(248, 250, 253, .88) 46%,
      rgba(248, 250, 253, .48) 58%,
      rgba(248, 250, 253, .12) 70%,
      rgba(248, 250, 253, 0) 80%);
  pointer-events: none;
}

/*
 * The copy sits above the picture — NOT by making .hero-home-inner relative:
 * .hero-home-media is a child of the inner, so that would make the inner its
 * containing block and the photo would cover the copy instead of the section.
 * The section stays the containing block; the copy is lifted on its own.
 */
.hero-home-copy { position: relative; z-index: 1; }

/* --- Service strip --------------------------------------------------------- */
.service-strip {
  display: grid;
  /* Column count is set per instance via --cols: a related-services strip has
     four tiles, a location strip has seven, the full catalogue has twelve.
     A fixed repeat(8) left the rest of the row empty. */
  grid-template-columns: repeat(var(--cols, 8), 1fr);
  gap: var(--sp-3);
}
.service-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: var(--sp-4) 0.55rem var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.service-tile:hover {
  text-decoration: none;
  border-color: var(--accent-500);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.service-tile-icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 2px;
}
.svc-icon { width: 44px; height: 44px; display: block; }
.service-tile h3 {
  font-size: 0.875rem;
  font-weight: 700;
  margin: 4px 0 0;
  color: var(--navy-800);
  line-height: 1.25;
}
.service-tile p {
  font-size: var(--fs-xs);
  color: var(--ink-500);
  margin: 0;
  line-height: 1.45;
}
.service-strip-foot { display: flex; justify-content: center; margin-top: var(--sp-4); }

/* Twelve tiles do not fit one row; wrap them onto a 6-wide grid instead. */
.service-strip-wrap { grid-template-columns: repeat(6, 1fr); }   /* 12 tiles, two rows of six */

/* --------------------------------------------------------------------------
   Continuously sliding service strip
   --------------------------------------------------------------------------
   The tiles are rendered twice (see includes/service-marquee.php) and the
   track travels exactly one group's width before the animation repeats, so
   the second copy has moved into the place the first one started from at the
   moment it loops. That is what makes it seamless rather than snapping back.

   It bleeds to the viewport edges so tiles slide in and out of the screen
   rather than appearing at a container margin. The masks fade those edges so
   nothing is abruptly cut in half.
   -------------------------------------------------------------------------- */
.service-marquee {
  overflow: hidden;
  /* No negative margin: the strip is a direct child of the section, so it is
     already the full client width. calc(50% - 50vw) reached 8px past the
     viewport on every desktop width, because 50vw counts the scrollbar and
     50% of the container does not — and the page could genuinely be nudged
     sideways by those 8px, overflow-x: clip notwithstanding. */
  padding-block: 4px;                 /* room for the tiles' hover lift */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.service-marquee-track {
  display: flex;
  width: max-content;
  animation: service-marquee 46s linear infinite;
}
.service-marquee-group {
  display: flex;
  gap: var(--sp-3);
  padding-inline-end: var(--sp-3);    /* keeps the seam evenly spaced */
}
.service-marquee .service-tile {
  flex: 0 0 210px;
  width: 210px;
}

/* From -50% to 0 so the strip travels left to right. */
@keyframes service-marquee {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Stop while someone is reading a tile, or tabbing through them. */
.service-marquee:hover .service-marquee-track,
.service-marquee:focus-within .service-marquee-track { animation-play-state: paused; }


/* Blog cards used in a plain 2-column grid on the blog index */
.grid-2 > .blog-card { height: 100%; }

/* --- Why choose us --------------------------------------------------------- */
.why-section { position: relative; overflow: hidden; }

.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-7);
  align-items: center;
  min-height: 400px;
}
/* .why-media is positioned against the section, so it is out of the grid
   flow. Without this the copy falls into column 1 and sits behind the photo. */
.why-grid > *:not(.why-media) { grid-column: 2; }

/*
 * The photo runs off the left edge of the viewport, as in the reference.
 * Positioned against the SECTION rather than pulled left with a percentage
 * margin: a percentage margin resolves against the grid area, not the
 * container, which dragged the picture 300px off-screen and cut the left
 * half of the scene out of frame.
 */
.why-media {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 47vw;
}
.why-media img,
.why-media .img-placeholder {
  width: 100%;
  height: 100%;
  padding-bottom: 0 !important;
  object-fit: cover;
  /* Bias slightly above centre so the crew's heads stay in frame. */
  object-position: center 42%;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.why-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2) var(--sp-5);
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
}
.why-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--ink-700);
}
.why-list .icon {
  flex: none;
  width: 20px; height: 20px;
  color: var(--navy-600);
  margin-top: 2px;
}

/* --- Process --------------------------------------------------------------- */
.process-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-3);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: pstep;
}
.process-item {
  position: relative;
  margin: 0;
  text-align: center;
  padding-inline: var(--sp-2);
}
/* Connector arrow between steps */
.process-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 34px;
  right: -6px;
  width: 12px; height: 12px;
  border-top: 2px solid var(--line-strong);
  border-right: 2px solid var(--line-strong);
  transform: rotate(45deg);
}
.process-icon {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin: 0 auto var(--sp-2);
  border-radius: 50%;
  background: var(--surface-tint);
  color: var(--navy-700);
}
.process-icon .icon { width: 30px; height: 30px; }
.process-num {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--accent-500);
  line-height: 1;
  margin-bottom: 6px;
}
.process-item h3 { font-size: var(--fs-sm); margin-bottom: 6px; }
.process-item p { font-size: var(--fs-xs); color: var(--ink-500); margin: 0; line-height: 1.5; }

/* --- Service areas --------------------------------------------------------- */
.serve-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--sp-7);
  align-items: center;
}
.serve-cities {
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  color: var(--navy-800);
  margin-bottom: var(--sp-4);
}
.serve-cities .dot { color: var(--accent-500); margin-inline: 0.15em; }
.help-box {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  background: var(--accent-100);
  border-radius: var(--radius-lg);
}
.help-box .icon { width: 40px; height: 40px; color: var(--accent-700); flex: none; }
.help-box small { display: block; font-size: var(--fs-xs); color: var(--ink-500); }
.help-box strong { display: block; font-size: var(--fs-xl); color: var(--navy-800); }
.help-box a { color: var(--navy-800); }
.help-box a:hover { color: var(--accent-700); }

.city-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.city-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.city-card:hover {
  text-decoration: none;
  border-color: var(--navy-500);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.city-card-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.city-card-media img,
.city-card-media .img-placeholder {
  width: 100%; height: 100%;
  padding-bottom: 0 !important;
  object-fit: cover;
  border: 0; border-radius: 0;
}
.city-card-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.city-card h3 { font-size: var(--fs-base); margin-bottom: 6px; }
.city-card p {
  font-size: var(--fs-xs);
  color: var(--ink-500);
  margin-bottom: var(--sp-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Reviews --------------------------------------------------------------- */
.reviews { background: var(--navy-800); color: #c3d3e4; }
.reviews-grid {
  display: grid;
  grid-template-columns: 0.8fr 2.2fr;
  gap: var(--sp-7);
  align-items: center;
}
.reviews-intro h2 {
  color: #fff;
  font-size: var(--fs-2xl);
  line-height: 1.22;
  margin-bottom: var(--sp-4);
}
.reviews-intro p { font-size: var(--fs-sm); margin: 0; color: #a9bed4; }
.reviews-score { margin-bottom: var(--sp-3) !important; color: #dbe6f2 !important; }
.reviews-score strong { color: var(--accent-500); font-size: var(--fs-lg); }

.stars { display: flex; gap: 4px; margin-bottom: var(--sp-2); }
.stars .icon {
  width: 24px; height: 24px;
  color: var(--accent-500);
  fill: var(--accent-500);
}
.stars .icon.is-empty { fill: none; opacity: .45; }
.stars-sm { margin-bottom: var(--sp-3); }
.stars-sm .icon { width: 16px; height: 16px; }

.reviews-main { min-width: 0; }
.reviews-dev-note {
  margin-bottom: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-left: 4px solid var(--accent-500);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .07);
  font-size: var(--fs-xs);
  color: #dbe6f2;
}
.reviews-dev-note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: rgba(0, 0, 0, .28);
  padding: 1px 5px;
  border-radius: 3px;
}

.review-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.review-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  margin: 0;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}
.review-card.is-hidden { display: none; }
.review-mark {
  font-size: 2.4rem;
  line-height: 0.6;
  color: var(--accent-500);
  font-family: Georgia, "Times New Roman", serif;
  margin-bottom: var(--sp-3);
}
.review-card blockquote {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink-700);
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review-author {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.review-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; }
.review-avatar-initials {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--navy-800);
  color: var(--accent-500);
  font-size: var(--fs-sm);
  font-weight: 750;
  flex: none;
}
.review-author strong { display: block; font-size: var(--fs-sm); color: var(--ink-900); }
.review-author > span > span { display: block; font-size: var(--fs-xs); color: var(--ink-400); }

/* Carousel dots — only rendered when there is more than one page of reviews */
.review-dots { display: flex; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-5); }
.review-dot {
  width: 10px; height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .32);
  cursor: pointer;
  transition: background-color .16s ease, transform .16s ease;
}
.review-dot:hover { background: rgba(255, 255, 255, .55); }
.review-dot.is-active { background: var(--accent-500); transform: scale(1.25); }

/* --- Gold CTA band --------------------------------------------------------- */
.cta-gold { background: var(--accent-500); color: var(--on-accent); overflow: hidden; }
.cta-gold-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-5);
  padding-block: var(--sp-5);
}
.cta-gold-media { width: 165px; flex: none; }
.cta-gold-media .img-placeholder { border-color: rgba(0, 0, 0, .18); background: rgba(255, 255, 255, .3); }
.cta-gold h2 { color: var(--on-accent); font-size: var(--fs-2xl); margin-bottom: var(--sp-2); }
.cta-gold p { margin: 0; color: #4a3d16; font-weight: 550; }
.cta-gold-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* --- Blog strip ------------------------------------------------------------ */
.blog-grid {
  display: grid;
  grid-template-columns: 2.1fr 1fr;
  gap: var(--sp-6);
  align-items: start;
}
.blog-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.blog-card:hover {
  text-decoration: none;
  border-color: var(--navy-500);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.blog-card-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.blog-card-media img,
.blog-card-media .img-placeholder {
  width: 100%; height: 100%;
  padding-bottom: 0 !important;
  object-fit: cover;
  border: 0; border-radius: 0;
}
.blog-card-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; flex: 1; }
.blog-card h3 {
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-2);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card .post-meta { margin-bottom: 6px; font-size: 0.75rem; }
.blog-card .card-link { margin-top: auto; }

/* Compact form beside the blog cards */
.quote-mini {
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  text-align: center;
}
.quote-mini h2 { font-size: var(--fs-lg); margin-bottom: 4px; }
.quote-mini > p { font-size: var(--fs-xs); color: var(--ink-500); margin-bottom: var(--sp-3); }
.quote-mini .form-grid { gap: var(--sp-2); text-align: left; }
.quote-mini .field input,
.quote-mini .field select { min-height: 40px; }
.quote-mini .form-legal { font-size: 0.6875rem; margin-top: var(--sp-2); }

/* --- Contact page ----------------------------------------------------------- */
.contact-methods .contact-card { text-align: center; align-items: center; }
.contact-card .card-icon-plain { margin-bottom: var(--sp-3); }
.contact-card .card-title { font-size: var(--fs-base); margin-bottom: 4px; }
.contact-value {
  font-size: var(--fs-lg);
  font-weight: 750;
  color: var(--navy-800);
  margin: 0 0 var(--sp-2);
  word-break: break-word;
}
.contact-value-sm { font-size: var(--fs-sm); }
.contact-card .card-text { font-size: var(--fs-xs); margin-bottom: 0; flex: 0; }
a.contact-card:hover { border-color: var(--accent-500); }
a.contact-card:hover .contact-value { color: var(--accent-700); }

/* Form beside a supporting panel */
.contact-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--sp-6);
  align-items: start;
}
.contact-grid-reverse { grid-template-columns: 1fr 1fr; align-items: center; }

/* --- Footer social --------------------------------------------------------- */
.footer-social { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.footer-social a {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .09);
  color: #fff;
  transition: background-color .16s ease, color .16s ease;
}
.footer-social a:hover { background: var(--accent-500); color: var(--on-accent); text-decoration: none; }
.footer-social .icon { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   17b. Projects and reviews
   -------------------------------------------------------------------------- */
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.project-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.project-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--line-strong);
  text-decoration: none;
}
.project-card-media { display: block; aspect-ratio: 4 / 3; background: var(--surface-tint); }
.project-card-media img { width: 100%; height: 100%; object-fit: cover; }
.project-card-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.project-card-placeholder .svc-icon { width: 64px; height: 64px; opacity: .55; }
.project-card-body { display: flex; flex-direction: column; flex: 1; padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.project-card-meta {
  font-size: var(--fs-xs);
  font-weight: 650;
  color: var(--accent-700);
  margin-bottom: var(--sp-2);
}
.project-card h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.project-card p { font-size: var(--fs-sm); color: var(--ink-500); margin-bottom: var(--sp-4); }
.project-card .card-link { margin-top: auto; }

.project-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.project-gallery img { width: 100%; border-radius: var(--radius); }

/* The reviews page shows every approved review, so it wraps rather than
   paginating the way the homepage strip does. */
.review-wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  align-items: start;
}
.review-wall .review-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  margin: 0;
  display: block;
}
.review-wall .review-card blockquote { color: var(--ink-700); }
.review-wall .review-author strong { color: var(--ink-900); }
.review-wall .review-author span span { color: var(--ink-500); }
.review-wall .review-mark { color: var(--accent-500); }
.review-wall .review-avatar-initials { background: var(--surface-tint); color: var(--navy-700); }

.hero-rating { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.hero-rating-text { margin: 0; font-size: var(--fs-sm); color: var(--ink-500); }
.hero-rating-text strong { font-size: var(--fs-lg); color: var(--ink-900); }

/* Star rating input. Radios do the work; the stars are their labels.
   Laid out in reverse (5 first) so the CSS sibling selector can light up
   every star up to the one being hovered without any JavaScript. */
.rating-field { border: 0; margin: 0 0 var(--sp-4); padding: 0; }
.rating-field legend { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-900); padding: 0; margin-bottom: 6px; }
.rating-stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.rating-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rating-stars label { cursor: pointer; padding: 4px; line-height: 0; transition: color .12s ease, fill .12s ease; }
.rating-stars label .icon { width: 30px; height: 30px; color: var(--line-strong); fill: none; }
/* The star is a stroke-only icon, so a chosen star has to be filled as well as
   coloured, or it stays an outline and reads as unselected. */
.rating-stars label:hover .icon,
.rating-stars label:hover ~ label .icon,
.rating-stars input:checked ~ label .icon { color: var(--accent-500); fill: var(--accent-500); }
.rating-stars input:focus-visible + label { outline: 3px solid var(--accent-500); outline-offset: 2px; border-radius: var(--radius-sm); }

/* Small and destructive button variants, used by the dashboard. */
.btn-sm { min-height: 36px; padding: 0.35rem 0.75rem; font-size: var(--fs-xs); }
.btn-danger { background: #fdecec; color: #a51d1d; border-color: #f3c9c9; }
.btn-danger:hover { background: #f8dcdc; color: #8d1717; }

/* --------------------------------------------------------------------------
   18. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  /*
   * The sliding service strip is exempt at the client's request: it runs for
   * everyone. It still pauses on hover and on focus, which is the only part
   * of the usual accommodation left — worth knowing if anyone reports motion
   * discomfort on the homepage, because this is where it comes from.
   */
  .service-marquee-track {
    animation-duration: 46s !important;
    animation-iteration-count: infinite !important;
  }
}

/* --------------------------------------------------------------------------
   19. Print
   -------------------------------------------------------------------------- */
@media print {
  .topbar, .site-header, .mobile-bar, .cta-band, .site-footer, .breadcrumbs { display: none !important; }
  body { color: #000; font-size: 12pt; }
  a { color: #000; text-decoration: underline; }
}