/* ==========================================================================
   Self-hosted fonts (Latin subset, woff2). font-display: swap.
   No third-party requests — faster, privacy-conscious, resilient.
   ========================================================================== */
@font-face { font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url("/assets/fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("/assets/fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family:"Space Grotesk"; font-style:normal; font-weight:500; font-display:swap; src:url("/assets/fonts/spacegrotesk-500.woff2") format("woff2"); }
@font-face { font-family:"Space Grotesk"; font-style:normal; font-weight:600; font-display:swap; src:url("/assets/fonts/spacegrotesk-600.woff2") format("woff2"); }
@font-face { font-family:"Space Grotesk"; font-style:normal; font-weight:700; font-display:swap; src:url("/assets/fonts/spacegrotesk-700.woff2") format("woff2"); }

/* ==========================================================================
   Call Out Phone Repairs — Global Design System
   Design direction: premium 2026 tech (Linear/Vercel/Stripe inspired). Light canvas, single blue accent.
   Hand-written. No frameworks. Mobile-first. WCAG AA. Reduced-motion respected.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* ---- Palette (light system: Linear / Vercel / Stripe inspired) ----
     Single blue accent. Deep navy is TEXT + one dark anchor section only. */
  --ink-900: #0F172A;   /* primary text / dark anchor section */
  --ink-800: #1E293B;
  --ink-700: #334155;
  --ink-600: #475569;
  --blue-600: #2563EB;  /* THE accent — buttons, links, active, icons */
  --blue-700: #1D4ED8;  /* accent hover / active */
  --blue-500: #3B82F6;
  --blue-100: #DBE7FE;  /* accent tint — icon chips, hovers */
  --blue-050: #EFF5FF;  /* faint accent wash */
  /* amber retained ONLY as a neutral alias mapped to blue so any stray
     reference can't reintroduce a second accent colour */
  --amber-500: var(--blue-600);
  --amber-600: var(--blue-700);
  --canvas: #F8FAFC;    /* primary background */
  --structure: #E2E8F0;/* secondary bg / borders / dividers */
  --white: #FFFFFF;     /* cards */
  --slate-700: #475569; /* secondary text */
  --slate-500: #64748B;
  --slate-400: #94A3B8;
  --slate-200: #E2E8F0; /* borders (alias of structure) */
  --slate-100: #F1F5F9;
  --success-600: #15803D;
  --success-050: #E7F6EC;
  --danger-600: #DC2626;
  --danger-050: #FDECEC;

  /* Typography */
  --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale */
  --step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.94rem);
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1: clamp(1.2rem, 1.11rem + 0.44vw, 1.5rem);
  --step-2: clamp(1.44rem, 1.29rem + 0.74vw, 2rem);
  --step-3: clamp(1.73rem, 1.5rem + 1.14vw, 2.66rem);
  --step-4: clamp(2.07rem, 1.73rem + 1.71vw, 3.55rem);
  --step-5: clamp(2.49rem, 1.99rem + 2.49vw, 4.2rem);

  /* Spacing scale */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;

  /* Radius / shadow / layout */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 30px; --r-full: 999px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md: 0 4px 12px rgba(15,23,42,.06), 0 2px 4px rgba(15,23,42,.04);
  --shadow-lg: 0 12px 32px rgba(15,23,42,.10), 0 4px 12px rgba(15,23,42,.06);
  --shadow-focus: 0 0 0 3px var(--white), 0 0 0 6px var(--blue-500);
  --maxw: 1120px;
  --maxw-narrow: 760px;
  --header-h: 68px;
  --stickybar-h: 64px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-700);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, picture { max-width: 100%; display: block; }
a { color: var(--blue-600); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink-700); }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink-900); line-height: 1.12; letter-spacing: -0.02em; font-weight: 600; }
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
p { text-wrap: pretty; }
ul, ol { padding-left: 1.2em; }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-sm); }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 200;
  background: var(--ink-900); color: var(--white); padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md); font-weight: 600; transition: top .2s var(--ease);
}
.skip-link:focus { top: var(--sp-4); color: var(--white); }

