/* ==========================================================================
   Elevate Driving School — design system
   Fifteen Design · concept stylesheet
   ========================================================================== */

/* Fonts self-hosted — see inc/assets.php */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/Inter-400-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:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/Inter-400.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:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/Inter-500-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:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/Inter-500.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:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/Inter-600-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:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/Inter-600.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:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/Inter-700-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:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/Inter-700.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:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/InterTight-400-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:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/InterTight-400.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:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/InterTight-500-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:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/InterTight-500.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:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/InterTight-600-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:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/InterTight-600.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:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/InterTight-700-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:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/InterTight-700.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:'Inter Tight';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/InterTight-800-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:'Inter Tight';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/InterTight-800.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}


:root{
  --black:#0c0c0d;
  --ink:#141416;
  --ink-2:#1c1c1f;
  --ink-3:#2a2a2e;
  --grey-900:#3d3d43;
  --grey-700:#5f5f68;
  --grey-500:#8b8b94;
  --grey-300:#d7d7dc;
  --grey-200:#e6e6ea;
  --grey-100:#f1f1f3;
  --grey-50:#f7f7f8;
  --white:#ffffff;

  --yellow:#ffd300;
  --yellow-600:#e8c000;
  --yellow-soft:#fff6cc;
  --yellow-tint:#fffbe6;

  --green:#1f9d55;
  --red:#d64545;

  --radius-xs:8px;
  --radius-sm:12px;
  --radius:18px;
  --radius-lg:26px;
  --radius-xl:34px;
  --radius-pill:999px;

  --shadow-sm:0 1px 2px rgba(12,12,13,.06), 0 1px 3px rgba(12,12,13,.05);
  --shadow:0 4px 12px rgba(12,12,13,.06), 0 12px 32px rgba(12,12,13,.07);
  --shadow-lg:0 18px 50px rgba(12,12,13,.14);

  --container:1200px;
  --gutter:24px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.65;
  color:var(--grey-900);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;border:0}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5{
  font-family:'Inter Tight','Inter',sans-serif;
  color:var(--black);
  margin:0;
  font-weight:700;
  letter-spacing:-.025em;
  line-height:1.1;
}
p{margin:0}
hr{border:0;border-top:1px solid var(--grey-200);margin:0}

/* ---------- layout ---------- */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.container--narrow{max-width:840px}
.container--wide{max-width:1340px}
.section{padding:88px 0}
.section--tight{padding:64px 0}
.section--grey{background:var(--grey-50)}
.section--dark{background:var(--ink);color:var(--grey-300)}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:var(--white)}

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

.split-2{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
.price-grid--4{grid-template-columns:repeat(4,1fr)}
.grid--stack-sm{align-items:start}

/* ---------- type helpers ---------- */
.eyebrow{
  font-family:'Inter Tight',sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grey-500);margin-bottom:14px;
}
.section--dark .eyebrow{color:var(--yellow)}
.h1,h1{font-size:clamp(38px,5.2vw,62px);font-weight:800}
.h2,h2{font-size:clamp(30px,3.6vw,44px);font-weight:700}
.h3,h3{font-size:clamp(20px,2vw,24px)}
.h4,h4{font-size:17px}
.lede{font-size:18px;line-height:1.6;color:var(--grey-700)}
.section--dark .lede{color:rgba(255,255,255,.72)}
.small{font-size:13px}
.muted{color:var(--grey-500)}
.mark{
  background-image:linear-gradient(var(--yellow),var(--yellow));
  background-repeat:no-repeat;background-size:100% .22em;background-position:0 88%;
  padding:0 .04em;
}
.section-head{max-width:720px;margin:0 auto 48px;text-align:center}
.section-head p{margin-top:16px}
.section-head--left{margin-left:0;text-align:left}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Inter Tight',sans-serif;font-weight:600;font-size:15px;letter-spacing:-.01em;
  padding:14px 26px;border-radius:var(--radius-pill);border:1.5px solid transparent;
  transition:transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--yellow);color:var(--black);border-color:var(--yellow)}
.btn--primary:hover{background:var(--yellow-600);border-color:var(--yellow-600)}
.btn--dark{background:var(--black);color:var(--white);border-color:var(--black)}
.btn--dark:hover{background:var(--ink-3);border-color:var(--ink-3)}
.btn--ghost{background:transparent;color:var(--black);border-color:var(--grey-300)}
.btn--ghost:hover{border-color:var(--black)}
.section--dark .btn--ghost,.panel .btn--ghost,.aside-card--dark .btn--ghost,.btn--ghost-light{background:transparent;color:var(--white);border-color:rgba(255,255,255,.28)}
.section--dark .btn--ghost:hover,.panel .btn--ghost:hover,.btn--ghost-light:hover{border-color:var(--white)}
.btn--sm{padding:10px 18px;font-size:14px}
.btn--lg{padding:17px 32px;font-size:16px}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- pills / tags ---------- */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 15px 7px 11px;border-radius:var(--radius-pill);
  background:var(--yellow-tint);border:1px solid #f0e3a8;
  font-size:12.5px;font-weight:600;color:var(--ink-2);
}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--yellow);flex:none}
.tag{
  display:inline-block;padding:5px 11px;border-radius:var(--radius-pill);
  font-family:'Inter Tight',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:var(--yellow);color:var(--black);
}
.tag--dark{background:var(--black);color:var(--white)}
.tag--outline{background:transparent;border:1px solid var(--grey-300);color:var(--grey-700)}

/* ---------- ticks ---------- */
.ticks{display:grid;gap:11px}
.ticks li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--grey-900)}
.ticks li::before{
  content:"";flex:none;width:17px;height:17px;margin-top:3px;border-radius:50%;
  background:var(--black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.3L9.5 3.6' fill='none' stroke='%23ffd300' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
}
.ticks--light li{color:rgba(255,255,255,.8)}
.ticks--light li::before{background-color:var(--yellow);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.3L9.5 3.6' fill='none' stroke='%230c0c0d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ticks--inline{display:flex;flex-wrap:wrap;gap:12px 26px}

/* ---------- cards ---------- */
.card{background:var(--white);border:1px solid var(--grey-200);border-radius:var(--radius);padding:28px}
.card--flat{box-shadow:none}
.card--raised{box-shadow:var(--shadow);border-color:transparent}
.card--dark{background:var(--ink-2);border-color:rgba(255,255,255,.08);color:rgba(255,255,255,.72)}

/* ==========================================================================
   Announce bar + header
   ========================================================================== */
.announce{background:var(--black);color:rgba(255,255,255,.66);font-size:12.5px}
.announce .container{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:38px;max-width:1340px}
.announce strong{color:var(--yellow);font-weight:600}
.announce-list{display:flex;gap:18px;flex-wrap:wrap}
.announce-links{display:flex;gap:18px}
.announce-links a:hover{color:var(--white)}

.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--grey-200)}
.site-header .container{display:flex;align-items:center;gap:22px;min-height:76px;max-width:1340px}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:46px;width:auto}
.nav{display:flex;align-items:center;gap:4px;margin-left:8px}
.nav a{
  font-family:'Inter Tight',sans-serif;font-size:14.5px;font-weight:500;color:var(--grey-900);
  padding:9px 11px;border-radius:var(--radius-xs);transition:color .15s,background .15s;white-space:nowrap;
}
.nav a:hover{color:var(--black);background:var(--grey-100)}
.nav a.is-active{color:var(--black);font-weight:600;position:relative}
.nav a.is-active::after{content:"";position:absolute;left:11px;right:11px;bottom:2px;height:2.5px;border-radius:2px;background:var(--yellow)}
/* mega menu */
.has-mega{position:relative}
.mega-trigger{display:inline-flex;align-items:center;gap:7px}
.caret{width:7px;height:7px;border-right:1.8px solid var(--grey-500);border-bottom:1.8px solid var(--grey-500);transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s var(--ease)}
.has-mega:hover .caret{transform:rotate(-135deg) translate(-3px,-3px);border-color:var(--black)}
.mega{
  position:absolute;top:100%;left:50%;transform:translate(-50%,10px);width:min(920px,86vw);
  background:var(--white);border:1px solid var(--grey-200);border-radius:var(--radius);box-shadow:var(--shadow-lg);
  padding:28px;opacity:0;visibility:hidden;transition:opacity .18s var(--ease),transform .18s var(--ease);z-index:70;
}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translate(-50%,6px)}
.mega-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.mega h6{
  font-family:'Inter Tight',sans-serif;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey-500);font-weight:700;margin:0 0 12px;
}
.mega a{display:block;padding:6px 8px;margin-left:-8px;font-size:13.5px;color:var(--grey-900);border-radius:6px;font-weight:400}
.mega a:hover{background:var(--grey-100);color:var(--black)}

