/* The Vault. Stylesheet. Tokens from Brand Guidelines 2026 p20. Gold is light, never paint. */

@font-face{font-family:"Safiro";src:url("fonts/safiro-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Lexend";src:url("fonts/lexend-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* ------------------------------------------------------------------ 1. Tokens */
:root{
  --navy:#202748; --blue:#365398; --steel:#527195; --pale:#D9EBFC;
  --off:#FCFCFC; --grey:#F0F1F1; --gold:#C6B799;

  --canvas:#0F1531; --canvas-deep:#0A0E22; --panel:#182043; --paper:#F0F1F1;

  --accent:#C6B799; --accent-hover:#D9CBAE;
  --accent-muted:rgba(198,183,153,.28); --accent-hair:rgba(198,183,153,.55);

  /* The gold system. One champagne family, lit consistently from the upper left:
     a bright edge at 135deg, a deeper edge at 315deg, glow kept to a whisper. */
  --gold-deep:#806D49; --gold-shadow:#97815B; --gold-mid:#B7A278;
  --gold-light:#E1D2B1; --gold-highlight:#F5EACF;
  --gold-glow-soft:rgba(198,183,153,.18);
  --gold-glow-medium:rgba(198,183,153,.30);
  --gold-shadow-soft:rgba(65,49,24,.30);
  --gold-metallic:linear-gradient(135deg,var(--gold-deep) 0%,var(--gold-mid) 24%,var(--gold-highlight) 48%,var(--gold) 68%,var(--gold-shadow) 100%);
  --gold-line-gradient:linear-gradient(90deg,var(--gold-deep) 0%,var(--gold) 28%,var(--gold-highlight) 52%,var(--gold) 72%,var(--gold-deep) 100%);

  --text-primary:#FCFCFC; --text-secondary:#A8B6D2; --text-label:#8A99BB; --em-navy:#D9EBFC;
  --ink:#202748; --ink-2:#4C6987; --em-light:#365398;

  --hair:rgba(217,235,252,.14); --hair-soft:rgba(217,235,252,.08);
  --hair-ink:rgba(32,39,72,.14);

  --display:"Safiro","Helvetica Neue",Arial,sans-serif;
  --body:"Lexend","Helvetica Neue",Arial,sans-serif;

  --fs-label:.6875rem; --fs-body:1rem;
  --fs-lead:clamp(1.0625rem,.7vw + .9rem,1.3rem);
  --fs-h3:clamp(1.25rem,1.4vw + .8rem,1.6rem);
  --fs-h2:clamp(1.9rem,3vw + .6rem,3.4rem);
  --fs-h1:clamp(2.1rem,3.9vw,4.2rem);

  --content:1240px; --gutter:clamp(1.25rem,4.6vw,4.5rem); --nav-h:76px;
  /* Vertical rhythm. Sections carry half the gap each, so a boundary between two
     md sections reads as one deliberate space rather than two paddings stacked. */
  --section-space-lg:clamp(88px,9vw,144px);
  --section-space-md:clamp(64px,7vw,112px);
  --section-space-sm:clamp(48px,5vw,80px);
  --content-gap-lg:clamp(40px,5vw,76px);
  --content-gap-md:clamp(24px,3vw,48px);
  /* Section surfaces, all drawn from the existing navy and blue family. */
  --section-navy-deep:#090E24; --section-navy:#0F1531; --section-navy-raised:#151D3C;
  --section-blue-deep:#182548;
  --v-slope:0.28611; /* 78.168 / 273.203: 15.97deg off vertical */

  --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.4,0,.2,1);
  --t-ui:220ms; --t-mid:380ms; --t-ed:680ms; --t-cine:1150ms;

  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);

  /* The product interface, from the prototype's "Midnight & Satin" system */
  --ui-bg:#0C1129; --ui-raised:#171E42; --ui-lift:#131A3E;
  --ui-border:rgba(255,255,255,.09); --ui-hair:rgba(255,255,255,.055);
  --ui-text:#E9EDF7; --ui-2:#A2ADCA; --ui-3:#7E89AE;
  --ui-gold:#C7AC7A; --ui-gold-soft:rgba(199,172,122,.10); --ui-gold-hair:rgba(199,172,122,.42);
  --ui-ok:#62CFA3; --ui-warn:#EFA84E; --ui-live:#E2705F; --ui-blue:#5B7BC8;
}

/* ------------------------------------------------------------------ 2. Base */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--canvas);color-scheme:dark;scroll-padding-top:calc(var(--nav-h) + 8px);overflow-x:hidden;overflow-x:clip}
body{margin:0;font-family:var(--body);font-weight:400;font-size:var(--fs-body);line-height:1.6;color:var(--text-primary);background:var(--canvas);overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.js body{animation:pageIn 1.1s var(--ease) both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
h1,h2,h3{font-family:var(--display);font-weight:500;margin:0;line-height:1.05;letter-spacing:-.02em}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3);letter-spacing:-.01em;line-height:1.2}
p{margin:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px;border-radius:2px;box-shadow:0 0 0 5px var(--gold-glow-soft)}
.sr-only{position:absolute!important;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:var(--gutter);top:-60px;z-index:100;background:var(--accent);color:var(--canvas-deep);padding:.6rem 1rem;border-radius:2px;font-weight:500;transition:top var(--t-ui)}
.skip:focus{top:12px}
.wrap{width:min(var(--content),calc(100% - 2*var(--gutter)));margin:0 auto}
.label{font-family:var(--body);font-weight:500;font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;color:var(--text-label)}
.on-paper .label{color:var(--ink-2)}
.lead{font-size:var(--fs-lead);font-weight:300;line-height:1.55;color:var(--text-secondary);max-width:58ch}
.on-paper .lead{color:var(--ink)}
.em{color:var(--em-navy)} .on-paper .em{color:var(--em-light)}
.body{color:var(--text-secondary);max-width:62ch} .on-paper .body{color:var(--ink-2)}

.wordmark,.vmark{display:inline-block;background-color:currentColor;-webkit-mask:var(--m) no-repeat center/contain;mask:var(--m) no-repeat center/contain}
.wordmark{--m:url("svg/wordmark.svg");width:150px;height:28px}
.vmark{--m:url("svg/symbol.svg");width:18px;height:20px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:46px;padding:0 1.35rem;border-radius:2px;font-weight:500;font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;border:1px solid transparent;position:relative;overflow:hidden;transition:color var(--t-ui) var(--ease),border-color var(--t-ui) var(--ease),background var(--t-ui) var(--ease),transform var(--t-ui) var(--ease);text-shadow:none}
.btn-gold{color:#0F1531;background:var(--gold-metallic);border-color:rgba(245,234,207,.55);
  box-shadow:inset 0 1px 0 rgba(255,250,235,.55),inset 0 -1px 0 rgba(94,72,35,.24),0 8px 24px rgba(5,8,22,.22)}
.btn-gold::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:35%;background:linear-gradient(100deg,transparent,rgba(255,250,235,.6),transparent);transform:skewX(-18deg);opacity:0;transition:opacity .2s}
.btn-gold:hover,.btn-gold:focus-visible{transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,250,235,.72),inset 0 -1px 0 rgba(94,72,35,.22),0 10px 28px rgba(5,8,22,.28),0 0 18px var(--gold-glow-soft)}
.btn-gold:hover::after,.btn-gold:focus-visible::after{opacity:1;animation:sweep .9s var(--ease) 1}
@keyframes sweep{from{left:-40%}to{left:120%}}
.btn-ghost{color:var(--text-primary);border-color:rgba(252,252,252,.3)}
.btn-ghost:hover{border-color:var(--accent-hair);color:var(--em-navy)}
.on-paper .btn-ghost{color:var(--ink);border-color:var(--hair-ink)}
.btn:active{transform:translateY(0)}
@media (pointer:coarse){.btn{min-height:48px}}

