/* ===========================================================
   AGOS shared shell. Tokens, header, footer, base typography.
   Drop a licensed Tachyon woff2 at assets/fonts/tachyon.woff2
   and the display face switches over automatically.
   =========================================================== */
/* Brand face is Tachyon Regular (modified), which is licensed and not being bought.
   Chakra Petch is the closest free stand-in: squared counters and angled terminal
   cuts, same motorsport register.
   The whole site now sets in it, not just the headings, because a neutral
   Helvetica body under a squared display face was the most generic thing left on
   the page. Body runs at 300 and headings stay at 600/700, so the two read as one
   family at two weights rather than as two typefaces competing. Drop a licensed
   tachyon.woff2 at the path below and it takes over both. */
/* Chakra Petch, latin, self hosted. See assets/fonts/README.txt. */
@font-face{font-family:'Chakra Petch'; font-style:normal; font-weight:300;
  src:url('assets/fonts/chakra-300.woff2') format('woff2'); font-display:swap}
@font-face{font-family:'Chakra Petch'; font-style:normal; font-weight:400;
  src:url('assets/fonts/chakra-400.woff2') format('woff2'); font-display:swap}
@font-face{font-family:'Chakra Petch'; font-style:normal; font-weight:600;
  src:url('assets/fonts/chakra-600.woff2') format('woff2'); font-display:swap}
@font-face{font-family:'Chakra Petch'; font-style:normal; font-weight:700;
  src:url('assets/fonts/chakra-700.woff2') format('woff2'); font-display:swap}

@font-face{
  font-family:'Tachyon';
  src:url('assets/fonts/tachyon.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
}

:root{
  /* Water, not dark mode. Blue in the black so the ground belongs to the brand. */
  --bg:#050B14; --bg2:#080F1B; --panel:#0A1420; --panel2:#0D1A28;
  --line:#16243440; --line:#162434; --line2:#22374d;
  --ink:#eef3fa; --dim:#8d9ab0; --faint:#6f7f95;
  --b1:#3756AA; --b2:#2495D8; --b3:#34A9D4; --b4:#40B9D0;
  --flag:#c99a5b;
  --display:'Tachyon','Chakra Petch',"Helvetica Neue",-apple-system,Arial,sans-serif;
  --body:'Chakra Petch',"Helvetica Neue",-apple-system,Arial,sans-serif;
  --shell:1220px;
}
*{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  color-scheme:dark;              /* native scrollbars and form controls follow the theme */
}
/* anchor targets must clear the sticky header, or footer links land underneath it */
:target, section[id], [id^="p-"], .pagehead{scroll-margin-top:88px}
@media (max-width:900px){ :target, section[id], [id^="p-"], .pagehead{scroll-margin-top:72px} }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-weight:300; line-height:1.68;
  -webkit-font-smoothing:antialiased;
  touch-action:manipulation;            /* no double-tap zoom delay */
}
/* numbers that get compared should line up */
.tierprice, .price, dl.spec dd, table td, .csumprice, .linePrice, #sub, #csub, #ctot{
  font-variant-numeric:tabular-nums;
}
/* Below about 13px the 300 weight starts to break up, especially uppercase with
   wide tracking, so the small interface type holds at 400. */
.sitehead a, .bag, .kicker, .fcol, .legal, footer, .btn, button, input, select,
textarea, .pcardname em, th, .tbd, .blank{font-weight:400}
b, strong{font-weight:600}
img{max-width:100%; display:block}
a{color:inherit}

/* visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--b3); outline-offset:2px;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--b2); color:#04070c; padding:12px 20px;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
}
.skip:focus{left:0}

.wrap{max-width:var(--shell); margin:0 auto; padding:0 28px}
@media (max-width:600px){ .wrap{padding:0 18px} }

/* ---------------- header ---------------- */
.sitehead{
  position:sticky; top:0; z-index:30; background:var(--bg);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:13px 28px;
}
.sitehead .brand{display:block; flex:none}
.sitehead .brand img{height:30px; width:auto}
.sitehead nav{display:flex; gap:26px; flex-wrap:nowrap}
.sitehead nav a{
  color:var(--dim); text-decoration:none; white-space:nowrap;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  padding:6px 0;
}
.sitehead nav a:hover, .sitehead nav a:active{color:var(--ink)}
.sitehead nav a[aria-current]{color:var(--ink); border-bottom:1px solid var(--b2)}
.sitehead .bag{
  color:var(--dim); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; white-space:nowrap; text-decoration:none; padding:6px 0;
}
.sitehead .bag:hover, .sitehead .bag:active{color:var(--ink)}
@media (max-width:1180px){
  .sitehead{padding:11px 18px; gap:12px}
  .sitehead nav{gap:15px}
  .sitehead nav a{font-size:10px; letter-spacing:.08em}
  .sitehead .bag{font-size:10px; letter-spacing:.08em}
}
@media (max-width:600px){ .sitehead nav{gap:11px} .sitehead nav a{letter-spacing:.04em} }

/* ---------------- type ---------------- */
h1,h2,h3{font-family:var(--display); letter-spacing:-.02em; margin:0}
.pagehead{padding-top:76px; padding-bottom:26px; border-bottom:1px solid var(--line)}
.pagehead h1{font-size:clamp(38px,6vw,72px); line-height:.98; font-weight:800; letter-spacing:-.035em}
.pagehead .kicker{
  font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--b3); margin:0 0 16px;
}
.pagehead .stand{margin:22px 0 0; color:#c3ccda; font-size:17px; max-width:62ch}
@media (max-width:600px){ .pagehead{padding-top:48px; padding-bottom:22px} }

section{padding-top:64px; padding-bottom:64px}
section + section{border-top:1px solid var(--line)}
h2.sect{font-size:clamp(23px,3.1vw,36px); font-weight:700; margin:0 0 14px; letter-spacing:-.025em}
/* .sectkick retired: an eyebrow tells you where you are on the site,
   not what the next paragraph is about. Page kickers only. */
p{margin:0 0 18px; color:#c3ccda; max-width:68ch}
.lead{font-size:18px; color:#d5dde8}
.muted{color:var(--dim)}

/* ---------------- reusable pieces ---------------- */
.panel{background:var(--panel); border:1px solid var(--line); padding:26px}
.rule{border:0; border-top:1px solid var(--line); margin:0}

.tbd{color:var(--flag); border-bottom:1px dotted var(--flag)}
.blank{
  display:inline-block; width:200px; max-width:100%;
  border-bottom:1px dashed var(--flag); color:var(--flag); font-size:14px;
}
.banner{
  border:1px solid rgba(201,154,91,.42); background:rgba(201,154,91,.07);
  padding:15px 18px; margin:0 0 26px; font-size:13.5px; color:#d8c3a6; max-width:72ch;
}
.banner strong{
  display:block; color:#e8bd86; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; margin-bottom:5px;
}

.two{display:grid; grid-template-columns:1fr 1fr; gap:40px}
@media (max-width:820px){ .two{grid-template-columns:1fr; gap:26px} }

dl.spec{margin:0; border-top:1px solid var(--line)}
dl.spec div{display:flex; gap:20px; padding:13px 0; border-bottom:1px solid var(--line)}
dl.spec dt{color:var(--dim); flex:0 0 40%; font-size:14px}
dl.spec dd{margin:0; font-size:14px}

.steps{list-style:none; margin:0; padding:0; counter-reset:s}
.steps li{display:flex; gap:20px; padding:18px 0; border-bottom:1px solid var(--line)}
.steps em{font-style:normal; color:var(--faint); font-size:11px; letter-spacing:.16em; min-width:32px; padding-top:3px}
.steps b{display:block; font-size:15px; margin-bottom:4px}
.steps span span{color:var(--dim); font-size:14px}

.btn{
  display:inline-block; padding:16px 30px; background:var(--b2); color:#04070c;
  text-decoration:none; border:0; cursor:pointer; font-family:inherit;
  font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
}
.btn:hover, .btn:active{background:var(--b3)}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line2)}
.btn.ghost:hover{background:transparent; border-color:var(--b2)}

/* ---------------- legal documents ----------------
   Terms, Privacy, Shipping, Accessibility and Security share one shell with
   the rest of the site. They used to run on a separate legal.css with its own
   near-black, which made them read as somebody else's pages bolted on. Narrow
   measure, tighter section rhythm, same ground. */
.wrap.doc{max-width:816px}
.doc section{padding:32px 0}
.doc section:first-of-type{padding-top:14px}
.doc h2{font-size:19px; font-weight:700; letter-spacing:-.012em; margin:0 0 12px}
.doc h3{font-size:15px; font-weight:700; margin:26px 0 8px}
.doc p, .doc li{font-size:15px}
.doc ul{margin:0 0 18px; padding-left:20px}
.doc li{margin-bottom:8px; color:#c3ccda; max-width:68ch}
.doc dl.spec{margin-bottom:20px}
.doc .banner{max-width:none}
.doc p:last-child{margin-bottom:0}
.updated{color:var(--dim); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; margin:20px 0 0}
/* An unfilled business fact. Same amber as .blank and .tbd, so every
   outstanding item on the site flags itself the same way. */
mark{background:rgba(201,154,91,.18); color:#f0d5b4; padding:1px 5px;
  font-size:.94em; letter-spacing:.04em}
/* sibling documents, so you are never one page deep with no way across */
.docnav{margin-top:44px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; gap:24px; flex-wrap:wrap}
.docnav a{color:var(--dim); text-decoration:none; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; padding:7px 0}
.docnav a:hover, .docnav a:active{color:var(--ink)}
.docnav a[aria-current]{color:var(--ink)}

/* ---------------- footer ---------------- */
.sitefoot{background:var(--bg2); border-top:1px solid var(--line); margin-top:20px; padding:52px 0 34px}
.footgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:34px}
@media (max-width:860px){ .footgrid{grid-template-columns:1fr 1fr; gap:28px} }
@media (max-width:520px){ .footgrid{grid-template-columns:1fr} }
.sitefoot img.mark{height:30px; width:auto; margin-bottom:16px}
.sitefoot h2.fcol{
  font-family:var(--body); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--dim); margin:0 0 14px; font-weight:600;
}
.sitefoot ul{list-style:none; margin:0; padding:0}
.sitefoot li{margin-bottom:4px}
.sitefoot a{color:#b6c0cf; text-decoration:none; font-size:14px;
  display:inline-block; padding:5px 0}   /* WCAG 2.5.8: 24px minimum target */
