/* WPS 2026 — inner-page components. Loads after wps.css. */

/* ---------- mobile nav (fixes the V3 gap: no menu, clipped toggles) ---------- */
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;
  border-radius:12px;border:1px solid var(--brd);background:var(--glass);cursor:pointer;padding:0 10px}
.burger span{display:block;height:2px;border-radius:2px;background:currentColor;transition:transform .25s var(--ease),opacity .25s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:99;background:var(--bg);padding:96px 24px 40px;
  overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
.mobile-menu.is-open{opacity:1;visibility:visible;transform:none}
.mobile-menu h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--w40);margin:22px 0 10px}
.mobile-menu a{display:block;padding:11px 0;font-size:17px;font-weight:700;color:var(--ink);border-bottom:1px solid var(--brd)}
html[data-theme="dark"] .mobile-menu a{color:#fff}
@media (max-width:1180px){
  .burger{display:flex}
  .nav__pill{gap:10px;padding:8px 10px 8px 16px}
  .nav__end{gap:8px}
}
@media (max-width:560px){
  .nav__end .lang[aria-label="Language"]{display:none}   /* keep the bar inside the screen */
  .brand__dp{display:none}
}

/* ---------- page hero ---------- */
.phero{position:relative;min-height:clamp(420px,58vh,620px);display:flex;align-items:flex-end;
  overflow:hidden;padding:0 28px 64px}
.phero__bg{position:absolute;inset:0;z-index:0}
.phero__bg img{width:100%;height:100%;object-fit:cover}
.phero__veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(7,6,26,.55) 0%,rgba(7,6,26,.35) 40%,rgba(7,6,26,.88) 100%)}
.phero__in{position:relative;z-index:2;max-width:var(--shell);margin:0 auto;width:100%}
.phero h1{font-size:clamp(38px,6vw,76px);font-weight:800;line-height:1.02;letter-spacing:-.035em;color:#fff;margin:14px 0 18px}
.phero p{font-size:clamp(16px,1.5vw,19px);line-height:1.6;color:rgba(255,255,255,.82);max-width:640px}
.phero .eyebrow{color:#fff}

/* ---------- proof band ---------- */
.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;
  max-width:var(--shell);margin:0 auto;padding:0 28px}
.proof__i{text-align:center;padding:26px 14px;border-radius:var(--r-md);border:1px solid var(--brd);background:var(--glass)}
.proof__n{font-size:clamp(30px,3.4vw,46px);font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--wps-light)}
.proof__l{font-size:12.5px;color:var(--w55);margin-top:8px;line-height:1.4}

/* ---------- generic cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card2{padding:28px;border-radius:var(--r-md);border:1px solid var(--brd);background:var(--glass);transition:all .25s var(--ease)}
.card2:hover{border-color:var(--brd-hi);transform:translateY(-3px)}
.card2 h3{font-size:19px;font-weight:750;margin-bottom:10px;color:var(--ink)}
html[data-theme="dark"] .card2 h3{color:#fff}
.card2 p{font-size:14.5px;line-height:1.6;color:var(--w55)}

/* ---------- teaser (internal linking) ---------- */
.teaser{display:grid;grid-template-columns:1.1fr 1fr;gap:34px;align-items:center;
  padding:40px;border-radius:var(--r-lg);border:1px solid var(--brd);
  background:radial-gradient(520px 320px at 92% -6%,rgba(0,199,177,.14),transparent 60%),
             radial-gradient(480px 340px at 4% 108%,rgba(54,164,221,.18),transparent 62%),var(--glass)}