/* ------------------------------------------------------------------ 3. The environment layer */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env .wash{position:absolute;inset:-22%;background:
  radial-gradient(ellipse 55% 45% at 28% 18%,rgba(54,83,152,.26),transparent 62%),
  radial-gradient(ellipse 60% 55% at 78% 82%,rgba(11,16,40,.95),transparent 66%),
  linear-gradient(160deg,#0B1028 0%,#0F1531 48%,#111A3D 100%);
  animation:envDrift 96s var(--ease-io) -32s infinite alternate;will-change:transform}
@keyframes envDrift{from{transform:translate3d(-2%,-1.2%,0) scale(1.02)}to{transform:translate3d(2.2%,1.6%,0) scale(1.07)}}
/* A field of raking gold light behind the sections from Miami 2027 to Curated
   Environments. The beams are drawn sharp into a deliberately small backing store
   and softened once by the compositor — far cheaper than filtering per frame.
   Screen blend means the gold adds light to the navy instead of sitting on it. */
.env .beams{position:absolute;inset:0;width:100%;height:100%;
  opacity:var(--beams-op,0);mix-blend-mode:screen;filter:blur(30px);
  transition:opacity 220ms linear;will-change:opacity}
.env .pattern{position:absolute;inset:0;opacity:.045;background-size:230px 250px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='230' height='250' viewBox='0 0 230 250'%3E%3Cg fill='none' stroke='%23D9EBFC' stroke-width='1.1' transform='translate(76 62) scale(.31)'%3E%3Cpath d='M0 0L78.168 273.203L125.68 273.203L54.027 0Z'/%3E%3Cpath d='M197.336 0L125.68 273.203L173.578 273.203L251.367 0Z'/%3E%3C/g%3E%3C/svg%3E")}
.env .grain{position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main{position:relative;z-index:1}

/* ------------------------------------------------------------------ 4. Navigation */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);color:var(--text-primary);transition:background var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease);border-bottom:1px solid transparent}
.nav.solid{background:rgba(10,14,34,.74);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-color:var(--hair-soft)}
.nav .brand{display:inline-flex;align-items:center;min-height:44px;transition:opacity var(--t-mid) var(--ease),visibility var(--t-mid)}
.nav:not(.solid) .brand{opacity:0;visibility:hidden}
.nav ul{display:flex;align-items:center;gap:2rem;list-style:none;margin:0;padding:0}
.nav li.cta{margin-left:.7rem}
.nav li a{position:relative;display:inline-flex;align-items:center;min-height:44px;font-size:.875rem;color:var(--text-secondary);transition:color var(--t-ui)}
.nav li a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--gold-line-gradient);box-shadow:0 0 6px var(--gold-glow-soft);transform:scaleX(0);transform-origin:left;transition:transform var(--t-mid) var(--ease)}
.nav li a:hover,.nav li a.current{color:var(--text-primary)}
.nav li a.current::after{transform:scaleX(1)}
.nav .btn{min-height:40px;padding:0 1.1rem;font-size:.6875rem;letter-spacing:.1em}
.nav .btn::after{display:none}
/* .nav li a is more specific than .btn-gold, so the label colour has to be restated here
   or the gold button ships with muted, unreadable text. */
.nav li a.btn-gold{color:var(--canvas-deep)}
.nav li a.btn-gold:hover{color:var(--canvas-deep)}
.nav li a.btn-ghost{color:var(--text-primary)}
@media (max-width:1180px){.nav ul{gap:1.5rem}}
.menu-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:6px}
.menu-btn span{display:block;width:22px;height:1px;background:currentColor;transition:transform var(--t-mid) var(--ease),opacity var(--t-ui)}
.nav.open .menu-btn span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav.open .menu-btn span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
@media (max-width:900px){
  .nav ul{position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;padding:1rem var(--gutter) 1.6rem;background:rgba(10,14,34,.97);border-bottom:1px solid var(--hair-soft);transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease),visibility 0s linear var(--t-mid)}
  .nav.open ul{opacity:1;transform:none;visibility:visible;transition-delay:0s}
  .nav ul li{width:100%;border-top:1px solid var(--hair-soft)} .nav ul li:first-child{border-top:0}
  .nav li a{min-height:52px;font-size:1rem;width:100%}
  .nav li a::after{display:none}
  .nav li.cta{border-top:0;padding-top:.8rem;margin-left:0}
  .nav .btn{width:100%;min-height:48px;font-size:.75rem}
  .menu-btn{display:inline-flex}
}

/* ------------------------------------------------------------------ 5. The hero: 300vh, one 10 s shot, three beats */
.hero{position:relative;height:300vh;z-index:1}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--canvas-deep);color:var(--text-primary)}
.poster,.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.poster{background:var(--canvas-deep) center/cover no-repeat}
.stage video{opacity:0;transition:opacity 1.1s var(--ease);will-change:transform;transform:translateZ(0)}
.stage.video-ready video{opacity:1}
.stage.video-failed video{display:none}
.scrim{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(to top,rgba(7,10,25,.58) 0%,rgba(7,10,25,.18) 42%,transparent 72%),
  radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,10,18,0) 35%,rgba(10,10,18,.62) 100%)}

.band{position:absolute;opacity:0;text-shadow:var(--tshadow);pointer-events:none}
.band::before{content:"";position:absolute;inset:-14% -18%;pointer-events:none;opacity:calc(.25 + .75*var(--k,1));background:radial-gradient(ellipse 74% 62% at 50% 50%,rgba(5,5,10,var(--sa,.66)) 0%,rgba(5,5,10,calc(var(--sa,.66)*.66)) 46%,rgba(5,5,10,0) 76%)}
.band > *{position:relative}
.band .w,.band .c{display:inline-block;will-change:transform,opacity}
.band .line{display:block;font-family:var(--display);font-weight:500;letter-spacing:-.02em;line-height:1.08}
.band .btn,.band a{pointer-events:auto}
.band .eyebrow{font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}
.band .sub{display:block;margin-top:1.1rem;font-size:var(--fs-lead);font-weight:300;color:var(--text-secondary);max-width:44ch}
.band .event{margin-top:1.3rem;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--em-navy)}
.band .cta{display:flex;gap:.8rem;margin-top:1.7rem;flex-wrap:wrap}
.enter-line{margin-top:1.1rem;font-size:.875rem}
.enter-line a{color:var(--accent);border-bottom:1px solid var(--accent-muted);padding-bottom:2px;transition:border-color var(--t-ui),color var(--t-ui)}
.enter-line a:hover{color:var(--accent-hover);border-color:var(--accent-hair)}
/* Touch: a standalone link needs a finger-sized target. Vertical padding on an
   inline box grows the hit area without changing the line box, so nothing moves. */
@media (pointer:coarse){.enter-line a{padding-block:12px}}

/* Beat 1: the opening state. The official wordmark alone, centred on the composition.
   Wordmark ships as the approved artwork (an SVG mask), never as styled text. */
.band-1{--sa:.52;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center}
.band-1::before{inset:-190% -70%}
.wordmark-hero{--wm:340px;width:var(--wm);height:calc(var(--wm)/5.4);color:var(--text-primary)}
/* Beat 2: the one cinematic line */
.band-2{--sa:.70;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;width:min(92vw,900px)}
.band-2 .line{font-size:clamp(2.4rem,6.6vw,6rem);letter-spacing:-.03em}
.band-2 .line .w.em{color:var(--accent)}
/* Beat 3: the settle, inside the room */
.band-3{--sa:.58;left:50%;top:auto;bottom:clamp(64px,9vh,120px);transform:translateX(-50%);text-align:center;width:min(92vw,900px)}
.band-3::before{inset:-26% -14% -46%}
.band-3 .line{font-size:clamp(1.9rem,4vw,3.6rem);max-width:20ch;margin:0 auto}
.band-3 .event{display:block;margin-top:1.1rem}
.band-3 .cta{justify-content:center}

/* Entrances: transform and opacity only, scrubbed off --k, reversible */
.e-rise .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*22px))}
.e-rise .eyebrow{--ke:clamp(0,var(--k,0)*3,1);opacity:var(--ke)}
.e-rise .sub{--ks:clamp(0,(var(--k,0) - .5)*3.4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*14px))}
.e-rise .event{--kv:clamp(0,(var(--k,0) - .62)*4,1);opacity:var(--kv)}
.e-rise .cta{--kb:clamp(0,(var(--k,0) - .72)*4.2,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*14px))}
.e-rise .enter-line{--kn:clamp(0,(var(--k,0) - .82)*5,1);opacity:var(--kn)}
.e-punch .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);--ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);opacity:var(--kc);transform:scale(calc(.6 + (.4 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)))}
.e-punch .w.em{--ov:.24;--sd:.16;--ss:2.6}