.header-actions{margin-left:auto;display:flex;align-items:center;gap:18px}
.header-phone{text-align:right;line-height:1.25}
.header-phone .label{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-500);font-weight:600}
.header-phone .number{font-family:'Inter Tight',sans-serif;font-size:17px;font-weight:700;color:var(--black)}
.nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--grey-200);background:var(--white);border-radius:var(--radius-xs);align-items:center;justify-content:center}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--black);position:relative}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--black)}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{position:relative;overflow:hidden;padding:72px 0 64px;background:var(--white)}
.hero::before{
  content:"";position:absolute;top:-220px;right:-140px;width:760px;height:760px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,211,0,.30) 0%,rgba(255,211,0,.10) 42%,transparent 70%);
  pointer-events:none;
}
.hero .container{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.hero h1{margin:22px 0 20px}
.hero .lede{max-width:520px}
.hero .btn-row{margin:30px 0 26px}
.hero-figure{position:relative}
.hero-figure>img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);aspect-ratio:4/3;object-fit:cover;width:100%}
.hero-badge{
  position:absolute;top:-22px;right:-10px;width:96px;height:96px;border-radius:50%;
  background:var(--white);box-shadow:var(--shadow);display:grid;place-items:center;padding:10px;
}
.hero-badge img{width:100%}
.float-card{
  position:absolute;left:18px;bottom:-26px;background:var(--white);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:14px 18px;display:flex;align-items:center;gap:13px;max-width:330px;
}
.float-card .t{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:14.5px;color:var(--black);line-height:1.3}
.float-card .s{font-size:11.5px;color:var(--grey-500)}
.avatars{display:flex}
.avatars span{
  width:30px;height:30px;border-radius:50%;border:2.5px solid var(--white);margin-left:-9px;
  background:var(--grey-300);display:grid;place-items:center;font-size:10px;font-weight:700;color:var(--ink);
}
.avatars span:first-child{margin-left:0}

/* ---------- offer strip ---------- */
.offer-strip{background:var(--yellow)}
.offer-strip .container{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:16px;padding-bottom:16px}
.offer-strip .headline{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:16px;color:var(--black)}
.offer-strip .sub{font-size:14px;color:rgba(12,12,13,.68)}
.offer-strip .btn{margin-left:auto}

/* ---------- stats ---------- */
.stats{border-bottom:1px solid var(--grey-200)}
.stats .container{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding-top:42px;padding-bottom:42px}
.stat .n{font-family:'Inter Tight',sans-serif;font-size:40px;font-weight:800;color:var(--black);letter-spacing:-.03em;line-height:1}
.stat .n em{font-style:normal;color:var(--yellow-600)}
.stat .l{margin-top:9px;font-size:13.5px;color:var(--grey-700);max-width:210px}

/* ==========================================================================
   Price cards
   ========================================================================== */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.price-card{
  background:var(--white);border:1px solid var(--grey-200);border-radius:var(--radius-lg);
  padding:30px 28px;position:relative;transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.price-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.price-card--featured{border-color:var(--black);box-shadow:var(--shadow-lg);padding-top:38px}
.price-card--featured .tag{position:absolute;top:-13px;left:28px}
.price-card .name{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:18px;color:var(--black)}
.price-card .desc{font-size:13px;color:var(--grey-500);margin-top:3px}
.price-card .amount{font-family:'Inter Tight',sans-serif;font-size:48px;font-weight:800;letter-spacing:-.035em;color:var(--black);margin:20px 0 2px;line-height:1}
.price-card .rate{font-size:13px;color:var(--grey-500);margin-bottom:22px}
.price-card .ticks{margin-bottom:26px}
.price-note{margin-top:26px;text-align:center;font-size:13.5px;color:var(--grey-700)}
.price-note b{color:var(--black);font-weight:600}

/* price table */
.rate-table{width:100%;border-collapse:collapse;font-size:14.5px}
.rate-table th{
  text-align:left;font-family:'Inter Tight',sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey-500);font-weight:700;padding:0 0 12px;border-bottom:1px solid var(--grey-200);
}
.rate-table td{padding:14px 0;border-bottom:1px solid var(--grey-100);vertical-align:top}
.rate-table td:last-child{text-align:right;font-family:'Inter Tight',sans-serif;font-weight:700;color:var(--black);white-space:nowrap}
/* Only rows wired to a product highlight. Every row used to, which made the
   whole price list look clickable when almost none of it was — the client's
   "I click an item, it turns grey, but nothing happens", 2 Nov 2026. */
.rate-table tr.is-buyable:hover td{background:var(--grey-50)}
.rate-table tr.is-buyable .rate-label{color:inherit;text-decoration:none}
.rate-table tr.is-buyable:hover .rate-label strong{text-decoration:underline}
.rate-table td.rate-value{white-space:nowrap}
.rate-table .rate-buy{display:inline-block;margin-top:6px;font-family:'Inter Tight',sans-serif;font-size:12px;font-weight:600;line-height:1;padding:7px 12px;border:1px solid var(--grey-300);border-radius:999px;color:var(--black);background:var(--white);cursor:pointer;transition:border-color .2s,background .2s}
.rate-table .rate-buy:hover{border-color:var(--black)}
.rate-table .rate-buy.loading{opacity:.55}
.rate-table .rate-buy.added{border-color:var(--primary)}
.rate-table .sub{display:block;font-size:12.5px;color:var(--grey-500);font-weight:400;font-family:'Inter',sans-serif}

