/* ==========================================================================
   MAGIC BOX EVENT CAMPUS — Shared Design System (V1)
   Source of truth: Figma file 1L78PvvlnqBfvCR1pQvS4e, frame "Home REDESIGN" (180:2)
   This file is shared across every page. See index.html header comment for
   the nav + footer markup contract that all other pages must copy.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. FONT FACES
   --------------------------------------------------------------------------- */
@font-face{
  font-family:"Instrument Serif";
  src:url("../fonts/InstrumentSerif-Regular.woff2") format("woff2"),
      url("../fonts/InstrumentSerif-Regular.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Instrument Serif";
  src:url("../fonts/InstrumentSerif-Italic.woff2") format("woff2"),
      url("../fonts/InstrumentSerif-Italic.ttf") format("truetype");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Swiss721 Cn";
  src:url("../fonts/Swiss721Condensed.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"NeoGeo";
  src:url("../fonts/NeoGeo-Light.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"NeoGeo";
  src:url("../fonts/NeoGeo-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"NeoGeo";
  src:url("../fonts/NeoGeo-Medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"NeoGeo";
  src:url("../fonts/NeoGeo-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"NeoGeo";
  src:url("../fonts/NeoGeo-Black.woff2") format("woff2");
  font-weight:900; font-style:normal; font-display:swap;
}

/* ---------------------------------------------------------------------------
   2. COLOR / TYPE VARIABLES
   --------------------------------------------------------------------------- */
:root{
  --yellow:#FFB71B;
  --ink:#242A2F;
  --cream:#FFFAF0;
  --burgundy:#9A1E1B;
  --purple:#8F6686;
  --green:#697A66;

  /* the warm "grain" gradient used behind the hero + CTA panel + brand strip */
  --gradient-warm: linear-gradient(115deg, #8F6686 0%, #A9322E 34%, #C15940 56%, #DA973E 82%, #E39542 100%);

  --serif:"Instrument Serif","Times New Roman",serif;
  --cond:"Swiss721 Cn","NeoGeo","Arial Narrow",sans-serif;
  /* client (rev 2, Aug 6): Wayne flagged NeoGeo twice as not matching the
     decks ("looks bold", "o's unusually small") — the Brand Book label face
     is Swiss721 Condensed, so labels now lead with it. Bold weights render
     as synthetic bold until Juan supplies the bold cut. */
  --label:"Swiss721 Cn","NeoGeo","Arial Narrow",sans-serif;

  --container:1328px;
  --edge:56px;
}

/* ---------------------------------------------------------------------------
   3. RESET / BASE
   --------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--cond);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;cursor:pointer}

::selection{background:var(--yellow);color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* ---------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   --------------------------------------------------------------------------- */
.wrap{
  max-width:calc(var(--container) + (var(--edge) * 2));
  margin:0 auto;
  padding:0 var(--edge);
}
.section{padding-block:clamp(56px,8vw,120px)}

/* ---------------------------------------------------------------------------
   5. TYPE CLASSES
   --------------------------------------------------------------------------- */
.eyebrow{
  display:inline-block;
  font-family:var(--label);
  font-weight:700;
  font-size:11px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--burgundy);
}
.eyebrow--on-dark{color:var(--yellow)}
.eyebrow--on-light-ink{color:var(--burgundy)}

.serif{font-family:var(--serif);font-weight:400;font-style:normal;letter-spacing:-.01em}
.serif em,.serif i,.italic{font-style:italic}

.stat-strip{
  font-family:var(--cond);
  font-weight:600;
  font-size:10.5px;
  letter-spacing:.28em;
  text-transform:uppercase;
}

/* ---------------------------------------------------------------------------
   6. BUTTONS
   --------------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:44px;
  padding:0 30px;
  /* rounded rectangle, not a pill (Wayne, Aug 5 pass: "closer to the image
     below" -- matches the deck tiles' 8px). Height/padding/color untouched;
     every .btn variant (gold/ghost/ghost-ink/pill-light), the nav CTA, hero
     CTAs, and CTA-panel buttons all inherit this since none of them set
     their own border-radius. */
  border-radius:8px;
  font-family:var(--label);
  font-weight:700;
  font-size:11.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  white-space:nowrap;
  border:none;
  transition:transform .25s ease, box-shadow .25s ease, background-color .2s ease, color .2s ease;
}
.btn:hover{transform:translateY(-2px)}

.btn-gold{background:var(--yellow);color:var(--ink)}
.btn-gold:hover{box-shadow:0 14px 28px rgba(255,183,27,.35)}

.btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}

.btn-ghost-ink{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(36,42,47,.4)}
.btn-ghost-ink:hover{background:rgba(36,42,47,.06)}

.btn-pill-light{
  height:38px;
  padding:0 24px;
  background:rgba(255,255,255,.95);
  color:var(--ink);
}
.btn-pill-light:hover{box-shadow:0 10px 22px rgba(0,0,0,.18)}

/* nav CTA pops in brand yellow (site-wide shell) */
.site-nav .btn-pill-light{background:var(--yellow);color:var(--ink)}
.site-nav .btn-pill-light:hover{box-shadow:0 10px 22px rgba(255,183,27,.38)}

/* ---------------------------------------------------------------------------
   7. GRAIN / GRADIENT OVERLAY (hero, CTA panel border, brand ribbon)
   --------------------------------------------------------------------------- */
.grain{position:relative;overflow:hidden}
.grain::after{
  content:"";
  position:absolute;inset:0;
  opacity:.5;
  mix-blend-mode:overlay;
  pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:180px 180px;
}
.gradient-warm{background-image:var(--gradient-warm)}

/* ---------------------------------------------------------------------------
   8. NAV — shared across every page (see index.html comment for markup)
   --------------------------------------------------------------------------- */
.site-nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  height:80px;
  display:flex;
  align-items:center;
}
.site-nav .wrap{
  width:100%;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:24px;
}
.site-logo{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}
.site-logo img{display:block}
.site-logo .lg-mark{height:26px;width:auto}
.site-logo .lg-word{height:23px;width:auto}
/* header logo's real hit area is just the 15px-tall inline mark (.lg-inline
   below) sitting in an 80px/64px-tall bar -- invisible padding + a matching
   negative margin grows the tap target toward 44px with zero visual change */
.site-nav .site-logo{padding:24px 8px;margin:-24px -8px}
@media (max-width:480px){
  .site-nav .site-logo{padding:20px 8px;margin:-20px -8px}
}

.nav-links{display:flex;align-items:center;justify-content:center;gap:38px}
.nav-links a{
  font-family:var(--label);
  font-weight:600;
  font-size:11.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.92);
  transition:opacity .2s ease;
}
.nav-links a:hover{opacity:.6}

.site-nav .btn{flex-shrink:0;justify-self:end}

/* Tiny phones (<=360px): the widest button label on the site
   ("Download Experiential Deck") plus the fixed 30px side padding overshoots a
   320px viewport by ~1.5px and creates a horizontal scrollbar. Tighten the side
   padding only at this size; height, colour and type are untouched. */
@media (max-width:360px){
  .btn{padding:0 clamp(14px,5vw,30px);max-width:100%}
}

@media (max-width:900px){
  .nav-links{display:none}
  .site-nav .wrap{grid-template-columns:auto 1fr auto}
}
@media (max-width:480px){
  .site-nav{height:64px}
  .site-logo .lg-mark{height:20px}
  .site-logo .lg-word{height:18px}
  .site-nav .btn{height:36px;padding:0 16px;font-size:10px}
}

/* ---------------------------------------------------------------------------
   9. FOOTER — shared across every page (see index.html comment for markup)
   --------------------------------------------------------------------------- */
.site-footer{
  background:var(--ink);
  color:rgba(255,250,240,.7);
  border-top:1px solid rgba(255,250,240,.12);
  padding:96px 0 0;
}
.site-footer .foot-top{
  display:grid;
  grid-template-columns:minmax(220px,1.4fr) repeat(4,1fr);
  gap:24px;
  padding-bottom:48px;
}
.site-footer .foot-brand .site-logo .lg-mark{height:28px}
/* the brand column was a lone logo above four rows of empty dark, and the
   grid's fifth track sat vacant after the Follow column was removed. The
   column now carries the booking CTA, and Spotlights fills the empty track,
   so the footer ends flush instead of trailing off. */
.foot-planning{
  font-family:var(--serif);
  font-size:22px;
  line-height:1.25;
  color:var(--cream);
  margin:26px 0 18px;
  max-width:16ch;
}
.foot-planning em{font-style:italic;color:var(--yellow)}
.foot-book{align-self:flex-start}
.site-footer .foot-brand{display:flex;flex-direction:column;align-items:flex-start}
.site-footer .foot-brand .site-logo .lg-word{height:26px}

.foot-col h3,
.foot-col h4{
  font-family:var(--label);
  font-weight:700;
  font-size:10px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--yellow);
  margin-bottom:36px;
}
.foot-col ul{display:flex;flex-direction:column;gap:11px}
.foot-col a{
  font-family:var(--cond);
  font-size:13px;
  color:rgba(255,250,240,.7);
  transition:color .2s ease;
}
.foot-col a:hover{color:var(--cream)}
.foot-col address,
.foot-col p{
  font-family:var(--cond);
  font-size:13px;
  line-height:2;
  /* .45 measured 4.07:1 on --ink, under the 4.5:1 AA floor for body text;
     .55 lands at 5.27:1 and reads almost identically */
  color:rgba(255,250,240,.55);
  max-width:16ch;
}

.foot-bottom{
  border-top:1px solid rgba(255,250,240,.14);
  padding:24px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.foot-bottom .tagline{
  font-family:var(--serif);
  font-style:italic;
  font-size:13px;
  color:rgba(255,250,240,.55);
}
.foot-bottom .stat-strip{color:rgba(255,255,255,.88)}

/* ≤900px the footer is fully redesigned — one canonical block in section 19
   (mobile legibility + touch floor), nothing here so the two never fight */
@media (max-width:480px){
  .foot-bottom{flex-direction:column;align-items:flex-start}
}

/* ---------------------------------------------------------------------------
   10. LOGO MARQUEE — CSS-only, pauses on prefers-reduced-motion
   --------------------------------------------------------------------------- */
.marquee{overflow:hidden;width:100%}
.marquee-track{
  display:flex;
  align-items:center;
  width:max-content;
  gap:0;
  animation:marquee-left 46s linear infinite;
}
.marquee-track.marquee-track--reverse{animation-name:marquee-right}
.marquee-row + .marquee-row{margin-top:0}
.marquee-track img{
  height:40px;
  width:auto;
  margin:0 52px;
  flex-shrink:0;
  opacity:.9;
  object-fit:contain;
}
@keyframes marquee-left{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@keyframes marquee-right{
  from{transform:translateX(-50%)}
  to{transform:translateX(0)}
}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation-play-state:paused}
}

/* ---------------------------------------------------------------------------
   11. GLOBAL RESPONSIVE HELPERS
   --------------------------------------------------------------------------- */
@media (max-width:900px){
  :root{--edge:32px}
}
@media (max-width:480px){
  :root{--edge:20px}
}

/* ---------------------------------------------------------------------------
   12. v1.5 REFINEMENT UTILITIES (gated: .js pages only — currently the home
   page. Other pages keep their original behavior until they are refined.)
   --------------------------------------------------------------------------- */
.js .site-nav{
  transition:background .35s ease, box-shadow .35s ease, height .35s ease;
}
.js .site-nav.scrolled{
  background:rgba(36,42,47,.86);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(255,250,240,.08);
  height:64px;
}
.site-logo .lg-inline{height:15px;width:auto;display:block}

/* nav dropdowns (CSS-driven, keyboard accessible via :focus-within) */
.nav-item{position:relative;display:flex;align-items:center}
.nav-item > a{display:inline-flex;align-items:center;gap:6px}
.nav-item .chev{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7}
.nav-drop{
  position:absolute;top:calc(100% + 14px);left:-14px;
  min-width:212px;
  background:var(--cream);
  border-radius:14px;
  padding:8px;
  box-shadow:0 18px 44px rgba(36,42,47,.24);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.nav-item:hover .nav-drop,
.nav-item:focus-within .nav-drop,
.nav-item.is-open .nav-drop{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .22s ease, transform .22s ease;
}
.nav-drop::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-drop a{
  display:block;
  padding:10px 14px;
  border-radius:9px;
  font-family:var(--label);
  font-weight:600;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
}
.nav-drop a:hover{background:rgba(36,42,47,.06);color:var(--burgundy);opacity:1}

/* scroll reveal */
.js .rv{
  opacity:0;
  transform:translateY(30px) scale(.99);
  filter:blur(4px);
  transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1),filter .9s cubic-bezier(.2,.6,.2,1);
}
.js .rv.in{opacity:1;transform:none;filter:none}
.js .rv-d1{transition-delay:.08s}
.js .rv-d2{transition-delay:.16s}
.js .rv-d3{transition-delay:.24s}

/* directional reveals (checkerboard rows slide in from their own side) */
.js .rv.rv-left{transform:translateX(-56px) translateY(8px)}
.js .rv.rv-right{transform:translateX(56px) translateY(8px)}
.js .rv.rv-left.in,.js .rv.rv-right.in{transform:none}
/* On a phone those 56px side offsets stick out past the viewport while the row
   is still waiting to reveal, widening the document and producing a horizontal
   scrollbar. There is no room for a sideways entrance at this width anyway, so
   the rows rise vertically instead. */
@media (max-width:900px){
  .js .rv.rv-left,.js .rv.rv-right{transform:translateY(30px) scale(.99)}
  .js .rv.rv-left.in,.js .rv.rv-right.in{transform:none}
}

/* zoom-settle for plans and media cards */
.js .rv.rv-zoom{transform:scale(.93);filter:blur(7px)}
.js .rv.rv-zoom.in{transform:none;filter:none}

/* child cascade: the container passes .in through, children stagger in.
   Container itself never hides (so frames/borders stay stable). */
.js .rv.rv-kids{opacity:1;transform:none;filter:none}
.js .rv-kids > *{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1);
}
.js .rv-kids.in > *{opacity:1;transform:none}
.js .rv-kids > *:nth-child(1){transition-delay:.05s}
.js .rv-kids > *:nth-child(2){transition-delay:.13s}
.js .rv-kids > *:nth-child(3){transition-delay:.21s}
.js .rv-kids > *:nth-child(4){transition-delay:.29s}
.js .rv-kids > *:nth-child(5){transition-delay:.37s}
.js .rv-kids > *:nth-child(6){transition-delay:.45s}
.js .rv-kids > *:nth-child(7){transition-delay:.53s}
.js .rv-kids > *:nth-child(8){transition-delay:.61s}
.js .rv-kids > *:nth-child(9){transition-delay:.69s}

