/* ============================================================
   1. TOKENS - mirrors the hrgrapevine.com build tokens
   ============================================================ */
:root{
  /* Brand colour (grapevine-brand-kit - never invent a value) */
  --navy:#181D37;
  --navy-90:#20264A;
  --blue:#3A62AC;          /* editorial accent: links, registration CTAs */
  --blue-hover:#2E4E89;
  --blue-tint:#EAF0FA;
  --grape:#62388E;         /* commercial / partner signal */
  /* Dark-canvas tint of Grapevine Blue. Not a new brand colour: it is the
     accessibility tint already used on the HRG Live 2027 build, for blue that
     still reads on navy. Only ever used on dark surfaces. */
  --blue-on-dark:#9FBEFF;
  --grape-on-dark:#B07FE6;
  --grape-hover:#4E2C72;
  --grape-tint:#F2ECF7;
  --grey:#F5F5F5;
  --grey-200:#ECECEE;
  --white:#fff;

  /* Ink */
  --ink:#181D37;
  --text:#23262F;
  --text-muted:#5B5E6B;
  --text-soft:#70737E;
  --rule:#E4E4E7;
  --rule-strong:#C9C9CF;

  /* Semantic accent - re-scoped per brand below.
     FEEDBACK 2026-08-24: the Labs are a new product and the page was reading as
     "another blue HRG page", so GRAPE LEADS. Blue keeps the day spines and the
     room diagram; the site chrome is pinned back to Blue further down, because
     the header and footer belong to the site rather than to this page. */
  --accent:var(--grape);
  --accent-hover:var(--grape-hover);
  --accent-tint:var(--grape-tint);

  /* Type */
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --serif:'Lora',Georgia,'Times New Roman',serif;
  --f-h1:clamp(2.125rem,1.3rem + 3.1vw,3.25rem);
  --f-h2:clamp(1.5rem,1.15rem + 1.3vw,2rem);
  --f-lead:clamp(1.0625rem,1rem + .35vw,1.25rem);
  --f-body:1rem;
  --f-meta:.8125rem;
  --f-label:.6875rem;

  /* Layout */
  --container:1320px;
  --pad:clamp(20px,4vw,48px);
  --nav-h:60px;
  --subnav-h:56px;
  --radius:3px;
  --sect-y:clamp(56px,6vw,96px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
[data-brand="eg"]{ --accent:#55267B; --accent-hover:#41205E; --accent-tint:#F2ECF7 }
[data-brand="gilt"]{ --accent:#0D3A72; --accent-hover:#0D1F43; --accent-tint:#CADDFF }

/* ============================================================
   2. BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + var(--subnav-h) + 16px);font-size:16px}
body{
  margin:0;background:var(--white);color:var(--text);
  font-family:var(--sans);font-size:var(--f-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{margin:0;color:var(--ink);letter-spacing:-.015em;line-height:1.18}
p{margin:0}
figure,blockquote{margin:0}
img,svg{max-width:100%}
button,input,select{font-family:inherit}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--pad);position:relative}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:8px;top:-48px;z-index:200;background:var(--navy);color:#fff;padding:10px 16px;border-radius:var(--radius);transition:top .15s}
.skip:focus{top:8px}

.label{font-size:var(--f-label);font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---- The icon system. 2px single line, round caps, brand colour, and no
        other stroke weight anywhere on the page (grapevine-brand-kit). ---- */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{
  width:24px;height:24px;flex:none;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.icon--sm{width:18px;height:18px}
.icon--lg{width:28px;height:28px}
/* Tinted icon chip. --chip sets the hue; the fill is that hue at 10%. */
.chip{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:var(--radius);
  color:var(--chip,var(--accent));
  background:color-mix(in srgb,var(--chip,#3A62AC) 10%,#fff);
  border:1px solid color-mix(in srgb,var(--chip,#3A62AC) 22%,#fff);
}
@supports not (background:color-mix(in srgb,#000 10%,#fff)){
  .chip{background:var(--grape-tint);border-color:var(--rule)}
}
.chip--sm{width:40px;height:40px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--sans);font-size:.9375rem;font-weight:700;line-height:1;
  padding:14px 22px;border-radius:var(--radius);border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s,color .15s;
}
.btn:hover{text-decoration:none}
.btn .icon{width:16px;height:16px;transition:transform .18s var(--ease)}
.btn:hover .icon{transform:translateX(3px)}
.btn--primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--white)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule-strong)}
.btn--ghost:hover{border-color:var(--ink);background:var(--grey)}
.btn--onnavy{background:#fff;color:var(--navy);border-color:#fff}
.btn--onnavy:hover{background:var(--grey)}
.btn--sm{padding:10px 16px;font-size:.875rem}
/* WHITE TYPE on the hero button (Rron, 2026-08-26), which forced the fill a
   shade darker: white on the #B07FE6 tint is only 3.0:1 and fails AA for 15px
   bold. So the fill is Grapevine Grape itself (white on it = 8.5:1) and the
   #B07FE6 tint moves to the BORDER, because Grape alone sits at 1.9:1 against
   navy and the button would lose its edge. The border is what carries the 3:1
   non-text contrast a control needs against its background: 5.5:1 here.
   Do not drop that border while the fill is Grape. */
.btn--ondark{background:var(--grape);color:#fff;border-color:var(--grape-on-dark)}
.btn--ondark:hover{background:var(--grape-hover);border-color:#fff;color:#fff}
/* One per Lab. Small on purpose: two full-width buttons per day card is what
   "clunky" looks like. It keeps the PAGE accent rather than the day's spine
   colour: six identical buttons in three different colours made the Thursday
   pair read as a separate, near-black control, and the card already says which
   date is being requested. */
.btn--xs{padding:9px 15px;font-size:.8125rem}
.btn--xs .icon{width:14px;height:14px}

/* ============================================================
   3. SITE CHROME - matches the live hrgrapevine.com header/footer
   ============================================================ */
.site{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--rule)}
.site__inner{display:flex;align-items:center;gap:22px;height:var(--nav-h)}
.brandmark{display:flex;align-items:flex-start;gap:6px;flex:none}
.brandmark svg{width:42px;height:42px}
.brandmark__edition{font-size:.625rem;font-weight:700;color:var(--text-soft);letter-spacing:.04em;margin-top:2px}
.site__nav{display:flex;align-items:center;gap:18px;flex:1;min-width:0}
.site__nav a{font-size:.875rem;font-weight:600;color:var(--ink);white-space:nowrap;padding:6px 0;border-bottom:2px solid transparent}
/* The chrome belongs to hrgrapevine.com, not to this page: it keeps Blue even
   though the page accent is now Grape. */
.site__nav a:hover{color:var(--blue);border-bottom-color:var(--blue);text-decoration:none}
.site .btn--primary{background:var(--blue);border-color:var(--blue)}
.site .btn--primary:hover{background:var(--blue-hover);border-color:var(--blue-hover)}
.site__nav .divider{width:1px;height:20px;background:var(--rule);flex:none}
.site__actions{display:flex;align-items:center;gap:14px;flex:none}
.site__actions .region{font-size:.8125rem;font-weight:600;color:var(--ink)}
.icon-btn{background:none;border:0;padding:4px;cursor:pointer;color:var(--ink);line-height:0}
.nav-toggle{display:none;background:none;border:0;padding:6px;margin-left:-6px;cursor:pointer;color:var(--ink);line-height:0;flex:none}

/* Page sub-bar: keeps the event name and the primary action on screen */
.subbar{position:sticky;top:var(--nav-h);z-index:99;background:var(--navy);color:#fff;border-bottom:1px solid var(--navy);border-top:1px solid var(--white)}
.subbar__inner{display:flex;align-items:center;gap:24px;height:var(--subnav-h)}
.subbar__name{display:flex;align-items:center;gap:9px;font-size:.8125rem;font-weight:800;letter-spacing:.02em;white-space:nowrap}
.subbar__name .icon{width:16px;height:16px;color:var(--grape-on-dark)}
.subbar__links{display:flex;gap:20px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.subbar__links::-webkit-scrollbar{display:none}
.subbar__links a{font-size:.8125rem;font-weight:600;color:rgba(255,255,255,.78);white-space:nowrap;padding:4px 0;border-bottom:2px solid transparent}
.subbar__links a:hover,.subbar__links a[aria-current]{color:#fff;border-bottom-color:#fff;text-decoration:none}

/* ============================================================
   4. HERO
   ============================================================ */
/* FEEDBACK 2026-08-24: the light hero read as "quite plain". The whole section
   is now Grapevine Navy with white type, lit by Grape-first washes so the new
   product is the purple one. Every value here is a brand hex at low opacity. */
.hero{position:relative;overflow:hidden;background:var(--navy);color:#fff;
  padding-block:clamp(48px,5.5vw,84px) clamp(40px,4.5vw,64px)}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(64% 74% at 84% 4%, rgba(98,56,142,.60), transparent 66%),
    radial-gradient(56% 66% at 2% 96%, rgba(58,98,172,.34), transparent 68%),
    radial-gradient(40% 46% at 62% 96%, rgba(98,56,142,.30), transparent 70%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 76%);
  mask-image:linear-gradient(180deg,#000,transparent 76%);
}
.hero .wrap{z-index:1}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(28px,3vw,56px);align-items:center}
.hero__eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.hero__eyebrow .dot{width:7px;height:7px;padding:0;background:var(--grape-on-dark);flex:none;border-radius:1px}
.hero__eyebrow .label{color:var(--grape-on-dark)}
.hero h1{font-family:var(--serif);font-weight:600;font-size:var(--f-h1);line-height:1.06;letter-spacing:-.012em;max-width:17ch;color:#fff}
.hero__standfirst{font-family:var(--serif);font-size:var(--f-lead);line-height:1.62;color:rgba(255,255,255,.82);max-width:52ch;margin-top:20px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:32px}
.hero__note{display:flex;align-items:center;gap:7px;font-size:var(--f-meta);color:rgba(255,255,255,.72)}
.hero__note .icon{width:15px;height:15px;color:var(--grape-on-dark)}
.hero .btn--ghost{color:#fff;border-color:rgba(255,255,255,.42);background:transparent}
.hero .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.09)}
/* The fact rail inverts with the section. */
.hero .facts{border-top-color:rgba(255,255,255,.55)}
.hero .facts__item{border-right-color:rgba(255,255,255,.18);border-bottom-color:rgba(255,255,255,.18)}
.hero .facts__item .icon{color:var(--grape-on-dark)}
.hero .facts__item:nth-child(2) .icon{color:var(--blue-on-dark)}
.hero .facts__item dt{color:rgba(255,255,255,.66)}
.hero .facts__item dd{color:#fff}
.hero .facts__item dd .sub{color:rgba(255,255,255,.74)}

/* ---- PHOTOGRAPHY --------------------------------------------------------
   Brand kit imagery: real professionals, natural light, mild desaturation,
   subtle brand-colour overlay. Every file in images/ is an UNLICENSED COMP
   placeholder at the final crop: overwrite the file, keep the name.
   ------------------------------------------------------------------------ */
.ph{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--grey);margin:0}
.ph img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.94) contrast(1.02)}
.ph::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(158deg,rgba(58,98,172,.17),transparent 44%,rgba(98,56,142,.22));
}
/* Illustration variant. A brand illustration already arrives on a navy ground,
   so it needs neither the desaturation nor the colour overlay a photograph does;
   both would only muddy flat fills. */
.ph--illus{background:var(--navy)}
.ph--illus img{filter:none}
.ph--illus::after{display:none}
.ph--4x5{aspect-ratio:4/5}
.ph--16x10{aspect-ratio:16/10}   /* unused on this page, kept as a template ratio */
.ph--16x9{aspect-ratio:16/9}
.ph__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 18px;
  color:#fff;font-size:var(--f-meta);line-height:1.45;
  background:linear-gradient(180deg,transparent,rgba(24,29,55,.88));
}

/* ---------------------------------------------------------------------------
   THE ANIMATED ROUNDTABLE - the hero mark, and the one thing on this page that
   must not be redrawn per Lab. A vector rebuild of the illustration the client
   picked out: twelve line-art video tiles orbiting a laptop screen that carries
   the thirty-minute fact.

   HOW IT HOLDS TOGETHER, and the trap. .ob__spin turns the whole ring; every
   tile then counter-rotates by the SAME duration in the opposite direction
   (.ob__level) so it circles without ever tipping over. Change one duration and
   you must change the other, or the tiles slowly lean. The counter-rotation
   needs transform-box:fill-box so each tile spins about its own centre rather
   than the viewBox origin.

   Geometry (640x640, centre 320,320): tiles on a 245 radius, the "table" circle
   at 150 (which is also where the comet runs, so it is never hidden behind a
   tile), the laptop scaled to .9 so its base corners clear the table line.
   The table circle is a CONTINUOUS hairline on purpose: while it was dotted, the
   comet travelling along it had no visible track and read as a stray mark.

   THE SPOKES, and the bug that cost two attempts (Rron, 2026-08-24: "the lines
   disconnect while it's rotating"). Spokes rotate with the ring; tiles counter-
   rotate to stay upright. So the angle between a spoke and its tile's axes
   changes continuously, and a spoke end computed on the tile's EDGE is correct
   only at rotation 0 - everywhere else it floats short of the tile or stabs
   through the person's face. Both were visible at once mid-rotation.
   The fix is exact rather than tuned: every spoke ends at the tile's INRADIUS
   (209 = 245 - 36, half the tile height). A point 36 from the tile centre lies
   inside the 104x72 rect for ANY direction, since 36 <= 52 and 36 <= 36, so the
   spoke always crosses the frame and always overshoots INWARD. The opaque
   .ob__pane then hides that overshoot, and the visible line terminates on the
   frame edge at every angle. Spokes start at 144, just inside the table circle,
   so they visibly cross it instead of starting on a gap between its dashes.
   All motion is transform/opacity only, and the global prefers-reduced-motion
   rule at the foot of this stylesheet stops every animation dead.
   --------------------------------------------------------------------------- */
.orbit-fig{position:relative}
.orbit-fig svg{width:100%;height:auto}
.ob__table,.ob__path,.ob__comet,.ob__spoke{fill:none}
.ob__table{stroke:rgba(255,255,255,.20);stroke-width:1.25}
.ob__path{stroke:rgba(255,255,255,.14);stroke-width:1.25;stroke-dasharray:2 9}
/* A single bright arc running the orbit: the conversation, moving. pathLength
   normalises the circle to 1000 units so the dash maths cannot drift. */
.ob__comet{stroke:var(--grape-on-dark);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:96 904;animation:ob-comet 24s linear infinite}
@keyframes ob-comet{to{stroke-dashoffset:-1000}}
.ob__spin{transform-origin:320px 320px;animation:ob-spin 150s linear infinite}
@keyframes ob-spin{to{transform:rotate(360deg)}}
.ob__level{transform-box:fill-box;transform-origin:center;animation:ob-level 150s linear infinite}
@keyframes ob-level{to{transform:rotate(-360deg)}}
.ob__spoke{stroke:rgba(176,127,230,.34);stroke-width:1.25}
/* THE PANE IS LOAD-BEARING, not decoration. It is what hides each spoke's
   overshoot, so the line always appears to stop exactly on the frame. Drop its
   opacity and the disconnect bug comes straight back as a line across a face. */
.ob__pane{fill:rgba(24,29,55,.92);stroke:none}
.ob__tint{fill:none;stroke:none}
.ob__frame{fill:none;stroke:rgba(255,255,255,.46);stroke-width:2;stroke-linejoin:round}
.ob__tile circle,.ob__tile path{fill:none;stroke:rgba(255,255,255,.52);stroke-width:2;stroke-linecap:round}
.ob__tile--owner .ob__tint{fill:rgba(159,190,255,.14)}
.ob__tile--owner .ob__frame{stroke:var(--blue-on-dark)}
.ob__tile--owner circle,.ob__tile--owner path{stroke:var(--blue-on-dark)}
.ob__tile--partner .ob__tint{fill:rgba(176,127,230,.16)}
.ob__tile--partner .ob__frame{stroke:var(--grape-on-dark)}
.ob__tile--partner circle,.ob__tile--partner path{stroke:var(--grape-on-dark)}
.ob__tile rect.ob__halo{fill:none;stroke-width:2;opacity:0;
  transform-box:fill-box;transform-origin:center;animation:ob-halo 6s var(--ease) infinite}
.ob__tile rect.ob__halo--owner{stroke:var(--blue-on-dark)}
.ob__tile rect.ob__halo--partner{stroke:var(--grape-on-dark);animation-delay:3s}
@keyframes ob-halo{0%{opacity:.5;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.18)}}
/* Opacity only: a transform here would fight the counter-rotation. */
.ob__breathe{animation:ob-breathe 9s var(--ease) infinite}
@keyframes ob-breathe{0%,100%{opacity:1}50%{opacity:.55}}
.ob__tile--owner.ob__breathe,.ob__tile--partner.ob__breathe{animation:none}
.ob__me path,.ob__me rect{fill:none;stroke:var(--grape-on-dark);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ob__me rect.screen{stroke:rgba(255,255,255,.30);stroke-width:1.5}
.ob__me .pad{stroke:rgba(255,255,255,.34);stroke-width:1.5}
.ob__me text{fill:#fff;font-family:var(--sans);font-weight:800;text-anchor:middle;letter-spacing:-.02em}
.ob__me text.sub{fill:rgba(255,255,255,.74);letter-spacing:normal}
.ob__key{display:flex;justify-content:center;gap:10px 22px;margin-top:14px;flex-wrap:wrap}
.ob__key li{display:flex;align-items:center;gap:8px;font-size:var(--f-meta);font-weight:600;color:rgba(255,255,255,.86)}
.ob__key i{width:10px;height:10px;border-radius:2px;display:block;flex:none}
.ob__key .k-owner{background:var(--blue-on-dark)}
.ob__key .k-partner{background:var(--grape-on-dark)}
.ob__key .k-room{background:transparent;border:2px solid rgba(255,255,255,.8)}

/* Fact rail: date and format must be unmissable */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--navy);margin-top:clamp(32px,4vw,52px)}
.facts__item{padding:18px 22px 16px;border-right:1px solid var(--rule)}
.facts__item:first-child{padding-left:0}
.facts__item:last-child{border-right:0;padding-right:0}
.facts__item .icon{color:var(--accent);margin-bottom:10px}
.facts__item:nth-child(2) .icon{color:var(--grape)}
.facts__item dt{font-size:var(--f-label);font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--text-soft);margin-bottom:6px}
.facts__item dd{margin:0;font-size:1.0625rem;font-weight:700;color:var(--ink);line-height:1.3}
.facts__item dd .sub{display:block;font-size:var(--f-meta);font-weight:500;color:var(--text-muted);margin-top:3px}

/* ============================================================
   6. SECTIONS
   ============================================================ */
.sect{padding-block:var(--sect-y);border-bottom:1px solid var(--rule)}
.sect--grey{background:var(--grey);border-bottom-color:var(--grey-200)}
.sect--tight{padding-block:clamp(40px,4vw,64px)}
.print-only{display:none}
.sect__hd{max-width:62ch;margin-bottom:clamp(28px,3vw,44px)}
.sect__hd .label{display:block;margin-bottom:12px}
.sect__hd h2{font-size:var(--f-h2)}
/* FEEDBACK: "Why attend" is the heading now, and it was asked to be larger, so
   it steps up to hero scale and drops the eyebrow above it. */
.sect__hd--lead{margin-bottom:clamp(26px,3vw,40px)}
.sect__hd--lead h2{font-size:clamp(1.875rem,1.35rem + 2vw,2.75rem);line-height:1.08;font-weight:700}
.sect__hd p{margin-top:14px;font-size:var(--f-lead);line-height:1.6;color:var(--text-muted);font-family:var(--serif)}

/* Why attend - colour-coded cards */
.why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.why__item{
  background:#fff;border:1px solid var(--rule);border-top:3px solid var(--chip);
  border-radius:var(--radius);padding:26px 26px 30px;
  transition:border-color .2s,transform .2s var(--ease),box-shadow .2s;
}
.why__item:hover{transform:translateY(-3px);box-shadow:0 14px 30px -24px rgba(24,29,55,.7)}
.why__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.why__no{font-size:var(--f-label);font-weight:800;letter-spacing:.13em;color:var(--chip)}
.why__item h3{font-size:1.125rem;margin-bottom:10px}
.why__item p{font-size:.9375rem;color:var(--text-muted);line-height:1.62}

/* How it works */
.how{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:center}
.steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:20px 0;border-top:1px solid var(--rule)}
.steps li:first-child{border-top:0;padding-top:0}
.steps__no{font-size:.9375rem;font-weight:800;color:var(--step,var(--accent));font-variant-numeric:tabular-nums;padding-top:2px}
.steps h3{display:flex;align-items:center;gap:10px;font-size:1.0625rem;margin-bottom:6px}
.steps h3 .icon{width:20px;height:20px;color:var(--step,var(--accent));flex:none}
.steps p{font-size:.9375rem;color:var(--text-muted);line-height:1.62}

/* --- THE ROOM: 4x3 video tiles = the online roundtable --- */
.room{background:#fff;border:1px solid var(--rule-strong);border-radius:var(--radius);padding:22px 22px 18px}
.room__hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.room__hd .label{color:var(--text-soft)}
.room__live{display:flex;align-items:center;gap:7px;font-size:var(--f-label);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--grape)}
.room__live i{width:7px;height:7px;border-radius:50%;background:var(--grape);display:block;animation:blink 2.6s var(--ease) infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.28}}
.room svg{width:100%;height:auto}
.tile rect{fill:rgba(24,29,55,.03);stroke:rgba(24,29,55,.20);stroke-width:1.5}
.tile circle,.tile path{fill:none;stroke:rgba(24,29,55,.30);stroke-width:1.5;stroke-linecap:round}
.tile--host rect{fill:rgba(58,98,172,.12);stroke:var(--blue)}
.tile--host circle,.tile--host path{stroke:var(--blue)}
.tile--partner rect{fill:rgba(98,56,142,.12);stroke:var(--grape)}
.tile--partner circle,.tile--partner path{stroke:var(--grape)}
.room__key{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px;padding-top:14px;border-top:1px solid var(--rule)}
.room__key li{display:flex;align-items:center;gap:8px;font-size:var(--f-meta);color:var(--text-muted)}
.room__key i{width:10px;height:10px;border-radius:2px;display:block;flex:none}
.room__key .k-host{background:var(--blue)}
.room__key .k-partner{background:var(--grape)}
.room__key .k-you{background:#fff;border:2px solid rgba(24,29,55,.3)}

/* Takeaway strip - the promise, made specific */
.takeaways{background:var(--grape-tint);border-bottom:1px solid var(--grey-200);padding-block:clamp(36px,4vw,56px)}
.takeaways__hd{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.takeaways__hd h2{font-size:1.25rem}
.takeaways__hd p{font-size:.9375rem;color:var(--text-muted)}
.takeaways__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.5vw,18px)}
.takeaway{
  display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--rule);
  border-radius:var(--radius);padding:16px 18px;transition:transform .2s var(--ease),border-color .2s;
}
.takeaway:hover{transform:translateY(-2px);border-color:var(--grape)}
.takeaway .icon{color:var(--grape);width:22px;height:22px}
.takeaway b{display:block;font-size:.9375rem;color:var(--ink)}
.takeaway span{font-size:var(--f-meta);color:var(--text-soft)}

/* Agenda - each day runs its own colour spine */
.days{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.day{
  background:#fff;border:1px solid var(--rule-strong);border-radius:var(--radius);
  display:flex;flex-direction:column;overflow:hidden;
  transition:transform .2s var(--ease),border-color .2s,box-shadow .2s;
}
.day:hover{transform:translateY(-3px);border-color:var(--day);box-shadow:0 16px 32px -24px rgba(24,29,55,.75)}
.day__hd{position:relative;padding:20px 22px 18px 26px;border-bottom:2px solid var(--day);background:linear-gradient(180deg,rgba(24,29,55,.035),transparent)}
.day__hd::before{content:"";position:absolute;left:0;top:0;bottom:-2px;width:4px;background:var(--day)}
.day__dow{display:flex;align-items:center;gap:8px;font-size:var(--f-label);font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--day)}
.day__dow .icon{width:15px;height:15px}
.day__date{margin-top:5px;font-size:1.25rem;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.day__date .num{font-size:1.75rem;line-height:1;margin-right:2px}
.labs{flex:1;padding:4px 22px 20px}
.lab{display:grid;grid-template-columns:88px minmax(0,1fr);gap:16px;padding:22px 0;border-bottom:1px solid var(--rule)}
.lab:last-child{border-bottom:0}
.lab__no{font-size:var(--f-label);font-weight:800;letter-spacing:.09em;color:var(--day);margin-bottom:6px}
.lab__time{font-size:.875rem;font-weight:700;color:var(--ink);line-height:1.35;white-space:nowrap}
.lab h4{font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:10px}
.lab__partner{display:flex;align-items:center;gap:10px}
/* Sized for a real partner headshot once one exists */
.avatar{
  width:30px;height:30px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--grey);border:1px dashed var(--rule-strong);color:var(--text-soft);
}
.avatar .icon{width:15px;height:15px}
.lab__partner span{font-size:var(--f-meta);color:var(--text-muted);line-height:1.35}
.lab__partner .tba{display:block;font-weight:700;color:var(--text-muted)}
/* FEEDBACK: a CTA per Lab, not per day, because the groups differ by session.
   Small and inline rather than two stacked full-width buttons, which is what
   "clunky" meant. */
.lab__cta{margin-top:15px}
.agenda__foot{margin-top:28px;padding-top:22px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:14px 32px;align-items:baseline;justify-content:space-between}
.agenda__foot p{font-size:.9375rem;color:var(--text-muted);max-width:64ch}
.agenda__foot b{color:var(--ink)}

/* Who it's for */
/* The heading lives INSIDE the left column and the photograph flexes, so the two
   columns always finish level. Previously the right column ran ~290px past the
   tiers list and left a void under it. */
.who{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4vw,56px);align-items:stretch}
.who__lead{display:flex;flex-direction:column}
.who__lead .sect__hd{margin-bottom:clamp(20px,2.2vw,30px)}
.who__col{display:flex;flex-direction:column;gap:clamp(16px,1.8vw,22px)}
.who__col .ph{flex:1 1 auto;min-height:190px}
.tiers{display:flex;flex-direction:column;justify-content:center;flex:1}
.tiers li{display:flex;align-items:center;gap:14px;padding:16px 0;border-top:1px solid var(--rule)}
.tiers li:first-child{border-top:0;padding-top:0}
.tiers b{font-size:1.0625rem;font-weight:600;color:var(--ink)}
.who__col{display:flex;flex-direction:column;gap:clamp(16px,2vw,22px)}
.who__aside{background:#fff;border:1px solid var(--rule-strong);border-left:3px solid var(--grape);border-radius:var(--radius);padding:26px 26px 28px}
.who__aside h3{display:flex;align-items:center;gap:10px;font-size:1.0625rem;margin-bottom:10px}
.who__aside h3 .icon{color:var(--grape);width:20px;height:20px}
.who__aside p{font-size:.9375rem;color:var(--text-muted);line-height:1.62}

/* Audience proof band - navy lit by brand-colour washes and the ring motif */
.proof{
  position:relative;overflow:hidden;color:#fff;padding-block:clamp(48px,5vw,72px);
  background:linear-gradient(118deg,var(--navy) 0%,var(--grape-hover) 54%,var(--grape) 100%);
}
.proof::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 100% at 88% 108%, rgba(58,98,172,.42), transparent 66%);
}
.proof .wrap{z-index:1}
.proof__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.proof__item{border-top:2px solid rgba(255,255,255,.45);padding-top:18px}
.proof__item .icon{color:rgba(255,255,255,.72);margin-bottom:14px}
.proof__item .proof__fig{font-size:clamp(1.875rem,1.4rem + 1.6vw,2.5rem);font-weight:800;letter-spacing:-.02em;line-height:1;margin-top:0;color:#fff}
.proof__item p{margin-top:10px;font-size:.9375rem;color:rgba(255,255,255,.92);line-height:1.55}
.proof__note{margin-top:32px;font-size:var(--f-meta);color:rgba(255,255,255,.8)}

/* Partner panel - grape is the site's commercial signal */
.partner{
  position:relative;overflow:hidden;color:#fff;border-radius:var(--radius);
  /* Moved off Grape in v7: Grape is the page accent now, so the commercial lane
     needs its own hue to still read as a separate thing. */
  background:linear-gradient(95deg,var(--blue-hover) 0%,var(--navy) 100%);
  padding:clamp(32px,4vw,56px);
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,3vw,48px);align-items:center;
}
.partner > *{position:relative}
/* Must follow `.partner > *`: same specificity, so source order decides whether
   the orb stays out of the grid flow. Ordered wrongly it becomes a grid item. */
