/* =============================================================================
   I4PL Conference 2026 - Stylesheet
   -----------------------------------------------------------------------------
   Mobile-first. Every rule is written for the 360px viewport, then widened at
   min-width breakpoints. Nothing is designed at desktop and shrunk down.

   TYPOGRAPHY FLOOR (enforced, verified against computed values):
     body copy, buttons, inputs, nav ....... 16px minimum (17px actual)
     utility text, captions, labels ........ 16px
     headings on mobile .................... 22px minimum

   BRAND (from the official 2026 conference artwork):
     cyan   #03bab2   Generations and Momentum
     blue   #0077c1   Designing the Capability Engine
     navy   #273a94   Mastering the Learning Craft
     maroon #8a234f   Human + AI
   ============================================================================= */

/* --- 1. Tokens ----------------------------------------------------------- */
:root {
  --cyan: #03bab2;
  --cyan-bright: #21e3d9;
  --cyan-deep: #016b66;      /* text on light grounds, 5.6:1 on --paper */
  --blue: #0077c1;
  --navy: #273a94;
  --maroon: #8a234f;

  --ink: #0b1b33;
  --ink-2: #102844;
  --ink-3: #16375c;
  --paper: #f3f7fa;
  --paper-2: #e9f0f6;
  --white: #ffffff;

  --body: #24384f;           /* 9.1:1 on --paper */
  --muted: #4a5f78;          /* 5.6:1 on --paper */
  --muted-dark: rgba(255, 255, 255, .84);

  --line: rgba(11, 27, 51, .13);
  --line-dark: rgba(255, 255, 255, .17);
  --focus: #ffc32f;

  --max: 1280px;
  --gutter: 1.25rem;
  --r: 1.25rem;
  --r-sm: .75rem;

  --sh-1: 0 2px 10px rgba(6, 18, 36, .06);
  --sh-2: 0 16px 44px rgba(6, 18, 36, .13);
  --sh-3: 0 32px 80px rgba(6, 18, 36, .26);

  --font: Montserrat, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  --t-micro: 1rem;                                   /* 16px absolute floor */
  --t-small: 1rem;                                   /* 16px */
  --t-body: 1.0625rem;                               /* 17px */
  --t-lead: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  --t-h3: clamp(1.375rem, 1.2rem + 0.85vw, 1.75rem);
  --t-h2: clamp(1.875rem, 1.35rem + 2.3vw, 3.25rem);
  --t-display: clamp(2.5rem, 1.45rem + 5.6vw, 6rem);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --- 2. Reset and base --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--body);
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: 500;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: subpixel-antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { color: var(--ink); font-weight: 900; line-height: 1.12; margin: 0; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, picture, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .18em; }
button { font: inherit; color: inherit; cursor: pointer; }
code { font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; z-index: 300; left: 1rem; top: -6rem;
  padding: .9rem 1.25rem; border-radius: var(--r-sm);
  background: var(--focus); color: var(--ink);
  font-size: var(--t-small); font-weight: 800; text-decoration: none;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 1rem; }

.wrap { width: min(var(--max), 100% - (var(--gutter) * 2)); margin-inline: auto; }

/* --- 3. Motion: scroll reveal -------------------------------------------- */
/* Progressive and opt-in: .reveal is only hidden once nav.js sets
   data-motion="on" on <html>. With JavaScript off, nothing is ever invisible. */
[data-motion="on"] .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease) var(--d, 0ms),
              transform .7s var(--ease) var(--d, 0ms);
  will-change: opacity, transform;
}
[data-motion="on"] .reveal.is-in { opacity: 1; transform: none; }

/* --- 4. Shared type ------------------------------------------------------ */
.eyebrow {
  margin: 0 0 .85rem;
  font-size: var(--t-small);
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--cyan-deep);
}
.eyebrow-maroon { color: var(--maroon); }
/* On dark grounds the deep cyan is too close to the background. */
.hero .eyebrow, .page-hero .eyebrow, .venue-card .eyebrow, .streams .eyebrow,
.cta-band .eyebrow, .contact-band .eyebrow, .register-action-card .eyebrow,
.speakers-band .eyebrow, .codes-band .eyebrow { color: var(--cyan); }

.section-title { font-size: var(--t-h2); letter-spacing: -.035em; max-width: 17ch; text-wrap: balance; }
.section-lead  { font-size: var(--t-lead); color: var(--muted); max-width: 46ch; }
.streams .section-lead, .speakers-band .section-lead,
.codes-band .section-lead, .codes-band .codes-note { color: var(--muted-dark); }

em { font-style: normal; color: var(--cyan); }
.page-title em, .hero-title em { display: block; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 2.75rem;
  font-size: var(--t-small); font-weight: 800;
  color: var(--cyan-deep); text-decoration: none;
}
.link-arrow:hover { text-decoration: underline; }
.link-arrow .btn-arrow { transition: transform .2s var(--ease); }
.link-arrow:hover .btn-arrow { transform: translateX(4px); }

/* --- 5. Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 3.25rem;
  padding: .85rem 1.6rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: var(--t-small);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform .2s var(--ease), background-color .2s var(--ease),
              color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-arrow { font-size: 1.05em; line-height: 1; transition: transform .2s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(3px); }
.btn-primary { background: var(--cyan); border-color: var(--cyan); color: #04231f; }
.btn-primary:hover { background: var(--cyan-bright); border-color: var(--cyan-bright); box-shadow: 0 8px 26px rgba(3,186,178,.4); }
.btn-light { border-color: rgba(255,255,255,.6); color: var(--white); }
.btn-light:hover { background: var(--white); color: var(--ink); }
.btn-dark { border-color: var(--ink); color: var(--ink); }
.btn-dark:hover { background: var(--ink); color: var(--white); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.button-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --- 6. Header ----------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 200;
  color: var(--white);
  background: rgba(11, 27, 51, .93);
  backdrop-filter: saturate(170%) blur(16px);
  -webkit-backdrop-filter: saturate(170%) blur(16px);
  border-bottom: 1px solid var(--line-dark);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; }

.brand { display: inline-flex; align-items: center; flex-shrink: 0; min-height: 2.75rem; }
/* On a dark bar the lockup's dark blue disappears, so it is knocked out white. */
.brand-lockup, .brand-mark { filter: brightness(0) invert(1); }
.brand-lockup { display: none; width: auto; height: 2.5rem; }
.brand-mark { width: auto; height: 2.35rem; }

.nav-toggle {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 2.75rem; padding: .5rem .95rem;
  background: transparent; border: 1px solid var(--line-dark);
  border-radius: 999px; color: var(--white);
  font-size: var(--t-small); font-weight: 800;
}
.nav-toggle-bars { display: grid; gap: 4px; width: 18px; }
.nav-toggle-bars i { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .22s var(--ease), opacity .22s var(--ease); }
.site-header.is-open .nav-toggle-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header.is-open .nav-toggle-bars i:nth-child(2) { opacity: 0; }
.site-header.is-open .nav-toggle-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* A menu, not a landing screen: a compact panel anchored under the toggle at
   the right, capped in width, never the full browser width. On a narrow phone
   the cap gives way to the viewport minus the gutters. */