/* slow settle for full-bleed section backgrounds (ken burns landing) */
.js .rv.rv-bg{opacity:1;transform:none;filter:none}
.js .rv-bg img.bg{transform:scale(1.07);transition:transform 1.6s cubic-bezier(.2,.6,.2,1)}
.js .rv-bg.in img.bg{transform:scale(1)}

@media (prefers-reduced-motion: reduce){
  .js .rv,.js .rv-kids > *,.js .rv-bg img.bg{opacity:1;transform:none;filter:none;transition:none}
}

/* dark tight logo marquee (rows travel opposite directions) */
.marquee-dark{background:var(--ink);padding:44px 0 48px}
.marquee-dark .marquee-kicker{
  text-align:center;
  font-family:var(--label);font-weight:700;font-size:10.5px;letter-spacing:.26em;
  text-transform:uppercase;color:rgba(255,250,240,.55);
  margin-bottom:30px;
}
.marquee-dark .marquee{overflow:hidden}
.marquee-dark .marquee-track{
  display:inline-flex;align-items:center;gap:64px;
  padding-right:64px;
  white-space:nowrap;
  animation:scrollX 46s linear infinite;
  will-change:transform;
}
.marquee-dark .marquee-track--reverse{animation-direction:reverse}
.marquee-dark .marquee-row + .marquee-row{margin-top:26px}
.marquee-dark img{
  height:30px;width:auto;
  filter:brightness(0) invert(1);
  opacity:.9;
}
@keyframes scrollX{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .marquee-dark .marquee-track{animation:none}
}

/* ==========================================================================
   ACCENT-WORD COLOR SYSTEM (handbook rule)
   Headline accent words: BURGUNDY on light backgrounds (default),
   YELLOW on dark sections/heroes. Stat/SF numbers use burgundy (set locally).
   Yellow on cream is unreadable, so the color follows the background.
   ========================================================================== */
h1 em, h2 em, h3 em{ font-style:italic; color:var(--burgundy); }
.hero em, .produce em, .floorplan em, .outdoor-plan em, .campus em, .campus .accent,
.vp-specs-sec em, .cs-hero em, .svc-hero em, .shosoft em, .cg-hero em, .fd-hero em,
.fd-usecase em, .v-hero em, .find-us-copy em, .contact-find-us em, .section-dark em,
.marquee-dark em, .dark-strip em, .spot-hero em{ color:var(--yellow); }

/* ---------------------------------------------------------------------------
   14. SHARED PAGE BEHAVIOUR — mobile nav, active nav state, word-rise
   Every selector here depends on markup or classes that js/site.js creates,
   so this block is completely inert on pages that don't load it.
   --------------------------------------------------------------------------- */

/* ---- current-page indicator ----
   Pages already hand-author .is-active, but the colour was only defined in
   company-group.css and spotlights-group.css, so the state was invisible on
   the three services-group pages. Defining it here covers every page. */
.nav-links a.is-active{ color:var(--yellow); opacity:1; }
.nav-links a.is-active:hover{ opacity:.75; }