/* ==========================================================================
   Feature / icon cards
   ========================================================================== */
.feature{background:var(--white);border:1px solid var(--grey-200);border-radius:var(--radius);padding:26px}
.feature .ico{
  width:46px;height:46px;border-radius:14px;background:var(--yellow-tint);border:1px solid #f2e8b8;
  display:grid;place-items:center;margin-bottom:18px;
}
.feature .ico svg{width:21px;height:21px;stroke:var(--ink);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.feature h4{margin-bottom:9px;font-size:16px}
.feature p{font-size:14px;color:var(--grey-700);line-height:1.6}

/* ---------- dark panel ---------- */
.panel{background:var(--ink);border-radius:var(--radius-xl);overflow:hidden;color:rgba(255,255,255,.72)}
.panel h1,.panel h2,.panel h3,.panel h4{color:var(--white)}
.panel .eyebrow{color:var(--yellow)}
.panel .lede{color:rgba(255,255,255,.72)}
.panel-split{display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch}
.panel-body{padding:52px}
.panel-figure{position:relative;min-height:340px;background:var(--ink-3)}
.panel-figure>img:not(.panel-badge){position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.panel-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:180px;height:auto;filter:drop-shadow(0 10px 26px rgba(0,0,0,.4))}
.mini-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:28px 0 30px}
.mini-stats .v{font-family:'Inter Tight',sans-serif;font-size:26px;font-weight:700;color:var(--yellow);line-height:1.1}
.mini-stats .k{font-size:13px;color:rgba(255,255,255,.62);margin-top:5px}

/* ==========================================================================
   Gallery
   ========================================================================== */
.gallery-row{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.gallery-row--4{grid-template-columns:repeat(4,1fr)}
.shot{position:relative;border-radius:var(--radius-sm);overflow:hidden;background:var(--ink-3);aspect-ratio:4/5}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.shot:hover img{transform:scale(1.05)}
.shot .cap{
  position:absolute;left:0;right:0;bottom:0;padding:34px 13px 12px;
  background:linear-gradient(transparent,rgba(0,0,0,.85));color:var(--white);
}
.shot .cap .n{font-family:'Inter Tight',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.02em}
.shot .cap .m{font-size:11px;color:rgba(255,255,255,.66)}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.quote-card{background:var(--white);border:1px solid var(--grey-200);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:18px}
.stars{color:var(--yellow-600);font-size:13px;letter-spacing:2px}
.quote-card p{font-size:14.5px;line-height:1.65;color:var(--grey-900);flex:1}
.author{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--grey-100)}
.author .av{width:36px;height:36px;border-radius:50%;background:var(--black);color:var(--yellow);display:grid;place-items:center;font-family:'Inter Tight',sans-serif;font-weight:700;font-size:13px;flex:none}
.author .n{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:14px;color:var(--black)}
.author .m{font-size:11.5px;color:var(--grey-500)}

/* ==========================================================================
   Areas + test centres
   ========================================================================== */
.area-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.area-chips a{
  display:inline-block;padding:8px 15px;border-radius:var(--radius-pill);
  background:var(--white);border:1px solid var(--grey-200);font-size:13.5px;color:var(--grey-900);
  transition:border-color .15s,color .15s,background .15s;
}
.area-chips a:hover{border-color:var(--black);color:var(--black)}
.chip-n{display:inline-block;margin-left:5px;padding:1px 6px;border-radius:var(--radius-pill);background:var(--yellow);color:var(--black);font-size:11px;font-weight:700;font-family:'Inter Tight',sans-serif}
.centre-list{display:grid;gap:10px}
.centre{display:flex;align-items:center;gap:15px;background:var(--white);border:1px solid var(--grey-200);border-radius:var(--radius-sm);padding:15px 18px}
.centre .num{width:28px;height:28px;border-radius:50%;background:var(--yellow);color:var(--black);display:grid;place-items:center;font-family:'Inter Tight',sans-serif;font-weight:700;font-size:13px;flex:none}
.centre .n{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:14.5px;color:var(--black)}
.centre .r{margin-left:auto;font-size:12px;color:var(--grey-500)}
.verify-card{background:var(--black);border-radius:var(--radius-sm);padding:18px 20px;display:flex;align-items:center;gap:16px;margin-top:10px}
.verify-card .t{color:var(--white);font-family:'Inter Tight',sans-serif;font-weight:600;font-size:14.5px}
.verify-card .btn{margin-left:auto}

/* ---------- accreditation ---------- */
.accred{border-top:1px solid var(--grey-200);border-bottom:1px solid var(--grey-200);padding:30px 0}
.accred .container{display:flex;align-items:center;gap:40px;flex-wrap:wrap}
.accred .label{font-family:'Inter Tight',sans-serif;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-500);font-weight:700;max-width:90px;line-height:1.5}
.accred-items{display:flex;align-items:center;gap:34px;flex-wrap:wrap;flex:1}
.accred-items .item{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--grey-700)}
.accred-items img{height:40px;width:auto;opacity:.85}

/* ---------- recruitment bar ---------- */
.recruit{background:var(--ink);border-radius:var(--radius-lg);padding:26px 32px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.recruit .t{font-family:'Inter Tight',sans-serif;font-size:19px;font-weight:700;color:var(--white)}
.recruit .s{font-size:14px;color:rgba(255,255,255,.62);margin-top:3px}
.recruit .btn{margin-left:auto}

/* ==========================================================================
   Page header (interior pages)
   ========================================================================== */
.page-head{position:relative;overflow:hidden;background:var(--grey-50);border-bottom:1px solid var(--grey-200);padding:56px 0 52px}
.page-head::before{
  content:"";position:absolute;top:-300px;right:-120px;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,211,0,.28) 0%,transparent 68%);pointer-events:none;
}
.page-head .container{position:relative}
.page-head h1{margin:16px 0 0;max-width:860px}
.page-head .lede{margin-top:18px;max-width:680px}
.page-head .btn-row{margin-top:28px}
.crumbs{display:flex;gap:9px;font-size:12.5px;color:var(--grey-500);align-items:center}
.crumbs a:hover{color:var(--black)}
.crumbs span{opacity:.5}

/* ---------- prose ---------- */
.prose{max-width:760px}
.prose > * + *{margin-top:20px}
.prose h2{font-size:clamp(24px,2.6vw,32px);margin-top:44px}
.prose h3{font-size:20px;margin-top:34px}
.prose p{font-size:16px;line-height:1.75;color:var(--grey-900)}
.prose ul{display:grid;gap:10px}
.prose ul li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.65}
.prose ul li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:7px;border-radius:50%;background:var(--yellow)}
.prose a:not(.btn){color:var(--ink);border-bottom:2px solid var(--yellow);font-weight:500}
.prose a:not(.btn):hover{background:var(--yellow-tint)}
.prose ol.steps-list{counter-reset:s;display:grid;gap:12px;padding:0;list-style:none}
.prose ol.steps-list li{position:relative;padding-left:40px;font-size:15.5px;line-height:1.65;counter-increment:s}
.prose ol.steps-list li::before{
  content:counter(s);position:absolute;left:0;top:1px;width:26px;height:26px;border-radius:50%;
  background:var(--yellow);color:var(--black);display:grid;place-items:center;
  font-family:'Inter Tight',sans-serif;font-weight:700;font-size:13px;
}
.prose blockquote{
  margin:0;padding:22px 26px;background:var(--grey-50);border-left:3px solid var(--yellow);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:16px;color:var(--grey-900);
}