.primary-nav {
  position: absolute; right: var(--gutter); top: calc(100% + .5rem);
  display: none;
  width: min(20rem, calc(100vw - (var(--gutter) * 2)));
  padding: .75rem;
  background: var(--ink);
  border: 1px solid var(--line-dark);
  border-radius: var(--r);
  box-shadow: var(--sh-3);
}
.site-header.is-open .primary-nav { display: block; }

.nav-list { display: grid; gap: .1rem; }
.nav-link {
  display: block; padding: .85rem .6rem;
  /* Left aligned, the way a navigation list reads. min-width keeps a short
     label such as "FAQ" at a 44px tap target. */
  min-width: 44px; text-align: left;
  border-radius: var(--r-sm);
  color: var(--white); font-size: var(--t-body); font-weight: 700; text-decoration: none;
}
.nav-link:hover { background: rgba(255,255,255,.1); }
.nav-link.is-current { color: var(--cyan); }

/* Language, the main site link and Register live on the bar itself at every
   width. They are actions, not pages, and burying them in the menu hid the two
   controls people reach for most. Below 34rem the main site link steps aside so
   Register and the language switch keep their space. */
.nav-tail { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.nav-out {
  display: inline-flex; align-items: center; gap: .3rem;
  min-height: 2.75rem; padding: 0 .75rem;
  border: 1px solid var(--line-dark); border-radius: 999px;
  color: var(--muted-dark); font-size: var(--t-small); font-weight: 700; text-decoration: none;
}
/* Below a tablet the bar carries the brand, the language switch, Register and
   the menu. The main site link steps aside; the logo and the footer still
   reach it. */
@media (max-width: 48rem) {
  .nav-out { display: none; }
  /* Phone bar: brand, language, Register, menu. The menu word becomes the
     button's accessible name only, so the icon keeps its 44px target and
     Register keeps its width. */
  .nav-toggle-text {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .nav-toggle { padding: .5rem .7rem; min-width: 44px; justify-content: center; }
  .nav { gap: .5rem; }
  .nav-tail { gap: .4rem; }
  .btn-nav { padding: .7rem 1rem; }
  .brand-mark { height: 2rem; }
}
.nav-out:hover { color: var(--white); border-color: rgba(255,255,255,.42); }

.lang-switch { display: inline-flex; align-items: center; border: 1px solid var(--line-dark); border-radius: 999px; overflow: hidden; }
.lang-current, .lang-alt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 3rem; min-height: 2.75rem; padding: 0 .5rem;
  font-size: var(--t-small); font-weight: 800; letter-spacing: .04em; text-decoration: none;
}
.lang-current { background: var(--cyan); color: #04231f; }
.lang-alt { color: var(--white); }
.lang-alt:hover { background: rgba(255,255,255,.15); }
.btn-nav { min-height: 2.9rem; padding: .6rem 1.35rem; }

/* --- 7. Breadcrumbs ------------------------------------------------------ */
.breadcrumbs { background: var(--ink-2); padding: .25rem 0; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.breadcrumbs li {
  display: inline-flex; align-items: center; min-height: 2.25rem;
  font-size: var(--t-small); font-weight: 700; color: var(--muted-dark);
}
.breadcrumbs li + li::before { content: "/"; margin-right: .5rem; opacity: .55; }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--white); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

/* --- 8. Hero ------------------------------------------------------------- */
.hero {
  position: relative; display: flex; align-items: flex-end;
  min-height: min(90svh, 48rem);
  padding: 7rem 0 3rem;
  background: var(--ink);
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; }
.hero-media picture, .hero-media img, .hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero-video { z-index: 1; }
.hero-scrim {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg, rgba(11,27,51,.52) 0%, rgba(11,27,51,.26) 20%,
                            rgba(11,27,51,.70) 52%, rgba(11,27,51,.93) 80%,
                            rgba(11,27,51,.97) 100%);
}
.hero-content { position: relative; z-index: 3; color: var(--white); }
.hero-title {
  font-size: var(--t-display);
  letter-spacing: -.045em;
  /* 900-weight display with descenders needs more than the .94 it had: the
     "g" in Igniting was touching the cap-line of the line beneath. */
  line-height: 1.02;
  color: var(--white);
  text-wrap: balance;
}
/* The emphasised second line is a block, so it also gets optical separation
   independent of line-height. */
.hero-title em, .page-title em { margin-top: .07em; }
/* The hero eyebrow wraps to three lines on a phone and was sitting tight
   against the headline. Page heroes get the same treatment. */
.hero .eyebrow, .page-hero .eyebrow { margin-bottom: 1.3rem; line-height: 1.5; }
.hero-sub { max-width: 44ch; margin: 1.75rem 0 0; font-size: var(--t-lead); color: var(--muted-dark); }
.hero .button-row { margin-top: 2rem; }

/* --- 9. Status notes ----------------------------------------------------- */
.status-note {
  margin: 1.25rem 0 0; padding: .9rem 1.1rem; max-width: 58ch;
  border-left: 4px solid var(--maroon);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: rgba(138, 35, 79, .08);
  font-size: var(--t-small); color: var(--body);
}
.status-note-dark { background: rgba(255,255,255,.13); border-left-color: var(--cyan); color: var(--white); }

/* --- 10. Intro and facts ------------------------------------------------- */
.intro { padding: 3.5rem 0; background: var(--white); }
.intro-grid { display: grid; gap: 2.5rem; }
.intro-copy { font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3rem); line-height: 1.14; letter-spacing: -.035em; margin-bottom: 1.25rem; text-wrap: balance; }
.intro-body { max-width: 46ch; font-size: var(--t-lead); color: var(--muted); }
.intro .link-arrow { margin-top: .5rem; }

.fact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.fact { padding: 1.25rem 1rem; background: var(--paper-2); border-radius: var(--r); }
.fact b { display: block; font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); font-weight: 900; line-height: 1; letter-spacing: -.03em; color: var(--navy); }
/* Optical correction for the en dash in a number range. Montserrat's dash is a
   thin mid-height bar; between two 900-weight figures it reads anaemic and gets
   visually crushed. The character stays a true en dash (correct for ranges, and
   correct when copied or read aloud) and is only scaled and spaced. */
.fact b .rng { font-size: 1.16em; padding: 0 .04em; vertical-align: .02em; }
/* Label only. Scoped to the direct child so the range dash inside <b> stays
   inline and the date reads as one line. */
.fact > span { display: block; margin-top: .5rem; font-size: var(--t-small); font-weight: 700; color: var(--muted); }
.fact b { white-space: nowrap; }

