/* ============================================================
   Headland Strength Co.: theme. Chalk, ink and competition red.
   Anton in big uppercase blocks like a meet scoreboard, Rubik for
   reading. Square corners, heavy rules. The only other colours are
   the plates themselves.
   ============================================================ */
@layer theme {
:root{
  --canvas:#ECECE6; --surface:#F6F6F2; --ink:#141416; --muted:#55575C; --line:#CFCFC7; --line-strong:#95958D;
  --primary:#141416; --primary-hover:#2A2A2E; --on-primary:#F6F6F2;
  --accent:#D7262E; --accent-hover:#BC1F27; --on-accent:#F6F6F2; --accent-text:#B81F27;
  --focus:#B81F27; --focus-ring:rgb(184 31 39/.2); --error:#A3201B; --ph-bg:#D8D8D0;
  --header-bg:#ECECE6; --footer-bg:#141416; --on-footer:#DCDCD5; --callbar-bg:#141416;
  /* competition plate colours */
  --p-red:#D7262E; --p-blue:#1F56B8; --p-yellow:#F2C230; --p-green:#1E8A4C; --p-white:#E9E9E3; --steel:#8A8F96; --steel-dark:#5C6168;
  --font-display:'Anton',Impact,'Arial Narrow',sans-serif; --font-body:'Rubik',system-ui,sans-serif;
  --radius:0; --radius-sm:0; --radius-lg:0; --radius-btn:0;
  --header-h:4.5rem;
  --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141416' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
h1,h2,h3{font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:.92}
h2{font-size:clamp(2.6rem,6.4vw,5rem)}
h3{font-size:1.6rem}
.sec-head{display:grid;gap:.75rem;margin-bottom:clamp(2rem,4vw,3rem)}
.sec-head p{color:var(--muted);font-size:1.1rem;max-width:40rem}
.btn{font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.95rem}

/* ---------- header ---------- */
.site-header{border-bottom:3px solid var(--ink)}
.brand{font-family:var(--font-display);font-size:1.6rem;font-weight:400;text-transform:uppercase;letter-spacing:.02em;gap:.6rem}
.brand small{font-family:var(--font-body);font-size:.68rem;font-weight:700;letter-spacing:.16em;margin-left:.45rem;color:var(--accent-text);vertical-align:.4em}
.brand-mark{background:var(--accent);color:var(--on-accent);border-radius:0}
.nav-mobile-cta a{color:var(--accent-text)}
@media (min-width:900px){ .site-nav a{font-weight:600;text-transform:uppercase;font-size:.85rem;letter-spacing:.05em} .nav-mobile-cta{display:none} }

/* ---------- hero ---------- */
.hero{position:relative;display:grid}
.hero-photo .ph{border-radius:0;aspect-ratio:4/3}
.hero-inner{display:grid;gap:1.4rem;justify-items:start;padding-block:2rem}
.hero h1{font-size:clamp(4rem,13vw,11rem);line-height:.84}
.hero h1 span{color:var(--accent-text)}
.hero-lede{font-size:1.15rem;color:var(--muted);max-width:30rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.scoreboard{display:grid;grid-template-columns:1fr 1fr;border:3px solid var(--ink);background:var(--ink);gap:3px;margin-block:1rem clamp(3rem,6vw,4.5rem)}
.scoreboard li{display:grid;gap:.15rem;padding:1rem 1.1rem;background:var(--surface)}
.scoreboard strong{font-family:var(--font-display);font-weight:400;font-size:clamp(2.4rem,5vw,3.6rem);line-height:.9;color:var(--accent-text)}
.scoreboard span{font-weight:600;font-size:.9rem;text-transform:uppercase;letter-spacing:.04em}
@media (min-width:900px){
  .hero{grid-template-columns:1fr 1fr;align-items:end}
  .hero-photo{grid-column:2;grid-row:1}
  .hero-photo .ph{aspect-ratio:auto;height:100%;min-height:36rem}
  .hero-inner{grid-column:1;grid-row:1;align-self:center;padding-left:max(var(--gutter),calc((100vw - var(--maxw)) / 2 + var(--gutter)));padding-right:2rem;max-width:none;margin:0;width:auto}
  .hero h1{font-size:clamp(5rem,9vw,9.5rem)}
  .score-wrap{grid-column:1 / -1}
  .scoreboard{grid-template-columns:repeat(4,1fr)}
}

/* ---------- plate loader ---------- */
.loader{background:var(--ink);color:var(--on-primary)}
.loader h2{color:var(--on-primary)}
.loader-head{display:grid;gap:.75rem;margin-bottom:clamp(2rem,4vw,3rem)}
.loader-head p{opacity:.8;font-size:1.1rem;max-width:40rem}
.loader-box{display:grid;gap:2rem;align-items:center}
.lb-controls{display:grid;gap:1.25rem}
.weight{display:grid;grid-template-columns:56px 1fr 56px;align-items:center;gap:.75rem}
.wbtn{display:grid;place-items:center;height:56px;border:2px solid var(--on-primary);color:var(--on-primary);transition:background-color var(--dur-fast) linear,transform var(--dur-fast) var(--ease-out)}
@media (hover:hover){ .wbtn:hover{background:var(--on-primary);color:var(--ink)} }
.wbtn:active{transform:scale(.94)}
.wread{text-align:center;font-family:var(--font-display);line-height:.85}
.wread output{font-size:clamp(4.5rem,11vw,7.5rem);font-variant-numeric:tabular-nums}
.wread span{font-size:1.6rem;margin-left:.3rem;color:var(--p-red)}
.wrange{width:100%;accent-color:var(--accent);height:2rem}
.presets{display:flex;flex-wrap:wrap;gap:.4rem}
.presets button{min-height:44px;min-width:3.6rem;padding:.4rem .7rem;border:1.5px solid color-mix(in srgb,var(--on-primary) 40%,transparent);font-family:var(--font-display);font-size:1.15rem;
  transition:background-color var(--dur-fast) linear,color var(--dur-fast) linear,transform var(--dur-fast) var(--ease-out)}
.presets button::after{content:" kg";font-size:.75em}
@media (hover:hover){ .presets button:hover{border-color:var(--on-primary)} }
.presets button:active{transform:scale(.95)}
.presets button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent)}
.lb-opts{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center}
.lb-opts fieldset{display:flex;gap:.4rem;border:0;padding:0;align-items:center}
.lb-opts legend{float:left;margin-right:.6rem;font-weight:700;text-transform:uppercase;font-size:.85rem;letter-spacing:.06em}
.seg{position:relative}
.seg input{position:absolute;inset:0;opacity:0;margin:0;width:100%;height:100%;cursor:pointer}
.seg span{display:inline-flex;align-items:center;min-height:44px;padding:.4rem .9rem;border:1.5px solid color-mix(in srgb,var(--on-primary) 40%,transparent);font-weight:700}
.seg input:checked + span{background:var(--on-primary);color:var(--ink);border-color:var(--on-primary)}
.seg input:focus-visible + span{outline:3px solid var(--p-yellow);outline-offset:2px}
.loader .check input{--field-bg:transparent;--field-line:var(--line-strong)}
.loader .check input:checked{background:var(--accent);border-color:var(--accent)}
.lb-view{display:grid;gap:.75rem}
.barbell{width:100%;height:auto;overflow:visible}
.bar-shaft{fill:var(--steel)}
.bar-sleeve{fill:var(--steel-dark)}
.bar-stop{fill:var(--steel)}
.plate{stroke:var(--ink);stroke-width:2;transform-box:fill-box;transform-origin:center}
.plate--red{fill:var(--p-red)} .plate--blue{fill:var(--p-blue)} .plate--yellow{fill:var(--p-yellow)} .plate--green{fill:var(--p-green)} .plate--white{fill:var(--p-white)}
.collar{fill:var(--steel);stroke:var(--ink);stroke-width:2}
.plate-lbl{font:700 15px var(--font-body);fill:var(--ink);text-anchor:middle;dominant-baseline:middle}
.plate--blue + .plate-lbl,.plate--red + .plate-lbl,.plate--green + .plate-lbl{fill:var(--on-primary)}
@media (prefers-reduced-motion:no-preference){ .plate.is-new{animation:slide-on .4s var(--ease-out) both} }
@keyframes slide-on{from{transform:translateX(var(--from,0))}}
.per-side{display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:baseline}
.per-side span{text-transform:uppercase;font-weight:700;letter-spacing:.06em;font-size:.85rem;opacity:.75}
.per-side strong{font-family:var(--font-display);font-weight:400;font-size:clamp(1.6rem,3.5vw,2.4rem);letter-spacing:.02em}
.lb-note{opacity:.75;font-size:.95rem;min-height:1.5em}
@media (min-width:1000px){ .loader-box{grid-template-columns:.7fr 1.3fr;gap:3.5rem} }

/* ---------- timetable ---------- */
.tt-head{display:grid;gap:1.25rem;margin-bottom:1.5rem}
.tt-head p{color:var(--muted);margin-top:.6rem}
.tt-filter{display:flex;flex-wrap:wrap;gap:.4rem}
.tt-filter button{min-height:44px;padding:.45rem .9rem;border:2px solid var(--ink);font-weight:700;font-size:.9rem;
  transition:background-color var(--dur-fast) linear,color var(--dur-fast) linear,transform var(--dur-fast) var(--ease-out)}
.tt-filter button:active{transform:scale(.96)}
.tt-filter button[aria-pressed="true"]{background:var(--ink);color:var(--on-primary)}
.tab{border-radius:0;border:2px solid var(--ink);font-family:var(--font-display);font-weight:400;font-size:1.25rem;text-transform:uppercase;min-width:4.2rem}
.tab[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.tab.is-today{box-shadow:inset 0 -5px 0 var(--p-yellow)}
.panels{display:grid;gap:1.5rem;margin-top:.75rem}
.tabs-on .panels{gap:0}
.day-title{font-size:2rem;margin:.5rem 0 .75rem}
.tabs-on .day-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cls-list{border-top:3px solid var(--ink)}
.cls{display:grid;grid-template-columns:4.6rem 1fr;gap:.25rem 1rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--line-strong);transition:opacity var(--dur-mid) linear}
.cls[hidden]{display:none}
.cls-time{display:grid;font-weight:700;font-size:.8rem;color:var(--muted);line-height:1.1}
.cls-time b{font-family:var(--font-display);font-weight:400;font-size:1.7rem;color:var(--ink)}
.cls-name{font-weight:700;font-size:1.15rem}
.cls-main p:not(.cls-name){display:flex;flex-wrap:wrap;gap:.2rem .6rem;align-items:center;color:var(--muted);font-size:.92rem}
.cls-tag{padding:.1rem .5rem;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--on-primary);background:var(--ink)}
.cls-tag--hiit{background:var(--accent)} .cls-tag--yoga{background:var(--p-green)} .cls-tag--mobility{background:var(--p-blue)}
.spots{grid-column:2;font-weight:700;font-size:.9rem}
.spots--low{color:var(--accent-text)}
.spots--full{color:var(--muted)}
.cls.is-done{opacity:.4}
.cls.is-next{background:linear-gradient(90deg,color-mix(in srgb,var(--p-yellow) 35%,transparent),transparent 70%);box-shadow:inset 5px 0 0 var(--p-yellow);padding-left:.75rem}
.cls.is-next .cls-name::after{content:"Next class";margin-left:.6rem;padding:.1rem .45rem;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:var(--p-yellow);vertical-align:.15em}
.cls-none{padding:1.5rem 0;color:var(--muted)}
@media (min-width:700px){ .cls{grid-template-columns:5.5rem 1fr auto} .spots{grid-column:3} }
@media (min-width:900px){ .tt-head{grid-template-columns:1fr auto;align-items:end} }

