/* Haymaker Arcade — site styles
   Colours, type and rules taken from the Haymaker brand system v1.0 (14 Aug 2026).
   Dark ground always. Bone carries the message. Red is a highlight, never a background.
   Never set small text in red on black (4.1:1 — display sizes only). */

@font-face{font-family:'Anton';src:url('fonts/Anton-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('fonts/BarlowCondensed-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Anton Fallback';src:local('Impact'),local('Haettenschweiler'),local('Arial Narrow Bold');size-adjust:93.1%;ascent-override:126.4%;descent-override:35.4%;line-gap-override:0%}
@font-face{font-family:'Barlow Fallback';src:local('Arial Narrow'),local('Helvetica Neue Condensed'),local('Roboto Condensed');size-adjust:84.2%;ascent-override:118.8%;descent-override:23.8%;line-gap-override:0%}
@font-face{font-family:'Inter Fallback';src:local('Arial'),local('Helvetica Neue'),local('Roboto');size-adjust:100.6%;ascent-override:96.3%;descent-override:24.0%;line-gap-override:0%}

/* The brand is dark-only, and the browser needs telling. Without this a browser assumes
   a light page and renders everything it draws itself to match: scrollbars come out pale
   grey on black, the dropdown on /contact opens as a white list, autofilled fields go
   yellow or pale blue, and the link preview in the corner is drawn light. Declaring it
   makes all of that follow the design instead of fighting it. */
:root{color-scheme:dark}

/* The scrollbar. Red thumb on a black track, which is the brand's own relationship: red
   is the highlight, never the ground. scrollbar-color is the standard property and the
   only one Firefox understands; the ::-webkit- rules below give Chrome and Safari the
   border, which scrollbar-color cannot express, so the thumb reads as outlined rather
   than as a solid bar. Set on :root so it applies to the page and is inherited by the
   scrolling boxes inside it, like the comparison table. */
:root{scrollbar-color:var(--red) var(--black);scrollbar-width:thin}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--black)}
::-webkit-scrollbar-thumb{
  background:var(--red);
  border:2px solid var(--black);
  border-radius:0;
}
::-webkit-scrollbar-thumb:hover{background:var(--bone)}
::-webkit-scrollbar-corner{background:var(--black)}