.sitefoot a:hover, .sitefoot a:active{color:#fff}
.sitefoot p{font-size:14px; color:var(--dim); max-width:34ch; margin:0 0 14px}
.legal{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--line); margin-top:38px; padding-top:22px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
}
.legal nav{display:flex; gap:20px; flex-wrap:wrap}
.legal a{color:var(--faint); text-decoration:none; font-size:11px;
  display:inline-block; padding:6px 0}
.legal a:hover, .legal a:active{color:var(--ink)}

/* newsletter */
.signup{display:flex; gap:0; max-width:380px; flex-wrap:wrap}
.signup input{
  flex:1 1 200px; min-width:0; background:var(--panel); border:1px solid var(--line);
  color:var(--ink); padding:13px 14px; font-family:inherit; font-size:14px;
}
.signup button{
  background:var(--b2); color:#04070c; border:0; padding:13px 20px; cursor:pointer;
  font-family:inherit; font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
}
.signup button:hover{background:var(--b3)}

/* form primitives */
.flabel{display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim); margin-bottom:7px}
.finput{width:100%; background:var(--bg); border:1px solid var(--line); color:var(--ink);
  padding:12px 13px; font-family:inherit; font-size:14px}
.finput:hover{border-color:var(--line2)}
select.finput{appearance:none; background-image:none}
/* iOS Safari zooms the viewport when a focused field is under 16px, which
   throws the layout every time someone taps a box. Only the value needs to
   grow; the uppercase labels above them stay where they are. */