/* ---------- memberships ---------- */
.plans{background:var(--surface);border-block:3px solid var(--ink)}
.plans-head{display:grid;gap:1.25rem;margin-bottom:2rem}
.plans-head p{color:var(--muted);margin-top:.6rem;max-width:36rem}
.bill{display:flex;align-items:center;gap:.75rem}
.bill-sw{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.9rem}
.sw-track{position:relative;width:52px;height:30px;background:var(--line-strong);transition:background-color var(--dur-fast) linear}
.sw-dot{position:absolute;top:4px;left:4px;width:22px;height:22px;background:var(--surface);transition:transform var(--dur-mid) var(--ease-out)}
.bill-sw[aria-pressed="true"] .sw-track{background:var(--accent)}
.bill-sw[aria-pressed="true"] .sw-dot{transform:translateX(22px)}
.save{padding:.2rem .55rem;background:var(--p-yellow);color:var(--ink);font-weight:800;font-size:.8rem;text-transform:uppercase}
.plan-list{display:grid;gap:1rem;align-items:stretch}
.plan{display:grid;gap:1rem;align-content:start;padding:1.75rem;border:3px solid var(--ink);background:var(--canvas)}
.plan--pop{background:var(--ink);color:var(--on-primary)}
.plan--pop h3,.plan--pop h2{color:var(--on-primary)}
.pop-tag{justify-self:start;padding:.25rem .6rem;background:var(--accent);color:var(--on-accent);font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}
.price{display:flex;align-items:baseline;gap:.5rem}
.amt{font-family:var(--font-display);font-size:4rem;line-height:.9;font-variant-numeric:tabular-nums}
.unit{color:var(--muted);font-weight:600}
.plan--pop .unit{color:var(--on-primary);opacity:.8}
.plan ul{display:grid;gap:.55rem}
.plan li{display:flex;gap:.55rem;align-items:flex-start}
.plan li .ico{color:var(--accent-text);margin-top:.1rem}
.plan--pop li .ico{color:var(--p-yellow)}
.plan .btn{margin-top:auto}
.plan--pop .btn--accent{margin-top:auto}
@media (min-width:900px){ .plans-head{grid-template-columns:1fr auto;align-items:end} .plan-list{grid-template-columns:1fr 1.25fr 1fr} .plan--pop{transform:translateY(-1rem)} }

