/* =================================================================
   QDOS Accident Assistance — Body Shop Landing Page
   Design system ported from the approved Claude Design, refined to
   production standard (Codebreak / impeccable pass).
   ================================================================= */

/* ---- Self-hosted fonts (latin, variable where possible) ---------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;            /* variable weight axis */
  font-display: swap;
  src: url('fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/sourcesans3-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Tokens ------------------------------------------------------ */
:root {
  /* Brand red */
  --red-50:#fdf2f2; --red-100:#fadddd; --red-200:#f3b4b4; --red-300:#e88080;
  --red-400:#d84444; --red-500:#c00000; --red-600:#a40000; --red-700:#850000;
  --red-800:#690000; --red-900:#4a0000;
  /* Neutral grey */
  --gray-0:#ffffff; --gray-50:#f7f7f8; --gray-100:#eff0f1; --gray-200:#e1e3e5;
  --gray-300:#c9ccd0; --gray-400:#9ea2a8; --gray-500:#6b7077; --gray-600:#565b61;
  --gray-700:#3f4347; --gray-800:#2a2d30; --gray-900:#17191b;
  --green-50:#eef8f1; --green-500:#1f8a4c; --green-600:#16713d;

  --brand:var(--red-500); --brand-hover:var(--red-600); --brand-active:var(--red-700);
  --brand-subtle:var(--red-50); --brand-on:var(--gray-0);

  --text-strong:var(--gray-900); --text-body:var(--gray-700); --text-muted:var(--gray-500);
  --text-link:var(--red-600);

  --surface-page:var(--gray-50); --surface-card:var(--gray-0);
  --surface-sunken:var(--gray-100); --surface-inverse:var(--gray-900);

  --border-subtle:var(--gray-200); --border-default:var(--gray-300); --border-strong:var(--gray-400);
  --divider:var(--gray-200);

  --success:var(--green-500); --success-subtle:var(--green-50);
  --focus-ring:color-mix(in srgb, var(--red-500) 45%, transparent);

  /* Type */
  --font-display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --font-body:'Source Sans 3','Helvetica Neue',Arial,sans-serif;

  /* Radii */
  --radius-xs:3px; --radius-sm:5px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-pill:999px;

  /* Shadows — soft, neutral */
  --shadow-xs:0 1px 2px rgba(23,25,27,.06);
  --shadow-sm:0 1px 3px rgba(23,25,27,.08),0 1px 2px rgba(23,25,27,.04);
  --shadow-md:0 4px 12px rgba(23,25,27,.08),0 1px 3px rgba(23,25,27,.05);
  --shadow-lg:0 12px 28px rgba(23,25,27,.12),0 4px 8px rgba(23,25,27,.05);
  --shadow-focus:0 0 0 3px var(--focus-ring);

  /* Motion */
  --ease-out:cubic-bezier(0,0,.2,1);
  --ease-standard:cubic-bezier(.2,0,.2,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms;

  /* Layering */
  --z-sticky:100; --z-bar:200; --z-overlay:800;

  --container:1180px;
  --section-pad:clamp(64px,9vw,104px) clamp(18px,4vw,32px);
}

/* ---- Reset / base ----------------------------------------------- */
*,*::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; } }
body {
  font-family:var(--font-body);
  color:var(--text-body);
  background:var(--surface-card);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img { display:block; max-width:100%; height:auto; }
a { color:var(--text-link); }
h1,h2,h3 { font-family:var(--font-display); color:var(--text-strong); text-wrap:balance; }
p { text-wrap:pretty; }
:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:var(--radius-xs); }
::selection { background:var(--red-100); color:var(--red-900); }

/* Skip link */
.skip-link {
  position:absolute; left:12px; top:-60px; z-index:1000;
  background:var(--gray-900); color:#fff; padding:10px 16px; border-radius:var(--radius-sm);
  font-weight:600; text-decoration:none; transition:top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top:12px; }

