@charset "utf-8";

/* ==========================================================================
   Jack Fever - one stylesheet, one theme.
   Palette P2 (magenta + indigo + lime), LIGHT half only.
   There is no second token block, no colour-scheme media query, no theme switch
   and no theme key in storage anywhere in this build.
   Every colour below the token block is a var(): no literal hex escapes it.
   ========================================================================== */

/* ---------- 1. tokens ---------- */

:root{
  /* palette P2 - light */
  --bg:#FBF4F8;
  --surface:#FFFFFF;
  --surface-2:#F4E7EF;
  --text:#1C1030;
  --muted:#5B4A68;
  --line:#E6D5E0;
  --accent:#D6177F;
  --accent-2:#2B1D8C;
  --accent-3:#7FB800;
  --on-accent:#FFFFFF;
  --on-accent-2:#FFFFFF;
  --on-accent-3:#141A00;
  /* derived: a1 darkened 15% for links and buttons on neutral paper */
  --accent-ink:#B6146C;
  --on-ink:#FFF4FA;

  --invert-bg:var(--text);
  --invert-fg:var(--bg);

  /* band locals, redeclared by every band */
  --band-bg:var(--bg);
  --band-fg:var(--text);
  --link:var(--accent-ink);
  --frame:var(--accent-ink);
  --rule:currentColor;
  --dim:.78;

  --font-head:"Anton","Arial Narrow",Impact,sans-serif;
  --font-body:"Work Sans","Segoe UI",Helvetica,Arial,sans-serif;

  --radius:0;
  --maxw:1320px;
  --gut:20px;
  --band-pad:clamp(56px,9vw,104px);
  --shadow:0 10px 0 var(--frame);
}

/* ---------- 2. fonts (local woff2, no CDN) ---------- */

@font-face{
  font-family:"Anton";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(fonts/anton-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:"Anton";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(fonts/anton-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:"Work Sans";
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url(fonts/worksans-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:"Work Sans";
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url(fonts/worksans-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- 3. base ---------- */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:400;
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.58;
}

img{max-width:100%;height:auto;display:block}
svg{display:block}

h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:400;
  line-height:.96;
  margin:0 0 .4em;
  letter-spacing:.005em;
  text-wrap:balance;
}
h1{font-size:clamp(44px,6.4vw,100px);line-height:.94}
h2{font-size:clamp(32px,4.2vw,66px)}
h3{font-size:clamp(22px,2vw,30px);line-height:1.04}
h4{font-size:clamp(18px,1.4vw,22px);line-height:1.1}

p,ul,ol,dl,table,figure,blockquote{margin:0 0 1.1em}
p:last-child,ul:last-child,ol:last-child{margin-bottom:0}

a{color:var(--link)}
a:hover{text-decoration:none}

ul,ol{padding-left:1.15em}
li{margin:0 0 .4em}

strong{font-weight:600}
code{font-family:ui-monospace,Consolas,monospace;font-size:.92em}

/* headline ladder: hand-broken lines, no automatic wrapping on desktop */
.l{display:block}

.lead{
  font-size:clamp(18px,1.5vw,23px);
  line-height:1.5;
  max-width:62ch;
}
.eyebrow{
  font-family:var(--font-head);
  font-size:clamp(13px,1vw,15px);
  letter-spacing:.16em;
  text-transform:uppercase;
  margin:0 0 .9em;
  display:block;
}
.measure{max-width:72ch}
.nowrap{white-space:nowrap}

.vh{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:60;
  background:var(--accent-ink);color:var(--on-ink);
  padding:14px 20px;font-weight:600;
}
.skip:focus{left:0}

:focus-visible{
  outline:3px solid var(--band-fg);
  outline-offset:3px;
}

/* ---------- 4. layout ---------- */

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:var(--gut);
  padding-right:var(--gut);
}

.cols{display:grid;gap:clamp(24px,3vw,56px)}
.cols--2{grid-template-columns:1fr}
.cols--3{grid-template-columns:1fr}
.stack>*+*{margin-top:1.1em}

/* ---------- 5. header ---------- */

.top{
  position:sticky;top:0;z-index:40;
  background:var(--bg);
  border-bottom:2px solid var(--muted);
}
.top-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:64px;
}
.brand{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--accent-ink);text-decoration:none;
  min-height:44px;
}
.brand-mark{display:inline-flex}
.brand-name{
  font-family:var(--font-head);
  font-size:clamp(20px,1.7vw,26px);
  letter-spacing:.02em;
  color:var(--text);
}
.burger{
  display:inline-flex;align-items:center;gap:10px;
  min-height:44px;min-width:44px;padding:0 12px;
  background:var(--accent-ink);color:var(--on-ink);
  border:0;border-radius:var(--radius);
  font-family:var(--font-head);font-size:16px;letter-spacing:.08em;
  text-transform:uppercase;cursor:pointer;
}
.burger-bars{
  position:relative;display:block;width:20px;height:2px;
  background:var(--on-ink);
}
.burger-bars::before,.burger-bars::after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:var(--on-ink);
}
.burger-bars::before{top:-6px}
.burger-bars::after{top:6px}
.nav{display:none}
.nav[data-open="true"]{
  display:block;
  position:absolute;left:0;right:0;top:100%;
  background:var(--surface-2);
  border-bottom:2px solid var(--muted);
  padding:16px var(--gut) 24px;
}
.nav-list{list-style:none;margin:0 0 16px;padding:0}
.nav-list li{margin:0}
.nav-list a{
  display:block;padding:12px 0;min-height:44px;
  font-weight:600;color:var(--text);text-decoration:none;
  border-bottom:1px solid var(--muted);
}
.nav-list a[aria-current="page"]{color:var(--accent-ink)}