/* ---------- coaches ---------- */
.coach-list{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.coach{display:grid;gap:.4rem;align-content:start}
.coach .ph{border-radius:0}
.coach h3,.coach h2{font-size:2rem;margin-top:.5rem}
.coach > p{color:var(--muted);font-weight:600}
.coach ul{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.3rem}
.coach ul li{padding:.15rem .5rem;border:1.5px solid var(--ink);font-size:.8rem;font-weight:700}
.ph--initials{background:var(--ink)}
.ph--initials > span{font-size:clamp(4rem,10vw,7rem);color:var(--accent)}
@media (min-width:900px){ .coach-list{grid-template-columns:repeat(4,1fr);gap:1.5rem} }

/* ---------- reviews ---------- */
.rv-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.25rem}
.rv-card{display:grid;gap:1.25rem;align-content:space-between;padding:1.6rem;background:var(--surface);border:3px solid var(--ink)}
.rv-card blockquote p{font-size:1.1rem}
.rv-card figcaption{display:grid;font-size:.92rem;color:var(--muted)}
.rv-card figcaption strong{color:var(--ink);font-family:var(--font-display);font-weight:400;font-size:1.3rem;text-transform:uppercase}
.rv-controls button{border-radius:0;border:2px solid var(--ink)}

/* ---------- testimonial over a lift ---------- */
.quote-band{position:relative;isolation:isolate;padding-block:clamp(5rem,12vw,9rem);color:var(--on-primary);overflow:clip}
.quote-bg{position:absolute;inset:0;z-index:-1}
.quote-bg .ph{height:100%;aspect-ratio:auto;border-radius:0}
.quote-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgb(20 20 22/.9) 30%,rgb(215 38 46/.55))}
.quote-band blockquote p{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(2.2rem,5.6vw,4.8rem);line-height:.98;max-width:52rem}
.quote-band figcaption{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center}
.quote-band .sample-tag{color:var(--on-primary)}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;gap:2rem}
.faq details{border-color:var(--ink)}
.faq summary{font-size:1.1rem}
.faq summary .ico{color:var(--accent-text)}
@media (min-width:900px){ .faq-grid{grid-template-columns:.7fr 1.3fr;gap:4rem} .faq-grid h2{position:sticky;top:calc(var(--header-h) + 2rem);align-self:start} }