/* --- 10b. Countdown ------------------------------------------------------ */
.fact-col { display: grid; gap: 1.25rem; align-content: start; }
.countdown {
  padding: 1.1rem 1.25rem 1.25rem;
  background: linear-gradient(135deg, var(--navy) 0%, #12306b 55%, var(--cyan-deep) 190%);
  border-radius: var(--r);
  color: #fff;
}
.cd-eyebrow {
  margin: 0 0 .75rem; font-size: var(--t-small); font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: #bfe6f5;
  text-align: center;
}
.cd-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.cd-cell {
  padding: .6rem .25rem .5rem; text-align: center;
  background: rgba(255, 255, 255, .1); border-radius: var(--r-sm);
}
.cd-num {
  display: block; font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  font-weight: 900; line-height: 1; letter-spacing: -.03em; color: #fff;
  font-variant-numeric: tabular-nums;
}
.cd-lab {
  display: block; margin-top: .4rem; font-size: var(--t-small);
  font-weight: 700; letter-spacing: .04em; color: #dcecf5;
}

/* --- 10c. Whova app band -------------------------------------------------- */
.app-band { padding: 3.5rem 0; background: var(--paper-2); border-top: 1px solid var(--line); }
.app-inner { max-width: 46rem; }
.app-title { margin: .35rem 0 .75rem; font-size: var(--t-h2); letter-spacing: -.02em; }
.app-body { font-size: var(--t-lead); color: var(--muted); }
.app-band .status-note, .app-band .button-row { margin-top: 1.25rem; }

/* --- 11. Section heads --------------------------------------------------- */
.section-head { display: grid; gap: 1.25rem; margin-bottom: 2rem; }

/* --- 12. Stream cards ---------------------------------------------------- */
.streams { padding: 3.5rem 0; background: var(--ink); }
.streams .section-title { color: var(--white); }
.streams-inset { background: var(--ink-2); }

.stream-grid { display: grid; gap: 1rem; }
.stream {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 13.5rem; padding: 1.75rem 1.5rem;
  border-radius: var(--r); color: var(--white); text-decoration: none;
  overflow: hidden; isolation: isolate;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.stream::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(0,0,0,.1));
  opacity: 0; transition: opacity .3s var(--ease);
}
.stream:hover { transform: translateY(-6px); box-shadow: var(--sh-3); }
.stream:hover::after { opacity: 1; }
.stream-navy   { background: linear-gradient(155deg, #2f46b0 0%, #1b2668 100%); }
.stream-blue   { background: linear-gradient(155deg, #0f8ddb 0%, #024a78 100%); }
.stream-maroon { background: linear-gradient(155deg, #a82c61 0%, #5a1233 100%); }
.stream-cyan   { background: linear-gradient(155deg, #03bab2 0%, #029a94 100%); color: #04231f; }

.stream-n { position: absolute; right: 1.1rem; top: .4rem; font-size: 4.5rem; font-weight: 900; line-height: 1; letter-spacing: -.06em; opacity: .22; }
.stream-title { position: relative; max-width: 14ch; font-size: var(--t-h3); letter-spacing: -.03em; color: inherit; }
.stream-line { position: relative; margin: .75rem 0 0; max-width: 26ch; font-size: var(--t-small); font-weight: 600; opacity: .95; }
.stream-go { position: relative; margin-top: 1rem; font-size: 1.35rem; transition: transform .3s var(--ease); }
.stream:hover .stream-go { transform: translateX(6px); }

/* --- 13. Speakers -------------------------------------------------------- */
.speakers-band { padding: 3.5rem 0; background: var(--ink-2); }
.speakers-band .section-title { color: var(--white); }
.speakers-band .btn-dark { border-color: rgba(255,255,255,.6); color: var(--white); }
.speakers-band .btn-dark:hover { background: var(--white); color: var(--ink); }

.speaker-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 2rem; }
.speaker-chip { text-decoration: none; color: var(--white); }
.speaker-chip picture, .speaker-card picture { display: block; }
.speaker-img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--r); background: var(--ink-3);
  transition: transform .35s var(--ease);
}
.speaker-chip:hover .speaker-img { transform: scale(1.03); }
/* Stands in for a portrait we do not have. Deliberately flat and branded so it
   reads as "no photo supplied", not as a failed image. */
.speaker-initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--ink-3); color: var(--white);
  font-size: 2.75rem; font-weight: 900; letter-spacing: .02em;
}
.speaker-card .speaker-initials { background: var(--navy); }
.speaker-chip-name { display: block; margin-top: .7rem; font-size: var(--t-small); font-weight: 800; line-height: 1.3; }

/* Each speaker is a card carrying portrait, name, role, organisation and their
   own biography. A grid of faces and names alone told the reader nothing about
   why any of these people are worth two days of their time. */
.speaker-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 2rem; }
.speaker-card {
  scroll-margin-top: 7rem;
  display: grid; gap: 1rem;
  padding: 1.5rem 1.4rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
}
.speaker-head { display: flex; align-items: center; gap: 1.25rem; }
.speaker-head picture { flex: none; }
.speaker-card .speaker-img { width: 7rem; height: 7rem; border-radius: 50%; }
.speaker-card .speaker-initials { width: 7rem; height: 7rem; border-radius: 50%; font-size: 2rem; }
.speaker-ident { min-width: 0; }
/* Grid and flex children default to min-width:auto, so a long name widened the
   card past a 390px phone. Let them shrink and let long words break. */
.speaker-card { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.speaker-name, .speaker-role, .speaker-org { overflow-wrap: anywhere; }
/* Two Whova bios carry raw URLs (LinkedIn, Wikipedia) that cannot wrap. */
.speaker-bio { overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 30rem) { .speaker-head { flex-direction: column; align-items: flex-start; } }
.speaker-name { font-size: 1.25rem; font-weight: 800; line-height: 1.25; color: var(--ink); }
.speaker-role { margin-top: .2rem; font-size: var(--t-body); font-weight: 700; color: var(--ink-2, var(--ink)); }
.speaker-org { font-size: var(--t-body); color: var(--muted); }
/* The biography sits on its own tinted panel with a brand rule down its edge,
   so a long piece of prose reads as a considered block rather than loose text
   floating in white space. */
.speaker-bio {
  font-size: var(--t-body); line-height: 1.75; color: var(--ink);
  max-width: 78ch;
  padding: 1.35rem 1.5rem;
  border-radius: var(--r);
  border-left: 4px solid var(--cyan);
  background: linear-gradient(135deg, var(--paper) 0%, var(--paper-2) 100%);
}
.speaker-bio p + p { margin-top: .85rem; }

/* Gradient ring on the portrait, the same device the testimonial portraits use
   on the main site. Padding plus two backgrounds gives a true gradient edge,
   which a border cannot do. */
.speaker-card .speaker-img,
.speaker-card .speaker-initials {
  padding: 4px;
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    linear-gradient(135deg, var(--cyan) 0%, var(--navy) 60%, var(--maroon) 100%) border-box;
  border: 4px solid transparent;
}

@media (min-width: 48rem) {
  .speaker-card { grid-template-columns: 17rem minmax(0, 1fr); align-items: start; gap: 1.75rem; padding: 1.75rem; }
  .speaker-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .speaker-card .speaker-img,
  .speaker-card .speaker-initials { width: 9.5rem; height: 9.5rem; }
}
/* One card per row. Two across left the biography about 270px wide, which is
   roughly six words a line: technically two columns, practically unreadable.
   Full width gives the portrait block a fixed column and the text a proper
   measure. */
@media (min-width: 72rem) {
  .speaker-card { grid-template-columns: 19rem minmax(0, 1fr); gap: 2.5rem; padding: 2rem 2.25rem; }
  .speaker-bio { max-width: 82ch; }
}

/* --- 14. Gallery --------------------------------------------------------- */
.gallery { padding: 3.5rem 0; background: var(--paper-2); }
.shot-grid { display: grid; gap: 1rem; }
.shot { margin: 0; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-1); }
.shot-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s var(--ease); }
.shot:hover .shot-img { transform: scale(1.04); }

/* --- 15. Venue band ------------------------------------------------------ */
.venue-band { position: relative; padding: 4rem 0; background: var(--ink); overflow: hidden; }
.venue-media { position: absolute; inset: 0; }
.venue-media picture, .venue-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.venue-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,27,51,.42) 0%, rgba(11,27,51,.86) 100%); }
.venue-band .wrap { position: relative; z-index: 2; }
.venue-card {
  max-width: 36rem; padding: 2rem 1.5rem;
  border-radius: var(--r); background: rgba(11,27,51,.76);
  border: 1px solid var(--line-dark); color: var(--muted-dark);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.venue-title { font-size: var(--t-h2); letter-spacing: -.035em; color: var(--white); }
.venue-address { margin: .75rem 0 1rem; font-size: var(--t-small); font-weight: 700; color: var(--cyan); }
.venue-card .btn { margin-top: 1.25rem; }

/* --- 16. Closing CTA ----------------------------------------------------- */
.cta-band { position: relative; padding: 4rem 0; overflow: hidden; background: var(--ink); color: var(--white); }
.cta-media { position: absolute; inset: 0; }
.cta-media picture, .cta-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-scrim { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(11,27,51,.94) 0%, rgba(11,27,51,.74) 55%, rgba(2,120,116,.62) 100%); }
.cta-band .wrap { position: relative; z-index: 2; }
.cta-grid { display: grid; gap: 2rem; }
.cta-title { font-size: var(--t-h2); letter-spacing: -.04em; max-width: 14ch; color: var(--white); }
.cta-body { font-size: var(--t-lead); max-width: 44ch; color: var(--muted-dark); }