/* ---------- 6. bands ---------- */

.band{
  position:relative;
  overflow:hidden;
  background:var(--band-bg);
  color:var(--band-fg);
  padding-top:var(--band-pad);
  padding-bottom:var(--band-pad);
}
.band--n  {--band-bg:var(--bg);        --band-fg:var(--text);        --link:var(--accent-ink); --frame:var(--accent-3); --rule:var(--accent-ink)}
.band--s  {--band-bg:var(--surface-2); --band-fg:var(--text);        --link:var(--accent-ink); --frame:var(--accent);   --rule:var(--accent-ink)}
.band--a1 {--band-bg:var(--accent);    --band-fg:var(--on-accent);   --link:var(--band-fg);    --frame:var(--band-fg); --dim:1}
.band--a2 {--band-bg:var(--accent-2);  --band-fg:var(--on-accent-2); --link:var(--band-fg);    --frame:var(--band-fg)}
.band--a3 {--band-bg:var(--accent-3);  --band-fg:var(--on-accent-3); --link:var(--band-fg);    --frame:var(--band-fg)}
.band--inv{--band-bg:var(--invert-bg); --band-fg:var(--invert-fg);   --link:var(--band-fg);    --frame:var(--band-fg)}

.band-inner{position:relative;z-index:2}

/* hero photograph: the band colour still rules the page.
   The picture sits under a scrim of the band's own colour. */
.band-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.band-bg img{
  width:100%;height:100%;
  object-fit:cover;
  opacity:.34;
  filter:saturate(.35) brightness(.7);
}
.band-bg::after{
  content:"";position:absolute;inset:0;
  background:var(--band-bg);
  opacity:.56;
}

.band a{color:var(--link)}
.band a.btn--solid{color:var(--band-bg)}
.band a.btn--ink{color:var(--on-ink)}

.band .dim{opacity:var(--dim)}
.band hr,.rule{
  border:0;border-top:2px solid currentColor;opacity:.55;margin:clamp(24px,3vw,40px) 0;
}

/* chapter number (PRESENTATION = chapters): top left corner, standing in
   the outer margin of the band rather than floating over the content */
.chapter{
  position:absolute;top:0;left:0;z-index:1;
  padding:2px 0 0 var(--gut);
  font-family:var(--font-head);
  font-size:clamp(44px,6vw,104px);
  line-height:1;
  color:inherit;
  opacity:.26;
  pointer-events:none;
  letter-spacing:-.01em;
}

