/* ==========================================================================
   Synergy Autocentres — Employee Scheme
   employee.synergylincoln.co.uk

   Written mobile-first. Desktop values are the handoff's design tokens,
   reproduced verbatim; the small-screen steps are additive (the handoff
   contained no mobile comps, so those sizes are judgement calls).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — self-hosted woff2 (variable). No third-party requests, so no
   extra DNS/TLS round trips on mobile and nothing leaves the visitor's
   browser to Google. latin-ext only downloads if the page needs a glyph.
   -------------------------------------------------------------------------- */
@font-face{font-family:Montserrat;font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/montserrat-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Montserrat;font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/montserrat-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/nunito-sans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/nunito-sans-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* --------------------------------------------------------------------------
   2. Design tokens — from design_handoff_employee_scheme/tokens/*.css
   -------------------------------------------------------------------------- */
:root{
  /* Brand */
  --navy-900:#0e1a2f; --navy-800:#14233d; --navy-700:#1d3252; --slate-900:#20333e;
  --cyan-500:#29bdef; --cyan-600:#159fd1; --cyan-100:#dff4fc; --cyan-50:#f0fafe;
  /* Neutrals */
  --grey-900:#1b2530; --grey-700:#3d4a57; --grey-500:#68737f; --grey-300:#c3ccd4;
  --grey-200:#dde3e8; --grey-100:#eef1f4; --grey-50:#f7f9fa; --white:#fff;
  /* Status */
  --green-600:#1e9e5a; --green-100:#e2f6ea; --amber-600:#d98a00; --amber-100:#fdf1d9;
  --red-600:#d63b3b; --red-100:#fbe5e5;
  /* Semantic aliases */
  --brand-primary:var(--navy-900); --brand-accent:var(--cyan-500);
  --text-heading:var(--navy-900); --text-body:var(--grey-700); --text-muted:var(--grey-500);
  --text-inverse:var(--white); --text-link:var(--cyan-on-light);
  --surface-page:var(--white); --surface-subtle:var(--grey-50); --surface-card:var(--white);
  --surface-dark:var(--navy-900); --surface-accent-tint:var(--cyan-50);
  --border-default:var(--grey-200); --border-strong:var(--grey-300); --focus-ring:var(--cyan-500);

  /* Type */
  --font-display:Montserrat,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --text-display:800 clamp(34px,4vw,52px)/1.08 var(--font-display);
  --text-h1:800 34px/1.15 var(--font-display);
  --text-h2:700 26px/1.2 var(--font-display);
  --text-h3:700 20px/1.3 var(--font-display);
  --text-eyebrow:700 13px/1.2 var(--font-display);
  --text-body-lg:400 18px/1.6 var(--font-body);
  --text-body-md:400 16px/1.6 var(--font-body);
  --text-body-sm:400 14px/1.5 var(--font-body);
  --text-label:700 14px/1.2 var(--font-body);
  --text-caption:600 12px/1.4 var(--font-body);
  --tracking-eyebrow:.12em; --tracking-display:.01em;

  /* Space */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
  --container-max:1140px; --gutter:24px;

  /* Effects */
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-pill:999px;
  --shadow-card:0 1px 3px rgba(14,26,47,.08),0 4px 14px rgba(14,26,47,.06);
  --shadow-raised:0 6px 24px rgba(14,26,47,.14);
  --shadow-focus:0 0 0 3px rgba(41,189,239,.35);
  --border-card:1px solid var(--border-default);
  --ease-standard:cubic-bezier(.2,.6,.2,1);
  --dur-fast:120ms; --dur-med:220ms;

  /* Layout */
  --nav-h:64px;
  --section-y:56px;

  /* ------------------------------------------------------------------
     Cyan as small text on light backgrounds.

     The handoff specified --cyan-600 (#159fd1) here, but at these text
     sizes it falls below WCAG AA: 3.04:1 on white and 2.88:1 on grey-50
     for the eyebrows and footer links, and 2.67:1 for the badge, against
     a 4.5:1 requirement. Signed off as a deliberate change from the
     handoff colours.

     #0d7ba3 is 4.80:1 on white and 4.53:1 on grey-50; the badge uses navy
     on the cyan-100 tint. Every other brand colour is untouched — cyan-500
     still carries the buttons, icons and the dark-section eyebrows.
     ------------------------------------------------------------------ */
  --cyan-on-light:#0d7ba3;
  --badge-text:var(--navy-900);
  /* The handoff's original values, kept for reference. They are 3.04:1 on
     white (2.67:1 for the badge) and do not meet AA at these text sizes:
  --cyan-on-light:var(--cyan-600);
  --badge-text:var(--cyan-600);
  */
  --eyebrow-on-light:var(--cyan-on-light);
}

/* Small-screen type step-down (not in the handoff — no mobile comps supplied) */
@media (max-width:599px){
  :root{
    --text-display:800 clamp(29px,8vw,34px)/1.12 var(--font-display);
    --text-h1:800 27px/1.2 var(--font-display);
    --text-h3:700 18px/1.35 var(--font-display);
    --text-body-lg:400 17px/1.6 var(--font-body);
    --gutter:20px; --section-y:44px;
  }
}
@media (min-width:900px){ :root{ --nav-h:72px; --section-y:72px; } }

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font:var(--text-body-md);color:var(--text-body);background:var(--surface-page);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-wrap:break-word;-webkit-tap-highlight-color:rgba(41,189,239,.18);
}
h1,h2,h3,h4{color:var(--text-heading);margin:0;letter-spacing:var(--tracking-display)}
p,figure,blockquote{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--text-link);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit}
::selection{background:var(--cyan-100);color:var(--navy-900)}

:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-sm)}
.on-dark :focus-visible{outline-color:#fff}

/* Anchor targets clear the sticky nav */
[id]{scroll-margin-top:calc(var(--nav-h) + 12px)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--navy-900);color:#fff;padding:14px 18px;border-radius:0 0 var(--radius-md) 0;min-height:44px;
  font:var(--text-label)
}
.skip:focus{left:0;text-decoration:none}

.wrap{max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter);width:100%}
.section{padding-block:var(--section-y)}
.section--subtle{background:var(--surface-subtle)}
.section--dark{background:var(--surface-dark)}
.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}

.eyebrow{
  font:var(--text-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--eyebrow-on-light);margin:0
}
.on-dark .eyebrow,.eyebrow--dark{color:var(--cyan-500)}
/* ...but a white card inside a dark section is a light context again. */
.on-dark .card .eyebrow{color:var(--eyebrow-on-light)}

.icon{width:20px;height:20px;flex:none;display:block;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon--24{width:24px;height:24px}
.icon--18{width:18px;height:18px}
.icon--22{width:22px;height:22px}
.icon--16{width:16px;height:16px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* --------------------------------------------------------------------------
   4. Components
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:700 14px/1.2 var(--font-body);padding:11px 22px;border-radius:var(--radius-pill);
  border:1px solid transparent;cursor:pointer;text-align:center;text-decoration:none;
  min-height:44px; /* touch target */
  transition:background var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard),
             transform var(--dur-fast) var(--ease-standard);
}
.btn:hover{text-decoration:none}
.btn--sm{font-size:13px;padding:8px 16px;min-height:40px}
.btn--lg{font-size:16px;padding:14px 28px;min-height:52px}
.btn--block{width:100%}
.btn--primary{background:var(--navy-900);color:#fff}
.btn--primary:hover{background:var(--navy-700);color:#fff}
.btn--accent{background:var(--cyan-500);color:var(--navy-900)}
.btn--accent:hover{background:var(--cyan-600);color:var(--navy-900)}
.btn--secondary{background:#fff;color:var(--navy-900);border-color:var(--grey-300)}
.btn--secondary:hover{background:var(--grey-50);border-color:var(--grey-500);color:var(--navy-900)}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn[aria-busy="true"]{cursor:not-allowed;opacity:.72}

.card{
  background:var(--surface-card);border:var(--border-card);border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);padding:24px;
  transition:box-shadow var(--dur-med) var(--ease-standard),transform var(--dur-med) var(--ease-standard);
}
.card--hover:hover{box-shadow:var(--shadow-raised)}
.card--lg{border-radius:var(--radius-lg);padding:28px}

.badge{
  font:var(--text-caption);font-weight:700;padding:5px 12px;border-radius:var(--radius-pill);
  display:inline-block;background:var(--cyan-100);color:var(--badge-text)
}

.grid{display:grid;gap:20px}

/* Rating stars */
.stars{display:flex;gap:2px;color:var(--amber-600)}
.stars svg{width:16px;height:16px;fill:currentColor;stroke:none}

/* --------------------------------------------------------------------------
   5. Nav
   -------------------------------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--grey-200);
}
.nav__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;height:var(--nav-h)}
.nav__logo{display:flex;align-items:center;flex:none;min-height:44px}
.nav__logo img{height:34px;width:auto}
.nav__links{display:none}
.nav__links a{color:var(--navy-900);text-decoration:none}
.nav__actions{display:flex;align-items:center;gap:8px}
.nav__tel{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:var(--text-label);color:var(--navy-900);text-decoration:none;
  min-width:44px;min-height:44px;border-radius:var(--radius-pill)
}
.nav__tel:hover{text-decoration:none;background:var(--grey-100);color:var(--navy-900)}
.nav__tel span{display:none}
.nav__cta{display:none}
.nav__toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:1px solid var(--grey-200);background:#fff;
  border-radius:var(--radius-sm);cursor:pointer;color:var(--navy-900)
}
.nav__toggle:hover{background:var(--grey-50)}
.nav__toggle .icon--close{display:none}
.nav__toggle[aria-expanded="true"] .icon--open{display:none}
.nav__toggle[aria-expanded="true"] .icon--close{display:block}

.nav__panel{
  display:none;border-top:1px solid var(--grey-200);background:#fff;
  max-height:calc(100dvh - var(--nav-h));overflow-y:auto;overscroll-behavior:contain
}
.nav__panel[data-open="true"]{display:block}
.nav__panel ul{list-style:none;margin:0;padding:8px 0 4px}
.nav__panel a.nav__panel-link{
  display:flex;align-items:center;min-height:52px;padding:0 4px;
  font:600 17px/1.3 var(--font-body);color:var(--navy-900);text-decoration:none;
  border-bottom:1px solid var(--grey-100)
}
.nav__panel a.nav__panel-link:hover{color:var(--cyan-600);text-decoration:none}
.nav__panel-foot{padding:16px 0 20px;display:grid;gap:10px}

@media (min-width:1000px){
  .nav__logo img{height:44px}
  .nav__links{
    display:flex;gap:26px;font:var(--text-label);
    position:absolute;left:50%;transform:translateX(-50%)
  }
  .nav__bar{position:relative}
  .nav__links a:hover{color:var(--cyan-600);text-decoration:none}
  .nav__tel{padding:0 10px}
  .nav__tel span{display:inline}
  .nav__cta{display:inline-flex}
  .nav__toggle{display:none}
  .nav__panel{display:none!important}
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero{background:var(--surface-dark);color:#fff;padding-block:var(--section-y)}
.hero__grid{display:grid;gap:32px;align-items:center}
.hero h1{font:var(--text-display);color:#fff;margin:14px 0 0;max-width:16ch}
.hero__lede{font:var(--text-body-lg);color:var(--grey-300);margin:18px 0 26px;max-width:56ch}
.hero__ctas{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.hero__jump{
  display:inline-flex;gap:6px;align-items:center;min-height:44px;
  font:var(--text-label);color:#fff;text-decoration:none
}
.hero__jump:hover{color:#fff;text-decoration:underline}
.hero__meta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:28px}
.hero__meta-note{font:var(--text-body-sm);color:var(--grey-300)}

.glance{color:var(--navy-900)}
.glance .eyebrow{margin-bottom:10px}
.glance ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.glance li{display:flex;gap:12px;align-items:flex-start;font:var(--text-body-md);color:var(--navy-900)}
.glance li svg{color:var(--cyan-600);margin-top:3px}

@media (min-width:900px){
  .hero{padding-block:76px}
  .hero__grid{grid-template-columns:1.15fr .85fr;gap:48px}
}

/* --------------------------------------------------------------------------
   7. Offers / Eligibility
   -------------------------------------------------------------------------- */
.section__head{max-width:70ch}
.section__head h2{font:var(--text-h1);margin:10px 0 8px}
.section__head p{font:var(--text-body-md);max-width:60ch}
.section__head--mb{margin-bottom:28px}

.cards{display:grid;gap:16px;margin-top:28px}
@media (min-width:600px){.cards{grid-template-columns:repeat(2,1fr);gap:20px}}
@media (min-width:900px){.cards{grid-template-columns:repeat(3,1fr)}}

.offer__icon{
  display:flex;width:44px;height:44px;align-items:center;justify-content:center;
  border-radius:var(--radius-pill);background:var(--navy-900);margin-bottom:14px;color:var(--cyan-500)
}
.card h3{font:var(--text-h3);margin:0 0 6px}
.card p{font:var(--text-body-sm);margin:0}
.elig__icon{color:var(--cyan-600)}
.elig h3{margin:12px 0 6px}

/* --------------------------------------------------------------------------
   8. Why Synergy
   -------------------------------------------------------------------------- */
.why__grid{display:grid;gap:32px;align-items:center}
.why h2{font:var(--text-h1);color:#fff;margin:10px 0 14px}
.why__body{font:var(--text-body-md);color:var(--grey-300);margin:0 0 20px;max-width:52ch}
.why__hiq{
  display:flex;gap:14px;align-items:center;background:#fff;border-radius:var(--radius-md);
  padding:12px 16px;width:fit-content;max-width:100%
}
.why__hiq img{height:44px;width:auto;flex:none}
.why__hiq span{font:var(--text-body-sm);color:var(--navy-900);max-width:24ch}
.why__col{display:grid;gap:16px}
.trustpilot{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  background:#16233c;border-radius:var(--radius-md);padding:14px 18px
}
.trustpilot__brand{display:flex;gap:6px;align-items:center}
.trustpilot__brand span{font:var(--text-h3);color:#fff}
.trustpilot__score{font:var(--text-h3);color:#fff}
.trustpilot__note{font:var(--text-body-sm);color:var(--grey-300)}
.review p{font:var(--text-body-sm);margin:8px 0 0}
.review cite{display:block;font:var(--text-label);color:var(--navy-900);font-style:normal;margin-top:8px}
.why__guarantee{font:var(--text-body-sm);color:var(--grey-300)}
@media (min-width:900px){
  .why__grid{grid-template-columns:1fr 1fr;gap:48px}
  .section--why{padding-block:64px}
}

/* --------------------------------------------------------------------------
   9. Enquiry form
   -------------------------------------------------------------------------- */
.enq__grid{display:grid;gap:32px;align-items:start}
.enq h2{font:var(--text-h1);margin:10px 0 14px}
.enq__lede{font:var(--text-body-md);margin:0 0 20px;max-width:46ch}
.enq__contact{list-style:none;margin:0;padding:0;display:grid;gap:12px;font:var(--text-body-sm)}
.enq__contact li{display:flex;gap:10px;align-items:flex-start}
.enq__contact svg{color:var(--cyan-600);margin-top:2px}
.enq__contact a{color:var(--navy-900);font-weight:700}
.enq__contact a:hover{color:var(--cyan-600)}

.form{display:grid;gap:14px}
.form__row{display:grid;gap:14px}
@media (min-width:520px){.form__row{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:6px;min-width:0}
.field label{font:var(--text-label);color:var(--text-heading)}
.field .opt{color:var(--text-muted);font-weight:400}
.field input{
  font:var(--text-body-md);color:var(--grey-900);padding:12px;width:100%;
  background:#fff;border:1px solid var(--grey-300);border-radius:var(--radius-md);
  min-height:48px;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)
}
.field input:focus{outline:0;border-color:var(--cyan-500);box-shadow:var(--shadow-focus)}
.field input[aria-invalid="true"]{border-color:var(--red-600)}
.field input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(214,59,59,.25)}
.field .err{font:var(--text-caption);color:var(--red-600);min-height:0}
.field .err:empty{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

.check{display:flex;align-items:center;gap:10px;cursor:pointer;font:var(--text-body-md);color:var(--text-body);min-height:44px}
.check input{
  appearance:none;-webkit-appearance:none;width:22px;height:22px;flex:none;margin:0;cursor:pointer;
  border:2px solid var(--grey-300);border-radius:var(--radius-sm);background:#fff;
  display:grid;place-content:center;transition:background var(--dur-fast),border-color var(--dur-fast)
}
.check input::before{
  content:"";width:12px;height:12px;transform:scale(0);transform-origin:center;
  clip-path:polygon(14% 44%,0 60%,42% 100%,100% 22%,84% 6%,42% 68%);
  background:#fff;transition:transform var(--dur-fast) var(--ease-standard)
}
.check input:checked{background:var(--navy-900);border-color:var(--navy-900)}
.check input:checked::before{transform:scale(1)}

.form__caption{font:var(--text-caption);color:var(--text-muted);text-align:center;margin:0}
.form__error{
  font:var(--text-body-sm);color:var(--red-600);background:var(--red-100);
  border-radius:var(--radius-sm);padding:10px 12px;margin:0
}
.form__success{text-align:center;padding:24px 0}
.form__success svg{color:var(--green-600);width:40px;height:40px;margin-inline:auto}
.form__success h3{font:var(--text-h3);margin:14px 0 6px}
.form__success p{font:var(--text-body-sm);margin:0}
[hidden]{display:none!important}

@media (min-width:900px){ .enq__grid{grid-template-columns:1fr 1.1fr;gap:48px} }

/* --------------------------------------------------------------------------
   10. FAQ
   -------------------------------------------------------------------------- */
.faq__wrap{max-width:820px}
.faq__wrap>h2{font:var(--text-h1);margin:10px 0 0}
.faq__item h3{font:inherit;margin:0}
.faq__list{display:grid;gap:12px;margin-top:24px}
.faq__item{
  background:#fff;border:var(--border-card);border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);overflow:hidden
}
.faq__q{
  display:flex;width:100%;justify-content:space-between;align-items:center;gap:16px;
  padding:16px 18px;background:none;border:0;cursor:pointer;text-align:left;
  font:var(--text-h3);color:var(--navy-900);min-height:60px
}
.faq__q:hover{color:var(--cyan-600)}
.faq__q svg{color:var(--cyan-600);flex:none}
.faq__q .icon--minus{display:none}
.faq__q[aria-expanded="true"] .icon--plus{display:none}
.faq__q[aria-expanded="true"] .icon--minus{display:block}
.faq__a{padding:0 18px 18px;font:var(--text-body-md);margin:0}
@media (min-width:600px){.faq__q{padding:18px 22px}.faq__a{padding:0 22px 18px}}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
.footer{border-top:1px solid var(--grey-200);background:#fff}
.footer__inner{
  padding-block:28px;display:grid;gap:18px;justify-items:center;text-align:center
}
.footer img{height:36px;width:auto}
.footer__meta{font:var(--text-body-sm);color:var(--text-muted);margin:0}
.footer__meta a{color:var(--text-muted)}
.footer__meta a:hover{color:var(--cyan-600)}
.footer__links{display:flex;gap:4px;font:var(--text-body-sm);flex-wrap:wrap;justify-content:center}
.footer__links a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px}
@media (min-width:900px){
  .footer__inner{
    padding-block:32px;grid-template-columns:auto 1fr auto;align-items:center;
    justify-items:start;text-align:left;gap:20px
  }
  .footer__meta{text-align:center}
  .footer__links{justify-content:flex-end}
}

/* --------------------------------------------------------------------------
   12. Mobile sticky action bar
   Appears once the hero has scrolled away; hides while the form is on screen.
   -------------------------------------------------------------------------- */
.mobilebar{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--grey-200);box-shadow:0 -4px 20px rgba(14,26,47,.10);
  transform:translateY(110%);visibility:hidden;
  transition:transform var(--dur-med) var(--ease-standard),visibility var(--dur-med)
}
.mobilebar[data-show="true"]{transform:translateY(0);visibility:visible}
.mobilebar .btn{min-height:48px}
.mobilebar__call{width:48px;padding:0}
@media (min-width:1000px){.mobilebar{display:none}}
/* keep the last section clear of the bar */
body[data-bar="true"] .footer__inner{padding-bottom:84px}
@media (min-width:1000px){body[data-bar="true"] .footer__inner{padding-bottom:32px}}

/* --------------------------------------------------------------------------
   13. Preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .mobilebar{transition:none}
}
@media print{
  .nav,.mobilebar,.skip{display:none!important}
  .section--dark,.hero{background:#fff!important;color:#000!important}
  .hero h1,.why h2{color:#000!important}
  .card,.faq__item{box-shadow:none;border:1px solid #ccc}
  .faq__a{display:block!important}
}