/* ---------- free week ---------- */
.trial{background:var(--surface);border-top:3px solid var(--ink)}
.trial-grid{display:grid;gap:2.5rem}
.trial-copy > p{margin-top:1rem;color:var(--muted);font-size:1.15rem;max-width:30rem}
.contact-list{display:grid;gap:.9rem;margin-top:2rem}
.contact-list li{display:flex;gap:.7rem;align-items:flex-start}
.contact-list a{font-weight:700}
.contact-list .ico{color:var(--accent-text);margin-top:.15rem}
.form{display:grid;gap:1.25rem;padding:clamp(1.25rem,3vw,2rem);background:var(--canvas);border:3px solid var(--ink)}
.form-row{display:grid;gap:1.25rem}
.choices-set{border:0;padding:0;display:grid;gap:.6rem}
.choice span{border-radius:0}
.choice input:checked + span{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
@media (min-width:600px){ .form-row{grid-template-columns:1fr 1fr} }
@media (min-width:900px){ .trial-grid{grid-template-columns:.85fr 1.15fr;gap:4rem;align-items:start} }

/* ---------- map ---------- */
.section--map{padding-bottom:var(--space-section);background:var(--surface)}
.map-block{border:3px solid var(--ink);background:var(--ph-bg)}
.map-title{display:grid;gap:.25rem;max-width:28rem}
.map-title strong{font-family:var(--font-display);font-weight:400;font-size:1.8rem;text-transform:uppercase}
.map-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.map-note{margin-top:.75rem;font-size:.9rem;color:var(--muted)}

/* ---------- call to action ---------- */
.cta-band{background:var(--accent);color:var(--on-accent);padding-block:clamp(3.5rem,8vw,6rem)}
.cta-band h2{color:var(--on-accent);font-size:clamp(3rem,8vw,6.5rem)}
.cta-inner{display:grid;gap:1rem;justify-items:start}
.cta-inner p{font-size:1.15rem}
.cta-band .btn--accent{background:var(--ink);color:var(--on-primary)}

/* ---------- footer ---------- */
.foot-big{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(3rem,10vw,8.5rem);line-height:.85;color:var(--accent);margin-bottom:2.5rem}
.foot-grid{display:grid;gap:2rem}
.foot-mark{font-family:var(--font-display);text-transform:uppercase;font-size:1.6rem;margin-bottom:.5rem}
.site-footer h2{font-family:var(--font-body);font-size:.8rem;font-weight:700;letter-spacing:.12em;opacity:.7;margin-bottom:.8rem;color:var(--on-footer)}
.site-footer ul{display:grid;gap:.5rem}
@media (min-width:800px){ .foot-grid{grid-template-columns:1.4fr 1fr 1fr} }
.callbar .alt{color:var(--on-primary)}
}
.plan :is(h2,h3){font-size:1.6rem}