/* --- 17. Inner page hero ------------------------------------------------- */
.page-hero {
  position: relative; padding: 3.5rem 0 3rem;
  background: radial-gradient(120% 100% at 10% 0%, #1a3c66 0%, transparent 58%), var(--ink);
  color: var(--muted-dark); overflow: hidden;
}
.page-hero-media { position: absolute; inset: 0; }
.page-hero-media picture, .page-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Kept light enough that the conference photograph actually reads. The copy
   block sits left, so the horizontal pass carries most of the contrast. */
.page-hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,27,51,.55) 0%, rgba(11,27,51,.62) 55%, rgba(11,27,51,.86) 100%),
    linear-gradient(90deg, rgba(11,27,51,.80) 0%, rgba(11,27,51,.30) 62%, rgba(11,27,51,.12) 100%);
}
.page-hero-inner { position: relative; z-index: 2; }
.page-title {
  font-size: clamp(2.125rem, 1.4rem + 3.6vw, 4rem);
  letter-spacing: -.04em;
  line-height: 1.04;
  color: var(--white); max-width: 20ch; text-wrap: balance;
}
.page-lead { margin: 1.25rem 0 0; max-width: 58ch; font-size: var(--t-lead); color: var(--muted-dark); }

.page-main { padding: 3rem 0; }

/* --- 18. Info cards ------------------------------------------------------ */
.info-grid { display: grid; gap: 1rem; }
.info-card {
  padding: 1.75rem 1.5rem; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh-1);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.info-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.info-title { margin-bottom: .75rem; font-size: var(--t-h3); letter-spacing: -.02em; }
/* Action link inside a card, spaced off the paragraph and a full tap target. */
.info-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: .75rem; }

/* --- 19. Run of show ----------------------------------------------------- */
.run-of-show { padding: 3rem 0; background: var(--paper-2); }
.run-grid { display: grid; gap: 1.25rem; }
.run-day { padding: 1.5rem 1.25rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); }
.run-day-title { margin-bottom: 1rem; font-size: var(--t-h3); letter-spacing: -.02em; color: var(--navy); }
.run-list { display: grid; gap: .5rem; }
.run-row {
  display: grid; grid-template-columns: 1fr; gap: .2rem;
  padding: .85rem 1rem; border-radius: var(--r-sm); background: var(--paper);
  border-left: 4px solid var(--cyan);
}
.run-type { font-size: var(--t-small); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cyan-deep); }
.run-title { font-size: var(--t-body); font-weight: 700; color: var(--ink); }

/* --- 20. Stream detail --------------------------------------------------- */
.stream-detail-stack { display: grid; gap: 1.25rem; }
.stream-detail {
  padding: 1.75rem 1.5rem; border-radius: var(--r);
  border: 1px solid var(--line); border-top: 6px solid var(--cyan);
  background: var(--white); box-shadow: var(--sh-1); scroll-margin-top: 7rem;
}
.stream-detail-navy   { border-top-color: var(--navy); }
.stream-detail-blue   { border-top-color: var(--blue); }
.stream-detail-maroon { border-top-color: var(--maroon); }
.stream-detail-cyan   { border-top-color: var(--cyan); }
.stream-detail-head { display: grid; gap: 1rem; margin-bottom: 1.25rem; }
.stream-graphic { width: min(20rem, 100%); height: auto; }
.stream-detail-n { display: block; font-size: 1.25rem; font-weight: 900; letter-spacing: .1em; color: var(--muted); }
.stream-detail-title { margin-top: .35rem; font-size: var(--t-h3); letter-spacing: -.03em; }
.stream-detail-line { margin: .5rem 0 0; font-size: var(--t-body); font-weight: 700; color: var(--maroon); }
.stream-detail-body { display: grid; gap: 1.5rem; }

.audience { padding: 1.25rem; background: var(--paper-2); border-radius: var(--r-sm); }
.audience-title { margin-bottom: .75rem; font-size: var(--t-small); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.audience-list { display: grid; gap: .5rem; }
.audience-list li { position: relative; padding-left: 1.35rem; font-size: var(--t-small); font-weight: 600; }
.audience-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--cyan); }

/* --- 21. Hotel and map --------------------------------------------------- */
.hotel-band { padding: 3rem 0 0; }
.hotel-grid { display: grid; gap: 1.5rem; }
.hotel-card { padding: 1.75rem 1.5rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-2); }
.hotel-title { font-size: var(--t-h2); letter-spacing: -.035em; }
.hotel-address { margin: .85rem 0 1.5rem; font-style: normal; font-size: var(--t-body); font-weight: 600; line-height: 1.65; }
.hotel-facts { display: grid; gap: .75rem; margin: 0 0 1.5rem; }
.hotel-facts > div { display: flex; flex-wrap: wrap; gap: .35rem 1rem; justify-content: space-between; align-items: center; padding: .8rem 1rem; background: var(--paper-2); border-radius: var(--r-sm); }
.hotel-facts dt { font-size: var(--t-small); font-weight: 700; color: var(--muted); }
.hotel-facts dd { margin: 0; font-size: var(--t-body); font-weight: 800; color: var(--ink); }
.hotel-facts dd.is-urgent { color: var(--maroon); }
.code-value { display: inline-block; padding: .15rem .55rem; border-radius: .4rem; background: var(--ink); color: var(--cyan); font-size: var(--t-small); font-weight: 700; letter-spacing: .06em; }