/* ---- Layout helpers --------------------------------------------- */
.container { max-width:var(--container); margin-inline:auto; padding-inline:clamp(18px,4vw,32px); }
.section { padding:var(--section-pad); }
.eyebrow {
  display:inline-block; font-family:var(--font-body); font-weight:700;
  font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:var(--brand);
}

/* ---- Buttons ----------------------------------------------------- */
.btn {
  --bg:var(--brand); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-display); font-weight:800; line-height:1;
  text-decoration:none; cursor:pointer; border:0; border-radius:var(--radius-md);
  background:var(--bg); color:var(--fg); white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-standard),
             transform var(--dur-fast) var(--ease-standard),
             box-shadow var(--dur-fast) var(--ease-standard);
}
.btn:hover { background:var(--brand-hover); }
.btn:active { background:var(--brand-active); transform:translateY(1px); }
.btn--md { padding:0 20px; height:44px; font-size:15px; }
.btn--lg { padding:0 26px; height:56px; font-size:17px; }
.btn--block { width:100%; }
.btn--ghost-light {
  --bg:transparent; --fg:#fff; border:1.5px solid rgba(255,255,255,.5);
}
.btn--ghost-light:hover { --bg:rgba(255,255,255,.08); background:rgba(255,255,255,.08); border-color:#fff; }

/* ---- Header ------------------------------------------------------ */
.site-header {
  position:sticky; top:0; z-index:var(--z-sticky);
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(8px);
  -webkit-backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--border-subtle);
}
.site-header__inner {
  max-width:var(--container); margin-inline:auto;
  padding:13px clamp(18px,4vw,32px);
  display:flex; align-items:center; gap:20px;
}
.site-header__logo { height:34px; width:auto; flex:none; }
.site-header__spacer { flex:1; }
.header-phone {
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  color:var(--text-strong); font-family:var(--font-display); font-weight:800;
  font-size:17px; white-space:nowrap;
}
.header-phone svg { flex:none; }
@media (max-width:560px){
  .header-phone span { display:none; }        /* keep the dial icon as a tap target */
  /* The persistent sticky bottom bar carries the CTA on small screens,
     so the header button is hidden to avoid overflow and clutter. */
  .site-header .btn { display:none; }
}

