/* ============================================================
   MAN WITH VAN — Core Stylesheet
   Tokens → Reset → Layout → Typography → Components → Utilities
   ============================================================ */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  /* Brand colours */
  --brand-50:  #eef6ff;
  --brand-100: #d9eaff;
  --brand-200: #b8d8ff;
  --brand-300: #8abfff;
  --brand-400: #559dff;
  --brand-500: #1d4ed8;
  --brand-600: #1e40af;
  --brand-700: #1548b4;
  --brand-800: #163d8f;
  --brand-900: #173571;

  /* Neutrals */
  --ink-900: #0e1420;
  --ink-800: #1a2332;
  --ink-700: #2b3748;
  --ink-600: #47536a;
  --ink-500: #6b7789;
  --ink-400: #94a0b2;
  --ink-300: #c3ccd8;
  --ink-200: #e1e7ee;
  --ink-100: #f0f4f8;
  --ink-50:  #f8fafc;
  --white:   #ffffff;

  /* Accents */
  --accent:      #c2410c;
  --accent-dark: #9a3412;
  --success:     #16a34a;
  --warning:     #f59e0b;
  --danger:      #dc2626;

  /* Gradients */
  --grad-brand:   linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%);
  --grad-accent:  linear-gradient(135deg, #c2410c 0%, #9a3412 100%);
  --grad-hero:    linear-gradient(135deg, #0e1b33 0%, #173571 55%, #1a5ce0 100%);
  --grad-surface: linear-gradient(180deg, var(--white) 0%, var(--ink-50) 100%);
  --grad-text:    linear-gradient(90deg, var(--brand-500), var(--accent));

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(14, 20, 32, .06);
  --shadow-sm: 0 2px 6px rgba(14, 20, 32, .08);
  --shadow-md: 0 6px 18px rgba(14, 20, 32, .10);
  --shadow-lg: 0 14px 40px rgba(14, 20, 32, .14);
  --shadow-xl: 0 24px 64px rgba(14, 20, 32, .18);
  --shadow-brand: 0 10px 30px rgba(29, 78, 216, .35);
  --shadow-accent: 0 10px 30px rgba(194, 65, 12, .35);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.6);

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Spacing scale */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  /* Typography */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Poppins", "Inter", system-ui, sans-serif;
  --fs-xs: .78rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.35rem;
  --fs-2xl: 1.7rem;
  --fs-3xl: 2.2rem;
  --fs-4xl: 2.8rem;
  --fs-5xl: 3.6rem;

  /* Layout */
  --container: 1200px;
  --container-narrow: 820px;
  --gutter: clamp(1rem, 3vw, 2rem);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .22s;
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink-800);
  background: var(--ink-50);
  -webkit-font-smoothing: antialiased;
}
img, picture, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: var(--brand-600); text-decoration: none; }
a:hover { color: var(--brand-700); }
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  line-height: 1.15;
  color: var(--ink-900);
  font-weight: 700;
  letter-spacing: -.02em;
}
ul[role="list"] { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--brand-400); outline-offset: 2px; border-radius: 4px; }

/* ---------- 3. LAYOUT PRIMITIVES ---------- */
.container { width: min(100% - (var(--gutter) * 2), var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - (var(--gutter) * 2), var(--container-narrow)); margin-inline: auto; }
.section { padding-block: clamp(2.5rem, 6vw, 5rem); }
.section--tight { padding-block: clamp(1.5rem, 3vw, 2.5rem); }