:root{
  --red:#EC1D25;
  --bone:#FBE8CA;
  --tan:#C1AD92;
  --black:#000;
  --offblack:#0B0B0B;
  --panel:#111010;
  --line:rgba(193,173,146,.22);
  --line-strong:rgba(193,173,146,.42);
  --wrap:1140px;
  --pad:clamp(20px,5vw,40px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
:target,[id]{scroll-margin-top:88px}
body{
  margin:0;background:var(--black);color:var(--bone);
  font-family:'Inter','Inter Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

img{max-width:100%;height:auto;display:block}
a{color:var(--bone);text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--red);outline-offset:3px}
/* The back-to-top button moves focus onto the h1 so the next Tab starts from the top of
   the page rather than from the bottom where the button was. That is the right behaviour
   and it stays. What is not right is the ring the browser then draws round the heading:
   Safari's is blue, it belongs to no part of this brand, and it appears round a heading
   nobody focused, so it reads as a rendering fault rather than as a focus indicator.
   Suppressing it is safe because tabindex="-1" means script-focusable but not reachable
   by Tab, so no keyboard user ever lands here expecting to see where they are. Screen
   readers still announce the heading. */
[tabindex="-1"]:focus{outline:none}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--bone);color:#000;padding:10px 16px;font-weight:700}

/* ---------- Type ---------- */
h1,h2,h3{
  font-family:'Anton','Anton Fallback',Impact,'Arial Narrow',sans-serif;
  font-weight:400;text-transform:uppercase;
  letter-spacing:-.01em;line-height:.94;margin:0;
}
h1{font-size:clamp(2.6rem,8.2vw,5.1rem)}
h2{font-size:clamp(2rem,5.4vw,3.4rem)}
h3{font-size:clamp(1.25rem,2.7vw,1.6rem);line-height:1.02}
.em{color:var(--red)}
.label{
  font-family:'Barlow Condensed','Barlow Fallback','Arial Narrow',Arial,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--tan);font-size:.95rem;margin:0 0 14px;
}
.lede{font-size:clamp(1.05rem,2.2vw,1.3rem);line-height:1.5;color:var(--bone);max-width:60ch}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
.muted{color:var(--tan)}
.small{font-size:.9rem;line-height:1.5}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:'Barlow Condensed','Barlow Fallback','Arial Narrow',Arial,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;font-size:1.2rem;
  padding:15px 26px;border:2px solid transparent;cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
  min-height:52px;text-align:center;
}
.btn-primary{background:var(--red);color:#fff;border-color:var(--red)}
.btn-primary:hover{background:#fff;color:#000;border-color:#fff}
.btn-ghost{background:transparent;color:var(--bone);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--bone);background:rgba(251,232,202,.08)}
.btn-wa{background:var(--panel);color:var(--bone);border-color:#25D366}
.btn-wa:hover{background:#25D366;color:#000;border-color:#25D366}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Header ---------- */
.hdr{
  position:sticky;top:0;z-index:80;background:rgba(0,0,0,.94);
  backdrop-filter:saturate(120%) blur(6px);
  border-bottom:1px solid var(--line);
}
.hdr-in{display:flex;align-items:center;gap:20px;min-height:64px;max-width:var(--wrap);margin:0 auto;padding:6px var(--pad)}
.brand{display:block;flex:0 0 auto;line-height:0}
/* Brand system sets a 220px minimum logo width for legibility ("ARCADE" fills in below it).
   A sticky header cannot carry 220px, so this is the largest size that still leaves a usable
   header. Replace logo-560.png with the original vector (.svg) and this reads crisply. */
.brand img{width:94px;height:auto}
@media(min-width:900px){.brand img{width:118px}}
.nav{margin-left:auto;display:none;align-items:center;gap:24px}
@media(min-width:1060px){.nav{display:flex}}
.nav a{
  font-family:'Barlow Condensed','Barlow Fallback','Arial Narrow',Arial,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:1.02rem;
  padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap;
}
.nav a:hover{border-bottom-color:var(--red)}
.nav a[aria-current="page"]{border-bottom-color:var(--red);color:#fff}
.hdr .btn{padding:11px 18px;font-size:1.18rem;min-height:44px}
.hdr-cta{display:none;margin-left:6px;white-space:nowrap}
@media(min-width:1060px){.hdr-cta{display:inline-flex}}
/* The mobile menu is a <details>, so it works with JavaScript switched off or failed.
   The panel is positioned against the sticky header rather than sitting inside the
   header's flex row. */
.burger-wrap{margin-left:auto}
@media(min-width:1060px){.burger-wrap{display:none}}
.burger{
  display:inline-flex;align-items:center;gap:8px;background:none;list-style:none;
  border:2px solid var(--line-strong);color:var(--bone);padding:9px 14px;min-height:44px;
  font-family:'Barlow Condensed','Barlow Fallback','Arial Narrow',Arial,sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:1rem;cursor:pointer;
}
.burger::-webkit-details-marker{display:none}
.burger::after{content:"+";font-family:'Anton','Anton Fallback',Impact,sans-serif;line-height:1}
.burger-wrap[open] .burger::after{content:"\2013"}
.mnav{
  position:absolute;left:0;right:0;top:100%;
  border-top:1px solid var(--line);background:var(--offblack);
  max-height:calc(100vh - 64px);overflow-y:auto;
}
.mnav a{
  display:block;padding:16px var(--pad);border-bottom:1px solid var(--line);
  font-family:'Barlow Condensed','Barlow Fallback','Arial Narrow',Arial,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:1.15rem;
}
/* The action the desktop header carries, which was display:none below 1060px, so the
   phone menu was seven grey links and nothing to press. Full width and last, so it
   closes the list rather than competing with the nav above it. The 1.2rem is not a style
   choice: white on this red is 4.40:1, which clears AA as large text at 18.66px bold and
   does not clear it below. The 1.15rem of the links either side is 18.4px. */
/* Selector is .mnav a.mnav-cta, not .mnav-cta: `.mnav a` is more specific than a lone
   class, so the font-size below was silently losing to it and the row rendered at
   18.4px. That is not cosmetic here, see the size note above. */
.mnav a.mnav-cta{
  background:var(--red);color:#fff;border-bottom:0;font-size:1.2rem;
  padding-top:19px;padding-bottom:19px;
}
.mnav a.mnav-cta:hover,.mnav a.mnav-cta:focus{background:#fff;color:#000}

/* ---------- Sections ---------- */
section{padding:clamp(56px,9vw,104px) 0}
.alt{background:var(--offblack);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{max-width:70ch;margin-bottom:clamp(28px,4vw,48px)}
.sec-head p{margin-top:16px}

/* ---------- Hero ---------- */
.hero{
  padding:clamp(52px,9vw,116px) 0 clamp(44px,7vw,84px);
  border-bottom:1px solid var(--line);position:relative;
}
.hero h1{margin-bottom:22px;max-width:19ch}
.hero .lede{margin-bottom:30px}

/* ---------- Hero with image ---------- */
.hero-grid{display:grid;gap:clamp(30px,4vw,52px);align-items:center}
@media(min-width:920px){.hero-grid{grid-template-columns:1.12fr .88fr}}
.hero-grid h1{max-width:none}

/* ---------- Photography ---------- */
.shot{border:1px solid var(--line-strong);background:var(--offblack);overflow:hidden;line-height:0}
.shot img{width:100%;height:auto}
.shot figcaption{
  padding:12px 14px;line-height:1.35;
  font-family:'Barlow Condensed','Barlow Fallback','Arial Narrow',Arial,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;font-size:.92rem;color:var(--tan);
  border-top:1px solid var(--line);
}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:820px){.gallery{grid-template-columns:repeat(4,1fr)}}
.split{display:grid;gap:clamp(24px,3.5vw,44px);align-items:center}
@media(min-width:860px){.split{grid-template-columns:1fr 1fr}.split.narrow-img{grid-template-columns:1.25fr .75fr}}

/* ---------- The split maths ---------- */
.maths{display:grid;gap:2px;grid-template-columns:1fr;margin:10px 0 18px}
@media(min-width:640px){.maths{grid-template-columns:repeat(3,1fr)}}
.maths div{background:var(--panel);border:1px solid var(--line);padding:22px}
.maths .k{
  font-family:'Barlow Condensed','Barlow Fallback','Arial Narrow',Arial,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:.95rem;color:var(--tan);
  display:block;margin-bottom:8px;
}
.maths .n{font-family:'Anton','Anton Fallback',Impact,'Arial Narrow',sans-serif;font-size:clamp(2.1rem,5.5vw,3rem);line-height:.95;display:block}
.maths .yours .n{color:var(--red)}
.disclaim{font-size:.88rem;color:var(--tan);max-width:62ch}

/* ---------- Interactive: punch meter ---------- */
.punch{
  border:1px solid var(--line-strong);background:var(--panel);
  padding:clamp(22px,3.2vw,36px);
}
.punch-stage{display:grid;gap:clamp(20px,3vw,34px)}
@media(min-width:820px){.punch-stage{grid-template-columns:1fr 300px;align-items:center}}
.meter{
  position:relative;height:clamp(52px,8vw,68px);background:#000;
  border:2px solid var(--line-strong);overflow:hidden;
}
.meter-zones{position:absolute;inset:0;display:flex}
.meter-zones i{flex:1;border-right:1px solid rgba(0,0,0,.55)}
.meter-zones i:nth-child(1){background:#3a2f24}
.meter-zones i:nth-child(2){background:#6b4a20}
.meter-zones i:nth-child(3){background:#9c5f1c}
.meter-zones i:nth-child(4){background:#c4451f}
.meter-zones i:nth-child(5){background:var(--red);border-right:0}
.needle{
  position:absolute;top:-2px;bottom:-2px;width:5px;background:var(--bone);
  left:0;box-shadow:0 0 0 1px #000;will-change:transform;
}
.meter-scale{
  display:flex;justify-content:space-between;margin-top:8px;
  font-family:'Barlow Condensed','Barlow Fallback','Arial Narrow',Arial,sans-serif;font-weight:700;
  letter-spacing:.06em;font-size:.82rem;color:var(--tan);
}
.readout{
  border:1px solid var(--line);background:#000;padding:20px;text-align:center;
}
.readout .score{
  font-family:'Anton','Anton Fallback',Impact,'Arial Narrow',sans-serif;font-size:clamp(3.4rem,11vw,4.6rem);
  line-height:.88;color:var(--red);display:block;font-variant-numeric:tabular-nums;
}
.readout .verdict{
  font-family:'Barlow Condensed','Barlow Fallback','Arial Narrow',Arial,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;font-size:1.12rem;
  color:var(--bone);display:block;margin-top:8px;min-height:1.4em;
}
.readout .best{
  font-family:'Barlow Condensed','Barlow Fallback','Arial Narrow',Arial,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:.9rem;
  color:var(--tan);display:block;margin-top:14px;
}
.punch-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.punch-hint{
  font-family:'Barlow Condensed','Barlow Fallback','Arial Narrow',Arial,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--tan);
  font-size:.95rem;margin:14px 0 0;
}

/* ---------- Interactive: calculator ---------- */
.calc{display:grid;gap:2px}
@media(min-width:900px){.calc{grid-template-columns:1.05fr .95fr}}
.calc-in,.calc-out{background:var(--panel);border:1px solid var(--line);padding:clamp(22px,3vw,32px)}
.calc-out{background:#000;border-color:var(--red)}
.ctrl{margin-bottom:24px}
.ctrl:last-child{margin-bottom:0}
.ctrl-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:10px}
.ctrl label{
  font-family:'Barlow Condensed','Barlow Fallback','Arial Narrow',Arial,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:1rem;color:var(--tan);
}
.ctrl output{
  font-family:'Anton','Anton Fallback',Impact,'Arial Narrow',sans-serif;font-size:1.5rem;color:var(--bone);
  font-variant-numeric:tabular-nums;
}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:44px;
  background:transparent;border:0;padding:0;min-height:0;cursor:pointer;
  touch-action:pan-y;
}
input[type=range]::-webkit-slider-runnable-track{height:8px;background:#2A2724;border:1px solid var(--line)}
input[type=range]::-moz-range-track{height:8px;background:#2A2724;border:1px solid var(--line)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:32px;height:32px;background:var(--red);
  border:2px solid #000;margin-top:-13px;cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:32px;height:32px;background:var(--red);border:2px solid #000;border-radius:0;cursor:pointer;
}
/* Coarse pointers get a bigger handle again — a fingertip is about 9mm across. */
@media(pointer:coarse){
  input[type=range]{height:52px}
  input[type=range]::-webkit-slider-thumb{width:38px;height:38px;margin-top:-16px}
  input[type=range]::-moz-range-thumb{width:38px;height:38px}
}
.presets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.preset{
  background:transparent;border:1px solid var(--line-strong);color:var(--bone);
  font-family:'Barlow Condensed','Barlow Fallback','Arial Narrow',Arial,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;font-size:.95rem;
  padding:11px 15px;cursor:pointer;min-height:46px;
}
.preset:hover,.preset[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#000}
.calc-rows{list-style:none;margin:0 0 4px;padding:0}
.calc-rows li{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--line);
}
.calc-rows .k{
  font-family:'Barlow Condensed','Barlow Fallback','Arial Narrow',Arial,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:.98rem;color:var(--tan);
}
.calc-rows .v{font-family:'Anton','Anton Fallback',Impact,'Arial Narrow',sans-serif;font-size:1.55rem;font-variant-numeric:tabular-nums}
.calc-rows li.head{border-bottom:2px solid var(--red);padding-top:20px}
.calc-rows li.head .k{color:var(--bone);font-size:1.1rem}
.calc-rows li.head .v{font-size:clamp(2.3rem,6vw,3.1rem);color:var(--red);line-height:.95}

/* ---------- Highlight callout ---------- */
.callout{border-left:3px solid var(--red);padding:4px 0 4px 22px;margin:26px 0}
.callout p{font-size:clamp(1.05rem,2.2vw,1.22rem);line-height:1.45}

/* ---------- Coverage columns ---------- */
.cols{columns:2;column-gap:30px;list-style:none;margin:0;padding:0}
@media(min-width:760px){.cols{columns:4}}
.cols li{margin-bottom:9px;break-inside:avoid;color:var(--bone)}

/* ---------- Trust strip ---------- */
.strip{border-bottom:1px solid var(--line);background:var(--offblack)}
.strip ul{
  list-style:none;margin:0;padding:20px var(--pad);max-width:var(--wrap);
  margin-inline:auto;display:grid;gap:12px 30px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media(min-width:800px){.strip ul{grid-template-columns:repeat(5,minmax(0,1fr))}}
.strip li{
  font-family:'Barlow Condensed','Barlow Fallback','Arial Narrow',Arial,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;font-size:1.02rem;
  display:flex;align-items:flex-start;gap:10px;line-height:1.2;
}
.strip li::before{content:"";flex:0 0 auto;width:10px;height:10px;background:var(--red);margin-top:4px}

/* ---------- Grids & cards ---------- */
.grid{display:grid;gap:clamp(16px,2.4vw,24px)}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
@media(min-width:720px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}}

.card{
  background:var(--panel);border:1px solid var(--line);
  padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;
}
.card h3{margin-bottom:14px}
.card .label{margin-bottom:10px}
.card-foot{margin-top:auto;padding-top:20px}
.card{transition:border-color .15s ease}
.card:has(a:hover){border-color:var(--line-strong)}
.card-lead{border-color:var(--red)}
.tag{
  display:inline-block;background:var(--red);color:#000;
  font-family:'Barlow Condensed','Barlow Fallback','Arial Narrow',Arial,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:.95rem;
  padding:4px 10px;margin-bottom:14px;
}
.ticks{list-style:none;margin:0 0 4px;padding:0}
.ticks li{position:relative;padding-left:26px;margin-bottom:10px;line-height:1.45}
.ticks li::before{
  content:"";position:absolute;left:0;top:.45em;width:12px;height:2px;background:var(--red)
}

/* ---------- Numbered steps ---------- */
.steps{counter-reset:s;list-style:none;margin:0;padding:0;display:grid;gap:2px}
.steps li{
  counter-increment:s;background:var(--panel);border:1px solid var(--line);
  padding:clamp(20px,3vw,28px);display:grid;grid-template-columns:auto 1fr;
  gap:0 20px;align-items:start;
}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  font-family:'Anton','Anton Fallback',Impact,'Arial Narrow',sans-serif;font-size:clamp(1.8rem,4vw,2.5rem);
  line-height:.9;color:var(--red);
}
.steps h3{margin-bottom:8px}
.steps p{grid-column:2}

/* ---------- Coverage / pills ---------- */
.pills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.pills li{
  border:1px solid var(--line-strong);padding:9px 15px;
  font-family:'Barlow Condensed','Barlow Fallback','Arial Narrow',Arial,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;font-size:1rem;color:var(--bone);
}

/* ---------- Pull quotes ---------- */
blockquote{
  margin:0;border-left:3px solid var(--red);padding-left:22px;
  font-size:clamp(1.1rem,2.4vw,1.4rem);line-height:1.42;
}
blockquote cite{
  display:block;margin-top:14px;font-style:normal;
  font-family:'Barlow Condensed','Barlow Fallback','Arial Narrow',Arial,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:1rem;color:var(--tan);
}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
  font-family:'Barlow Condensed','Barlow Fallback','Arial Narrow',Arial,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(1.1rem,2.4vw,1.32rem);line-height:1.25;color:var(--bone);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:'Anton','Anton Fallback',Impact,sans-serif;font-size:1.7rem;color:var(--red);line-height:1;
}
.faq details[open] summary::after{content:"–"}
.faq .ans{padding:0 0 24px;max-width:70ch}

/* ---------- Form ---------- */
form{max-width:620px}
.field{margin-bottom:20px}
.field label{
  display:block;margin-bottom:8px;
  font-family:'Barlow Condensed','Barlow Fallback','Arial Narrow',Arial,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:1rem;color:var(--tan);
}
.field .hint{font-size:.85rem;color:var(--tan);margin-top:7px;text-transform:none;letter-spacing:0;font-family:'Inter','Inter Fallback',Arial,sans-serif;font-weight:400}
input,select,textarea{
  width:100%;background:var(--offblack);color:var(--bone);
  border:1px solid var(--line-strong);padding:14px 15px;
  font-family:'Inter','Inter Fallback',Arial,sans-serif;font-size:16px;min-height:52px;border-radius:0;
}
textarea{min-height:120px;resize:vertical}

/* The dropdown. The native arrow sits wherever the platform puts it, which on this form
   was hard against the right edge and a different distance from it in every browser.
   appearance:none takes it off and the chevron below replaces it, drawn in bone at the
   same angle as the carousel arrows and the back-to-top button, and positioned where it
   was asked to be. padding-right leaves room for it so a long option label cannot run
   underneath. */
select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:46px;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%229%22%20viewBox%3D%220%200%2014%209%22%3E%3Cpath%20d%3D%22M1%201.5%207%207.5%2013%201.5%22%20fill%3D%22none%22%20stroke%3D%22%23FBE8CA%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:14px 9px;
  cursor:pointer;
}
select:hover{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%229%22%20viewBox%3D%220%200%2014%209%22%3E%3Cpath%20d%3D%22M1%201.5%207%207.5%2013%201.5%22%20fill%3D%22none%22%20stroke%3D%22%23FBE8CA%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E")}
/* The open list is drawn by the operating system, so this is as far as CSS reaches. It
   works in Chrome and Edge on Windows and Linux and in Firefox everywhere; macOS draws
   its own popup and ignores it, which colour-scheme:dark at least keeps dark. */
select option{background:var(--offblack);color:var(--bone)}
select option:checked{background:var(--red);color:#fff}
/* Autofill. Chrome paints its own background on a field it has filled and will not let
   background-color override it, so the only way through is a huge inset box-shadow, which
   is drawn on top. Since the page declares a dark colour scheme, Chrome's default here is
   a navy that belongs to no part of this brand. The transition delay is the other half of
   the trick: Chrome re-applies its colour a moment after paint, and a transition long
   enough never to finish means the override wins both times. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--bone);
  -webkit-box-shadow:0 0 0 1000px var(--offblack) inset;
  box-shadow:0 0 0 1000px var(--offblack) inset;
  caret-color:var(--bone);
  border:1px solid var(--line-strong);
  transition:background-color 100000s ease-in-out 0s;
}
/* Firefox uses its own property and does honour a normal background. */
input:autofill,textarea:autofill,select:autofill{
  background:var(--offblack);color:var(--bone);
}
input:hover,select:hover,textarea:hover{border-color:var(--bone)}
.req{color:var(--red)}
.formnote{margin-top:16px;font-size:.86rem;color:var(--tan);max-width:52ch}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Big CTA band ---------- */
.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--offblack)}
.band h2{margin-bottom:18px;max-width:22ch}
.band .lede{margin-bottom:28px}

/* ---------- Skip link ----------
   Off-screen until focused, then it lands in the top-left over the sticky header. Not
   display:none, which would take it out of the tab order and defeat the point. */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--red);color:#fff;padding:12px 18px;
  font-family:'Barlow Condensed','Barlow Fallback','Arial Narrow',Arial,sans-serif;
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;
}
.skip:focus{left:0}

/* ---------- Quick enquiry form in the CTA band ----------
   Three fields side by side on a desktop, stacked on a phone. Every CTA on the site
   used to point at /contact, which put a page load between deciding to enquire and
   being able to, so the form is now in the band itself. Fields keep the same look as
   the full form on /contact: this is the same form, shorter, not a different one. */
/* form{max-width:620px} above is right for the single-column form on /contact and
   far too narrow for three fields side by side, which is why this overrides it. */
.quickform{margin-top:4px;max-width:960px}
.qf-row{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:720px){.qf-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
.quickform .field{margin-bottom:0}
.quickform .qf-actions{margin-top:20px}
.quickform .formnote{margin-top:14px}

/* ---------- Contact rows ---------- */
.crows{list-style:none;margin:0;padding:0}
.crows li{border-top:1px solid var(--line);padding:18px 0;display:grid;gap:4px}
.crows li:last-child{border-bottom:1px solid var(--line)}
.crows .k{
  font-family:'Barlow Condensed','Barlow Fallback','Arial Narrow',Arial,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:.95rem;color:var(--tan);
}
.crows .v{font-size:1.1rem;font-weight:700}
/* These are the tap-to-call, tap-to-WhatsApp and tap-to-email targets, and they were
   22px tall on a phone: the text and nothing else. The padding takes the hit area to
   44px and the negative margin gives it back, so nothing moves. The underline is
   text-decoration rather than a border for the same reason: a border sits on the
   padding box and would drop 11px away from the text. There is 18px of row padding
   either side, so enlarged targets in adjacent rows still cannot touch. */
.crows .v a{
  display:inline-block;padding:11px 0;margin:-11px 0;
  text-decoration:underline;text-decoration-color:var(--line-strong);
  text-decoration-thickness:1px;text-underline-offset:4px;
}
.crows .v a:hover{text-decoration-color:var(--red)}

/* ---------- Footer ---------- */
footer{background:var(--black);padding:clamp(44px,6vw,72px) 0 140px;border-top:1px solid var(--line)}
@media(min-width:760px){footer{padding-bottom:clamp(44px,6vw,72px)}}
.f-grid{display:grid;gap:34px}
@media(min-width:760px){.f-grid{grid-template-columns:1.3fr 1fr 1fr}}
footer .brand img{height:62px;width:auto;margin-bottom:18px}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:10px}
/* 20px of text was the whole tap target. 5px either side takes it to 30px, which clears
   the 24px minimum, and the negative margin means the footer is exactly as tall as it
   was. Not more than 5px: the gap between links is 10px, and targets that overlap cause
   worse mis-taps than targets that are merely small. */
footer li a{display:inline-block;padding:5px 0;margin:-5px 0}
footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.f-h{
  font-family:'Barlow Condensed','Barlow Fallback','Arial Narrow',Arial,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:1rem;color:var(--tan);margin:0 0 14px;
}
.f-base{
  margin-top:38px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:8px 24px;font-size:.85rem;color:var(--tan);
}

/* The statutory company disclosure. Quiet by design: it is a legal requirement and a
   thing to be looked up, not read. Sits below the rest of the footer base. */
.f-legal{
  margin:14px 0 0;max-width:80ch;font-size:.78rem;line-height:1.55;color:var(--tan);
}
.f-legal .nw{white-space:nowrap}

/* ---------- Back to top ----------
   Square, like everything else. Sits above the mobile action bar rather than on top of
   it, and clears the home indicator on a phone. Hidden until the script says otherwise,
   which also means it never appears on a page short enough not to need it. */
.to-top{
  position:fixed;right:clamp(14px,3vw,26px);z-index:85;
  bottom:calc(68px + env(safe-area-inset-bottom));
  width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  background:var(--panel);border:1px solid var(--line-strong);color:var(--bone);
  opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .2s linear,transform .2s linear,background .15s linear;
}
@media(min-width:760px){.to-top{bottom:clamp(14px,3vw,26px)}}
.to-top.on{opacity:1;pointer-events:auto;transform:none}
.to-top:hover{background:var(--red);border-color:var(--red);color:#fff}
.to-top:focus-visible{outline:2px solid var(--red);outline-offset:3px}
/* Drawn, not typed: none of the four subset faces carries an arrow glyph. */
.to-top .chev{
  display:block;width:11px;height:11px;margin-top:4px;
  border-left:2px solid currentColor;border-top:2px solid currentColor;
  transform:rotate(45deg);
}
@media(prefers-reduced-motion:reduce){.to-top{transition:none}}

/* ---------- Sticky mobile action bar ---------- */
.actionbar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:grid;
  grid-template-columns:1fr 1fr;gap:1px;background:var(--line-strong);
  border-top:1px solid var(--line-strong);
  padding-bottom:env(safe-area-inset-bottom);
}
@media(min-width:760px){.actionbar{display:none}}
.actionbar a{
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:56px;background:#0B0B0B;color:var(--bone);
  font-family:'Barlow Condensed','Barlow Fallback','Arial Narrow',Arial,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;font-size:1.18rem;
}
.actionbar a.call{background:var(--red);color:#fff}

/* ---------- Form status message ---------- */
.formstatus{
  margin:16px 0 0;font-size:.95rem;line-height:1.45;max-width:52ch;min-height:1px;
}
.formstatus.err{
  color:var(--bone);background:rgba(236,29,37,.14);border-left:3px solid var(--red);
  padding:12px 15px;font-weight:700;
}
.formstatus.ok{
  color:var(--bone);background:rgba(37,211,102,.12);border-left:3px solid #25D366;
  padding:12px 15px;font-weight:700;
}

/* ---------- Breadcrumbs ---------- */
.crumbs{border-bottom:1px solid var(--line);background:var(--offblack)}
.crumbs ol{
  list-style:none;margin:0 auto;padding:11px var(--pad);max-width:var(--wrap);
  display:flex;flex-wrap:wrap;align-items:center;gap:0 9px;
  font-family:'Barlow Condensed','Barlow Fallback','Arial Narrow',Arial,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;font-size:.92rem;color:var(--tan);
}
.crumbs li{display:flex;align-items:center;gap:9px}
.crumbs li+li::before{content:"/";color:var(--line-strong)}
.crumbs a{color:var(--tan)}
.crumbs a:hover{color:var(--bone)}
.crumbs [aria-current="page"]{color:var(--bone)}

/* ---------- Key facts panel ----------
   A compact, self-contained answer block. Human readers scan it; answer engines
   quote it, because every line is a confirmed fact with no surrounding hedging. */
.facts{
  border:1px solid var(--line-strong);border-left:3px solid var(--red);
  background:var(--panel);padding:clamp(20px,3vw,30px);margin:0;
  display:grid;gap:0;
}
@media(min-width:720px){.facts{grid-template-columns:auto 1fr;column-gap:32px}}
.facts dt{
  font-family:'Barlow Condensed','Barlow Fallback','Arial Narrow',Arial,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:.95rem;color:var(--tan);
  padding-top:11px;
}
.facts dd{margin:0;padding:0 0 11px;border-bottom:1px solid var(--line)}
@media(min-width:720px){
  .facts dt{border-bottom:1px solid var(--line);padding-bottom:11px}
  .facts dd{padding-top:11px}
}
.facts dt:first-of-type{padding-top:0}
@media(min-width:720px){.facts dd:first-of-type{padding-top:0}}
.facts>:nth-last-child(-n+2){border-bottom:0;padding-bottom:0}

/* ---------- Comparison table ---------- */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line)}
.ctable{border-collapse:collapse;width:100%;min-width:640px;font-size:.98rem}
.ctable th,.ctable td{
  text-align:left;padding:15px 18px;border-bottom:1px solid var(--line);vertical-align:top;
}
.ctable thead th{
  background:var(--panel);color:var(--bone);
  font-family:'Barlow Condensed','Barlow Fallback','Arial Narrow',Arial,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:1.05rem;
  border-bottom:2px solid var(--line-strong);
}
.ctable thead th.pick{border-bottom-color:var(--red)}
.ctable tbody th{
  font-family:'Barlow Condensed','Barlow Fallback','Arial Narrow',Arial,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;font-size:.95rem;color:var(--tan);
  white-space:nowrap;
}
.ctable tbody tr:last-child th,.ctable tbody tr:last-child td{border-bottom:0}
.ctable td.pick{background:rgba(236,29,37,.07)}
.tbl-note{font-size:.86rem;color:var(--tan);margin-top:12px}

/* On a phone the table is wider than the screen and scrolls inside its own box, which is
   right, but 640px of table in a 390px window meant the first data column filled the view
   and the cut at the right edge read as the end of the table rather than the middle of
   it. On the one page whose whole job is comparing three options, two of them were
   undiscoverable. Letting the row labels wrap and tightening the padding gets the table to
   560px, so the next column is always cut mid-cell and reads as more to come. The note
   says it outright as well, because an affordance you have to notice is worse than a
   sentence. Both are mobile-only: at desktop widths the whole table fits. */
.tbl-swipe{display:none}
@media(max-width:700px){
  .tbl-swipe{
    display:block;margin:0 0 10px;font-size:.85rem;color:var(--tan);
    font-family:'Barlow Condensed','Barlow Fallback','Arial Narrow',Arial,sans-serif;
    font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  }
  .ctable{min-width:560px;font-size:.92rem}
  .ctable th,.ctable td{padding:12px 11px}
  .ctable tbody th{white-space:normal}
  .ctable thead th{font-size:.95rem}
}

/* On a phone the table is wider than the screen and scrolls inside its own box, which
   is right, but at 640px of table in a 390px window the first data column filled the
   view and the cut at the right edge looked like the end of the table rather than the
   middle of it. On the one page whose whole job is comparing three options, two of them
   were undiscoverable. Letting the row labels wrap and tightening the padding gets the
   table down to 560px, so the next column is always cut mid-cell and reads as more to
   come. The note says so outright, because an affordance you have to notice is worse
   than a sentence. Both are mobile-only: at desktop widths the whole table fits. */
.tbl-swipe{display:none}
@media(max-width:700px){
  .tbl-swipe{
    display:block;margin:0 0 10px;font-size:.85rem;color:var(--tan);
    font-family:'Barlow Condensed','Barlow Fallback','Arial Narrow',Arial,sans-serif;
    font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  }
  .ctable{min-width:560px;font-size:.92rem}
  .ctable th,.ctable td{padding:12px 11px}
  .ctable tbody th{white-space:normal}
  .ctable thead th{font-size:.95rem}
}

/* ---------- Long-form prose (privacy, guides) ---------- */
.prose{max-width:70ch}
.prose h2{font-size:clamp(1.5rem,3.4vw,2.1rem);margin:44px 0 16px}
.prose h2:first-child{margin-top:0}
.prose h3{margin:30px 0 10px}
.prose ul{padding-left:20px;margin:0 0 1em}
.prose li{margin-bottom:8px}
.prose a{border-bottom:1px solid var(--line-strong)}
.prose a:hover{border-bottom-color:var(--red)}

/* ---------- Wide landscape image ---------- */
.shot-wide img{aspect-ratio:16/10;object-fit:cover}

/* ---------- Inline text links inside body copy ---------- */
.lnk{border-bottom:1px solid var(--line-strong)}
.lnk:hover{border-bottom-color:var(--red)}

/* ---------- Print ---------- */
@media print{
  .hdr,.actionbar,.crumbs,.punch,.calc,.skip,footer .f-grid>div:last-child{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  h1,h2,h3{color:#000}
  .em{color:#000}
  .card,.facts,.shot{border-color:#999;background:#fff}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  section{padding:18px 0}
}

/* ---------- Pills that are links ---------- */
.pills li:has(a){padding:0}
.pills li a{display:block;padding:9px 15px}
.pills li:has(a):hover{border-color:var(--red)}

/* ---------- Spacing fixes ----------
   Headings are margin:0 by default, which is right inside .sec-head and .card where
   a sibling rule already sets the gap. In .split blocks the h2 sits directly on top
   of its paragraph with nothing between them. */
.split h2+p,.split h2+ul,.split h3+p{margin-top:18px}

/* A hero that follows the breadcrumb bar does not need its full top padding as well —
   the two together left a dead band across the top of every inner page. */
.crumbs+main .hero{padding-top:clamp(34px,5vw,68px)}

/* ---------- Named venue proof ----------
   The one thing no competitor in this category has: a venue willing to be named.
   Treated as evidence rather than marketing — the venue name, what kind of place it
   is and where it is are as important as the words, because those are the parts a
   sceptical landlord can go and check. */
/* auto-fit rather than a fixed two columns: one quote fills the row instead of
   sitting in half of it with a hole beside it, and it becomes a grid as more arrive. */
/* ---------- Named venue quotes: scroll-snap slider ----------
   A scroll track rather than a JavaScript carousel, so that with the script gone it is
   still a swipeable row containing every quote. The arrows and dots are display:none
   until the script adds .is-live, which is what stops a no-JS visitor being shown
   buttons that do nothing. One quote per view on a phone, two on a desktop. */
.proof-slider{position:relative}
/* Base state, and what a visitor without JavaScript gets: an ordinary horizontal scroll
   area with every quote in it, swipeable on a phone. The script then takes the overflow
   away and drives the same row with a transform instead, which is the only way to get a
   consistent eased animation. Native smooth scrolling has a different duration and curve
   in every browser and cannot be dragged. */
.proof-view{
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.proof-view::-webkit-scrollbar{display:none}
.proof-view:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.proof{display:flex;gap:2px}
.proof>.proof-item{flex:0 0 100%;scroll-snap-align:start}
@media(min-width:860px){.proof>.proof-item{flex:0 0 calc(50% - 1px)}}
/* A single quote is not a slider. It fills the row and keeps the wider type it had. */
.proof>.proof-item:only-child{flex:0 0 100%}

.proof-slider.is-live .proof-view{overflow:hidden;scroll-snap-type:none;touch-action:pan-y}
.proof-slider.is-live .proof{
  will-change:transform;
  transition:transform .62s cubic-bezier(.22,.61,.36,1);
}
/* While a finger is down the card has to track it exactly, so no easing. */
.proof-slider.is-live .proof.is-dragging{transition:none}
@media(prefers-reduced-motion:reduce){
  .proof-slider.is-live .proof{transition:none}
}

.proof-nav{display:none}
.proof-slider.is-live .proof-nav{
  display:flex;align-items:center;gap:14px;margin-top:2px;
  background:var(--panel);border:1px solid var(--line);padding:12px clamp(16px,2.4vw,22px);
}
.proof-arrow{
  flex:0 0 auto;width:46px;height:46px;display:inline-flex;align-items:center;
  justify-content:center;background:none;color:var(--bone);
  border:1px solid var(--line-strong);font-size:1.15rem;line-height:1;cursor:pointer;
  transition:background .15s linear,color .15s linear,border-color .15s linear;
}
.proof-arrow:hover:not(:disabled){background:var(--red);border-color:var(--red);color:#fff}
/* Drawn rather than typed. None of the four faces carries an arrow glyph, and the check
   that subsets the fonts caught it: a &larr; would have rendered in the fallback, which
   at this size reads as a different weight to everything around it. Two borders on a
   rotated box is also sharper at any scale than a character would be. */
.proof-arrow .chev{
  display:block;width:10px;height:10px;
  border-left:2px solid currentColor;border-bottom:2px solid currentColor;
}
.proof-arrow[data-prev] .chev{transform:rotate(45deg);margin-left:4px}
.proof-arrow[data-next] .chev{transform:rotate(-135deg);margin-right:4px}
.proof-arrow:disabled{opacity:.35;cursor:default}
.proof-dots{display:flex;flex-wrap:wrap;gap:8px;margin-right:auto}
.proof-dot{
  width:26px;height:8px;padding:0;border:0;cursor:pointer;
  background:var(--line-strong);transition:background .2s linear;
}
.proof-dot.on{background:var(--red)}
.proof-dot:hover{background:var(--tan)}

/* The venues without a quote arrive as you reach them. The hiding class is added by the
   script, never in the markup, so a failed script leaves the names on screen rather than
   an empty row. Skipped entirely under prefers-reduced-motion. */
.venues.reveal>.vn{opacity:0;transform:translateY(14px)}
.venues.reveal>.vn.in{
  opacity:1;transform:none;
  transition:opacity .5s ease-out,transform .5s ease-out;
}
@media(prefers-reduced-motion:reduce){
  .venues.reveal>.vn{opacity:1;transform:none}
  .proof{scroll-behavior:auto}
}
/* A lone quote is the whole argument on that page, so give it room to be read. */
.proof-item:only-child blockquote{font-size:clamp(1.2rem,2.7vw,1.6rem);max-width:46ch}
.proof-item{
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--red);
  padding:clamp(24px,3.2vw,34px);display:flex;flex-direction:column;
}
.proof-item blockquote{border:0;padding:0;margin:0 0 22px;font-size:clamp(1.1rem,2.3vw,1.35rem);line-height:1.45}
/* A real opening quote mark, in the display face at display size. Decorative, so it is
   aria-hidden by being a ::before with no text node: a screen reader announces the
   blockquote, and hearing "left double quotation mark" first would only get in the way.
   All four subset faces carry U+201C, checked before this was written, because content
   set in CSS never appears in the HTML and the font check would not have caught it. */
.proof-item blockquote::before{
  content:"\201C";
  font-family:'Anton','Anton Fallback',Impact,sans-serif;
  font-size:clamp(3rem,6vw,4.4rem);line-height:.62;color:var(--red);
  display:block;margin-bottom:10px;
}
.proof-item blockquote p{margin:0 0 .7em}
.proof-item blockquote p:last-child{margin:0}
.proof-who{margin-top:auto;padding-top:18px;border-top:1px solid var(--line)}
.proof-name{
  font-family:'Anton','Anton Fallback',Impact,sans-serif;text-transform:uppercase;
  font-size:clamp(1.15rem,2.4vw,1.45rem);line-height:1.05;display:block;
}
.proof-meta{
  font-family:'Barlow Condensed','Barlow Fallback','Arial Narrow',Arial,sans-serif;
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:.95rem;color:var(--tan);display:block;margin-top:7px;
}
.proof-note{
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--red);
  padding:clamp(20px,2.8vw,26px);margin-top:2px;
  font-size:1rem;line-height:1.55;color:var(--tan);
}
.proof-note strong{
  color:var(--bone);display:block;margin-bottom:6px;
  font-family:'Barlow Condensed','Barlow Fallback','Arial Narrow',Arial,sans-serif;
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:1.15rem;
}

/* ---------- Inline links must not rely on colour alone ----------
   A link in muted body copy was bone on tan: 1.81:1 against the text around it, with
   no underline. Anyone who cannot separate those two colours had no way to tell it
   was a link. WCAG needs either 3:1 against surrounding text or a non-colour cue, so
   every inline link in body copy now carries a border. Applied structurally rather
   than by remembering to add .lnk to each one. */
main p a:not(.btn), main li a:not(.btn), main dd a:not(.btn),
main figcaption a:not(.btn), main td a:not(.btn), main th a:not(.btn){
  border-bottom:1px solid var(--line-strong)
}
main p a:not(.btn):hover, main li a:not(.btn):hover, main dd a:not(.btn):hover,
main figcaption a:not(.btn):hover, main td a:not(.btn):hover, main th a:not(.btn):hover{
  border-bottom-color:var(--red)
}
/* Pills are their own bordered blocks — an extra underline inside them is noise. */
.pills li a{border-bottom:0}

/* ---------- Key facts grid ----------
   Replaces a definition list that had turned into six long sentences stacked in a box.
   The offer is mostly numbers — £0, 50%, monthly — and numbers should be read at a
   glance, not parsed. Big value, short label, one line of detail underneath. */
.keyfacts{display:grid;gap:2px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:760px){.keyfacts{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* An odd number of tiles leaves the last one half-width with a hole beside it. Let it
   take the whole row. Only in the two-column phone layout: at three columns the nine
   tiles on /profit-share already square off. */
@media(max-width:759px){.keyfacts>.kf:last-child:nth-child(odd){grid-column:1/-1}}
.kf{
  background:var(--panel);border:1px solid var(--line);
  padding:clamp(18px,2.6vw,26px);display:flex;flex-direction:column;
}
.kf-v{
  font-family:'Anton','Anton Fallback',Impact,sans-serif;text-transform:uppercase;
  font-size:clamp(1.9rem,5.4vw,2.9rem);line-height:.92;color:var(--bone);
  display:block;margin-bottom:10px;
  /* Reserve two lines so a value that wraps ("Cash & card") does not push its own
     label out of line with the labels either side of it. */
  min-height:1.84em;
}
.kf-v.hot{color:var(--red)}
.kf-k{
  font-family:'Barlow Condensed','Barlow Fallback','Arial Narrow',Arial,sans-serif;
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:.92rem;color:var(--tan);display:block;
}
.kf-d{font-size:.95rem;line-height:1.45;margin:10px 0 0;color:var(--bone)}
.kf-d a{border-bottom:1px solid var(--line-strong)}
.kf-d a:hover{border-bottom-color:var(--red)}

/* ---------- Named venues without a quote ----------
   These were pills, which works for two-word labels and falls apart for
   "Atmosphere · Students' union bar, University of Salford · Salford · Boxing machine
   & sub-soccer". Small cards instead: the name is the thing a reader checks, so it
   leads and everything else sits under it at a size you can skim. */
.venues{display:grid;gap:2px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:2px}
@media(min-width:720px){.venues{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1000px){.venues{grid-template-columns:repeat(4,minmax(0,1fr))}}
.vn{background:var(--panel);border:1px solid var(--line);padding:clamp(16px,2.2vw,20px)}
.vn-name{
  font-family:'Anton','Anton Fallback',Impact,sans-serif;text-transform:uppercase;
  font-size:clamp(1.05rem,2.4vw,1.25rem);line-height:1.05;color:var(--bone);
  display:block;margin-bottom:8px;
}
.vn-meta{
  font-family:'Barlow Condensed','Barlow Fallback','Arial Narrow',Arial,sans-serif;
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  font-size:.86rem;color:var(--tan);display:block;line-height:1.3;
}
.vn-machine{
  display:inline-block;margin-top:10px;padding:3px 8px;
  border:1px solid var(--line-strong);
  font-family:'Barlow Condensed','Barlow Fallback','Arial Narrow',Arial,sans-serif;
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  font-size:.78rem;color:var(--bone);
}
.vn-note{
  display:inline-block;margin-top:10px;padding:3px 8px;background:var(--red);color:#000;
  font-family:'Barlow Condensed','Barlow Fallback','Arial Narrow',Arial,sans-serif;
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.78rem;
}