.ring{position:absolute;left:50%;bottom:34px;transform:translateX(-50%) rotate(-90deg);width:44px;height:44px;color:var(--accent);opacity:.9;transition:opacity .6s var(--ease)}
.ring circle{transition:stroke-dashoffset .15s linear}
.stage.video-ready .ring,.stage.video-failed .ring{opacity:0}
.cue{position:absolute;right:var(--gutter);bottom:28px;display:flex;align-items:center;gap:12px;color:var(--accent);text-shadow:none}
.cue svg{width:26px;height:28px;overflow:visible}
.cue path{fill:none;stroke:currentColor;stroke-width:6;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--vp,0)*100);opacity:.9}
.cue .cue-bg{stroke:rgba(198,183,153,.22);stroke-dashoffset:0}
.cue .cue-label{font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-label);transition:opacity .5s}
.stage.scrolled .cue-label{opacity:0}
.chev{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);width:22px;height:22px;color:var(--accent);animation:chev 2.6s var(--ease-io) -1.2s infinite}
@keyframes chev{0%,100%{transform:translate(-50%,0);opacity:.9}50%{transform:translate(-50%,8px);opacity:.5}}
@media (max-height:620px){.cue,.ring,.chev{display:none}}
/* Narrow desktop and landscape tablet: the V's dark halves are too slim for a side column,
   so beat 1 centres over the frame and its scrim deepens to hold the contrast. */
@media (max-width:1180px){ .wordmark-hero{--wm:280px} }
@media (max-width:720px){ .wordmark-hero{--wm:200px} }

/* The static hero: the full proposition, no scroll required. Five gates, identical in JS. */
.static{display:none}
@media (max-width:720px),(orientation:portrait) and (max-width:1024px),(orientation:portrait) and (pointer:coarse),(orientation:landscape) and (pointer:coarse) and (max-height:560px),(prefers-reduced-motion:reduce){
  .hero{height:auto}
  .stage{position:relative;height:auto;min-height:100svh;background:var(--canvas-deep) url("img/hero-ending.jpg") center 68%/cover no-repeat;background-attachment:scroll}
  .stage video,.poster,.bands,.ring,.cue,.chev{display:none}
  .scrim{background:linear-gradient(180deg,rgba(10,14,34,.9) 0%,rgba(10,14,34,.66) 42%,rgba(10,14,34,.42) 62%,rgba(10,14,34,.86) 100%)}
  .static{display:block;position:relative;text-shadow:var(--tshadow)}
  /* Pane 1: the opening state, the wordmark alone. Fades as the visitor starts moving. */
  .static-open{min-height:100svh;display:grid;place-items:center;padding:var(--nav-h) var(--gutter) 0;opacity:var(--logo-op,1)}
  /* Pane 2: the resting scene, the same content the scrub settles on. */
  .static-final{padding:0 var(--gutter) max(36px,calc(env(safe-area-inset-bottom) + 24px));text-align:left;min-height:62svh;display:flex;flex-direction:column;justify-content:flex-end}
  .static-line{font-family:var(--display);font-weight:500;line-height:1.08;letter-spacing:-.02em;font-size:clamp(1.9rem,7vw,2.9rem);max-width:16ch}
  .static .event{margin-top:1.2rem;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--em-navy)}
  .static .cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.6rem}
  .static .cta .btn{flex:1 1 auto;min-width:min(100%,220px)}
  .static .btn{text-shadow:none}
}

/* ------------------------------------------------------------------ 6. Sections */
section.chapter{position:relative;padding-block:var(--section-space-md)}
/* Only for a genuine narrative transition, never by default. */
section.chapter.is-major{padding-block:var(--section-space-lg)}
section.chapter.is-tight{padding-block:var(--section-space-sm)}
/* Where two sections are closely related, the pair shares one gap instead of two. */
section.chapter.pairs-up{padding-top:var(--section-space-sm)}

/* ---- Section surfaces -------------------------------------------------------
   Tonal separation only. These are translucent tints, not opaque fills: the fixed
   environment layer behind main carries the wash, the gold beam field and the grain,
   and an opaque section background would erase all three. Everything is composed in
   the background property, so no stacking context changes and no pseudo-elements are
   needed — section content keeps painting above it untouched. The first and last
   stops fade each surface into its neighbour instead of ending on a hard edge. */
.section-surface--deep{background:
  linear-gradient(180deg,rgba(9,14,36,.42),transparent clamp(40px,5vw,84px)),
  linear-gradient(0deg,rgba(9,14,36,.42),transparent clamp(40px,5vw,84px)),
  linear-gradient(180deg,rgba(9,14,36,.34),rgba(9,14,36,.52))}
.section-surface--raised{background:
  linear-gradient(180deg,rgba(9,14,36,.42),transparent clamp(40px,5vw,84px)),
  linear-gradient(0deg,rgba(9,14,36,.42),transparent clamp(40px,5vw,84px)),
  radial-gradient(circle at 72% 24%,rgba(54,83,152,.17),transparent 44%),
  linear-gradient(180deg,rgba(21,29,60,.52),rgba(15,21,49,.26))}
.section-surface--cinematic{background:
  linear-gradient(180deg,rgba(9,14,36,.46),transparent clamp(40px,5vw,84px)),
  linear-gradient(0deg,rgba(9,14,36,.46),transparent clamp(40px,5vw,84px)),
  radial-gradient(ellipse 64% 46% at 20% 16%,rgba(54,83,152,.13),transparent 62%),
  linear-gradient(180deg,rgba(7,11,28,.46),rgba(7,11,28,.62))}
.section-surface--close{background:
  linear-gradient(180deg,rgba(9,14,36,.44),transparent clamp(40px,5vw,84px)),
  linear-gradient(180deg,rgba(6,10,26,.46),rgba(5,8,20,.68))}
/* One hairline per boundary, never two. */
.section-surface + .section-surface{border-top:1px solid rgba(198,183,153,.07)}
.divider{position:relative;height:0;z-index:2}
.divider .blade{position:absolute;left:50%;top:-70px;width:1px;height:140px;background:linear-gradient(180deg,transparent,var(--gold-mid) 26%,var(--gold-highlight) 50%,var(--gold-mid) 74%,transparent);box-shadow:0 0 8px var(--gold-glow-soft);transform:skewX(-15.97deg) scaleY(0);transform-origin:50% 0;transition:transform 1.4s var(--ease)}
.divider.in .blade{transform:skewX(-15.97deg) scaleY(1)}
/* Intentional headline breaks. The break lives in the markup; nowrap only holds it
   above the mobile breakpoint, where the two sentences have room to sit on one line each. */
.title-line{display:block}
@media (min-width:769px){.title-line{white-space:nowrap}}
/* Below that the lines wrap, so balance them: a long line breaking to leave one
   word stranded is the awkward case this avoids. Ignored by older engines. */
@media (max-width:768px){.title-line{text-wrap:balance}}
/* Small phones: step the section headline down so a long intentional line resolves
   in two lines rather than three or four. The hierarchy holds - body copy is ~15px. */
@media (max-width:430px){:root{--fs-h2:clamp(1.5rem,7.1vw,1.9rem)}}

.head{display:grid;gap:1.1rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.head .label{display:inline-flex;align-items:center;gap:.8rem}
.head .label::before{content:"";width:22px;height:1px;background:var(--gold-line-gradient);box-shadow:0 0 6px var(--gold-glow-soft)}

/* 6.1 Miami 2027: the light editorial spread */
.paper{background:var(--paper);color:var(--ink);border-radius:2px;padding:clamp(3rem,6vw,6rem) clamp(1.5rem,5vw,5rem);position:relative;overflow:hidden;box-shadow:0 40px 120px rgba(5,8,25,.55)}
.paper::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 60%);opacity:.5;transform:translateX(-60%);animation:paperLight 14s var(--ease-io) -4s infinite alternate}
@keyframes paperLight{from{transform:translateX(-60%)}to{transform:translateX(60%)}}
.paper .cols{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(1.6rem,3.4vw,3.6rem);align-items:start}
.paper h2{color:var(--ink);font-size:clamp(1.4rem,2.3vw,2.05rem);line-height:1.12}
.paper h2 .em{color:var(--em-light)}
.paper .lead{color:var(--ink);margin-top:1.4rem}
.paper .body{color:var(--ink-2);margin-top:1.2rem;font-weight:400}
.paper .aside{border-left:1px solid var(--hair-ink);padding-left:1.6rem;color:var(--ink-2);font-size:.9375rem;line-height:1.7}
.paper .aside .label{margin-bottom:1rem;display:block}
.paper .pull{margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.6rem;border-top:1px solid var(--hair-ink);position:relative;font-family:var(--display);font-size:clamp(1.3rem,2vw,1.9rem);color:var(--ink);letter-spacing:-.01em;line-height:1.25}
.paper .pull::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--gold-line-gradient);transition:width 1.6s var(--ease)}
.paper.in .pull::before{width:140px}
.paper .pull .em{color:var(--em-light)}
@media (max-width:1024px){.paper .cols{grid-template-columns:1fr}}
/* Narrow phones: hold the intended two-line break by scaling the headline to the column
   rather than letting "Reinsurance Week moves fast." spill onto a third line. */