@media (max-width:860px){ .finput{font-size:16px} }
@media (max-width:560px){ #opform > div{grid-template-columns:1fr !important} }

/* ---------------- subscription tiers ---------------- */
.tier{display:flex; flex-direction:column}
.tier.best{border-color:var(--b1)}
.tier.picked{border-color:var(--b2)}
.tierkick{font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--b4); margin:0 0 10px}
.tier.best .tierkick{color:var(--b2)}
.tiername{font-size:21px; font-weight:800; margin:0 0 14px; line-height:1.15}
.tierprice{font-size:26px; font-weight:700; margin:0 0 16px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.tierprice .per{font-size:12px; font-weight:400; letter-spacing:.16em; text-transform:uppercase; color:var(--dim)}
.boxlist{list-style:none; margin:18px 0 0; padding:0}
.boxlist li{padding:11px 0; border-top:1px solid var(--line)}
.boxlist b{display:block; font-size:14px}
.boxlist span{display:block; color:var(--dim); font-size:13px; margin-top:2px}
.boxlist.vadd li{border-top-color:var(--line2)}
.vkick{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--dim); margin:26px 0 0}

/* ---------------- fitting quiz ---------------- */
.qcount{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--dim); margin:0 0 12px}
.qtitle{font-size:21px; font-weight:800; margin:0 0 10px; line-height:1.2}
.qhelp{color:var(--dim); font-size:14px; margin:0 0 22px; max-width:52ch}
.qbody{margin-bottom:26px; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.qunit{color:var(--dim); font-size:13px; letter-spacing:.14em; text-transform:uppercase}
.qopts{display:flex; gap:10px; flex-wrap:wrap}
.qopt{
  background:transparent; border:1px solid var(--line); color:var(--dim);
  padding:12px 18px; font-family:inherit; font-size:14px; cursor:pointer;
}
.qopt[aria-pressed="true"]{border-color:var(--b2); color:var(--ink)}
.qnav{display:flex; align-items:center; gap:4px; flex-wrap:wrap}
.qskip{
  background:none; border:0; color:var(--faint); font-family:inherit; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; cursor:pointer; margin-left:auto; padding:10px;
}
.qskip:hover{color:var(--ink)}

/* ---------------- order confirmation ---------------- */
.confhero{padding-top:72px; padding-bottom:12px; border-bottom:1px solid var(--line)}
.confhero h1{font-size:clamp(42px,7.5vw,88px); line-height:.94; font-weight:800; letter-spacing:-.04em}
.confhero .kicker{font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--b3); margin:0 0 16px}
.confhero .stand{margin:24px 0 0; color:#c3ccda; font-size:17px; max-width:56ch}

.stage{border-top:1px solid var(--line); padding:22px 0 0; margin:0 0 30px}
.stage:last-of-type{margin-bottom:0}
.stagehead{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--b3); margin:0 0 12px; font-weight:600;
}
.stage p{margin:0 0 12px; font-size:15px}
.stage p:last-child{margin-bottom:0}
.stage .muted{font-size:14px}

.claimnote{
  border:1px solid var(--line2); padding:18px 20px; margin-top:34px;
  font-size:14.5px; color:#b6c0cf; max-width:70ch;
}
.confbens em{color:var(--b3)}
.confhelp{border-top:1px solid var(--line)}
.confsign{
  border-top:1px solid var(--line); text-align:center;
  padding-top:56px; padding-bottom:20px;
}
.confsign .signmark{height:46px; width:auto; margin:0 auto 18px}
.confsign .verse{
  font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--faint); margin:0;
}
@media (max-width:600px){
  .confhero{padding-top:46px}
  .stage{padding-left:18px}
}