/* ---------- Layout primitives ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--sp-5); }
.container-narrow { max-width: var(--maxw-narrow); }
.section { padding-block: var(--sp-8); }
.section-tight { padding-block: var(--sp-7); }
@media (min-width: 768px){ .section { padding-block: var(--sp-9); } }
.center { text-align: center; }
.eyebrow {
  font-family: var(--font-display); font-size: var(--step--1); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--blue-600);
  display: inline-flex; align-items: center; gap: var(--sp-2);
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--blue-600); border-radius: 2px; }
.lead { font-size: var(--step-1); color: var(--slate-500); line-height: 1.55; }
.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--ink-900); --btn-fg: var(--white); --btn-bd: var(--ink-900);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-0);
  line-height: 1; text-decoration: none; cursor: pointer;
  padding: 0.95rem 1.5rem; min-height: 52px; border-radius: var(--r-md);
  background: var(--btn-bg); color: var(--btn-fg); border: 1.5px solid var(--btn-bd);
  transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
  box-shadow: var(--shadow-sm);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }
/* Primary CTA — the single solid-blue action. Nothing else is solid blue,
   so "Get a Quote" is always the most prominent element on any screen. */
.btn-quote { --btn-bg: var(--blue-600); --btn-fg: var(--white); --btn-bd: var(--blue-600); box-shadow: 0 1px 2px rgba(37,99,235,.24), 0 6px 16px rgba(37,99,235,.20); }
.btn-quote:hover { --btn-bg: var(--blue-700); --btn-bd: var(--blue-700); box-shadow: 0 2px 4px rgba(37,99,235,.28), 0 10px 24px rgba(37,99,235,.26); }
.btn-whatsapp { --btn-bg: #25D366; --btn-fg: #06301B; --btn-bd: #25D366; }
.btn-whatsapp:hover { --btn-bg: #1ebe5a; --btn-bd: #1ebe5a; }
.btn-outline { --btn-bg: var(--white); --btn-fg: var(--ink-900); --btn-bd: var(--structure); box-shadow: var(--shadow-sm); }
.btn-outline:hover { --btn-bd: var(--blue-600); --btn-fg: var(--blue-700); }
.btn-ghost-light { --btn-bg: rgba(255,255,255,.10); --btn-fg: var(--white); --btn-bd: rgba(255,255,255,.28); box-shadow:none; }
.btn-ghost-light:hover { --btn-bg: rgba(255,255,255,.18); --btn-bd: var(--white); color: var(--white); }
.btn-lg { min-height: 58px; padding: 1.1rem 1.9rem; font-size: var(--step-1); }
.btn-block { width: 100%; }
.btn svg { width: 20px; height: 20px; flex: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(248,250,252,.80); backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--structure);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: var(--sp-4); }
.brand { display: inline-flex; align-items: center; gap: var(--sp-3); text-decoration: none; flex: none; }
.brand:hover { color: inherit; }
.brand-mark { width: 38px; height: 38px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--ink-900); letter-spacing: -0.02em; }
.brand-tag { font-size: 0.68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--blue-600); margin-top: 2px; }

.nav-desktop { display: none; }
@media (min-width: 960px) {
  .nav-desktop { display: flex; align-items: center; gap: var(--sp-2); }
  .nav-desktop > ul { display: flex; align-items: center; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; }
  .nav-item { position: relative; }
  .nav-link {
    display: inline-flex; align-items: center; gap: 4px; padding: 0.55rem 0.8rem;
    font-weight: 500; font-size: 0.96rem; color: var(--ink-800); text-decoration: none;
    border-radius: var(--r-sm); transition: background .15s var(--ease), color .15s var(--ease);
  }
  .nav-link:hover, .nav-link[aria-current="page"] { background: var(--slate-100); color: var(--ink-900); }
  .nav-link[aria-current="page"] { color: var(--blue-600); }
  .has-submenu > .nav-link::after {
    content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px); opacity: .6; transition: transform .2s var(--ease);
  }
  .submenu {
    position: absolute; top: calc(100% + 6px); left: 0; min-width: 250px;
    background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--r-md);
    box-shadow: var(--shadow-lg); padding: var(--sp-2); list-style: none; margin: 0;
    opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .18s var(--ease);
  }
  .nav-item:hover .submenu, .nav-item:focus-within .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-item:hover .has-submenu > .nav-link::after, .nav-item:focus-within .has-submenu > .nav-link::after { transform: rotate(-135deg) translateY(-1px); }
  .submenu a {
    display: block; padding: 0.6rem 0.8rem; border-radius: var(--r-sm); color: var(--ink-800);
    text-decoration: none; font-size: 0.92rem; font-weight: 500;
  }
  .submenu a:hover { background: var(--blue-100); color: var(--ink-900); }
  .submenu a.sub-featured { color: var(--blue-600); font-weight: 600; }
  .header-cta { display: inline-flex; gap: var(--sp-2); align-items: center; }
}
.header-actions { display: flex; align-items: center; gap: var(--sp-2); }
.header-quote { display: none; }
@media (min-width: 960px){ .header-quote { display: inline-flex; } .nav-toggle { display: none; } }