@media (max-width:480px){.paper h2{font-size:clamp(1.1rem,5.05vw,1.4rem)}}

/* 6.2 The Experience: three leaning V apertures */
/* Access & Concierge: one expandable gallery. Adapted from a React reference to this
   project's plain HTML/CSS/JS — the behaviour is flex-basis plus a class, not a
   framework. The official V rides each panel as a small gold aperture, so the brand
   mark survives without making the flex items themselves V-shaped and unstable. */
.access-concierge__intro{max-width:none}
.access-concierge__intro .label,.access-concierge__intro .lead{max-width:60ch}

.access-gallery{display:flex;gap:clamp(8px,1vw,16px);
  min-height:clamp(460px,62vh,680px);margin-top:var(--content-gap-lg)}
.access-gallery__item{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:4px;
  background:var(--panel);transition:flex-grow 620ms var(--ease)}
.access-gallery__item.is-active{flex-grow:2.3}
.access-gallery__item picture{display:contents}
.access-gallery__item img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--pos,50% 50%);
  filter:saturate(.94) contrast(1.02) brightness(.9);
  transition:transform 700ms var(--ease),filter 500ms var(--ease)}
.access-gallery__item.is-active img{transform:scale(1.025);
  filter:saturate(.97) contrast(1.045) brightness(1.02)}
/* Crops chosen so no face is lost while a panel is contracted. */
.access-gallery__item[data-item="access"] img{--pos:42% 44%}
.access-gallery__item[data-item="conversations"] img{--pos:54% 48%}
.access-gallery__item[data-item="deals"] img{--pos:46% 46%}

.access-gallery__overlay{position:absolute;inset:0;pointer-events:none;opacity:.74;
  transition:opacity 480ms var(--ease);
  background:linear-gradient(to top,rgba(6,9,24,.94) 0%,rgba(6,9,24,.62) 42%,
             rgba(6,9,24,.12) 76%,transparent 100%)}
.access-gallery__item.is-active .access-gallery__overlay{opacity:1}

/* The official mark, masked from the same asset the rest of the page uses. */
.access-gallery__v{position:absolute;top:clamp(14px,2vw,24px);right:clamp(14px,2vw,26px);z-index:2;
  width:clamp(22px,2.6vw,34px);aspect-ratio:251.367 / 273.203;
  background-image:var(--gold-metallic);opacity:.3;
  -webkit-mask:url("svg/symbol.svg") no-repeat center/contain;
  mask:url("svg/symbol.svg") no-repeat center/contain;
  transition:opacity 460ms var(--ease)}
.access-gallery__item.is-active .access-gallery__v{opacity:.85}

/* Gold frame: a hairline at rest, a lit metallic edge when the panel is active. */
.access-gallery__item::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:3;
  border:1px solid rgba(198,183,153,.20);
  box-shadow:inset 0 1px 0 rgba(245,234,207,0),0 0 0 rgba(198,183,153,0);
  transition:border-color 420ms var(--ease),box-shadow 500ms var(--ease)}
.access-gallery__item.is-active::after{border-color:rgba(225,210,177,.88);
  box-shadow:inset 0 1px 0 rgba(245,234,207,.34),inset 0 -1px 0 rgba(94,72,35,.28),
             0 0 20px rgba(198,183,153,.18)}

.access-gallery__content{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(18px,2.2vw,34px)}
.access-gallery__num{margin:0;font-family:var(--display);color:var(--gold-light);
  font-size:.85rem;letter-spacing:.14em;opacity:.6;transition:opacity 420ms var(--ease)}
.access-gallery__item.is-active .access-gallery__num{opacity:1}
.access-gallery__title{margin:.35rem 0 0;font-size:clamp(1.12rem,1.75vw,1.65rem);letter-spacing:-.01em}
/* A real button inside the heading: Enter and Space come for free, and the hit area
   is stretched over the whole panel without the panel itself pretending to be a control. */
.access-gallery__trigger{all:unset;display:block;cursor:pointer;color:inherit;font:inherit}
.access-gallery__trigger::before{content:"";position:absolute;inset:0;z-index:4}
.access-gallery__trigger:focus-visible{outline:2px solid var(--gold-light);outline-offset:4px;border-radius:2px}

.access-gallery__details{overflow:hidden;max-width:46ch}
.js .access-gallery__details{max-height:0;opacity:0;transform:translateY(14px);
  transition:max-height 560ms var(--ease),opacity 420ms var(--ease),transform 520ms var(--ease)}
.js .access-gallery__item.is-active .access-gallery__details{max-height:22rem;opacity:1;transform:none}
.access-gallery__rule{display:block;height:1px;width:0;margin:1rem 0 .9rem;
  background:var(--gold-line-gradient);box-shadow:0 0 6px var(--gold-glow-soft);
  transition:width 620ms var(--ease)}
.access-gallery__item.is-active .access-gallery__rule{width:72px}
.access-gallery__details .kicker{margin:0;color:var(--pale);font-weight:300;
  font-size:clamp(.95rem,1.15vw,1.1rem);line-height:1.4}
.access-gallery__details .body{margin:.55rem 0 0;font-size:.9rem;color:var(--text-secondary)}

/* Without JavaScript nothing is hidden: the panels simply stack and read in full. */
html:not(.js) .access-gallery{flex-direction:column;min-height:0}
html:not(.js) .access-gallery__item{min-height:clamp(320px,44vh,400px)}

.pillars-close{margin-top:var(--content-gap-lg);font-family:var(--display);
  font-size:clamp(1.4rem,2.4vw,2.2rem);letter-spacing:-.01em;text-align:center;color:var(--text-primary)}
.pillars-close .em{color:var(--accent)}

/* Below 900px three panels can only be thin strips, so the gallery becomes a vertical
   accordion. Same mechanism, same one-open-at-a-time rule. */
@media (max-width:900px){
  .access-gallery{flex-direction:column;gap:10px;min-height:clamp(600px,88vh,780px)}
  .access-gallery__item.is-active{flex-grow:2.7}
  .access-gallery__content{padding:clamp(16px,4vw,24px)}
  .js .access-gallery__item.is-active .access-gallery__details{max-height:26rem}
}

/* 6.3 Before, during and after */
/* The agenda: one continuous vertical line carrying three official V markers.
   The line's x is derived from the same tokens as the grid columns, so it passes
   through the centre of every marker at any width rather than depending on how
   fractional columns happen to resolve. */
.event-agenda__intro{max-width:none}
.event-agenda__intro .lead,.event-agenda__intro .event-agenda__dates{max-width:58ch}
.event-agenda__dates{margin-top:1.1rem;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.event-agenda__intro .lead{margin-top:1.3rem}

.event-timeline{
  --date-col:clamp(150px,17vw,220px);
  --v-col:64px;
  --col-gap:clamp(20px,3vw,48px);
  --line-x:calc(var(--date-col) + var(--col-gap) + var(--v-col) / 2);
  --timeline-progress:0%;
  --lead-opacity:0;
  --lead-y:0px;
  position:relative;margin-top:clamp(3.4rem,7vw,5.5rem)}

/* Height is written straight from scroll position, with no duration of its own. */
.event-timeline__progress{position:absolute;top:0;bottom:0;left:var(--line-x);width:1px;pointer-events:none}
.event-timeline__track{position:absolute;inset:0;background:var(--hair);opacity:.6}
.event-timeline__fill{position:absolute;left:0;top:0;width:100%;height:var(--timeline-progress);
  background:var(--gold-line-gradient);
  box-shadow:0 0 8px var(--gold-glow-medium),0 0 20px var(--gold-glow-soft);
  transform-origin:top center}
/* Driven by a px transform rather than a second layout property. */
.event-timeline__leading-light{position:absolute;left:50%;top:0;width:3px;height:42px;border-radius:2px;
  background:linear-gradient(180deg,transparent,var(--gold-highlight));
  opacity:var(--lead-opacity);filter:blur(1px);
  transform:translate(-50%,calc(var(--lead-y) - 100%));
  transition:opacity 260ms var(--ease)}

.event-timeline__list{list-style:none;margin:0;padding:2.2rem 0 0;display:grid;gap:clamp(3.4rem,7vw,6rem)}
.event-timeline__entry{display:grid;
  grid-template-columns:var(--date-col) var(--v-col) minmax(0,1fr);
  grid-template-areas:"date mark body";
  column-gap:var(--col-gap);align-items:start}

.event-timeline__date{grid-area:date;margin:0;justify-self:end;text-align:right;
  font-size:.8125rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-label);
  opacity:.55;transition:opacity 500ms var(--ease),color 500ms var(--ease)}