/* ---- Hero -------------------------------------------------------- */
.hero { position:relative; background:var(--gray-900); overflow:hidden; isolation:isolate; }
.hero__img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 42%; opacity:.44; z-index:-2;
}
.hero__scrim {
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,rgba(18,20,22,.95) 0%,rgba(18,20,22,.82) 42%,rgba(18,20,22,.42) 100%);
}
.hero__inner { max-width:var(--container); margin-inline:auto; padding:clamp(72px,10vw,116px) clamp(18px,4vw,32px) clamp(64px,8vw,100px); }
.hero__content { max-width:700px; }
.hero .eyebrow { color:var(--red-300); }
.hero h1 {
  font-weight:800; font-size:clamp(38px,5.4vw,64px); line-height:1.04;
  letter-spacing:-.02em; color:#fff; margin:18px 0 22px;
}
.hero__sub { font-size:clamp(17px,2vw,21px); line-height:1.62; color:rgba(255,255,255,.86); margin:0 0 18px; max-width:610px; }
.hero__points { list-style:none; padding:0; margin:0 0 34px; display:flex; flex-direction:column; gap:10px; max-width:610px; }
.hero__points li { display:flex; align-items:flex-start; gap:11px; font-size:clamp(16px,1.9vw,19px); line-height:1.45; color:rgba(255,255,255,.9); }
.hero__points svg { flex:none; margin-top:3px; }
.hero__points strong { color:#fff; }
.hero__trust { display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:30px; }
.trust-item { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:rgba(255,255,255,.82); }
.trust-item svg { flex:none; }

/* ---- Proof band -------------------------------------------------- */
.proof-band { background:var(--brand); }
.proof-band__inner {
  max-width:var(--container); margin-inline:auto; padding:26px clamp(18px,4vw,32px);
  display:flex; gap:24px 56px; flex-wrap:wrap; align-items:center; justify-content:space-between;
}
.stat { color:#fff; }
.stat__value { font-family:var(--font-display); font-weight:800; font-size:clamp(26px,3vw,34px); line-height:1; letter-spacing:-.01em; }
.stat__label { font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.8); margin-top:6px; }

/* ---- Generic section heading ------------------------------------ */
.section h2 {
  font-weight:800; font-size:clamp(28px,3.8vw,44px); line-height:1.1;
  letter-spacing:-.02em; color:var(--text-strong);
}
.lede { font-size:18px; line-height:1.72; color:var(--text-body); }
.measure { max-width:680px; }

/* ---- Problem ----------------------------------------------------- */
.problem { background:var(--gray-0); }
.problem h2 { margin:0 0 28px; max-width:760px; }
.problem__intro { max-width:680px; }
.problem__intro p { font-size:18px; line-height:1.72; margin-bottom:20px; }
.options { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; margin:8px 0 30px; }
.option {
  background:var(--gray-50); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); padding:26px;
}
.option__label { font-family:var(--font-display); font-weight:800; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:10px; }
.option p { font-size:17px; line-height:1.6; }
.option strong { color:var(--text-strong); }
.third-option {
  background:var(--gray-900); border-radius:var(--radius-lg); padding:30px 32px; max-width:760px;
}
.third-option__tag {
  display:inline-block; font-family:var(--font-display); font-weight:800; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; color:#fff;
  background:var(--brand); padding:5px 12px; border-radius:var(--radius-pill); margin-bottom:16px;
}
.third-option p { font-size:clamp(18px,2.2vw,22px); line-height:1.5; color:#fff; font-weight:500; }
.third-option .hl { color:var(--red-300); font-weight:700; }

/* ---- Solution ---------------------------------------------------- */
.solution { background:var(--gray-50); }
.solution__grid {
  max-width:var(--container); margin-inline:auto;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(36px,5vw,72px); align-items:center;
}
.solution h2 { margin:0 0 24px; }
.solution p { font-size:18px; line-height:1.72; margin-bottom:18px; }
.callout-strip {
  display:inline-flex; align-items:center; gap:12px; background:var(--brand-subtle);
  border-radius:var(--radius-md); padding:14px 18px; margin-top:8px;
}
.callout-strip svg { flex:none; }
.callout-strip span { font-family:var(--font-display); font-weight:800; font-size:clamp(18px,2.2vw,21px); color:var(--text-strong); }
.solution__media { border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); border:1px solid var(--border-subtle); }
.solution__media img { width:100%; height:100%; max-height:460px; object-fit:cover; }

/* ---- Benefits (editorial list, not a card grid) ----------------- */
.benefits { background:var(--gray-0); }
.benefits__head { max-width:720px; margin-bottom:8px; }
.benefits__list {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:0 56px; margin-top:20px;
}
.benefit {
  display:flex; gap:18px; padding:28px 0; border-top:1px solid var(--border-subtle);
}
.benefit__icon {
  flex:none; width:44px; height:44px; border-radius:var(--radius-md);
  background:var(--brand-subtle); color:var(--brand);
  display:flex; align-items:center; justify-content:center;
}
.benefit__icon svg { width:24px; height:24px; }
.benefit h3 { font-weight:700; font-size:21px; margin:2px 0 8px; }
.benefit p { font-size:16px; line-height:1.62; }