.partner__orb{position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.20),transparent 62%)}
.partner .label{color:rgba(255,255,255,.72)}
.partner h2{color:#fff;font-size:var(--f-h2);margin-top:12px}
.partner p{margin-top:14px;font-size:1.0625rem;line-height:1.6;color:rgba(255,255,255,.86);max-width:52ch}
.partner .partner__seat{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:.9375rem;font-weight:700;color:#fff}
.partner__seat .icon{width:20px;height:20px;color:rgba(255,255,255,.8)}
.partner__cta{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.partner__cta .btn{width:100%}
.partner__cta .fine{font-size:var(--f-meta);color:rgba(255,255,255,.72)}

/* FAQ */
/* Two columns: the accordion had 500px of dead space beside it. The left column
   also gives an unanswered question somewhere to go, which the page lacked. */
.faqgrid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(32px,4vw,64px);align-items:start}
.faqgrid .sect__hd{margin-bottom:clamp(20px,2.2vw,28px)}
.askcard{background:var(--grey);border:1px solid var(--rule-strong);border-left:3px solid var(--accent);border-radius:var(--radius);padding:24px 24px 26px}
.askcard h3{display:flex;align-items:center;gap:10px;font-size:1.0625rem;margin-bottom:10px}
.askcard h3 .icon{color:var(--accent);width:20px;height:20px}
.askcard p{font-size:.9375rem;color:var(--text-muted);line-height:1.6;margin-bottom:18px}
.faq{max-width:none}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-of-type{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;font-size:1.0625rem;font-weight:700;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{content:"";position:absolute;right:8px;top:26px;width:10px;height:10px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);transition:transform .18s}
.faq details[open] summary::after{transform:rotate(-135deg);top:30px}
.faq .a{padding:0 40px 22px 0;font-size:.9375rem;line-height:1.65;color:var(--text-muted);max-width:70ch}

/* Register */
.reg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,4vw,64px);align-items:start}
.reg h2{font-size:var(--f-h2)}
.reg__intro p{margin-top:16px;font-family:var(--serif);font-size:var(--f-lead);line-height:1.6;color:var(--text-muted);max-width:46ch}
.reg__list{margin-top:24px}
.reg__list li{display:flex;align-items:center;gap:12px;padding:9px 0;font-size:.9375rem;color:var(--text)}
.reg__list .icon{color:var(--accent);width:19px;height:19px}
.form{background:#fff;border:1px solid var(--rule-strong);border-top:3px solid var(--accent);border-radius:var(--radius);padding:clamp(24px,3vw,34px)}
.field{margin-bottom:18px}
.field label{display:block;font-size:var(--f-meta);font-weight:700;color:var(--ink);margin-bottom:7px}
.field input,.field select{width:100%;font-size:.9375rem;color:var(--ink);padding:12px 14px;border:1px solid var(--rule-strong);border-radius:var(--radius);background:#fff}
.field input:focus,.field select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-tint)}
/* The focus ring is Grape now, so the invalid state moves to Blue: the kit has
   no error colour and inventing a red is not allowed. The aria-live message
   under the button is what actually names the problem. */