/* two-column content w/ sticky aside */
.with-aside{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start}
.aside{position:sticky;top:96px;display:grid;gap:16px}
.aside-card{background:var(--white);border:1px solid var(--grey-200);border-radius:var(--radius);padding:24px}
.aside-card h4{font-size:16px;margin-bottom:14px}
.aside-card--dark{background:var(--ink);border-color:transparent;color:rgba(255,255,255,.7)}
.aside-card--dark h4{color:var(--white)}
.aside-card .big{font-family:'Inter Tight',sans-serif;font-size:26px;font-weight:800;color:var(--black);letter-spacing:-.03em}
.aside-card--dark .big{color:var(--yellow)}

/* ---------- accordion ---------- */
.acc{border-top:1px solid var(--grey-200)}
.acc details{border-bottom:1px solid var(--grey-200)}
.acc summary{
  list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
  font-family:'Inter Tight',sans-serif;font-weight:600;font-size:16.5px;color:var(--black);
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;margin-top:-6px;
  border-right:2px solid var(--grey-500);border-bottom:2px solid var(--grey-500);
  transform:rotate(45deg);transition:transform .2s var(--ease);
}
.acc details[open] summary::after{transform:rotate(-135deg);border-color:var(--black)}
.acc .body{padding:0 40px 22px 0;font-size:15px;line-height:1.7;color:var(--grey-700)}
.acc .body strong{color:var(--black)}

/* ---------- forms ---------- */
.form{display:grid;gap:18px}
.field{display:grid;gap:7px}
.field label{font-family:'Inter Tight',sans-serif;font-size:13px;font-weight:600;color:var(--ink)}
.field .hint{font-size:12px;color:var(--grey-500)}
.field input,.field select,.field textarea{
  font:inherit;font-size:15px;padding:13px 15px;border:1.5px solid var(--grey-200);border-radius:var(--radius-xs);
  background:var(--white);color:var(--ink);transition:border-color .15s,box-shadow .15s;width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--black);box-shadow:0 0 0 3px var(--yellow-soft);
}
.field textarea{min-height:130px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.choice{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--grey-900)}
.choice input{width:18px;height:18px;margin-top:2px;accent-color:var(--black);flex:none}
.radio-cards{display:grid;gap:10px}
.radio-card{
  display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border:1.5px solid var(--grey-200);
  border-radius:var(--radius-sm);cursor:pointer;transition:border-color .15s,background .15s;
}
.radio-card:hover{border-color:var(--grey-300)}
.radio-card input{accent-color:var(--black);margin-top:2px;width:17px;height:17px;flex:none}
.radio-card>span{flex:1}
.radio-card .n{display:block;font-family:'Inter Tight',sans-serif;font-weight:600;font-size:15px;color:var(--black)}
.radio-card .d{display:block;font-size:13px;color:var(--grey-500);margin-top:2px}
.radio-card .p{margin-left:auto;font-family:'Inter Tight',sans-serif;font-weight:700;color:var(--black);flex:none}
.radio-card .p svg{width:18px;height:18px;stroke:var(--grey-500);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fieldset-title{font-family:'Inter Tight',sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-500);font-weight:700;margin-bottom:4px}

/* ---------- steps ---------- */
.steps{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px}
.step{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--grey-500)}
.step .n{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--grey-300);display:grid;place-items:center;font-size:12px;font-weight:700}
.step.is-active{color:var(--black);font-weight:600}
.step.is-active .n{background:var(--yellow);border-color:var(--yellow);color:var(--black)}
.step.is-done .n{background:var(--black);border-color:var(--black);color:var(--yellow)}
.step + .step::before{content:"";width:22px;height:1px;background:var(--grey-300);margin-right:1px}

/* ---------- product grid ---------- */
.product{
  background:var(--white);border:1px solid var(--grey-200);border-radius:var(--radius);
  padding:24px;display:flex;flex-direction:column;gap:6px;position:relative;transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.product:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
/* The header is sticky, so an anchored card needs clearance or it lands
   underneath it. Products redirected from their own URL arrive this way. */
.product[id]{scroll-margin-top:110px}
.product[id]:target{border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,0,0,.04),var(--shadow)}
.product .tag{align-self:flex-start;margin-bottom:10px}
.product .n{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:17px;color:var(--black)}
.product .d{font-size:13.5px;color:var(--grey-500);min-height:38px}
.product .p{font-family:'Inter Tight',sans-serif;font-size:32px;font-weight:800;letter-spacing:-.03em;color:var(--black);margin:12px 0 2px}
.product .u{font-size:12.5px;color:var(--grey-500);margin-bottom:18px}
.product .btn{margin-top:auto}

/* ---------- cart ---------- */
.cart-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:40px;align-items:start}
.cart-line{display:flex;gap:18px;align-items:center;padding:20px 0;border-bottom:1px solid var(--grey-200)}
.cart-line .thumb{width:70px;height:70px;border-radius:var(--radius-xs);background:var(--yellow-tint);border:1px solid #f2e8b8;display:grid;place-items:center;flex:none}
.cart-line .thumb svg{width:26px;height:26px;stroke:var(--ink);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cart-line .n{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:15.5px;color:var(--black)}
.cart-line .m{font-size:12.5px;color:var(--grey-500);margin-top:2px}
.cart-line .price{margin-left:auto;font-family:'Inter Tight',sans-serif;font-weight:700;font-size:17px;color:var(--black)}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--grey-200);border-radius:var(--radius-pill);overflow:hidden}
.qty button{width:32px;height:32px;border:0;background:transparent;color:var(--grey-700);font-size:15px}
.qty button:hover{background:var(--grey-100);color:var(--black)}
.qty span{width:30px;text-align:center;font-weight:600;font-size:14px}
.summary-row{display:flex;justify-content:space-between;font-size:14.5px;padding:9px 0;color:var(--grey-700)}
.summary-row.total{border-top:1px solid var(--grey-200);margin-top:10px;padding-top:16px;font-family:'Inter Tight',sans-serif;font-size:20px;font-weight:800;color:var(--black)}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--grey-200);margin-bottom:32px;overflow-x:auto}
.tabs button{
  border:0;background:transparent;padding:13px 16px;font-family:'Inter Tight',sans-serif;font-weight:600;font-size:14.5px;
  color:var(--grey-500);border-bottom:2.5px solid transparent;margin-bottom:-1px;white-space:nowrap;
}
.tabs button:hover{color:var(--ink)}
.tabs button.is-active{color:var(--black);border-bottom-color:var(--yellow)}
.tab-panel[hidden]{display:none}