/* ---------------- cart + checkout ---------------- */
.cartgrid{display:grid; grid-template-columns:1.55fr .95fr; gap:38px; align-items:start}
@media (max-width:860px){ .cartgrid{grid-template-columns:1fr; gap:26px} }
.summary{position:sticky; top:86px}
@media (max-width:860px){ .summary{position:static} }

.line{display:grid; grid-template-columns:96px 1fr auto; gap:20px; align-items:center;
  padding:20px 0; border-bottom:1px solid var(--line)}
.line:first-child{border-top:1px solid var(--line)}
.line img{height:96px; width:auto; margin:0 auto}
.lineinfo b{display:block; font-size:16px}
.lineinfo span{display:block; color:var(--dim); font-size:13px; margin-top:3px}
.lineinfo .linePrice{color:var(--ink); font-size:14px; margin-top:8px}
.lineqty{display:flex; flex-direction:column; align-items:flex-end; gap:8px}
.linkbtn{background:none; border:0; color:var(--faint); font-family:inherit; font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; cursor:pointer; padding:4px}
.linkbtn:hover{color:var(--ink)}
@media (max-width:560px){
  .line{grid-template-columns:64px 1fr; gap:14px}
  .line img{height:64px}
  .lineqty{grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:space-between}
}

.fgrid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:560px){ .fgrid{grid-template-columns:1fr} }
#cform p{margin:0 0 16px; max-width:none}
.paybox{border:1px dashed var(--line2); padding:20px}

.csumline{display:grid; grid-template-columns:52px 1fr auto; gap:14px; align-items:center;
  padding:12px 0; border-bottom:1px solid var(--line)}
.csumline img{height:52px; width:auto; margin:0 auto}
.csumline b{display:block; font-size:14px}
.csumline span span{display:block; color:var(--dim); font-size:12.5px; margin-top:2px}
.csumprice{font-size:14px; white-space:nowrap}

/* ---------------- billing toggle + loyalty ---------------- */
.billing{display:flex; align-items:center; gap:0; flex-wrap:wrap; margin:0 0 28px}
.billopt{
  background:transparent; border:1px solid var(--line); color:var(--dim);
  padding:12px 20px; font-family:inherit; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; cursor:pointer; margin-right:-1px;
}
.billopt[aria-pressed="true"]{border-color:var(--b2); color:var(--ink); position:relative; z-index:1}
.billnote{margin-left:18px; color:var(--faint); font-size:13px; letter-spacing:0; text-transform:none}
@media (max-width:620px){ .billnote{margin:12px 0 0; flex-basis:100%} }

.steps.loyalty em{color:var(--b4); font-weight:700; min-width:44px}
/* Numbering should encode real order. Where it does not, drop it. */
.steps.unnumbered em{display:none}
.steps.unnumbered li{gap:0}
.steps.loyalty b{font-size:16px}

/* ---- paddles collection ---------------------------------------- */
/* One pixel, not four. A 1px border on each card either side of a 2px gap put
   four pixels of near-black between two light grey photographs, which reads as
   a bar across the page rather than a seam between two pictures. */
.pgrid{display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:8px}
@media (max-width:760px){ .pgrid{grid-template-columns:1fr} }
.pcard{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--panel); border:0; padding:0;
}
.pcard:focus-visible{outline:2px solid var(--b3); outline-offset:2px}
/* Photographs, not floating renders. A padded, centred box suited a cut-out on
   nothing; a real photograph carries its own ground, so it runs full width to
   the card's edges and the card reads as a picture with a caption under it. */
.pcardimg{display:block; padding:0; min-height:0; overflow:hidden; aspect-ratio:1}
/* The aspect ratio above and the width and height on the tag both matter: the
   card images are square, and without their shape declared the browser reserves
   no room and the whole grid jumps when they arrive. Removing the old
   min-height without replacing it took layout shift on this page from nothing
   to 0.43. */
.pcardimg img{width:100%; height:100%; display:block; object-fit:cover}
.pcardfoot{display:block; padding:0 26px 26px}
.pcardname{display:block; font-family:var(--display); font-size:22px; letter-spacing:.02em}
.pcardname em{font-style:normal; color:var(--dim); font-size:15px; margin-left:8px;
              font-family:var(--body)}