/* Mobile nav toggle */
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border: 1px solid var(--slate-200); background: var(--white);
  border-radius: var(--r-sm); cursor: pointer; color: var(--ink-900);
}
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Mobile menu panel */
.mobile-menu {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
  background: var(--canvas); padding: var(--sp-5);
  transform: translateX(100%); transition: transform .25s var(--ease);
  overflow-y: auto; visibility: hidden;
}
.mobile-menu.open { transform: translateX(0); visibility: visible; }
@media (min-width: 960px){ .mobile-menu { display: none; } }
.mobile-menu ul { list-style: none; padding: 0; margin: 0; }
.mobile-menu > ul > li { border-bottom: 1px solid var(--slate-200); }
.mobile-menu a, .mobile-group-label {
  display: block; padding: var(--sp-4) var(--sp-2); font-family: var(--font-display);
  font-weight: 600; font-size: 1.1rem; color: var(--ink-900); text-decoration: none;
}
.mobile-sublist a { font-family: var(--font-body); font-weight: 500; font-size: 1rem; color: var(--slate-700); padding: var(--sp-3) var(--sp-2) var(--sp-3) var(--sp-5); }
.mobile-menu .mobile-cta { margin-top: var(--sp-5); }
.mobile-menu .mobile-cta .btn { margin-bottom: var(--sp-3); }

/* ---------- Cards ---------- */
.card {
  background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--r-lg);
  padding: var(--sp-6); box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.card-link { text-decoration: none; color: inherit; display: block; }
.card-link:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--blue-100); color: inherit; }
.card-icon {
  width: 52px; height: 52px; border-radius: var(--r-md); display: grid; place-items: center;
  background: var(--blue-100); color: var(--blue-600); margin-bottom: var(--sp-4);
}
.card-icon svg { width: 28px; height: 28px; }
.card h3 { margin-bottom: var(--sp-2); }
.card-arrow { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--sp-4); font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--blue-600); }
.card-link:hover .card-arrow { gap: 10px; }
.card-featured { border-color: var(--blue-500); box-shadow: 0 0 0 1px var(--blue-500), var(--shadow-md); }
.card-featured .card-icon { background: var(--ink-900); color: var(--white); }

.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 640px){ .grid-2 { grid-template-columns: repeat(2,1fr); } .grid-3 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 960px){ .grid-3 { grid-template-columns: repeat(3,1fr); } }