.field input[aria-invalid="true"]{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-tint)}
.field--split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.checks{margin-bottom:20px}
.checks fieldset{border:0;padding:0;margin:0}
.checks legend{font-size:var(--f-meta);font-weight:700;color:var(--ink);margin-bottom:9px;padding:0}
.check{display:flex;align-items:center;gap:11px;padding:10px 12px;margin-bottom:6px;font-size:.9375rem;color:var(--text);border:1px solid var(--rule);border-radius:var(--radius);cursor:pointer;transition:border-color .15s,background .15s}
/* Two lines per row: the topic is what someone chooses on, the date and time is
   what they check afterwards. */
.check__t{display:flex;flex-direction:column;line-height:1.32;min-width:0}
.check__t b{font-weight:700;color:var(--ink)}
.check__t span{font-size:var(--f-meta);font-weight:500;color:var(--text-soft)}
.check input:checked ~ .check__t b{color:var(--day)}
.check:has(input:checked){border-color:var(--day);background:rgba(24,29,55,.02)}
.check:hover{border-color:var(--day);background:rgba(24,29,55,.02)}
.check input{width:16px;height:16px;accent-color:var(--day);flex:none}
.check .swatch{width:8px;height:8px;border-radius:2px;background:var(--day);flex:none;margin-left:auto}
.form .btn{width:100%}
.formnote{margin-top:14px;font-size:var(--f-meta);color:var(--text-soft);line-height:1.55}

