/*
Theme Name: Bloqcube
Theme URI: https://bloqcube.com/
Description: Bloqcube marketing site - AI-enabled eClinical platform. Static page templates ported from the audited and fixed HTML build. Shared chrome (tokens, nav, footer, buttons, section rhythm, reveal, reduced-motion) lives here; each page loads its own stylesheet on top.
Version: 1.6.2
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: bloqcube
*/

/* ============================================================
   SHARED CHROME - single source of truth for all pages.
   Edit here, not in the per-page stylesheets.
   ============================================================ */

:root{
  /* ---- Brand palette. The seven values below are the Bloqcube Style Guide
     palette, used verbatim. There is exactly ONE orange in this theme, #FF6D00,
     and every orange surface, label, icon, border and hover state uses it. The
     names --od, --od2 and --o-text are historical - they once held darker mixes
     of the brand orange and now all resolve to #FF6D00 itself. Do not
     reintroduce a second orange. ---- */
  --o:#FF6D00;   /* Style Guide - orange     */
  --n:#001833;   /* Style Guide - navy       */
  --b:#0577FA;   /* Style Guide - blue       */
  --bl:#96C5FA;  /* Style Guide - light blue */
  --y:#FFCB00;   /* Style Guide - yellow     */
  --g:#6C737A;   /* Style Guide - grey       */
  --w:#FFFFFF;   /* Style Guide - white      */

  /* --od (hover), --od2 and --o-text once held darker mixes of the brand orange.
     They are kept as names only, so nothing downstream has to be renamed, and
     all three now resolve to #FF6D00 itself. Orange fills keep their navy label. */
  --od:#FF6D00;--od2:#FF6D00;--o10:rgba(255,109,0,.1);
  --o-text:#FF6D00;
  --y10:rgba(255,203,0,.12);
  --n2:#0A2244;--n3:#061020;
  --bd:#0460CC;--b10:rgba(5,119,250,.1);
  --f:#F8F9FB;--br:#E4E8EF;
  --gl:#9BA4AB;
  --cat-green:#15803D;--cat-purple:#7C3AED;--cat-amber:#FF6D00;
  --ser:'Merriweather',Georgia,serif;
  --san:'Noto Sans',system-ui,sans-serif;
  --ease:cubic-bezier(.25,.46,.45,.94);
  --spring:cubic-bezier(.34,1.56,.64,1);
}
/* The category colours above are tuned for AA on WHITE. On the navy grounds the
   same values invert and fail, so they are re-pointed at their light-on-dark
   siblings here rather than in :root - :root stays identical across all pages. */
.dk,.ah-card{--cat-green:#4ADE80;--cat-purple:#C4B5FD;--cat-amber:#FF6D00}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;scroll-padding-top:104px}
body{font-family:var(--san);color:var(--n);background:var(--w);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.6}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:var(--san);cursor:pointer;border:none;background:none}
svg{flex-shrink:0}
abbr[title]{text-decoration:none;border-bottom:1px dotted currentColor;cursor:help}
:focus-visible{outline:2px solid var(--o);outline-offset:2px;border-radius:4px}
.dark-section :focus-visible,[class*="hero"] :focus-visible{outline-color:var(--o)}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;min-height:44px}
.skip-link:focus{left:16px;top:16px;z-index:9999;background:var(--w);color:var(--n);
  display:inline-flex;align-items:center;min-height:44px;
  padding:12px 20px;border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.2)}
[data-r]{opacity:0;transition:opacity .65s var(--ease),transform .65s var(--ease)}
[data-r="up"]{transform:translateY(28px)}
/* Pre-reveal offset is vertical only: a horizontal translate pushed content
   past the viewport and made body{overflow-x:hidden} load-bearing. */