/* the one decorative device on the site */
.decor{
  position:absolute;
  bottom:-.12em;right:-.06em;
  z-index:1;
  font-family:var(--font-head);
  font-size:clamp(64px,9vw,150px);
  line-height:.8;
  opacity:.32;
  pointer-events:none;
  white-space:nowrap;
  color:inherit;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:2px currentColor;
}
@media (max-width:640px){
  .decor{font-size:clamp(48px,13vw,72px);-webkit-text-stroke-width:1.5px}
}

/* legal pages: coloured masthead, quiet body, no decor */
.legal-body{background:var(--bg);color:var(--text);padding:clamp(40px,5vw,72px) 0}
.legal-body h2{font-size:clamp(24px,2.4vw,38px);margin-top:1.6em}
.legal-body h2:first-of-type{margin-top:0}
.legal-body .measure{max-width:74ch}
.legal-note{
  border:2px solid var(--muted);
  padding:clamp(16px,2vw,24px);
  background:var(--surface);
}

/* ---------- 7. buttons and links ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;min-height:48px;padding:12px 24px;
  font-family:var(--font-head);font-size:clamp(16px,1.2vw,19px);
  letter-spacing:.05em;
  text-decoration:none;cursor:pointer;
  border:2px solid transparent;border-radius:var(--radius);
}
.btn--solid{background:var(--band-fg);color:var(--band-bg)}
.btn--ink{background:var(--accent-ink);color:var(--on-ink)}
.btn--quiet{background:transparent;color:inherit;border-color:currentColor}
/* The leading call to action is a bar with the arrow pushed to the far
   edge, so it reads as a destination rather than a chip. */
.btn--big{
  min-height:60px;padding:16px 22px 16px 28px;
  font-size:clamp(18px,1.4vw,22px);
  justify-content:space-between;gap:32px;
  min-width:min(100%,19rem);
}
.btn--big::after{content:"\2197";font-family:var(--font-body);font-size:1.05em}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,2.4vw,32px)}

.lnk{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:600;text-decoration:none;min-height:44px;
}
.lnk::after{content:"\2197";font-weight:400}

@media (hover:hover){
  .lnk:hover{text-decoration:underline}
  .btn--solid:hover{opacity:.88}
  .btn--ink:hover{opacity:.88}
  .btn--quiet:hover{text-decoration:underline}
  .nav-list a:hover{text-decoration:underline}
  .foot-nav a:hover,.foot-contact a:hover{text-decoration:underline}
}

/* ---------- 8. hero ---------- */

.hero-h{margin-bottom:clamp(20px,2.4vw,36px)}
.hero-grid{display:grid;gap:clamp(24px,3vw,48px)}

/* The figures under the hero read as a stacked data sheet: heavy rule on
   top, the number on its own line, the label under it. */
.hero-meta{list-style:none;margin:0;padding:0;border-top:5px solid var(--rule)}
.hero-meta li{
  display:block;margin:0;padding:12px 0 14px;
  border-bottom:1px solid var(--rule);
}
.hero-meta b{
  display:block;
  font-family:var(--font-head);font-weight:400;
  font-size:clamp(30px,3.2vw,46px);line-height:.94;
  font-variant-numeric:tabular-nums;
}
.hero-meta span{display:block;font-size:.95em;opacity:var(--dim)}
.hero-note{font-size:.94em;opacity:var(--dim);margin-top:1.2em}

/* ---------- 9. cards, kit, steps ---------- */

/* No boxes: every entry hangs off a heavy rule, the way an index does.
   The picture sits on a colour slab offset to the bottom right. */
.cards{
  display:grid;list-style:none;margin:0;padding:0;
  column-gap:clamp(24px,3vw,44px);row-gap:clamp(32px,4vw,56px);
}
.card{
  display:flex;flex-direction:column;
  border-top:5px solid var(--rule);
  padding:clamp(16px,1.8vw,22px) 0 0;
  margin:0;background:transparent;
}
.card h3{margin-bottom:.25em}
.card-meta{font-size:.92em;opacity:var(--dim);margin:0 0 .7em}
.card-txt{margin:0 0 1.1em;flex:1 1 auto}
.card-price{
  font-family:var(--font-head);
  font-size:clamp(28px,2.6vw,40px);
  line-height:1;margin:0 0 .55em;
  font-variant-numeric:tabular-nums;
}
.card-shot{margin:0 12px clamp(26px,2.6vw,34px) 0}
.card-shot img{
  width:100%;aspect-ratio:4 / 3;object-fit:cover;
  box-shadow:12px 12px 0 var(--frame);
}
.card-foot{margin-top:auto}