/* Grid system */
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Rows & columns (flex) */
.row { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.row--center { align-items: center; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.col { flex: 1 1 0; min-width: 0; }
.col--1-2 { flex-basis: calc(50% - var(--s-4)); }
.col--1-3 { flex-basis: calc(33.333% - var(--s-4)); }
.col--2-3 { flex-basis: calc(66.666% - var(--s-4)); }
.col--1-4 { flex-basis: calc(25% - var(--s-4)); }
@media (max-width: 720px) {
  .col--1-2, .col--1-3, .col--2-3, .col--1-4 { flex-basis: 100%; }
}

/* Stack utility */
.stack > * + * { margin-top: var(--stack, var(--s-4)); }

/* ---------- 4. TYPOGRAPHY HELPERS ---------- */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-600);
  background: var(--brand-50);
  padding: .35rem .75rem;
  border-radius: var(--r-pill);
}
.text-gradient {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lead { font-size: var(--fs-lg); color: var(--ink-600); }
.muted { color: var(--ink-500); }
.center { text-align: center; }

/* ---------- 5. BUTTONS ---------- */
.btn,
.btn:link,
.btn:visited {
  --btn-bg: var(--brand-500);
  --btn-fg: var(--white);
  color: var(--btn-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .8rem 1.5rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--grad-brand); color: #ffffff; box-shadow: var(--shadow-brand); }
.btn--primary:hover { color: #ffffff; box-shadow: var(--shadow-lg); }
.btn--accent { background: var(--grad-accent); color: #ffffff; box-shadow: var(--shadow-accent); }
.btn--ghost {
  background: transparent;
  color: var(--brand-700);
  box-shadow: inset 0 0 0 2px var(--brand-300);
}
.btn--ghost:hover { background: var(--brand-50); box-shadow: inset 0 0 0 2px var(--brand-400); }
.btn--light { background: var(--white); color: #0e1420; box-shadow: var(--shadow-sm); }
.btn--light:hover { box-shadow: var(--shadow-md); }
.btn--lg { padding: 1rem 2rem; font-size: var(--fs-base); }
.btn--sm { padding: .55rem 1rem; font-size: var(--fs-xs); }
.btn--block { display: flex; width: 100%; }
.btn--icon { padding: .7rem; border-radius: var(--r-md); }

/* Button group */
.btn-group { display: inline-flex; flex-wrap: wrap; gap: var(--s-3); }

/* ---------- 6. CARDS ---------- */
.card {
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--s-5);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  border: 1px solid var(--ink-100);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card--flat { box-shadow: none; border: 1px solid var(--ink-200); }
.card--gradient { background: var(--grad-surface); }
.card--brand { background: var(--grad-brand); color: var(--white); border: 0; }
.card--brand h2, .card--brand h3, .card--brand p { color: var(--white); }
.card--accent { background: var(--grad-accent); color: var(--white); border: 0; }
.card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  background: var(--brand-50);
  color: var(--brand-600);
  font-size: 1.4rem;
  margin-bottom: var(--s-4);
  box-shadow: var(--shadow-inset);
}
.card__title { font-size: var(--fs-xl); margin-bottom: var(--s-2); }
.card__text { color: var(--ink-600); font-size: var(--fs-sm); }
.card__footer { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--ink-100); }

/* ---------- 7. BANNERS ---------- */
.banner {
  position: relative;
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: var(--r-xl);
  background: var(--grad-brand);
  color: var(--white);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.banner::after {
  content: "";
  position: absolute;
  inset: auto -20% -60% auto;
  width: 60%;
  height: 160%;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 60%);
  transform: rotate(15deg);
  pointer-events: none;
}
.banner h2, .banner h3, .banner p { color: var(--white); position: relative; z-index: 1; }
.banner--accent { background: var(--grad-accent); }
.banner--dark { background: var(--grad-hero); }
.banner__actions { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-3); position: relative; z-index: 1; }

/* ---------- 8. HERO ---------- */
.hero {
  position: relative;
  padding-block: clamp(3rem, 8vw, 6rem);
  background: var(--grad-hero);
  color: var(--white);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 300px at 80% 20%, rgba(47,123,255,.45), transparent 70%),
    radial-gradient(500px 280px at 10% 90%, rgba(255,122,26,.35), transparent 70%);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; max-width: 760px; }
.hero h1 { color: var(--white); font-size: clamp(2rem, 5vw, var(--fs-5xl)); margin-bottom: var(--s-4); }
.hero p { color: rgba(255,255,255,.85); font-size: var(--fs-lg); margin-bottom: var(--s-6); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ---------- 9. NAVBAR ---------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ink-100);
  box-shadow: var(--shadow-xs);
}
.navbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-3); }
.navbar__brand { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg); color: var(--ink-900); letter-spacing: -.02em; }
.navbar__brand span { color: var(--brand-500); }
.navbar__links { display: flex; gap: var(--s-5); align-items: center; }
.navbar__links a { color: var(--ink-700); font-weight: 600; font-size: var(--fs-sm); }
.navbar__links a:hover { color: var(--brand-600); }
@media (max-width: 720px) { .navbar__links { display: none; } }