/* ---------- misc ---------- */
.notice{background:var(--yellow-tint);border:1px solid #f2e8b8;border-radius:var(--radius-sm);padding:18px 20px;font-size:14px;color:var(--ink-2)}
.notice strong{color:var(--black)}
.split-media{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split-media img{border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.ratio-video{position:relative;padding-top:56.25%;border-radius:var(--radius);overflow:hidden;background:var(--ink-3)}
.ratio-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map-card{
  display:flex;align-items:center;gap:20px;padding:26px 30px;border-radius:var(--radius);
  border:1px solid var(--grey-200);background:
    radial-gradient(circle at 18% 22%, rgba(255,211,0,.16), transparent 42%),
    repeating-linear-gradient(0deg, var(--grey-100) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, var(--grey-100) 0 1px, transparent 1px 46px),
    var(--grey-50);
  transition:border-color .18s var(--ease),transform .18s var(--ease);
}
.map-card:hover{border-color:var(--black);transform:translateY(-2px)}
.map-card__pin{width:52px;height:52px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;flex:none}
.map-card__pin svg{width:24px;height:24px;stroke:var(--black);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.map-card__t{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:17px;color:var(--black)}
.map-card__s{font-size:14px;color:var(--grey-700);margin-top:3px}
.map-card .btn{margin-left:auto;flex:none}
@media (max-width:640px){.map-card{flex-wrap:wrap}.map-card .btn{margin-left:0;width:100%}}
.cta-band{background:var(--yellow);border-radius:var(--radius-xl);padding:48px;text-align:center}
.cta-band h2{max-width:640px;margin:0 auto 16px}
.cta-band p{max-width:560px;margin:0 auto 28px;color:rgba(12,12,13,.7)}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--black);color:rgba(255,255,255,.58);padding:66px 0 0;font-size:14px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:44px;padding-bottom:48px}
.site-footer .brand img{height:50px;margin-bottom:20px}
.site-footer p{font-size:13.5px;line-height:1.7;max-width:300px}
.site-footer h5{
  font-family:'Inter Tight',sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--white);font-weight:700;margin:0 0 18px;
}
.footer-links{display:grid;gap:11px}
.footer-links a{font-size:13.5px;transition:color .15s}
.footer-links a:hover{color:var(--yellow)}
.footer-contact{display:grid;gap:7px;font-size:13.5px}
.footer-contact .big{font-family:'Inter Tight',sans-serif;font-size:19px;font-weight:700;color:var(--white)}
.footer-contact a:hover{color:var(--yellow)}
.footer-badges{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.footer-badges img{height:38px;background:var(--white);border-radius:6px;padding:4px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;gap:20px;flex-wrap:wrap;font-size:12px}
.footer-bottom .legal{max-width:720px}
.footer-bottom nav{margin-left:auto;display:flex;gap:18px}
.footer-bottom a:hover{color:var(--yellow)}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .nav{display:none}
  .nav-toggle{display:flex}
  .nav.is-open{
    display:grid;position:absolute;top:100%;left:0;right:0;background:var(--white);
    border-bottom:1px solid var(--grey-200);padding:12px var(--gutter) 20px;gap:2px;box-shadow:var(--shadow);
    max-height:calc(100vh - 120px);overflow-y:auto;
  }
  .nav.is-open .has-mega{position:static}
  .nav.is-open .mega{
    position:static;opacity:1;visibility:visible;transform:none;width:auto;border:0;box-shadow:none;
    padding:6px 0 0;background:transparent;
  }
  .nav.is-open .mega-inner{grid-template-columns:1fr 1fr;gap:18px}
  .nav.is-open .mega-trigger{display:none}
  .site-header .container{position:relative}
  .header-phone{display:none}
  .with-aside{grid-template-columns:1fr;gap:40px}
  .aside{position:static}
  .grid-5{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .hero .container{grid-template-columns:1fr;gap:56px}
  .hero-figure{max-width:560px}
  .panel-split{grid-template-columns:1fr}
  .panel-figure{min-height:260px;order:-1}
  .panel-body{padding:36px 28px}
  .stats .container{grid-template-columns:repeat(2,1fr);gap:26px}
  .price-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .price-card--featured{order:-1}
  .grid-4,.grid-3{grid-template-columns:repeat(2,1fr)}
  .split-2{grid-template-columns:1fr;gap:40px}
  .price-grid--4{grid-template-columns:repeat(2,1fr);max-width:none}
  .gallery-row,.gallery-row--4{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:repeat(2,1fr);gap:36px}
  .split-media{grid-template-columns:1fr;gap:32px}
  .cart-layout{grid-template-columns:1fr}
  .announce-list{display:none}
  .announce .container{justify-content:center}
}
@media (max-width:640px){
  :root{--gutter:18px}
  .section{padding:60px 0}
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
  .price-grid--4{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .rate-table td:last-child{white-space:normal}
  .gallery-row,.gallery-row--4{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr}
  .offer-strip .btn{margin-left:0;width:100%}
  .recruit .btn{margin-left:0;width:100%}
  .field-row{grid-template-columns:1fr}
  .cta-band{padding:34px 22px}
  .panel-body{padding:30px 22px}
  .mini-stats{grid-template-columns:1fr 1fr;gap:18px}
  .float-card{left:8px;right:8px;max-width:none;bottom:-34px}
  .hero{padding-bottom:78px}
  .btn{width:100%}
  .btn-row{flex-direction:column}
  .header-actions .btn{width:auto}
  .footer-bottom nav{margin-left:0}
}

/* ==========================================================================
   WordPress additions
   Everything above this line is the design's own stylesheet, unmodified apart
   from the self-hosted @font-face block that replaced the Google Fonts import.
   ========================================================================== */

/* WordPress prints width/height attributes on every image; the design's reset
   only constrains width, so without this every photo is stretched to the
   attribute's aspect ratio instead of its container's. Specificity 0-0-1, so
   every component rule above (.accred-items img {height:40px} and friends)
   still wins. */
img{height:auto}

/* Two rules in the design size an image by height and let the width follow the
   aspect ratio. WordPress prints a width attribute, which then wins, and the
   image is stretched sideways — the footer logo and the accreditation badges.
   (.brand img already carries width:auto; .site-footer .brand img is more
   specific and drops it.) */
.site-footer .brand img,
.footer-badges img{width:auto}

/* Accessibility: a skip link and the screen-reader-only class core expects. */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;top:12px;left:12px;z-index:9999;width:auto;height:auto;clip:auto;margin:0;padding:12px 18px;background:var(--black);color:var(--white);border-radius:var(--radius-xs);font-weight:600}

/* Mirrored split-media, for blocks that put the copy first. */
.split-media--reverse>img{order:2}
.split-media--reverse>div{order:1}
@media(max-width:860px){.split-media--reverse>img,.split-media--reverse>div{order:initial}}

/* --------------------------------------------------------------------------
   Formidable Forms bridge.
   Formidable's own stylesheet is dequeued; these rules map its markup onto the
   design's form components so a Formidable form is visually identical to the
   concept's static one.
   -------------------------------------------------------------------------- */
.frm_forms,.frm_forms .frm_form_fields>fieldset{border:0;padding:0;margin:0;min-width:0}
.frm_forms .frm_fields_container{display:grid;gap:18px}
.frm_forms .frm_form_field{margin:0}
.frm_forms .frm_primary_label{display:block;font-family:'Inter Tight',sans-serif;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:8px}
.frm_forms .frm_required{color:var(--red);margin-left:2px}
.frm_forms input[type=text],.frm_forms input[type=email],.frm_forms input[type=tel],
.frm_forms input[type=url],.frm_forms input[type=number],.frm_forms input[type=date],
.frm_forms input[type=password],.frm_forms select,.frm_forms textarea{
  width:100%;padding:13px 15px;border:1px solid var(--grey-300);border-radius:var(--radius-sm);
  background:var(--white);font:inherit;font-size:15px;color:var(--ink);transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.frm_forms textarea{min-height:140px;resize:vertical}
.frm_forms input:focus,.frm_forms select:focus,.frm_forms textarea:focus{
  outline:0;border-color:var(--ink);box-shadow:0 0 0 3px var(--yellow-soft)}
.frm_forms .frm_description{font-size:13px;color:var(--grey-700);margin-top:6px}

/* Formidable's half/third width layout classes become the design's field row. */
.frm_forms .frm_fields_container{grid-template-columns:repeat(2,minmax(0,1fr))}
.frm_forms .frm_form_field{grid-column:1/-1}
.frm_forms .frm_form_field.frm_half,.frm_forms .frm_form_field.frm6{grid-column:span 1}
@media(max-width:640px){.frm_forms .frm_fields_container{grid-template-columns:1fr}
  .frm_forms .frm_form_field.frm_half,.frm_forms .frm_form_field.frm6{grid-column:1/-1}}

/* Checkboxes and radios in the design's .choice shape. */
.frm_forms .frm_checkbox label,.frm_forms .frm_radio label{
  display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--grey-900);font-weight:400;cursor:pointer}
.frm_forms .frm_checkbox input,.frm_forms .frm_radio input{margin-top:3px;accent-color:var(--yellow);width:17px;height:17px;flex:0 0 auto}
.frm_forms .frm_checkbox,.frm_forms .frm_radio{margin-bottom:8px}

/* Buttons and messages. */
.frm_forms .frm_submit{grid-column:1/-1;margin:0}
.frm_forms .frm_submit button,.frm_forms .frm_submit input[type=submit]{width:auto}
.frm_forms .frm_error_style,.frm_forms .frm_message,.frm_forms .frm_success_style{
  grid-column:1/-1;padding:16px 18px;border-radius:var(--radius-sm);font-size:14px;border:1px solid var(--grey-200);background:var(--grey-50)}
.frm_forms .frm_success_style{border-color:rgba(31,157,85,.3);background:rgba(31,157,85,.08);color:#14603a}
.frm_forms .frm_error_style{border-color:rgba(214,69,69,.3);background:rgba(214,69,69,.07);color:#8d2727}
.frm_forms .frm_error{color:var(--red);font-size:13px;margin-top:6px}
.frm_forms .frm_blank_field input,.frm_forms .frm_blank_field select,.frm_forms .frm_blank_field textarea{border-color:var(--red)}
.frm_forms .frm_verify{position:absolute!important;left:-9999px}

/* Pagination on the news archive. */
.nav-links{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:44px}
.nav-links .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 14px;
  border:1px solid var(--grey-300);border-radius:var(--radius-sm);font-size:14px;font-weight:600;color:var(--ink);transition:.18s var(--ease)}
.nav-links .page-numbers:hover{border-color:var(--ink)}
.nav-links .page-numbers.current{background:var(--yellow);border-color:var(--yellow)}

/* --------------------------------------------------------------------------
   WooCommerce bridge.

   The basket and checkout are theme template overrides (see woocommerce/), so
   they already emit the design's own components and need no styling here. What
   is left is the furniture WooCommerce prints around them — notices, the fields
   it generates, the account area and the order pages.
   -------------------------------------------------------------------------- */

/* Notices. */
.woocommerce-notices-wrapper>ul,.woocommerce-message,.woocommerce-info,.woocommerce-error{
  list-style:none;padding:16px 18px;border:1px solid var(--grey-200);background:var(--grey-50);
  border-radius:var(--radius-sm);margin:0 0 24px;font-size:14px}
.woocommerce-message{border-color:rgba(31,157,85,.3);background:rgba(31,157,85,.08);color:#14603a}
.woocommerce-error{border-color:rgba(214,69,69,.3);background:rgba(214,69,69,.07);color:#8d2727}
.woocommerce-notices-wrapper .button{margin-left:10px}

/* Fields WooCommerce generates: give the pairs the design's two-column row. */
.woocommerce-billing-fields__field-wrapper,.woocommerce-shipping-fields__field-wrapper,
.woocommerce-address-fields__field-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.woocommerce-billing-fields__field-wrapper>.form-row-wide,
.woocommerce-shipping-fields__field-wrapper>.form-row-wide,
.woocommerce-address-fields__field-wrapper>.form-row-wide,
.woocommerce-billing-fields__field-wrapper>.notes{grid-column:1/-1}
@media(max-width:640px){.woocommerce-billing-fields__field-wrapper,.woocommerce-shipping-fields__field-wrapper,
  .woocommerce-address-fields__field-wrapper{grid-template-columns:1fr}}
.form-row.field{margin:0}
.form-row .required{color:var(--red);text-decoration:none}
.form-row .optional{color:var(--grey-500);font-weight:400}
.woocommerce-input-wrapper{display:block}
.select2-container .select2-selection--single{height:auto!important;border:1px solid var(--grey-300)!important;
  border-radius:var(--radius-sm)!important;padding:12px 14px!important;background:var(--white)}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:1.4!important;padding:0!important;color:var(--ink)!important}
.select2-container--default .select2-selection--single .select2-selection__arrow{top:14px!important;right:10px!important}
.woocommerce-invalid input,.woocommerce-invalid select{border-color:var(--red)!important}
.woocommerce-password-strength{font-size:13px;margin-top:6px}

/* Payment boxes sit under their radio card. */
.payment_box{background:var(--grey-50);border:1px solid var(--grey-200);border-radius:var(--radius-sm);
  padding:14px 16px;margin:-2px 0 4px;font-size:14px}
.payment_box p:first-child{margin-top:0}
.woocommerce-privacy-policy-text{font-size:13px;color:var(--grey-700);margin-top:14px}
.woocommerce-terms-and-conditions-wrapper{margin-top:14px}
/* The design's checkout button is its natural width, not the full column. */
.place-order{display:grid;gap:14px;justify-items:start}
.place-order .btn{width:auto}

/* Buttons WooCommerce prints for itself. */
.woocommerce .button:not(.btn),.woocommerce button.button:not(.btn),.woocommerce input.button:not(.btn),
.woocommerce a.button:not(.btn),.woocommerce-MyAccount-content .button:not(.btn){
  display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;
  font-family:'Inter Tight',sans-serif;font-weight:600;font-size:15px;line-height:1;
  padding:14px 22px;border-radius:var(--radius-pill);background:var(--yellow);color:var(--black);
  transition:.18s var(--ease);text-decoration:none}
.woocommerce .button:not(.btn):hover{background:var(--yellow-600);color:var(--black)}

/* My account. */
/* The account area is a nav column plus its content — but only once someone is
   signed in. Signed out it is the two sign-in/register cards, and the empty nav
   column pushed them off to one side. */
.woocommerce-account.logged-in .woocommerce{display:grid;grid-template-columns:230px minmax(0,1fr);gap:40px;align-items:start}
@media(max-width:820px){.woocommerce-account.logged-in .woocommerce{grid-template-columns:1fr}}
.woo--account .aside-card{margin-top:0}
.woocommerce-MyAccount-navigation ul{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.woocommerce-MyAccount-navigation a{display:block;padding:11px 16px;border-radius:var(--radius-sm);
  font-size:14.5px;font-weight:600;color:var(--grey-900)}
.woocommerce-MyAccount-navigation a:hover{background:var(--grey-50);color:var(--black)}
.woocommerce-MyAccount-navigation .is-active a{background:var(--yellow);color:var(--black)}
.woocommerce-MyAccount-content h2,.woocommerce-MyAccount-content h3{
  font-family:'Inter Tight',sans-serif;font-size:22px;margin:0 0 16px}
.u-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
@media(max-width:760px){.u-columns{grid-template-columns:1fr}}
.u-column1,.u-column2{background:var(--white);border:1px solid var(--grey-200);border-radius:var(--radius);padding:28px}
.u-column1 h2,.u-column2 h2{font-family:'Inter Tight',sans-serif;font-size:20px;margin:0 0 18px}
.woocommerce-form-login__rememberme{margin:14px 0}
.woocommerce-LostPassword{font-size:14px;margin-top:12px}

/* Order tables (thank-you page, account orders). */
.woocommerce table.shop_table,.woocommerce table.woocommerce-orders-table{
  width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--grey-200);
  border-radius:var(--radius);overflow:hidden;margin-bottom:28px}
.woocommerce table.shop_table th{font-family:'Inter Tight',sans-serif;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey-500);font-weight:700;text-align:left;padding:16px 18px;
  border-bottom:1px solid var(--grey-200)}
.woocommerce table.shop_table td{padding:16px 18px;border-bottom:1px solid var(--grey-100)}
.woocommerce table.shop_table tr:last-child td{border-bottom:0}
.woocommerce ul.order_details{list-style:none;padding:0;display:flex;gap:28px;flex-wrap:wrap;
  background:var(--grey-50);border:1px solid var(--grey-200);border-radius:var(--radius);padding:22px;margin:0 0 28px}
.woocommerce ul.order_details li{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-500);font-weight:700}
.woocommerce ul.order_details li strong{display:block;font-size:16px;letter-spacing:0;text-transform:none;color:var(--black);margin-top:6px}

/* The basket needs a remove control the static mock-up never had. Give it its
   own spot to the right of the price instead of letting it butt against it. */
.cart-line .price{display:flex;align-items:center;gap:14px}
.cart-line .remove{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:999px;border:1px solid var(--grey-200);
  color:var(--grey-500);font-size:16px;line-height:1;text-decoration:none;transition:.18s var(--ease)}
.cart-line .remove:hover{border-color:var(--red);color:var(--red);background:rgba(214,69,69,.06)}

/* Woo prints a description under a field; the design calls it a hint. */
.form-row .description{font-size:12px;color:var(--grey-500);margin-top:6px}

/* The basket count bubble in the announcement bar. */
.announce-links .cart-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
  padding:0 5px;margin-left:6px;border-radius:999px;background:var(--yellow);color:var(--black);
  font-size:11px;font-weight:700;line-height:1}
.radio-card.is-chosen{border-color:var(--black);background:var(--yellow-tint)}

/* Social and review profiles in the footer — added September 2026. The design
   had no social row, so this borrows the footer-bottom's own type and spacing
   rather than inventing a new treatment. */
.footer-social{display:flex;flex-wrap:wrap;gap:10px;padding:22px 0 0;margin-top:8px}
@media(max-width:640px){.footer-social{gap:8px}}

/* One profile link, used in the footer and on the Contact page. The icon and
   the label sit on one pill so the target is comfortably clickable on a phone,
   which a bare 17px icon is not. */
.social-link{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 13px;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  font-size:13.5px;line-height:1;text-decoration:none;
  color:rgba(255,255,255,.78);
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);
}
.social-link:hover{color:var(--white);border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.06)}
.social-link .social-icon{flex:0 0 auto}