.event-timeline__marker{grid-area:mark;justify-self:center;width:18px;height:20px;
  color:rgba(198,183,153,.42);opacity:.38;transform-origin:50% 62%;
  transition:opacity 420ms var(--ease),color 420ms var(--ease),filter 500ms var(--ease),transform 500ms var(--ease)}
.event-timeline__marker.is-active{opacity:1;color:var(--gold-light);background-image:var(--gold-metallic);
  filter:drop-shadow(0 0 4px rgba(245,234,207,.52)) drop-shadow(0 0 15px rgba(198,183,153,.28))}
/* A single arrival beat. Never loops. */
.event-timeline__marker.pulse-once{animation:vActivate 620ms var(--ease) 1}
@keyframes vActivate{0%{transform:scale(1)}45%{transform:scale(1.08)}100%{transform:scale(1)}}

.event-timeline__body{grid-area:body;opacity:.6;transform:translateY(10px);
  transition:opacity 520ms var(--ease),transform 520ms var(--ease)}
.event-timeline__entry.is-active .event-timeline__body{opacity:1;transform:none}
.event-timeline__entry.is-active .event-timeline__date{opacity:1;color:var(--gold-light)}

.event-timeline__title{margin:0;font-size:clamp(1.25rem,2vw,1.6rem)}
.event-timeline__desc{margin-top:.85rem;font-size:.9375rem;color:var(--text-secondary);max-width:56ch}
.event-timeline__note{margin-top:1.1rem;font-size:.8125rem;color:var(--text-label)}

/* Schedule rows: hairlines and alignment, never independent cards. */
.agenda-rows{list-style:none;margin:1.7rem 0 0;padding:0}
.agenda-row{display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);
  column-gap:1rem;row-gap:.3rem;padding:.9rem 0;
  border-top:1px solid var(--hair-soft);transition:border-color 500ms var(--ease)}
.event-timeline__entry.is-active .agenda-row{border-top-color:var(--hair)}
.agenda-row__head{display:contents}
.agenda-row__time{grid-column:1;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);padding-top:.16rem}
.agenda-row__title{grid-column:2;margin:0;font-size:1rem;font-weight:500;color:var(--pale)}
.agenda-row__note{grid-column:2;margin:0;font-size:.875rem;color:var(--text-secondary);max-width:54ch}

/* Closing Day: the culmination. Same language, more weight. */
.event-timeline__entry--closing{margin-top:clamp(1rem,2.4vw,2.2rem)}
.event-timeline__entry--closing .event-timeline__date{justify-self:end;padding:.32rem .66rem;
  border:1px solid rgba(198,183,153,.20);border-radius:2px;background:rgba(198,183,153,.09);
  color:var(--gold-light);opacity:.75}
.event-timeline__entry--closing.is-active .event-timeline__date{opacity:1;background:rgba(198,183,153,.14);
  border-color:rgba(198,183,153,.40)}
.event-timeline__entry--closing .event-timeline__body{padding:clamp(1.5rem,2.6vw,2.2rem);
  background:linear-gradient(162deg,rgba(9,13,33,.78),rgba(17,24,56,.44));
  border:1px solid rgba(198,183,153,.18);border-radius:3px;
  box-shadow:0 30px 80px rgba(4,7,22,.42);
  transition:opacity 520ms var(--ease),transform 520ms var(--ease),border-color 520ms var(--ease)}
.event-timeline__entry--closing.is-active .event-timeline__body{border-color:rgba(198,183,153,.40)}
.event-timeline__entry--closing .event-timeline__title{font-size:clamp(1.45rem,2.5vw,1.95rem)}
.event-timeline__entry--closing .event-timeline__marker.is-active{
  filter:drop-shadow(0 0 6px rgba(245,234,207,.72)) drop-shadow(0 0 20px rgba(198,183,153,.40))}
.event-timeline__closing{position:relative;margin:1.9rem 0 0;padding-top:1.5rem;
  font-family:var(--display);font-weight:500;letter-spacing:-.01em;line-height:1.25;
  font-size:clamp(1.1rem,1.8vw,1.42rem);color:var(--gold-light)}
.event-timeline__closing::before{content:"";position:absolute;left:0;top:0;width:92px;height:1px;
  background:var(--gold-line-gradient);box-shadow:0 0 6px var(--gold-glow-soft)}

.event-agenda__disclaimer{margin-top:clamp(2.6rem,5vw,4rem);font-size:.8125rem;line-height:1.6;
  color:var(--text-label);max-width:60ch}

/* Tablet: the structure holds, the date column narrows. */
@media (max-width:1100px) and (min-width:821px){
  .event-timeline{--date-col:clamp(118px,14vw,168px);--v-col:48px;--col-gap:clamp(16px,2.4vw,30px)}
}

/* Mobile: line at the left edge, V on the line, everything else to its right. */
@media (max-width:820px){
  .event-timeline{--date-col:0px;--v-col:30px;--col-gap:14px;--line-x:calc(var(--v-col) / 2)}
  .event-timeline__entry{grid-template-columns:var(--v-col) minmax(0,1fr);
    grid-template-areas:"mark date" ".    body";row-gap:.6rem}
  .event-timeline__date{justify-self:start;text-align:left}
  .event-timeline__entry--closing .event-timeline__date{justify-self:start}
  .event-timeline__marker{width:15px;height:17px}
  .event-timeline__list{padding-top:1.8rem;gap:clamp(2.8rem,9vw,3.6rem)}
}
@media (max-width:560px){
  .agenda-row{grid-template-columns:minmax(0,1fr)}
  .agenda-row__time,.agenda-row__title,.agenda-row__note{grid-column:1}
  .agenda-row__time{padding-top:0}
}

/* ------------------------------------------------------------------ 6.4 Inside the App */
.app-tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:clamp(1.6rem,3vw,2.4rem);border-bottom:1px solid var(--hair-soft);padding-bottom:0}
.app-tab{position:relative;min-height:46px;padding:0 1.1rem;font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--text-label);transition:color var(--t-ui)}
.app-tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--gold-line-gradient);box-shadow:0 0 6px var(--gold-glow-soft);transform:scaleX(0);transform-origin:center;transition:transform var(--t-mid) var(--ease)}
.app-tab:hover{color:var(--text-secondary)}
.app-tab[aria-selected="true"]{color:var(--text-primary)}
.app-tab[aria-selected="true"]::after{transform:scaleX(1)}