/* Footer - mirrors the live site footer */
.site-foot{background:#fff;padding-block:44px 56px;text-align:center;border-top:1px solid var(--rule)}
.site-foot__copy{font-size:var(--f-meta);color:var(--text-soft)}
.site-foot__links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 0;margin-top:14px}
.site-foot__links li{display:flex;align-items:center}
.site-foot__links li::after{content:"";width:1px;height:12px;background:var(--rule-strong);margin-inline:14px}
.site-foot__links li:last-child::after{display:none}
.site-foot__links a{font-size:var(--f-meta);font-weight:600;color:var(--text-muted)}
.site-foot__links a:hover{color:var(--blue)}

/* ============================================================
   7. ENTRANCE MOTION - only ever applied when JS is present
   ============================================================ */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
.js .reveal:nth-child(2){transition-delay:.07s}
.js .reveal:nth-child(3){transition-delay:.14s}
.js .reveal:nth-child(4){transition-delay:.21s}
/* Printing and PDF export never scroll, so the reveals must not hide content there. */
@media print{ .js .reveal{opacity:1;transform:none} }

/* ============================================================
   8. RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .how,.who,.reg,.faqgrid{grid-template-columns:minmax(0,1fr)}
  /* Stacked, these frames are supporting bands, not heroes: a 16/9 crop at
     900px wide produced a 506px-tall image that dwarfed the copy beside it. */
  .who__col .ph{min-height:0;aspect-ratio:12/5}
  .askcard{margin-top:8px}
  .hero h1{max-width:20ch}
  .hero .wrap{display:flex;flex-direction:column;gap:clamp(28px,4vw,44px)}
  .hero__grid{display:contents}
  .hero__grid > :first-child{order:1}
  .hero .facts{order:2;margin-top:0}
  .hero__grid > .orbit-fig{order:3;max-width:420px;align-self:center}
  .days,.takeaways__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .partner{grid-template-columns:minmax(0,1fr)}
  .partner__cta{align-items:stretch}
  .nav-toggle{display:inline-flex}
  .site__inner{gap:14px}
  .site__nav{
    display:none;position:absolute;left:0;right:0;top:var(--nav-h);
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--rule);
    padding:4px var(--pad) 14px;box-shadow:0 14px 26px -20px rgba(24,29,55,.55);
  }
  .site__nav[data-open="true"]{display:flex}
  .site__nav a{padding:13px 2px;border-bottom:1px solid var(--rule)}
  .site__nav a:hover{border-bottom-color:var(--rule)}
  .site__nav .divider{display:none}
}
@media (max-width:760px){
  :root{--nav-h:58px}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts__item{padding-inline:18px;border-bottom:1px solid var(--rule)}
  .facts__item:nth-child(odd){padding-left:0}
  .facts__item:nth-child(even){border-right:0;padding-right:0}
  .facts__item:nth-last-child(-n+2){border-bottom:0}
  .why,.days,.takeaways__grid,.proof__grid{grid-template-columns:minmax(0,1fr)}
  .brandmark__edition{display:none}
  .subbar{--subnav-h:52px}
  .subbar__inner{justify-content:space-between}
  .subbar__name{font-size:.75rem;min-width:0}
  .subbar .btn{white-space:nowrap}
  .subbar__links{display:none}
  .site__actions .btn{display:none}
  .field--split{grid-template-columns:minmax(0,1fr)}
  .hero__cta .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js .reveal{opacity:1;transform:none}
}
@media (max-width:480px){
  /* No room for the event name beside the CTA: the sub-bar becomes a
     full-width sticky action bar instead of a name plus a squeezed button. */
  .subbar__name{display:none}
  .subbar .btn{width:100%}
}
@media (min-width:1700px){ :root{--container:1440px} }