/* ---------- Structured band (was dark; now light structural strip) ---------- */
.on-ink { background: var(--structure); color: var(--ink-700); border-block: 1px solid #d3dbe6; }
.on-ink h1, .on-ink h2, .on-ink h3 { color: var(--ink-900); }
.on-ink .lead { color: var(--slate-500); }
.on-ink .eyebrow { color: var(--blue-600); }

/* True dark anchor — used deliberately and sparingly (e.g. CTA band) */
.on-dark { background: var(--ink-900); color: #CBD5E1; }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--white); }
.on-dark .lead { color: #94A3B8; }
.on-dark .eyebrow { color: var(--blue-500); }

/* ---------- Trust strip ---------- */
.trust-strip { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: center; justify-content: center; }
.trust-item { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 500; font-size: 0.95rem; color: var(--slate-700); }
.trust-item svg { width: 20px; height: 20px; color: var(--blue-600); flex: none; }
.on-ink .trust-item { color: var(--ink-700); }
.on-ink .trust-item svg { color: var(--blue-600); }
.on-dark .trust-item { color: #CBD5E1; }
.on-dark .trust-item svg { color: #4ADE80; }

/* ---------- Floating WhatsApp button ---------- */
.wa-float {
  position: fixed; right: 18px; z-index: 90;
  bottom: calc(var(--stickybar-h) + 18px);
  width: 58px; height: 58px; border-radius: var(--r-full);
  background: #25D366; color: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 22px rgba(37,211,102,.45); transition: transform .2s var(--ease);
}
.wa-float:hover { transform: scale(1.06); color: #fff; }
.wa-float svg { width: 32px; height: 32px; }
@media (min-width: 700px){ .wa-float { bottom: 24px; right: 24px; width: 62px; height: 62px; } }

/* ---------- Sticky mobile contact bar ---------- */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 1px;
  background: var(--slate-200); border-top: 1px solid var(--slate-200);
  height: var(--stickybar-h); padding-bottom: env(safe-area-inset-bottom);
}
.mobile-bar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: var(--white); color: var(--ink-900); text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: 0.72rem; letter-spacing: .01em;
}
.mobile-bar a svg { width: 21px; height: 21px; }
.mobile-bar .mb-quote { background: var(--blue-600); color: var(--white); }
.mobile-bar .mb-wa { color: #128C3E; }
@media (min-width: 700px){ .mobile-bar { display: none; } }

/* Add bottom padding on mobile so content clears the bar */
@media (max-width: 699px){ body { padding-bottom: var(--stickybar-h); } }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink-900); color: #A9BAD4; padding-block: var(--sp-8) var(--sp-6); margin-top: var(--sp-8); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }
@media (min-width: 720px){ .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 960px){ .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.footer-brand .brand-name { color: #fff; }
.footer-col h4 { color: #fff; font-size: 0.98rem; margin-bottom: var(--sp-4); }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: var(--sp-2); }
.footer-col a { color: #A9BAD4; text-decoration: none; font-size: 0.94rem; }
.footer-col a:hover { color: #fff; }
.footer-contact-item { display: flex; gap: var(--sp-3); align-items: flex-start; margin-bottom: var(--sp-3); font-size: 0.94rem; }
.footer-contact-item svg { width: 18px; height: 18px; color: var(--blue-500); flex: none; margin-top: 3px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: var(--sp-7); padding-top: var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; font-size: 0.85rem; color: #7C8CA8; }
.footer-bottom a { color: #7C8CA8; }
.footer-note { font-size: 0.82rem; color: #7C8CA8; margin-top: var(--sp-3); line-height: 1.5; }

/* ---------- Hero (light, structured — Linear/Vercel inspired) ---------- */
.hero { position: relative; overflow: hidden; background: var(--canvas); color: var(--ink-700); padding-block: var(--sp-8) var(--sp-9); }
.hero::before {
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(50% 45% at 80% 0%, rgba(37,99,235,.10), transparent 70%),
    radial-gradient(40% 40% at 0% 100%, rgba(37,99,235,.06), transparent 70%);
}
/* fine grid texture — subtle, premium, not busy */
.hero::after {
  content:""; position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:
    linear-gradient(var(--structure) 1px, transparent 1px),
    linear-gradient(90deg, var(--structure) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 75%);
  mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 75%);
}
.hero .container { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-7); align-items: center; }
@media (min-width: 900px){ .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-8); } }
.hero h1 { color: var(--ink-900); margin-bottom: var(--sp-4); }
.hero h1 .accent { color: var(--blue-600); }
.hero-sub { font-size: var(--step-1); color: var(--slate-500); max-width: 42ch; margin-bottom: var(--sp-6); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.hero-actions .btn { flex: 1 1 auto; min-width: 180px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); }
.hero-trust .trust-item { color: var(--slate-500); font-size: 0.9rem; }
.hero-trust .trust-item svg { color: var(--success-600); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity: 1; transform: none; } }

/* ---------- FAQ ---------- */
.faq-item { border: 1px solid var(--slate-200); border-radius: var(--r-md); background: var(--white); margin-bottom: var(--sp-3); overflow: hidden; }
.faq-item summary {
  list-style: none; cursor: pointer; padding: var(--sp-5); font-family: var(--font-display);
  font-weight: 600; font-size: 1.05rem; color: var(--ink-900); display: flex; justify-content: space-between; gap: var(--sp-4); align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content:"+"; font-size: 1.5rem; color: var(--blue-600); font-weight: 400; flex: none; transition: transform .2s var(--ease); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-body { padding: 0 var(--sp-5) var(--sp-5); color: var(--slate-700); }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { padding-block: var(--sp-4); font-size: 0.85rem; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0; margin: 0; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--slate-500); }
.breadcrumbs li:not(:last-child)::after { content: "/"; color: var(--slate-400); }
.breadcrumbs a { color: var(--slate-500); text-decoration: none; }
.breadcrumbs a:hover { color: var(--blue-600); }

/* ---------- Section headers ---------- */
.section-head { max-width: 640px; margin-bottom: var(--sp-7); }
.section-head.center { margin-inline: auto; }
.section-head .eyebrow { margin-bottom: var(--sp-3); }
.section-head h2 { margin-bottom: var(--sp-3); }

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(135deg, var(--ink-800), var(--ink-900)); border-radius: var(--r-xl); padding: var(--sp-8) var(--sp-6); text-align: center; position: relative; overflow: hidden; }
.cta-band::before { content:""; position:absolute; inset:0; background: radial-gradient(50% 60% at 50% 0%, rgba(37,99,235,.25), transparent 70%); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; margin-bottom: var(--sp-3); }
.cta-band p { color: #B9C8DF; max-width: 46ch; margin: 0 auto var(--sp-6); }
.cta-band .hero-actions { justify-content: center; }

/* ---------- Process steps ---------- */
.steps { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 640px){ .steps { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 960px){ .steps { grid-template-columns: repeat(4,1fr); } }
.step { position: relative; padding-top: var(--sp-6); }
.step-num { font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; color: var(--blue-100); line-height: 1; margin-bottom: var(--sp-2); }
.step h3 { font-size: 1.1rem; margin-bottom: var(--sp-2); }
.step p { font-size: 0.95rem; color: var(--slate-500); }

/* ---------- Utility ---------- */
.visually-hidden { position: absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.text-muted { color: var(--slate-500); }
.mt-6 { margin-top: var(--sp-6); } .mt-4 { margin-top: var(--sp-4); }
.pill { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; background:var(--blue-100); color:var(--ink-700); border-radius:var(--r-full); font-size:0.8rem; font-weight:600; font-family:var(--font-display); }
.pill-amber { background: var(--blue-050); color: var(--blue-700); }

/* ---------- Hero illustration ---------- */
.hero-visual { display: flex; justify-content: center; align-items: center; }
.hero-illustration { width: 100%; max-width: 340px; height: auto; }
@media (max-width: 899px){ .hero-visual { order: -1; max-width: 280px; margin-inline: auto; } .hero-illustration { max-width: 260px; } }

/* Assistant wrapper spacing when embedded */
.quote-assistant { margin-top: var(--sp-4); }

/* ==========================================================================
   Bento layout — varied cell sizes for services / features / why-choose.
   Premium, spacious, not a flat uniform grid.
   ========================================================================== */
.bento { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 720px){ .bento { grid-template-columns: repeat(6, 1fr); gap: var(--sp-5); } }

/* Bento cell = card surface with quiet border + subtle hover lift */
.bento-cell {
  background: var(--white); border: 1px solid var(--structure); border-radius: var(--r-lg);
  padding: var(--sp-6); box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  text-decoration: none; color: inherit; display: flex; flex-direction: column;
}
a.bento-cell:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--blue-100); color: inherit; }
.bento-cell h3 { margin-bottom: var(--sp-2); }
.bento-cell p { color: var(--slate-500); }
.bento-cell .card-arrow { margin-top: auto; padding-top: var(--sp-4); }

/* Column spans (desktop) */
@media (min-width: 720px){
  .bento-6 { grid-column: span 6; }
  .bento-4 { grid-column: span 4; }
  .bento-3 { grid-column: span 3; }
  .bento-2 { grid-column: span 2; }
}

/* Feature cell — the large hero cell in a bento block (accent-tinted) */
.bento-feature {
  background:
    radial-gradient(120% 100% at 100% 0%, var(--blue-050), transparent 60%),
    var(--white);
  border-color: var(--blue-100);
}
.bento-feature .bento-kicker { color: var(--blue-700); }

/* Dark bento cell — used sparingly for a single anchor stat/trust cell */
.bento-dark { background: var(--ink-900); border-color: var(--ink-800); color: #CBD5E1; }
.bento-dark h3 { color: #fff; }
.bento-dark p { color: #94A3B8; }
.bento-kicker {
  font-family: var(--font-display); font-size: var(--step--1); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--slate-400); margin-bottom: var(--sp-3);
}

/* Bento icon chip */
.bento-cell .card-icon { margin-bottom: var(--sp-4); }

/* ==========================================================================
   Forced-colors / Windows High Contrast support.
   Ensure interactive elements keep visible boundaries and the primary CTA
   stays distinguishable when the OS overrides colours.
   ========================================================================== */
@media (forced-colors: active) {
  .btn, .btn-quote, .btn-outline, .btn-whatsapp,
  .card, .bento-cell, .faq-item, .input, .select, .textarea,
  .q-choice, .quote-shell, .mobile-bar a, .nav-toggle {
    border: 1px solid ButtonBorder;
  }
  .btn-quote { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: HighlightText; }
  .card-icon, .bento-cell .card-icon { forced-color-adjust: none; }
  a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
  .input:focus-visible, .select:focus-visible, .textarea:focus-visible {
    outline: 2px solid Highlight; outline-offset: 2px;
  }
  /* ensure the WhatsApp/CTA icons remain visible */
  .wa-float { border: 1px solid ButtonBorder; }
}