/* Ledger rows, not tiles. */
.kit{list-style:none;margin:0;padding:0;display:grid;column-gap:clamp(24px,3vw,48px)}
.kit li{
  margin:0;padding:11px 0;
  border-bottom:1px solid var(--rule);
  display:flex;gap:14px;align-items:flex-start;
}
.kit li::before{
  content:"";flex:0 0 auto;width:10px;height:10px;margin-top:.48em;
  background:currentColor;
}

/* The step number sits above its own rule, like a timetable column. */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(24px,3vw,40px)}
.steps li{display:block;margin:0;border-top:5px solid var(--rule);padding-top:12px}
.steps .step-n{
  display:block;
  font-family:var(--font-head);
  font-size:clamp(38px,4.2vw,68px);
  line-height:.86;margin-bottom:.14em;
  font-variant-numeric:tabular-nums;
}
.steps h3{margin:0 0 .25em}
.steps .step-txt{margin:0}

.split{display:grid;gap:clamp(28px,3.2vw,52px)}
.split-box{border-top:5px solid var(--rule);padding:clamp(14px,1.8vw,20px) 0 0}
.split-box h3{
  display:inline-block;margin:0 0 .7em;
  background:var(--band-fg);color:var(--band-bg);
  padding:4px 14px 6px;
}
/* A link inside the slab takes the slab's own foreground: left to the band
   rule it would paint band-fg text on a band-fg plate and vanish. */
.split-box h3 a{color:var(--band-bg)}
.split-box h3 a:focus-visible{outline-color:var(--band-bg)}
.split-box ul{margin:0;padding-left:1.1em}

/* Flat offset slab behind the picture, done with a hard-edged shadow so
   nothing has to be measured: no blur, no radius, no layout shift. */
.shot{margin:0 14px 14px 0}
.shot img{
  width:100%;
  aspect-ratio:16 / 9;
  max-height:clamp(14rem,34vh,26rem);
  object-fit:cover;
  box-shadow:14px 14px 0 var(--frame);
}
.shot figcaption{font-size:.9em;opacity:var(--dim);margin-top:1.1em}

/* price display: display font, never grey */
.bigprice{
  display:block;
  font-family:var(--font-head);
  font-size:clamp(40px,6vw,96px);
  line-height:.92;
  margin:0 0 .2em;
  font-variant-numeric:tabular-nums;
}
.bigprice-note{display:block;font-size:.95em;opacity:var(--dim);margin:.35em 0 0;max-width:46ch}
.priceplate{
  display:inline-block;
  background:var(--band-fg);color:var(--band-bg);
  padding:clamp(14px,1.8vw,22px) clamp(18px,2.2vw,30px);
}
.priceplate .bigprice-note{opacity:1}

/* The house rules are the one block that hangs off a heavy left bar,
   so they never read as another card. */
.compliance{
  border-left:12px solid var(--rule);
  padding:2px 0 2px clamp(18px,2.2vw,28px);
  max-width:84ch;
}
.compliance p{margin:0 0 .7em}
.compliance .fine{
  font-size:.94em;opacity:var(--dim);margin:.9em 0 0;
  padding-top:.9em;border-top:1px solid var(--rule);
}

/* ---------- 10. tables (always on paper, per the one allowed exception) ---------- */

.tablewrap{
  overflow-x:auto;
  background:var(--surface);
  border:2px solid var(--muted);
  -webkit-overflow-scrolling:touch;
}
.tablehint{font-size:.9em;opacity:var(--dim);margin:.6em 0 0}
table{
  width:100%;border-collapse:collapse;
  background:var(--surface);color:var(--text);
  min-width:38rem;margin:0;
}
caption{
  text-align:left;padding:13px 16px 15px;
  font-family:var(--font-head);font-size:clamp(18px,1.6vw,24px);
  color:var(--on-ink);background:var(--accent-ink);
}
th,td{
  text-align:left;padding:12px 16px;
  border-bottom:1px solid var(--muted);
  vertical-align:top;
}
thead th{font-family:var(--font-head);font-weight:400;font-size:1.05em}
tbody th{font-weight:600}
td.num,th.num{font-variant-numeric:tabular-nums;white-space:nowrap}
td.num{font-family:var(--font-head);font-size:1.15em}
tr:last-child th,tr:last-child td{border-bottom:0}