/* ---- Offer ------------------------------------------------------- */
.offer { background:var(--gray-900); position:relative; overflow:hidden; }
.offer__glow { position:absolute; top:-120px; right:-120px; width:380px; height:380px; border-radius:50%; background:rgba(192,0,0,.16); filter:blur(20px); }
.offer__inner { position:relative; max-width:760px; margin-inline:auto; text-align:center; }
.offer .eyebrow { color:var(--red-300); }
.offer h2 { color:#fff; margin:14px 0 12px; }
.offer__sub { font-size:18px; line-height:1.6; color:rgba(255,255,255,.72); max-width:520px; margin:0 auto 36px; }
.offer__items { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; text-align:left; margin-bottom:38px; }
.offer__item {
  display:flex; align-items:flex-start; gap:14px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-md); padding:20px 22px;
}
.offer__item svg { flex:none; margin-top:1px; }
.offer__item span { font-size:16.5px; line-height:1.5; color:#fff; }
.offer__note { font-size:15px; color:rgba(255,255,255,.66); margin-bottom:30px; }

/* ---- How it works (ordered steps — numbering is meaningful) ----- */
.how { background:var(--gray-0); }
.how__head { max-width:720px; margin-bottom:48px; }
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; list-style:none; padding:0; margin:0; }
.step {
  background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:30px;
}
.step__num { font-family:var(--font-display); font-weight:900; font-size:52px; line-height:1; color:var(--gray-200); }
.step h3 { font-weight:700; font-size:20px; margin:28px 0 10px; }
.step p { font-size:15.5px; line-height:1.6; }
.step--first { background:var(--brand); border-color:transparent; color:#fff; }
.step--first .step__num { color:rgba(255,255,255,.42); }
.step--first h3 { color:#fff; margin-top:14px; }
.step--first p { color:rgba(255,255,255,.9); }
.step__tag { display:inline-block; background:rgba(255,255,255,.2); border-radius:var(--radius-pill); padding:4px 12px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin:14px 0 0; }

/* ---- Why QDOS ---------------------------------------------------- */
.why { background:var(--gray-50); }
.why__grid { max-width:var(--container); margin-inline:auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(36px,5vw,64px); }
.why h2 { margin:0 0 22px; }
.why p { font-size:18px; line-height:1.72; margin-bottom:18px; }
.chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.chip {
  display:inline-flex; align-items:center; gap:8px; background:var(--surface-card);
  border:1px solid var(--border-subtle); border-radius:var(--radius-pill);
  padding:8px 16px; font-size:14px; font-weight:600; color:var(--text-strong);
}
.chip::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--brand); }
.why__aside { display:flex; flex-direction:column; gap:18px; justify-content:center; }
.testimonial {
  background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:34px;
}
.testimonial__mark { color:var(--red-200); margin-bottom:6px; }
.testimonial blockquote { font-family:var(--font-display); font-weight:500; font-size:clamp(19px,2.4vw,24px); line-height:1.4; color:var(--text-strong); margin:0 0 20px; }
.testimonial figcaption { font-size:15px; font-weight:700; color:var(--text-strong); }
.testimonial__link { display:inline-block; margin-top:12px; font-size:15px; font-weight:600; color:var(--text-link); text-decoration:none; }
.testimonial__link:hover { text-decoration:underline; }

/* ---- FAQ --------------------------------------------------------- */
.faq { background:var(--gray-0); }
.faq__inner { max-width:840px; margin-inline:auto; }
.faq__head { margin-bottom:40px; }
.faq__list { border-top:1px solid var(--border-subtle); }
.faq__item { border-bottom:1px solid var(--border-subtle); }
.faq__item summary {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 4px; cursor:pointer; list-style:none;
}
.faq__item summary::-webkit-details-marker { display:none; }
.faq__q { font-family:var(--font-display); font-weight:700; font-size:clamp(17px,2vw,20px); color:var(--text-strong); }
.faq__chev { flex:none; color:var(--brand); transition:transform var(--dur-base) var(--ease-standard); }
.faq__item[open] .faq__chev { transform:rotate(180deg); }
.faq__item[open] .faq__q { color:var(--brand); }
.faq__a { margin:0; padding:0 4px 24px; font-size:16.5px; line-height:1.68; color:var(--text-body); }
@media (prefers-reduced-motion:reduce){ .faq__chev{ transition:none; } }