/* Google leads: the client asked for the review presence to stay the most
   prominent of the profiles. */
.social-link--primary{
  color:var(--ink);background:var(--yellow);border-color:var(--yellow);font-weight:600;
}
.social-link--primary:hover{color:var(--ink);background:#ffd83d;border-color:#ffd83d}

/* On a light section the pills need the opposite treatment. */
.social-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.social-row .social-link{border-color:rgba(0,0,0,.14);color:var(--ink-2)}
.social-row .social-link:hover{color:var(--ink);border-color:rgba(0,0,0,.34);background:rgba(0,0,0,.04)}
.social-row .social-link--primary{color:var(--ink);background:var(--yellow);border-color:var(--yellow)}
.social-heading{margin:0 0 10px}
.social-note{margin-top:12px;font-size:13.5px;color:var(--ink-2)}

/* Registered trade mark notice, added September 2026 at the client's request.
   It sits under the accreditation logos in the first footer column, where he
   marked it. Deliberately quiet: it is a legal notice, not a selling line. */
.footer-trademark{margin-top:26px;font-size:11.5px;line-height:1.55;color:rgba(255,255,255,.52);max-width:40ch;text-wrap:pretty}
.footer-trademark p{margin:0 0 2px}
.footer-trademark__mark{
  font-family:'Inter Tight',sans-serif;font-weight:700;letter-spacing:.06em;
  font-size:11.5px;color:rgba(255,255,255,.78);margin-bottom:5px;
}
.footer-trademark__mark sup{font-size:.7em;vertical-align:super;margin-left:1px}
.footer-trademark__copy{margin-top:7px}
.footer-trademark a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.footer-trademark a:hover{color:var(--yellow)}

/* Portrait source images in slots drawn for landscape ones.
   The client's newer photographs are posters with text at both ends, so they
   are shown whole rather than cropped to the slot's ratio. Landscape images
   are untouched and still fill their slot as designed. */
.hero-figure>img.is-portrait{aspect-ratio:auto;height:auto}

/* The dark panel's figure is normally a fixed-height column with the photo
   stretched across it. A poster is let out of that so it stands at its own
   height; the panel grows to match rather than slicing the picture. The
   marked class covers Elevate's own artwork; the :has() rule catches any
   other portrait photograph dropped into the slot. */
.panel-figure--poster,
.panel-figure:has(>img.is-portrait:not(.panel-badge)){min-height:0}
.panel-figure--poster>img:not(.panel-badge),
.panel-figure>img.is-portrait:not(.panel-badge){position:static;width:100%;height:auto;object-fit:contain}

/* A <figure> carries a 40px side margin from the browser's own stylesheet,
   which nothing here was cancelling: every gallery tile was being drawn at
   138px inside a 218px column, losing a third of the row. Pre-dates the
   poster work; fixing it widens the whole gallery. */
.shot{margin:0}

/* Gallery tiles are 4:5 by design. A row of Elevate's own pass posters is 2:3
   instead, matching the artwork, and shows no hover zoom — a zoom on a poster
   crops the phone numbers off the bottom. */
.shot--poster{aspect-ratio:auto;overflow:visible;background:none}
.shot--poster img{aspect-ratio:2/3;object-fit:contain;border-radius:var(--radius-sm);background:var(--ink-3)}
.shot--poster:hover img{transform:none}
/* Below the artwork, not over it: the poster's own phone numbers run along its
   bottom edge and an overlaid caption sits right on them. */
.shot--poster .cap{
  position:static;background:none;padding:9px 2px 0;color:inherit;
}
.shot--poster .cap .m{color:var(--ink-2)}
.section--dark .shot--poster .cap .m,
.bg-ink .shot--poster .cap .m{color:rgba(255,255,255,.66)}

/* Browsers without :has() keep the old panel behaviour, except that the
   picture is fitted rather than cropped, which is the safer of the two
   failures. The gallery rule above needs no fallback. */
@supports not selector(:has(*)){
  .panel-figure>img.is-portrait:not(.panel-badge){position:absolute;height:100%;object-fit:contain}
}

/* A wrapped copy column can now carry the block's accordion, steps, chips and
   buttons after it. It needs the column's own top spacing and none of .prose's
   first-child reset, since it is a continuation rather than a new column. */
.prose--after{margin-top:6px}
.prose--after>:first-child{margin-top:0}


/* The basket bubble is now rendered even when empty, so WooCommerce has an
   element to swap after an AJAX add. Hidden until there is something in it. */
.cart-count--empty{display:none}

/* A test-centre card that leads somewhere. The cards always looked clickable;
   now the ones that are say so on hover and keyboard focus. */
.centre--link{text-decoration:none;color:inherit;transition:border-color .2s var(--ease),transform .2s var(--ease)}
.centre--link:hover{border-color:var(--yellow);transform:translateY(-1px)}
.centre--link:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}

