/* EC Trail: what the theme adds on top of the prototype stylesheet (main.css is generated; edit here). */

/* Pills are links in the theme (filters work without JavaScript). */
a.pill{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
a.pill small{font-weight:600;opacity:.7}
.pr .row{display:flex;flex-wrap:wrap;gap:8px}

/* Language links in the top bar and the mobile menu */
.langs{display:flex;gap:2px}
.lng{color:#fff;font:700 13px/1 var(--btn);padding:6px 6px;border-radius:6px;text-decoration:none;opacity:.75}
.lng:hover,.lng.on{opacity:1}
.lng.on{color:var(--yellow)}
.mnav .lang{display:flex;gap:8px;margin-top:12px}
.mnav .lang .lng{color:var(--ink);border:2px solid var(--line);padding:10px 14px;opacity:1}
.mnav .lang .lng.on{background:var(--yellow);border-color:var(--yellow);color:#111}

/* Current section in the main navigation */
.nav > li > a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--yellow)}

/* Image placeholder: brand contour on slate, no network request */
.ph-empty{display:block;width:100%;aspect-ratio:3/2;background:var(--slate) var(--ec-contour-dark) center/cover}

/* Price table on activity pages */
.prose table.prices{width:100%;max-width:560px;border-collapse:collapse;margin-top:12px;font:600 15px/1.4 var(--body)}
.prose table.prices th{text-align:left;font-weight:600;color:var(--ink);padding:10px 12px 10px 0;border-bottom:1px solid var(--line)}
.prose table.prices td{text-align:right;white-space:nowrap;font-weight:800;color:var(--ink);padding:10px 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.prose table.prices td small{display:block;font-weight:600;color:var(--muted);white-space:normal}
.prose .note{font-size:14px}

/* Long lists: first 12 shown, the rest behind "Show all" (all links stay in the HTML) */
.cards .cc.more-hidden{display:none}
.showall{display:flex;justify-content:center;margin-top:32px}
/* The hidden attribute always wins, whatever display a class sets (the "Show all" button stayed visible after filtering). */
[hidden]{display:none!important}
.prose-wide{max-width:820px}
.cc .ph .ph-empty{aspect-ratio:8/5}

/* Light/dark switch */
.themetoggle{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:#fff;font:700 13px/1 var(--btn);padding:6px;border-radius:6px;cursor:pointer;opacity:.8}
.themetoggle:hover{opacity:1}
.themetoggle svg{width:16px;height:16px}
.themetoggle .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.themetoggle .i-sun{display:none}
.themetoggle[aria-pressed="true"] .i-sun{display:block}
.themetoggle[aria-pressed="true"] .i-moon{display:none}
.themetoggle.in-menu{color:var(--ink);border:2px solid var(--line);padding:10px 14px;opacity:1;margin-left:auto}
.themetoggle.in-menu .lbl{position:static;width:auto;height:auto;clip:auto}

/* Footer skyline */
.ec-ridge{position:relative;display:block;height:clamp(56px,calc(100vw / 6.2),240px);margin-top:64px;background:var(--bg)} /* Real proportions of the skyline (6.2 : 1) up to the cap. */
.ec-ridge svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
.ec-ridge .rf{fill:var(--slate)}
.ec-ridge .ry{fill:none;stroke:var(--yellow);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.ec-ridge .ryl{position:absolute;inset:0}
.js .ec-ridge .ryl{clip-path:inset(-8px 100% -8px 0);transition:clip-path 3.2s cubic-bezier(.45,.05,.25,1)}
.js .ec-ridge.on .ryl{clip-path:inset(-8px 0 -8px 0)}
.js .ec-ridge.done .ryl{clip-path:none;transition:none} /* Drawn: no clip left on the finished line. */
@media(prefers-reduced-motion:reduce){.js .ec-ridge .ryl{transition:none;clip-path:none}}

/* ---------- Request form ---------- */
.rq{scroll-margin-top:120px}
.fld{min-width:0}
.fld.wide{grid-column:1/-1}
.cartf fieldset{border:0;margin:0;padding:0;min-width:0}
.cartf legend,.fld .lbl{font:700 12px/1.2 var(--btn);display:block;margin-bottom:6px;padding:0}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative;display:inline-flex;cursor:pointer}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt span{display:inline-flex;align-items:center;min-height:42px;padding:10px 14px;border-radius:8px;border:2px solid var(--line);background:var(--surface);font:700 14px/1 var(--btn)}
.opt:hover span{border-color:var(--ink)}
.opt input:checked + span{background:var(--yellow);border-color:var(--yellow);color:#111}
.opt input:focus-visible + span{outline:3px solid var(--focus);outline-offset:2px}
.cartf .chk2 input{width:auto;min-width:20px;height:20px;accent-color:var(--yellow)}
.hint,.info-v{font:500 13px/1.4 var(--body);color:var(--muted);margin-top:6px}
.info-v{margin-top:0;color:var(--ink);font-weight:600}
.req{color:var(--gold)}
.ages{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin-top:12px}
.ages:empty{display:none}
.sizes .sz{display:grid;gap:8px}
.szr{display:grid;grid-template-columns:minmax(90px,140px) repeat(auto-fit,minmax(90px,1fr));gap:8px;align-items:end;padding:10px;background:var(--chip);border-radius:10px}
.szr .who{font:700 13px/1.2 var(--btn);align-self:center}
.szr label span{font:600 11px/1.2 var(--btn);display:block;margin-bottom:4px;color:var(--muted)}
.soon{margin-top:8px;padding:10px 12px;border-radius:8px;background:var(--yellow);color:#111;font:600 13px/1.4 var(--btn)}
.soon a{color:#111;text-decoration:underline}
.errsum{grid-column:1/-1;border:2px solid #b3261e;border-radius:var(--r);padding:18px;background:var(--surface)}
.errsum h2{font-size:1.2rem}
.errsum ul{margin:10px 0 0;padding-left:18px}
.errsum a{color:inherit;text-decoration:underline}
[aria-invalid="true"]{border-color:#b3261e!important}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lt img,.lt .ph-empty{width:72px;height:54px;object-fit:cover;border-radius:8px;flex:none;aspect-ratio:auto}
.lt b{display:block}
.lt small{color:var(--muted);font:600 13px/1.3 var(--btn)}
#sum li{display:grid;gap:2px;padding-bottom:10px;border-bottom:1px solid rgba(0,0,0,.12)}
#sum li span{font:600 13px/1.3 var(--btn);opacity:.8}
.sumc{display:grid;gap:14px}


.rqside{position:sticky;top:96px}
@media(max-width:900px){.rq{grid-template-columns:minmax(0,1fr)}.rqside{position:static}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .err{color:#ff8a80}:root:not([data-theme="light"]) .errsum{border-color:#ff8a80}}
:root[data-theme="dark"] .err{color:#ff8a80}
:root[data-theme="dark"] .errsum{border-color:#ff8a80}

/* "Added" state on add buttons, and the toast */
[data-add][aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast a{color:var(--yellow);text-decoration:underline;margin-left:8px}

/* ---------- Compact filters: segmented controls + one scrolling row of sport chips ---------- */
.fl2{display:grid;gap:14px;margin-block:24px 8px;grid-template-columns:minmax(0,1fr)}
.flrow{display:flex;flex-wrap:wrap;gap:12px 28px}
.fg{display:grid;gap:6px;min-width:0}
.fgl{font:800 11px/1 var(--btn);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.segs{display:inline-flex;border:1.5px solid var(--line);border-radius:10px;padding:3px;gap:2px;background:var(--surface);width:max-content;max-width:100%;overflow-x:auto}
.fl2 a.pill{min-height:34px;padding:8px 12px;font-size:13.5px;border-radius:7px;border:0;background:transparent;white-space:nowrap}
.fl2 a.pill:hover{background:var(--chip)}
.fl2 a.pill[aria-pressed="true"]{background:var(--yellow);color:#111}
.fchips{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:thin;padding-bottom:4px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.fchips a.pill{border:1.5px solid var(--line);background:var(--surface)}
.fchips a.pill[aria-pressed="true"]{border-color:var(--yellow)}
@media(max-width:700px){.flrow{gap:12px 16px}.segs{width:100%}.segs a.pill{flex:1 1 auto;justify-content:center}}

/* ---------- Logo: no dark panel; lettering follows the theme, the sun stays yellow ---------- */
.hdr .logo,.hdr .logo::before{background:none!important}
.hdr .logo::before{display:none}
.hdr .logo{padding:0;height:auto;display:flex;align-items:center;color:var(--ink)}
.lg{display:block;height:46px;width:auto}
.lg .lg-t{fill:currentColor}
.lg .lg-s{fill:var(--yellow)}
footer .logo{color:#fff;display:inline-block}
footer .lg{height:44px}
@media(max-width:1120px){.hdr .lg{height:38px}.hdr .bar{padding-left:20px}}
@media(max-width:520px){.hdr .lg{height:32px}.hdr .bar{padding-left:14px}}

/* ---------- Vertical rhythm: more air at the top of every page ---------- */
.crumbs{padding-block:var(--s4) var(--s2)}
.ptitle{padding-block:var(--s3) var(--s6)}
.ptitle .lede{margin-top:var(--s3)}
.detail{padding-block:var(--s5) var(--s7);row-gap:var(--s5)}
.detail h1{margin-block:var(--s2) var(--s4)!important}
.detail .gal{margin-bottom:var(--s4)}
.detail .facts{margin-block:var(--s4) var(--s5)}
.detail .prose h2{margin-top:var(--s5)}
.ph2 .wrap{padding-block:var(--s6)}
.crumbs + .ph2 .wrap{padding-top:var(--s4)}
.hero{min-height:clamp(520px,74vh,680px)}
.hero .in{padding-block:var(--s7) calc(var(--s7) + 32px)}
.hero .lead{margin-top:var(--s3)}
.hero .row{margin-top:var(--s5)}
.finwrap{margin-top:-64px}
.fquick{margin-top:var(--s3)}
.info .langs{display:flex;align-items:center;align-self:center}

/* Popular badge on cards */
.cc .bd{position:relative}
.cc .badge{position:absolute;top:-14px;right:16px;font:800 11px/1 var(--btn);letter-spacing:.1em;text-transform:uppercase;background:var(--yellow);color:#111;padding:7px 10px;border-radius:6px}

/* One transition for every filter: results dim while swapping, then fade in */
#results{transition:opacity .14s ease}
#results.is-swapping{opacity:.35}
#results.is-in{animation:ec-in .24s ease-out}
@keyframes ec-in{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#results,#results.is-in{transition:none;animation:none}}
.fl2 a.pill small{font-weight:700;opacity:.6;margin-left:2px}
.count{margin-block:var(--s2)}
.cc.is-out,.inst.is-out{display:none!important}

/* ---------- Page content blocks (Hub, About, Region, Rental). Editable in the block editor ---------- */
.ec-blocks > *{max-width:1200px;margin-inline:auto;padding-inline:20px}
.ec-blocks .wp-block-group{padding-block:var(--s7)}
.ec-blocks .ec-band{background:var(--grey);max-width:none;padding-inline:max(20px,calc((100% - 1160px) / 2))}
.ec-blocks .wp-block-heading{font-family:var(--exo);font-weight:700;line-height:1.1;text-wrap:balance}
.ec-blocks h2.wp-block-heading{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:var(--s3)}
.ec-blocks h3.wp-block-heading{font-size:1.25rem;margin:var(--s2) 0 var(--s1)}
.ec-blocks p{color:var(--muted);max-width:62ch;line-height:1.6}
.ec-blocks p + p{margin-top:var(--s2)}
.ec-blocks p a{color:var(--ink);text-decoration:underline}
.ec-blocks .ec-lede{font-size:1.15rem;margin-bottom:var(--s5)}
.ec-blocks .ec-quote{font:500 clamp(1.25rem,2.2vw,1.6rem)/1.4 var(--exo);color:var(--ink);margin-bottom:var(--s4)}
.ec-blocks .wp-block-columns{display:grid;gap:clamp(20px,3vw,40px);align-items:start}
.ec-blocks .ec-split-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.ec-blocks .ec-feats,.ec-blocks .ec-steps{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.ec-blocks .ec-vals{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:var(--s5) var(--s6)}
.ec-blocks .ec-tiles{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.ec-blocks .ec-seasons{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));padding-bottom:var(--s7)}
.ec-blocks .ec-feats > .wp-block-column,.ec-blocks .ec-steps > .wp-block-column{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4)}
.ec-blocks .ec-feats h3.wp-block-heading,.ec-blocks .ec-steps h3.wp-block-heading{margin-top:0}
.ec-blocks .ec-vals h3.wp-block-heading{padding-left:18px;border-left:4px solid var(--yellow)}
.ec-blocks .ec-vals p{padding-left:22px}
.ec-blocks .wp-block-image{margin:0}
.ec-blocks .wp-block-image img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r);display:block}
.ec-blocks .ec-split .wp-block-image img{aspect-ratio:4/3}
.ec-blocks .ec-tiles .wp-block-image img{aspect-ratio:16/10}
.ec-blocks .wp-block-buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s3)}
.ec-blocks .wp-block-button__link{display:inline-flex;align-items:center;min-height:44px;padding:12px 20px;border-radius:var(--btn-r);background:var(--yellow);color:#111;font:700 15px/1 var(--btn);text-decoration:none}
.ec-blocks .wp-block-button__link:hover{background:var(--ink);color:var(--bg)}
@media(min-width:861px){.ec-blocks .ec-flip .ec-split-cols > .wp-block-column:first-child{order:0}}
@media(max-width:860px){.ec-blocks .ec-split-cols{grid-template-columns:minmax(0,1fr)}.ec-blocks .ec-flip .ec-split-cols > .wp-block-column:first-child{order:2}}
.ec-blocks .ec-steps:has(> .wp-block-column:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.ec-blocks .ec-steps:has(> .wp-block-column:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.ec-blocks .ec-steps:has(> .wp-block-column:nth-child(4)){grid-template-columns:minmax(0,1fr)}}

/* ---------- Contact card: its own full-width section above the footer skyline ---------- */
.ctc{background:var(--bg);padding-block:var(--s7) var(--s6)}
.ctc + footer .ec-ridge{margin-top:0}
.contact{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:stretch;padding:clamp(28px,5vw,56px);position:relative;overflow:hidden}
.contact h2{text-transform:none;font-size:clamp(2rem,4vw,3rem);line-height:1.05;letter-spacing:-.01em;text-wrap:balance}
.ctc-main{display:flex;flex-direction:column;justify-content:center}
.ctc-k{font:800 12px/1 var(--btn);letter-spacing:.12em;text-transform:uppercase;opacity:.65;margin-bottom:14px}
.ctc-sub{margin:16px 0 28px;font-size:1.08rem;line-height:1.55;max-width:44ch;color:#2a2a2a}
.ctc-acts{display:flex;flex-wrap:wrap;gap:12px}
.ctc-acts .btn{display:inline-flex;align-items:center;gap:10px}
.ctc-acts .btn svg{width:20px;height:20px;flex:none}
.ctc-acts .btn.ln{background:transparent;color:#111;border:2px solid #111}
.ctc-acts .btn.ln:hover{background:#111;color:var(--yellow)}
.ctc-list{list-style:none;margin:0;padding:clamp(8px,1.5vw,12px) clamp(18px,2.5vw,28px);background:rgba(255,255,255,.55);border-radius:calc(var(--r) - 4px);display:flex;flex-direction:column;justify-content:center}
.ctc-list li{display:flex;gap:16px;align-items:center;padding:16px 0}
.ctc-list li + li{border-top:1px solid rgba(17,17,17,.12)}
.ctc-list .ic{flex:none;width:44px;height:44px;border-radius:50%;background:#111;color:var(--yellow);display:grid;place-items:center}
.ctc-list .ic svg{width:20px;height:20px}
.ctc-list small{display:block;font:800 11px/1 var(--btn);letter-spacing:.1em;text-transform:uppercase;opacity:.6;margin-bottom:6px}
.ctc-list a,.ctc-list b{font-weight:700;font-size:1.02rem;color:#111;overflow-wrap:anywhere}
.ctc-list a{text-decoration:underline;text-decoration-color:rgba(17,17,17,.3);text-underline-offset:3px}
.ctc-list a:hover{text-decoration-color:#111}
@media(max-width:860px){.contact{grid-template-columns:minmax(0,1fr)}}
@media(max-width:480px){.contact{padding:24px 20px}.ctc-acts .btn{flex:1 1 auto;padding-inline:16px}.ctc-list{padding-inline:16px}}

/* ---------- Cross-link between Activities and Rental ---------- */
.xlink{display:flex;align-items:center;gap:clamp(14px,2.4vw,24px);margin:0 0 var(--s4);padding:14px clamp(14px,2vw,22px);background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--yellow);border-radius:var(--r);color:var(--ink);text-decoration:none;transition:border-color .2s,box-shadow .2s,transform .2s}
.xlink:hover{border-color:var(--ink);border-left-color:var(--yellow);box-shadow:var(--shadow);transform:translateY(-1px)}
.xl-th{display:flex;flex:none;padding-left:12px}
.xl-th img{width:52px;height:52px;object-fit:cover;border-radius:50%;border:3px solid var(--surface);margin-left:-12px;background:var(--grey)}
.xl-tx{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.xl-tx b{font:700 1.15rem/1.2 var(--exo)}
.xl-tx span{color:var(--muted);font-size:.95rem;line-height:1.45}
.xl-go{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 18px;border-radius:var(--btn-r);background:var(--yellow);color:#111;font:700 15px/1 var(--btn);white-space:nowrap}
.xlink:hover .xl-go{background:var(--ink);color:var(--bg)}
@media(max-width:640px){.xlink{flex-wrap:wrap}.xl-th{display:none}.xl-go{width:100%;justify-content:center}}

/* ---------- Header: logo left, menu exactly centred, request (and burger) right ---------- */
.hdr .bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center}
.hdr .bar .logo{justify-self:start}
.hdr .bar .nav{margin:0;justify-self:center}
.hdr .hend{justify-self:end;display:flex;align-items:center;gap:10px}
.hdr .hend .rbtn{margin:0}
@media(max-width:1120px){.hdr .bar{grid-template-columns:auto minmax(0,1fr)}.hdr .bar .nav{display:none}}

/* Page title with something beside the intro (e.g. the rental link on Activities) */
.ptitle.has-aside{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,400px);gap:var(--s3) var(--s6);align-items:end}
.ptitle .pt-aside .xlink{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 16px;padding:18px 20px}
.ptitle .pt-aside .xl-th{display:flex}
.ptitle .pt-aside .xl-go{grid-column:1/-1;justify-content:center}
@media(max-width:900px){.ptitle.has-aside{grid-template-columns:minmax(0,1fr)}}

/* Activities: the filters follow the intro a little closer */
.ptitle:has(+ .wrap .fl2),.ptitle:has(+ section .fl2){padding-bottom:var(--s3)}
.ptitle + .wrap .fl2{margin-top:var(--s2)}
.btn svg{width:18px;height:18px;flex:none}

/* ---------- Enquiry panel (groups, private events) ---------- */
.enq-wrap{padding-block:var(--s5) var(--s2)}
.enq{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s4) var(--s6);align-items:center;background:var(--slate);color:#fff;border-radius:var(--r);padding:clamp(24px,4vw,44px);border-top:6px solid var(--yellow)}
.enq h2{font:700 clamp(1.5rem,2.6vw,2rem)/1.15 var(--exo);text-wrap:balance}
.enq p{margin-top:10px;color:#c9ced6;max-width:56ch;line-height:1.55}
.enq-asks{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0}
.enq-asks li{font:700 13px/1 var(--btn);padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.enq-asks li::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--yellow);margin-right:8px;vertical-align:1px}
.enq-acts{display:grid;gap:10px;justify-items:stretch;min-width:220px}
.enq-acts .btn{justify-content:center}
.btn.wa{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn.wa:hover{background:#fff;color:#111;border-color:#fff}
.enq-acts small{color:#a3abb7;font-size:13px;text-align:center;overflow-wrap:anywhere}
@media(max-width:760px){.enq{grid-template-columns:minmax(0,1fr)}.enq-acts{min-width:0}}

/* ---------- FAQ: cards that open smoothly, the first one open ---------- */
.faqs .faqgrid{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,5vw,80px)}
.faq-hd .h2{margin-top:12px}
.faq-hd .lede{margin:16px 0 24px;max-width:34ch}
.faq-hd .btn{display:inline-flex;align-items:center;gap:8px}
.faqs .faq{display:grid;gap:12px}
.faqs .faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:0;transition:border-color .2s,box-shadow .2s;interpolate-size:allow-keywords}
.faqs .faq details:last-child{border-bottom:1px solid var(--line)}
.faqs .faq details:hover{border-color:color-mix(in srgb,var(--ink) 35%,var(--line))}
.faqs .faq details[open]{border-color:var(--ink);box-shadow:var(--shadow)}
.faqs .faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;font:700 1.05rem/1.35 var(--exo);cursor:pointer;border-radius:var(--r)}
.faqs .faq summary::-webkit-details-marker{display:none}
.faqs .faq summary:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.faqs .faq summary i{flex:none;position:relative;width:32px;height:32px;border-radius:50%;background:var(--grey);box-shadow:inset 0 0 0 1px var(--line);transition:background .2s,transform .3s}
.faqs .faq summary i::before,.faqs .faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--ink);border-radius:2px;transition:transform .3s}
.faqs .faq summary i::after{transform:rotate(90deg)}
.faqs .faq details[open] summary i{background:var(--yellow);transform:rotate(180deg)}
.faqs .faq details[open] summary i::before,.faqs .faq details[open] summary i::after{background:#111}
.faqs .faq details[open] summary i::after{transform:rotate(0)}
.faqs .faq-a{padding:0 22px 22px}
.faqs .faq-a p{margin:0;color:var(--muted);line-height:1.65;max-width:68ch;font-weight:400}
.faqs .faq details::details-content{block-size:0;overflow:clip;transition:block-size .3s ease,content-visibility .3s allow-discrete}
.faqs .faq details[open]::details-content{block-size:auto}
@media(max-width:820px){.faqs .faqgrid{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.faqs .faq details::details-content{transition:none}}
@media(max-width:640px){.ptitle .pt-aside .xl-th{display:none}.ptitle .pt-aside .xlink{grid-template-columns:minmax(0,1fr);padding:16px}}

/* Round arrow buttons: an SVG arrow centred in the circle (a text arrow sits off-centre on the font's baseline) */
.rnd{padding:0;line-height:0}
.rnd svg{width:22px;height:22px;display:block}
.cat .btn::after{content:"";background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/18px 18px no-repeat,var(--yellow);flex:none}

/* ---------- Burger: three lines that turn into a cross when the menu is open ---------- */
.burger .bl{position:relative;display:block;width:20px;height:14px}
.burger .bl i{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .2s,top .3s cubic-bezier(.4,0,.2,1)}
.burger .bl i:nth-child(1){top:0}
.burger .bl i:nth-child(2){top:6px}
.burger .bl i:nth-child(3){top:12px}
.burger[aria-expanded="true"] .bl i:nth-child(1){top:6px;transform:rotate(45deg)}
.burger[aria-expanded="true"] .bl i:nth-child(2){opacity:0;transform:scaleX(.2)}
.burger[aria-expanded="true"] .bl i:nth-child(3){top:6px;transform:rotate(-45deg)}
@media(prefers-reduced-motion:reduce){.burger .bl i{transition:none}}

/* ---------- Design rule: a box with a yellow accent edge has square corners (a rounded corner bends the edge).
   See design-work/design-system.md. ---------- */
.xlink,.enq,.finder,.tray,.rcard,.card.y,.nums div,.rstats div{border-radius:0}
.ptitle .pt-aside .xlink{border-radius:0}

/* ---------- Request form QA: readable labels, even spacing, two columns, 16px fields (no zoom on iPhone) ---------- */
.cartf .fld label,.cartf .tgrid label,.cartf .lf label,.cartf legend,.cartf .fld .lbl{font:600 14px/1.3 var(--btn);color:var(--ink);margin-bottom:8px}
.cartf .lf,.cartf .tgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) var(--s2)}
.cartf .tgrid .fld.wide,.cartf .tgrid .ages,.cartf .tgrid .chk2{grid-column:1/-1}
.cartf input:not([type=checkbox]):not([type=radio]),.cartf select,.cartf textarea{font:500 16px/1.3 var(--body);min-height:48px;padding:12px 14px;border-radius:var(--btn-r);border:1.5px solid var(--line);background:var(--bg);color:var(--ink)}
.cartf textarea{min-height:96px;resize:vertical}
.cartf ::placeholder{color:var(--muted);opacity:.8}
.cartf input:not([type=checkbox]):not([type=radio]):hover,.cartf select:hover,.cartf textarea:hover{border-color:color-mix(in srgb,var(--ink) 35%,var(--line))}
.cartf input:not([type=checkbox]):not([type=radio]):focus,.cartf select:focus,.cartf textarea:focus{outline:3px solid color-mix(in srgb,var(--yellow) 70%,transparent);outline-offset:0;border-color:var(--ink)}
.cartf .hint{font-size:14px;margin-top:8px;line-height:1.45}
.cartf .ages{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s2);margin-top:0}
.cartf .line{padding:var(--s4);gap:var(--s3)}
.cartf .lt b{font:700 1.1rem/1.25 var(--exo)}
.cartf .opt span{min-height:44px;padding:11px 16px;font-size:15px}
.cartf .opts{gap:10px}
.cartf .grp{padding:var(--s2);gap:var(--s2)}
.cartf .szr{padding:12px;gap:10px}
.cartf .szr label span{font-size:12px}
.lx{display:grid;place-items:center;padding:0}
.lx svg{width:20px;height:20px}
/* Checkboxes: drawn, so they read the same in both themes (the native ones rendered as solid dark squares) */
.cartf .chk2{gap:12px;font:500 15px/1.4 var(--body);align-items:flex-start}
.cartf .chk2 label{font:500 15px/1.4 var(--body);margin:0;padding-top:1px}
.cartf .chk2 input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;width:22px!important;height:22px;min-width:0;min-height:0!important;margin:0;padding:0;border:2px solid color-mix(in srgb,var(--ink) 40%,var(--line));border-radius:5px;background:var(--surface);cursor:pointer;transition:background .15s,border-color .15s}
.cartf .chk2 input[type=checkbox]:hover{border-color:var(--ink)}
.cartf .chk2 input[type=checkbox]:checked{background:var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/15px no-repeat;border-color:var(--yellow)}
.cartf .chk2 input[type=checkbox]:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media(max-width:480px){.cartf .lf,.cartf .tgrid{grid-template-columns:minmax(0,1fr)}.cartf .line{padding:var(--s3)}}
.cartf #trip > .chk2{margin-top:var(--s3)}
.cartf #trip h2,.rqmain > h2{font-size:1.4rem}
.cartf #trip > .fld.wide{margin-top:var(--s3)}

/* ---------- Snow-first home and Snowsports School ---------- */
/* Video hero: the photo is the poster underneath; the video fades in once it can play. */
.hero>video.hv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:0;transition:opacity .8s ease}
.hero>video.hv.on{opacity:1}
.hvb{position:absolute;right:max(16px,calc((100% - 1160px) / 2));bottom:var(--s3);z-index:2;width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.75);background:rgba(10,14,22,.35);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;transition:background .2s}
.hvb:hover{background:rgba(10,14,22,.6)}
.hvb svg{width:18px;height:18px;grid-area:1/1}
.hvb svg{display:none}
.hvb svg:first-child,.hvb[aria-pressed="true"] svg:last-child{display:block} /* pause while playing, play while paused */
.hvb[aria-pressed="true"] svg:first-child{display:none}
.hero-k{color:var(--yellow);margin-bottom:var(--s2)}
.hero-v h1{max-width:16ch;text-transform:none}
.hero-v .lead{max-width:46ch}

/* Group courses and private lessons, overlapping the bottom of the hero */
.lpick{position:relative;z-index:3;margin-top:calc(-1 * var(--s6));display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.lp{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:var(--s4);display:flex;flex-direction:column;scroll-margin-top:110px}
.lp h2{font:700 clamp(1.4rem,2.2vw,1.75rem)/1.15 var(--exo);margin-top:10px;text-wrap:balance}
.lp-f{color:var(--muted);font-size:.95rem;margin:10px 0 var(--s2)}
.lp-more{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:var(--s3);font:700 15px/1 var(--btn);color:var(--ink)}
.lp-more svg{width:18px;height:18px;transition:transform .2s}
.lp-more:hover svg{transform:translateX(3px)}
.lrows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.lrows li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.lr-t{display:grid;gap:3px;color:var(--ink);min-width:0}
.lr-t b{font:700 1rem/1.3 var(--exo)}
.lr-t:hover b{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:3px}
.lr-t span{color:var(--muted);font-size:.88rem;line-height:1.35}
.lr-p{font:700 14px/1.2 var(--btn);white-space:nowrap;text-align:right}
@media(max-width:900px){.lpick{grid-template-columns:minmax(0,1fr);margin-top:calc(-1 * var(--s5))}}
@media(max-width:480px){.lp{padding:var(--s3)}.lrows li{grid-template-columns:minmax(0,1fr) auto}.lr-p{grid-column:1;grid-row:2;text-align:left}.lrows .btn{grid-row:1/3;grid-column:2}}

/* Discipline tiles */
.disc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);margin-top:var(--s4)}
.dt{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;isolation:isolate;color:#fff;background:var(--slate)}
.dt img,.dt .ph-empty{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s ease}
.dt::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,14,22,0) 40%,rgba(10,14,22,.78))}
.dt:hover img{transform:scale(1.04)}
.dt-b{position:absolute;left:var(--s3);right:72px;bottom:var(--s3);display:grid;gap:4px}
.dt-b b{font:700 clamp(1.2rem,2vw,1.5rem)/1.1 var(--exo)}
.dt-b small{font:600 13px/1 var(--btn);opacity:.85}
.dt-go{position:absolute;right:var(--s3);bottom:var(--s3);width:42px;height:42px;border-radius:50%;background:var(--yellow);color:#111;display:grid;place-items:center;transition:transform .2s}
.dt-go svg{width:18px;height:18px}
.dt:hover .dt-go{transform:translateX(3px)}
@media(max-width:900px){.disc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.disc{grid-template-columns:minmax(0,1fr)}.dt{aspect-ratio:16/9}}

/* Instructor portraits */
.istrip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3) var(--s2)}
.istrip li{display:grid;justify-items:center;text-align:center;gap:4px}
.istrip img{width:min(100%,104px);aspect-ratio:1;object-fit:cover;border-radius:50%;margin-bottom:6px;border:3px solid var(--surface);box-shadow:var(--shadow)}
.istrip b{font:700 15px/1.2 var(--exo)}
.istrip small{font:600 11px/1.3 var(--btn);letter-spacing:.06em;color:var(--muted)}
.why{align-items:start}
@media(max-width:480px){.istrip{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Summer band */
.sband{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s6);align-items:center}
.sband>img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.sband .h2{margin-top:10px}
@media(max-width:860px){.sband{grid-template-columns:minmax(0,1fr);gap:var(--s4)}}

/* Meeting points */
.mpts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:var(--s3);margin-top:var(--s4)}
.mpt h3{display:flex;align-items:center;gap:8px;font:700 1.1rem/1.2 var(--exo);margin-bottom:10px}
.mpt h3 svg{width:20px;height:20px;color:var(--gold);flex:none}
.mpt ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mpt li{color:var(--muted);font-size:.95rem;line-height:1.4;padding-left:28px}

/* Snowsports School page */
.onpage{display:flex;flex-wrap:wrap;gap:8px;padding-block:var(--s4) 0}
.onpage a{font:600 14px/1 var(--btn);padding:10px 14px;border-radius:999px;background:var(--chip);color:var(--ink);transition:background .2s}
.onpage a:hover{background:var(--yellow);color:#111}
.sschool{scroll-margin-top:90px}
.sschool .two{align-items:start;row-gap:var(--s5)}
.sschool .h2{margin-top:10px}
.sschool .span2{grid-column:1/-1}
.sph{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.sfacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2) var(--s3);margin-top:var(--s4)}
.sfacts div{border-top:2px solid var(--line);padding-top:12px}
.sfacts dt{font:800 11px/1.2 var(--btn);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.sfacts dd{margin:0;font:600 1rem/1.35 var(--body);color:var(--ink)}
.lrows.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s5);border-top:0}
.lrows.cols li{border-top:1px solid var(--line);border-bottom:0}
.lrows.cols li:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
#how,#meet,#instructors,#guided{scroll-margin-top:90px}
.steps4{list-style:none;counter-reset:st;margin:var(--s4) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.steps4 li{counter-increment:st;display:grid;gap:8px;align-content:start}
.steps4 li::before{content:counter(st);width:40px;height:40px;border-radius:50%;background:var(--yellow);color:#111;display:grid;place-items:center;font:700 1.1rem/1 var(--exo);margin-bottom:6px}
.steps4 b{font:700 1.1rem/1.25 var(--exo)}
.steps4 span{color:var(--muted);line-height:1.5}
@media(max-width:900px){.steps4{grid-template-columns:repeat(2,minmax(0,1fr))}.lrows.cols{grid-template-columns:minmax(0,1fr)}.lrows.cols li:nth-last-child(2){border-bottom:0}}
@media(max-width:480px){.steps4,.sfacts{grid-template-columns:minmax(0,1fr)}}
.why .nums{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Video band, halfway down the home page */
.vband{position:relative;isolation:isolate;overflow:hidden;color:#fff;min-height:clamp(420px,70vh,640px);display:flex;align-items:flex-end}
.vband>img,.vband>video.hv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.vband>video.hv{opacity:0;transition:opacity .8s ease}
.vband>video.hv.on{opacity:1}
.vband::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,14,22,.05) 30%,rgba(10,14,22,.7)),linear-gradient(90deg,rgba(10,14,22,.45),rgba(10,14,22,0) 60%)}
.vb-in{padding-block:var(--s7) var(--s6)}
.vb-in h2{font:700 clamp(2rem,4.4vw,3.4rem)/1.05 var(--exo);max-width:18ch;text-wrap:balance}
.vb-in p{margin:var(--s2) 0 var(--s4);font-size:clamp(1.05rem,1.6vw,1.25rem);max-width:46ch;opacity:.92}
.vband .hvb{bottom:var(--s4)}

/* ---------- Activity pages ---------- */
/* Title in sentence case like every other heading (it was all capitals). */
.dh1{font:700 clamp(2.2rem,4.6vw,3.4rem)/1.05 var(--exo);letter-spacing:-.015em;margin:16px 0 24px;text-wrap:balance}
/* Lists in page text: the bullet sits in the margin and the item flows as one paragraph. (As a two-column grid,
   an item starting with bold text put the rest of the sentence in the 20px bullet column, one word per line.) */
.prose li{display:block;position:relative;padding-left:26px;line-height:1.6}
.prose li::before{position:absolute;left:4px;top:.62em;margin:0}
.prose ul{gap:10px}
.prose li strong:first-child{color:var(--ink)}

/* Language links in the top bar and mobile menu: the shared .langs class (also the "languages we teach" chips)
   pushed them 20px down. Same centre line as the rest of the bar. */
nav.langs{display:flex;align-items:center;gap:2px;margin:0;align-self:center}
nav.langs a{display:inline-flex;align-items:center;min-height:28px;padding:0 7px;line-height:1}
/* Headings in page text: sentence case like the rest of the site (the prototype set them in capitals). */
.prose h2{text-transform:none;font:700 clamp(1.5rem,2.6vw,1.9rem)/1.15 var(--exo);margin-top:var(--s5);text-wrap:balance}
.prose h3{text-transform:none}

/* ---------- Activity page: photos and text rhythm ---------- */
.detail .dlede{margin:0 0 var(--s4);max-width:58ch}
.agal{display:grid;gap:12px;margin:0 0 var(--s4);position:relative}
.agal .ag{position:relative;display:block;overflow:hidden;border-radius:var(--r);background:var(--grey);cursor:zoom-in}
.agal .ag img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:auto;max-height:none;border-radius:0;transition:transform .5s ease}
.agal .ag:hover img{transform:scale(1.03)}
.agal .ag:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.agal.n1 .ag{aspect-ratio:16/9}
.agal.n2{grid-template-columns:minmax(0,3fr) minmax(0,2fr);aspect-ratio:2/1}
.agal.n2 .ag,.agal.n3 .ag{height:100%}
.agal.n3{grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));aspect-ratio:16/9}
.agal.n3 .ag:first-child{grid-row:1/3}
.agal .ag-x{display:none}
.ag-more{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,14,22,.55);color:#fff;font:700 1.1rem/1 var(--exo)}
.ag-count{display:none}
@media(max-width:700px){
  /* Phones: one swipeable row, the next photo peeking in, a counter on top. */
  .agal,.agal.n2,.agal.n3{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;aspect-ratio:auto;margin-inline:-16px;padding-inline:16px;scrollbar-width:none}
  .agal::-webkit-scrollbar{display:none}
  .agal .ag,.agal .ag-x{display:block;flex:0 0 86%;aspect-ratio:4/3;scroll-snap-align:center}
  .agal.n1 .ag{flex-basis:100%}
  .ag-more{display:none}
  .ag-count{display:block;position:sticky;left:calc(100% - 64px);align-self:flex-start;margin:10px 0 0 -76px;flex:none;padding:6px 10px;border-radius:999px;background:rgba(10,14,22,.6);color:#fff;font:700 12px/1 var(--btn);z-index:1}
}
/* Full-screen viewer */
.lbox{border:0;padding:0;margin:0;width:100vw;height:100vh;max-width:none;max-height:none;background:rgba(8,10,14,.94);color:#fff;display:grid;place-items:center;overflow:hidden}
.lbox:not([open]){display:none}
.lbox::backdrop{background:rgba(8,10,14,.6)}
.lbox figure{margin:0;display:grid;justify-items:center;gap:12px;max-width:min(92vw,1600px)}
.lbox img{max-width:min(92vw,1600px);max-height:82vh;width:auto;height:auto;object-fit:contain;border-radius:8px}
.lbox figcaption{font:600 14px/1 var(--btn);opacity:.8;min-height:14px}
.lbox button{position:absolute;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;transition:background .2s}
.lbox button:hover{background:rgba(255,255,255,.25)}
.lbox button:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.lbox button svg{width:22px;height:22px}
.lb-x{top:16px;right:16px}
.lb-p{left:16px;top:50%;transform:translateY(-50%)}
.lb-n{right:16px;top:50%;transform:translateY(-50%)}
.lb-open{overflow:hidden}
@media(max-width:700px){.lb-p,.lb-n{top:auto;bottom:20px;transform:none}.lbox img{max-height:72vh}}

/* Text: even spacing between paragraphs, headings and lists */
.detail .facts{margin:0 0 var(--s5)}
.detail .prose{line-height:1.7}
.detail .prose>*+*{margin-top:var(--s2)}
.detail .prose p{margin-top:var(--s2)}
.detail .prose>:first-child{margin-top:0}
.detail .prose h2{margin:var(--s6) 0 var(--s2)}
.detail .prose h3{font:700 1.2rem/1.3 var(--exo);margin:var(--s4) 0 var(--s1)}
.detail .prose h2+*,.detail .prose h3+*{margin-top:0}
.detail .prose ul,.detail .prose ol{margin-block:var(--s2) var(--s3)}
.detail .prose p:has(>strong:only-child){margin-top:var(--s4);color:var(--ink)}
/* Video band text lines up with the page's left edge, like the hero (as a flex item the box shrank to its
   content and centred itself). Same bottom spacing as the hero. */
.vband .vb-in{width:100%;padding-block:var(--s7) calc(var(--s6) + 8px)}
.vband::after{background:linear-gradient(90deg,rgba(10,14,22,.62),rgba(10,14,22,.18) 55%,rgba(10,14,22,0) 75%),linear-gradient(180deg,rgba(10,14,22,0) 45%,rgba(10,14,22,.55))}
/* Top bar on phones: the language links never wrap (they were squeezed into a 31px column, one per line);
   the opening hours give way with an ellipsis instead. */
nav.langs{flex-wrap:nowrap;flex:none}
.info .wrap>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:700px){.info .wrap{gap:4px 12px}nav.langs a{padding:0 5px}}
/* Long links and words (URLs and emails in legal text) wrap instead of pushing the page sideways on phones. */
body{overflow-wrap:break-word}
.prose a,.prose code{overflow-wrap:anywhere}
/* Buttons with an icon (The Hub: Directions). */
.btn svg{width:18px;height:18px;flex:none}
/* Google reviews (About us): plain cards, no accent edge, so rounded corners are fine (R1). */
.grvh{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s3)}
.grvh>div{max-width:640px}
.grvsum{display:inline-grid;grid-template-columns:auto auto;align-items:center;gap:2px 12px;padding:14px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);text-decoration:none}
.grvsum b{grid-row:1/3;font:700 2.2rem/1 var(--exo)}
.grvsum span:last-child{font-size:14px;color:var(--muted)}
.grvsum:hover{border-color:var(--yellow)}
.grv-st{color:var(--yellow);letter-spacing:2px;font-size:16px;line-height:1}
.grv-st span{color:var(--line)}
.grvs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:var(--s3);margin-top:var(--s5)}
.grv{margin:0;text-align:left;display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3);background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.grv blockquote{margin:0;flex:1}
.grv blockquote p{margin:0;display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden}
.grv figcaption{font-size:14px;color:var(--muted)}
.grv figcaption b{color:var(--ink);font-weight:700}
/* Cookie banner (ec-core/analytics.php): bottom left, clear of the WhatsApp button, never covers the page. */
.ckb{position:fixed;left:16px;bottom:16px;z-index:60;width:min(420px,calc(100vw - 104px));padding:var(--s2) var(--s3);background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 10px 30px rgba(0,0,0,.18);font-size:14px;line-height:1.5}
.ckb p{margin:0 0 12px}
.ckb a{color:inherit;text-decoration:underline}
.ckb-b{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:520px){.ckb{left:12px;bottom:12px;width:calc(100vw - 96px)}}
.ckb-opts{display:grid;gap:10px;margin:0 0 14px}
.ckb-o{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.4;color:var(--muted);cursor:pointer}
.ckb-o input{margin-top:2px;width:18px;height:18px;accent-color:var(--yellow);flex:none}
.ckb-o b{display:block;color:var(--ink);font-size:14px}
/* 404: everything centred, the heading's yellow underline included. */
.nf{padding-block:90px;text-align:center}
.nf .h2{margin:12px auto 0}
.nf .h2::after{margin-inline:auto}
.nf .lede{margin:16px auto 0}
.nf .links{justify-content:center;flex-wrap:wrap;gap:10px;margin-top:32px}
/* Footer bottom line: legal note left, the website credit right (stacked on phones). */
footer .legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px}
footer .legal .credit{margin-left:auto}
/* Request sent: a plain card with a yellow top edge (square corners, R1). Text is ink or muted on the card
   surface, which passes WCAG AA in both themes (ink ≥ 12:1, muted ≥ 6:1); yellow only as edge, icon and button. */
.sent{padding-block:24px 80px;max-width:820px}
.sentbox{position:relative;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-top:6px solid var(--yellow);border-radius:0;padding:var(--s5) var(--s5) var(--s4)}
.sentbox:focus{outline:none}
.sentbox:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.sb-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--yellow);color:#111;margin-bottom:var(--s3)}
.sb-ic svg{width:26px;height:26px}
.sentbox h1{font-size:clamp(1.8rem,4vw,2.6rem);margin:0}
.sentbox .lede{color:var(--muted);margin:var(--s2) 0 0;max-width:62ch}
.sb-list{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:10px}
.sb-list li{display:flex;gap:10px;align-items:flex-start;font-weight:700}
.sb-list svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--gold)}
.sb-note{color:var(--muted);font-size:15px;margin:var(--s2) 0 0}
.sb-wa{margin:var(--s3) 0 0}
.sb-wa a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.sentbox .links{margin-top:var(--s4)}
@media(max-width:600px){.sentbox{padding:var(--s4) var(--s3) var(--s3)}}