/*
Theme Name:     Biobank Symposium
Theme URI:      https://biobankireland.com/
Author:         Biobank Ireland Trust
Author URI:     https://biobankireland.com/
Description:    Official theme for the All-Island Biobank Symposium (Belfast 2026). Static-first design — each page uses a dedicated page template. Content editing is expected to be handled by the Stackr plugin.
Version:        2.3.35
Requires at least: 6.0
Tested up to:   6.7
Requires PHP:   7.4
License:        GPL-2.0-or-later
License URI:    https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:    biobank-symposium
Tags:           one-column, custom-menu, editor-style, translation-ready
*/

/* ============================================================
   The All-Island Biobanking Symposium 2026
   Shared design system
   ============================================================ */

:root{
  /* Brand */
  --navy:#142150;
  --navy-deep:#0F1A40;
  --navy-footer:#0E1A40;
  --navy-ink:#122739;

  --cyan:#74C8DA;
  --cyan-strong:#56B4CA;
  --cyan-light:#9ED8E5;
  --cyan-pale:#D5EEF4;
  --cyan-paler:#E3F4F8;

  --green:#2E7D5E;
  --green-deep:#1B5E42;
  --green-pale:#E8F0EC;
  --green-tag:#DCEDE4;

  --cream:#F4F3F0;
  --paper:#FFFFFF;

  --tan-fill:#DDD9D3;
  --tan-line:#B8B5AE;

  --ink:#2A2825;
  --muted:#6B6761;
  --faint:#9A968F;
  --line:#E4E1DB;
  --line-strong:#D1CFC9;

  --red:#E83939;
  --gold-bg:#FFFBEA;
  --gold-ink:#8A6D00;
  --gold-ring:#F1D27A;

  /* Type */
  --font-display:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-body:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-alt:"DM Sans",-apple-system,BlinkMacSystemFont,sans-serif;

  --hero-size:5rem;                              /* ← EDIT THIS: home hero title size (try 4.4rem–6rem) */
  --fs-hero:clamp(2.6rem,1rem + 4vw,var(--hero-size));
  --fs-h1:clamp(2rem,1.4rem + 2.6vw,3rem);
  --fs-h2:clamp(1.6rem,1.2rem + 1.7vw,2.35rem);
  --fs-h3:clamp(1.2rem,1.05rem + 0.7vw,1.5rem);
  --fs-stat:clamp(1.9rem,1.3rem + 2.4vw,2.75rem);
  --fs-lead:clamp(1.05rem,1rem + 0.4vw,1.25rem);

  /* Layout */
  --container:1320px;                      /* ← EDIT: max content width (bigger = narrower outer margins) */
  --gutter:clamp(1rem,4vw,2.75rem);        /* ← EDIT: side padding (min 16px / scales / max 44px) */
  --radius:10px;
  --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(20,39,57,.05),0 1px 3px rgba(20,39,57,.06);
  --shadow-md:0 4px 20px rgba(20,39,57,.08);
  --shadow-lg:0 18px 50px rgba(20,39,57,.16);
  --header-h:72px;
  --pill-top:20px;   /* gap between the top of the screen and the floating nav pill */
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4,p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--cyan-strong);outline-offset:2px}