[data-r="left"]{transform:translateY(24px)}
[data-r="right"]{transform:translateY(24px)}
[data-r="fade"]{transform:none}
[data-r].in{opacity:1;transform:none}
[data-d="1"]{transition-delay:.1s}[data-d="2"]{transition-delay:.2s}
[data-d="3"]{transition-delay:.3s}[data-d="4"]{transition-delay:.4s}
[data-d="5"]{transition-delay:.5s}
/* ============================================================
   TYPE SCALE - Bloqcube Style Guide
   Hero 44 / Heading 32 / Heading 24 / Subheading 18 / Body 16 /
   Body 14 / Tag 14 / Button 16. The guide defines no size below 14px,
   so 14 is the floor for running text and labels.
   Headings use clamp() so the guide's desktop size is the maximum and
   the type steps down cleanly on small screens.
   ============================================================ */
.t-hero{font-family:var(--ser);font-size:clamp(30px,4.4vw,44px);font-weight:900;
  letter-spacing:-.03em;line-height:1.1}
.t-h2{font-family:var(--ser);font-size:clamp(24px,3vw,32px);font-weight:900;
  letter-spacing:-.025em;line-height:1.18}
.t-h3{font-family:var(--ser);font-size:clamp(20px,2.2vw,24px);font-weight:700;
  letter-spacing:-.015em;line-height:1.3}
.t-sub{font-size:18px;line-height:1.6}
.t-body{font-size:16px;line-height:1.82}
.t-body-sm{font-size:14px;line-height:1.7}
/* Guide "TAG 14" - blue, uppercase, letterspaced. */
.tag{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--b)}

.sec{padding:88px 56px}
.sec-inner{max-width:1120px;margin:0 auto}
.sec-label{font-size:14px;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--o-text);margin-bottom:10px}
.sec-bar{width:36px;height:3px;background:var(--o);border-radius:2px;margin-bottom:22px}
.sec-h2{font-family:var(--ser);font-size:clamp(24px,3vw,32px);
  font-weight:900;color:var(--n);letter-spacing:-.025em;line-height:1.18;margin-bottom:16px}
.sec-lead{font-size:16px;color:var(--g);line-height:1.82;max-width:520px}
.dk .sec-label{color:var(--o)}.dk .sec-h2{color:var(--w)}.dk .sec-lead{color:rgba(255,255,255,.5)}
.dk .sec-bar{background:var(--o)}
/* ============================================================
   BUTTONS - Bloqcube Style Guide
   Three variants, four states each, per the guide.

   The guide draws the filled button as orange fill + WHITE label and the
   outline button as orange border + ORANGE label. Both pairings measure
   2.82:1 against white, under the 4.5:1 AA minimum. The brand orange is
   therefore kept EXACTLY as drawn on every fill, and only the label colour
   changes: navy on orange reads 5.66:1. Orange text on a light ground uses
   --o-text (5.28:1), the same hue one step darker.
   ============================================================ */

/* --- Secondary (Filled) - nav / contact / primary CTA --- */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--o);
  color:var(--n);padding:13px 28px;min-height:44px;border-radius:6px;font-weight:700;font-size:16px;
  border:1.5px solid var(--o);
  transition:background .15s,color .15s,border-color .15s,transform .15s,box-shadow .15s}
.btn-primary:hover{background:var(--n);border-color:var(--n);color:var(--w);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,24,51,.28)}
.btn-primary:active{background:var(--n);border-color:var(--n);color:var(--w);transform:translateY(0);box-shadow:none}
.btn-primary:disabled,.btn-primary[aria-disabled="true"]{background:var(--w);border-color:rgba(255,109,0,.32);
  color:rgba(255,109,0,.45);cursor:not-allowed;transform:none;box-shadow:none}

/* --- Primary (Outline) - on white grounds --- */
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;
  color:var(--o-text);padding:12px 28px;min-height:44px;border-radius:6px;font-weight:700;font-size:16px;
  border:1.5px solid var(--o);transition:border-color .15s,background .15s,color .15s}
.btn-ghost:hover{border-color:var(--n);color:var(--n);background:rgba(0,24,51,.03)}
.btn-ghost:active{border-color:var(--n);color:var(--n);background:rgba(0,24,51,.06)}
.btn-ghost:disabled,.btn-ghost[aria-disabled="true"]{border-color:rgba(255,109,0,.3);
  color:rgba(255,109,0,.42);cursor:not-allowed;background:transparent}