/* ============================================================
   9. PRINT. This page will be PDF'd, and by default browsers drop
   background colours: every dark band would print as a white box
   holding white text. So the dark surfaces become ink on paper.
   ============================================================ */
@media print{
  .site,.subbar,.skip,.nav-toggle,.site__actions,.hero::before,.hero::after,.orbit-fig{display:none!important}
  /* The hero is a dark band on screen; on paper it has to become ink. */
  .hero__grid{grid-template-columns:minmax(0,1fr)}
  body{font-size:10.5pt;background:#fff}
  .wrap{max-width:none;padding-inline:0}
  .sect,.takeaways,.proof{padding-block:14pt!important;border-bottom:1px solid #ccc}
  .hero,.proof,.partner{
    background:#fff!important;color:var(--ink)!important;border:1px solid #ccc;
  }
  .hero *,.proof *,.partner *{color:var(--ink)!important}
  .partner__orb,.proof::before{display:none!important}
  .proof__item{border-top-color:#999!important}
  .btn{border:1px solid #999!important;background:#fff!important;color:var(--ink)!important}
  .day,.why__item,.takeaway,.room,.askcard,.faq details{break-inside:avoid}
  .sect,.takeaways{break-inside:auto}
  h1,h2,h3{break-after:avoid}
  .form,.reg__intro .btn{display:none}
  .print-only{display:block!important}
  .faq .a{display:block}
  a[href^="#"]{text-decoration:none;color:inherit}
}