/* ---------- layout primitives ---------- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);width:100%}
.section{padding-block:clamp(3.25rem,2rem + 5vw,6rem)}
.section--tight{padding-block:clamp(2.5rem,2rem + 3vw,4rem)}
.bg-paper{background:var(--paper)}
.bg-cream{background:var(--cream)}
.bg-green{background:var(--green-pale)}
.bg-cyan{background:var(--cyan-paler)}
.bg-navy{background:var(--navy);color:#fff}

/* ---------- type utilities ---------- */
.eyebrow{
  font-family:var(--font-display);
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin:0 0 .9rem;
}
.bg-navy .eyebrow{color:var(--cyan-light)}
.eyebrow--green{color:var(--green)}
.eyebrow--cyan{color:var(--cyan-strong)}
.display{font-family:var(--font-display);font-weight:700;line-height:1.04;letter-spacing:-.015em;color:var(--navy)}
.bg-navy .display{color:#fff}
h1.display{font-size:var(--fs-h1)}
.hero-title.display{font-size:var(--fs-hero);font-weight:700;line-height:1.02;letter-spacing:-.02em}
h2.display{font-size:var(--fs-h2)}
h3.display{font-size:var(--fs-h3)}
.lead{font-size:var(--fs-lead);color:var(--muted);line-height:1.55;max-width:60ch;text-wrap:pretty}
.bg-navy .lead{color:rgba(255,255,255,.78)}
.prose p{color:var(--muted);margin-bottom:1.1rem;text-wrap:pretty}
.prose p:last-child{margin-bottom:0}
.measure{max-width:62ch}

/* ---------- buttons: liquid glass ---------- */
.btn{
  /* glass knobs you can tweak per-variant */
  --glass-tint:rgba(20,33,80,.20);   /* fill colour + opacity */
  --glass-fg:#fff;                    /* label colour */
  --glass-edge:rgba(255,255,255,.18); /* hairline border */
  --glass-blur:4px;                   /* lower = less frosted */
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--font-display);font-weight:700;font-size:.95rem;letter-spacing:.01em;
  padding:.82em 1.65em;border-radius:999px;border:1px solid var(--glass-edge);
  color:var(--glass-fg);
  background:var(--glass-tint);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%);
  backdrop-filter:blur(var(--glass-blur)) saturate(150%);
  box-shadow:
    0 2px 6px rgba(0,0,0,.10),
    0 8px 24px rgba(0,0,0,.08),
    inset 1px 1px 1px -.5px rgba(255,255,255,.6),
    inset -1px -1px 1px -.5px rgba(255,255,255,.5),
    inset 0 0 6px 6px rgba(255,255,255,.10),
    inset 0 0 2px 2px rgba(255,255,255,.05);
  transition:transform .18s ease,box-shadow .25s ease,background .25s ease,filter .2s ease,color .2s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08) saturate(1.05)}
.btn:active{transform:translateY(0);filter:brightness(.95)}