.map-wrap { border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-2); background: var(--paper-2); }
.map-frame { width: 100%; height: 22rem; border: 0; }
/* An iframe takes keyboard focus but does not match :focus-visible in every
   browser, so the embedded map gets its own visible focus ring. */
.map-frame:focus, .map-frame:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* Tabbing into the embed moves focus inside Google's frame, where :focus on the
   iframe element is not applied reliably. The wrapper shows the ring instead. */
.map-wrap:focus-within,
.map-wrap.is-focused { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

/* --- 22. Travel codes ---------------------------------------------------- */
/* One white card per carrier on the dark band: logos are designed for light
   grounds, and the code itself is the largest thing in the card. */
.codes-band { padding: 3rem 0; background: var(--ink); color: var(--muted-dark); }
.codes-band .section-title { color: var(--white); max-width: none; }
.codes-head { margin-bottom: 2rem; }
.codes-head .codes-note { max-width: 60ch; font-size: var(--t-lead); }
.code-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.code-card {
  display: flex; flex-direction: column; gap: .6rem;
  padding: 1.35rem 1.25rem 1.25rem;
  background: var(--white); color: var(--body);
  border-radius: var(--r-sm); box-shadow: var(--sh-2);
}
.code-logo { width: auto; height: 2.5rem; max-width: 10rem; object-fit: contain; object-position: left center; margin-bottom: .4rem; }
.code-label { font-size: var(--t-small); font-weight: 700; color: var(--muted); }
.code-line { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.code-big {
  font-size: 1.625rem; font-weight: 700; letter-spacing: .08em; line-height: 1.2;
  color: var(--ink); padding: .3rem .65rem; background: var(--paper-2);
  border: 1px dashed rgba(11, 27, 51, .35); border-radius: .5rem;
  user-select: all;
}
.code-copy {
  min-height: 2.75rem; padding: .45rem .9rem;
  font-size: var(--t-small); font-weight: 800;
  color: var(--cyan-deep); background: var(--white);
  border: 2px solid var(--cyan-deep); border-radius: 999px;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.code-copy:hover { background: var(--cyan-deep); color: var(--white); }
.code-copy.is-copied { background: var(--cyan-deep); color: var(--white); }
.code-hint { font-size: var(--t-small); color: var(--muted); }
.code-link {
  margin-top: auto; display: block; padding: .6rem 0 0;
  min-height: 2.75rem; font-size: var(--t-small); font-weight: 800;
  color: var(--cyan-deep); text-decoration: none;
}
.code-link:hover { text-decoration: underline; }
.code-link .btn-arrow { margin-left: .35rem; }

/* --- 22b. Hotel promo tile (conference home, under "Why I4PL") ----------- */
/* The Westin night skyline behind a dark scrim; the rate is the headline. */
.hotel-tile {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
  max-width: 22rem; margin-top: 1.75rem; padding: 1.25rem 1.4rem;
  border-radius: var(--r-sm); color: var(--white); text-decoration: none;
  background-color: var(--ink);
  background-image: url("/conference-2026/assets/media/westin-harbour-castle-toronto-skyline-night-1600.jpg");
  background-image: image-set(
    url("/conference-2026/assets/media/westin-harbour-castle-toronto-skyline-night-1280.avif") type("image/avif"),
    url("/conference-2026/assets/media/westin-harbour-castle-toronto-skyline-night-1280.webp") type("image/webp"),
    url("/conference-2026/assets/media/westin-harbour-castle-toronto-skyline-night-1600.jpg") type("image/jpeg"));
  background-size: cover; background-position: center 60%;
  box-shadow: var(--sh-2);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.hotel-tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(6, 18, 36, .9) 0%, rgba(6, 18, 36, .74) 60%, rgba(6, 18, 36, .55) 100%);
}
.hotel-tile:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }
.hotel-tile-kicker { font-size: var(--t-small); font-weight: 800; color: var(--cyan-bright); }
.hotel-tile-rate { font-size: 2.25rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--white); }
.hotel-tile-rate span { font-size: 1.25rem; font-weight: 700; letter-spacing: 0; }
.hotel-tile-tax { font-size: var(--t-small); font-weight: 600; color: var(--white); }
.hotel-tile-date { margin-top: .35rem; font-size: var(--t-body); font-weight: 700; color: var(--white); }
.hotel-tile-cta {
  margin-top: .6rem; display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--t-small); font-weight: 800; color: var(--cyan-bright);
}
.hotel-tile:hover .hotel-tile-cta { text-decoration: underline; }
.hotel-tile:hover .btn-arrow { transform: translateX(4px); }
.hotel-tile .btn-arrow { transition: transform .2s var(--ease); }

/* Hotel booking button on the venue page: the primary action, full width. */
.hotel-actions .btn-book-hotel { flex: 1 1 100%; justify-content: center; font-size: 1.125rem; min-height: 3.5rem; }

/* --- 23. Register -------------------------------------------------------- */
.register-main { padding: 3rem 0 0; }
.register-grid { display: grid; gap: 1.5rem; }
.register-included { padding: 1.75rem 1.5rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1); }
.included-list { display: grid; gap: .75rem; margin-top: 1rem; }
.included-list li { position: relative; padding-left: 1.9rem; font-size: var(--t-body); font-weight: 600; }
.included-list li::before { content: ""; position: absolute; left: 0; top: .4em; width: 1.05rem; height: .55rem; border-left: 3px solid var(--cyan); border-bottom: 3px solid var(--cyan); transform: rotate(-45deg); }
.register-action-card { padding: 1.75rem 1.5rem; background: var(--ink); color: var(--muted-dark); border-radius: var(--r); }
.register-status-lead { font-size: var(--t-lead); font-weight: 600; color: var(--white); margin-bottom: 1.5rem; }

/* --- 24. Contact band ---------------------------------------------------- */
.contact-band { padding: 3rem 0; background: var(--navy); color: var(--muted-dark); }
.contact-inner { max-width: 48rem; }
.contact-title { font-size: var(--t-h2); letter-spacing: -.035em; color: var(--white); margin-bottom: 1rem; }
.contact-band .button-row { margin-top: 1.5rem; }

/* --- 25. FAQ ------------------------------------------------------------- */
.faq-stack { display: grid; gap: .75rem; max-width: 54rem; }
.faq-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem; font-size: var(--t-body); font-weight: 800; color: var(--ink); cursor: pointer; list-style: none; }
.faq-q::-webkit-details-marker { display: none; }
.faq-mark { position: relative; flex-shrink: 0; width: 1.25rem; height: 1.25rem; }
.faq-mark::before, .faq-mark::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 3px; margin-top: -1.5px; background: var(--cyan-deep); border-radius: 2px; transition: transform .22s var(--ease); }
.faq-mark::after { transform: rotate(90deg); }
.faq-item[open] .faq-mark::after { transform: rotate(0deg); }
.faq-a { padding: 0 1.25rem 1.35rem; }
.faq-a p { font-size: var(--t-body); color: var(--body); max-width: 64ch; }