/* ---- the hamburger (only exists once js builds it) ---- */
.nav-toggle{
  display:none;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  background:transparent; border:0; padding:0; margin:0 0 0 4px;
  cursor:pointer; color:var(--cream);
  justify-self:end; grid-column:3;
}
.nav-toggle-box{ position:relative; display:block; width:22px; height:14px; }
.nav-toggle-box i{
  position:absolute; left:0; width:100%; height:1.5px;
  background:currentColor; border-radius:2px;
  transition:transform .34s cubic-bezier(.2,.7,.3,1), opacity .2s ease;
}
.nav-toggle-box i:nth-child(1){ top:0; }
.nav-toggle-box i:nth-child(2){ bottom:0; }
.nav-toggle.is-open .nav-toggle-box i:nth-child(1){ transform:translateY(6.25px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-box i:nth-child(2){ transform:translateY(-6.25px) rotate(-45deg); }

/* ---- the drawer ---- */
.nav-drawer{
  position:fixed; inset:0; z-index:99;
  background:rgba(20,24,28,.72);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  opacity:0; transition:opacity .34s ease;
  display:flex; align-items:flex-start; justify-content:stretch;
}
.nav-drawer.is-open{ opacity:1; }
/* The drawer is built with hidden=true, but this stylesheet's own display:flex
   beats the UA [hidden] rule, leaving an invisible full-viewport click-catcher
   over every page below 900px. A real tap on the venue plan navigated away. */
.nav-drawer:not(.is-open){ pointer-events:none; }
.nav-drawer-inner{
  width:100%;
  margin-top:80px;
  padding:34px var(--edge) 44px;
  background:var(--ink);
  border-radius:0 0 26px 26px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7);
  transform:translateY(-14px);
  opacity:0;
  transition:transform .42s cubic-bezier(.16,.84,.31,1), opacity .34s ease;
  /* short phones + an expanded accordion group must never push the CTA out
     of reach — the panel scrolls inside itself before that happens */
  max-height:calc(100dvh - 80px);
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.nav-drawer.is-open .nav-drawer-inner{ transform:none; opacity:1; }
.nav-drawer-links{ display:flex; flex-direction:column; }
.nav-drawer-links .nd-link{
  position:relative;
  font-family:var(--serif);
  font-size:clamp(30px,8.4vw,42px);
  line-height:1.06;
  color:var(--cream);
  padding:16px 0 15px;
  border-bottom:1px solid rgba(255,250,240,.10);
  transition:color .24s ease, padding-left .24s ease;
}
/* the descriptor: the site's condensed label voice, so the menu reads as
   part of the same editorial system as every section eyebrow */
.nd-note{
  display:block;
  margin-top:7px;
  font-family:var(--cond);
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,250,240,.42);
  transition:color .24s ease;
}
.nav-drawer-links .nd-link:hover,
.nav-drawer-links .nd-link:focus-visible{ color:var(--yellow); padding-left:8px; }
.nav-drawer-links .nd-link.is-active{ color:var(--yellow); }
/* the current section gets a yellow tick in the margin, the same
   registration mark the floor legend and chapter rules use */
.nav-drawer-links .nd-link.is-active::before,
.nd-group.is-here > .nd-grouphead::before{
  content:'';
  position:absolute; left:-14px; top:26px;
  width:6px; height:6px; border-radius:50%;
  background:var(--yellow);
}
.nd-group.is-here > .nd-grouphead{ color:var(--yellow); }
/* rows cascade in behind the panel instead of arriving as one slab */
.nav-drawer.is-open .nav-drawer-links > *{
  animation:ndRowIn .5s cubic-bezier(.16,.84,.31,1) backwards;
  animation-delay:calc(120ms + var(--i, 0) * 55ms);
}
@keyframes ndRowIn{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}
.nav-drawer.is-open .nd-cta{
  animation:ndRowIn .5s cubic-bezier(.16,.84,.31,1) .42s backwards;
}
/* the closing address line, same sign-off as the CTA card and footer */
.nd-foot{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:22px; padding-top:16px;
  border-top:1px solid rgba(255,183,27,.34);
  font-family:var(--cond);
  font-size:12px; letter-spacing:.06em;
  color:rgba(255,250,240,.45);
}
.nd-foot span{ color:rgba(255,250,240,.6); }
@media (prefers-reduced-motion:reduce){
  .nav-drawer.is-open .nav-drawer-links > *,
  .nav-drawer.is-open .nd-cta{ animation:none; }
}
/* ---- accordion groups: the WHOLE row toggles (client, Aug 6) — the group's
   landing page lives in its sub list (All Floors / Overview / All Spotlights) ---- */
.nav-drawer-links .nd-group{
  position:relative;
  border-bottom:1px solid rgba(255,250,240,.10);
}
.nav-drawer-links .nd-group .nd-link{
  display:block;
  border-bottom:0;
}
.nav-drawer-links .nd-group .nd-grouphead{
  appearance:none; -webkit-appearance:none;
  background:transparent; border-top:0; border-inline:0; margin:0;
  width:100%; text-align:left; cursor:pointer;
  /* three classes on purpose: the .nd-group .nd-link rule sets display:block
     and would flatten the flex row (the chevron rendered as a stray bar) */
  display:flex; align-items:center; justify-content:space-between;
  gap:18px;
}
/* name over descriptor in one column, chevron opposite */
.nd-labelwrap{ display:block; min-width:0; }
.nd-name{ display:block; }
.nd-chev{
  flex-shrink:0;
  width:11px; height:11px; margin-right:6px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  opacity:.55;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), opacity .24s ease;
}
.nd-group.is-open .nd-grouphead{ color:var(--yellow); }
.nd-group.is-open .nd-chev{ transform:rotate(225deg) translate(-2px,-2px); opacity:1; }
.nd-toggle{
  position:absolute; top:6px; right:-10px;
  width:52px; height:52px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; padding:0;
  color:rgba(255,250,240,.6);
  cursor:pointer;
}
.nd-toggle::before{
  content:'';
  width:10px; height:10px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.nd-toggle:hover, .nd-toggle:focus-visible{ color:var(--yellow); }
.nd-group.is-open .nd-toggle{ color:var(--yellow); }
.nd-group.is-open .nd-toggle::before{ transform:rotate(225deg) translate(-2px,-2px); }
.nav-drawer-links .nd-sub{
  display:flex; flex-direction:column;
  padding:2px 0 14px 16px;
  border-left:1px solid rgba(255,183,27,.34);
  margin:0 0 12px 2px;
}
/* the base display:flex would beat the hidden attribute the accordion sets */
.nav-drawer-links .nd-sub[hidden]{ display:none; }
.nd-group.is-open .nd-sub{ animation:ndSubIn .32s cubic-bezier(.16,.84,.31,1); }
@keyframes ndSubIn{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:none; }
}
.nav-drawer-links .nd-sublink{
  font-family:var(--label); font-weight:600;
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,250,240,.72);
  padding:13px 0;
  transition:color .24s ease, padding-left .24s ease;
}
.nav-drawer-links .nd-sublink:hover,
.nav-drawer-links .nd-sublink:focus-visible{ color:var(--yellow); padding-left:6px; }
.nav-drawer .nd-cta{ margin-top:26px; width:100%; justify-content:center; }
html.nav-open{ overflow:hidden; }

/* the light-nav pages (news, contact) put a cream burger on a cream bar —
   invisible, and with the desktop links hidden that left no way to open the
   menu at all. Ink while the bar is light; cream once it scrolls dark. */
.site-nav--on-light .nav-toggle{ color:var(--ink); }
.site-nav--on-light.scrolled .nav-toggle{ color:var(--cream); }

@media (max-width:900px){
  .nav-toggle{ display:inline-flex; }
  /* the booking pill and the burger would crowd each other on a phone —
     the drawer carries the CTA instead */
  .site-nav .btn{ display:none; }
}
@media (min-width:901px){
  .nav-drawer{ display:none !important; }
}
@media (max-width:480px){
  .nav-drawer-inner{ margin-top:64px; padding:28px 22px 38px; }
}
@media (prefers-reduced-motion:reduce){
  .nav-drawer, .nav-drawer-inner, .nav-toggle-box i{ transition:none; }
}

/* ---- headline word-rise (matches the venue/home treatment) ----
   .has-words is added by js/site.js only, so untouched pages are unaffected. */
.js .has-words .w{
  display:inline-block; overflow:hidden; vertical-align:bottom;
  /* horizontal room for italic overhang (see venue-redesign.css note) */
  padding:0 .12em .16em .06em; margin:0 -.12em -.16em -.06em;
}
.js .has-words .w > span{
  display:inline-block;
  transform:translateY(115%) rotate(3deg);
  filter:blur(5px);
  opacity:.001;
}
.js .has-words.in .w > span{
  animation:mbRise .9s cubic-bezier(.16,.84,.31,1) forwards;
}
@keyframes mbRise{
  to{ transform:none; filter:none; opacity:1; }
}
/* stagger each word off its index — set inline by nothing, derived by nth-child
   so it needs no JS bookkeeping */