.app-stage{position:relative;min-height:640px;display:flex;align-items:center}
/* the desktop layer, decorative, behind */
.desk{position:absolute;right:0;top:0;width:76%;height:600px;background:linear-gradient(180deg,var(--ui-lift),var(--ui-bg));border:1px solid var(--ui-border);border-radius:6px;overflow:hidden;display:grid;grid-template-columns:172px 1fr;box-shadow:0 50px 120px rgba(4,7,22,.66);opacity:0;transition:opacity .7s var(--ease);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 34%,#000 100%);mask-image:linear-gradient(90deg,transparent,#000 34%,#000 100%)}
.desk::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--ui-gold-hair),transparent)}
.app-stage[data-view="schedule"] .desk:not(.desk--people){opacity:1}
.app-stage[data-view="people"] .desk--people{opacity:1}
.desk-rail{border-right:1px solid var(--ui-hair);padding:1.1rem .9rem;display:flex;flex-direction:column;gap:.15rem;background:rgba(7,10,25,.5)}
.desk-logo{display:flex;align-items:center;gap:.5rem;color:var(--ui-gold);margin-bottom:1.1rem;padding:0 .5rem}
.desk-logo .vmark{width:14px;height:16px}
.desk-nav{font-size:.75rem;color:var(--ui-3);padding:.5rem .55rem;border-radius:3px}
.desk-nav.is-on{color:var(--ui-text);background:var(--ui-gold-soft);box-shadow:inset 2px 0 0 var(--ui-gold)}
.desk-body{padding:1.3rem 1.5rem;overflow:hidden}
.desk-head{display:grid;gap:.3rem;margin-bottom:1.1rem}
.d-eyebrow{font-size:.5625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ui-gold)}
.d-title{font-family:var(--display);font-size:1.55rem;color:var(--ui-text);line-height:1.1}
.d-sub{font-size:.75rem;color:var(--ui-3)}
.desk-days{display:flex;gap:.4rem;margin-bottom:1rem}
.d-day{display:grid;justify-items:center;gap:1px;min-width:46px;padding:.4rem .2rem;border:1px solid var(--ui-hair);border-radius:4px;background:rgba(255,255,255,.03)}
.d-day i{font-style:normal;font-size:.5625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ui-3)}
.d-day b{font-size:.9rem;color:var(--ui-2);font-weight:500}
.d-day.is-on{border-color:var(--ui-gold-hair);background:var(--ui-gold-soft)}
.d-day.is-on b{color:var(--ui-gold)}
.desk-list{display:grid;gap:.4rem}
.d-row{display:grid;grid-template-columns:44px 8px 1fr auto;align-items:center;gap:.7rem;padding:.6rem .75rem;border:1px solid var(--ui-hair);border-radius:4px;background:rgba(255,255,255,.028)}
.d-row.is-key{border-color:var(--ui-gold-hair);background:var(--ui-gold-soft)}
.d-time{font-size:.75rem;color:var(--ui-2);font-variant-numeric:tabular-nums}
.d-mark{width:3px;height:22px;border-radius:2px;background:var(--ui-blue)}
.d-mark--meal{background:var(--ui-warn)} .d-mark--meet{background:var(--ui-gold)} .d-mark--sess{background:var(--ui-blue)}
.d-txt{display:grid;gap:1px;min-width:0}
.d-txt b{font-size:.8125rem;font-weight:500;color:var(--ui-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-txt i{font-style:normal;font-size:.6875rem;color:var(--ui-3)}
.d-tag{font-size:.5625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ui-3);border:1px solid var(--ui-hair);border-radius:99px;padding:.18rem .5rem;white-space:nowrap}
.d-tag--ok{color:var(--ui-ok);border-color:rgba(98,207,163,.3)}
.d-tag--warn{color:var(--ui-warn);border-color:rgba(239,168,78,.3)}
.desk-search{font-size:.75rem;color:var(--ui-3);border:1px solid var(--ui-hair);border-radius:4px;padding:.55rem .8rem;background:rgba(5,8,22,.42);margin-bottom:.9rem}
.desk-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.d-card{display:grid;gap:2px;padding:.8rem;border:1px solid var(--ui-hair);border-radius:4px;background:rgba(255,255,255,.028)}
.d-av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:.625rem;font-weight:600;color:var(--ui-gold);background:var(--ui-gold-soft);border:1px solid var(--ui-gold-hair);margin-bottom:.35rem}
.d-card b{font-size:.8125rem;font-weight:500;color:var(--ui-text)}
.d-card i{font-style:normal;font-size:.6875rem;color:var(--ui-3)}
.d-chip{justify-self:start;margin-top:.4rem;font-size:.5625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ui-ok);border:1px solid rgba(98,207,163,.3);border-radius:99px;padding:.18rem .5rem}
.d-chip--off{color:var(--ui-3);border-color:var(--ui-hair)}