/* primary call-to-action — light-cyan glass matching the site-wide button hover (#9ED8E5) */
.btn--cta{--glass-tint:rgba(158,216,229,.55);--glass-fg:#fff;--glass-edge:rgba(255,255,255,.45)}
.btn--cta:hover{--glass-tint:rgba(158,216,229,.78)}
/* on dark/photo sections — bright white glass; cyan wash on hover */
.btn--light{--glass-tint:rgba(255,255,255,.22);--glass-fg:#fff;--glass-edge:rgba(255,255,255,.40)}
.btn--light:hover{--glass-tint:rgba(116,200,218,.55);--glass-fg:#fff;--glass-edge:rgba(255,255,255,.55)}
/* on light sections — subtle navy-tinted glass; light-cyan fill on hover for contrast */
.btn--outline{--glass-tint:rgba(20,33,80,.07);--glass-fg:var(--navy);--glass-edge:rgba(20,33,80,.16)}
.btn--outline:hover{--glass-tint:rgba(158,216,229,.9);--glass-fg:var(--navy);--glass-edge:rgba(20,33,80,.22)}
/* faint glass on dark backgrounds; cyan wash on hover */
.btn--ghost-light{--glass-tint:rgba(255,255,255,.10);--glass-fg:#fff;--glass-edge:rgba(255,255,255,.28)}
.btn--ghost-light:hover{--glass-tint:rgba(116,200,218,.45);--glass-fg:#fff;--glass-edge:rgba(255,255,255,.5)}
.btn--sm{font-size:.88rem;padding:.66em 1.3em}
.btn--block{display:flex;width:100%}

/* nav CTA: bigger than the rest of the site's buttons, brighter edge on navy header */
.header-cta .btn--cta{
  font-size:1.02rem;
  padding:.78em 1.7em;
  --glass-edge:rgba(255,255,255,.5);
}
.header--scrolled .btn--cta,
.header--solid .btn--cta{--glass-edge:rgba(255,255,255,.55)}

/* cross-browser fallback: browsers without backdrop-filter get a solid-ish glass */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .btn{--glass-tint:rgba(20,33,80,.85)}
  .btn--cta{--glass-tint:rgba(158,216,229,.95)}
  .btn--light{--glass-tint:rgba(255,255,255,.92)}
  .btn--outline{--glass-tint:rgba(255,255,255,.85)}
  .btn--ghost-light{--glass-tint:rgba(255,255,255,.18)}
}

/* link with arrow */
.arrow-link{font-family:var(--font-display);font-weight:700;font-size:.85rem;color:var(--navy);display:inline-flex;gap:.4em;align-items:center}
.arrow-link .arr{transition:transform .15s ease}
.arrow-link:hover .arr{transform:translateX(3px)}

/* ---------- header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:var(--paper);border-bottom:1px solid var(--line);
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.site-header__inner{
  max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);
  height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.brand{display:flex;align-items:center;gap:.7rem;min-width:0}
.brand__map{width:38px;height:50px;flex:none}
.brand__map img{width:100%;height:100%;object-fit:contain}
.brand__word{font-family:var(--font-display);font-weight:600;line-height:1.05;font-size:.95rem;color:var(--navy);letter-spacing:.005em}
.brand__word small{display:block;font-weight:500;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-top:2px}

.nav{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.1rem)}
.nav a{font-family:var(--font-display);font-weight:600;font-size:.92rem;color:var(--ink);position:relative;padding:.2rem 0;transition:color .15s}
.nav a:hover{color:var(--navy)}
.nav a[aria-current="page"]{color:var(--navy);font-weight:700}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--cyan)}
.header-cta{display:flex;align-items:center;gap:.85rem}

/* solid navy header (all inner pages) */
.site-header.header--solid{background:var(--navy);border-color:transparent}
.header--solid .brand__word{color:#fff}
.header--solid .brand__word small{color:var(--cyan-light)}
.header--solid .nav a{color:rgba(255,255,255,.85)}
.header--solid .nav a:hover,.header--solid .nav a[aria-current="page"]{color:#fff}
.header--solid .nav a[aria-current="page"]::after{background:var(--cyan)}
.header--solid .nav-toggle span{background:#fff}

/* overlay (home hero) variant */
.site-header.header--overlay{background:transparent;border-color:transparent;position:fixed;left:0;right:0}
.header--overlay .brand__word{color:#fff}
.header--overlay .brand__word small{color:var(--cyan-light)}
.header--overlay .nav a{color:rgba(255,255,255,.85)}
.header--overlay .nav a:hover,.header--overlay .nav a[aria-current="page"]{color:#fff}
.site-header.header--scrolled{background:var(--navy);border-color:transparent;box-shadow:0 6px 24px rgba(0,0,0,.18)}
.header--scrolled .brand__word{color:#fff}
.header--scrolled .nav a{color:rgba(255,255,255,.85)}
.header--scrolled .nav a:hover,.header--scrolled .nav a[aria-current="page"]{color:#fff}
body[data-page="home"]{--header-pad:0}

/* ---------- floating "headroom" nav: pill on scroll, hide on scroll-down, reveal on scroll-up ---------- */
.site-header{transition:background .25s ease,box-shadow .25s ease,border-color .25s ease}
.site-header__inner{transition:transform .35s cubic-bezier(.4,0,.2,1),background .25s ease,box-shadow .25s ease,margin .25s ease,padding .25s ease,border-radius .25s ease}

/* once scrolled past the top, the bar becomes a floating white pill */
.site-header.header--float{background:transparent;border-color:transparent;box-shadow:none}
.header--float .site-header__inner{
  height:auto;margin-top:var(--pill-top);padding:.5rem .6rem .5rem 1.4rem;
  background:rgba(255,255,255,.34);
  /* blur reduced 16px→12px: lighter to re-blur while scrolling, same frosted look */
  -webkit-backdrop-filter:blur(12px) saturate(155%);
  backdrop-filter:blur(12px) saturate(155%);
  border:1px solid rgba(255,255,255,.5);
  border-radius:999px;
  box-shadow:
    0 10px 30px rgba(20,33,80,.16),
    0 2px 6px rgba(20,33,80,.08),
    inset 0 1px 1px rgba(255,255,255,.6);
}
/* fallback: no backdrop-filter -> keep it readable with a near-solid pill */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .header--float .site-header__inner{background:rgba(255,255,255,.94)}
}
/* dark text/icons on the white pill, regardless of page variant */
.header--float .brand__word{color:var(--navy)}
.header--float .brand__word small{color:var(--faint)}
.header--float .nav a{color:var(--ink)}
.header--float .nav a:hover,.header--float .nav a[aria-current="page"]{color:var(--navy)}
.header--float .nav-toggle span{background:var(--navy)}
.header--float .btn--cta{--glass-fg:#0a2e38;--glass-edge:rgba(20,33,80,.18)}

/* when the pill floats over a dark/navy section: white text + a darker glass for contrast */
.header--float.header--on-dark .site-header__inner{background:rgba(20,33,80,.24);border-color:rgba(255,255,255,.24)}
.header--float.header--on-dark .brand__word{color:#fff}
.header--float.header--on-dark .brand__word small{color:var(--cyan-light)}
.header--float.header--on-dark .nav a{color:rgba(255,255,255,.85)}
.header--float.header--on-dark .nav a:hover,.header--float.header--on-dark .nav a[aria-current="page"]{color:#fff}
.header--float.header--on-dark .nav-toggle span{background:#fff}
.header--float.header--on-dark .btn--cta{--glass-fg:#fff;--glass-edge:rgba(255,255,255,.45)}

/* once floating, the pill stays fixed and visible while you scroll */
.header--float.header--pinned .site-header__inner{transform:translateY(0)}

/* subpages: header is fixed and floats over the hero, so the first section needs top clearance
   (the navy hero gradient fills up behind the pill; nothing covers the content) */
body:not([data-page="home"]) .page-hero{padding-top:calc(var(--header-h) + var(--pill-top) - 26px)}
body:not([data-page="home"]) main > .breadcrumb:first-child{padding-top:calc(var(--header-h) + var(--pill-top) + 18px)}

/* hamburger */
.nav-toggle{display:none;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:0}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.header--overlay .nav-toggle span,.header--scrolled .nav-toggle span{background:#fff}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile menu */
.mobile-menu{
  position:fixed;inset:var(--header-h) 0 auto 0;z-index:55;
  background:var(--navy);color:#fff;padding:1.25rem var(--gutter) 2rem;
  transform:translateY(-120%);transition:transform .3s ease;
  box-shadow:0 20px 40px rgba(0,0,0,.3);
}
.nav-open .mobile-menu{transform:translateY(0)}
.mobile-menu a{display:block;font-family:var(--font-display);font-weight:600;font-size:1.15rem;padding:.85rem 0;border-bottom:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.9)}
.mobile-menu a[aria-current="page"]{color:var(--cyan-light)}
.mobile-menu .btn{margin-top:1.25rem}

/* ---------- breadcrumb ---------- */
.breadcrumb{background:var(--paper)}
.breadcrumb__inner{max-width:var(--container);margin-inline:auto;padding:.85rem var(--gutter);font-size:.82rem;color:var(--faint);display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.breadcrumb a:hover{color:var(--navy)}
.breadcrumb .sep{opacity:.5}
.breadcrumb .current{color:var(--muted)}

/* ---------- page hero band ---------- */
/* Page-hero gradient is driven by CSS custom properties so the Tweaks panel
   can edit it live. Defaults read from the brand --navy palette. */
.page-hero{
  background:linear-gradient(
    var(--ph-angle,135deg),
    var(--ph-start,var(--navy)) var(--ph-start-stop,0%),
    var(--ph-end,var(--navy-footer)) var(--ph-end-stop,100%)
  );
  color:#fff;position:relative;overflow:hidden;
}
.page-hero::after{content:"";position:absolute;right:-120px;top:-120px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(116,200,218,.18),transparent 68%)}
.page-hero__inner{position:relative;z-index:1;padding-block:clamp(2.75rem,2rem + 4vw,4.5rem)}
.page-hero h1{font-size:clamp(2.2rem,1.4rem + 3.2vw,3.4rem);line-height:1.04;letter-spacing:-.02em;color:#fff}
.page-hero .eyebrow{color:var(--cyan-light)}

/* ---- animated interactive gradient backdrop (shared by all hero headers) ---- */
.hero__gradient{position:absolute;inset:0;z-index:0;overflow:hidden;contain:paint;
  --navy-1:#142150;     /* EDIT: gradient top navy   */
  --navy-2:#0b1133;     /* EDIT: gradient bottom navy */
  --blue:60,120,245;    /* EDIT: complementary blue (R,G,B) */
  --grad-angle:40deg;   /* EDIT: base gradient direction */
  background:linear-gradient(var(--grad-angle),var(--navy-1),var(--navy-2))}
/* STATIC blurred gradient mesh. The blobs used to animate (spin/drift) under a large
   GPU blur, which re-rasterised every frame and dropped scrolling to ~7fps. The motion
   is removed; the blobs are hand-placed to keep the same soft blue glow, now painted
   once so scrolling stays at full frame rate. */
.hero__blobs{position:absolute;inset:-20%;filter:blur(48px);opacity:.64}
.hero__blobs .blob{position:absolute;width:60%;height:60%;top:20%;left:20%;border-radius:50%;
  background:radial-gradient(circle at center,rgba(var(--blue),.56) 0,rgba(var(--blue),0) 70%)}
.blob--1{transform:translate(-8%,-30%)}
.blob--2{transform:translate(34%,-6%)}
.blob--3{transform:translate(-26%,26%)}
.blob--4{top:26%;left:6%;width:52%;height:52%;transform:translate(18%,14%)}
.blob--interactive{top:22%;left:32%;width:56%;height:56%;opacity:.6;
  background:radial-gradient(circle at center,rgba(var(--blue),.5) 0,rgba(var(--blue),0) 65%)}

/* keep subpage hero text above the gradient */
.page-hero>.hero__gradient{z-index:0}
.page-hero__inner{position:relative;z-index:1}

/* per-page hero variation — each subpage gets its own cool-palette accent + angle */
/* sequence alternates blue / cyan-teal so consecutive pages always look different */
.page-hero[data-screen-label="About hero"]    .hero__gradient{--blue:42,110,238;--grad-angle:40deg}    /* royal blue   */
.page-hero[data-screen-label="Programme hero"] .hero__gradient{--blue:34,186,214;--grad-angle:70deg}   /* cyan         */
.page-hero[data-screen-label="Venue hero"]     .hero__gradient{--blue:72,150,255;--grad-angle:120deg}  /* sky/azure    */
.page-hero[data-screen-label="Sponsors hero"]  .hero__gradient{--blue:24,158,166;--grad-angle:30deg}   /* teal         */
.page-hero[data-screen-label="Gallery hero"]   .hero__gradient{--blue:58,124,250;--grad-angle:150deg}  /* bright blue  */
.page-hero[data-screen-label="Previous hero"]  .hero__gradient{--blue:38,178,206;--grad-angle:100deg}  /* aqua cyan    */
.page-hero .lead{margin-top:1rem;color:rgba(255,255,255,.78)}

/* ---------- stat strip ---------- */
.stat-strip{display:grid;grid-template-columns:repeat(var(--cols,5),1fr)}
.stat{padding:1.5rem clamp(1rem,2.5vw,2rem)}
.stat:first-child{border-left:0}
.stat__num{font-family:var(--font-display);font-weight:600;font-size:var(--fs-stat);color:var(--navy);line-height:1}
.stat__label{font-size:.82rem;color:var(--muted);margin-top:.45rem}
.stat-strip--on-navy .stat{border-color:rgba(255,255,255,.16)}
.stat-strip--on-navy .stat__num{color:#fff}
.stat-strip--on-navy .stat__label{color:rgba(255,255,255,.65)}

/* ---------- generic grid ---------- */
.grid{display:grid;gap:clamp(1rem,2vw,1.6rem)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:center}
.split--text-first{align-items:start}

/* ---------- cards ---------- */
.card{background:var(--paper);border-radius:var(--radius);overflow:hidden}
.card--pad{padding:clamp(1.1rem,2vw,1.6rem)}
.card--hover{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card--hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}

/* ---------- image placeholder / slot ---------- */
.ph{
  position:relative;background:var(--tan-fill);border-radius:var(--radius);
  border:2px dashed var(--tan-line);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.5rem;color:var(--tan-line);text-align:center;padding:1rem;
}
.ph__label{font-family:var(--font-alt);font-weight:600;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase}
image-slot{display:block;color:#8d8a83}
.slot-wrap image-slot{width:100%;height:100%}
image-slot::part(frame){background:var(--tan-fill)}
image-slot::part(ring){border-color:var(--tan-line);border-width:2px}
.slot-wrap{position:relative;border-radius:var(--radius);overflow:hidden}

/* ---------- badges / tags ---------- */
.tag{display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:700;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;padding:.32em .7em;border-radius:5px;background:#EEF1F4;color:var(--navy)}
.tag--cyan{background:var(--cyan-pale);color:var(--navy)}
.tag--green{background:var(--green-tag);color:var(--green-deep)}
.tag--neutral{background:#EDEBE7;color:var(--muted)}
.tag--gold{background:var(--gold-bg);color:var(--gold-ink);box-shadow:inset 0 0 0 1px var(--gold-ring)}

/* ---------- speaker card ---------- */
.speaker-card{background:var(--paper);border:0;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;height:100%}
/* Body grows to fill so every card in a row shares the same height. */
.speaker-card__body{flex:1}
/* Square photo window — headshots are portrait, so a square crops far less
   than the old 4:3 landscape; crop biased toward the top so faces stay in
   view instead of being cut at the crown. */
.speaker-card .slot-wrap{aspect-ratio:1/1;border-radius:0}
.speaker-card .slot-wrap img{object-position:center 10%}
.chair-av img{object-position:center 25%}
.speaker-card__body{padding:1rem 1.1rem 1.2rem}
.speaker-card__name{font-family:var(--font-display);font-weight:700;color:var(--navy);font-size:1.02rem}
.speaker-card__role{font-size:.84rem;color:var(--muted);margin-top:.25rem;line-height:1.4}
.speaker-card__inst{font-family:var(--font-display);font-weight:700;font-size:.78rem;color:var(--navy);margin-top:.55rem}
.speaker-card--tba{border:0;background:transparent;align-items:center;justify-content:center;text-align:center;min-height:230px;color:var(--tan-line)}
.speaker-card--tba .plus{font-size:2rem;line-height:1;font-family:var(--font-alt)}
.speaker-card--tba .tba{font-family:var(--font-display);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.72rem;margin-top:.4rem}

/* section head */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.sec-head__titles{max-width:46ch}
.sec-head h2{margin-top:.1rem}

/* note */
.note{background:var(--gold-bg);border-left:3px solid var(--gold-ring);border-radius:0 4px 4px 0;padding:.7rem 1rem;font-family:var(--font-alt);font-style:italic;font-size:.84rem;color:var(--gold-ink)}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-footer);color:rgba(255,255,255,.72)}
.site-footer__main{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:clamp(1.5rem,3vw,2.5rem);padding-block:clamp(2.5rem,2rem + 2vw,3.5rem)}
.footer-logo{width:240px;max-width:100%;height:auto;margin-bottom:1.2rem}
.footer-brand p{font-size:.86rem;margin-top:.6rem;line-height:1.5;max-width:34ch}
.footer-brand strong{color:#fff;font-weight:600}
.footer-brand__meta{font-family:var(--font-display);font-weight:700;color:rgba(255,255,255,.55);font-size:.78rem;letter-spacing:.04em;margin-top:.9rem}
.footer-col h4{font-family:var(--font-display);font-weight:700;color:#fff;font-size:.82rem;letter-spacing:.04em;margin-bottom:1rem}
.footer-col a{display:block;font-size:.88rem;padding:.3rem 0;color:rgba(255,255,255,.66);transition:color .15s}
.footer-col a:hover{color:#fff}
.footer-col--contact{display:flex;flex-direction:column;align-items:flex-start}
.footer-org-logo{display:inline-block;margin-top:1.4rem;padding:0;opacity:.95;transition:opacity .15s ease,transform .15s ease}
.footer-org-logo:hover{opacity:1;transform:translateY(-2px)}
.footer-org-logo img{width:196px;max-width:100%;height:auto;display:block}
.site-footer__bar{background:var(--red);color:#fff}
.site-footer__bar .container{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding-block:.85rem;font-size:.78rem}
.site-footer__bar a{font-weight:600}
.site-footer__bar a:hover{text-decoration:underline}

/* ---------- accordion ---------- */
.accordion{border-top:1px solid var(--line-strong)}
.acc-item{border-bottom:1px solid var(--line-strong)}
.acc-trigger{width:100%;background:none;border:0;display:flex;justify-content:space-between;align-items:center;gap:1rem;text-align:left;padding:1.05rem 0;font-family:var(--font-display);font-weight:700;color:var(--navy);font-size:1rem}
.acc-trigger .chev{flex:none;width:18px;height:18px;transition:transform .25s ease;color:var(--faint)}
.acc-item.open .chev{transform:rotate(180deg)}
.acc-trigger .acc-label{display:inline-flex;align-items:center;gap:.7rem}
.acc-trigger .acc-ico{flex:none;width:21px;height:21px;color:var(--cyan-strong)}
.acc-panel{overflow:hidden;height:0;transition:height .3s ease}
.acc-panel__inner{padding:0 0 1.15rem;color:var(--muted);font-size:.92rem;max-width:60ch}

/* ---------- programme timeline ---------- */
.timeline{border-radius:12px;overflow:hidden;background:#fff}
.tl-row{display:grid;grid-template-columns:90px 1fr auto;gap:1rem;align-items:center;padding:1.05rem clamp(1rem,2vw,1.5rem);border-top:1px solid var(--line);transition:background .15s}
.tl-row:first-child{border-top:0}
.tl-row:hover{background:var(--cream)}
.tl-time{font-family:var(--font-display);font-weight:700;color:var(--faint);font-size:.9rem}
.tl-title{font-family:var(--font-display);font-weight:700;color:var(--navy);font-size:1rem}
.tl-sub{font-size:.83rem;color:var(--muted);margin-top:.15rem}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:.25rem;border-bottom:1px solid var(--line-strong)}
.tab{background:none;border:0;padding:.9rem 1.1rem;font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tab[aria-selected="true"]{color:var(--navy);border-color:var(--navy)}
.tab:hover{color:var(--navy)}
.tabpanel[hidden]{display:none}

/* ---------- forms ---------- */
.field{margin-bottom:1.1rem}
.field label{display:block;font-family:var(--font-display);font-weight:600;font-size:.82rem;color:var(--ink);margin-bottom:.4rem}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:.92rem;color:var(--ink);
  padding:.7rem .85rem;border:1px solid var(--line-strong);border-radius:8px;background:#fff;
  transition:border-color .15s,box-shadow .15s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cyan-strong);box-shadow:0 0 0 3px rgba(116,200,218,.25)}
.field textarea{resize:vertical;min-height:110px}
.field-error{color:var(--red);font-size:.78rem;margin-top:.35rem;display:none}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--red)}
.field.invalid .field-error{display:block}
.form-card{background:#fff;border-radius:14px;padding:clamp(1.4rem,3vw,2rem);box-shadow:var(--shadow-lg)}
.form-success{background:var(--green-pale);color:var(--green-deep);border-radius:10px;padding:1rem 1.1rem;font-weight:600;display:none}

/* ---------- misc utilities ---------- */
.feature-icon{width:42px;height:42px;border-radius:9px;background:var(--green-pale);color:var(--green);display:flex;align-items:center;justify-content:center;flex:none}
.feature-icon svg{width:22px;height:22px}
.divider{height:1px;background:var(--line-strong);border:0;margin:0}
.list-check{display:grid;gap:1rem}
.list-check li{display:flex;gap:.85rem}
.list-check .mk{width:22px;height:22px;border-radius:6px;background:var(--navy);flex:none;margin-top:2px;display:flex;align-items:center;justify-content:center;color:#fff}
.list-check .mk svg{width:13px;height:13px}
.list-check b{font-family:var(--font-display);color:var(--ink);display:block;font-size:.95rem}
.list-check span.txt{font-size:.86rem;color:var(--muted)}
.reveal{transition:opacity .6s ease,transform .6s ease}
.js-reveal .reveal{opacity:0;transform:translateY(18px)}
.js-reveal .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js-reveal .reveal{opacity:1;transform:none;transition:none}}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .footer-brand{grid-column:1/-1}
  .site-footer__main{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:860px){
  .nav,.header-cta .btn{display:none}
  .nav-toggle{display:flex}
  .stat-strip{grid-template-columns:repeat(2,1fr)}
  .stat{border-left:0;border-top:0}
  .stat:nth-child(-n+2){border-top:0}
  .stat:nth-child(odd){border-right:0}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:2rem}
  .split--reverse .split__media{order:-1}
}
@media (max-width:620px){
  :root{--header-h:64px}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .stat-strip{grid-template-columns:1fr 1fr}
  .site-footer__main{grid-template-columns:1fr 1fr}
  .tl-row{grid-template-columns:64px 1fr;row-gap:.4rem}
  .tl-row .tl-tag{grid-column:2}
  .sec-head{flex-direction:column;align-items:flex-start}
}
@media (max-width:420px){
  .footer-brand,.site-footer__main{grid-template-columns:1fr}
  .brand__word{font-size:.85rem}
}

/* ─────────── MOBILE SAFETY NET + REFINEMENTS ───────────
   Prevents horizontal scroll from any stray oversize element and makes
   common patterns behave sensibly on narrow viewports. */
html{-webkit-text-size-adjust:100%}
body{overflow-x:clip;max-width:100vw}
img,video,iframe,embed,object{max-width:100%;height:auto}
img[width][height]{height:auto}
/* Long strings (URLs, sponsor names) can't force horizontal scroll on cards. */
.speaker-card__name,.speaker-card__role,.speaker-card__inst,.tl-title,.tl-sub,.hotel-card__head{overflow-wrap:anywhere}

/* Email address shown under a mailto CTA button — mailto: links do nothing
   visible for visitors with no default mail app (webmail users), so the
   address is always readable/copyable as text. */
.cta-email{margin-top:1.1rem;font-size:.95rem}
.cta-email a{color:inherit;text-decoration:underline;text-underline-offset:4px;opacity:.85}
.cta-email a:hover{opacity:1}
.bg-navy .cta-email a{color:var(--cyan-light)}

/* ---------- speaker bio modal ---------- */
.spkm-overlay{position:fixed;inset:0;z-index:2000;background:rgba(10,16,38,.6);display:flex;align-items:center;justify-content:center;padding:1.2rem}
.spkm-overlay[hidden]{display:none} /* display:flex must not defeat [hidden] */
.spkm-dialog{position:relative;background:#fff;border-radius:16px;max-width:780px;width:100%;max-height:88vh;overflow:auto;box-shadow:var(--shadow-lg)}
.spkm-close{position:absolute;top:.7rem;right:.9rem;background:none;border:0;font-size:1.9rem;line-height:1;color:var(--muted);z-index:1}
.spkm-close:hover{color:var(--ink)}
.spkm{display:grid;grid-template-columns:250px 1fr;gap:1.6rem;padding:clamp(1.4rem,3vw,2.2rem)}
.spkm__photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 10%;border-radius:12px}
.spkm__name{font-family:var(--font-display);font-weight:700;color:var(--navy);font-size:1.45rem;line-height:1.1}
.spkm__role{font-size:.95rem;color:var(--muted);margin-top:.35rem}
.spkm__inst{font-family:var(--font-display);font-weight:700;font-size:.85rem;color:var(--navy);margin-top:.5rem}
.spkm__bio{margin-top:1.1rem}
.spkm__bio p{font-size:.94rem;color:var(--muted);line-height:1.65;margin:0 0 .9rem}
.spkm__bio p:last-child{margin-bottom:0}
@media (max-width:620px){.spkm{grid-template-columns:1fr}.spkm__photo{max-width:220px}}

@media (max-width:760px){
  /* Section headers with a right-aligned CTA — stack + left-align on mobile */
  .sec-head{gap:1rem}
  .sec-head .btn{align-self:flex-start}
  /* Programme timeline: tag chip drops to its own row cleanly */
  .tl-row{padding-inline:0}
  /* Hero pill respects the reduced --header-h more strictly */
  .header--float .site-header__inner{padding:.4rem .5rem .4rem 1rem}
  /* Register CTA in the navy band — buttons stack full width */
  .register .hero__actions{flex-direction:column;align-items:stretch}
  .register .hero__actions .btn{width:100%;text-align:center}
  /* Long inline-SVG dot-map on the home page's "Getting There" panel */
  .home-map{max-width:100%}
}
@media (max-width:520px){
  /* Sponsor tier "Silver/Bronze" wrap tighter */
  .logo-row--4{grid-template-columns:1fr 1fr!important}
  .tier-split{gap:1.4rem}
}

/* ---------- <vimeo-embed> video (click-to-load) ---------- */
vimeo-embed{display:block;position:relative;aspect-ratio:16/9;border-radius:var(--radius,14px);overflow:hidden;background:var(--navy,#142150)}
.vimeo-embed__poster{position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;background-size:cover;background-position:center;background-color:var(--navy,#142150);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}
.vimeo-embed__poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,33,80,.2),rgba(20,33,80,.55))}
.vimeo-embed__play{position:relative;z-index:1;width:66px;height:66px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--navy,#142150);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(20,33,80,.35);transition:transform .18s ease,background .18s ease}
.vimeo-embed__play svg{width:30px;height:30px;margin-left:3px}
.vimeo-embed__poster:hover .vimeo-embed__play,.vimeo-embed__poster:focus-visible .vimeo-embed__play{transform:scale(1.07);background:#fff}
.vimeo-embed__label{position:relative;z-index:1;color:#fff;font-family:var(--font-display);font-weight:600;font-size:1.02rem;text-shadow:0 1px 8px rgba(0,0,0,.3)}
.vimeo-embed__iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vimeo-embed__empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;color:rgba(255,255,255,.72);font-size:.85rem;padding:1rem}
.vimeo-embed__empty code{background:rgba(255,255,255,.14);padding:.1rem .4rem;border-radius:4px}

/* Vimeo showcase (collection) embed */
.showcase-embed{width:100%;border-radius:var(--radius,14px);overflow:hidden;background:var(--navy,#142150);box-shadow:0 10px 30px rgba(20,33,80,.12)}
.showcase-embed iframe{display:block;width:100%;height:clamp(460px,72vh,760px);border:0}