.js .has-words .w:nth-child(1) > span{ animation-delay:0s }
.js .has-words .w:nth-child(2) > span{ animation-delay:.05s }
.js .has-words .w:nth-child(3) > span{ animation-delay:.10s }
.js .has-words .w:nth-child(4) > span{ animation-delay:.15s }
.js .has-words .w:nth-child(5) > span{ animation-delay:.20s }
.js .has-words .w:nth-child(6) > span{ animation-delay:.25s }
.js .has-words .w:nth-child(7) > span{ animation-delay:.30s }
.js .has-words .w:nth-child(n+8) > span{ animation-delay:.35s }
@media (prefers-reduced-motion:reduce){
  .js .has-words .w > span{ transform:none; filter:none; opacity:1; animation:none; }
}

/* visually-hidden heading: keeps the document outline complete for screen
   readers and SEO where the design intentionally shows no section title */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

/* ---- skip-to-content link ----
   Sits off-screen until it receives keyboard focus (first Tab stop on every
   page), then drops in as an on-brand pill above the fixed header so a
   keyboard/screen-reader user can jump straight past the nav to <main>. */
.skip-link{
  position:fixed;
  top:-100px; left:16px;
  z-index:1000;
  background:var(--yellow);
  color:var(--ink);
  font-family:var(--label);
  font-weight:700;
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:14px 22px;
  border-radius:8px;
  transition:top .2s ease;
}
.skip-link:focus{ top:16px; }

/* ---------------------------------------------------------------------------
   15. SCROLL CUE — the little mouse pill at the foot of full-screen heroes
   (first built for the Spotlights hero, now shared by every hero that fills
   the viewport: services trio + the four case studies)
   --------------------------------------------------------------------------- */
.scroll-cue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  width:22px;height:34px;
  border:1.5px solid rgba(255,250,240,.4);border-radius:12px;
  pointer-events:none;
}
.scroll-cue span{
  position:absolute;left:50%;top:6px;width:3px;height:7px;margin-left:-1.5px;
  border-radius:2px;background:var(--yellow);
  animation:mbCue 1.8s ease-in-out infinite;
}
@keyframes mbCue{
  0%,100%{transform:translateY(0);opacity:1}
  70%{transform:translateY(12px);opacity:0}
}
@media (prefers-reduced-motion:reduce){ .scroll-cue{display:none} }
/* a mouse-shaped affordance means nothing on a phone, and it floats over the
   hero CTAs at small heights — touch widths drop it */
@media (max-width:900px){ .scroll-cue{display:none} }

/* ---------------------------------------------------------------------------
   16. CTA PANELS — skinned to the Venue Deck's closing "Let's Make Magic"
   slide (p.31), COMPACT cut (Wayne, Aug 5 pass: the panel is on almost
   every page and shouldn't read as a full-page stop). Same slide language
   at roughly half the height: thin warm gradient frame, cream card,
   single-line YELLOW headline beside the contact column, GREEN serif
   message under a yellow hairline, tightened deck chips and foot rows.
   `body`-prefixed so these outrank each page group's own definitions.
   --------------------------------------------------------------------------- */
body .cta-outer, body .v-cta-outer, body .cs-cta-outer, body .magic-cta{
  border-radius:clamp(18px,2.2vw,28px);
  padding:clamp(8px,1vw,13px);
  background-image:var(--gradient-warm);
  /* client (Aug 6): the card never touches the viewport edges — below the
     container width it keeps the site's side gutter on every page */
  max-width:min(var(--container), calc(100% - 2 * var(--edge)));
  margin-inline:auto;
}
body .cta-inner, body .v-cta-inner, body .cs-cta-inner, body .magic-cta-inner{
  border-radius:clamp(12px,1.6vw,20px);
  padding:clamp(30px,3.4vw,50px) clamp(26px,4vw,62px);
}
@media (min-width:901px){
  body .cta-inner, body .v-cta-inner, body .cs-cta-inner, body .magic-cta-inner{
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:clamp(40px,5.5vw,88px);
  }
}
body .cta-headline, body .v-cta-headline, body .cs-cta-headline, body .magic-cta-words{
  color:var(--yellow);
  /* client (Aug 6): one word per line (the <br>s in markup), and big enough
     to own its column instead of floating in empty space */
  font-size:clamp(56px,6.4vw,104px);
  line-height:.98;
  letter-spacing:-.015em;
  max-width:none;
  white-space:normal;   /* company-group sets nowrap; the panel wraps at the <br>s */
}
/* the company-group variant used one block span per word; the markup is now
   a plain "Let's Make Magic" string, so it just needs to wrap like the rest */
body .magic-cta-words{display:block}
body .cta-line, body .cta-right .cta-line, body .v-cta-line, body .v-cta-right .v-cta-line, body .cs-cta-line, body .cs-cta-right .cs-cta-line, body .magic-cta-right p.msg{
  font-family:var(--serif);
  font-size:clamp(17px,1.6vw,21px);
  line-height:1.35;
  color:var(--green);
  border-top:1px solid rgba(255,183,27,.8);
  border-bottom:0;
  padding-top:14px;
  padding-bottom:0;
  margin-top:12px;
  margin-bottom:14px;
  max-width:44ch;
}
/* right-column rhythm, tightened across every page variant */
body .cta-right .lg-inline-dark, body .v-cta-right .lg-inline-dark, body .cs-cta-right .lg-inline-dark, body .magic-cta-right .lg-inline-dark{margin-bottom:14px}
body .cta-right .cta-decks-label, body .v-cta-right .cta-decks-label, body .cs-cta-right .cta-decks-label, body .magic-cta-right .cta-decks-label{font-size:17px;margin-top:10px}
body .deck-row, body .v-deck-row{margin-top:12px;gap:12px}
body .deck-btn, body .v-deck-btn{height:52px;border-radius:9px}
body .deck-btn span, body .v-deck-btn span{font-size:16px}
/* ---- canonical CTA card (client, Aug 6: every page carries the SAME card
   as the homepage — lockup, contact line, deck downloads, foot). The base
   look for each piece lives here so pages whose group sheet never had deck
   styles (spotlights group, company group) render the row identically. ---- */
body .cta-right .lg-inline-dark, body .v-cta-right .lg-inline-dark, body .cs-cta-right .lg-inline-dark, body .magic-cta-right .lg-inline-dark{
  height:15px;width:auto;display:block;
}
body .cta-right .cta-decks-label, body .v-cta-right .cta-decks-label, body .cs-cta-right .cta-decks-label, body .magic-cta-right .cta-decks-label{
  display:block;font-family:var(--serif);color:var(--ink);
}
body .deck-row, body .v-deck-row{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
}
body .deck-btn, body .v-deck-btn{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s cubic-bezier(.2,.6,.2,1);
}
/* the reveal system's `.js .rv-kids.in > *{transform:none}` (0,3,0) outguns
   a (0,2,1) hover — the extra selectors below out-rank it so BUTTON chips
   lift exactly like the link chips inside revealed rows */
body .deck-btn:hover, body .v-deck-btn:hover,
.js .rv-kids > .deck-btn:hover, .js .rv-kids > .v-deck-btn:hover{transform:translateY(-2px)}
/* no default UA focus ring on pointer clicks — keyboard focus gets the brand ring */
body .deck-btn:focus, body .v-deck-btn:focus{outline:none}
body .deck-btn:focus-visible, body .v-deck-btn:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
body .deck-btn img, body .v-deck-btn img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
}
body .deck-btn span, body .v-deck-btn span{
  position:relative;z-index:2;font-family:var(--serif);color:#fbfdff;
}
/* below ~640px four-across chips squeeze to ~90px each and the serif labels
   barely fit — a two-by-two of taller chips reads and taps far better */
@media (max-width:640px){
  body .deck-row, body .v-deck-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  body .deck-btn, body .v-deck-btn{height:64px}
}
/* "Coming soon" deck chip: shared dimmed state for a deck-row button whose PDF
   doesn't exist yet (contact.html's "On Request" pattern is the standard;
   experiential.html's markup already used this exact class). Lives here, not
   in a page-group file, so index.html -- which only loads site.css -- gets it
   too once its markup adopts the class. Values match services-group.css's
   existing .deck-btn.is-soon 1:1 so nothing shifts on the pages that already
   had it. */
body .deck-btn.is-soon{cursor:default;opacity:.55}
/* The badge used to be an absolutely-positioned overlay sized for the old 80px
   button. At the standardised 52px height it landed on top of the centred serif
   label. Stacking both as flex items keeps the dimmed "not yet available" read
   without either element covering the other. */