/* the phone, the foreground */
.phone{position:relative;z-index:2;margin-left:clamp(0px,2vw,2rem)}
.phone-shell{width:306px;max-width:100%;padding:11px;border-radius:38px;background:linear-gradient(160deg,#2C3560,#141A38 42%,#0A0E22);box-shadow:0 40px 90px rgba(3,6,20,.72),inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(255,255,255,.06)}
.phone-screen{position:relative;height:596px;border-radius:28px;overflow:hidden;background:var(--ui-bg);display:flex;flex-direction:column;color:var(--ui-text);font-size:.8125rem;line-height:1.45}
.ph-top{padding:1.5rem 1rem .7rem;display:grid;gap:2px;border-bottom:1px solid var(--ui-hair);background:rgba(7,10,25,.6)}
.ph-ed{font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ui-gold)}
.ph-xs{font-size:.6875rem;color:var(--ui-3)}
.ph-scroll{flex:1;overflow:hidden;position:relative}
.ph-view{position:absolute;inset:0;padding:.9rem;display:grid;gap:.7rem;align-content:start;overflow:hidden}
.ph-view[hidden]{display:none}
.ph-kicker{font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ui-3)}
.ph-kicker--live{color:var(--ui-live)}
.ph-welcome{display:grid;gap:0}
.ph-script{font-family:var(--display);font-size:1rem;color:var(--ui-gold);font-style:italic}
.ph-name{font-family:var(--display);font-size:1.6rem;color:var(--ui-text);line-height:1.1}
.ph-now{display:flex;gap:.6rem;align-items:stretch;padding:.6rem .7rem;border:1px solid var(--ui-hair);border-radius:5px;background:rgba(255,255,255,.03)}
.ph-accent{width:3px;border-radius:2px;background:var(--ui-live);flex:none}
.ph-now-txt{display:grid;gap:1px}
.ph-now-txt b{font-weight:500}
.ph-next{position:relative;padding:.85rem;border:1px solid var(--ui-gold-hair);border-radius:6px;background:linear-gradient(160deg,rgba(199,172,122,.09),rgba(23,30,66,.6));overflow:hidden}
.ph-v{position:absolute;right:-14px;bottom:-26px;width:96px;height:106px;background-color:rgba(217,235,252,.06);-webkit-mask:url("svg/symbol.svg") no-repeat center/contain;mask:url("svg/symbol.svg") no-repeat center/contain}
.ph-next-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.4rem}
.ph-chip{font-size:.5625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ui-gold);border:1px solid var(--ui-gold-hair);border-radius:99px;padding:.16rem .45rem;white-space:nowrap}
.ph-chip--warn{color:var(--ui-warn);border-color:rgba(239,168,78,.35)}
.ph-chip--ok{color:var(--ui-ok);border-color:rgba(98,207,163,.35)}
.ph-chip--live{color:var(--ui-live);border-color:rgba(226,112,95,.35)}
.ph-time{font-family:var(--display);font-size:2rem;line-height:1;color:var(--ui-text)}
.ph-time--sm{font-size:1.15rem}
.ph-title{font-weight:500;margin-top:.5rem;font-size:.875rem}
.ph-title--sm{font-size:.8125rem;margin-top:.3rem}
.ph-meta{font-size:.6875rem;color:var(--ui-2);margin-top:.3rem}
.ph-actions{display:flex;gap:.4rem;margin-top:.7rem}
.ph-btn{flex:1;text-align:center;font-size:.6875rem;padding:.45rem .5rem;border-radius:4px;background:var(--ui-gold);color:#141A38;font-weight:500}
.ph-btn--ghost{background:transparent;color:var(--ui-2);border:1px solid var(--ui-border)}
.ph-btn--wide{flex:none;display:block}
.ph-strip{display:flex;justify-content:space-between;align-items:center;padding-top:.5rem;border-top:1px solid var(--ui-hair)}
.ph-row{display:flex;gap:.55rem;align-items:flex-start;padding:.55rem .7rem;border:1px solid var(--ui-hair);border-radius:5px;background:rgba(255,255,255,.028)}
.ph-dot{width:6px;height:6px;border-radius:50%;background:var(--ui-gold);margin-top:.4rem;flex:none}
.ph-row-txt{display:grid;gap:1px}
.ph-row-txt b{font-size:.75rem;font-weight:500}
.ph-row-txt i{font-style:normal;font-size:.6875rem;color:var(--ui-3)}
.ph-head{display:grid;gap:2px}
.ph-h{font-family:var(--display);font-size:1.35rem;font-weight:500;line-height:1.1}
.ph-days{display:flex;gap:.35rem}
.ph-day{flex:1;display:grid;justify-items:center;gap:1px;padding:.35rem .2rem;border:1px solid var(--ui-hair);border-radius:4px}
.ph-day i{font-style:normal;font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ui-3)}
.ph-day b{font-size:.8125rem;font-weight:500;color:var(--ui-2)}
.ph-day.is-on{border-color:var(--ui-gold-hair);background:var(--ui-gold-soft)}
.ph-day.is-on b{color:var(--ui-gold)}
.ph-item{display:grid;grid-template-columns:38px 3px 1fr auto;align-items:center;gap:.5rem;padding:.5rem .6rem;border:1px solid var(--ui-hair);border-radius:5px;background:rgba(255,255,255,.028)}
.ph-item.is-key{border-color:var(--ui-gold-hair);background:var(--ui-gold-soft)}
.ph-t{font-size:.6875rem;color:var(--ui-2);font-variant-numeric:tabular-nums}
.ph-mark{width:3px;height:20px;border-radius:2px;background:var(--ui-blue)}
.ph-mark--meal{background:var(--ui-warn)} .ph-mark--meet{background:var(--ui-gold)} .ph-mark--sess{background:var(--ui-blue)}
.ph-it{display:grid;gap:0;min-width:0}
.ph-it b{font-size:.75rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-it i{font-style:normal;font-size:.625rem;color:var(--ui-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-seg{display:flex;gap:.3rem;padding:.2rem;border:1px solid var(--ui-hair);border-radius:99px;background:rgba(5,8,22,.42)}
.ph-seg span{flex:1;text-align:center;font-size:.6875rem;padding:.3rem;border-radius:99px;color:var(--ui-3)}
.ph-seg .is-on{background:var(--ui-gold-soft);color:var(--ui-gold)}
.ph-card{padding:.75rem;border:1px solid var(--ui-hair);border-radius:5px;background:rgba(255,255,255,.028)}
.ph-card-top{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.4rem}
.ph-search{font-size:.6875rem;color:var(--ui-3);border:1px solid var(--ui-hair);border-radius:4px;padding:.5rem .65rem;background:rgba(5,8,22,.42)}
.ph-person{display:flex;gap:.6rem;align-items:center;padding:.55rem .65rem;border:1px solid var(--ui-hair);border-radius:5px;background:rgba(255,255,255,.028)}
.ph-av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:.625rem;font-weight:600;color:var(--ui-gold);background:var(--ui-gold-soft);border:1px solid var(--ui-gold-hair);flex:none}
.ph-p-txt{display:grid;gap:0;min-width:0;flex:1}
.ph-p-txt b{font-size:.75rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-p-txt i{font-style:normal;font-size:.625rem;color:var(--ui-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-cta{margin-top:.2rem}
.ph-bar{display:flex;border-top:1px solid var(--ui-hair);background:rgba(7,10,25,.86);padding:.45rem .3rem .8rem}
.ph-tab{flex:1;display:grid;justify-items:center;gap:3px;font-size:.5625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ui-3);transition:color var(--t-ui)}
.ph-tab i{width:15px;height:15px;border-radius:3px;border:1.5px solid currentColor;opacity:.75}
.ph-tab.is-on{color:var(--ui-gold)}

.app-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:clamp(2.5rem,5vw,3.5rem)}
.fact{padding:1.2rem 0 0;border-top:1px solid var(--hair-soft);font-size:.9375rem;color:var(--text-secondary);position:relative}
.fact::before{content:"";position:absolute;top:-1px;left:0;width:28px;height:1px;background:var(--gold-line-gradient)}
.fact strong{display:block;color:var(--text-primary);font-weight:500;margin-bottom:.3rem}
.app-privacy{margin-top:clamp(2rem,4vw,3rem);font-size:.875rem;color:var(--text-label);max-width:76ch}
.app-privacy a{color:var(--accent);border-bottom:1px solid var(--accent-muted);padding-bottom:1px}
.app-privacy a:hover{border-color:var(--accent-hair)}

@media (max-width:1100px){
  .app-stage{min-height:auto;justify-content:center;padding:0}
  .desk{display:none}
  .phone{margin:0}
}
@media (max-width:420px){
  .phone-shell{padding:9px;border-radius:32px}
  .app-benefits{grid-template-columns:1fr}
}
@media (max-width:560px){
  .app-tabs{gap:.15rem;flex-wrap:nowrap}
  .app-tab{padding:0 .55rem;font-size:.625rem;letter-spacing:.06em;flex:1 1 auto}
}
@media (max-width:980px) and (min-width:421px){.app-benefits{grid-template-columns:repeat(2,1fr)}}

/* 6.5 Curated Environments */
.rooms{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2.4vw,2rem);align-items:start}
.room{position:relative;overflow:hidden;background:var(--panel);margin:0;isolation:isolate;
  transition:filter 500ms var(--ease)}
.room picture{display:contents}
/* translate carries the scroll parallax; scale is a separate property so the hover can
   ease on its own without smearing the parallax. */
.room img{width:100%;height:100%;object-fit:cover;will-change:transform;
  transform:translateY(var(--py,0px));scale:1.12;
  transition:scale 700ms var(--ease),filter 500ms var(--ease)}
.room figcaption{position:absolute;left:1.2rem;bottom:1.1rem;z-index:3;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-primary);text-shadow:0 1px 8px rgba(5,5,10,.7);transition:color 450ms var(--ease)}
.room::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,21,49,0) 50%,rgba(10,14,34,.7) 100%);pointer-events:none}
/* The edge light rides inside the clip path, so it traces the real V-cut silhouette
   rather than a rectangle the shape would have cut away. */
.room::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.3;
  background:linear-gradient(135deg,rgba(245,234,207,.6) 0,rgba(245,234,207,0) 13%),
             linear-gradient(315deg,rgba(65,49,24,.55) 0,rgba(65,49,24,0) 11%);
  transition:opacity 500ms var(--ease)}
@media (hover:hover) and (pointer:fine){
  .room:hover,.room:focus-within{filter:drop-shadow(0 0 16px var(--gold-glow-soft))}
  .room:hover::before,.room:focus-within::before{opacity:1}
  .room:hover img,.room:focus-within img{scale:1.148;filter:brightness(1.04) contrast(1.025)}
  .room:hover figcaption,.room:focus-within figcaption{color:var(--gold-highlight)}
}
/* Slope arithmetic: offset = height * 0.28611. A 3:2 box is 19.1% of width; a 4:5 box, 35.8%. */
.room-a{grid-column:1/6;aspect-ratio:4/5;clip-path:polygon(0 0,100% 0,64.2% 100%,0 100%)}
.room-b{grid-column:6/13;aspect-ratio:3/2;clip-path:polygon(19.1% 0,100% 0,100% 100%,0 100%);margin-top:clamp(2rem,6vw,5rem)}
.room-c{grid-column:1/8;aspect-ratio:3/2;clip-path:polygon(0 0,100% 0,80.9% 100%,0 100%);margin-top:clamp(-1rem,-2vw,-3rem)}
.room-d{grid-column:8/13;aspect-ratio:4/5;clip-path:polygon(35.8% 0,100% 0,100% 100%,0 100%)}
@media (max-width:820px){.rooms{grid-template-columns:1fr}.room{grid-column:1/-1!important;margin-top:0!important;aspect-ratio:3/2!important}.room-a,.room-c{clip-path:polygon(0 0,100% 0,80.9% 100%,0 100%)}.room-b,.room-d{clip-path:polygon(19.1% 0,100% 0,100% 100%,0 100%)}}

/* 6.6 Curated Access: a tonal band, one statement */
.access{position:relative;background-color:#3A5798;background-image:linear-gradient(160deg,#242B4C 0%,#3A5798 52%,#232A4B 100%);overflow:hidden;color:var(--text-primary)}
/* The living gradient. The CSS gradient above stays as the painted fallback:
   the canvas only fades in once the shader has actually compiled and drawn, so a
   context failure or a missing WebGL leaves the section exactly as it was. */
.access .access-gl{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;
  opacity:0;transition:opacity 900ms var(--ease)}
/* The noise drifts, so a bright lobe can pass behind the copy. This scrim fixes the
   text side's luminance no matter what the shader is doing, and leaves the right
   half of the band open where the gradient does its work. */
.access::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(13,18,40,.90) 0%,rgba(13,18,40,.82) 34%,
                             rgba(13,18,40,.44) 62%,rgba(13,18,40,.10) 84%,rgba(13,18,40,0) 100%)}