/* ---------------------------------------------------------------------------
   The seasonal test-day car offer, November 2026.

   Deliberately loud on the card — it is worth £90 to the customer and Julian
   asked for it to stand out — but the conditions sit immediately beneath it at
   a readable size rather than as fine print. The whole point of the brief was
   that nobody should be able to say they did not see what they were agreeing
   to.
--------------------------------------------------------------------------- */
.offer{margin:14px 0 4px;padding:14px 16px;border:2px solid var(--yellow);border-radius:var(--radius-sm);background:#fffdf2;text-align:left}
.offer__badge{font-family:'Inter Tight',sans-serif;font-size:14px;font-weight:800;line-height:1.3;color:var(--black);letter-spacing:.01em}
.offer--compact .offer__badge{font-size:13px}
.offer__terms{list-style:none;margin:10px 0 0;padding:0}
.offer__terms li{position:relative;padding-left:14px;margin-bottom:5px;font-size:12px;line-height:1.5;color:var(--grey-700)}
.offer__terms li:before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--yellow)}
.offer--compact .offer__terms li{font-size:11.5px}
.offer__link{display:inline-block;margin-top:10px;font-size:12px;font-weight:600;color:var(--black);border-bottom:2px solid var(--yellow)}
.offer--checkout{margin:0 0 18px;padding:18px 20px}
.offer--checkout .offer__badge{font-size:15px;margin-bottom:12px}
.offer--checkout .choice{align-items:flex-start}
.offer--checkout .choice span{font-size:13px;line-height:1.6}
@media(max-width:640px){.offer{padding:12px 13px}.offer__badge{font-size:13px}}