/* ---------- 10. BADGES & PILLS ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  border-radius: var(--r-pill);
  background: var(--brand-50);
  color: var(--brand-700);
}
.badge--accent { background: #fff3e6; color: var(--accent-dark); }
.badge--success { background: #e8f8ee; color: var(--success); }
.badge--dark { background: var(--ink-800); color: var(--white); }

/* ---------- 11. FORMS ---------- */
.form { display: grid; gap: var(--s-4); }
.field { display: grid; gap: var(--s-2); }
.field label { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-700); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: .8rem 1rem;
  border: 2px solid var(--ink-200);
  border-radius: var(--r-md);
  background: var(--white);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--brand-400);
  box-shadow: 0 0 0 4px var(--brand-100);
}

/* ---------- 12. UTILITIES ---------- */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.rounded { border-radius: var(--r-lg); }
.rounded-pill { border-radius: var(--r-pill); }
.bg-white { background: var(--white); }
.bg-ink { background: var(--ink-50); }
.bg-brand { background: var(--brand-50); }
.text-white { color: var(--white); }
.mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--s-2); } .mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--s-2); } .mb-4 { margin-bottom: var(--s-4); } .mb-6 { margin-bottom: var(--s-6); }
.gap-2 { gap: var(--s-2); } .gap-4 { gap: var(--s-4); } .gap-6 { gap: var(--s-6); }
.hidden { display: none; }
@media (max-width: 720px) { .hide-sm { display: none; } }

/* ---------- 13. FOOTER ---------- */
.footer {
  background: var(--ink-900);
  color: var(--ink-300);
  padding-block: var(--s-7);
  margin-top: var(--s-8);
}
.footer h4 { color: var(--white); font-size: var(--fs-base); margin-bottom: var(--s-3); }
.footer a { color: var(--ink-300); font-size: var(--fs-sm); }
.footer a:hover { color: var(--white); }
.footer__grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.footer__bottom { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid rgba(255,255,255,.1); font-size: var(--fs-xs); }

/* ---------- 14. MOTION PREFERENCES ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- 15. HERO — IMAGE-ONLY ---------- */
.hero--image { padding-block: clamp(1rem, 3vw, 2rem); }
.hero--image .hero__media {
  display: block;
  width: 100%;
  aspect-ratio: 1672 / 941;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  background: #0e1b33;
}
.hero--image .hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-intro { padding-top: clamp(1rem, 2vw, 1.5rem); }
.hero-intro h1 { font-size: clamp(1.8rem, 4vw, 3rem); margin: var(--s-3) 0 var(--s-4); }
.hero-intro .lead { max-width: 60ch; margin-inline: auto; }