.pcarddesc{display:block; color:var(--dim); font-size:13px; line-height:1.6; margin-top:10px;
           max-width:38ch}
.pcardbuy{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
  font-size:17px; font-variant-numeric:tabular-nums;
}
.pcardbuy span{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--b3)}

/* ---- Paddles dropdown ------------------------------------------- */
.navdd{position:relative; display:flex; align-items:center}
.navddbtn{
  font:inherit; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim); background:none; border:0; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; min-height:44px;
}
.navddbtn:hover,.navddbtn[aria-expanded="true"]{color:var(--ink)}
.navddbtn:focus-visible{outline:2px solid var(--b3); outline-offset:3px}
.navddpanel{
  position:absolute; top:calc(100% + 14px); left:-14px; z-index:30;
  width:min(360px,86vw); background:var(--bg2);
  border:1px solid var(--line2); padding:6px;
}
@media (max-width:620px){ .navddpanel{position:fixed; top:69px; left:12px; right:12px; width:auto} }
.navddpanel a{
  display:flex; align-items:center; gap:14px; padding:10px 12px;
  text-decoration:none; color:inherit; min-height:44px;
}
.navddpanel a:hover,.navddpanel a:focus-visible{background:var(--panel); outline:0}
.navddpanel a:focus-visible{box-shadow:inset 0 0 0 1px var(--b3)}
.navddpanel img{width:34px; height:44px; object-fit:contain; flex:none}
.navddpanel b{display:block; font-size:13px; font-weight:600; letter-spacing:.04em}
.navddpanel s{
  display:block; text-decoration:none; color:var(--dim);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; margin-top:3px;
}
.navddpanel em{
  margin-left:auto; font-style:normal; font-size:13px;
  font-variant-numeric:tabular-nums; color:var(--dim);
}

/* ---- mobile menu ------------------------------------------------
   Below 860px the nav collapses behind a toggle at the top left.
   It used to display:none whole nav items by width, which made three
   pages unreachable on a phone. */
.navtoggle{display:none}
@media (max-width:860px){
  .navtoggle{
    display:inline-flex; align-items:center; gap:9px; order:-1;
    font:inherit; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--dim); background:none; border:0; padding:0 4px 0 0;
    cursor:pointer; min-height:44px;
  }
  .navtoggle span{
    width:18px; height:9px; display:block; flex:none;
    border-top:1px solid currentColor; border-bottom:1px solid currentColor;
  }
  .navtoggle[aria-expanded="true"]{color:var(--ink)}
  header.sitehead{gap:12px}
  header.sitehead nav{
    display:none; position:fixed; left:0; right:0; top:var(--headh,69px);
    z-index:30; background:var(--bg); border-bottom:1px solid var(--line2);
    flex-direction:column; gap:0; padding:6px 0;
    max-height:calc(100vh - var(--headh,69px)); overflow-y:auto;
  }
  header.sitehead nav[data-open="1"]{display:flex}
  header.sitehead nav a{
    display:flex; align-items:center; min-height:52px;
    padding:0 22px; font-size:13px; letter-spacing:.16em;
  }
  header.sitehead nav a[aria-current="page"]{color:var(--ink)}
}

/* tapping anywhere off the menu closes it. Sits under the header so the
   toggle and the panel both stay live. */
.navscrim{display:none}
.navscrim[data-open="1"]{display:block; position:fixed; inset:0; z-index:29}
@media (min-width:861px){ .navscrim{display:none !important} }

/* ---------------------------------------------------------------
   Full bleed photograph. No frame, no caption: a breath between two
   blocks of reading, not a figure that needs explaining. Fixed
   intrinsic size so it reserves its own space and shifts nothing.
   --------------------------------------------------------------- */