/* ---- Enquiry / final CTA ---------------------------------------- */
.enquire { background:var(--gray-900); position:relative; overflow:hidden; isolation:isolate; }
.enquire__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.16; z-index:-2; }
.enquire__scrim { position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(18,20,22,.96) 0%,rgba(18,20,22,.86) 55%,rgba(18,20,22,.78) 100%); }
.enquire__grid { position:relative; max-width:1080px; margin-inline:auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(36px,5vw,64px); align-items:center; }
.enquire .eyebrow { color:var(--red-300); }
.enquire h2 { color:#fff; font-size:clamp(30px,4vw,46px); line-height:1.08; letter-spacing:-.02em; margin:14px 0 20px; }
.enquire__lead { font-size:18px; line-height:1.62; color:rgba(255,255,255,.84); max-width:460px; margin:0 0 28px; }
.enquire__phones { border-top:1px solid rgba(255,255,255,.16); padding-top:24px; }
.phone-cta { display:inline-flex; align-items:center; gap:13px; text-decoration:none; }
.phone-cta__icon { width:46px; height:46px; flex:none; border-radius:var(--radius-pill); background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; }
.phone-cta__label { font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.phone-cta__num { font-family:var(--font-display); font-weight:800; font-size:22px; color:#fff; }
.enquire__office { margin-top:14px; font-size:14px; color:rgba(255,255,255,.62); }
.enquire__office a { color:rgba(255,255,255,.88); text-decoration:none; font-weight:600; }

.lead-card { background:var(--surface-card); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:clamp(26px,3vw,38px); }
.lead-form { display:flex; flex-direction:column; gap:18px; }
.lead-form h3 { font-weight:800; font-size:22px; margin:0 0 4px; }
.lead-form__intro { font-size:14.5px; line-height:1.5; color:var(--text-muted); }
.field { display:flex; flex-direction:column; gap:6px; }
.field > span { font-size:14px; font-weight:600; color:var(--text-strong); }
.field .req { color:var(--brand); }
.field input {
  border:1px solid var(--border-default); border-radius:var(--radius-sm);
  padding:12px 13px; font-family:var(--font-body); font-size:16px; color:var(--text-strong);
  box-shadow:var(--shadow-xs); outline:none; background:#fff;
  transition:border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.field input:focus { border-color:var(--brand); box-shadow:var(--shadow-focus); }
.field input:user-invalid { border-color:var(--red-500); }
.field__error { font-size:13px; font-weight:600; color:var(--red-600); min-height:0; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.lead-form__fineprint { font-size:12.5px; line-height:1.5; color:var(--text-muted); text-align:center; margin:0; }
.lead-form__fineprint a { color:var(--text-link); }
.lead-success { display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; padding:18px 4px; }
.lead-success__badge { width:64px; height:64px; flex:none; border-radius:50%; background:var(--success-subtle); display:flex; align-items:center; justify-content:center; }
.lead-success h3 { font-weight:800; font-size:24px; margin:0; }
.lead-success p { font-size:16px; line-height:1.6; color:var(--text-body); max-width:300px; }
.lead-success a { color:var(--text-link); text-decoration:none; font-weight:600; white-space:nowrap; }
[hidden] { display:none !important; }

/* ---- Footer ------------------------------------------------------ */
.site-footer { background:var(--gray-900); border-top:1px solid rgba(255,255,255,.08); padding:48px clamp(18px,4vw,32px) 40px; }
.site-footer__inner { max-width:1080px; margin-inline:auto; }
.site-footer__top { display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between; align-items:flex-start; padding-bottom:30px; border-bottom:1px solid rgba(255,255,255,.1); }
.site-footer__logo { height:34px; width:auto; margin-bottom:14px; }
.site-footer__about { max-width:380px; font-size:14px; line-height:1.65; color:rgba(255,255,255,.66); }
.site-footer__contact { display:flex; flex-direction:column; gap:10px; font-size:14px; color:rgba(255,255,255,.78); }
.site-footer__contact > div { display:flex; align-items:flex-start; gap:9px; }
.site-footer__contact svg { flex:none; margin-top:2px; }
.site-footer__contact a { color:rgba(255,255,255,.88); text-decoration:none; }
.site-footer__contact a:hover { text-decoration:underline; }
.site-footer__legal { padding-top:24px; display:flex; flex-wrap:wrap; gap:14px 24px; justify-content:space-between; align-items:center; }
.site-footer__legal p { font-size:12.5px; line-height:1.6; color:rgba(255,255,255,.58); max-width:680px; }
.site-footer__copy { font-size:12.5px; color:rgba(255,255,255,.58); white-space:nowrap; }

/* ---- Sticky mobile CTA bar -------------------------------------- */
.mobile-bar {
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-bar);
  display:none; gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-top:1px solid var(--border-subtle); box-shadow:0 -4px 16px rgba(23,25,27,.08);
  transform:translateY(110%); transition:transform var(--dur-base) var(--ease-out);
}
.mobile-bar.is-visible { transform:none; }
.mobile-bar .btn { flex:1; }
.mobile-bar .btn--call { --bg:var(--gray-100); --fg:var(--text-strong); }
.mobile-bar .btn--call:hover { background:var(--gray-200); }
@media (max-width:680px){
  .mobile-bar { display:flex; }
  body.has-mobile-bar { padding-bottom:74px; }
}
@media (prefers-reduced-motion:reduce){ .mobile-bar{ transition:none; } }

/* ---- Reveal on scroll (progressive enhancement) ----------------- */
.js .reveal { opacity:0; transform:translateY(14px); transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.js .reveal.is-in { opacity:1; transform:none; }
.js .reveal[data-delay="1"]{ transition-delay:60ms; }
.js .reveal[data-delay="2"]{ transition-delay:120ms; }
.js .reveal[data-delay="3"]{ transition-delay:180ms; }
.js .reveal[data-delay="4"]{ transition-delay:240ms; }
@media (prefers-reduced-motion:reduce){
  .js .reveal { opacity:1; transform:none; transition:none; }
}

/* ---- Legal / prose pages (privacy notice) ----------------------- */
.legal-header { border-bottom:1px solid var(--border-subtle); }
.legal-header__inner { max-width:var(--container); margin-inline:auto; padding:14px clamp(18px,4vw,32px); display:flex; align-items:center; gap:16px; }
.legal-header__logo { height:32px; width:auto; }
.legal-back { margin-left:auto; font-size:14px; font-weight:600; color:var(--text-link); text-decoration:none; }
.legal-back:hover { text-decoration:underline; }
.legal { max-width:760px; margin-inline:auto; padding:clamp(40px,6vw,72px) clamp(18px,4vw,32px); }
.legal h1 { font-size:clamp(30px,4vw,44px); line-height:1.1; letter-spacing:-.02em; margin-bottom:10px; }
.legal__updated { color:var(--text-muted); font-size:14px; margin-bottom:32px; }
.legal h2 { font-size:clamp(20px,2.4vw,26px); line-height:1.2; margin:36px 0 12px; }
.legal p, .legal li { font-size:16.5px; line-height:1.7; color:var(--text-body); }
.legal p { margin-bottom:14px; }
.legal ul { margin:0 0 14px; padding-left:22px; }
.legal li { margin-bottom:6px; }
.legal a { color:var(--text-link); }
.legal strong { color:var(--text-strong); }

/* ---- Responsive tweaks ------------------------------------------ */
@media (max-width:680px){
  .solution__grid { gap:36px; }
  .benefits__list { gap:0; }
  .testimonial { padding:26px; }
}