@media (max-width:900px){
  /* Narrow layouts run the copy full width, so the veil has to cover the whole band. */
  .access::after{background:linear-gradient(180deg,rgba(13,18,40,.88) 0%,rgba(13,18,40,.80) 55%,rgba(13,18,40,.74) 100%)}
}
.access.gl-on .access-gl{opacity:1}
.access .pattern2{position:absolute;inset:0;z-index:1;opacity:.07;background-size:300px 326px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='326' viewBox='0 0 300 326'%3E%3Cg fill='none' stroke='%23D9EBFC' stroke-width='1.2' transform='translate(90 70) scale(.45)'%3E%3Cpath d='M0 0L78.168 273.203L125.68 273.203L54.027 0Z'/%3E%3Cpath d='M197.336 0L125.68 273.203L173.578 273.203L251.367 0Z'/%3E%3C/g%3E%3C/svg%3E");animation:patDrift 120s linear infinite}
@keyframes patDrift{from{background-position:0 0}to{background-position:300px 326px}}
.access .wrap{position:relative;z-index:2}
.access .label{color:var(--pale)}
.access-inner{max-width:62ch}
.access-inner h2{margin-top:1.1rem}
.access-inner h2 .em{color:var(--accent)}
.access-inner .lead{color:var(--pale);margin-top:1.4rem;max-width:54ch}
.access-notes{list-style:none;margin:clamp(2rem,4vw,3rem) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem 2.2rem}
.access-notes li{position:relative;padding-left:1.1rem;font-size:.9375rem;color:var(--off)}
.access-notes li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;background:var(--gold-metallic);transform:rotate(45deg);box-shadow:0 0 6px var(--gold-glow-soft)}
.access-cta{margin-top:clamp(2rem,4vw,2.8rem)}

/* 6.7 Request */
.request{position:relative;background:var(--canvas-deep);overflow:hidden}
.request .wrap{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:start}
.request h2{font-size:clamp(2.2rem,4.2vw,4rem);margin-top:1.1rem}
.request h2 .em{font-weight:500;color:var(--accent)}
.request .body{margin-top:1.4rem}
.request .signature{margin-top:clamp(2rem,4vw,3.5rem);color:var(--text-secondary);display:grid;gap:.6rem}
.request .signature .wordmark{width:170px;height:32px;color:var(--text-primary)}
.request .signature small{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-label)}
.enter-line--lg{margin-top:1.6rem;font-size:.9375rem}
.particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.particles i{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--accent);opacity:0;left:var(--x);top:var(--y);animation:drift var(--d,14s) var(--ease-io) var(--dl,0s) infinite}
.particles:not(.live) i{animation-play-state:paused}
@keyframes drift{0%{transform:translate3d(0,0,0);opacity:0}15%{opacity:.55}50%{transform:translate3d(var(--dx,10px),-38px,0);opacity:.35}85%{opacity:.5}100%{transform:translate3d(calc(var(--dx,10px)*1.6),-80px,0);opacity:0}}
form{display:grid;gap:1.1rem}
.field{display:grid;gap:.45rem}
.field label{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-label)}
.field .opt{text-transform:none;letter-spacing:0}
.field input,.field textarea{width:100%;min-height:48px;padding:.75rem .9rem;background:rgba(217,235,252,.04);border:1px solid var(--hair);border-radius:2px;color:var(--text-primary);font:inherit;font-size:.9375rem;transition:border-color var(--t-ui),background var(--t-ui)}
.field textarea{min-height:96px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:rgba(138,153,187,.7)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:rgba(217,235,252,.06)}
.field input[aria-invalid="true"]{border-color:#E2705F}
.form-error{font-size:.8125rem;color:#F0968A}
.form-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:.4rem}
.form-foot small{font-size:.75rem;color:var(--text-label);max-width:38ch}
.form-foot small a{color:var(--text-secondary);border-bottom:1px solid var(--hair)}
.success{display:none;padding:1.6rem;border:1px solid var(--accent-hair);border-radius:2px;background:rgba(198,183,153,.06)}
.success .vmark{color:var(--accent);width:22px;height:24px;margin-bottom:.9rem}
.success p{color:var(--text-primary);font-size:1.0625rem}
form.sent{display:none} form.sent + .success{display:block}
@media (max-width:900px){.request .wrap{grid-template-columns:1fr}}

/* Footer */
footer{position:relative;z-index:1;background:var(--canvas-deep);border-top:1px solid var(--hair-soft);padding:clamp(2.5rem,5vw,4rem) 0 2rem;color:var(--text-secondary);font-size:.875rem}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2rem;align-items:start}
.foot-grid .wordmark{color:var(--text-primary);margin-bottom:1rem}
.foot-grid .label{margin-bottom:.9rem;display:block}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.foot-grid a{display:inline-flex;min-height:32px;align-items:center;transition:color var(--t-ui)}
@media (pointer:coarse){.foot-grid a{min-height:44px}}
.foot-grid a:hover{color:var(--text-primary)}
.foot-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid var(--hair-soft);color:var(--text-label);font-size:.75rem;letter-spacing:.06em}
.foot-bottom .pillars-line{letter-spacing:.18em;text-transform:uppercase}
@media (max-width:720px){.foot-grid{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ 7. Reveals and motion hygiene */
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity var(--t-ed) var(--ease),transform var(--t-ed) var(--ease)}
.js [data-reveal].in{opacity:1;transform:none}
.js .stagger>*{opacity:0;transform:translateY(14px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.js .stagger.in>*{opacity:1;transform:none}
.js .stagger.in>*:nth-child(2){transition-delay:.1s}.js .stagger.in>*:nth-child(3){transition-delay:.2s}.js .stagger.in>*:nth-child(4){transition-delay:.3s}
.js .stagger.in.settled>*:nth-child(n){transition-delay:0s}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .js [data-reveal],.js .stagger>*{opacity:1;transform:none}
  .divider .blade{transform:skewX(-15.97deg) scaleY(1)}
  .event-timeline__marker{opacity:1;transform:none}
  .paper .pull::before{width:140px}
  .desk{opacity:1}
  .room img{transform:none;scale:1.12}
  .room:hover img,.room:focus-within img{scale:1.12!important}
  /* The scenes present their resolved layout at once: no pinning, no travel, copy
     left and the V right, with the gold edge held at its settled strength. */
  /* The gallery keeps its active state and gold frame, but loses the motion: no
     width easing, no image scale, and the active panel's copy is simply present. */
  .access-gallery__item{transition:none}
  .access-gallery__item.is-active img{transform:none}
  .js .access-gallery__details{transition:none}
  .js .access-gallery__item.is-active .access-gallery__details{max-height:26rem}
  .access-gallery__rule{transition:none}
  /* Completed state: full gold line, every V active, all content readable, and
     Closing Day keeps the weight it carries when the timeline is scrubbed. */
  .event-timeline__fill{height:100%!important}
  .event-timeline__leading-light{opacity:0!important}
  .event-timeline__marker{opacity:1;color:var(--gold-light);background-image:var(--gold-metallic);
    filter:drop-shadow(0 0 4px rgba(245,234,207,.52)) drop-shadow(0 0 15px rgba(198,183,153,.28))}
  .event-timeline__body{opacity:1;transform:none}
  .event-timeline__date{opacity:1;color:var(--gold-light)}
  .event-timeline__entry--closing .event-timeline__body{border-color:rgba(198,183,153,.40)}
  .agenda-row{border-top-color:var(--hair)}

}
.pinned [data-reveal],.pinned .stagger>*{opacity:1!important;transform:none!important;transition:none!important}
.pinned .divider .blade{transform:skewX(-15.97deg) scaleY(1)!important}

.pinned .paper .pull::before{width:140px!important}
.pinned .access-gallery__item{transition:none!important}
.pinned .access-gallery__item.is-active img{transform:none!important}
.pinned .event-timeline__fill{height:100%!important}
.pinned .event-timeline__leading-light{opacity:0!important}
.pinned .event-timeline__marker{opacity:1!important;color:var(--gold-light)!important;background-image:var(--gold-metallic)!important;animation:none!important}
.pinned .event-timeline__body{opacity:1!important;transform:none!important}
.pinned .event-timeline__date{opacity:1!important;color:var(--gold-light)!important}