/* --- Primary (Outline) - sitting ON an orange ground ---
   The guide shows a white outline here; white on orange is 2.82:1, so navy is
   used instead at 5.66:1. The orange ground itself is untouched. */
.btn-on-orange{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;
  color:var(--n);padding:12px 28px;min-height:44px;border-radius:6px;font-weight:700;font-size:16px;
  border:1.5px solid var(--n);transition:background .15s,color .15s,border-color .15s}
.btn-on-orange:hover{background:var(--n);color:var(--w)}
.btn-on-orange:active{background:var(--n3);border-color:var(--n3);color:var(--w)}
.btn-on-orange:disabled,.btn-on-orange[aria-disabled="true"]{border-color:rgba(0,24,51,.3);
  color:rgba(0,24,51,.4);cursor:not-allowed;background:transparent}
.btn-blue{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--b);
  color:var(--w);padding:12px 24px;min-height:44px;border-radius:6px;font-weight:700;font-size:16px;
  transition:background .15s,transform .1s,box-shadow .15s}
.btn-blue:hover{background:var(--bd);transform:translateY(-1px);box-shadow:0 6px 20px rgba(5,119,250,.3)}
.link-more{position:relative;display:inline-flex;align-items:center;gap:6px;font-size:14px;
  font-weight:700;color:var(--o-text);border-bottom:1px solid rgba(255,109,0,.3);
  padding-bottom:1px;transition:gap .15s,border-color .15s}
.link-more::before{content:'';position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:44px}
.link-more:hover{gap:9px;border-color:var(--o)}

/* ---- "Work in progress" notice, above the nav on every page ----
   Uses the Style Guide yellow (--y #FFCB00) with the navy text colour, which
   measures 11.7:1. This is the one place the brand yellow is used, and a
   status notice is what that colour is for. */
.wip{background:var(--y);color:var(--n);text-align:center;
  padding:10px 24px;font-size:14px;font-weight:600;line-height:1.5;
  border-bottom:1px solid rgba(0,24,51,.16)}
.wip a{font-weight:700;text-decoration:underline;text-underline-offset:2px}
.wip a:hover{text-decoration-thickness:2px}
.wip-sep{opacity:.45;margin:0 4px}
@media(max-width:600px){.wip{font-size:14px;padding:9px 16px}.wip-sep{display:none}
  .wip a{display:inline-block}}

.nav{position:sticky;top:0;z-index:200;height:88px;
  background:rgba(255,255,255,.97);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--br);
  display:flex;align-items:center;justify-content:space-between;padding:0 56px;
  transition:box-shadow .3s}
.nav.sc{box-shadow:0 2px 24px rgba(0,24,51,.08)}

/* ---- Dark nav (Style Guide: "Dark Background - Internal Pages") ----
   The home page keeps the white bar; the four internal pages get the navy one.
   White on navy is 17.8:1 and the orange CTA keeps its navy label, so every
   pairing in this bar clears AA comfortably. */
.nav-dark{background:var(--n);border-bottom-color:rgba(255,255,255,.10)}
.nav-dark.sc{box-shadow:0 2px 24px rgba(0,0,0,.45)}
.nav-dark .nav-logo-mark{filter:brightness(0) invert(1)}
.nav-dark .nav-links a{color:rgba(255,255,255,.80)}
.nav-dark .nav-links a:hover{color:var(--w)}
.nav-dark .nav-links a.current{color:var(--w);font-weight:700}
.nav-dark .nav-hamburger{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.20)}
.nav-dark .nav-hamburger span{background:var(--w)}
.nav-dark :focus-visible{outline-color:var(--o)}
/* ---- Co-brand lockup: Bloqcube, a hairline rule, then Sara ----
   The Sara artwork is white, so it ships in two colourways and the correct one
   is chosen in header.php - white on the navy internal nav, navy on the white
   home nav. It must NOT be run through the .nav-dark invert filter, which is
   why that rule targets .nav-logo-mark rather than every image in here. */