body .deck-btn.is-soon{flex-direction:column;gap:3px}
body .deck-btn.is-soon::before{
  content:"Coming soon";
  position:relative;top:auto;right:auto;z-index:2;order:-1;
  font-family:var(--label);font-weight:700;font-size:8px;letter-spacing:.1em;
  text-transform:uppercase;color:#fffaf0;
  background:rgba(24,8,18,.55);border-radius:100px;padding:3px 7px;line-height:1;
}
body .deck-btn.is-soon span{font-size:14px;line-height:1.1}
body .cta-buttons, body .v-cta-buttons, body .cs-cta-buttons, body .magic-cta-buttons{margin-top:20px;gap:22px}
/* client (rev 2, Aug 6): on desktop the panel's Book Your Event / Explore The
   Venue repeat the nav CTA and read as clutter next to the deck downloads —
   phones keep them because the nav collapses to the drawer there */
@media (min-width:901px){
  body .cta-buttons, body .v-cta-buttons, body .cs-cta-buttons, body .magic-cta-buttons{display:none}
}
body .mbcta-foot{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:20px;flex-wrap:wrap;
  margin-top:18px;
  padding-top:12px;
  border-top:1px solid rgba(255,183,27,.8);
  font-family:var(--serif);
  font-size:clamp(12px,1vw,14px);
  color:var(--ink);
}
/* small-caps address strips the variants used are replaced by the foot */
body .cs-cta-contact .cc-label{color:var(--burgundy)}
@media (max-width:900px){
  /* client (Aug 6): the mobile card read as a cramped stack. It now has a
     proper rhythm — the three-line headline sits on its own with a hairline
     under it, then the lockup, message, decks, and actions each get room. */
  body .cta-inner, body .v-cta-inner, body .cs-cta-inner, body .magic-cta-inner{
    padding:40px 26px 34px;
    /* the two-column grid's 56px gap became a dead band in the single-column
       stack — the headline's own rule and margin carry the spacing now */
    gap:0;
  }
  /* the one-word-per-line tower is a desktop composition — in the single
     column it owned half the card as empty right side. On phones the
     headline flows as a natural two-line lockup instead. */
  body .cta-headline br, body .v-cta-headline br, body .cs-cta-headline br, body .magic-cta-words br{display:none}
  body .cta-headline, body .v-cta-headline, body .cs-cta-headline, body .magic-cta-words{
    max-width:none;
    font-size:clamp(44px,11.5vw,64px);
    line-height:1.04;
    margin-bottom:26px;
    padding-bottom:24px;
    border-bottom:1px solid rgba(255,183,27,.7);
  }
  /* the lockup is the second beat, not a crowded neighbour of the headline */
  body .cta-right .lg-inline-dark, body .v-cta-right .lg-inline-dark,
  body .cs-cta-right .lg-inline-dark, body .magic-cta-right .lg-inline-dark{
    height:17px; margin-bottom:18px;
  }
  body .cta-line, body .v-cta-line, body .cs-cta-line, body .magic-cta-right p.msg{
    border-top:0; padding-top:0; margin-top:0; margin-bottom:26px;
    font-size:17px; line-height:1.45;
  }
  body .cta-decks-label, body .v-cta-decks-label{ margin-top:0; margin-bottom:4px; }
  body .deck-row, body .v-deck-row{ gap:10px; margin-top:14px; }
  body .deck-btn, body .v-deck-btn{ height:58px; }
  /* actions stack full-width so they read as real buttons, not chips */
  body .cta-buttons, body .v-cta-buttons, body .cs-cta-buttons, body .magic-cta-buttons{
    display:flex; flex-direction:column; gap:12px; margin-top:26px;
  }
  body .cta-buttons .btn, body .v-cta-buttons .btn,
  body .cs-cta-buttons .btn, body .magic-cta-buttons .btn{ width:100%; }
  body .mbcta-foot{
    flex-direction:column; gap:4px; align-items:flex-start;
    margin-top:26px; padding-top:16px; font-size:12.5px;
  }
  /* CTA logo lockup: the gradient-border variant (venue/services/spotlights-
     group pages) hardcodes 25px/24px on the two logo images via an inline
     style attribute, which nothing but !important can beat; the magic-cta
     variant already runs smaller (19px/18px, company-group.css) but that
     still doesn't fit a 320px column. Below 900px, shrink both and let the
     lockup wrap to a stacked pair rather than clip or force a scrollbar --
     the fixed larger size above 900px (where there's room) is untouched. */
  body .cta-right .site-logo, body .v-cta-right .site-logo, body .cs-cta-right .site-logo, body .magic-cta-right .site-logo{
    min-width:0;
    flex-wrap:wrap;
    row-gap:4px;
  }
  body .cta-right .site-logo .lg-mark, body .v-cta-right .site-logo .lg-mark, body .cs-cta-right .site-logo .lg-mark, body .magic-cta-right .site-logo .lg-mark{
    height:clamp(11px,4vw,19px) !important;
    width:auto !important;
  }
  body .cta-right .site-logo .lg-word, body .v-cta-right .site-logo .lg-word, body .cs-cta-right .site-logo .lg-word, body .magic-cta-right .site-logo .lg-word{
    height:clamp(10px,3.8vw,18px) !important;
    width:auto !important;
  }
}


/* ---------------------------------------------------------------------------
   REMAINING TOUCH + LEGIBILITY PASS (Aug 5 refinement)
   Vertical padding on an INLINE link grows its hit box without changing line
   height, so these caption-style links become tappable with zero visual shift.
   --------------------------------------------------------------------------- */
.site-footer .site-logo,
.cs-cta-right .site-logo,
.magic-cta-right .site-logo,
.v-cta-right .site-logo{padding:14px 8px;margin:-14px -8px}
a.hero-deck-link,
a.dc-label,
a.req-link,
a.feat-link,
a.cta-explore,
.cs-legend a,
.fe-chip{padding-block:14px;margin-block:-14px}
/* the bare arrow links in the floor legend were a 14x19 target */
.cs-legend a{padding-inline:14px;margin-inline:-14px}
/* the negative-margin tap-target trick collapses the row gap when the chips
   WRAP (phone widths): rows visually overlapped. The chips are already tall
   enough targets there with plain padding. */
@media (max-width:900px){
  .fe-chip{padding-block:12px;margin-block:0}
  .fe-events{row-gap:10px}
}

/* Mixed-case labels that were rendering at 9.5-10.5px. The uppercase tracked
   label system stays as designed; these four are sentence-case and were simply
   below the legibility floor. */
.cs-hero-badge{font-size:11px}
.stat-label{font-size:11px}

/* ---------------------------------------------------------------------------
   17. DECK GATE — the gated download form (client rev 2, Aug 6 2026).
   Clicking any deck button drops this panel open directly beneath its row;
   submitting files the lead in the MagicBox CRM, which emails the deck.
   Rendered by js/deck-gate.js. The old "coming soon" deck state is retired
   (Juan is delivering the remaining documents), so every deck gates the
   same way.
   --------------------------------------------------------------------------- */
/* two of the deck chips are now real <button>s (no PDF exists to href) —
   neutralise the UA button chrome so they render exactly like their <a> twins */
button.deck-btn, button.v-deck-btn{
  appearance:none; -webkit-appearance:none;
  border:0; padding:0; margin:0;
  /* longhand on purpose: the home chips paint via background-IMAGE, which the
     background shorthand would wipe */
  background-color:transparent;
  font:inherit; color:inherit; cursor:pointer; text-align:inherit;
}
.dg-panel{
  /* grid-rows keeps the drop-down honest: the panel owns no height until
     opened, and the transition never needs a magic max-height */
  display:grid; grid-template-rows:0fr;
  width:100%; flex-basis:100%;
  transition:grid-template-rows .45s cubic-bezier(.2,.7,.25,1);
}
.dg-panel.is-open{ grid-template-rows:1fr; }
/* in the contact ledger the panel lands inside a 4-column grid */
.ledger .dg-panel{ grid-column:1 / -1; }
.dg-clip{ overflow:hidden; min-height:0; }
/* client (Aug 6 redesign): a fuller form — title row with a close X, the
   fields STACKED (first name on top, then last, then email), a single Send.
   The card animates in with a soft rise and can always be dismissed. */
/* the drop-under card speaks the CTA card's language (client, Aug 9): the
   brand-gradient frame around cream, centred in its section, blurring in
   the way the takeover does instead of the plain slide */