.band{margin:0; line-height:0; background:var(--bg2)}
.band img{width:100%; height:clamp(220px,32vw,440px); object-fit:cover; display:block}
.band + .wrap > section:first-child{padding-top:44px}

/* ---- photographs inside a section ------------------------------
   Not a full bleed band and not a card. A square frame beside the
   reading on wide screens, above it on narrow ones, so a section can
   show the thing it is describing without becoming a gallery. */
.secgrid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,52px); align-items:center}
@media (max-width:820px){ .secgrid{grid-template-columns:1fr; gap:24px} }
.secshot{margin:0}
/* 4:3, not square. A square frame beside three short paragraphs left a column
   of empty space as tall as the photograph, and the extra height was dead
   concrete at the bottom of the crop anyway. */
.secshot img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block}
.secshot.wide img{aspect-ratio:16/9}
/* Two paddles at the same scale, cropped the same way, side by side. */
.shotpair{display:grid; grid-template-columns:1fr 1fr; gap:2px; margin:0 0 28px; max-width:760px}
.shotpair figure{margin:0}
.shotpair img{width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; display:block}
.shotpair figcaption{
  padding:10px 0 0; color:var(--dim); font-size:12px;
  letter-spacing:.16em; text-transform:uppercase;
}

/* A photograph shown whole. The strip crop is right for a flat lay with room
   to spare at the edges; run through a picture of a rally it throws away the
   half that makes it a photograph. So these keep their own shape, sit inside
   the content column rather than bleeding, and are only ever resized. */
.band.full{background:none}
.band.full img{width:100%; height:auto; max-width:var(--shell); margin:0 auto; object-fit:fill}
.bandwrap{padding:0 28px; margin:0 auto; max-width:calc(var(--shell) + 56px)}

/* Page head with a photograph beside it. Portrait frame, so it sets the height
   and the words sit against it rather than under it. */
.headgrid{display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(28px,4vw,56px);
          align-items:center}
@media (max-width:820px){ .headgrid{grid-template-columns:1fr; gap:26px} }
.headgrid .headshot{margin:0}
.headgrid .headshot img{width:100%; height:auto; display:block}
@media (max-width:820px){ .headgrid .headshot{max-width:340px} }

/* ---------------- pay page ----------------
   Square, flat, no transitions. The amount is the loudest thing on the page
   because getting it wrong is the one mistake that costs the customer time. */
.amountbox{margin:0 0 40px}
.amountlabel{margin:0 0 6px; color:var(--faint); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase}
.amountbig{margin:0 0 10px; font-family:var(--display); font-size:clamp(34px,7vw,48px);
  font-weight:600; line-height:1; letter-spacing:-.01em}

.acctrow{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:20px 0 0}
@media (max-width:640px){ .acctrow{grid-template-columns:repeat(2,1fr)} }
.acctbtn{background:var(--panel); border:1px solid var(--line2); color:var(--ink);
  font-family:inherit; font-size:14px; padding:16px 12px; cursor:pointer;
  min-height:52px; text-align:center}
.acctbtn:hover{border-color:var(--b3)}
.acctbtn[aria-pressed="true"]{background:var(--panel2); border-color:var(--b3); color:var(--ink)}

.qrpanel{display:grid; grid-template-columns:260px 1fr; gap:28px; align-items:start;
  background:var(--panel); border:1px solid var(--line); padding:24px; margin:28px 0 0}
@media (max-width:700px){ .qrpanel{grid-template-columns:1fr} }
/* The code sits on its own white ground: a QR on a dark panel will not scan. */
.qrpanel img{width:100%; height:auto; display:block; background:#fff; padding:12px}
.qrname{margin:0 0 6px; font-family:var(--display); font-size:20px; font-weight:600}
.qrside p{margin:0 0 10px}

/* A disabled button that looks live is a promise the page cannot keep. */
.btn:disabled, .btn[disabled]{background:var(--panel2); color:var(--faint);
  border-color:var(--line2); cursor:not-allowed}
.btn:disabled:hover, .btn[disabled]:hover{background:var(--panel2); color:var(--faint)}