/* ---------- 11. FAQ ---------- */

/* Hairline rows with the sign in the left margin, not a stack of boxes. */
.faq{display:grid;gap:0;max-width:92ch;border-top:5px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  display:flex;gap:16px;align-items:baseline;
  cursor:pointer;padding:16px 0;min-height:44px;
  font-family:var(--font-head);font-size:clamp(18px,1.6vw,24px);
  list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{
  content:"+";flex:0 0 auto;width:1.1em;
  font-size:1.15em;line-height:1;
}
.faq details[open] summary::before{content:"\2013"}
.faq .faq-a{padding:0 0 20px calc(1.1em + 16px);margin:0;max-width:74ch}

/* ---------- 12. form ---------- */

.formwrap{background:transparent}
.form{margin:0}
.f-grid{display:grid;gap:clamp(14px,1.6vw,20px);grid-template-columns:1fr}
.f-row{margin:0;display:flex;flex-direction:column;gap:6px}
.f-row--wide{grid-column:1 / -1}
label{font-weight:600}
.req{font-family:var(--font-head)}
input[type="text"],input[type="email"],input[type="tel"],input[type="date"],
input[type="number"],select,textarea{
  font-family:var(--font-body);font-size:16px;line-height:1.4;
  padding:12px 14px;min-height:48px;
  background:var(--surface);
  color:var(--text);
  border:2px solid var(--muted);
  border-radius:var(--radius);
  width:100%;
}
textarea{min-height:140px;resize:vertical}
select{appearance:none;background-image:none}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{
  border-color:var(--accent-ink);border-width:3px;
}
.f-hint{font-size:.9em;opacity:var(--dim)}
.f-err{
  font-weight:600;font-size:.94em;
  background:var(--surface);color:var(--accent-ink);
  padding:6px 10px;border-left:4px solid var(--accent-ink);
}
.f-summary{
  background:var(--surface);color:var(--text);
  border:3px solid var(--accent-ink);
  padding:clamp(16px,2vw,24px);margin:0 0 clamp(20px,2.4vw,32px);
}
.f-summary-h{font-size:clamp(20px,1.8vw,26px);margin:0 0 .5em}
.f-summary ul{margin:0;padding-left:1.1em}
.f-summary a{color:var(--accent-ink);font-weight:600}
.f-checks{
  display:grid;gap:12px;
  margin:clamp(22px,2.6vw,32px) 0 0;
  padding-top:clamp(18px,2vw,24px);
  border-top:5px solid var(--rule);
}
.f-row--check{gap:4px}
.check{display:flex;gap:12px;align-items:flex-start;font-weight:400;min-height:44px}
.check input[type="checkbox"]{
  flex:0 0 auto;width:28px;height:28px;margin:4px 0 0;
  accent-color:var(--accent-ink);
}
.f-legalnote{margin:clamp(18px,2vw,26px) 0 0;font-size:.96em}
.f-submit{margin:clamp(16px,2vw,24px) 0 0}
.f-privacy{
  margin:clamp(20px,2.4vw,30px) 0 0;font-size:.92em;max-width:76ch;
}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- 13. footer ---------- */

.foot{
  background:var(--invert-bg);
  color:var(--invert-fg);
  --band-fg:var(--invert-fg);
  padding:clamp(40px,5vw,72px) 0 clamp(24px,3vw,40px);
}
.foot a{color:var(--invert-fg)}
.foot-inner{display:grid;gap:clamp(24px,3vw,40px);grid-template-columns:1fr}
.foot-brand{font-family:var(--font-head);font-size:clamp(24px,2.2vw,34px);margin:0 0 .3em}
.foot-line{margin:0 0 1em;opacity:.88}
.foot-h{font-family:var(--font-head);font-size:clamp(17px,1.3vw,20px);letter-spacing:.1em;text-transform:uppercase;margin:0 0 .8em}
.foot-contact,.foot-nav{list-style:none;margin:0 0 1em;padding:0}
.foot-contact li,.foot-nav li{margin:0 0 .5em}
.foot-nav a,.foot-contact a{display:inline-block;min-height:28px}
.foot-bottom{
  margin-top:clamp(28px,3.2vw,44px);
  padding-top:clamp(20px,2.4vw,28px);
  border-top:2px solid currentColor;
}
.foot-note{max-width:94ch;font-size:.94em;margin:0 0 .8em}
.foot-copy{margin:0;font-size:.94em;opacity:.88}

/* ---------- 14. cookie notice ---------- */

.cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--invert-bg);color:var(--invert-fg);
  --band-fg:var(--invert-fg);--band-bg:var(--invert-bg);
  border-top:3px solid var(--accent-3);
  padding:clamp(16px,2vw,22px) 0;
}
.cookie[hidden]{display:none}
.cookie a{color:var(--invert-fg)}
.cookie-inner{display:grid;gap:16px}
.cookie-h{font-size:clamp(20px,1.8vw,26px);margin:0 0 .4em}
.cookie-text p{margin:0;max-width:76ch;font-size:.96em}
.cookie-acts{display:grid;gap:10px;grid-template-columns:1fr}
.cookie-btn{width:100%}
.cookie-noscript{margin:0;font-size:.92em;max-width:76ch}