.nav-logo{display:flex;align-items:center;gap:14px;min-width:0}
.nav-logo a{display:inline-flex;align-items:center;min-height:44px}
.nav-logo-mark{height:60px;width:auto;display:block}
.nav-logo-sep{flex:none;width:1px;height:40px;background:var(--br)}
.nav-dark .nav-logo-sep{background:rgba(255,255,255,.22)}
.nav-logo-sara{height:60px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none}
.nav-links a{font-size:14px;font-weight:500;color:var(--g);
  transition:color .15s;position:relative}
.nav-links a::after{content:'';position:absolute;bottom:-2px;left:0;right:0;
  height:2px;background:var(--o);transform:scaleX(0);
  transition:transform .2s var(--ease);transform-origin:left}
/* invisible 44px-tall hit area so the touch target passes without moving the underline */
.nav-links a:not(.nav-cta)::before{content:'';position:absolute;left:0;right:0;
  top:50%;transform:translateY(-50%);height:44px}
.nav-links a:hover{color:var(--n)}
.nav-links a:hover::after,.nav-links a.current::after{transform:scaleX(1)}
.nav-links a.current{color:var(--o-text);font-weight:700}
.nav-cta{display:inline-flex;align-items:center;min-height:44px;
  background:var(--o)!important;color:var(--n)!important;
  padding:11px 22px;border-radius:6px;font-weight:700!important;
  transition:background .15s,color .15s!important}
.nav-cta:hover{background:var(--n)!important;color:var(--w)!important}
.nav-cta::after{display:none!important}
.nav-hamburger{display:none;flex-direction:column;gap:5px;
  width:44px;height:44px;align-items:center;justify-content:center;
  background:var(--f);border:1px solid var(--br);border-radius:8px}
.nav-hamburger span{display:block;width:18px;height:2px;
  background:var(--n);border-radius:2px;transition:all .25s var(--ease)}
.nav-hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
.mobile-menu{display:none;position:fixed;top:88px;left:0;right:0;
  background:var(--w);border-bottom:1px solid var(--br);
  padding:20px 24px;z-index:199;flex-direction:column;gap:4px;
  box-shadow:0 8px 32px rgba(0,24,51,.12)}
.mobile-menu.open{display:flex}
.mobile-menu a{display:flex;align-items:center;min-height:44px;
  font-size:15px;font-weight:500;color:var(--n);
  padding:11px 0;border-bottom:1px solid var(--br);transition:color .15s}
.mobile-menu a:last-child{border-bottom:none}
.mobile-menu a:hover{color:var(--o)}
/* mobile CTA: same navy-on-orange pairing as .btn-primary, no inline colour */
.mobile-menu a.mm-cta{background:var(--o);color:var(--n);padding:12px 20px;
  border-radius:8px;justify-content:center;text-align:center;font-weight:700;margin-top:8px;
  transition:background .15s,color .15s}
.mobile-menu a.mm-cta:hover{background:var(--n);color:var(--w)}


footer{background:var(--n);padding:52px 56px 32px}
.foot-inner{max-width:1120px;margin:0 auto}
.foot-top>div>a{display:inline-flex;align-items:center;min-height:44px}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;
  padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.07);
  margin-bottom:22px;flex-wrap:wrap;gap:36px}
.foot-sub{font-size:14px;color:rgba(255,255,255,.62);line-height:1.7}
.foot-cols{display:flex;gap:48px;flex-wrap:wrap}
.fc-head{font-size:14px;font-weight:700;text-transform:uppercase;
  letter-spacing:.11em;color:rgba(255,255,255,.55);margin-bottom:12px}
.foot-col a{display:block;font-size:14px;color:rgba(255,255,255,.72);
  margin-bottom:8px;transition:color .15s,padding-left .15s}
.foot-col a:hover{color:var(--w);padding-left:4px}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:10px}
.foot-copy{font-size:14px;color:rgba(255,255,255,.55)}
.foot-chips{display:flex;gap:6px;flex-wrap:wrap}
.fchip{font-size:14px;font-weight:600;color:rgba(255,255,255,.62);
  background:rgba(255,255,255,.05);padding:4px 10px;border-radius:100px}