/* --- 26. Policies -------------------------------------------------------- */
.policy-layout { display: grid; gap: 2rem; }
.policy-nav { padding: 1.25rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); }
.policy-nav-title { margin-bottom: .75rem; font-size: var(--t-small); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.policy-nav ul { display: grid; gap: .2rem; }
.policy-nav a { display: block; padding: .65rem .5rem; min-height: 2.75rem; border-radius: var(--r-sm); font-size: var(--t-small); font-weight: 700; color: var(--cyan-deep); text-decoration: none; }
.policy-nav a:hover { background: var(--paper-2); }
.policy-stack { display: grid; gap: 1.25rem; }
.policy { padding: 1.75rem 1.5rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); scroll-margin-top: 7rem; }
.policy-title { margin-bottom: .85rem; font-size: var(--t-h3); letter-spacing: -.02em; }
.policy p { max-width: 72ch; }

/* --- 27. Footer ---------------------------------------------------------- */
.site-footer { padding: 3rem 0 2rem; background: var(--ink); color: var(--muted-dark); }
.footer-top { display: grid; gap: 2.5rem; }
.footer-mark { width: auto; height: 3rem; filter: brightness(0) invert(1); }
.footer-theme { margin: 1rem 0 .25rem; font-size: var(--t-h3); font-weight: 900; color: var(--white); letter-spacing: -.02em; }
.footer-tagline { max-width: 34ch; font-size: var(--t-small); color: var(--muted-dark); }
.footer-h { margin-bottom: 1rem; font-size: var(--t-small); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.footer-links ul { display: grid; gap: .2rem; }
.footer-links a { display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 44px; font-size: var(--t-small); font-weight: 700; color: var(--muted-dark); text-decoration: none; }
.footer-links a:hover { color: var(--white); text-decoration: underline; }
.footer-contact p { font-size: var(--t-small); }
.footer-label { margin: 1.25rem 0 .35rem; font-size: var(--t-small); font-weight: 800; color: var(--white); }
.footer-contact a { color: var(--cyan); }
.footer-out { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; font-weight: 700; }
.footer-base { display: grid; gap: .5rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-dark); }
.footer-base p { margin: 0; font-size: var(--t-small); color: var(--muted-dark); }
.footer-base a { color: var(--white); }

/* =============================================================================
   BREAKPOINTS
   ============================================================================= */

@media (min-width: 40rem) {
  :root { --gutter: 2rem; }
  .fact-grid { grid-template-columns: repeat(4, 1fr); }
  .stream-grid, .info-grid, .shot-grid { grid-template-columns: repeat(2, 1fr); }
  .speaker-strip { grid-template-columns: repeat(3, 1fr); }
  .run-grid { grid-template-columns: repeat(2, 1fr); }
  .hero { padding: 8rem 0 4rem; }
  .info-card, .register-included, .register-action-card, .hotel-card,
  .stream-detail, .policy, .run-day { padding: 2rem; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
  .run-row { grid-template-columns: 13rem 1fr; align-items: baseline; gap: 1rem; }
}

@media (min-width: 62rem) {
  :root { --gutter: 2.5rem; }
  .nav { min-height: 5.25rem; }
  .brand-mark { height: 2.75rem; }

  .intro { padding: 5.5rem 0; }
  .intro-grid { grid-template-columns: 1.05fr .95fr; gap: 4rem; align-items: center; }
  .fact-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }

  .streams, .gallery, .speakers-band, .cta-band, .run-of-show, .codes-band { padding: 5.5rem 0; }
  .stream-grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
  .stream { min-height: 18rem; padding: 2rem 1.75rem; }
  .section-head { grid-template-columns: 1.15fr .85fr; align-items: end; gap: 3rem; margin-bottom: 3rem; }

  .speaker-strip { grid-template-columns: repeat(6, 1fr); }
  .speaker-strip { grid-template-columns: repeat(5, 1fr); gap: 1.75rem 1.25rem; }
  .shot-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }

  .venue-band { padding: 7rem 0; }
  .venue-card { padding: 2.75rem 2.5rem; }
  .cta-grid { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }

  .page-hero { padding: 5.5rem 0 5rem; }
  .page-main { padding: 4.5rem 0; }
  .info-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

  .stream-detail { padding: 3rem 2.75rem; }
  .stream-detail-head { grid-template-columns: 18rem 1fr; align-items: center; gap: 2rem; }
  .stream-detail-body { grid-template-columns: 1.4fr .6fr; gap: 3rem; }

  .hotel-band { padding: 4.5rem 0 0; }
  .hotel-grid { grid-template-columns: .95fr 1.05fr; gap: 2.5rem; align-items: stretch; }
  .map-frame { height: 100%; min-height: 30rem; }

  .register-main { padding: 4.5rem 0 0; }
  .register-grid { grid-template-columns: 1.1fr .9fr; gap: 2.5rem; align-items: start; }

  .policy-layout { grid-template-columns: 17rem 1fr; gap: 3rem; align-items: start; }
  .policy-nav { position: sticky; top: 7rem; }

  .contact-band { padding: 5.5rem 0; }
  .site-footer { padding: 5rem 0 2.5rem; }
  .footer-top { grid-template-columns: 1.2fr .8fr 1fr; gap: 3rem; }
}

/* Nav gets its OWN breakpoint, wider than the layout breakpoint. French labels
   are materially longer than English ("Lieu et déplacements" against "Venue &
   travel"), and at 1024px the French bar pushed Register off-screen. Rather
   than shrink the nav below the 16px floor, the drawer stays until there is
   genuinely room for the longer of the two languages. Raised to 116rem (1856px)
   on 2026-09-27 when Exhibitors joined the nav: the bar overflowed 1366-1680px. */
@media (min-width: 116rem) {
  .nav-toggle { display: none; }
  .brand-lockup { display: block; }
  .brand-mark { display: none; }
  .primary-nav {
    position: static; display: flex !important; align-items: center; gap: 1.1rem;
    width: auto; padding: 0; background: none;
    border: 0; border-radius: 0; box-shadow: none;
  }
  .nav-list { display: flex; align-items: center; gap: .1rem; margin-bottom: 0; }
  .nav-link { padding: .6rem .65rem; font-size: var(--t-small); white-space: nowrap; }
  .nav-tail { flex-wrap: nowrap; gap: .5rem; margin-left: 0; }

  /* French labels ("Lieu et déplacements", "Commanditaires") make the bar ~180px
     wider than English, which ran off a 1312-1536px laptop screen. Tighter
     spacing only; type stays 16px and tap targets stay 44px. */
  html:lang(fr) .primary-nav { gap: .6rem; }
  html:lang(fr) .nav-link { padding: .6rem .42rem; }
  html:lang(fr) .nav-tail { gap: .4rem; }
}
/* French only, until there is room: drop the thei4pl.ca link from the bar. The
   logo and footer still reach the main site. */
@media (min-width: 116rem) and (max-width: 124.99rem) {
  html:lang(fr) .nav-out { display: none; }
}

@media (min-width: 90rem) {
  .hero { min-height: min(92svh, 54rem); }
}

/* =============================================================================
   PREFERENCES
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .btn:hover, .stream:hover, .info-card:hover { transform: none; }
  .hero-video { display: none; }
  /* Reveal must never leave content invisible when motion is suppressed. */
  [data-motion="on"] .reveal { opacity: 1 !important; transform: none !important; }
}