/* ---------------------------------------------------------------------------
   The offer star, 6 November 2026.

   Theo: "an alluring Star to immediately catch people's eye when they are
   scrolling through on the new offer", with the top-right corner of the card
   circled. So it is a sticker that breaks the card's corner rather than
   another line of text inside it — the card edge is what the eye follows when
   scrolling, and something crossing that edge is what stops it.

   The burst is a clip-path. Where clip-path is unavailable the element is
   still a gold disc with the same words on it, which is a quieter sticker
   rather than a broken one, so there is no fallback to write.

   .product and .price-card are both already position:relative.
--------------------------------------------------------------------------- */
.offer-star{
  position:absolute;top:-16px;right:-14px;z-index:3;
  pointer-events:none;
  filter:drop-shadow(0 3px 7px rgba(12,12,13,.22));
}
.offer-star__burst{
  display:grid;place-content:center;justify-items:center;
  width:98px;height:98px;
  background:var(--yellow);
  border-radius:50%;
  clip-path:polygon(50.0% 0.0%,57.9% 10.3%,69.1% 3.8%,72.5% 16.3%,85.4% 14.6%,83.7% 27.5%,96.2% 30.9%,89.7% 42.1%,100.0% 50.0%,89.7% 57.9%,96.2% 69.1%,83.7% 72.5%,85.4% 85.4%,72.5% 83.7%,69.1% 96.2%,57.9% 89.7%,50.0% 100.0%,42.1% 89.7%,30.9% 96.2%,27.5% 83.7%,14.6% 85.4%,16.3% 72.5%,3.8% 69.1%,10.3% 57.9%,0.0% 50.0%,10.3% 42.1%,3.8% 30.9%,16.3% 27.5%,14.6% 14.6%,27.5% 16.3%,30.9% 3.8%,42.1% 10.3%);
  transform:rotate(-9deg);
  font-family:'Inter Tight',sans-serif;color:var(--black);text-align:center;
  line-height:1.1;
}
.offer-star__glyph{display:block;font-size:17px;line-height:1;margin-bottom:2px}
.offer-star__a{display:block;font-size:13px;font-weight:800;letter-spacing:-.01em}
.offer-star__b{display:block;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}

/* The card lifts on hover; the sticker lifts a little further and straightens
   up, so it reads as attached to the card rather than printed on it. */
.price-card:hover .offer-star__burst,
.product:hover .offer-star__burst{transform:rotate(-3deg) scale(1.06)}
.offer-star__burst{transition:transform .25s var(--ease)}

/* The featured card's "Best value" tag sits on the top edge at left:28px and
   the sticker sits off the right corner, so they do not meet at any width the
   grid produces. The featured card is also taller; nothing to adjust. */

@media(max-width:860px){
  .offer-star{top:-13px;right:-10px}
  .offer-star__burst{width:84px;height:84px}
  .offer-star__glyph{font-size:15px}
  .offer-star__a{font-size:11.5px}
  .offer-star__b{font-size:8.5px}
}

/* The offer tick-box is `required`, so the browser blocks the submit and says
   why. `:user-invalid` rather than `:invalid` — a required unticked box is
   invalid from the moment the page loads, and marking it red before the
   customer has touched anything reads as the site being broken. */
.offer--checkout input:user-invalid{outline:2px solid #c0392b;outline-offset:3px}
.offer--checkout:has(input:user-invalid){border-color:#c0392b;background:#fdf4f3}