@media(max-width:1200px){
  .nav{height:78px}
  .mobile-menu{top:78px}
  .nav-logo-mark{height:52px}
  .nav-logo-sara{height:52px}
  .nav-logo-sep{height:34px}
  .nav-links{gap:20px}
  html{scroll-padding-top:94px}
}
/* The co-brand lockup is much wider than a single logo, so the full menu has to
   give way a little earlier than the rest of the layout does: at 961px the links
   were clearing the logos by 4px. Only the menu switches here - the 960px block
   below still governs padding, the footer and everything else. */
/* Raised from 1000px when the Resources menu was added: with seven items the
   full menu no longer fits beside the logos below ~1140px, and "Who We Serve"
   and "Book Demo" were breaking onto two lines. */
@media(max-width:1140px){
  .nav-links{display:none}
  .nav-hamburger{display:flex}
}
@media(max-width:960px){
  .nav{padding:0 20px;height:76px}
  .mobile-menu{top:76px}
  .nav-logo{gap:10px}
  .nav-logo-mark{height:48px}
  .nav-logo-sara{height:48px}
  .nav-logo-sep{height:32px}
  .nav-links{display:none}
  .nav-hamburger{display:flex}
  footer{padding:44px 20px 28px}
  .foot-top{flex-direction:column}
  .foot-cols{gap:28px}
  .foot-col a{display:flex;align-items:center;min-height:44px;margin-bottom:0}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .marquee-track,.term-live::before,.msg-typing span,[class*="orb"]{animation-play-state:paused !important;animation:none !important}
  html{scroll-behavior:auto}
  [data-r]{opacity:1 !important;transform:none !important}
}


/* -------------------------------------------------------------------------
 * singular.php - pages and posts that are not one of the five Bloqcube pages.
 *
 * The client's existing Elementor pages land here. Page-builder content sizes
 * its own sections, so it gets no wrapper at all; anything written in the plain
 * editor gets a readable measure instead.
 * ---------------------------------------------------------------------- */
.bq-entry--builder{padding:0}
.bq-entry--plain{padding:72px 56px;max-width:820px;margin:0 auto}
.bq-entry-title{font-family:var(--ser);font-size:clamp(26px,3.4vw,38px);
  line-height:1.25;color:var(--n);margin-bottom:28px}
.bq-entry--plain .bq-entry-content{font-size:17px;line-height:1.8;color:var(--n)}
.bq-entry--plain .bq-entry-content h2{font-family:var(--ser);font-size:24px;
  color:var(--n);margin:36px 0 14px}
.bq-entry--plain .bq-entry-content h3{font-size:19px;font-weight:700;
  color:var(--n);margin:28px 0 10px}
.bq-entry--plain .bq-entry-content p,
.bq-entry--plain .bq-entry-content ul,
.bq-entry--plain .bq-entry-content ol{margin-bottom:18px}
.bq-entry--plain .bq-entry-content ul,
.bq-entry--plain .bq-entry-content ol{padding-left:22px}
.bq-entry--plain .bq-entry-content li{margin-bottom:8px}
.bq-entry--plain .bq-entry-content a{color:var(--o-text);text-decoration:underline}
.bq-entry--plain .bq-entry-content a:hover{color:var(--od2)}
.bq-entry--plain .bq-entry-content img{height:auto;border-radius:8px}
.bq-entry--plain .bq-entry-content table{width:100%;border-collapse:collapse;margin-bottom:18px}
.bq-entry--plain .bq-entry-content th,
.bq-entry--plain .bq-entry-content td{border:1px solid var(--br);padding:10px 12px;text-align:left}
/* Password-protected pages (C2TA, Press Kit) render a form here. */
.bq-entry--plain .bq-entry-content input[type=password],
.bq-entry--plain .bq-entry-content input[type=text],
.bq-entry--plain .bq-entry-content input[type=email]{
  font:inherit;padding:11px 14px;border:1px solid var(--br);border-radius:6px;
  background:var(--w);color:var(--n);min-width:min(280px,100%)}