@media (prefers-contrast: more) {
  :root { --muted: #2f4257; --muted-dark: #ffffff; --line: rgba(11,27,51,.42); }
  .hero-scrim { background: rgba(11,27,51,.86); }
}

@media print {
  .site-header, .cta-band, .skip-link, .hero-media, .breadcrumbs,
  .page-hero-media, .map-wrap { display: none; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .hero { min-height: auto; padding: 1rem 0; background: #fff; }
  .hero-title, .hero-sub, .page-title, .page-lead { color: #000; }
  [data-motion="on"] .reveal { opacity: 1 !important; transform: none !important; }
}


/* Sub-headings inside a policy. Only the privacy policy uses them, but a
   policy that must be cited section by section cannot be one long block. */
.policy-sub {
  margin: 1.75rem 0 .5rem;
  font-size: var(--t-body); font-weight: 800;
  letter-spacing: -.01em; color: var(--ink);
}
.policy-sub:first-of-type { margin-top: 1.5rem; }

/* --- Share the conference: one page, one gallery ------------------------- */
/* A reading-width column, not the full browser: thumbnails in a tidy grid,
   each with its name, format, size and a download link. */
.share-wrap { width: min(60rem, 100% - (var(--gutter) * 2)); margin-inline: auto; }
.share-note { margin: 0 0 1.75rem; font-size: var(--t-body); color: var(--muted); }
.share-gallery { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, 1fr); }
.share-item { margin: 0; display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.share-thumb { display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; background: var(--paper-2); overflow: hidden; }
.share-thumb img { width: 100%; height: 100%; object-fit: cover; }
.share-story .share-thumb img { object-fit: contain; background: var(--ink); }
.share-logo .share-thumb { padding: 1.25rem; }
.share-logo .share-thumb img { object-fit: contain; }
.share-thumb-dark { background: var(--ink); }
.share-item figcaption { display: grid; gap: .15rem; padding: .8rem .95rem 1rem; }
.share-name { font-size: var(--t-small); font-weight: 800; color: var(--ink); }
.share-meta { font-size: var(--t-small); color: var(--muted); }
.share-dl { justify-self: start; display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--t-small); font-weight: 800; color: var(--cyan-deep); }
@media (min-width: 48rem) { .share-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 62rem) { .share-gallery { grid-template-columns: repeat(4, 1fr); } }

/* --- Share page preview dialog ------------------------------------------- */
.share-thumb { cursor: zoom-in; }
.share-thumb:focus-visible { outline-offset: -3px; }
.share-dialog { width: min(58rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem);
  padding: 0; border: 0; border-radius: var(--r); background: var(--white);
  box-shadow: var(--sh-3); overflow: hidden; }
.share-dialog::backdrop { background: rgba(11, 27, 51, .78); backdrop-filter: blur(3px); }
.share-dialog-inner { position: relative; display: flex; flex-direction: column; max-height: calc(100vh - 2rem); }
.share-dialog-close { position: absolute; top: .75rem; right: .75rem; z-index: 2;
  width: 44px; height: 44px; border: 0; border-radius: 999px;
  background: rgba(11, 27, 51, .72); color: var(--white); font-size: 1.1rem; line-height: 1; }
.share-dialog-close:hover { background: var(--ink); }
.share-dialog-media { display: flex; align-items: center; justify-content: center;
  background: var(--paper-2); padding: 1rem; min-height: 0; flex: 1; }
.share-dialog-media.is-dark { background: var(--ink); }
.share-dialog-media img { max-width: 100%; max-height: calc(100vh - 13rem); width: auto; height: auto; object-fit: contain; }
.share-dialog-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem 1.25rem 1.25rem; border-top: 1px solid var(--line); }
.share-dialog-title { margin: 0; font-size: var(--t-h3); letter-spacing: -.02em; }
.share-dialog-foot .share-meta { display: block; margin: .15rem 0 0; }

/* Carrier conditions on the travel code cards (Air Canada, Delta). */
.code-terms { margin: .75rem 0 0; padding-left: 1.1rem; font-size: 14px; line-height: 1.5; color: #334155; }
.code-terms li + li { margin-top: .35rem; }

/* Sales end date on each ticket row, from Whova. */
.price-until { display: inline-block; margin-left: .35rem; font-weight: 700; color: #8a1f4f; }

/* === price-tax (2026-09-25): HST note under each ticket price === */
.price-tax{display:block;font-size:14px;font-weight:500;color:var(--ink-soft,#1f3a3a);line-height:1.3;margin-top:2px;white-space:nowrap}
/* === end price-tax === */

/* === refunds-page (2026-09-25) === */
.refund-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1rem 0 2.5rem}
.refund-rule{background:#fff;border:1px solid #d8e3e3;border-top:4px solid #00b0ad;border-radius:14px;padding:1.4rem 1.3rem;box-shadow:0 8px 24px rgba(0,60,60,.06)}
.refund-rule:nth-child(2){border-top-color:#8a1c3c}.refund-rule:nth-child(3){border-top-color:#f7941e}
.refund-rule-kicker{margin:0 0 .5rem;font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#1f3a3a}
.refund-rule-body{margin:0;font-size:19px;line-height:1.45;font-weight:600;color:#0b1f1f}
.refund-how{margin-top:.5rem;max-width:none}
.refund-steps{list-style:none;counter-reset:rs;padding:0;margin:1rem 0 2rem;display:grid;gap:1rem}
.refund-step{counter-increment:rs;position:relative;padding:1.1rem 1.2rem 1.1rem 4rem;background:#fff;border:1px solid #d8e3e3;border-radius:14px}
.refund-step::before{content:counter(rs);position:absolute;left:1.1rem;top:1.05rem;width:2.1rem;height:2.1rem;border-radius:50%;background:#003a38;color:#fff;font-weight:700;display:grid;place-items:center;font-size:16px}
.refund-step h3{margin:0 0 .35rem;font-size:19px}.refund-step p{margin:0;font-size:17px;line-height:1.55}
@media (max-width:760px){.refund-rules{grid-template-columns:1fr}}
/* === end refunds-page === */

/* =============================================================================
   HOME: FEATURED VOICES, 3x3 (Glen, 2026-09-27)
   Phones: intro, then a 3x3 grid, then the button, all centred.
   Desktop (62rem+): intro and button on the left, the 3x3 grid on the right.
   ============================================================================= */
.spk-layout { display: grid; gap: 1.75rem; grid-template-areas: "intro" "grid" "cta"; }
.spk-intro { grid-area: intro; text-align: center; }
.spk-intro .section-lead { margin: 1rem auto 0; max-width: 40ch; }
.speaker-strip.spk9 { grid-area: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem .75rem; margin-bottom: 0; }
.spk9 .speaker-chip-name { text-align: center; overflow-wrap: anywhere; }
.spk9 .speaker-initials { font-size: clamp(1.5rem, 6vw, 2.75rem); }
.spk-cta { grid-area: cta; justify-self: center; }
@media (min-width: 62rem) {
  .spk-layout {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    grid-template-areas: "intro grid" "cta grid";
    grid-template-rows: auto 1fr;
    column-gap: 4rem; row-gap: 2rem; align-items: start;
  }
  .spk-intro { text-align: left; }
  .spk-intro .section-lead { margin: 1.25rem 0 0; }
  .spk-cta { justify-self: start; }
  .speaker-strip.spk9 { gap: 1.75rem 1.25rem; }
  .spk9 .speaker-chip-name { text-align: left; }
}

/* HOME: 90-second showcase reel. preload="none" + poster: no video bytes until
   the visitor presses play (page speed). 720p for phones, 1080p from 62rem. */
.reel-band { padding: 4rem 0; background: var(--paper); }
.reel-head { text-align: center; margin-bottom: 1.75rem; }
.reel-frame { max-width: 64rem; margin: 0 auto; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-1); background: #0B1A2E; }
.reel-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.reel-note { margin: .9rem 0 0; text-align: center; font-size: var(--t-small); color: var(--muted); }
@media (min-width: 62rem) { .reel-band { padding: 6rem 0; } }
.reel-head .section-title, .spk-intro .section-title { margin-inline: auto; text-wrap: balance; }
@media (min-width: 62rem) { .spk-intro .section-title { margin-inline: 0; } }
.spk9 > [hidden] { display: none !important; }

/* Inside the hotel: 3D plan, room key, hotel map (Glen, 2026-09-29). 14px floor, AA colours. */
.plans-band { padding: 3rem 0; background: var(--paper); }
.plans-head { max-width: 46rem; margin: 0 0 1.5rem; }
.plans-note { color: var(--body); font-size: 1.0625rem; line-height: 1.6; margin: .75rem 0 0; }
.plan-figure { margin: 0 0 1.5rem; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: .75rem; }
.plan-img { display: block; width: 100%; height: auto; border-radius: 8px; }
.plan-figure figcaption { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; padding: .75rem .25rem .1rem; color: var(--muted); font-size: .9375rem; }
.plan-open { color: var(--cyan-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.plan-open .btn-arrow { margin-left: .25rem; }
.plan-key { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.plan-key li { background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--cyan-deep); border-radius: 10px; padding: .8rem 1rem; display: flex; flex-direction: column; gap: .15rem; }
.plan-key strong { color: var(--ink); font-size: 1rem; }
.plan-key span { color: var(--muted); font-size: .9375rem; }
.plan-map { max-width: 52rem; margin-left: auto; margin-right: auto; }
.plan-links { margin: 0; color: var(--body); font-size: 1rem; }
.plan-links a, .find-room a { color: var(--cyan-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 62rem) { .plans-band { padding: 4.5rem 0; } }

/* Hotel card: rate currency and direct-booking note (Glen, 2026-09-30). 14px floor, AA colours. */
.hotel-note { margin: 0 0 1.1rem; padding: .7rem .9rem; font-size: .9375rem; line-height: 1.55; color: var(--body); background: var(--paper-2); border-left: 4px solid var(--cyan-deep); border-radius: 0 8px 8px 0; }

/* Venue walkthrough card + dialog player (Glen, 2026-09-30). 14px floor, AA colours. */
.walk-card { display: grid; gap: 1rem; align-items: center; margin: 0 0 1.5rem; padding: .9rem; background: var(--white); border: 1px solid var(--line); border-radius: 14px; }
.walk-play { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--ink); aspect-ratio: 16 / 9; }
.walk-play img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.walk-play:hover img, .walk-play:focus-visible img { transform: scale(1.03); }
.walk-icon { position: absolute; left: 50%; top: 50%; width: 4.2rem; height: 4.2rem; margin: -2.1rem 0 0 -2.1rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #1a1206; background: var(--orange, #f7941e); box-shadow: 0 6px 24px rgba(0, 0, 0, .35); padding-left: .25rem; }
.walk-text h3 { margin: 0 0 .35rem; font-size: 1.4rem; }
.walk-text p { margin: 0 0 .8rem; color: var(--body); font-size: 1.0625rem; line-height: 1.55; }
.walk-links { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; }
.walk-dialog { width: min(68rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 0; border-radius: 14px; background: var(--ink); color: #fff; overflow: hidden; }
.walk-dialog::backdrop { background: rgba(11, 27, 51, .82); backdrop-filter: blur(3px); }
.walk-dialog-inner { position: relative; display: flex; flex-direction: column; }
.walk-dialog video { display: block; width: 100%; max-height: calc(100vh - 7rem); background: #000; aspect-ratio: 16 / 9; }
.walk-caption { margin: 0; padding: .75rem 1rem .9rem; font-size: 1rem; color: #fff; }
.walk-close { align-self: flex-end; margin: .6rem .6rem .5rem; min-height: 2.75rem; padding: 0 1.1rem; font-size: 1rem; font-weight: 700; color: #fff; background: transparent; border: 2px solid #fff; border-radius: 999px; cursor: pointer; }
.walk-close:hover, .walk-close:focus-visible { background: var(--ink); }
@media (min-width: 52rem) { .walk-card { grid-template-columns: minmax(0, 22rem) 1fr; gap: 1.5rem; padding: 1rem 1.25rem; } }
@media (prefers-reduced-motion: reduce) { .walk-play img { transition: none; } }
.walk-text .walk-note { font-weight: 700; color: var(--ink); }

/* Make the walkthrough stand out as an option (Glen, 2026-09-30): dark banner, first in the section. */
.walk-card { background: var(--ink); border: 0; color: #fff; padding: 1.1rem; box-shadow: 0 14px 40px rgba(11, 27, 51, .28); position: relative; overflow: hidden; }
.walk-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, var(--cyan-bright, #21e3d9), var(--orange, #f7941e)); }
.walk-eyebrow { margin: 0 0 .35rem !important; font-size: .9375rem !important; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan-bright, #21e3d9) !important; }
.walk-card .walk-text h3 { color: #fff; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); margin-bottom: .5rem; }
.walk-card .walk-text p { color: rgba(255, 255, 255, .92); }
.walk-card .walk-text .walk-note { color: #fff; border-left: 3px solid var(--orange, #f7941e); padding-left: .75rem; }
.walk-card .plan-open { color: var(--cyan-bright, #21e3d9); }
.walk-card .btn-primary { font-size: 1.0625rem; min-height: 3rem; }
.walk-icon { width: 5rem; height: 5rem; margin: -2.5rem 0 0 -2.5rem; font-size: 1.8rem; }
.walk-icon::after { content: ""; position: absolute; inset: -.5rem; border-radius: 50%; border: 3px solid var(--orange, #f7941e); opacity: 0; animation: walk-pulse 2.4s ease-out infinite; }
@keyframes walk-pulse { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .walk-icon::after { animation: none; } }
@media (min-width: 52rem) { .walk-card { grid-template-columns: minmax(0, 30rem) 1fr; gap: 2rem; padding: 1.25rem 1.5rem 1.25rem 1.75rem; } }

/* FAQ answer links (Cheville, 2026-09-30). */
.faq-links { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.faq-links a { color: var(--cyan-deep); font-weight: 700; font-size: 1rem; text-decoration: underline; text-underline-offset: 3px; }

/* Hero: the event is named above the theme (Cheville, 2026-09-30). */
.hero-kicker { margin: 0 0 .5rem; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 800; letter-spacing: .02em; color: #fff; }