.teaser h3{font-size:clamp(21px,2.2vw,28px);font-weight:750;line-height:1.15;margin-bottom:12px;color:var(--ink)}
html[data-theme="dark"] .teaser h3{color:#fff}
.teaser p{font-size:15px;line-height:1.6;color:var(--w55);margin-bottom:20px}
.teaser__art{display:flex;gap:10px;flex-wrap:wrap}
.teaser__art img{width:66px;height:66px;border-radius:50%;object-fit:cover;object-position:top center;border:2px solid var(--brd)}
.teaser__doc{border-radius:14px;overflow:hidden;border:1px solid var(--brd);box-shadow:0 18px 40px rgba(0,0,0,.18)}
.teaser__doc img{width:100%;display:block}
@media (max-width:840px){ .teaser{grid-template-columns:1fr;padding:28px} }

/* ---------- CTA band (every page gets an exit) ---------- */
.ctaband{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:52px 44px;text-align:center;
  background:radial-gradient(560px 340px at 92% -6%,rgba(0,199,177,.16),transparent 60%),
             radial-gradient(520px 360px at 4% 108%,rgba(54,164,221,.2),transparent 62%),
             linear-gradient(155deg,#FFFFFF,#F2F7FC 55%,#E9F1F9);border:1px solid #D7E6F2}
html[data-theme="dark"] .ctaband{background:radial-gradient(560px 340px at 92% -6%,rgba(0,199,177,.35),transparent 60%),
             radial-gradient(520px 360px at 4% 108%,rgba(54,164,221,.4),transparent 62%),
             linear-gradient(155deg,#101C6E,#0A1152 55%,#070D3F);border-color:rgba(54,164,221,.22)}
.ctaband h2{font-size:clamp(24px,3vw,38px);font-weight:800;letter-spacing:-.02em;margin-bottom:12px;color:var(--ink)}
html[data-theme="dark"] .ctaband h2{color:#fff}
.ctaband p{font-size:16px;color:var(--w55);max-width:560px;margin:0 auto 26px;line-height:1.6}
.ctaband__row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- board grid ---------- */
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.bmem{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--brd);background:var(--glass);transition:all .3s var(--ease)}
.bmem:hover{transform:translateY(-4px);border-color:var(--brd-hi)}
.bmem__ph{aspect-ratio:1/1;overflow:hidden;background:linear-gradient(160deg,#E8EFF9,#D4E3F4)}
.bmem__ph img{width:100%;height:100%;object-fit:cover;object-position:top center}
.bmem__b{padding:18px}
.bmem__n{font-weight:750;font-size:16px;line-height:1.25;color:var(--ink)}
html[data-theme="dark"] .bmem__n{color:#fff}
.bmem__r{font-size:12.5px;color:var(--wps-light);margin-top:6px;font-weight:600}
.bmem__o{font-size:12.5px;color:var(--w55);margin-top:2px}
.bmem__c{font-size:11px;color:var(--w40);margin-top:6px;letter-spacing:.06em;text-transform:uppercase}

/* ---------- accordion (FAQs) ---------- */
.acc{border-top:1px solid var(--brd)}
.acc__i{border-bottom:1px solid var(--brd)}
.acc__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 4px;background:none;border:0;cursor:pointer;text-align:left;font-family:inherit;
  font-size:17px;font-weight:700;color:var(--ink);line-height:1.35}
html[data-theme="dark"] .acc__q{color:#fff}
.acc__q:hover{color:var(--wps-light)}
.acc__q i{flex:0 0 26px;height:26px;border-radius:50%;border:1px solid var(--brd);position:relative;font-style:normal;transition:transform .28s var(--ease)}
.acc__q i::before,.acc__q i::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;transform:translate(-50%,-50%)}
.acc__q i::before{width:11px;height:1.6px}
.acc__q i::after{width:1.6px;height:11px;transition:opacity .28s var(--ease)}
.acc__i.is-open .acc__q i{transform:rotate(90deg)}
.acc__i.is-open .acc__q i::after{opacity:0}
.acc__a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.acc__i.is-open .acc__a{max-height:900px}
.acc__a > div{padding:0 4px 24px;font-size:15.5px;line-height:1.7;color:var(--w55);max-width:820px}
.acc__a a{color:var(--wps-light);font-weight:600}
.acc__a ul{margin:10px 0 0 18px}
.acc__a li{margin-bottom:6px}

/* ---------- contact ---------- */
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.cbox{padding:26px;border-radius:var(--r-md);border:1px solid var(--brd);background:var(--glass)}
.cbox h3{font-size:16px;font-weight:750;margin-bottom:6px;color:var(--ink)}
html[data-theme="dark"] .cbox h3{color:#fff}
.cbox a{font-size:14.5px;color:var(--wps-light);font-weight:600;word-break:break-word}
.cbox p{font-size:13px;color:var(--w55);margin-top:8px;line-height:1.5}
.cmeta{display:flex;flex-wrap:wrap;gap:26px;margin-top:26px;font-size:14px;color:var(--w55)}
.cmeta b{color:var(--ink);font-weight:700}
html[data-theme="dark"] .cmeta b{color:#fff}

/* ---------- misc ---------- */
.lede{font-size:clamp(17px,1.7vw,21px);line-height:1.62;color:var(--w55);max-width:760px}
.sect--tight{padding-top:0}
.qbox{padding:26px 28px;border-radius:var(--r-md);border-left:3px solid var(--wps-light);background:var(--glass)}
.qbox p{font-size:17px;line-height:1.55;color:var(--ink);font-weight:600}
html[data-theme="dark"] .qbox p{color:#fff}

/* teaser stat variant (used where we have no licensed photography) */
.teaser__stat{display:flex;gap:14px;flex-wrap:wrap}
.teaser__stat div{flex:1 1 90px;text-align:center;padding:22px 12px;border-radius:var(--r-md);
  border:1px solid var(--brd);background:var(--glass)}
.teaser__stat b{display:block;font-size:34px;font-weight:800;line-height:1;color:var(--wps-light);letter-spacing:-.03em}
.teaser__stat span{display:block;font-size:12px;color:var(--w55);margin-top:7px}

/* board member card without photography */
.bmem--noph .bmem__ini{display:flex;align-items:center;justify-content:center;aspect-ratio:16/7;
  font-size:30px;font-weight:800;letter-spacing:.04em;color:#fff;
  background:linear-gradient(140deg,var(--wps-dark),var(--wps-deep))}

/* contact form */
.cform{max-width:820px;display:flex;flex-direction:column;gap:16px}
.cform__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){ .cform__row{grid-template-columns:1fr} }
.cform label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--w40)}
.cform input,.cform select,.cform textarea{font-family:inherit;font-size:15px;padding:14px 16px;
  border-radius:var(--r-sm);border:1px solid var(--brd);background:var(--glass);color:var(--ink);
  transition:border-color .2s var(--ease)}
html[data-theme="dark"] .cform input,html[data-theme="dark"] .cform select,html[data-theme="dark"] .cform textarea{color:#fff}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:var(--wps-light)}
.cform textarea{resize:vertical}
.cform .btn{align-self:flex-start;margin-top:6px}

/* Contact Us — last item in the menu, styled like the other nav links */
.nav-contact-item{position:relative;padding:4px 0;transition:color .25s var(--ease)}
.nav-contact-item::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;
  background:var(--wps-light);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.nav-contact-item:hover::after{transform:scaleX(1)}

.nav-p50{position:relative;padding:4px 0;transition:color .25s var(--ease)}
.nav-p50::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--wps-light);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.nav-p50:hover::after{transform:scaleX(1)}

/* ---------- visual QC fixes ---------- */

/* text column should start level with the media, not float in the middle */
.about__grid--top{align-items:start}

/* trustee card: text was sitting flush against the card edge */
.bmem__b{padding:18px 18px 22px}
.bmem__c{margin-top:8px}

/* keep board rows equal height regardless of name wrap */
.board{grid-auto-rows:1fr}
.bmem{display:flex;flex-direction:column}
.bmem__b{flex:1}

/* long email addresses must wrap on a boundary, never mid-word */


/* FAQ: keep the question and its toggle within a readable measure */
.acc__q{max-width:920px}
.acc__a > div{max-width:920px}

/* FAQ open state: hide the vertical stroke, keep the horizontal one */
.acc__i.is-open .acc__q i{transform:none}
.acc__i.is-open .acc__q i::after{opacity:0}

@media (max-width:760px){
  /* countdown + assistant sizing lives in the docked-furniture block below */
  .phero{padding-right:120px}
  .ctaband{padding:40px 24px 76px}
  /* two-up trustee grid halves the scroll length */
  .board{grid-template-columns:1fr 1fr;gap:12px}
  .bmem__b{padding:12px 12px 16px}
  .bmem__n{font-size:14px}
  .bmem__r,.bmem__o{font-size:11.5px}
  .bmem__c{font-size:10px}
}
@media (max-width:420px){
  .phero{padding-right:104px}
}

/* ---------- registration page ---------- */

.rnote{font-size:13px;color:var(--w40);margin-top:14px;line-height:1.6}
.rnote a{color:var(--wps-light);font-weight:600}

/* what's included — two audiences, side by side */
.incl{display:grid;grid-template-columns:1.15fr 1fr;gap:20px;align-items:start}
@media (max-width:840px){ .incl{grid-template-columns:1fr} }
.incl__c{padding:32px;border-radius:var(--r-md);border:1px solid var(--brd);background:var(--glass)}
.incl__c--lead{background:radial-gradient(420px 260px at 88% -10%,rgba(0,199,177,.12),transparent 62%),var(--glass-hi);
  border-color:var(--brd-hi)}
html[data-theme="dark"] .incl__c--lead{background:radial-gradient(420px 260px at 88% -10%,rgba(0,199,177,.2),transparent 62%),var(--glass)}
.incl__h{font-size:19px;font-weight:750;color:var(--ink);margin-bottom:4px}
html[data-theme="dark"] .incl__h{color:#fff}
.incl__w{font-size:12.5px;color:var(--w40);margin-bottom:20px}
.incl__c ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.incl__c li{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;line-height:1.5;color:var(--w55)}
.incl__c li i{font-style:normal;color:var(--teal-ink);font-weight:800;flex:none;line-height:1.5}

/* how to register — numbered steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;counter-reset:s}
.step{position:relative;padding:30px 26px;border-radius:var(--r-md);border:1px solid var(--brd);
  background:var(--glass);transition:border-color .25s var(--ease),transform .25s var(--ease)}
.step:hover{border-color:var(--brd-hi);transform:translateY(-3px)}
.step__n{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
  font-family:var(--f-m);font-size:15px;font-weight:750;color:#fff;margin-bottom:16px;
  background:linear-gradient(140deg,var(--wps-dark),var(--wps-deep))}
.step h3{font-size:17px;font-weight:750;color:var(--ink);margin-bottom:9px}
html[data-theme="dark"] .step h3{color:#fff}
.step p{font-size:14px;line-height:1.6;color:var(--w55)}
.step a{color:var(--wps-light);font-weight:600}

/* cancellation policy — deadline rows */
.canc{display:flex;flex-direction:column;gap:12px}
.canc__r{display:grid;grid-template-columns:230px 1fr;gap:20px;align-items:baseline;
  padding:20px 24px;border-radius:var(--r-md);border:1px solid var(--brd);background:var(--glass);
  border-left:3px solid var(--brd-hi)}
.canc__r--full{border-left-color:var(--wps-teal)}
.canc__r--half{border-left-color:var(--wps-light)}
.canc__r--none{border-left-color:#C9536B}
.canc__d{font-weight:750;font-size:14.5px;color:var(--ink);line-height:1.4}
html[data-theme="dark"] .canc__d{color:#fff}
.canc__o{font-size:14.5px;color:var(--w55);line-height:1.55}
.canc__o b{color:var(--ink);font-weight:700}
html[data-theme="dark"] .canc__o b{color:#fff}
@media (max-width:640px){ .canc__r{grid-template-columns:1fr;gap:6px} }

/* small print note — group bookings, VAT, refunds */
.smallnote{margin-top:24px;padding:22px 26px;border-radius:var(--r-md);
  border:1px dashed var(--brd-hi);background:var(--glass);font-size:14px;line-height:1.65;color:var(--w55)}
.smallnote b{color:var(--ink);font-weight:700}
html[data-theme="dark"] .smallnote b{color:#fff}
.smallnote a{color:var(--wps-light);font-weight:600;overflow-wrap:anywhere}

/* registration page reuses the homepage pass grid inside a normal section */
.sect .pass__grid{margin-top:0}

/* visually hidden, still read by screen readers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- visual QC round 2 ---------- */

/* Emails must never split mid-word. Shrink to fit instead. */
.cbox a{word-break:keep-all;overflow-wrap:normal;hyphens:none;
  font-size:clamp(12px,1.05vw,14.5px);display:inline-block;max-width:100%}
html[data-theme="dark"] .cbox a{color:var(--wps-light)}   /* keep the link affordance in dark */

/* Hero copy was running under the fixed nav on small screens. */
@media (max-width:1080px){ .phero{padding-top:104px} }
@media (max-width:560px){ .phero{padding-top:116px} .phero .eyebrow{font-size:10.5px;letter-spacing:.16em} }

/* Consecutive body paragraphs had no separation. */
.body + .body{margin-top:14px}
.lede + .body{margin-top:18px}

/* Brand lockup left a dangling divider once the Dubai Police mark was hidden. */
@media (max-width:560px){ .brand__sep{display:none!important} }

/* Light mobile menu: the pill kept dark-mode styling, hiding the logo. */
.mobile-menu.is-open ~ .nav .nav__pill,
.nav:has(~ .mobile-menu.is-open) .nav__pill{background:var(--glass-hi);border-color:var(--brd)}
html:not([data-theme="dark"]) .mobile-menu.is-open{background:var(--bg)}
html:not([data-theme="dark"]) body:has(.mobile-menu.is-open) .nav__pill{background:rgba(255,255,255,.96);border-color:var(--brd)}
html:not([data-theme="dark"]) body:has(.mobile-menu.is-open) .logo-on-dark{display:none}
html:not([data-theme="dark"]) body:has(.mobile-menu.is-open) .logo-on-light{display:block}
html:not([data-theme="dark"]) body:has(.mobile-menu.is-open) .lang__b{color:var(--ink)}
html:not([data-theme="dark"]) body:has(.mobile-menu.is-open) .burger{color:var(--ink)}

/* FAQ rows were stopping 320px short of their own divider. */
.acc__q{max-width:none}
.acc__a > div{max-width:900px}

/* Contact form was using two-thirds of the column. */
.cform{max-width:none}
.cform__row{grid-template-columns:1fr 1fr 1fr}
@media (max-width:900px){ .cform__row{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .cform__row{grid-template-columns:1fr} }

/* Keep the hero clear of the fixed furniture on phones. */
@media (max-width:760px){
  .phero{padding-right:28px}
}
@media (max-width:420px){ .phero{padding-right:24px} }

/* ---------- visual QC fixes, registration round ---------- */

/* hero: the officers shot is a tall source — hold the crop on the faces */
.phero--reg .phero__bg img{object-position:center 24%}

/* long pass CTAs must wrap inside the pill, never spill past the rounded edge */
.pass .btn{white-space:normal;text-align:center;line-height:1.25}

/* teal tuned for light surfaces is too dim on the dark field — brighten it
   only where it sits on dark glass, never on the white hero pass card */
html[data-theme="dark"] .incl__c li i{color:var(--wps-teal)}

/* the lead "what's included" column read as a peer in dark — give it weight */
html[data-theme="dark"] .incl__c--lead{background:radial-gradient(420px 260px at 88% -10%,rgba(0,199,177,.2),transparent 62%),rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.22)}

/* the brand separator stayed behind after the Dubai Police logo was hidden,
   and the dark override was out-specifying the media query */
@media (max-width:560px){
  .brand__sep{display:none}
  html[data-theme="dark"] .brand__dp{display:none}
}

/* Contact cards were 5-across and too narrow for a full email address.
   Three per row gives ~400px, so addresses fit on one line at full size. */
.cgrid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.cbox a{font-size:14.5px}

/* ---------- mobile: keep the fixed furniture off the words ---------- */
/* The countdown used to float as a pill inside the text column, so body copy
   ran underneath it and lines were clipped mid-sentence. On phones it now
   docks as a full-width bar instead: it stays visible the whole way down the
   page — the client wants the countdown seen — but because it spans the
   column edge to edge it reads as furniture, never as a blob over a word.
   The assistant is still a circle floating in the column, so dock.js tucks
   that one away while the reader moves down and returns it on scroll-up. */
@media (max-width:760px){
  .fab-reg{position:fixed;inset:auto 0 0 0;flex-direction:row;align-items:center;
    justify-content:center;gap:11px;width:100%;min-width:0;border-radius:0;
    padding:11px 16px calc(11px + env(safe-area-inset-bottom,0px));
    transform:none;opacity:1;box-shadow:0 -10px 26px rgba(46,43,115,.26)}
  .fab-reg:hover{transform:none}
  /* docked, so only the top edge should be drawn */
  html[data-theme="dark"] .fab-reg{border-width:1px 0 0 0}
  .fab-reg__num{font-size:17px}
  .fab-reg__lbl{margin:0;font-size:8px}
  .fab-reg__go{width:auto;padding:7px 17px;font-size:11.5px}

  /* the assistant sits clear above the bar */
  .ai{bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .ai{transition:transform .32s var(--ease),opacity .26s var(--ease)}
  html.is-tucked .ai{transform:translateX(calc(100% + 22px)) scale(.8);opacity:0;pointer-events:none}

  /* nothing may be left stranded beneath the docked bar */
  .foot__bar{padding-bottom:96px}
}

/* honour reduced-motion: snap rather than slide, but still get out of the way */
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .ai{transition:none}
}

/* ---------- visual QC round 3 ---------- */

/* Same specificity clash as the homepage: the flat dark .eyebrow rule was
   beating the contextual hero rule, so the eyebrow changed colour by theme. */
html[data-theme="dark"] .phero .eyebrow{color:#fff}

/* Track card title was near-black on the dark card. */
html[data-theme="dark"] .trk__card h3,
html[data-theme="dark"] .trk__card p{color:#fff}
html[data-theme="dark"] .trk__card p{color:rgba(255,255,255,.7)}

/* Contact form: paired rows stopped at 820px, leaving a ragged right edge. */
.cform__row{width:100%}
.cform label{width:100%}

/* Theme toggle had no visible selected state in light. */
.lang__b[aria-pressed="true"]{background:var(--wps-dark);color:#fff}
html[data-theme="dark"] .lang__b[aria-pressed="true"]{background:rgba(255,255,255,.16);color:#fff}

/* Fixed furniture was sitting on top of form inputs on phones.
   The countdown is handled by the docked bar above; these keep the form and
   the CTA band clear of it. */
@media (max-width:760px){
  .ai{transform:scale(.78);transform-origin:bottom right}
  .cform{padding-bottom:72px}
  .ctaband{padding-bottom:84px}
}

/* ---------- pass grid: featured card + demoted visitor ---------- */

/* The "Most popular" badge used to sit on top of the pass name. Rather than
   padding the card down — which dropped the featured card's title below its
   neighbours' at every width the lift didn't apply — the badge now straddles
   the top edge. Every card keeps the same padding, so all four titles sit on
   one baseline at every width. */
.pass--hero .pass__badge{top:-12px;left:28px;right:auto}

/* 4 cards never wrap to an orphan: 2x2 until all four fit on one row */
@media (max-width:1124px){ .pass__grid{grid-template-columns:1fr 1fr} }
@media (max-width:619px){
  .pass__grid{grid-template-columns:1fr}
  /* stacked, the first card is the one that sells: lead with the Delegate
     pass rather than the cheapest. Desktop keeps Student on the left. */
  .pass--hero{order:-1}
}

/* only break out of the row once all four cards actually share one row,
   otherwise a taller card in a wrapped grid just looks misaligned */
@media (min-width:1125px){
  /* lift the card, then push its content back down by the same amount so all
     four titles still sit on one baseline */
  .pass--hero{margin-block:-26px;padding-top:62px}
}

/* labels wrap to two lines on some cards and one on others; a floor keeps
   every button in the row the same height */
.pass .btn{min-height:68px;padding-inline:18px;font-size:14.5px}

/* Visitor is free and deliberately not a premium option: a plain dashed note
   under the grid, no glass, no shadow, no button. */
.vpass{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  margin-top:22px;padding:18px 24px;border-radius:var(--r-sm);
  border:1px dashed var(--brd-hi);background:none}
.vpass__h{font-size:14.5px;font-weight:750;color:var(--ink);line-height:1.3}
html[data-theme="dark"] .vpass__h{color:#fff}
.vpass__p{font-size:13px;line-height:1.55;color:var(--w55);margin-top:5px;max-width:660px}
.vpass__a{font-size:13.5px;font-weight:700;color:var(--wps-deep);white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px;transition:color .25s var(--ease)}
html[data-theme="dark"] .vpass__a{color:var(--wps-light)}
.vpass__a:hover{color:var(--wps-light)}
.vpass__a .ar{transition:transform .25s var(--ease)}
.vpass__a:hover .ar{transform:translateX(4px)}
@media (max-width:640px){
  .vpass{padding:16px 18px}
  .vpass__a{white-space:normal}
}

/* the lifted featured card hangs 26px below the row — keep the note clear */
@media (min-width:1125px){ .vpass{margin-top:52px} }

/* ---------- early bird saving ---------- */
/* The saving was only implied by two prices in small text. Strike the onsite
   rate beside the early-bird figure and name the saving, so the reason to
   book now is legible at a glance. */
/* struck rate: muted but never below AA. The featured card flips from navy
   to white between themes, so it needs its own value in each. */
.pass__was{margin-left:11px;font-family:var(--f-d);font-size:21px;font-weight:600;
  letter-spacing:-.01em;color:var(--w55);text-decoration:line-through;
  text-decoration-thickness:2px}
.pass--hero .pass__was{color:rgba(255,255,255,.62)}
html[data-theme="dark"] .pass--hero .pass__was{color:var(--ink-soft)}

/* saving chip: tinted, not solid, so it reads as a tag rather than a promo
   sticker and doesn't clone the solid "Most popular" badge above it. The
   featured card flips navy/white between themes, so the text follows the
   surface: ink on pale, bright teal on dark. */
.pass__save{display:inline-block;margin-right:8px;padding:4px 10px;border-radius:999px;
  font-family:var(--f-m);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);background:rgba(0,199,177,.16);border:1px solid rgba(0,150,135,.34)}
.pass--hero .pass__save{color:var(--wps-teal);background:rgba(0,199,177,.1);border-color:rgba(0,199,177,.45)}
html[data-theme="dark"] .pass__save{color:var(--wps-teal);background:rgba(0,199,177,.14);border-color:rgba(0,199,177,.4)}
html[data-theme="dark"] .pass--hero .pass__save{color:var(--ink);background:rgba(0,199,177,.18);border-color:rgba(0,150,135,.4)}

/* the early-bird label had the wrong teal on both faces of the featured
   card: the light-surface teal on the navy card in light mode (3.1:1), and
   the bright teal on the white card in dark mode (2.14:1). Swap them. */
.pass--hero .pass__vat{color:var(--wps-teal)}
html[data-theme="dark"] .pass--hero .pass__vat{color:var(--teal-ink)}
html[data-theme="dark"] .pass--hero li i{color:var(--teal-ink)}

/* the CTA must never outgrow a phone: .btn is nowrap by default */
.reg__cta .btn{max-width:100%;white-space:normal;text-align:center}
.pass__onsite{line-height:1.9}

/* the route to the full registration page is a CTA, not a footnote link */
.reg__cta{display:flex;justify-content:center;margin-top:28px}