/* ================= CONTACT ================= */
.cgrid2{display:grid;grid-template-columns:1.25fr .75fr;gap:30px;align-items:start}
.formcard{border-radius:30px;padding:clamp(24px,3.4vw,46px);background:var(--card);border:1px solid var(--line)}
.formcard h2{font-size:clamp(30px,3vw,44px)}
.formcard .sub{color:var(--muted);margin:8px 0 26px}
.fsteps{display:flex;gap:8px;margin-bottom:26px}
.fsteps span{flex:1;height:4px;border-radius:4px;background:var(--line);position:relative;overflow:hidden}
.fsteps span::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--gold-500),var(--gold-300));transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.fsteps span.on::after{transform:scaleX(1)}
.fgroup{border:0;margin-bottom:22px}
.fgroup legend{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin-bottom:12px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field select{padding-top:24px}
.field .chev{position:absolute;inset-inline-end:16px;top:50%;width:16px;transform:translateY(-50%);pointer-events:none;color:var(--muted)}
.opt{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.opt label{cursor:pointer}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt span{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:12px;border:1px solid var(--line);font-size:14px;font-weight:600;transition:.25s}
.opt input:checked+span{border-color:var(--gold-400);background:rgba(240,196,107,.13);color:var(--acc)}
.opt input:focus-visible+span{outline:2px solid var(--gold-400)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted);margin:6px 0 20px}
.consent input{margin-top:3px;accent-color:var(--gold-500)}
.done{display:none;text-align:center;padding:50px 10px}
.done.on{display:block;animation:viewIn .7s var(--ease)}
.done svg{width:100px;height:100px;margin:0 auto 20px}
.done circle{stroke-dasharray:190;stroke-dashoffset:190;animation:draw 1s var(--ease) forwards}
.done path{stroke-dasharray:40;stroke-dashoffset:40;animation:draw .6s .7s var(--ease) forwards}
.done h3{font-size:32px}
.done p{color:var(--muted);margin-top:8px}
.infos{display:grid;gap:14px;position:sticky;top:100px}
.info{display:flex;gap:16px;align-items:flex-start;padding:22px;border-radius:22px;border:1px solid var(--line);background:var(--card);transition:.4s var(--ease)}
.info:hover{border-color:rgba(240,196,107,.45);transform:translateX(6px)}
html[dir=rtl] .info:hover{transform:translateX(-6px)}
.info small{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);font-weight:700;margin-bottom:4px}
.info b{font-size:16px;font-weight:600}
.info span{display:block;font-size:13.5px;color:var(--muted)}
/* The icon tile is a <span>, so the line above - one class plus an element,
   in a stylesheet that loads AFTER site.css - beat `.ic{display:grid}` on
   specificity and turned the tile into a block. It then fell out of the
   card's flex row, lost its centring and its gold tint, and sat over the
   card's left edge with the label clipped behind it (client, 15 Oct 2026:
   "these three icons are not good... style and location").
   Restated here, where the conflict is, rather than with !important. */
.info > .ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:rgba(240,196,107,.13);color:var(--acc);flex:none;font-size:0}
.info > .ic svg{width:24px;height:24px}
.info.photo{padding:0;overflow:hidden;min-height:220px;position:relative;color:#fff;border:0;align-items:flex-end}
/* The Visit card's media is a <video>, not an <img> - this rule only ever
   named img, so the video had no object-fit and no z-index: it rendered
   letterboxed underneath the card's own dark gradient and read as an empty
   box ("this movie is not there", client, 15 Oct 2026). */
.info.photo img,
.info.photo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.info.photo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(5,11,26,.9),transparent 60%)}
.info.photo div{position:relative;z-index:2;padding:22px}
.info.photo span{color:rgba(255,255,255,.7)}
.openbadge{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:999px;margin-top:8px}
.openbadge i{width:8px;height:8px;border-radius:50%;background:currentColor}
.openbadge.yes{background:rgba(52,211,153,.14);color:#10b981}.openbadge.no{background:rgba(248,113,113,.14);color:#ef4444}
@media(max-width:1000px){.cgrid2{grid-template-columns:1fr}.infos{position:static}}
@media(max-width:560px){.two{grid-template-columns:1fr}}

.mapw{position:relative;border-radius:32px;overflow:hidden;height:560px;border:1px solid var(--line)}
.mapw iframe{width:100%;height:100%;border:0;filter:grayscale(.6) contrast(1.05)}
[data-theme=dark] .mapw iframe{filter:invert(.9) hue-rotate(180deg) grayscale(.4) contrast(.95)}
.mapcard{position:absolute;top:24px;inset-inline-start:24px;width:min(360px,calc(100% - 48px));border-radius:24px;padding:26px}
.mapcard h3{font-size:26px}
.mapcard p{color:var(--muted);font-size:14.5px;margin:8px 0 18px}
.mapcard .dir{display:grid;gap:10px;margin-bottom:18px;font-size:14px}
.mapcard .dir div{display:flex;gap:10px;align-items:flex-start}
.mapcard .dir svg{width:18px;height:18px;color:var(--acc);flex:none;margin-top:2px}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px}
@media(max-width:860px){.faq-grid{grid-template-columns:1fr;gap:10px}.mapw{height:640px}.mapcard{top:auto;bottom:16px;inset-inline-start:16px;width:calc(100% - 32px)}}

/* Formal complaint / appeal route ----------------------------------------
   BQA want a named channel for a grievance, not a general enquiry box. The
   reason selector reshapes this form; .gnote is the promise it makes about
   what happens next, so it has to be legible in both themes - its text
   colour is stated beside its own background, never inherited. */
.gnote{margin:14px 0 0;padding:13px 15px;border-radius:12px;font-size:13.5px;line-height:1.6;
  background:rgba(240,196,107,.10);border:1px solid rgba(240,196,107,.32);color:rgb(var(--fg))}
.gnote a{color:var(--gold-300);text-decoration:underline;text-underline-offset:3px}
.gnote b{font-weight:700}
[data-theme=light] .gnote{background:#fdf6e6;border-color:#e4c478;color:#4a3708}
[data-theme=light] .gnote a{color:#8a5d0e}
#gbox[hidden],#gcourse[hidden],.opt[hidden]{display:none}