.dg-card{
  position:relative;
  margin:18px auto 0;
  background:linear-gradient(var(--cream),var(--cream)) padding-box,
             url('../assets/img/home/brand-gradient.jpg') center/cover border-box;
  border:3px solid transparent;
  border-radius:16px;
  padding:32px 40px 30px;
  max-width:960px;
  box-shadow:0 26px 60px -30px rgba(20,14,18,.42);
  opacity:0; transform:translateY(-8px) scale(.99); filter:blur(10px);
  transition:opacity .4s ease .05s, transform .5s cubic-bezier(.2,.7,.25,1) .05s, filter .4s ease .05s;
}
.dg-panel.is-open .dg-card{ opacity:1; transform:none; filter:blur(0); }
.dg-close{
  position:absolute; top:14px; right:14px;
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; padding:0; cursor:pointer;
  color:rgba(36,42,47,.5);
  transition:color .2s ease, transform .25s ease;
}
.dg-close:hover, .dg-close:focus-visible{ color:var(--burgundy); transform:rotate(90deg); }
.dg-close span{ position:relative; display:block; width:15px; height:15px; }
.dg-close span::before, .dg-close span::after{
  content:''; position:absolute; left:0; top:7px;
  width:15px; height:1.5px; background:currentColor; border-radius:2px;
}
.dg-close span::before{ transform:rotate(45deg); }
.dg-close span::after{ transform:rotate(-45deg); }
.dg-title{
  font-family:var(--serif); font-weight:400;
  font-size:26px; line-height:1.1; color:var(--ink);
  margin-bottom:5px;
  padding-right:40px;
}
.dg-title em{ font-style:italic; color:var(--burgundy); }
.dg-sub{
  font-family:var(--cond); font-size:13.5px; color:rgba(36,42,47,.62);
  margin-bottom:20px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(255,183,27,.7);
}
.dg-form{
  display:flex; flex-direction:column; gap:14px;
}
.dg-field label{
  display:block;
  font-family:var(--label); font-weight:700;
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(36,42,47,.55);
  margin-bottom:6px;
}
.dg-field input{
  width:100%; height:48px;
  padding:0 14px;
  background:#fff;
  border:1px solid rgba(36,42,47,.26);
  border-radius:8px;
  font-family:var(--cond); font-size:15px; color:var(--ink);
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.dg-field input:focus{
  border-color:var(--yellow);
  box-shadow:0 0 0 3px rgba(255,183,27,.22);
}
.dg-send{ height:48px; margin-top:4px; align-self:flex-start; padding-inline:44px; }
.dg-err{
  margin-top:12px;
  font-family:var(--cond); font-size:13px; color:var(--burgundy);
}
/* the display rules above would silently beat the `hidden` attribute */
.dg-form[hidden], .dg-done[hidden]{ display:none; }
/* sent: everything behind softens away and only the confirmation speaks,
   centred on the card, before the panel hands back to the CTA on its own */
.dg-sent .dg-body{
  filter:blur(12px);
  opacity:.28;
  pointer-events:none;
  transition:filter .45s ease, opacity .45s ease;
}
.dg-sent .dg-done{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px;
  animation:dg-done-in .6s cubic-bezier(.2,.7,.25,1) both;
}
.dg-sent .dg-done-title{ font-size:clamp(26px,3vw,34px); }
@keyframes dg-done-in{
  from{ opacity:0; transform:scale(.93); filter:blur(8px); }
  to{ opacity:1; transform:none; filter:blur(0); }
}
.dg-done{ padding:6px 0 2px; }
.dg-done-title{
  font-family:var(--serif); font-size:24px; color:var(--ink);
  margin-bottom:4px;
}
.dg-done-title::before{
  content:'✓'; color:var(--yellow); margin-right:10px;
}
.dg-done-sub{ font-family:var(--cond); font-size:13.5px; color:rgba(36,42,47,.66); }
/* deck switch while open (client, Aug 9: no sliding) — the body holds its
   place and simply blurs out, retitles, and blurs back in */
.dg-body{ transition:opacity .24s ease, filter .24s ease; }
.dg-body.dg-out{ opacity:0; filter:blur(8px); }
.dg-body.dg-enter{ opacity:0; filter:blur(8px); transition:none; }

/* ---- §17b. DESKTOP CTA TAKEOVER (client, Aug 9 rev 2) ----
   Clicking a deck chip dissolves the ENTIRE CTA card interior into the
   request form — a straight crossfade in place. Nothing shifts or slides
   beneath; the card keeps its exact size and frame. The form view carries
   its own deck switcher so the other decks stay one click away. */
@media (min-width:901px){
  body [class*="cta-inner"]:has(.dg-panel.dg-in-cta){ position:relative; overflow:hidden; }
  .dg-panel.dg-in-cta{
    display:block;
    position:absolute;
    inset:0;
    z-index:4;
    opacity:0;
    transform:scale(.986);
    filter:blur(14px);
    transition:opacity .5s ease, transform .65s cubic-bezier(.3,.8,.3,1), filter .5s ease;
    pointer-events:none;
  }
  .dg-panel.dg-in-cta.is-open{ opacity:1; transform:none; filter:blur(0); pointer-events:auto; }
  .dg-in-cta .dg-clip{ height:100%; overflow:visible; }
  .dg-in-cta .dg-card{
    height:100%;
    margin:0;
    max-width:none;
    border:0;
    border-radius:0;
    box-shadow:none;
    opacity:1; transform:none; filter:none;
    display:flex; flex-direction:column; justify-content:center;
    padding:36px clamp(40px,5vw,80px);
    overflow-y:auto;
  }
  /* the two-column form view is shared by the takeover AND the drop-under
     card (client, Aug 9: same design language everywhere) — the ask on the
     left, the form on the right */
  .dg-body{
    display:grid;
    grid-template-columns:minmax(280px,1fr) minmax(0,1.25fr);
    gap:24px clamp(44px,6vw,96px);
    align-items:center;
  }
  .dg-title{ font-size:clamp(30px,3vw,44px); }
  .dg-sub{ margin-bottom:22px; font-size:14.5px; }
  /* the form owns its column: roomy fields, a full-width send */
  .dg-form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px 14px;
  }
  .dg-field--wide{ grid-column:1 / -1; }
  .dg-send{ grid-column:1 / -1; justify-self:stretch; width:100%; height:52px; margin-top:0; }
  .dg-field input{ height:52px; }
}
/* the in-form deck switcher (built only for CTA panels with several decks):
   the chips are the CTA's own deck buttons in miniature — same brand-gradient
   covers, same serif labels; the chosen one holds a yellow ring while the
   rest wait desaturated. No label above; the row runs the full column with
   the chips sharing the line equally (client, Aug 9). */
.dg-decks{ display:flex; gap:10px; }
.dg-deck-tab{
  flex:1 1 0;
  min-width:0;
  font-family:var(--serif);
  font-size:15px;
  color:#fffaf0;
  background-color:transparent;   /* UA button reset, longhand on purpose */
  background-image:url('../assets/img/home/brand-gradient.jpg');
  background-size:cover;
  background-position:center;
  border:0;
  border-radius:9px;
  padding:12px 20px;
  cursor:pointer;
  filter:grayscale(.45) saturate(.45) brightness(.84);
  opacity:.75;
  transition:filter .25s ease, opacity .25s ease, transform .25s ease, box-shadow .25s ease;
}
.dg-decks .dg-deck-tab:nth-child(2){ background-position:20% 70%; }
.dg-decks .dg-deck-tab:nth-child(3){ background-position:80% 30%; }
.dg-decks .dg-deck-tab:nth-child(4){ background-position:65% 80%; }
.dg-deck-tab:hover{ filter:none; opacity:1; transform:translateY(-2px); }
.dg-deck-tab.is-on{
  filter:none; opacity:1; transform:none; cursor:default;
  box-shadow:0 0 0 2px var(--cream), 0 0 0 4px var(--yellow);
}
/* no UA click-focus ring on the switcher; keyboard focus keeps a brand ring */
.dg-deck-tab:focus{ outline:none; }
.dg-deck-tab:focus-visible{ outline:2px solid var(--yellow); outline-offset:3px; }
/* ---- §17c. MOBILE CTA TAKEOVER (client, Aug 9: same treatment as desktop)
   Phones get the identical crossfade-into-the-form card takeover, laid out
   as a single column with a 2x2 deck switcher. Non-CTA deck buttons (hero
   rows, the contact ledger) keep the drop-under panel. ---- */