/* ---------- 16. NAVBAR CTA ---------- */
.navbar .btn--primary {
  background: #0e1420;
  background-image: none;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(14,20,32,.25);
}
.navbar .btn--primary:hover {
  background: #1d4ed8;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(29,78,216,.35);
}
.navbar__links a:not(.btn) { color: #1a2332; font-weight: 600; }
.navbar__links a:not(.btn):hover { color: #1548b4; }

/* ---------- 17. ADVANCED LOCATION PAGE COMPONENTS ---------- */
.service-list { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.service-item {
  display: flex; gap: var(--s-5); padding: var(--s-5);
  background: var(--white); border-radius: var(--r-lg);
  border: 1px solid var(--ink-100); box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.service-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.service-item__icon {
  flex-shrink: 0; width: 56px; height: 56px; display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand-600); border-radius: var(--r-md); font-size: 1.5rem;
}
.service-item__content h3 { font-size: var(--fs-lg); margin-bottom: var(--s-2); }
.service-item__content p { color: var(--ink-600); font-size: var(--fs-sm); margin: 0; }

.local-knowledge {
  background: var(--ink-50); padding: clamp(2rem, 5vw, 4rem); 
  border-radius: var(--r-xl); border-left: 6px solid var(--brand-500);
  box-shadow: var(--shadow-sm); margin-block: var(--s-6);
}
.local-knowledge h2 { margin-bottom: var(--s-4); }
.local-knowledge p { color: var(--ink-700); margin-bottom: var(--s-4); }
.local-knowledge ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.local-knowledge li { position: relative; padding-left: 1.5rem; color: var(--ink-700); }
.local-knowledge li::before { content: "→"; position: absolute; left: 0; color: var(--brand-500); font-weight: bold; }

.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-4); margin-top: var(--s-6); margin-bottom: var(--s-6); }
.price-card {
  background: var(--white); border-radius: var(--r-lg); padding: var(--s-5);
  text-align: center; border: 2px solid var(--ink-100); box-shadow: var(--shadow-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.price-card:hover { border-color: var(--brand-300); box-shadow: var(--shadow-md); }
.price-card h3 { font-size: var(--fs-base); color: var(--ink-600); margin-bottom: var(--s-2); font-weight: 600; }
.price-amount { font-size: var(--fs-3xl); font-weight: 800; color: var(--brand-700); font-family: var(--font-display); }

.faq-grid { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.faq-item { background: var(--white); border-radius: var(--r-lg); padding: var(--s-5); border: 1px solid var(--ink-200); box-shadow: var(--shadow-xs); }
.faq-item h3 { font-size: var(--fs-lg); margin-bottom: var(--s-2); color: var(--ink-900); }
.faq-item p { color: var(--ink-600); font-size: var(--fs-sm); margin: 0; }

/* ---------- 18. SECTION LAYOUT & PRICING FIXES ---------- */
/* Reduce padding for tighter flow */
.section { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.section--tight { padding-block: clamp(1rem, 2vw, 1.5rem); }

/* Alternating backgrounds and borders for contrast */
.section.bg-white { 
  background-color: var(--white); 
  border-top: 1px solid var(--ink-100); 
  border-bottom: 1px solid var(--ink-100); 
}
.section.bg-ink { 
  background-color: var(--ink-50); 
  border-top: 1px solid var(--ink-200); 
  border-bottom: 1px solid var(--ink-200); 
}

/* Fix pricing cards text wrap */
.price-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.price-amount {
  font-size: clamp(1.5rem, 4vw, 2.25rem) !important; /* Prevents massive wrap */
  white-space: nowrap; /* Keeps "From £300" on one line */
  letter-spacing: -0.02em;
}

/* Ensure grid fits 5 items nicely */
.pricing-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* ---------- 19. BUTTON GROUP CENTERING ---------- */
.banner__actions {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
}

/* ---------- 20. AREAS COVERED PILLS ---------- */
.areas-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}
.area-pill {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-700);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.area-pill:hover {
  border-color: var(--brand-400);
  color: var(--brand-600);
}

/* ---------- 21. CONTRAST & PILL COLOUR OVERRIDES ---------- */

/* Stronger background contrast between sections */
.section.bg-white { 
  background-color: #ffffff; 
  border-top: 1px solid #e2e8f0; 
  border-bottom: 1px solid #e2e8f0; 
}
.section.bg-ink { 
  background-color: #f1f5f9; /* Slightly darker than --ink-50 for better contrast */
  border-top: 1px solid #cbd5e1; 
  border-bottom: 1px solid #cbd5e1; 
}
.local-knowledge {
  background: #ffffff; /* Ensure the knowledge box stands out on the grey section */
  border-left: 6px solid var(--brand-500);
}

/* Light yellow pills with deep blue text */
.area-pill {
  background: #fef3c7; /* Light yellow */
  color: #1e3a8a;      /* Deep blue */
  border: 1px solid #fde68a;
  font-weight: 700;
}
.area-pill:hover {
  background: #fde68a;
  color: #1e40af;
  border-color: #fcd34d;
}

/* ---------- 22. HERO CONTACT FORM ---------- */
.hero-form-section {
  position: relative;
  padding: clamp(3rem, 8vw, 6rem) 0;
  background-color: #0e1420;
  color: var(--white);
  overflow: hidden;
}

/* Background image with dark overlay */
.hero-form-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/images/hero.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.2;
  z-index: 0;
}

.hero-form-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (max-width: 900px) {
  .hero-form-grid { grid-template-columns: 1fr; }
}

.hero-form-copy h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: var(--white);
  line-height: 1.1;
  margin-bottom: var(--s-4);
  font-family: var(--font-display);
  font-weight: 800;
}

/* The dark glass card */
.hero-form-card {
  background: rgba(14, 20, 32, 0.85);
  backdrop-filter: blur(8px);
  padding: var(--s-6);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  border: 1px solid rgba(255,255,255,0.1);
}

.hero-form-card h2 {
  color: var(--white);
  font-size: var(--fs-xl);
  margin-bottom: var(--s-2);
}

.hero-form-card p {
  color: var(--ink-300);
  font-size: var(--fs-sm);
  margin-bottom: var(--s-5);
}

/* White inputs inside the dark card */
.hero-form-card .field label { display: none; } /* Hide labels, rely on placeholders */
.hero-form-card .field input,
.hero-form-card .field textarea,
.hero-form-card .field select {
  background: var(--white);
  border: none;
  color: var(--ink-900);
  padding: 1rem;
  border-radius: var(--r-md);
  width: 100%;
  font-size: var(--fs-sm);
}
.hero-form-card .field input::placeholder,
.hero-form-card .field textarea::placeholder {
  color: var(--ink-400);
}
.hero-form-card .field input:focus,
.hero-form-card .field textarea:focus,
.hero-form-card .field select:focus {
  outline: 2px solid #facc15;
}

/* The big yellow button */
.btn--yellow {
  background: #facc15;
  color: #0e1420;
  font-weight: 800;
  font-size: var(--fs-lg);
  border: none;
  width: 100%;
  padding: 1.2rem;
  border-radius: var(--r-md);
  margin-top: var(--s-2);
}
.btn--yellow:hover {
  background: #eab308;
  color: #0e1420;
}

/* Small text below the button */
.form-direct-call {
  text-align: center;
  margin-top: var(--s-4);
  font-size: var(--fs-sm);
  color: var(--ink-300);
}
.form-direct-call strong {
  color: var(--white);
}
.form-direct-call a {
  color: #facc15;
  font-weight: bold;
  text-decoration: none;
}

/* ---------- 23. CONTACT FORM FIXES ---------- */
/* Remove the background image overlay completely */
.hero-form-section::before {
  display: none !important;
}

/* Ensure the section is a solid dark colour instead */
.hero-form-section {
  background-color: #0e1420 !important; 
}

/* Make sure the form card stands out nicely */
.hero-form-card {
  background: var(--white) !important;
  border: none !important;
}
.hero-form-card h2 {
  color: var(--ink-900) !important;
}
.hero-form-card p {
  color: var(--ink-600) !important;
}

/* Make the inputs light grey so they stand out on the white card */
.hero-form-card .field input,
.hero-form-card .field textarea,
.hero-form-card .field select {
  background: var(--ink-50) !important;
  border: 1px solid var(--ink-200) !important;
}
.hero-form-card .field input:focus,
.hero-form-card .field textarea:focus,
.hero-form-card .field select:focus {
  background: var(--white) !important;
  border-color: var(--brand-400) !important;
}

/* Dark text for the call line */
.form-direct-call {
  color: var(--ink-600) !important;
}
.form-direct-call strong {
  color: var(--ink-900) !important;
}