.cdialog{
  border:3px solid var(--text);
  background:var(--surface);
  color:var(--text);
  padding:0;max-width:44rem;width:calc(100% - 2 * var(--gut));
}
.cdialog::backdrop{background:var(--text);opacity:.7}
.cdialog-form{padding:clamp(18px,2.4vw,32px)}
.cdialog-h{font-size:clamp(22px,2vw,30px);margin:0 0 .6em}
.cdialog-row{border:2px solid var(--muted);padding:14px;margin:0 0 12px}
.cdialog-acts{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.cdialog-note{margin:14px 0 0;font-size:.9em;color:var(--muted)}
.cdialog .btn--quiet{color:var(--text)}

/* ---------- 15. anchors and spacing ---------- */

[id]{scroll-margin-top:84px}

/* Anchor index: underlined headings in a row, not a tray of chips. */
.anchors{
  list-style:none;display:flex;flex-wrap:wrap;
  column-gap:clamp(20px,2.4vw,36px);row-gap:4px;
  margin:0 0 clamp(26px,3vw,44px);padding:0;
  border-top:5px solid var(--rule);
}
.anchors li{margin:0}
.anchors a{
  display:inline-flex;align-items:center;min-height:44px;padding:8px 0 6px;
  border-bottom:3px solid var(--rule);
  text-decoration:none;font-weight:600;
  font-family:var(--font-head);font-size:clamp(15px,1.2vw,19px);
  letter-spacing:.03em;
}

.fmt{border-top:5px solid var(--rule);padding-top:clamp(24px,3vw,40px);margin-top:clamp(32px,4vw,56px)}
.fmt:first-of-type{margin-top:0}
.fmt h2{font-size:clamp(26px,3vw,46px)}
.fmt-grid{display:grid;gap:clamp(20px,2.6vw,40px)}

/* Label, dotted leader, figure: the line reads like an index entry. */
.fmt-facts{list-style:none;margin:0 0 1.4em;padding:0;display:grid;gap:0}
.fmt-facts li{
  display:flex;align-items:baseline;gap:10px;margin:0;padding:9px 0;
  border-bottom:1px solid var(--rule);
}
.fmt-facts li>span{flex:0 0 auto}
.fmt-facts li::before{
  content:"";flex:1 1 auto;order:1;
  border-bottom:2px dotted currentColor;opacity:.55;
  transform:translateY(-.22em);
}
.fmt-facts b{
  order:2;flex:0 0 auto;
  font-family:var(--font-head);font-weight:400;font-size:1.2em;
  font-variant-numeric:tabular-nums;
}

/* ---------- 16. responsive ---------- */

@media (min-width:768px){
  :root{--gut:32px}
  .l{white-space:nowrap}
  .cols--2{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr 1fr}
  .hero-grid{grid-template-columns:1.2fr .8fr}
  .split{grid-template-columns:1fr 1fr}
  .f-grid{grid-template-columns:1fr 1fr}
  .kit{grid-template-columns:1fr 1fr}
  .foot-inner{grid-template-columns:1fr 1fr}
  .cookie-inner{grid-template-columns:1.4fr .6fr;align-items:center}
  .cookie-acts{grid-template-columns:1fr 1fr 1fr}
  .fmt-grid{grid-template-columns:1.1fr .9fr}
  .steps{grid-template-columns:1fr 1fr}
  .nav{display:block}
  .nav[data-open="true"]{position:static;background:transparent;border:0;padding:0}
  .burger{display:none}
  .top-inner{min-height:70px}
  .nav{display:flex;align-items:center;gap:clamp(14px,1.6vw,28px)}
  .nav-list{display:flex;gap:clamp(12px,1.4vw,24px);margin:0}
  .nav-list a{border:0;padding:6px 0;min-height:44px;display:inline-flex;align-items:center}
}

@media (min-width:1024px){
  :root{--gut:48px}
  .cards{grid-template-columns:1fr 1fr 1fr}
  .cols--3{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(4,1fr)}
  .kit{grid-template-columns:1fr 1fr}

  /* The enquiry form lies down: nine fields in three columns, the message
     across the full width, the confirmations in a row, and the button on
     the same line as the note above it. */
  .f-grid{grid-template-columns:repeat(3,1fr)}
  .f-checks{grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,32px)}
  .form{
    display:grid;
    grid-template-columns:1fr auto;
    column-gap:clamp(28px,3vw,56px);
    align-items:start;
  }
  .form>*{grid-column:1 / -1}
  .f-legalnote{grid-column:1;align-self:center;max-width:64ch}
  .f-submit{grid-column:2;align-self:center;margin-top:clamp(18px,2vw,26px)}
  .f-submit .btn--big{min-width:17rem}
}