@media (max-width:900px){
  body [class*="cta-inner"]:has(.dg-panel.dg-in-cta){ position:relative; overflow:hidden; }
  .dg-panel.dg-in-cta{
    display:block;
    position:absolute;
    inset:0;
    z-index:4;
    opacity:0;
    transform:scale(.986);
    filter:blur(14px);
    transition:opacity .5s ease, transform .65s cubic-bezier(.3,.8,.3,1), filter .5s ease;
    pointer-events:none;
  }
  .dg-panel.dg-in-cta.is-open{ opacity:1; transform:none; filter:blur(0); pointer-events:auto; }
  .dg-in-cta .dg-clip{ height:100%; overflow:visible; }
  .dg-in-cta .dg-card{
    height:100%;
    margin:0;
    max-width:none;
    border:0;
    border-radius:0;
    box-shadow:none;
    opacity:1; transform:none; filter:none;
    display:flex; flex-direction:column; justify-content:center;
    padding:30px 22px;
    overflow-y:auto;
  }
  .dg-in-cta .dg-title{ font-size:clamp(26px,7vw,32px); }
  .dg-in-cta .dg-sub{ margin-bottom:16px; }
  .dg-in-cta .dg-decks{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
  .dg-in-cta .dg-deck-tab{ padding:13px 10px; font-size:14.5px; }
  .dg-in-cta .dg-head{ margin-bottom:22px; }
  .dg-in-cta .dg-field input{ height:50px; }
}
@media (max-width:760px){
  .dg-card{ padding:24px 20px 20px; max-width:none; }
  .dg-send{ width:100%; align-self:stretch; }
}
@media (prefers-reduced-motion:reduce){
  .dg-panel, .dg-card, .dg-close, .dg-body, .dg-panel.dg-in-cta, .dg-deck-tab,
  .dg-sent .dg-body{ transition:none; }
  .dg-sent .dg-done{ animation:none; }
}

/* ---------------------------------------------------------------------------
   17b. RIDE SHEET (client, Aug 6): the home/venue/services pattern — the hero
   pins and the page content slides up OVER it — extended to the spotlights
   page, the four spotlight posts, and the visit page. The hero gets sticky
   in each group's own sheet; this wrapper makes everything after it one
   opaque surface so nothing shows the pinned hero through gaps.
   --------------------------------------------------------------------------- */
.ride-sheet{ position:relative; z-index:2; background:var(--cream); }
@media (min-width:901px){
  .js .spot-hero, .js .cs-hero, .js .cg-hero--full{ position:sticky; top:0; }
}
@media (prefers-reduced-motion:reduce){
  .js .spot-hero, .js .cs-hero, .js .cg-hero--full{ position:relative; }
}

/* ---------------------------------------------------------------------------
   18. LOADING CURTAIN (client, Aug 6): a cold cache used to paint the hero
   poster before the video was ready, reading as a glitchy still. An inline
   head snippet sets html.mb-loading + html.mb-hold before first paint; the
   curtain (pure CSS pseudo-elements, no extra DOM) covers the page while
   js/loader.js waits for the hero media, then the curtain wipes up and the
   held entrance animations play from the start. The inline snippet carries
   its own 4.5s failsafe so a lost loader.js can never strand the page.
   --------------------------------------------------------------------------- */
html.mb-loading body::before{
  content:'';
  position:fixed; inset:0; z-index:9998;
  background:var(--ink) url('../assets/img/brand/inline-cream.svg') center calc(50% - 12px) / min(290px,64vw) no-repeat;
}
html.mb-loading body::after{
  content:'';
  position:fixed; z-index:9999;
  left:50%; top:calc(50% + 26px);
  width:min(214px,48vw); height:2px;
  transform:translateX(-50%);
  background:
    linear-gradient(90deg, var(--yellow), var(--yellow)) no-repeat -60% 0 / 34% 100%,
    rgba(255,250,240,.16);
  animation:mbCurtainLine 1.15s cubic-bezier(.45,.15,.35,.85) infinite;
}
@keyframes mbCurtainLine{
  from{ background-position:-60% 0, 0 0; }
  to{ background-position:160% 0, 0 0; }
}
/* client (Aug 6): the curtain FADES away rather than wiping up */
html.mb-loading body::before{
  transition:opacity .6s ease;
}
html.mb-loading body::after{
  transition:opacity .3s ease;
}
html.mb-reveal body::before{ opacity:0; }
html.mb-reveal body::after{ opacity:0; }
/* the reveal is also the starting gun: entrance animations (nav drop, hero
   word-rise, stat strip) hold at frame zero until the curtain lifts */
html.mb-hold .site-nav, html.mb-hold .site-nav *,
html.mb-hold .hero *, html.mb-hold .svc-hero *, html.mb-hold .cs-hero *,
html.mb-hold .v-hero *, html.mb-hold .spot-hero *, html.mb-hold .cg-hero *{
  animation-play-state:paused !important;
}
@media (prefers-reduced-motion:reduce){
  html.mb-loading body::before, html.mb-loading body::after{ transition:none; animation:none; }
}

/* ---------------------------------------------------------------------------
   19. MOBILE LEGIBILITY + TOUCH FLOOR (client, Aug 6 visual pass)
   A design audit at 390px found the same faults on every page: footer headings
   and links rendering at 10px with 16px-tall tap targets, brand labels below
   the legibility floor, and the venue floor tabs a hair under a comfortable
   touch target. All desktop values are untouched.
   --------------------------------------------------------------------------- */
@media (max-width:900px){
  /* footer: redesigned as a stacked editorial sheet (Aug 9). The four desktop
     columns crushed into a 2x2 grid of orphaned lists at phone width. Now the
     lockup leads, then each group is a hairline-ruled band — yellow eyebrow,
     serif links in two columns, every row a full-height tap target — the same
     voice as the nav drawer. */
  .site-footer{padding-top:52px}
  .site-footer .foot-top{display:flex;flex-direction:column;gap:0;padding-bottom:36px}
  .site-footer .foot-brand{padding-bottom:24px}
  .foot-planning{font-size:20px;margin:20px 0 14px}
  .foot-col{padding:18px 0 12px;border-top:1px solid rgba(255,250,240,.12)}
  .foot-col h3, .foot-col h4{
    font-size:11px; letter-spacing:.26em; margin-bottom:8px;
  }
  .foot-col ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
  .foot-col a{
    font-family:var(--serif);
    font-size:17.5px;
    color:rgba(255,250,240,.88);
    padding-block:9px;       /* ~40px rows, real thumb targets */
  }
  .foot-col address,
  .foot-col p{
    font-family:var(--serif);
    font-size:16px;
    line-height:1.6;
    color:rgba(255,250,240,.62);
    max-width:none;
    margin-bottom:4px;
  }
  /* the two social placeholders sit side by side, not a stub column */
  .foot-col:last-child ul{display:flex;flex-direction:row;gap:34px}
  .site-footer .foot-addr, .site-footer address{ font-size:16px; line-height:1.6; }

  /* brand labels: nothing below 11px on a phone. `body`-prefixed because the
     page-group sheets load AFTER site.css and would otherwise win. */
  body .sc-badge, body .stat-label, body .cs-hero-badge, body .lg-k,
  body .fc-brand-name, body .vx-legend-item, body .dc-label,
  body .eyebrow, body .fe-chip, body .fd-stat span, body .vx-stats span,
  body .stat-band .stat-label, body .spot-act-stat, body .fc-stats{
    font-size:11px;
  }
  body .eyebrow{ letter-spacing:.2em; }

  /* the venue floor tabs and event chips sat at 34px — below a comfortable thumb */
  body .fe-tab{ min-height:42px; padding-inline:18px; }
  body .fe-chip{ min-height:40px; display:inline-flex; align-items:center; }
  /* footer links span their column so the whole row is tappable */
  .foot-col a{ display:block; }

  /* dense service copy reads as a wall at phone width — open it up */
  .feat-text p, .svc-copy p, .story-copy p, .brief-content p{
    font-size:15.5px; line-height:1.72;
  }
}

/* ---------------------------------------------------------------------------
   20. MOBILE HERO CUE (client, Aug 9: heroes full-screen on phones with a
   small animation prompting the scroll). A tracked "Scroll" cap over a thin
   track a yellow line travels down — flat and touch-neutral, no mouse
   imagery. Markup (inside every page hero, absolutely placed):
   <div class="hero-cue" aria-hidden="true"><span>Scroll</span><i></i></div>
   --------------------------------------------------------------------------- */
.hero-cue{display:none}
@media (max-width:900px){
  .hero-cue{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:9px;
    position:absolute;
    left:50%;
    bottom:16px;
    transform:translateX(-50%);
    z-index:6;
    pointer-events:none;
  }
  .hero-cue span{
    font-family:var(--label);
    font-weight:700;
    font-size:11px;
    letter-spacing:.3em;
    padding-left:.3em;   /* optical centre for the tracked caps */
    text-transform:uppercase;
    color:rgba(255,250,240,.78);
  }
  .hero-cue i{
    width:1px;
    height:30px;
    background:rgba(255,250,240,.22);
    position:relative;
    overflow:hidden;
  }
  .hero-cue i::after{
    content:'';
    position:absolute;
    inset:0;
    background:var(--yellow);
    transform:translateY(-100%);
    animation:mb-cue-drop 2.4s cubic-bezier(.65,.05,.35,1) infinite;
  }
  @keyframes mb-cue-drop{
    0%{transform:translateY(-100%)}
    45%{transform:translateY(0)}
    80%,100%{transform:translateY(102%)}
  }
  /* the home hero's stat strip hugs the fold — lift it clear of the cue,
     and drop the cue's word there (it would butt against the address line;
     the strip already says "more below", the moving line is enough) */
  body .hero-stats{padding-bottom:64px}
  .hero > .hero-cue span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero-cue i::after{animation:none;transform:none}
}

/* Touch has no hover state, so presses need their own acknowledgement —
   a brief compress on the controls that hover-lift on desktop. */
@media (hover:none){
  .btn:active{transform:scale(.97);transition-duration:.08s}
  .fe-chip:active,.deck-btn:active{transform:scale(.97)}
  .spotlight-card:active .bg,.space-card:active .bg{transform:scale(1.03)}
}
.cj-cta{font-size:11.5px}
.vid-pill-label{font-size:11.5px}
/* ==========================================================================
   §18 PRIVACY CHOICES — consent banner, preferences panel, footer control
   Built by js/consent.js. Flat surfaces only, no gradients: ink bar on the
   banner, cream card in the panel, the same 8px button geometry as §1.
   ========================================================================== */

/* the footer control only exists once the script that answers it has run */
.foot-choices{display:none}
.mb-consent-ready .foot-choices{display:block}
.foot-choices-btn{
  appearance:none;
  -webkit-appearance:none;
  background-color:transparent;
  border:none;
  padding:0;
  margin:0;
  text-align:left;
  cursor:pointer;
  font-family:var(--cond);
  font-size:13px;
  color:rgba(255,250,240,.7);
  transition:color .2s ease;
}
.foot-choices-btn:hover{color:var(--cream)}

/* ------------------------------------------------------------- the banner */
.mb-cc{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:900;
  background-color:var(--ink);
  border-top:1px solid rgba(255,250,240,.14);
  transform:translateY(101%);
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.mb-cc.is-open{transform:translateY(0)}
/* room for the bar, so the footer's own links can always be scrolled clear
   of it. js/consent.js measures the bar and sets --mb-cc-h. */
.mb-cc-open .site-footer{padding-bottom:calc(var(--mb-cc-h,96px) + 28px)}
.mb-cc-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:18px var(--edge);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}
.mb-cc-copy{
  margin:0;
  font-family:var(--cond);
  font-size:13.5px;
  line-height:1.6;
  color:rgba(255,250,240,.78);
  max-width:66ch;
}
.mb-cc-copy a{color:var(--yellow);text-decoration:underline;text-underline-offset:3px}
.mb-cc-copy a:hover{color:var(--cream)}
.mb-cc-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}