.bq-entry--plain .bq-entry-content input[type=submit]{
  font:inherit;font-weight:600;cursor:pointer;padding:11px 20px;border:0;
  border-radius:6px;background:var(--o);color:var(--n)}
.bq-entry--plain .bq-entry-content input[type=submit]:hover{background:var(--od);color:var(--w)}
.bq-entry-pages{margin-top:24px;font-size:15px}
@media(max-width:960px){
  .bq-entry--plain{padding:48px 20px}
}


/* Very narrow phones: the two logos plus the hamburger stop fitting side by
   side, so the rule and the Sara lockup step down rather than wrap. */
@media(max-width:400px){
  .nav-logo{gap:8px}
  .nav-logo-mark{height:42px}
  .nav-logo-sep{height:28px}
  .nav-logo-sara{height:42px}
}


/* -------------------------------------------------------------------------
 * Conference popup.
 *
 * Rebuilt from the client's 1080x1080 social slide in the site's own palette:
 * the slide's #E87722 and its four card accents (#00A3E0, #2ECC71, #9B59B6,
 * #E74C3C) are not Bloqcube colours. Navy panel, white text, one orange.
 * Nothing translucent is laid over an orange surface anywhere in here.
 * ---------------------------------------------------------------------- */
.bq-popup[hidden]{display:none}
/* Above the GDPR cookie plugin's fixed bar, which sits at z-index 9999 and was
   covering the popup's CTA on phones. The bar is reachable again the moment the
   popup is dismissed. */
.bq-popup{position:fixed;inset:0;z-index:100000;
  display:flex;align-items:center;justify-content:center;padding:24px}
.bq-popup-backdrop{position:absolute;inset:0;background:rgba(0,24,51,.62);
  backdrop-filter:blur(3px)}
.bq-popup-panel{position:relative;width:100%;max-width:520px;
  max-height:calc(100vh - 48px);overflow-y:auto;
  background:var(--n);border:1px solid rgba(255,255,255,.12);border-radius:16px;
  padding:36px 34px 30px;
  box-shadow:0 24px 70px rgba(0,0,0,.5);
  opacity:0;transform:translateY(14px) scale(.985);
  transition:opacity .28s var(--ease),transform .28s var(--ease)}
.bq-popup.is-open .bq-popup-panel{opacity:1;transform:none}
/* Focus is moved here on open so it is inside the dialog for keyboard and screen
   reader users; the dialog is plainly visible, so it needs no ring of its own. */
.bq-popup-panel:focus{outline:none}

.bq-popup-x{position:absolute;top:12px;right:12px;
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  border-radius:8px;color:var(--w);cursor:pointer;transition:background .15s}
.bq-popup-x:hover{background:rgba(255,255,255,.16)}

.bq-popup-eyebrow{font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;color:var(--o);margin-bottom:10px}
.bq-popup-title{font-family:var(--ser);font-size:24px;font-weight:900;
  line-height:1.25;color:var(--w);margin-bottom:22px;padding-right:34px}

.bq-popup-list{list-style:none;margin:0 0 24px;padding:0;
  border-top:1px solid rgba(255,255,255,.12)}
.bq-popup-item{display:flex;gap:16px;padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.12)}
.bq-popup-when{flex:none;width:84px;font-size:14px;font-weight:700;
  color:var(--o);line-height:1.45}
.bq-popup-what{display:block;min-width:0}
.bq-popup-name{display:block;font-size:15px;font-weight:600;color:var(--w);
  line-height:1.4}
.bq-popup-where{display:block;font-size:13px;color:rgba(255,255,255,.62);
  line-height:1.5;margin-top:2px}
.bq-popup-note{display:inline-block;margin-top:6px;font-size:12px;font-weight:700;
  color:var(--n);background:var(--o);padding:2px 9px;border-radius:100px}

.bq-popup-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.bq-popup-cta{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:12px 24px;border-radius:6px;
  background:var(--o);color:var(--n);font-weight:700;font-size:15px;
  border:1.5px solid var(--o);transition:background .15s,color .15s,border-color .15s}