@media (min-width:1280px){
  :root{--gut:88px}
  .kit{grid-template-columns:1fr 1fr 1fr}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* badge beside a format name */
.badge{
  display:inline-block;vertical-align:middle;
  font-family:var(--font-head);font-size:clamp(12px,.9vw,14px);
  letter-spacing:.14em;text-transform:uppercase;
  border:2px solid currentColor;padding:3px 10px;margin-left:.4em;
}
/* price figures stay coloured on neutral paper, never grey */
.band--n .card-price,.band--s .card-price,
.band--n .bigprice,.band--s .bigprice,
.band--n .step-n,.band--s .step-n,
.band--n .fmt-facts b,.band--s .fmt-facts b,
.band--n .hero-meta b,.band--s .hero-meta b{color:var(--accent-ink)}
.band--n .priceplate,.band--s .priceplate{background:var(--accent-ink);color:var(--on-ink)}
.band--n .priceplate .bigprice,.band--s .priceplate .bigprice{color:var(--on-ink)}
.band--n .lnk,.band--s .lnk{color:var(--accent-ink)}

/* The one obligatory exception of section 6.3: tables of prices and form
   fields always stand on --surface with their own --text, so the links
   inside them must leave the band foreground behind as well. Without this,
   a table on a coloured band paints white links on white paper. */
.band .tablewrap a,
.band .f-summary a,
.band .f-err a{color:var(--accent-ink)}
.band .tablewrap a:focus-visible,
.band .f-summary a:focus-visible{outline-color:var(--accent-ink)}

/* The note under the form carries links and sits on the band background,
   not on paper, so it keeps the band foreground at full strength. */
.f-privacy{opacity:1}

/* Chapter numbers keep the colour family even on neutral paper, so the
   page never shows a grey figure. */
.band--n .chapter,.band--s .chapter{color:var(--accent-3);opacity:.6}

/* Inside a programme block the kit list shares the row with the picture,
   so it stays at two columns: three would leave an orphan cell. */
@media (min-width:1280px){
  .fmt .kit{grid-template-columns:1fr 1fr}
}