.mb-cc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:38px;
  padding:0 20px;
  border:none;
  border-radius:8px;
  cursor:pointer;
  font-family:var(--label);
  font-weight:700;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.mb-cc-btn--gold{background-color:var(--yellow);color:var(--ink)}
.mb-cc-btn--gold:hover{box-shadow:0 10px 22px rgba(255,183,27,.3)}
.mb-cc-btn--ghost{
  background-color:transparent;
  color:var(--cream);
  box-shadow:inset 0 0 0 1.5px rgba(255,250,240,.45);
}
.mb-cc-btn--ghost:hover{background-color:rgba(255,250,240,.1)}
.mb-cc-btn--ghost-ink{
  background-color:transparent;
  color:var(--ink);
  box-shadow:inset 0 0 0 1.5px rgba(36,42,47,.35);
}
.mb-cc-btn--ghost-ink:hover{background-color:rgba(36,42,47,.06)}
.mb-cc-btn--quiet{
  background-color:transparent;
  color:rgba(255,250,240,.72);
  padding:0 8px;
  text-decoration:underline;
  text-underline-offset:4px;
}
.mb-cc-btn--quiet:hover{color:var(--cream)}

/* -------------------------------------------------------------- the panel */
html.mb-cp-locked,
html.mb-cp-locked body{overflow:hidden}

.mb-cp{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s;
}
.mb-cp.is-open{opacity:1;visibility:visible}
.mb-cp-scrim{position:absolute;inset:0;background-color:rgba(20,24,27,.62)}
.mb-cp-card{
  position:relative;
  width:min(560px,100%);
  max-height:calc(100vh - 48px);
  overflow-y:auto;
  background-color:var(--cream);
  border-radius:16px;
  padding:44px 40px 36px;
  transform:translateY(14px);
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.mb-cp.is-open .mb-cp-card{transform:translateY(0)}

.mb-cp-close{
  position:absolute;
  top:18px;
  right:18px;
  width:32px;
  height:32px;
  background-color:transparent;
  border:none;
  cursor:pointer;
  border-radius:8px;
}
.mb-cp-close span,
.mb-cp-close span::after{
  position:absolute;
  top:50%;
  left:50%;
  width:14px;
  height:1.5px;
  background-color:var(--ink);
  content:"";
}
.mb-cp-close span{transform:translate(-50%,-50%) rotate(45deg)}
.mb-cp-close span::after{top:0;left:0;transform:rotate(-90deg)}
.mb-cp-close:hover{background-color:rgba(36,42,47,.07)}

.mb-cp-title{
  font-family:var(--serif);
  font-size:34px;
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:0 0 12px;
}
.mb-cp-title em{font-style:italic;color:var(--burgundy)}
.mb-cp-lede{
  margin:0 0 18px;
  font-family:var(--cond);
  font-size:14px;
  line-height:1.65;
  color:rgba(36,42,47,.72);
}
.mb-cp-gpc{
  margin:0 0 18px;
  padding:12px 14px;
  border-radius:8px;
  background-color:rgba(105,122,102,.12);
  font-family:var(--cond);
  font-size:13px;
  line-height:1.6;
  color:var(--ink);
}

.mb-cp-rows{border-top:1px solid rgba(36,42,47,.12)}
.mb-cp-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  padding:18px 0;
  border-bottom:1px solid rgba(36,42,47,.12);
}
.mb-cp-row-text h3{
  margin:0 0 4px;
  font-family:var(--label);
  font-weight:700;
  font-size:10.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink);
}
.mb-cp-row-text p{
  margin:0;
  font-family:var(--cond);
  font-size:13px;
  line-height:1.6;
  color:rgba(36,42,47,.66);
}

.mb-cp-switch{
  position:relative;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  cursor:pointer;
}
.mb-cp-switch input{
  position:absolute;
  opacity:0;
  width:44px;
  height:24px;
  margin:0;
  cursor:pointer;
}
.mb-cp-track{
  display:block;
  width:44px;
  height:24px;
  border-radius:12px;
  background-color:rgba(36,42,47,.22);
  transition:background-color .2s ease;
}
.mb-cp-track::after{
  content:"";
  display:block;
  width:18px;
  height:18px;
  margin:3px;
  border-radius:50%;
  background-color:var(--cream);
  transition:transform .2s ease;
}
.mb-cp-switch input:checked ~ .mb-cp-track{background-color:var(--green)}
.mb-cp-switch input:checked ~ .mb-cp-track::after{transform:translateX(20px)}
.mb-cp-switch input:disabled{cursor:default}
.mb-cp-switch input:disabled ~ .mb-cp-track{background-color:rgba(36,42,47,.16)}
.mb-cp-switch input:focus-visible ~ .mb-cp-track{
  box-shadow:0 0 0 2px var(--cream), 0 0 0 4px var(--ink);
}
.mb-cp-state{
  font-family:var(--label);
  font-weight:700;
  font-size:9px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(36,42,47,.45);
}

.mb-cp-foot{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  padding-top:22px;
}

@media (max-width:900px){
  .mb-cc-inner{
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    padding:16px 20px calc(16px + env(safe-area-inset-bottom));
  }
  .mb-cc-copy{font-size:13px;max-width:none}
  .mb-cc-actions{flex-wrap:wrap;gap:8px}
  .mb-cc-btn{flex:1 1 auto}
  .mb-cc-btn--quiet{flex:1 1 100%;order:3;padding:4px 0}
  .mb-cp-card{padding:40px 24px 28px;border-radius:14px}
  .mb-cp-title{font-size:29px}
  .mb-cp-row{gap:16px}
  .mb-cp-foot{flex-direction:column-reverse;align-items:stretch}
}

@media (prefers-reduced-motion:reduce){
  .mb-cc,
  .mb-cp,
  .mb-cp-card,
  .mb-cp-track::after{transition:none}
}


/* ---- §17c. DECK CONFIRMATION SETTLES THE SECTION (client, Aug 12) ----
   The panel already blurs its own body and centres the confirmation over it.
   This carries that one level out, so the rest of the section steps back too
   and the confirmation is unmistakably the end of the interaction.

   :has() picks out the branch holding the sent panel and leaves it sharp, so
   the overlay never blurs itself. Browsers without :has() simply skip the
   effect and keep the existing card-level treatment, which is a fine floor. */
.dg-section-confirmed > .wrap > *:not(.dg-panel):not(:has(.dg-panel.dg-sent)){
  filter:blur(8px);
  opacity:.45;
  pointer-events:none;
  user-select:none;
  transition:filter .5s ease, opacity .5s ease;
}
.dg-section-confirmed > .wrap > *{
  transition:filter .5s ease, opacity .5s ease;
}

@media (prefers-reduced-motion:reduce){
  .dg-section-confirmed > .wrap > *{transition:none}
}

/* <address> is italic by default in every browser; the footer block is not */
.foot-col address{font-style:normal}