.bq-popup-cta:hover{background:var(--w);border-color:var(--w);color:var(--n)}
.bq-popup-dismiss{min-height:44px;padding:12px 4px;background:none;border:none;
  color:rgba(255,255,255,.66);font-family:var(--san);font-size:14px;font-weight:600;
  cursor:pointer;transition:color .15s}
.bq-popup-dismiss:hover{color:var(--w)}

@media(max-width:560px){
  .bq-popup{padding:0;align-items:flex-end}
  .bq-popup-panel{max-width:none;border-radius:16px 16px 0 0;border-bottom:0;
    padding:30px 22px 24px;max-height:88vh;
    transform:translateY(24px)}
  .bq-popup-title{font-size:21px}
  .bq-popup-item{flex-direction:column;gap:3px}
  .bq-popup-when{width:auto}
}
@media (prefers-reduced-motion: reduce){
  .bq-popup-panel{transition:none;opacity:1;transform:none}
}


/* -------------------------------------------------------------------------
 * Resources dropdown (top nav). Opens on hover for mouse users and on click or
 * Enter for touch and keyboard; Escape and an outside click close it.
 * ---------------------------------------------------------------------- */
.nav-drop{position:relative}
.nav-drop-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;
  background:none;border:0;padding:0;cursor:pointer;font:inherit;
  font-size:14px;font-weight:500;color:var(--g);transition:color .15s}
.nav-drop-btn:hover,.nav-drop-btn.current{color:var(--n)}
.nav-drop-btn.current{font-weight:700}
.nav-drop-btn svg{transition:transform .2s var(--ease)}
.nav-drop-menu{position:absolute;top:100%;left:-14px;min-width:220px;
  list-style:none;margin:0;padding:8px;background:var(--w);
  border:1px solid var(--br);border-radius:10px;box-shadow:0 14px 34px rgba(0,24,51,.16);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s,transform .16s,visibility .16s;z-index:300}
.nav-drop-menu a{display:block;padding:10px 12px;border-radius:6px;
  font-size:14px;font-weight:500;color:var(--n)}
.nav-drop-menu a::after{display:none}
.nav-drop-menu a:hover,.nav-drop-menu a.current{background:var(--f);color:var(--n)}
.nav-drop.open .nav-drop-menu{opacity:1;visibility:visible;transform:none}
.nav-drop.open .nav-drop-btn svg{transform:rotate(180deg)}
@media (hover:hover){
  .nav-drop:hover .nav-drop-menu{opacity:1;visibility:visible;transform:none}
}
.nav-dark .nav-drop-btn{color:rgba(255,255,255,.80)}
.nav-dark .nav-drop-btn:hover,.nav-dark .nav-drop-btn.current{color:var(--w)}

/* -------------------------------------------------------------------------
 * Ported design pages (Past Events, CDRI). Their layout is inline styles from
 * the supplied design files; these rules only give them the dark ground and link
 * colour the originals assumed, and make them hold up on a phone - the
 * originals were laid out for desktop only.
 * ---------------------------------------------------------------------- */
.bq-ext{background:var(--n);color:var(--w);overflow-x:hidden}
.bq-ext a{color:var(--bl)}
.bq-ext a:hover{color:var(--o)}
.bq-ext img{max-width:100%;height:auto}
.bq-lang{display:flex;justify-content:flex-end;gap:6px;max-width:1120px;
  margin:0 auto;padding:18px 56px 0}
.bq-lang button{min-width:44px;min-height:36px;padding:6px 12px;cursor:pointer;
  font:inherit;font-size:13px;font-weight:700;letter-spacing:.06em;
  border:1px solid rgba(150,197,250,.4);border-radius:6px;background:transparent;color:var(--w)}
.bq-lang button[aria-pressed="true"]{background:var(--w);color:var(--n);border-color:var(--w)}

/* The dark-nav rule (.nav-dark .nav-links a) turns every nav link white, and it
   was reaching the links inside the white dropdown panel too - white on white.
   The dropdown panel is always white, so its links are always navy. */
.nav-links .nav-drop-menu a,
.nav-dark .nav-links .nav-drop-menu a{color:var(--n)}