/* ── Reset ──────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --o:#ff8b00;
  --lt:#f8f8f0;
  --dk:#1a1a1a;
  --fd:'Barlow Condensed',sans-serif;
  --fm:'IBM Plex Mono',monospace;
}
html,body{width:100%;height:100%;overflow:hidden;background:var(--lt)}
body{font-family:var(--fm)}

/* ── Scroll container ───────────────────────────────── */
#sc{
  width:100vw;height:100dvh;
  overflow-y:scroll;
  overscroll-behavior:none;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}
#sc::-webkit-scrollbar{display:none}
#sc{-ms-overflow-style:none;scrollbar-width:none}

/* ── Slides ─────────────────────────────────────────── */
.slide{
  height:100dvh;width:100vw;
  position:relative;
  overflow-x:hidden;
  overflow-y:auto;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  contain:style;
  /* push scrollbar to left side */
  direction:rtl;
}
/* restore normal direction for all slide content */
.slide > *{direction:ltr}

/* Hide scrollbars everywhere */
.slide::-webkit-scrollbar { display: none; }
.slide {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* ── Vertical centering via auto margins ─────────────── */
/* margin-block:auto centres content when slide has room,
   collapses to 0 when content overflows so scroll starts at top */
.h-body,.t-wrap,.si{margin-block:auto}

/* Mobile-first logo clearance and slide breathing room.
   --logo-clearance is measured & set by JS from the real rendered logo height.
   These values scale up with breakpoints to match chrome size at each tier. */
:root{--logo-clearance:44px}
.slide{padding-top:var(--logo-clearance);padding-bottom:clamp(24px,3dvh,36px)}
.h-body,.t-wrap,.si{padding-block:0}

/* Grid texture — light slides */
.has-grid::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--dk) 5%, transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb, var(--dk) 5%, transparent) 1px,transparent 1px);
  background-size:40px 40px;
}

/* Dots texture — dark slides */
.has-dots::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:10;
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--lt) 10%, transparent) 1px, transparent 1px);
  background-size:40px 40px;
}

/* ── Nav dots — always bottom-centred horizontal strip ── */
#nav{
  position:fixed;bottom:18px;left:50%;transform:translateX(-50%);
  z-index:9000;display:flex;flex-direction:row;gap:6px;align-items:center;
  background:color-mix(in srgb, var(--lt) 60%, transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid color-mix(in srgb, var(--dk) 10%, transparent);
  border-radius:30px;
  padding:7px 12px;
  transition:background .4s, border-color .4s, opacity .4s, visibility .4s;
}
#nav.dark-dots{
  background:color-mix(in srgb, var(--dk) 65%, transparent);
  border-color:color-mix(in srgb, var(--lt) 12%, transparent);
}
#nav.hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* Each dot has a generous hit area */
.nd-wrap{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;cursor:pointer;
}

.nd{
  width:7px;height:7px;border-radius:4px;border:none;padding:0;
  background:var(--dk);
  transition:background .3s,width .3s,border-radius .3s;
  display:block;flex-shrink:0;pointer-events:none;
}
.nd.active{width:22px;border-radius:4px;background:var(--o)}
@media(hover:hover){
  .nd-wrap:hover .nd:not(.active){background:var(--o);width:9px}
}
.dark-dots .nd:not(.active){background:color-mix(in srgb, var(--lt) 55%, transparent)}

/* Tooltip — appears above the dot */
/* On touch devices labels stay in the DOM so JS can reveal them on long-press */
@media(hover:none){
  .nd-label{
    /* Keep layout but invisible so transitions still work */
    opacity:0;
    pointer-events:none;
  }

  /* Dot highlighted while finger is over it in peek mode */
  .nd-wrap.touch-active .nd{
    background:var(--o) !important;
    width:9px;
  }
  .nd-wrap.touch-active .nd.active{
    width:22px;
  }

  /* Label visible for the touch-active dot */
  .nd-wrap.touch-active .nd-label{
    opacity:1;
    transform:translateX(-50%) translateY(0);
  }

  /* Nav bar pulses slightly larger while in peek mode */
  #nav.touch-peeking{
    padding:9px 14px;
    transition:padding .15s, background .4s, border-color .4s;
  }
}

.nd-label{
  position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(4px);
  white-space:nowrap;
  font-family:var(--fm);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dk);
  background:color-mix(in srgb, var(--lt) 100%, transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid color-mix(in srgb, var(--dk) 12%, transparent);
  border-radius:4px;
  padding:4px 8px;
  pointer-events:none;
  opacity:0;
  transition:opacity .18s,transform .18s;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
@media(hover:hover){
  .nd-wrap:hover .nd-label{opacity:1;transform:translateX(-50%) translateY(0)}
}
.dark-dots .nd-label{
  color:var(--lt);
  background:color-mix(in srgb, var(--dk) 82%, transparent);
  border-color:color-mix(in srgb, var(--lt) 14%, transparent);
}

/* ── Fixed chrome ────────────────────────────────────── */
/* Base: mobile */
#wm{
  position:fixed;top:14px;left:16px;z-index:9000;
  font-family:var(--fd);font-size:18px;font-weight:800;letter-spacing:.09em;
  text-transform:lowercase;color:var(--dk);
  cursor:pointer;transition:color .28s,border-color .28s,background .28s;
  opacity:0;
}
#wm {color:var(--dk); transition: color 1s, opacity 0.4s}
#wm span{color:var(--o);transition:color 1s}
#wm.inv{color:var(--o);transition:color 1s, opacity 0.4s}
#wm.inv span{color:var(--lt);transition:color 1s}

/* ── Dark overlay — always displayed in inv colours, clipped by JS ── */
#wm-dk{
  position:fixed;top:14px;left:16px;z-index:9001;
  font-family:var(--fd);font-size:18px;font-weight:800;letter-spacing:.09em;
  text-transform:lowercase;color:var(--o);
  pointer-events:none;cursor:default;
  opacity:0;transition:opacity 0.4s;
}
#wm-dk span{color:var(--lt)}

@media(hover:hover){
  #wm:hover {color:var(--o);transition:color 1s}
  #wm:hover span{color:var(--dk);transition:color 1s}
  #wm.inv:hover{color:var(--lt);transition:color 1s}
  #wm.inv:hover span{color:var(--o);transition:color 1s}
}

/* ── Dark overlay for #nav ──
   Always rendered with dark-dots styles, clipped by JS to the dark-slide portion. */
#nav-dk{
  position:fixed;bottom:18px;left:50%;transform:translateX(-50%);
  z-index:8999;display:flex;flex-direction:row;gap:6px;align-items:center;
  background:color-mix(in srgb, var(--dk) 65%, transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid color-mix(in srgb, var(--lt) 12%, transparent);
  border-radius:30px;
  padding:7px 12px;
  pointer-events:none;
  clip-path:inset(0 0 100% 0 round 30px);
  /* size/position kept in sync with #nav by JS */
}
/* nav-dk dot colours mirror #nav.dark-dots */
#nav-dk .nd{background:color-mix(in srgb, var(--lt) 55%, transparent)}
#nav-dk .nd.active{background:var(--o)}
#nav-dk .nd-label{
  color:var(--lt);
  background:color-mix(in srgb, var(--dk) 82%, transparent);
  border-color:color-mix(in srgb, var(--lt) 14%, transparent);
}
/* Base: mobile */
#contact-btn{
  position:fixed;top:8px;right:12px;z-index:9000;
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;color:var(--dk);
  border:1px solid color-mix(in srgb, var(--dk) 30%, transparent);
  border-radius: 6px;
  cursor:pointer;transition:color .28s,border-color .28s,background .28s;
  overflow:hidden;
}
#contact-btn svg{width:20px;height:16px}

#contact-btn::before{
  content:'';position:absolute;inset:0;background:var(--o);
  transform:scaleX(0);transform-origin:left;transition:transform .32s;z-index:-1;
}

@media(hover:hover){
  #contact-btn:hover::before{transform:scaleX(1)}
  #contact-btn:hover{color:var(--lt);border-color:var(--o)}
  #contact-btn.inv:hover{color:var(--lt);border-color:var(--o)}
}

#contact-btn:focus{outline:none;border-color:color-mix(in srgb, var(--dk) 30%, transparent)}
#contact-btn:active{border-color:color-mix(in srgb, var(--dk) 30%, transparent)}
#contact-btn.inv{color:var(--lt);border-color:color-mix(in srgb, var(--lt) 30%, transparent)}
#contact-btn.inv:focus{border-color:color-mix(in srgb, var(--lt) 30%, transparent)}
#contact-btn.inv:active{border-color:color-mix(in srgb, var(--lt) 30%, transparent)}

/* ── contact-btn: crossfade between mail and up-arrow icons ── */
#contact-btn .icon-mail,
#contact-btn .icon-up{
  position:fixed;display:flex;align-items:center;justify-content:center;
  transition:opacity .32s ease;
}
#contact-btn .icon-mail{opacity:1}
#contact-btn .icon-up{opacity:0}
#contact-btn.to-top .icon-mail{opacity:0}
#contact-btn.to-top .icon-up{opacity:1}

/* ── Dark overlay for #contact-btn ──
   Sits as position:absolute inside #contact-btn so it is always
   exactly co-located with the real button. The parent's overflow:hidden
   and border-radius handle clipping and corner rounding — no need to
   replicate those here. */
#contact-btn-dk{
  position:absolute;inset:0;z-index:10;
  display:flex;align-items:center;justify-content:center;
  background:transparent;color:var(--lt);
  border-radius:6px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lt) 30%, transparent);
  pointer-events:none;
  clip-path:inset(0 0 100% 0);
}
#contact-btn-dk svg{width:20px;height:16px}
#contact-btn-dk .icon-mail,
#contact-btn-dk .icon-up{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .32s ease;
}
#contact-btn-dk .icon-mail{opacity:1}
#contact-btn-dk .icon-up{opacity:0}
#contact-btn-dk.to-top .icon-mail{opacity:0}
#contact-btn-dk.to-top .icon-up{opacity:1}

/* ══════════════════════════════════════════════════════
   SLIDE 0 — HERO
══════════════════════════════════════════════════════ */
#s0{background:var(--lt)}


#rbg{position:absolute;top:0;left:0;right:0;height:100dvh;display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:1}
#rroot{transform-origin:center center;will-change:transform,opacity;opacity:0;transition:opacity 1.2s 0.1s ease}
/* hide the sim's own header & status bar when used as bg */
#rroot .header,#rroot .status-bar{display:none!important}
/* keep native light background */
#rroot .sim-outer{background:var(--lt)!important;border-color:color-mix(in srgb, var(--dk) 10%, transparent)!important}

.h-body{position:relative;z-index:3;text-align:center;padding:0 12px;max-width:820px}

/* Base: mobile */
.h-eye{
  font-family:var(--fm);font-size:13px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;
  color:var(--o);display:inline-flex;align-items:center;gap:8px;margin-bottom:25px;
  opacity:0;transform:translateY(10px);transition:opacity .85s .28s,transform .85s .28s;
}
.h-eye::before,.h-eye::after{content:'';width:14px;height:1px;background:var(--o);opacity:.5}

.h-word{
  font-family:var(--fd);font-size:clamp(50px,14vw,80px);font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--dk);line-height:.88;
  opacity:0;transform:translateY(18px);transition:opacity .7s .1s,transform .7s .1s;
}
.h-word span{color:var(--o)}

.h-tag{
  font-family:var(--fm);font-size:clamp(12px,3vw,14px);font-weight:600;
  letter-spacing:.1em;color:color-mix(in srgb, var(--dk) 50%, transparent); margin-top:25px;
  opacity:0;transform:translateY(10px);transition:opacity .7s .48s,transform .7s .48s;
}

/* Secondary point — vertically centred between h-eye and h-word.
   Uses margin-bottom (matching h-eye's margin-bottom) instead of margin-top
   so the element sits with equal space above and below it. */
.h-sub{
  font-family:var(--fm);font-size:clamp(12px,3vw,14px);font-weight:600;
  letter-spacing:.1em;color:color-mix(in srgb, var(--dk) 50%, transparent); margin-bottom:25px;
  opacity:0;transform:translateY(10px);transition:opacity .7s .38s,transform .7s .38s;
}

/* ── HERO METRICS — centered on all mobile, classic accent on wider screens ── */
.h-met {
  display: flex;
  gap: 22px;
  justify-content: center;          /* was flex-start */
  margin-top: 24px;
  flex-wrap: wrap;
  padding: 0 8px;
}

.h-m {
  text-align: center;               /* was left */
  border-left: none;                /* removed on narrow screens */
  padding-left: 0;
  min-width: 82px;                  /* keeps each stat nicely balanced when wrapping */
}

.h-ml {
  line-height: 1.28;
}

/* Restore the original left-accent + left-align look on tablets & up */
@media (min-width: 480px) {
  .h-m {
    text-align: left;
    border-left: 1px solid color-mix(in srgb, var(--o) 35%, transparent);
    padding-left: 10px;
    min-width: auto;
  }
}

.h-mv{font-family:var(--fd);font-size:19px;font-weight:700;color:var(--o)}
.h-ml{font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb, var(--dk) 50%, transparent);margin-top:2px}

.s-hint{
  position:absolute;bottom:18px;left:0;right:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  opacity:0;transition:opacity .7s 1s;
}
.sh-t{font-family:var(--fm);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:color-mix(in srgb, var(--dk) 0%, transparent)}
.sh-l{width:0px;height:34px;background:linear-gradient(to bottom,var(--o),transparent);animation:sp 2s ease-in-out infinite}
@keyframes sp{0%,100%{opacity:.3}50%{opacity:1}}

#s0.active .h-eye,#s0.active .h-word,#s0.active .h-tag,#s0.active .h-sub,#s0.active .h-met,#s0.active .s-hint{opacity:1;transform:none}

/* ══════════════════════════════════════════════════════
   SHARED INNER LAYOUT
══════════════════════════════════════════════════════ */
/* Base: mobile padding */
.si{width:100%;max-width:1080px;padding:0 16px;position:relative;z-index:1}
.si.wide{max-width:1140px}

/* Base: mobile */
.s-eye{font-family:var(--fm);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--o);display:flex;align-items:center;gap:10px;margin-bottom:10px}
.s-eye::after{content:'';width:32px;height:1px;background:var(--o);opacity:.4}

/* Base: mobile */
.s-ttl{font-family:var(--fd);font-size:clamp(22px,7vw,34px);font-weight:800;letter-spacing:.03em;text-transform:uppercase;line-height:.94}
.on-lt .s-ttl{color:var(--dk)}
.on-dk .s-ttl{color:var(--lt)}

.sh{margin-bottom:14px;opacity:0;transform:translateY(18px);transition:opacity .65s .1s,transform .65s .1s}
.slide.active .sh{opacity:1;transform:none}

/* ══════════════════════════════════════════════════════
   SLIDE 1 — TYPING
══════════════════════════════════════════════════════ */
#s1{background:var(--dk); background-image:radial-gradient(ellipse 60% 50% at 50% 50%, color-mix(in srgb, var(--o) 2%, transparent), transparent)}

.t-wrap{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;align-items:center;
  opacity:0;transform:translateY(22px);transition:opacity .7s .15s,transform .7s .15s}
#s1.active .t-wrap{opacity:1;transform:none}

/* Base: mobile padding */
.t-panel{
  padding:22px 18px 18px;max-width:min(88vw,1440px);width:100%;position:relative;
}
.t-panel::before{content:'';position:absolute;top:-1px;left:-1px;width:17px;height:17px;border-top:1px solid var(--o);border-left:1px solid var(--o)}
.t-panel::after{content:'';position:absolute;bottom:-1px;right:-1px;width:17px;height:17px;border-bottom:1px solid var(--o);border-right:1px solid var(--o)}
.tc2{position:absolute;width:17px;height:17px}
.tc2.tr{top:-1px;right:-1px;border-top:1px solid var(--o);border-right:1px solid var(--o)}
.tc2.bl{bottom:-1px;left:-1px;border-bottom:1px solid var(--o);border-left:1px solid var(--o)}
#troot{width:100%}

/* Base: mobile */
.t-sub{font-family:var(--fm);font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:color-mix(in srgb, var(--lt) 75%, transparent);text-align:center;margin-top:16px;
  opacity:0;transition:opacity .6s .35s; font-weight:600}
#s1.active .t-sub{opacity:1} 

/* ══════════════════════════════════════════════════════
   SLIDE 2 — CHALLENGE 
══════════════════════════════════════════════════════ */
#s-challenge{background:var(--lt); background-image:radial-gradient(ellipse 70% 60% at 20% 50%, color-mix(in srgb, var(--o) 2%, transparent), transparent)}
#s-challenge.active .imp-l{opacity:1;transform:none}
#s-challenge.active .sb{opacity:1;transform:none}

/* Flip text colours: --lt background requires --dk text */
#s-challenge .s-ttl{color:var(--dk)}
#s-challenge .sv{color:var(--dk);font-weight:800}
#s-challenge .sl2{color:color-mix(in srgb, var(--dk) 50%, transparent)}
#s-challenge .imp-stmt{color:color-mix(in srgb, var(--dk) 50%, transparent)}
#s-challenge .imp-stmt strong{color:var(--dk);font-weight:400}

#s-challenge .cf-footer{border-top:1px solid color-mix(in srgb, var(--dk) 7%, transparent)}
#s-challenge .cf-footer-copy{color:var(--dk);font-weight:100}

/* ══════════════════════════════════════════════════════
   SLIDE 3 — HOW WE FIT
══════════════════════════════════════════════════════ */
#s-pipeline { background: var(--dk); background-image: radial-gradient(ellipse 80% 70% at 70% 50%, color-mix(in srgb, var(--o) 2%, transparent), transparent); }

/* ── Two-column layout: text left, diagram right ── */
/* Base: mobile single column */
.imp-diag {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}

/* Left column — reuses .imp-l typography + .imp-stmt but needs its own activation trigger */
#s-pipeline.active .imp-l { opacity: 1; transform: none; }

/* Right column — centres the scaler, slides in from right */
.imp-diag-r {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(18px);
  transition: opacity .7s .25s, transform .7s .25s;
}
#s-pipeline.active .imp-diag-r { opacity: 1; transform: none; }

/* ── Scaler shell (JS sets width/height to scaled px values) ── */
.dg-scaler {
  position: relative;
  flex-shrink: 0;
}

/* ── Wrapper: fixed 480×530 design space, scaled from top-left ── */
.dg-wrapper {
  position: absolute;
  top: 0; left: 0;
  width: 480px;
  height: 530px;
  transform-origin: top left;
  /* transform: scale(n) applied by JS */
}

/* ── SVG connector lines ── */
.dg-lines {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

/* ── Outer boundary box ── */
.dg-outer-box {
  position: absolute;
  top: 102px; left: 14px;
  width: 452px; height: 224px;
  border: 1px dashed color-mix(in srgb, var(--lt) 75%, transparent);
  border-radius: 2px;
}
.dg-outer-box::before, .dg-outer-box::after {
  content: ''; position: absolute; width: 14px; height: 14px;
}
.dg-outer-box::before { top:-1px; left:-1px; border-top:1px solid var(--lt); border-left:1px solid var(--lt); }
.dg-outer-box::after  { bottom:-1px; right:-1px; border-bottom:1px solid var(--lt); border-right:1px solid var(--lt); }

/* ── Inner boundary box ── */
.dg-inner-box {
  position: absolute;
  top: 229px; left: 135px;
  width: 211px; height: 209px;
  border: 1px dashed color-mix(in srgb, var(--o) 75%, transparent);
  border-radius: 2px;
}
.dg-inner-box::before, .dg-inner-box::after {
  content: ''; position: absolute; width: 10px; height: 10px;
}
.dg-inner-box::before { top:-1px; left:-1px; border-top:1px solid var(--o); border-left:1px solid var(--o); }
.dg-inner-box::after  { bottom:-1px; right:-1px; border-bottom:1px solid var(--o); border-right:1px solid var(--o); }

/* Shared corner spans (tr / bl) for both boxes */
.dg-outer-box .dg-corner.tr, .dg-inner-box .dg-corner.tr {
  position: absolute; top:-1px; right:-1px;
  border-top:1px solid var(--lt); border-right:1px solid var(--lt);
}
.dg-outer-box .dg-corner.bl, .dg-inner-box .dg-corner.bl {
  position: absolute; bottom:-1px; left:-1px;
  border-bottom:1px solid var(--lt); border-left:1px solid var(--lt);
}
.dg-inner-box .dg-corner.tr {
  position: absolute; top:-1px; right:-1px;
  border-top:1px solid var(--o); border-right:1px solid var(--o);
}
.dg-inner-box .dg-corner.bl {
  position: absolute; bottom:-1px; left:-1px;
  border-bottom:1px solid var(--o); border-left:1px solid var(--o);
}
.dg-outer-box .dg-corner { width:14px; height:14px; }
.dg-inner-box .dg-corner { width:10px; height:10px; }

/* Box labels — notch cut into the dashed border */
.dg-box-label {
  position: absolute;
  top: 0; left: 18px;
  transform: translateY(-60%);
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--lt) 50%, transparent);
  background: var(--dk);
  padding: 0 6px;
}
.dg-box-label.inner {
  left: 12px;
  color: color-mix(in srgb, var(--o) 100%, transparent);
}

/* ── Cells ── */
.dg-cell {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fd);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lt);
  background: var(--dk);
  border: 1px solid color-mix(in srgb, var(--lt) 75%, transparent);
  z-index: 1;
}
.dg-cell-idx {
  position: absolute;
  top: 5px; left: 7px;
  font-family: var(--fm);
  font-size: 7px;
  letter-spacing: .2em;
  color: color-mix(in srgb, var(--o) 50%, transparent);
  line-height: 1;
  pointer-events: none;
}
#dgCellA { left:50px;  top:20px;  width:155px; height:52px; }
#dgCellF { left:275px; top:20px;  width:155px; height:52px; }
#dgCellB { left:50px;  top:132px; width:155px; height:52px; }
#dgCellE { left:275px; top:132px; width:155px; height:52px; }
#dgCellC { left:163px; top:244px; width:155px; height:52px; z-index:2; }
#dgCellD { left:163px; top:356px; width:155px; height:52px; z-index:2; }

/* ── Animated dot ── */
#dgDot {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--o);
  pointer-events: none;
  z-index: 0;
  display: none;
  transform: translate(-50%,-50%);
}

/* ══════════════════════════════════════════════════════
   SLIDE 4 — OPERATIONAL IMPACT
══════════════════════════════════════════════════════ */
#s4{background:var(--lt)}

/* Base: mobile single column */
.og{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}

.ofs{display:flex;flex-direction:column;margin-top:18px}
.of{display:flex;align-items:flex-start;gap:11px;padding:8px 0;
  opacity:0;transform:translateX(-14px);transition:opacity .42s,transform .42s}
.of:hover .of-n{color:var(--o)}
.of:last-child{border-bottom:none}
.of:nth-child(1){transition-delay:.1s}.of:nth-child(2){transition-delay:.19s}
.of:nth-child(3){transition-delay:.28s}.of:nth-child(4){transition-delay:.37s}
#s4.active .of{opacity:1;transform:none}

.of-chev{flex-shrink:0;margin-top:6px;width:9px;height:6px}
.of-n{font-family:var(--fd);font-size:15px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--dk);transition:color .22s}
/* Base: mobile — collapsed via max-height for smooth accordion; unconstrained at min-width:600px */
.of-d{
  display:block;
  max-height:0;
  overflow:hidden;
  font-family:var(--fm);
  font-size:11px;
  font-weight:300;
  color:var(--dk);
  margin-top:0;
  line-height:1.6;
  letter-spacing:.02em;
  transition:max-height .24s ease-in-out, margin-top .24s ease-in-out;
}

.om{margin-top:14px;opacity:0;transform:translateX(14px);transition:opacity .65s .18s,transform .65s .18s}
#s4.active .om{opacity:1;transform:none}

.mr{margin-bottom:11px}
.mt{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.ml{font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dk)}
.mv{font-family:var(--fd);font-size:18px;font-weight:700;color:var(--dk)}
.mv span{color:var(--o)}
.mtr{height:2px;background:color-mix(in srgb, var(--dk) 10%, transparent);border-radius:1px;overflow:hidden}
.mf{height:100%;background:linear-gradient(to right,var(--o),color-mix(in srgb, var(--o) 50%, transparent));width:0;transition:width 1s cubic-bezier(.16,1,.3,1)}
#s4.active .mf.w92{width:92.4%;transition-delay:.924s}
#s4.active .mf.w97{width:97.8%;transition-delay:.978s}
#s4.active .mf.w88{width:88.1%;transition-delay:.881s}
#s4.active .mf.w90{width:90.9%;transition-delay:.909s}

.lb{margin-top:14px;padding:11px 13px;background:color-mix(in srgb, var(--o) 5%, transparent);border-left:2px solid var(--o)}

/* ── Mobile accordion for .of items (below 600px only) ── */
@media (max-width: 599px) {
  /* Make each row tappable */
  .of { cursor: pointer; user-select: none; }
  /* Chevron rotates 90° clockwise when row is open */
  .of-chev { transition: transform .24s ease-in-out; }
  .of.of-open .of-chev { transform: rotate(90deg); transition: transform .32s ease-in-out; }
  /* Expand the description for the open row */
  .of.of-open .of-d {
    max-height: 200px;
    margin-top: 4px;
    transition: max-height .32s ease-in-out, margin-top .32s ease-in-out;
  }
}

/* ── Overflow accordion: applied by JS when .lb would collide with #nav ──
   Overrides the min-width:600px rule that restores max-height:none.
   Higher specificity (ID + 2 classes) wins without !important.            */
#s4.s4-overflow .of { cursor: pointer; user-select: none; }
#s4.s4-overflow .of-chev { transition: transform .24s ease-in-out; }
#s4.s4-overflow .of.of-open .of-chev { transform: rotate(90deg); transition: transform .32s ease-in-out; }
#s4.s4-overflow .of-d {
  max-height: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height .24s ease-in-out, margin-top .24s ease-in-out;
}
#s4.s4-overflow .of.of-open .of-d {
  max-height: 200px;
  margin-top: 4px;
  transition: max-height .32s ease-in-out, margin-top .32s ease-in-out;
}

.lb-lbl{font-family:var(--fm);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--o);opacity:.75;margin-bottom:4px}
.lb-v{font-family:var(--fd);font-size:28px;font-weight:800;color:var(--dk);line-height:1}
.lb-v em{font-style:normal;font-size:14px;color:var(--o)}
.lb-s{font-family:var(--fm);font-size:10px;color:color-mix(in srgb, var(--dk) 75%, transparent);margin-top:4px;letter-spacing:.07em}

/* ══════════════════════════════════════════════════════
   SLIDE 5 — SOCIAL IMPACT
══════════════════════════════════════════════════════ */
#s3{background:var(--dk); background-image:radial-gradient(ellipse 70% 60% at 20% 50%, color-mix(in srgb, var(--o) 2%, transparent), transparent)}

/* Base: mobile single column */
.imp{display:grid;grid-template-columns:1fr;gap:16px;align-items:center}

.imp-l{opacity:0;transform:translateX(-18px);transition:opacity .7s .1s,transform .7s .1s}
#s3.active .imp-l{opacity:1;transform:none}

/* Base: mobile */
.imp-stmt{font-family:var(--fd);font-size:clamp(16px,3.2vw,22px);font-weight:400;line-height:1.45;color:color-mix(in srgb, var(--lt) 50%, transparent);margin-top:12px}
.imp-stmt strong{color:var(--lt);font-weight:100}

.sg{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.sb{padding:14px 11px;position:relative;overflow:hidden;
  opacity:0;transform:translateY(16px);transition:opacity .5s,transform .5s}
.sb::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--o);opacity:0;transition:opacity .28s}
.sb:hover::before{opacity:1}
.sb:nth-child(1){transition-delay:.19s}.sb:nth-child(2){transition-delay:.31s}
.sb:nth-child(3){transition-delay:.43s}.sb:nth-child(4){transition-delay:.55s}
#s3.active .sb{opacity:1;transform:none}

/* Base: mobile */
.sv{font-family:var(--fd);font-size:clamp(24px,7.5vw,36px);font-weight:800;color:var(--lt);letter-spacing:.02em;line-height:1}
.sv span{color:var(--o)}
.sl2{font-family:var(--fm);font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:color-mix(in srgb, var(--lt) 50%, transparent);margin-top:4px;line-height:1.5}
.sq{font-family:var(--fm);font-size:10px;color:var(--o);opacity:.72;margin-top:2px;letter-spacing:.07em}

/* ══════════════════════════════════════════════════════
   SLIDE 6 — VALUES
══════════════════════════════════════════════════════ */
#s2{background:var(--lt)}

/* Base: mobile 2×2 grid */
.vg{display:grid;grid-template-columns:1fr 1fr;gap:2px}

.vc{background:color-mix(in srgb, var(--dk) 5%, transparent);padding:16px 12px;position:relative;overflow:hidden;
  opacity:0;transform:translateY(26px);transition:opacity .5s,transform .5s}
.vc::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--o);transform:scaleX(0);transform-origin:left;transition:transform .32s}
.vc:hover::after{transform:scaleX(1)}
.vc:hover{background:color-mix(in srgb, var(--dk) 10%, transparent)}
.vc:nth-child(1){transition-delay:.14s}.vc:nth-child(2){transition-delay:.26s}
.vc:nth-child(3){transition-delay:.38s}.vc:nth-child(4){transition-delay:.5s}
#s2.active .vc{opacity:1;transform:none}

.v-ico{width:22px;height:22px;margin-bottom:8px}
.v-ico path,.v-ico line,.v-ico circle,.v-ico polygon,.v-ico rect{stroke:var(--o);fill:none;stroke-width:1.2}
.v-n{font-family:var(--fm);font-size:10px;letter-spacing:.3em;color:var(--o);margin-bottom:5px}
.v-name{font-family:var(--fd);font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--dk);margin-bottom:5px;line-height:1}
.v-d{font-family:var(--fm);font-size:12px;font-weight:300;line-height:1.55;color:var(--dk);letter-spacing:.02em}

/* ══════════════════════════════════════════════════════
   SLIDE 7 — TEAM
══════════════════════════════════════════════════════ */
#s6{background:var(--dk); background-image:radial-gradient(ellipse 80% 70% at 50% 30%, color-mix(in srgb, var(--o) 2%, transparent), transparent)}

.si{width:100%;max-width:1080px;padding:0 16px;position:relative;z-index:1}

.tg-container {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 24px;
  position: relative;
  z-index: 1;
}

.tg-scroller {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 24px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}
.tg-scroller::-webkit-scrollbar { display: none; }

.tg {
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
  /* Base: mobile padding aligned with .si */
  padding-left: clamp(16px,4vw,44px);
  grid-row: 1;
  grid-column: 1;
}
.tg-spacer {
  flex: 0 0 clamp(16px,4vw,44px);
}

/* Base: mobile card size */
.tc {
  flex: 0 0 clamp(160px, 44vw, 220px);
  scroll-snap-align: start;
}

.tc{background:color-mix(in srgb, var(--lt) 5%, transparent);overflow:hidden;
  opacity:0;transform:translateY(22px);transition:opacity .5s,transform .5s}
.tc:nth-child(1){transition-delay:.1s}.tc:nth-child(2){transition-delay:.21s}
.tc:nth-child(3){transition-delay:.32s}.tc:nth-child(4){transition-delay:.43s}
.tc:nth-child(5){transition-delay:.54s}.tc:nth-child(6){transition-delay:.65s}
.tc:nth-child(7){transition-delay:.76s}.tc:nth-child(8){transition-delay:.88s}
#s6.active .tc{opacity:1;transform:none}

.tc-av{width:100%;aspect-ratio:1;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative}
.tc-av::after{content:'';position:absolute;inset:0;background-image: var(--av-overlay, none)}

/* If you have a photo, use it */
.tc-av {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-image: var(--photo, none);
  filter: grayscale(100%);
}
/* Hide the initials when a photo is present */
.tc[style*="--photo"] .tc-av::after {
  display: none;
}
.tc[style*="--photo"] .tc-init {
  display: none;
}

/* Base: mobile */
.tc-init{font-family:var(--fd);font-size:26px;font-weight:800;color:color-mix(in srgb, var(--o) 25%, transparent);letter-spacing:.05em;position:relative;z-index:1}

.tc-body{padding:9px 10px 11px;border-top:2px solid transparent;transition:border-color .28s}
.tc:hover .tc-body{border-color:var(--o)}

/* Base: mobile */
.tc-name{font-family:var(--fd);font-size:16px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--lt);line-height:1}
.tc-role{font-family:var(--fm);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--o);margin-top:3px}
/* Base: mobile — hidden on smallest phones to preserve card density */
.tc-bio{font-size:10px;color:var(--lt);}

/* Soft edge fades */
.tg-container::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 50px;
  z-index: 2;
  pointer-events: none;
}
.tg-container::before { left:0; background: linear-gradient(to right,var(--lt) 35%,transparent); }
.tg-container::after  { right:0; background: linear-gradient(to left,var(--lt) 35%,transparent); }

/* ── Team horizontal scroll hint ── */
/* Base: mobile */
.tg-scroll-hint {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 24px;
  width: 85px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 20px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease, transform .5s ease;
  transform: translateX(8px);
}
#s6.active .tg-scroll-hint {
  opacity: 1;
  transform: translateX(0);
  transition: opacity .6s .75s ease, transform .6s .75s ease;
}
.tg-scroll-hint.dismissed {
  opacity: 0 !important;
  transform: translateX(0px) !important;
  transition: opacity .35s ease !important;
}
/* Base: mobile */
.tg-hint-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
/*  background: color-mix(in srgb, var(--lt) 0%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid color-mix(in srgb, var(--o) 0%, transparent);*/
  border-radius: 3px;
  padding: 6px 8px 6px 7px;
}
.tg-hint-arrow {
  display: flex;
  flex-direction: row;
  gap: 1px;
  align-items: center;
}
.tg-hint-chevron {
  width: 10px;
  height: 16px;
  animation: tg-bounce 1.5s ease-in-out infinite;
}
.tg-hint-chevron:nth-child(2) { animation-delay: .22s; opacity: .45; }
.tg-hint-chevron:nth-child(3) { animation-delay: .44s; opacity: .22; }
@keyframes tg-bounce {
  0%, 100% { transform: translateX(0); opacity: 1; }
  50%       { transform: translateX(4px); }
}
.tg-hint-chevron:nth-child(2) {
  animation-name: tg-bounce2;
}
@keyframes tg-bounce2 {
  0%, 100% { transform: translateX(0); opacity: .45; }
  50%       { transform: translateX(4px); opacity: .45; }
}
.tg-hint-chevron:nth-child(3) {
  animation-name: tg-bounce3;
}
@keyframes tg-bounce3 {
  0%, 100% { transform: translateX(0); opacity: .22; }
  50%       { transform: translateX(4px); opacity: .22; }
}

/* ── Team custom scrollbar ── */
.tg-scrollbar {
  position: absolute;
  height: 4px;
  background: color-mix(in srgb, var(--dk) 10%, transparent);
  border-radius: 999px;
  z-index: 4;
  bottom: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.tg-scrollbar.tg-scrollbar-visible {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}
.tg-scrollbar-thumb {
  position: absolute;
  top: 0;
  height: 100%;
  background: color-mix(in srgb, var(--o) 60%, transparent);
  border-radius: 999px;
  margin-top: -6px;
  padding-top: 6px;
  padding-bottom: 6px;
  box-sizing: content-box;
  transition: left 0.08s linear, background 0.2s ease;
  cursor: grab;
  will-change: left;
}
.tg-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--o) 85%, transparent);
}
.tg-scrollbar-thumb:active {
  cursor: grabbing;
  background: var(--o);
}

/* ── Team toggle switch ── */
.team-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s .3s, transform .5s .3s;
}
#s6.active .team-toggle-wrap { opacity: 1; transform: none; }

.team-toggle-label {
  font-family: var(--fm);
  font-size: 14px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--dk) 35%, transparent);
  transition: color .25s;
  user-select: none;
}
.team-toggle-label-active {
  color: var(--dk);
}

.team-toggle {
  position: relative;
  width: 42px;
  height: 22px;
  border-radius: 11px;
  background: var(--o);
  border: 1px solid var(--o);
  cursor: pointer;
  padding: 0;
  transition: background .28s, border-color .28s;
  flex-shrink: 0;
}
.team-toggle[aria-checked="true"] {
  background: color-mix(in srgb, var(--dk) 10%, transparent);
  border-color: color-mix(in srgb, var(--dk) 18%, transparent);
}
.team-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--lt);
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), background .28s;
}
.team-toggle[aria-checked="true"] .team-toggle-thumb {
  transform: translateX(20px);
  background: var(--dk);
}
.team-toggle:focus { outline: none; }
.team-toggle:focus-visible {
  box-shadow: 0 0 0 2px var(--o);
}

/* Hidden team group */
.tg.tg-hidden {
  visibility: hidden;
  pointer-events: none;
  width: 0;
  overflow: hidden;
}

@keyframes tg-fade-out-kf {
  from { opacity: 1; transform: translateY(0);    }
  to   { opacity: 0; transform: translateY(8px);  }
}
@keyframes tg-fade-in-kf {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0);    }
}
.tg.tg-fade-out {
  animation: tg-fade-out-kf 240ms ease forwards;
  pointer-events: none;
  width: auto;
  overflow: visible;
  visibility: visible;
}
.tg.tg-animate-in {
  animation: tg-fade-in-kf 260ms ease forwards;
}

/* ══════════════════════════════════════════════════════
   SLIDE 8 — SUPPORTERS
══════════════════════════════════════════════════════ */
#s5{background:var(--lt)}

/* Base: mobile 2-col grid */
.sup-g{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:20px}

.st{padding:14px 11px;display:flex;flex-direction:column;gap:6px;
  opacity:0;transform:translateY(16px);transition:opacity .48s,transform .48s,background .2s;
  position:relative;overflow:hidden}
.st::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--o);opacity:0;transition:opacity .28s}
.st:hover::before{opacity:1}
.st:nth-child(1){transition-delay:.14s}.st:nth-child(2){transition-delay:.23s}
.st:nth-child(3){transition-delay:.32s}.st:nth-child(4){transition-delay:.41s}
.st:nth-child(5){transition-delay:.5s}.st:nth-child(6){transition-delay:.59s}
#s5.active .st{opacity:1;transform:none}

/* Base: mobile */
.st-name{font-family:var(--fd);font-size:14px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--lt);line-height:1.1}
.st-type{font-family:var(--fm);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:color-mix(in srgb, var(--lt) 50%, transparent)}
.st-red{font-family:var(--fd);font-size:12px;font-weight:700;letter-spacing:.05em;color:color-mix(in srgb, var(--lt) 25%, transparent);background:color-mix(in srgb, var(--lt) 5%, transparent);padding:2px 7px;border-radius:2px;display:inline-block;line-height:1.1;text-transform:uppercase}

/* ══════════════════════════════════════════════════════
   SLIDE 9 — ROADMAP
══════════════════════════════════════════════════════ */
#s-timeline { background: var(--dk); background-image: radial-gradient(ellipse 80% 70% at 50% 30%, color-mix(in srgb, var(--o) 2%, transparent), transparent); }

/* ── Full-viewport-width breakout container ── */
.tl-container {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 24px;
  position: relative;
  z-index: 1;
}

/* ── Scroller ── */
.tl-scroller {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 24px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}
.tl-scroller::-webkit-scrollbar { display: none; }

/* ── Inner track: flex row of points ── */
.tl-track {
  display: flex;
  flex-direction: row;
  gap: 2px;
  /* Base: mobile padding aligned with .si */
  padding-left: clamp(16px,4vw,44px);
  align-items: stretch;
  position: relative;
}

/* ── Spacers align with .si heading ── */
.tl-spacer {
  flex: 0 0 clamp(16px,4vw,44px);
  align-self: stretch;
}

/* ── Right-edge soft fade ── */
.tl-container::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 50px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to left, var(--dk) 35%, transparent);
}

/* TIMELINE POINT */
/* Base: mobile */
.tl-point {
  flex: 0 0 clamp(160px, 54vw, 230px);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .5s, transform .5s;
}
.tl-point:nth-child(2) { transition-delay: .10s; }
.tl-point:nth-child(3) { transition-delay: .21s; }
.tl-point:nth-child(4) { transition-delay: .32s; }
.tl-point:nth-child(5) { transition-delay: .43s; }
.tl-point:nth-child(6) { transition-delay: .54s; }
.tl-point:nth-child(7) { transition-delay: .65s; }
#s-timeline.active .tl-point { opacity: 1; transform: none; }

/* CARD */
.tl-card {
  background: color-mix(in srgb, var(--lt) 5%, transparent);;
  overflow: hidden;
  flex: 1;
}
.tl-card--future { opacity: .55; }

/* ── Card top ── */
.tl-card-top {
  width: 100%;
  aspect-ratio: 2/1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.tl-card-top::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent, transparent 8px,
    color-mix(in srgb, var(--o) 5%, transparent) 8px, color-mix(in srgb, var(--o) 5%, transparent) 9px
  );
}

/* ── Year ── */
/* Base: mobile */
.tl-year {
  font-family: var(--fd);
  font-size: clamp(22px, 8vw, 36px);
  font-weight: 800;
  color: color-mix(in srgb, var(--o) 25%, transparent);
  letter-spacing: .05em;
  position: relative;
  z-index: 1;
}

/* ── Card body ── */
.tl-card-body {
  padding: 12px 13px 14px;
  border-top: 2px solid transparent;
  transition: border-color .28s;
}
.tl-point:hover .tl-card-body { border-color: var(--o); }

/* ── Title ── */
/* Base: mobile */
.tl-title {
  font-family: var(--fd);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lt);
  line-height: 1;
}

/* ── Bullet list ── */
.tl-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 7px;
}
/* Base: mobile — minimum 12px */
.tl-bullets li {
  font-family: var(--fm);
  font-size: 12px;
  font-weight: 300;
  color: var(--lt);
  line-height: 1.62;
  letter-spacing: .02em;
  padding-left: 11px;
  position: relative;
}
.tl-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 4px;
  height: 1px;
  background: var(--lt);
}

/* SCROLLBAR */
.tl-scrollbar {
  position: absolute;
  height: 4px;
  background: color-mix(in srgb, var(--dk) 10%, transparent);
  border-radius: 999px;
  z-index: 4;
  bottom: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.tl-scrollbar.tl-scrollbar-visible {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}
.tl-scrollbar-thumb {
  position: absolute;
  top: 0;
  height: 100%;
  background: color-mix(in srgb, var(--o) 60%, transparent);
  border-radius: 999px;
  margin-top: -6px;
  padding-top: 6px;
  padding-bottom: 6px;
  box-sizing: content-box;
  transition: left 0.08s linear, background 0.2s ease;
  cursor: grab;
  will-change: left;
}
.tl-scrollbar-thumb:hover  { background: color-mix(in srgb, var(--o) 85%, transparent); }
.tl-scrollbar-thumb:active { cursor: grabbing; background: var(--o); }

/* SCROLL HINT */
.tl-scroll-hint {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 24px;
  width: 85px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 20px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease, transform .5s ease;
  transform: translateX(8px);
}
#s-timeline.active .tl-scroll-hint {
  opacity: 1;
  transform: translateX(0);
  transition: opacity .6s .75s ease, transform .6s .75s ease;
}
.tl-scroll-hint.dismissed {
  opacity: 0 !important;
  transform: translateX(0px) !important;
  transition: opacity .35s ease !important;
}
.tl-hint-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  /*background: color-mix(in srgb, var(--lt) 0%, transparent);*/
  /*backdrop-filter: blur(6px);*/
  /*-webkit-backdrop-filter: blur(6px);*/
  /*border: 1px solid color-mix(in srgb, var(--o) 0%, transparent);*/
  /*border-radius: 3px;*/
  padding: 7px 10px 7px 9px;
}
.tl-hint-arrow {
  display: flex;
  flex-direction: row;
  gap: 1px;
  align-items: center;
}
.tl-hint-chevron {
  width: 10px;
  height: 16px;
  animation: tl-bounce 1.5s ease-in-out infinite;
}
.tl-hint-chevron:nth-child(2) { animation-delay: .22s; opacity: .45; }
.tl-hint-chevron:nth-child(3) { animation-delay: .44s; opacity: .22; }
@keyframes tl-bounce {
  0%, 100% { transform: translateX(0); opacity: 1; }
  50%       { transform: translateX(4px); }
}

/* ══════════════════════════════════════════════════════
   SLIDE 10 — CONTACT
══════════════════════════════════════════════════════ */
#s7{background:var(--lt)}

.cf-wrap{max-width:680px;margin:0 auto;position:relative;
  opacity:0;transform:translateY(22px);transition:opacity .7s .12s,transform .7s .12s}
#s7.active .cf-wrap{opacity:1;transform:none}

/* Base: mobile — hidden to reclaim vertical space; restored at min-width:600px */
.cf-intro{display:none}

/* Base: mobile */
.cf{display:grid;gap:12px;margin-top:14px}

/* Base: mobile single column */
.cf-row{display:grid;grid-template-columns:1fr;gap:12px}

.cf-field{display:flex;flex-direction:column;gap:6px}

/* Base: ok at 13px (uppercase tracked) */
.cf-lbl{font-family:var(--fm);font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:color-mix(in srgb, var(--lt) 40%, transparent)}

/* CRITICAL: 16px minimum prevents iOS Safari auto-zoom on input focus */
.cf-in,.cf-ta{
  font-family:var(--fm);font-size:16px;font-weight:300;
  touch-action:manipulation;
  -webkit-appearance:none;appearance:none;border-radius:0;
  padding:10px 12px;background:color-mix(in srgb, var(--lt) 5%, transparent);
  border:1px solid color-mix(in srgb, var(--lt) 12%, transparent);
  color:var(--lt);transition:border-color .22s,background .22s;
  letter-spacing:.03em;outline:none;
  -webkit-tap-highlight-color:transparent;
}
.cf-in:focus,.cf-ta:focus{
  outline:none;border-color:var(--o);background:color-mix(in srgb, var(--o) 1%, transparent)
}
.cf-in::placeholder,.cf-ta::placeholder{
  color:color-mix(in srgb, var(--lt) 25%, transparent)
}

.cf-ta{resize:vertical;min-height:80px;line-height:1.7;font-family:var(--fm)}

.cf-btn{
  font-family:var(--fd);font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:13px 24px;background:var(--o);color:var(--dk);
  border:1px solid var(--o);cursor:pointer;transition:color .28s,background .28s,border-color .28s;
  position:relative;overflow:hidden;align-self:flex-start;margin-top:4px;
}
.cf-btn::before{
  content:'';position:absolute;inset:0;background:var(--lt);
  transform:scaleX(0);transform-origin:left;transition:transform .32s;z-index:-1
}
@media(hover:hover){.cf-btn:hover::before{transform:scaleX(1)}.cf-btn:hover{color:var(--dk)}}

/* Base: mobile */
.cf-info{font-family:var(--fm);font-size:11px;letter-spacing:.12em;
  color:color-mix(in srgb, var(--lt) 30%, transparent);margin-top:14px;line-height:1.6}
.cf-info a{color:var(--o);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.cf-info a:hover{border-bottom-color:var(--o)}

/* ── Footer strip ── */
/* Base: mobile — centred */
.cf-footer{
  margin-top:28px;padding-top:16px;
  border-top:1px solid color-mix(in srgb, var(--lt) 7%, transparent);
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;
  text-align:center;
}
.cf-footer-links{display:flex;gap:18px;justify-content:center}

/* Base: mobile */
.cf-footer-copy{font-family:var(--fm);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:color-mix(in srgb, var(--lt) 20%, transparent)}
.cf-footer-links a{font-family:var(--fm);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:color-mix(in srgb, var(--lt) 30%, transparent);text-decoration:none;transition:color .2s}
.cf-footer-links a:hover{color:var(--o)}

/* ── Honeypot ── */
/* tab-index and aria-hidden are HTML attributes — they must live on the
   HTML element itself, not here. This CSS only handles visual hiding. */
.cf-honeypot{
  position:absolute;
  width:1px;height:1px;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  overflow:hidden;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
}

/* Disabled state for the send button */
.cf-btn:disabled{
  opacity:.35;
  cursor:not-allowed;
  border-color:color-mix(in srgb, var(--lt) 25%, transparent);
}
.cf-btn:disabled::before{display:none}

/* ══════════════════════════════════════════════════════
   SLIDE THEME OVERRIDES
   These ID-scoped rules override global class colours
   for slides whose background has been switched.
══════════════════════════════════════════════════════ */

/* ── Supporters (--lt) ─────────────────────────────── */
/* Heading */
#s5 .s-ttl{color:var(--dk)}
/* Supporter cards: flip all text from --lt to --dk */
#s5 .st-name{color:var(--dk)}
#s5 .st-type{color:color-mix(in srgb, var(--dk) 50%, transparent)}
#s5 .st-red{
  color:color-mix(in srgb, var(--dk) 40%, transparent);
  background:color-mix(in srgb, var(--dk) 6%, transparent);
}

/* ── Roadmap / Timeline (--dk) ─────────────────────── */
/* Heading */
#s-timeline .s-ttl{color:var(--lt)}
/* Right-edge fade: must match --dk slide background */
#s-timeline .tl-container::after{background:linear-gradient(to left, var(--dk) 35%, transparent)}
/* Custom scrollbar track: visible on dark bg */
#s-timeline .tl-scrollbar{background:color-mix(in srgb, var(--lt) 10%, transparent)}
/* Scroll-hint chevrons: inherit --lt so SVG currentColor resolves correctly */
#s-timeline .tl-hint-inner{color:var(--lt)}

/* ── Team (--dk) ───────────────────────────────────── */
/* Heading */
#s6 .s-ttl{color:var(--lt)}
/* Edge fades: must match --dk slide background */
#s6 .tg-container::before{background:linear-gradient(to right, var(--dk) 35%, transparent)}
#s6 .tg-container::after{background:linear-gradient(to left,  var(--dk) 35%, transparent)}
/* Custom scrollbar track: visible on dark bg */
#s6 .tg-scrollbar{background:color-mix(in srgb, var(--lt) 10%, transparent)}
/* Scroll-hint chevrons */
#s6 .tg-hint-inner{color:var(--lt)}
/* Toggle labels: flip from --dk text to --lt text */
#s6 .team-toggle-label{color:color-mix(in srgb, var(--lt) 35%, transparent)}
#s6 .team-toggle-label-active{color:var(--lt)}
/* Toggle track ON state: use --lt tint so the dark thumb is visible */
#s6 .team-toggle[aria-checked="true"]{
  background:color-mix(in srgb, var(--lt) 15%, transparent);
  border-color:color-mix(in srgb, var(--lt) 20%, transparent);
}

/* ── Contact (--lt) ────────────────────────────────── */
/* Heading */
#s7 .s-ttl{color:var(--dk)}
/* Intro paragraph (restored at 600px+): flip from --lt to --dk */
#s7 .cf-intro{color:color-mix(in srgb, var(--dk) 55%, transparent)}
/* Field labels */
#s7 .cf-lbl{color:color-mix(in srgb, var(--dk) 40%, transparent)}
/* Inputs and textarea: dark text on faint --dk tint background */
#s7 .cf-in,
#s7 .cf-ta{
  color:var(--dk);
  background:color-mix(in srgb, var(--dk) 4%, transparent);
  border-color:color-mix(in srgb, var(--dk) 12%, transparent);
}
/* Placeholders */
#s7 .cf-in::placeholder,
#s7 .cf-ta::placeholder{color:color-mix(in srgb, var(--dk) 25%, transparent)}
/* Send button hover fill: use --dk so it's visible on --lt bg;
   text must flip to --lt on the dark fill */
#s7 .cf-btn::before{background:var(--dk)}
#s7 .cf-btn:hover{color:var(--lt)}
/* Disabled button border: match --lt bg context */
#s7 .cf-btn:disabled{border-color:color-mix(in srgb, var(--dk) 25%, transparent)}
/* Info text below form */
#s7 .cf-info{color:color-mix(in srgb, var(--dk) 30%, transparent)}
/* Footer strip */
#s7 .cf-footer{border-top-color:color-mix(in srgb, var(--dk) 8%, transparent)}
#s7 .cf-footer-copy{color:color-mix(in srgb, var(--dk) 20%, transparent)}
#s7 .cf-footer-links a{color:color-mix(in srgb, var(--dk) 30%, transparent)}

/* ══════════════════════════════════════════════════════
   ORIGINAL ROUTING ANIMATION CSS
══════════════════════════════════════════════════════ */
.header{display:flex;align-items:baseline;gap:20px;width:100%;padding:0 2px}
.header-title{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:color-mix(in srgb, var(--dk) 50%, transparent);font-weight:400}
.header-sub{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:color-mix(in srgb, var(--dk) 25%, transparent)}
.sim-outer{position:relative;border:1px solid color-mix(in srgb, var(--dk) 12.5%, transparent);background:var(--o)}
.sim-outer::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 3px,color-mix(in srgb, var(--dk) 2%, transparent) 3px,color-mix(in srgb, var(--dk) 2%, transparent) 4px);z-index:10}
.sim-outer::before{content:'';position:absolute;inset:-1px;pointer-events:none;background:linear-gradient(to right,color-mix(in srgb, var(--dk) 30%, transparent) 6px,transparent 6px) top left/14px 1px no-repeat,linear-gradient(to bottom,color-mix(in srgb, var(--dk) 30%, transparent) 6px,transparent 6px) top left/1px 14px no-repeat,linear-gradient(to left,color-mix(in srgb, var(--dk) 30%, transparent) 6px,transparent 6px) top right/14px 1px no-repeat,linear-gradient(to bottom,color-mix(in srgb, var(--dk) 30%, transparent) 6px,transparent 6px) top right/1px 14px no-repeat,linear-gradient(to right,color-mix(in srgb, var(--dk) 30%, transparent) 6px,transparent 6px) bottom left/14px 1px no-repeat,linear-gradient(to top,color-mix(in srgb, var(--dk) 30%, transparent) 6px,transparent 6px) bottom left/1px 14px no-repeat,linear-gradient(to left,color-mix(in srgb, var(--dk) 30%, transparent) 6px,transparent 6px) bottom right/14px 1px no-repeat,linear-gradient(to top,color-mix(in srgb, var(--dk) 30%, transparent) 6px,transparent 6px) bottom right/1px 14px no-repeat;z-index:11}
.status-bar{display:flex;width:100%;justify-content:space-between;align-items:center;padding:0 2px}
.status-group{display:flex;gap:24px;align-items:center}
.status-item{display:flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb, var(--dk) 35%, transparent)}
.status-count{font-size:11px;color:color-mix(in srgb, var(--dk) 65%, transparent);min-width:14px;text-align:right}
.swatch{width:5px;height:5px;border-radius:50%;background:black}
.swatch-depot{width:6px;height:6px;background:none;border:1px solid color-mix(in srgb, var(--dk) 60%, transparent);transform:rotate(45deg);border-radius:0}
@keyframes ripple-low{0%{stroke-opacity:.6;transform:scale(1)}100%{stroke-opacity:0;transform:scale(4.2)}}
@keyframes ripple-medium{0%{stroke-opacity:.7;transform:scale(1)}100%{stroke-opacity:0;transform:scale(3.5)}}
@keyframes ripple-high{0%{stroke-opacity:.85;transform:scale(1)}100%{stroke-opacity:0;transform:scale(3)}}
@keyframes core-low{0%,100%{opacity:.8}50%{opacity:.4}}
@keyframes core-medium{0%,100%{opacity:.95}50%{opacity:.45}}
@keyframes core-high{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes service-pulse{0%,100%{opacity:.9}50%{opacity:.2}}
@keyframes depot-idle{0%,100%{opacity:.55}50%{opacity:.25}}


/* ══════════════════════════════════════════════════════

   RESPONSIVE BREAKPOINTS — MOBILE FIRST
   ──────────────────────────────────────────────────────
   Breakpoint tiers:
   min-width: 480px  — larger phones / phablets
   min-width: 600px  — tablet portrait
   min-width: 680px  — grid promotions (values 4-col, supporters 3-col, form 2-col)
   min-width: 780px  — grid promotions (op + impact + pipeline 2-col)
   min-width: 900px  — full desktop
   max-height + landscape — short viewport (kept as combined query)
   min-width: 1440px — xl
   min-width: 1920px — 2xl
   min-width: 2560px — 3xl

══════════════════════════════════════════════════════ */

/* ─── 480px: larger phones ─────────────────────────── */
@media (min-width: 480px) {

  /* Show team card bios on phablets+ */
  .tc-bio{
    display: block;
    font-family:var(--fm);font-size:11px;font-weight:300;
    color:var(--lt);margin-top:5px;line-height:1.52;letter-spacing:.01em;
  }

  /* Slightly larger hero word */
  .h-word { font-size: clamp(54px, 16vw, 80px); }

  .h-tag { font-size: clamp(12px, 2.8vw, 14px); }
  .h-sub { font-size: clamp(12px, 2.8vw, 14px); }

  /* Team cards slightly wider */
  .tc { flex: 0 0 clamp(180px, 46vw, 240px); }
  .tc-init { font-size: 30px; }

  /* Timeline points */
  .tl-point { flex: 0 0 clamp(180px, 52vw, 240px); }
}

/* ─── 600px: tablet portrait ────────────────────────── */
@media (min-width: 600px) {

  /* Logo clearance and slide breathing room */
  :root { --logo-clearance: 50px; }
  .slide { padding-bottom: clamp(28px, 3.5dvh, 44px); }

  /* Grid texture — restore larger cell size */
  .has-grid::before { background-size: 60px 60px; }
  .has-dots::before { background-size: 60px 60px; }

  /* Fixed chrome — restore desktop sizing */
  #wm { font-size: 18px; top: 22px; left: 32px; letter-spacing: .12em; }
  #wm-dk { font-size: 18px; top: 22px; left: 32px; letter-spacing: .12em; }
  #contact-btn { top: 16px; right: 28px; width: 36px; height: 36px; }
  #contact-btn svg { width: 18px; height: 14px; }

  /* Shared inner layout */
  .si { padding: 0 clamp(24px, 3.5vw, 44px); }
  .s-eye { font-size: 10px; letter-spacing: .4em; }
  .s-eye::after { width: 52px; }
  .s-ttl { font-size: clamp(28px, 5.5vw, 52px); }
  .sh { margin-bottom: clamp(18px, 2.5vh, 28px); }

  /* Hero */
  .h-body { padding: 0 28px; }
  .h-eye { font-size: 14px; letter-spacing: .4em; margin-bottom: 18px; gap: 12px; }
  .h-eye::before, .h-eye::after { display: none; }
  .h-word { font-size: clamp(64px, 12vw, 140px); line-height: .9; }
  .h-tag { font-size: clamp(12px, 1.4vw, 14px); margin-top: 18px; }
  .h-sub { font-size: clamp(12px, 1.4vw, 14px); margin-bottom: 18px; }
  .h-met { gap: 28px; margin-top: 36px; justify-content: center; padding: 0; }
  .h-m { padding-left: 12px; }
  .h-mv { font-size: 24px; }
  .h-ml { font-size: 11px; letter-spacing: .18em; }
  .s-hint { bottom: 28px; }

  /* Values */
  .vc { padding: 26px 20px; }
  .v-ico { width: 28px; height: 28px; margin-bottom: 12px; }
  .v-n { font-size: 10px; margin-bottom: 7px; }
  .v-name { font-size: 18px; margin-bottom: 7px; }
  .v-d { font-size: 12px; line-height: 1.68; }

  /* Typing */
  .t-panel { padding: 38px 36px 32px; }
  .t-sub { font-size: 14px; letter-spacing: .22em; margin-top: 20px; }

  /* Operational — restore visible descriptions */
  .of-d {
    max-height: none;
    overflow: visible;
    transition: none;
    margin-top: 4px;
    font-family: var(--fm);
    font-size: 11px;
    font-weight: 300;
    color: var(--dk);
    line-height: 1.6;
    letter-spacing: .02em;
  }
  #s4 .sh { margin-bottom: 14px !important; }
  .of { padding: 6px 0; }
  .of-n { font-size: 17px; }
  .of-chev { width: clamp(9px, 0.9vw, 12px); height: 6px; }
  .om { margin-top: 0; }
  .mr { margin-bottom: 15px; }
  .ml { font-size: 11px; }
  .mv { font-size: 19px; }
  .lb { margin-top: 22px; padding: 16px 18px; }
  .lb-lbl { font-size: 10px; margin-bottom: 5px; }
  .lb-v { font-size: 38px; }
  .lb-v em { font-size: 18px; }
  .lb-s { font-size: 10px; }

  /* Impact */
  .imp-stmt { font-size: clamp(13px, 2.2vw, 22px); margin-top: 24px; line-height: 1.55; }
  .sg { gap: 3px; }
  .sb { padding: 24px 20px; }
  .sv { font-size: clamp(30px, 4.5vw, 54px); }
  .sl2 { font-size: 10px; margin-top: 6px; }
  .sq { font-size: 10px; margin-top: 3px; }

  /* Timeline */
  .tl-container { margin-top: 28px; }
  .tl-scroller { padding-bottom: 28px; }
  .tl-container::after { width: 70px; }
  .tl-point { flex: 0 0 clamp(190px, 28vw, 300px); }
  .tl-year { font-size: clamp(24px, 5.5vw, 42px); }
  .tl-card-body { padding: 13px 14px 15px; }
  .tl-title { font-size: 19px; }
  .tl-bullets li { font-size: 12px; }
  .tl-scroll-hint { width: 90px; bottom: 28px; }

  /* Supporters */
  .sup-g { margin-top: 28px; }
  .st { padding: 18px 14px; gap: 8px; }
  .st-name { font-size: 15px; }
  .st-type { font-size: 10px; letter-spacing: .15em; }
  .st-red { font-size: 13px; }

  /* Team */
  .tc { flex: 0 0 clamp(185px, 28vw, 280px); }
  .tc-init { font-size: 38px; }
  .tc-body { padding: 12px 13px 14px; }
  .tc-name { font-size: 17px; }
  .tc-role { font-size: 10px; letter-spacing: .15em; margin-top: 4px; }
  .tc-bio { font-size: 11px; line-height: 1.62; margin-top: 6px; letter-spacing: .02em; }
  .tg-container { margin-top: 28px; }
  .tg-scroller { padding-bottom: 28px; }
  .tg-scroll-hint { width: 90px; bottom: 28px; }
  .tg-hint-inner { padding: 7px 10px 7px 9px; }
  .team-toggle-wrap { margin-bottom: 20px; }

  /* Contact — restore intro text and desktop layout */
  .cf-intro {
    display: block;
    font-family: var(--fm);
    font-size: clamp(13px, 1.4vw, 15px);
    font-weight: 300;
    line-height: 1.82;
    color: color-mix(in srgb, var(--lt) 55%, transparent);
    margin-top: clamp(16px, 2vh, 24px);
    letter-spacing: .03em;
  }
  .cf { gap: 16px; margin-top: 28px; }
  .cf-row { gap: 16px; }
  .cf-ta { min-height: 100px; }
  .cf-btn { font-size: 13px; padding: 17px 46px; letter-spacing: .22em; }
  .cf-info { margin-top: 24px; font-size: 11px; letter-spacing: .14em; }
  .cf-footer { justify-content: space-between; text-align: left; margin-top: 36px; padding-top: 20px; }
  .cf-footer-links { justify-content: flex-end; }
}

/* ─── 680px: grid promotions ─────────────────────────── */
@media (min-width: 680px) {

  /* Values — promote to 4-column */
  .vg { grid-template-columns: repeat(4, 1fr); }

  /* Supporters — promote to 3-column */
  .sup-g { grid-template-columns: repeat(3, 1fr); }

  /* Contact form row — promote to 2-column */
  .cf-row { grid-template-columns: 1fr 1fr; }
}

/* ─── 780px: two-column content grids ───────────────── */
@media (min-width: 780px) {

  /* Operational — promote to 2-column */
  .og { grid-template-columns: 1fr 1fr; gap: 44px; }
  .ofs { margin-top: 24px; }

  /* Impact — promote to 2-column */
  .imp { grid-template-columns: 1fr 1.35fr; gap: 56px; }
  .imp-stmt { margin-top: 24px; }

  /* Pipeline — promote to 2-column */
  .imp-diag { grid-template-columns: 1fr 1fr; gap: 56px; }
}

/* ─── 900px: full desktop ─────────────────────────────── */
@media (min-width: 900px) {

  /* Logo clearance */
  :root { --logo-clearance: 56px; }
  .slide { padding-bottom: clamp(32px, 4dvh, 48px); }

  /* Shared inner layout */
  .si { padding: 0 clamp(18px, 4vw, 44px); }
  .s-eye { font-size: 10px; letter-spacing: .4em; margin-bottom: 12px; }
  .s-eye::after { width: 52px; }
  .s-ttl { font-size: clamp(34px, 5vw, 60px); }
  .sh { margin-bottom: 36px; }

  /* Hero */
  .h-body { max-width: 820px; }
  .s-hint { bottom: 28px; }

  /* Values */
  .vg { gap: 2px; }
  .vc { padding: 26px 20px; }
  .v-ico { width: 28px; height: 28px; }
  .v-n { font-size: 10px; }
  .v-name { font-size: 22px; }
  .v-d { font-size: 11px; }

  /* Typing */
  .t-panel { padding: 46px clamp(18px, 4vw, 44px) 40px; }
  .t-sub { font-size: 13px; letter-spacing: .28em; margin-top: 24px; }

  /* Operational */
  .og { gap: 44px; }
  .of { padding: 6px 0; gap: 11px; }
  .of-n { font-size: 17px; }
  .of-chev { margin-top: 6px; }
  .mr { margin-bottom: 15px; }
  .mt { margin-bottom: 5px; }
  .ml { font-size: 11px; }
  .mv { font-size: 19px; }
  .lb { margin-top: 22px; padding: 16px 18px; border-left: 2px solid var(--o); }
  .lb-lbl { font-size: 10px; margin-bottom: 5px; }
  .lb-v { font-size: 38px; }
  .lb-v em { font-size: 18px; }
  .lb-s { font-size: 10px; }

  /* Impact */
  .imp { gap: 56px; }
  .imp-stmt { font-size: clamp(15px, 2vw, 22px); margin-top: 24px; }
  .sg { gap: 3px; }
  .sb { padding: 24px 20px; }
  .sv { font-size: clamp(36px, 4.5vw, 54px); }
  .sl2 { font-size: 11px; margin-top: 6px; }
  .sq { font-size: 10px; margin-top: 3px; }

  /* Timeline */
  .tl-container { margin-top: 32px; }
  .tl-container::after { width: 90px; }
  .tl-scroller { padding-bottom: 32px; }
  .tl-track {
    padding-left: calc(max(0px, 50vw - 540px) + clamp(18px, 4vw, 44px));
  }
  .tl-spacer {
    flex: 0 0 calc(max(0px, 50vw - 540px) + clamp(18px, 4vw, 44px));
  }
  .tl-point { flex: 0 0 clamp(200px, 24vw, 350px); }
  .tl-year { font-size: clamp(28px, 5vw, 46px); }
  .tl-card-body { padding: 14px 14px 16px; }
  .tl-title { font-size: 19px; }
  .tl-bullets li { font-size: 11px; }
  .tl-scroll-hint { width: 100px; bottom: 32px; }

  /* Supporters */
  .sup-g { gap: 2px; margin-top: 32px; }
  .st { padding: 22px 18px; gap: 9px; }
  .st-name { font-size: 15px; }
  .st-type { font-size: 10px; letter-spacing: .16em; }
  .st-red { font-size: 15px; }

  /* Team */
  .tg-container { margin-top: 32px; }
  .tg-container::after { width: 90px; }
  .tg-scroller { padding-bottom: 32px; }
  .tg {
    padding-left: calc(max(0px, 50vw - 540px) + clamp(18px, 4vw, 44px));
  }
  .tg-spacer {
    flex: 0 0 calc(max(0px, 50vw - 540px) + clamp(18px, 4vw, 44px));
  }
  .tc { flex: 0 0 clamp(200px, 24vw, 350px); }
  .tc-init { font-size: 46px; }
  .tc-body { padding: 14px 14px 16px; }
  .tc-name { font-size: 19px; }
  .tc-role { font-size: 10px; letter-spacing: .17em; margin-top: 4px; }
  .tc-bio { font-size: 11px; margin-top: 7px; line-height: 1.62; letter-spacing: .02em; }
  .tg-scroll-hint { width: 100px; bottom: 32px; }
  .tg-hint-inner { padding: 7px 10px 7px 9px; }
  .team-toggle-wrap { margin-bottom: 20px; }

  /* Contact */
  .cf-intro { font-size: clamp(11px, 1.2vw, 14px); margin-top: 20px; }
  .cf { gap: 16px; margin-top: 28px; }
  .cf-in, .cf-ta {
    font-size: 16px;
    padding: 10px 10px;
  }
  .cf-ta { min-height: 130px; }
  .cf-btn { font-size: 13px; padding: 17px 46px; letter-spacing: .22em; }
  .cf-info { font-size: 11px; letter-spacing: .14em; margin-top: 24px; }
  .cf-footer { margin-top: 36px; padding-top: 20px; }
}

/* ── Landscape / short viewport — keep team cards within screen height ──
   Targets iPad mini landscape (≈1024×768) and similar aspect ratios.
   ────────────────────────────────────────────────────────────────────── */
@media (max-height: 820px) and (orientation: landscape) and (min-width: 600px) {
  .tc {
    flex: 0 0 min(clamp(160px, 22vw, 300px), 29dvh);
  }
  .tc-init {
    font-size: min(clamp(28px, 3.8vw, 52px), 5dvh);
  }
  .tc-body {
    padding: clamp(9px, 1.3dvh, 16px) clamp(9px, 1.1vw, 16px) clamp(10px, 1.5dvh, 18px);
  }
  .tc-name {
    font-size: min(clamp(14px, 1.5vw, 22px), 2.6dvh);
  }
  .tg-container {
    margin-top: clamp(14px, 2.2dvh, 32px);
  }
  #s6 .sh {
    margin-bottom: clamp(16px, 2.4dvh, 36px);
  }
  .team-toggle-wrap {
    margin-bottom: clamp(10px, 1.4dvh, 20px);
  }
}

/* ══════════════════════════════════════════════════════

   LARGE SCREEN RESPONSIVE — ≥ 1440px
   ──────────────────────────────────────────────────────
   Strategy: Tailwind-style breakpoint layers (xl / 2xl / 3xl).
   All fluid values use min(Xvw, Yvh) so content scales
   with whichever viewport axis is the bottleneck —
   ensuring nothing overflows regardless of aspect ratio.

   Baseline: 1280 × 800 (13″ laptop)
   xl  (≥1440px)  → ~1.2× scale
   2xl (≥1920px)  → ~1.5× scale
   3xl (≥2560px)  → ~2× scale
══════════════════════════════════════════════════════ */

/* ─── xl: ≥ 1440px ─────────────────────────────────── */
@media (min-width: 1440px) {

  /* Grid / dot textures — scale cell size with viewport */
  .has-grid::before  { background-size: clamp(60px, 5vw, 80px) clamp(60px, 5vw, 80px); }
  .has-dots::before  { background-size: clamp(60px, 5vw, 80px) clamp(60px, 5vw, 80px); }

  /* Fixed chrome */
  #wm {
    font-size: clamp(22px, min(1.5vw, 2vh), 30px);
    top: clamp(22px, 2.6vh, 34px);
    left: clamp(32px, 2.8vw, 48px);
  }
  #wm-dk {
    font-size: clamp(22px, min(1.5vw, 2vh), 30px);
    top: clamp(22px, 2.6vh, 34px);
    left: clamp(32px, 2.8vw, 48px);
  }
  #contact-btn {
    width:  clamp(36px, min(2.8vw, 4vh), 46px);
    height: clamp(36px, min(2.8vw, 4vh), 46px);
    top:   clamp(16px, 2vh, 26px);
    right: clamp(28px, 2.4vw, 44px);
  }

  /* Nav dots bar */
  #nav { bottom: clamp(18px, 2vh, 28px); padding: clamp(7px, 0.9vh, 11px) clamp(12px, 1.2vw, 18px); gap: 8px; }
  #nav-dk { bottom: clamp(18px, 2vh, 28px); padding: clamp(7px, 0.9vh, 11px) clamp(12px, 1.2vw, 18px); gap: 8px; }
  .nd-wrap { width: 28px; height: 28px; }
  .nd { width: 8px; height: 8px; }
  .nd.active { width: 26px; }

  /* ── Shared inner layout ── */
  .si {
    max-width: min(1280px, 89vw);
    padding: 0 clamp(44px, 4.5vw, 72px);
  }
  .si.wide {
    max-width: min(1380px, 93vw);
  }

  .s-eye {
    font-size: clamp(10px, min(0.88vw, 1.35vh), 14px);
    letter-spacing: .42em;
    margin-bottom: clamp(12px, 1.5vh, 18px);
  }
  .s-eye::after { width: clamp(52px, 4.2vw, 72px); }

  .s-ttl {
    font-size: clamp(52px, min(5.4vw, 7.6vh), 82px);
  }
  .sh {
    margin-bottom: clamp(36px, 4.5vh, 58px);
  }

  /* ── Slide 0: Hero ── */
  .h-body {
    max-width: clamp(820px, 70vw, 1020px);
    padding: 0 clamp(28px, 3vw, 52px);
  }
  .h-eye {
    font-size: clamp(14px, min(0.9vw, 1.4vh), 18px);
    margin-bottom: clamp(18px, 2.2vh, 28px);
    gap: clamp(12px, 1.2vw, 18px);
  }
  .h-eye::before, .h-eye::after {
    width: clamp(26px, 2.5vw, 40px);
  }
  .h-word {
    font-size: clamp(110px, min(11vw, 17vh), 188px) !important;
  }
  .h-tag {
    font-size: clamp(12px, min(1.2vw, 1.7vh), 16px);
    margin-top: clamp(18px, 2.2vh, 28px);
  }
  .h-sub {
    font-size: clamp(12px, min(1.2vw, 1.7vh), 16px);
    margin-bottom: clamp(18px, 2.2vh, 28px);
  }
  .h-met {
    margin-top: clamp(32px, 4.2vh, 52px);
    gap: clamp(28px, 3vw, 44px);
  }
  .h-m { padding-left: 14px; }
  .h-mv { font-size: clamp(24px, min(2.1vw, 3.1vh), 34px); }
  .h-ml { font-size: clamp(11px, min(0.76vw, 1.1vh), 14px); margin-top: 3px; }

  /* Scroll hint */
  .s-hint { bottom: clamp(28px, 3.5vh, 44px); }
  .sh-l { height: clamp(34px, 5vh, 50px); }

  /* ── Slide 2: Values ── */
  .vg { gap: 3px; }
  .vc {
    padding: clamp(26px, 3.4vh, 46px) clamp(20px, 2vw, 36px);
  }
  .v-ico {
    width:  clamp(28px, min(2.4vw, 3.4vh), 42px);
    height: clamp(28px, min(2.4vw, 3.4vh), 42px);
    margin-bottom: clamp(12px, 1.6vh, 22px);
  }
  .v-n { font-size: clamp(10px, min(0.68vw, 0.95vh), 13px); margin-bottom: 9px; }
  .v-name {
    font-size: clamp(22px, min(1.85vw, 2.6vh), 30px);
    margin-bottom: 9px;
  }
  .v-d {
    font-size: clamp(11px, min(0.86vw, 1.22vh), 15px);
    line-height: 1.72;
  }

  /* ── Slide 3: Typing ── */
  .t-panel {
    padding: clamp(46px, 5.2vh, 68px) clamp(56px, 5.5vw, 84px);
  }
  .t-sub {
    font-size: clamp(13px, min(0.78vw, 1.2vh), 16px);
    letter-spacing: .3em;
    margin-top: clamp(24px, 3vh, 38px);
  }

  /* ── Slide 4: Operational ── */
  #s4 .sh { margin-bottom: clamp(24px, 3.2vh, 42px) !important; }
  .og { gap: clamp(52px, 5.5vw, 88px); }
  .ofs { margin-top: clamp(26px, 3.5vh, 42px); }
  .of { padding: clamp(9px, 1.1vh, 18px) 0; gap: 16px; }
  .of-n { font-size: clamp(19px, min(1.45vw, 2.1vh), 28px); }
  .of-d { font-size: clamp(11px, min(0.74vw, 1.08vh), 15px); margin-top: 6px; }
  .of-chev { width: clamp(13px, min(1vw, 1.46vh), 18px); margin-top: 8px; }
  .mv { font-size: clamp(22px, min(1.6vw, 2.3vh), 32px); }
  .ml { font-size: clamp(11px, min(0.7vw, 1.04vh), 14px); }
  .mr { margin-bottom: clamp(17px, 2.1vh, 30px); }
  .mt { margin-bottom: clamp(6px, 0.8vh, 11px); }
  .lb {
    margin-top: clamp(26px, 3.3vh, 48px);
    padding: clamp(20px, 2.4vh, 34px) clamp(22px, 2vw, 36px);
    border-left-width: 3px;
  }
  .lb-lbl { font-size: clamp(11px, min(0.7vw, 1.04vh), 14px); margin-bottom: 8px; }
  .lb-v { font-size: clamp(44px, min(3.5vw, 5.1vh), 72px); }
  .lb-v em { font-size: clamp(22px, min(1.7vw, 2.5vh), 32px); }
  .lb-s { font-size: clamp(11px, min(0.66vw, 0.98vh), 14px); margin-top: 5px; }

  /* ── Impact ── */
  .imp { gap: clamp(64px, 6.2vw, 110px); }
  .imp-stmt {
    font-size: clamp(17px, min(1.45vw, 2.2vh), 28px);
    margin-top: clamp(28px, 3.4vh, 42px);
  }
  .sg { gap: 4px; }
  .sb { padding: clamp(26px, 3.3vh, 50px) clamp(22px, 2vw, 38px); }
  .sv { font-size: clamp(52px, min(4.3vw, 6.2vh), 84px) !important; }
  .sl2 { font-size: clamp(11px, min(0.7vw, 1.04vh), 15px); margin-top: 10px; }
  .sq  { font-size: clamp(10px,  min(0.6vw, 0.9vh),  13px); margin-top: 5px; }

  /* ── Supporters ── */
  .sup-g { margin-top: clamp(34px, 4.2vh, 62px); gap: 4px; }
  .st {
    padding: clamp(24px, 3vh, 46px) clamp(20px, 1.8vw, 32px);
    gap: 13px;
  }
  .st-name { font-size: clamp(17px, min(1.2vw, 1.75vh), 26px); }
  .st-type { font-size: clamp(10px, min(0.64vw, 0.96vh), 14px); letter-spacing: .19em; }
  .st-red  { font-size: clamp(17px, min(1.2vw, 1.75vh), 26px); }

  /* ── Team ── */
  .tg {
    /* half(1280px) = 640px */
    padding-left: calc(max(0px, 50vw - 640px) + clamp(44px, 4.5vw, 72px));
  }
  .tg-spacer {
    flex: 0 0 calc(max(0px, 50vw - 640px) + clamp(44px, 4.5vw, 72px));
  }
  .tl-track {
    padding-left: calc(max(0px, 50vw - 640px) + clamp(44px, 4.5vw, 72px));
  }
  .tl-spacer {
    flex: 0 0 calc(max(0px, 50vw - 640px) + clamp(44px, 4.5vw, 72px));
  }
  .tg-container { margin-top: clamp(32px, 4vh, 58px); }
  .tc { flex: 0 0 clamp(200px, min(18.5vw, 25vh), 340px); }
  .tc-init { font-size: clamp(52px, min(3.8vw, 5.2vh), 76px); }
  .tc-body { padding: clamp(16px, 2.1vh, 26px) clamp(16px, 1.5vw, 24px) clamp(18px, 2.3vh, 30px); }
  .tc-name { font-size: clamp(21px, min(1.55vw, 2.2vh), 30px); }
  .tc-role { font-size: clamp(10px, min(0.64vw, 0.96vh), 14px); margin-top: 6px; }
  .tc-bio  { font-size: clamp(11px, min(0.64vw, 0.96vh), 14px); margin-top: 9px; line-height: 1.68; }

  /* ── Timeline ── */
  .tl-point { flex: 0 0 clamp(220px, min(19.5vw, 26vh), 300px); }
  .tl-card-top::after { background-size: 10px 10px; }
  .tl-year  { font-size: clamp(46px, min(3.9vw, 5.4vh), 66px); }
  .tl-card-body {
    padding: clamp(14px, 1.8vh, 22px) clamp(14px, 1.4vw, 22px) clamp(16px, 2vh, 26px);
  }
  .tl-title { font-size: clamp(19px, min(1.6vw, 2.3vh), 26px); }
  .tl-bullets li { font-size: clamp(11px, min(0.72vw, 1.04vh), 14px); margin-top: 0; line-height: 1.68; }
  .tl-container { margin-top: clamp(28px, 3.4vh, 50px); }

  /* ── Contact ── */
  .cf-wrap { max-width: clamp(720px, 46vw, 1080px); }
  .cf-intro {
    font-size: clamp(12px, min(0.8vw, 1.2vh), 16px);
    margin-top: clamp(22px, 2.6vh, 34px);
    line-height: 1.8;
  }
  .cf { gap: clamp(20px, 2.6vh, 34px); margin-top: clamp(32px, 4vh, 54px); }
  .cf-row { gap: clamp(20px, 2.5vw, 34px); }
  .cf-in, .cf-ta {
    font-size: clamp(14px, min(0.98vw, 1.44vh), 18px);
    padding: clamp(14px, 1.7vh, 22px) clamp(16px, 1.5vw, 24px);
  }
  .cf-ta { min-height: clamp(100px, 13.5vh, 200px); }
  .cf-btn {
    font-size: clamp(13px, min(0.86vw, 1.22vh), 16px);
    padding: clamp(16px, 1.9vh, 26px) clamp(42px, 3.7vw, 64px);
    letter-spacing: .2em;
  }
}

/* ─── 2xl: ≥ 1920px ─────────────────────────────────── */
@media (min-width: 1920px) {

  .has-grid::before  { background-size: clamp(72px, 4.5vw, 100px) clamp(72px, 4.5vh, 100px); }
  .has-dots::before  { background-size: clamp(72px, 4.5vw, 100px) clamp(72px, 4.5vh, 100px); }

  #wm {
    font-size: clamp(22px, min(1.5vw, 2vh), 30px);
    top: clamp(28px, 2.8vh, 42px);
    left: clamp(42px, 2.8vw, 62px);
  }
  #wm-dk {
    font-size: clamp(22px, min(1.5vw, 2vh), 30px);
    top: clamp(28px, 2.8vh, 42px);
    left: clamp(42px, 2.8vw, 62px);
  }
  #contact-btn {
    width:  clamp(42px, min(2.6vw, 3.8vh), 56px);
    height: clamp(42px, min(2.6vw, 3.8vh), 56px);
    top:   clamp(20px, 2.2vh, 32px);
    right: clamp(36px, 2.4vw, 52px);
  }
  #nav { padding: clamp(8px, 0.9vh, 13px) clamp(14px, 1.2vw, 22px); gap: 9px; border-radius: 36px; }
  #nav-dk { padding: clamp(8px, 0.9vh, 13px) clamp(14px, 1.2vw, 22px); gap: 9px; border-radius: 36px; }
  .nd { width: 9px; height: 9px; }
  .nd.active { width: 28px; }

  .si {
    max-width: min(1560px, 86vw);
    padding: 0 clamp(60px, 5vw, 96px);
  }
  .si.wide { max-width: min(1680px, 88vw); }

  .s-eye {
    font-size: clamp(12px, min(0.78vw, 1.24vh), 18px);
    letter-spacing: .44em;
  }
  .s-eye::after { width: clamp(62px, 4.6vw, 92px); }
  .s-ttl { font-size: clamp(68px, min(4.8vw, 6.8vh), 108px); }
  .sh    { margin-bottom: clamp(44px, 5.2vh, 74px); }

  .h-body { max-width: clamp(1000px, 68vw, 1400px); }
  .h-word { font-size: clamp(150px, min(9.5vw, 15vh), 248px) !important; }
  .h-eye {
    font-size: clamp(14px, min(0.78vw, 1.24vh), 18px);
    gap: clamp(16px, 1.4vw, 24px);
  }
  .h-eye::before, .h-eye::after { width: clamp(30px, 2.8vw, 50px); }
  .h-tag { font-size: clamp(14px, min(1.1vw, 1.6vh), 20px); margin-top: clamp(22px, 2.7vh, 36px); }
  .h-sub { font-size: clamp(14px, min(1.1vw, 1.6vh), 20px); margin-bottom: clamp(22px, 2.7vh, 36px); }
  .h-met {
    margin-top: clamp(42px, 5vh, 66px);
    gap: clamp(36px, 3.2vw, 56px);
  }
  .h-m { padding-left: 18px; }
  .h-mv { font-size: clamp(30px, min(1.78vw, 2.68vh), 44px); }
  .h-ml { font-size: clamp(11px, min(0.7vw, 1.04vh), 15px); }

  .vg { gap: 4px; }
  .vc { padding: clamp(32px, 4.2vh, 58px) clamp(24px, 2.2vw, 44px); }
  .v-ico {
    width:  clamp(30px, min(2.2vw, 3.2vh), 50px);
    height: clamp(30px, min(2.2vw, 3.2vh), 50px);
    margin-bottom: clamp(14px, 1.9vh, 26px);
  }
  .v-n    { font-size: clamp(11px, min(0.62vw, 0.92vh), 15px); margin-bottom: 11px; }
  .v-name { font-size: clamp(26px, min(1.7vw, 2.36vh), 40px); margin-bottom: 11px; }
  .v-d    { font-size: clamp(12px, min(0.8vw, 1.16vh), 17px); }

  .t-panel { padding: clamp(60px, 6.8vh, 90px) clamp(78px, 6.4vw, 112px); }
  .t-sub { font-size: clamp(13px, min(0.72vw, 1.12vh), 17px); }

  /* ── Operational ── */
  #s4 .sh { margin-bottom: clamp(24px, 3.2vh, 42px) !important; }
  .og { gap: clamp(52px, 5.5vw, 88px); }
  .ofs { margin-top: clamp(26px, 3.5vh, 42px); }
  .of { padding: clamp(9px, 1.1vh, 18px) 0; gap: 16px; }
  .of-n { font-size: clamp(19px, min(1.45vw, 2.1vh), 28px); }
  .of-d { font-size: clamp(11px, min(0.74vw, 1.08vh), 15px); margin-top: 6px; }
  .of-chev { width: clamp(13px, min(1vw, 1.46vh), 18px); margin-top: 8px; }
  .mv { font-size: clamp(22px, min(1.6vw, 2.3vh), 32px); }
  .ml { font-size: clamp(11px, min(0.7vw, 1.04vh), 14px); }
  .mr { margin-bottom: clamp(17px, 2.1vh, 30px); }
  .mt { margin-bottom: clamp(6px, 0.8vh, 11px); }
  .lb {
    margin-top: clamp(26px, 3.3vh, 48px);
    padding: clamp(20px, 2.4vh, 34px) clamp(22px, 2vw, 36px);
    border-left-width: 3px;
  }
  .lb-lbl { font-size: clamp(11px, min(0.7vw, 1.04vh), 14px); margin-bottom: 8px; }
  .lb-v { font-size: clamp(44px, min(3.5vw, 5.1vh), 72px); }
  .lb-v em { font-size: clamp(22px, min(1.7vw, 2.5vh), 32px); }
  .lb-s { font-size: clamp(11px, min(0.66vw, 0.98vh), 14px); margin-top: 5px; }

  /* ── Impact ── */
  .imp { gap: clamp(64px, 6.2vw, 110px); }
  .imp-stmt {
    font-size: clamp(17px, min(1.45vw, 2.2vh), 28px);
    margin-top: clamp(28px, 3.4vh, 42px);
  }
  .sg { gap: 4px; }
  .sb { padding: clamp(26px, 3.3vh, 50px) clamp(22px, 2vw, 38px); }
  .sv { font-size: clamp(52px, min(4.3vw, 6.2vh), 84px) !important; }
  .sl2 { font-size: clamp(11px, min(0.7vw, 1.04vh), 15px); margin-top: 10px; }
  .sq  { font-size: clamp(10px,  min(0.6vw, 0.9vh),  13px); margin-top: 5px; }

  /* ── Supporters ── */
  .sup-g { margin-top: clamp(34px, 4.2vh, 62px); gap: 4px; }
  .st {
    padding: clamp(24px, 3vh, 46px) clamp(20px, 1.8vw, 32px);
    gap: 13px;
  }
  .st-name { font-size: clamp(17px, min(1.2vw, 1.75vh), 26px); }
  .st-type { font-size: clamp(10px, min(0.64vw, 0.96vh), 14px); letter-spacing: .19em; }
  .st-red  { font-size: clamp(17px, min(1.2vw, 1.75vh), 26px); }

  /* ── Team ── */
  .tg {
    /* half(1560px) = 780px */
    padding-left: calc(max(0px, 50vw - 780px) + clamp(60px, 5vw, 96px));
  }
  .tg-spacer {
    flex: 0 0 calc(max(0px, 50vw - 780px) + clamp(60px, 5vw, 96px));
  }
  .tl-track {
    padding-left: calc(max(0px, 50vw - 780px) + clamp(60px, 5vw, 96px));
  }
  .tl-spacer {
    flex: 0 0 calc(max(0px, 50vw - 780px) + clamp(60px, 5vw, 96px));
  }
  .tg-container { margin-top: clamp(32px, 4vh, 58px); }
  .tc { flex: 0 0 clamp(240px, min(18.5vw, 25vh), 340px); }
  .tc-init { font-size: clamp(52px, min(3.8vw, 5.2vh), 76px); }
  .tc-body { padding: clamp(16px, 2.1vh, 26px) clamp(16px, 1.5vw, 24px) clamp(18px, 2.3vh, 30px); }
  .tc-name { font-size: clamp(21px, min(1.55vw, 2.2vh), 30px); }
  .tc-role { font-size: clamp(10px, min(0.64vw, 0.96vh), 14px); margin-top: 6px; }
  .tc-bio  { font-size: clamp(11px, min(0.64vw, 0.96vh), 14px); margin-top: 9px; line-height: 1.68; }

  /* ── Contact ── */
  .cf-wrap { max-width: clamp(720px, 46vw, 1080px); }
  .cf-intro {
    font-size: clamp(12px, min(0.8vw, 1.2vh), 16px);
    margin-top: clamp(22px, 2.6vh, 34px);
    line-height: 1.8;
  }
  .cf { gap: clamp(20px, 2.6vh, 34px); margin-top: clamp(32px, 4vh, 54px); }
  .cf-row { gap: clamp(20px, 2.5vw, 34px); }
  .cf-in, .cf-ta {
    font-size: clamp(14px, min(0.98vw, 1.44vh), 18px);
    padding: clamp(14px, 1.7vh, 22px) clamp(16px, 1.5vw, 24px);
  }
  .cf-ta { min-height: clamp(100px, 13.5vh, 200px); }
  .cf-btn {
    font-size: clamp(13px, min(0.86vw, 1.22vh), 16px);
    padding: clamp(16px, 1.9vh, 26px) clamp(42px, 3.7vw, 64px);
    letter-spacing: .2em;
  }
}

/* ─── 3xl: ≥ 2560px (2K / 4K) ───────────────────── */
@media (min-width: 2560px) {

  .has-grid::before  { background-size: clamp(88px, 5vw, 120px) clamp(88px, 5vh, 120px); }
  .has-dots::before  { background-size: clamp(88px, 5vw, 120px) clamp(88px, 5vh, 120px); }

  #wm {
    font-size: clamp(22px, min(1.5vw, 2vh), 30px);
    top: clamp(34px, 3.1vh, 48px);
    left: clamp(50px, 2.8vw, 76px);
  }
  #wm-dk {
    font-size: clamp(22px, min(1.5vw, 2vh), 30px);
    top: clamp(34px, 3.1vh, 48px);
    left: clamp(50px, 2.8vw, 76px);
  }
  #contact-btn {
    width:  clamp(50px, min(2.4vw, 3.6vh), 66px);
    height: clamp(50px, min(2.4vw, 3.6vh), 66px);
    top:   clamp(24px, 2.4vh, 36px);
    right: clamp(42px, 2.4vw, 60px);
  }
  #nav { padding: clamp(9px, 1vh, 15px) clamp(16px, 1.3vw, 24px); gap: 10px; border-radius: 40px; }
  #nav-dk { padding: clamp(9px, 1vh, 15px) clamp(16px, 1.3vw, 24px); gap: 10px; border-radius: 40px; }
  .nd { width: 10px; height: 10px; }
  .nd.active { width: 32px; }

  .si {
    max-width: min(2020px, 84vw);
    padding: 0 clamp(80px, 5.2vw, 130px);
  }
  .si.wide { max-width: min(2160px, 86vw); }

  .s-eye {
    font-size: clamp(13px, min(0.74vw, 1.15vh), 20px);
    letter-spacing: .46em;
  }
  .s-eye::after { width: clamp(72px, 4.8vw, 110px); }
  .s-ttl { font-size: clamp(80px, min(5.2vw, 7.2vh), 128px); }
  .sh    { margin-bottom: clamp(52px, 5.8vh, 84px); }

  .h-body { max-width: clamp(1200px, 72vw, 1600px); }
  .h-word { font-size: clamp(180px, min(10.5vw, 16.5vh), 290px) !important; }
  .h-eye {
    font-size: clamp(14px, min(0.74vw, 1.15vh), 19px);
    gap: clamp(18px, 1.6vw, 28px);
  }
  .h-eye::before, .h-eye::after { width: clamp(36px, 3vw, 56px); }
  .h-tag { font-size: clamp(15px, min(1vw, 1.55vh), 22px); margin-top: clamp(26px, 3vh, 40px); }
  .h-sub { font-size: clamp(15px, min(1vw, 1.55vh), 22px); margin-bottom: clamp(26px, 3vh, 40px); }
  .h-met {
    margin-top: clamp(48px, 5.5vh, 76px);
    gap: clamp(40px, 3.5vw, 64px);
  }
  .h-m { padding-left: 20px; }
  .h-mv { font-size: clamp(34px, min(1.9vw, 2.9vh), 50px); }
  .h-ml { font-size: clamp(13px, min(0.66vw, 1.02vh), 17px); }

  .vg { gap: 5px; }
  .vc { padding: clamp(38px, 4.8vh, 66px) clamp(28px, 2.4vw, 50px); }
  .v-ico {
    width:  clamp(34px, min(2.4vw, 3.4vh), 54px);
    height: clamp(34px, min(2.4vw, 3.4vh), 54px);
    margin-bottom: clamp(16px, 2.1vh, 30px);
  }
  .v-n    { font-size: clamp(11px, min(0.58vw, 0.88vh), 15px); margin-bottom: 13px; }
  .v-name { font-size: clamp(28px, min(1.75vw, 2.4vh), 44px); margin-bottom: 13px; }
  .v-d    { font-size: clamp(13px, min(0.76vw, 1.12vh), 19px); }

  .t-panel { padding: clamp(68px, 7.5vh, 100px) clamp(88px, 7vw, 124px); }
  .t-sub { font-size: clamp(12px, min(0.68vw, 1.06vh), 16px); }

  #s4 .sh { margin-bottom: clamp(28px, 3.6vh, 52px) !important; }
  .og { gap: clamp(64px, 6.5vw, 110px); }
  .of { padding: clamp(11px, 1.3vh, 22px) 0; gap: 18px; }
  .of-n { font-size: clamp(22px, min(1.38vw, 2vw), 34px); }
  .of-d { font-size: clamp(12px, min(0.7vw, 1.04vh), 17px); }
  .of-chev { width: clamp(14px, min(0.95vw, 1.38vh), 20px); }
  .mv { font-size: clamp(26px, min(1.55vw, 2.2vh), 38px); }
  .ml { font-size: clamp(12px, min(0.66vw, 1vh), 16px); }
  .mr { margin-bottom: clamp(19px, 2.4vh, 36px); }
  .lb {
    margin-top: clamp(32px, 3.8vh, 60px);
    padding: clamp(24px, 2.8vh, 42px) clamp(26px, 2.2vw, 44px);
  }
  .lb-lbl { font-size: clamp(12px, min(0.66vw, 1vh), 16px); }
  .lb-v   { font-size: clamp(54px, min(3.4vw, 5vw), 90px); }
  .lb-v em { font-size: clamp(26px, min(1.6vw, 2.3vh), 38px); }
  .lb-s   { font-size: clamp(12px, min(0.62vw, 0.94vh), 16px); }

  .imp { gap: clamp(80px, 7vw, 140px); }
  .imp-stmt { font-size: clamp(20px, min(1.36vw, 2.1vh), 34px); }
  .sb { padding: clamp(30px, 3.8vh, 60px) clamp(26px, 2.1vw, 46px); }
  .sv { font-size: clamp(64px, min(4.1vw, 6vh), 104px) !important; }
  .sl2 { font-size: clamp(12px, min(0.66vw, 1vh), 17px); }
  .sq  { font-size: clamp(11px, min(0.56vw, 0.86vh), 15px); }

  .sup-g { margin-top: clamp(42px, 4.9vh, 76px); gap: 5px; }
  .st { padding: clamp(28px, 3.5vh, 55px) clamp(24px, 1.9vw, 38px); gap: 16px; }
  .st-name { font-size: clamp(20px, min(1.15vw, 1.68vh), 32px); }
  .st-type { font-size: clamp(11px, min(0.6vw, 0.9vh), 16px); }
  .st-red  { font-size: clamp(20px, min(1.15vw, 1.68vh), 32px); }

  .tg {
    /* half(2020px) = 1010px */
    padding-left: calc(max(0px, 50vw - 1010px) + clamp(80px, 5.2vw, 130px));
  }
  .tg-spacer {
    flex: 0 0 calc(max(0px, 50vw - 1010px) + clamp(80px, 5.2vw, 130px));
  }
  .tl-track {
    padding-left: calc(max(0px, 50vw - 1010px) + clamp(80px, 5.2vw, 130px));
  }
  .tl-spacer {
    flex: 0 0 calc(max(0px, 50vw - 1010px) + clamp(80px, 5.2vw, 130px));
  }
  .tg-container { margin-top: clamp(40px, 4.8vh, 72px); }
  .tc { flex: 0 0 clamp(280px, min(17vw, 23vh), 420px); }
  .tc-init { font-size: clamp(60px, min(3.6vw, 5vw), 92px); }
  .tc-body { padding: clamp(18px, 2.5vh, 34px) clamp(18px, 1.6vw, 28px) clamp(22px, 2.8vh, 40px); }
  .tc-name { font-size: clamp(24px, min(1.5vw, 2.1vh), 36px); }
  .tc-role { font-size: clamp(11px, min(0.6vw, 0.9vh), 16px); margin-top: 7px; }
  .tc-bio  { font-size: clamp(12px, min(0.6vw, 0.9vh), 16px); margin-top: 11px; }

  .cf-wrap { max-width: clamp(860px, 44vw, 1300px); }
  .cf-intro { font-size: clamp(14px, min(0.74vw, 1.12vh), 20px); margin-top: clamp(26px, 3.2vh, 44px); }
  .cf { gap: clamp(24px, 3vh, 42px); margin-top: clamp(38px, 4.5vh, 64px); }
  .cf-row { gap: clamp(24px, 2.6vw, 42px); }
  .cf-in, .cf-ta {
    font-size: clamp(15px, min(0.92vw, 1.36vh), 21px);
    padding: clamp(16px, 2vh, 28px) clamp(18px, 1.6vw, 28px);
  }
  .cf-ta { min-height: clamp(110px, 13vh, 230px); }
  .cf-btn {
    font-size: clamp(14px, min(0.8vw, 1.15vh), 19px);
    padding: clamp(18px, 2.2vh, 32px) clamp(48px, 3.8vw, 76px);
    letter-spacing: .22em;
  }
}

/* ── Hide custom scrollbars on touchscreen devices ── */
@media (pointer: coarse) {
  .tl-scrollbar,
  .tl-scrollbar.tl-scrollbar-visible,
  .tg-scrollbar,
  .tg-scrollbar.tg-scrollbar-visible {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════
   TEAM SLIDE — Inline header + toggle row
══════════════════════════════════════════════════════ */

/* s6-header: stack on mobile, row on larger screens */
.s6-header {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* On tablet and up, place heading and toggle side-by-side */
@media (min-width: 768px) {
  .s6-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: clamp(14px, 2dvh, 28px);
  }
  /* The .sh inside s6-header should not add its own bottom margin
     since s6-header handles spacing to the tg-container */
  #s6 .s6-header .sh,
  .s6-header .sh {
    margin-bottom: 0;
  }
  /* Move the toggle-wrap bottom margin to the container */
  .s6-header .team-toggle-wrap {
    margin-bottom: 0;
  }
}

/* ══════════════════════════════════════════════════════
   CONTACT SLIDE — Side-by-side heading + form
══════════════════════════════════════════════════════ */

/* Base: stacked on mobile (existing .sh + .cf-wrap handle this) */
.s7-inner {
  display: flex;
  flex-direction: column;
}

/* On tablet and up, switch to two-column */
@media (min-width: 768px) {
  .s7-inner {
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(32px, 5vw, 72px);
  }
  .s7-heading {
    flex: 0 0 auto;
    width: clamp(180px, 24vw, 320px);
    /* Pin the heading top to align with form top */
    padding-top: 2px;
    margin-bottom: 0;
    position: sticky;
    top: 0; /* no sticky scroll needed — just keeps it from forcing height */
  }
  .s7-form {
    flex: 1 1 auto;
    margin: 0; /* override default margin:0 auto */
    max-width: none;
    min-width: 0;
  }
}


/* ══════════════════════════════════════════════════════
   INFO TIP — text-wrap hover/click popup

   Usage A — plain text / anchor trigger:
     <span class="info-tip-text">
       <a>MainText</a>
       <span class="info-tip-popup">Popup content.</span>
     </span>

   Usage B — dg-cell trigger:
     <span class="info-tip-text">
       <div class="dg-cell" id="dgCellX">…</div>
       <span class="info-tip-popup">Popup content.</span>
     </span>

   On init, JS immediately portals every .info-tip-popup to document.body
   so it never sits in an inline formatting context (which would shift
   surrounding text). Open/close state is driven by .tip-popup-open /
   .tip-popup-below / .tip-popup-dark applied directly to the popup.
══════════════════════════════════════════════════════ */

/* Wrapper: fully transparent to layout — contributes no box of its own */
.info-tip-text {
  display: inline;
  vertical-align: baseline;
}

/* ── Popup box — hidden by default ── */
.info-tip-popup {
  /* Portalled to document.body by JS; top/left set precisely at open time. */
  position: fixed;
  top: 0;
  left: 0;
  transform: translateY(6px); /* Y-only slide-in */

  width: max-content;
  max-width: min(260px, 82vw);

  font-family: var(--fm);
  font-size: 11px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.65;
  letter-spacing: .03em;
  text-transform: none;
  text-align: left;

  color: var(--dk);
  background: color-mix(in srgb, var(--lt) 97%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  border: 1px solid color-mix(in srgb, var(--dk) 11%, transparent);
  border-left: 2px solid var(--o);
  border-radius: 4px;
  padding: 9px 12px 9px 13px;

  box-shadow: 0 3px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.05);

  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 10000; /* above all fixed chrome (nav, wm, contact-btn = 9000) */

  white-space: normal;
}

/* ── Open / direction / dark states — applied directly by JS ── */
.info-tip-popup.tip-popup-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.info-tip-popup.tip-popup-below {
  transform: translateY(-6px);
}
.info-tip-popup.tip-popup-below.tip-popup-open {
  transform: translateY(0);
}
.info-tip-popup.tip-popup-dark {
  color: var(--lt);
  background: color-mix(in srgb, var(--dk) 88%, var(--lt));
  border-color: color-mix(in srgb, var(--lt) 13%, transparent);
  border-left-color: var(--o);
  box-shadow: 0 3px 16px rgba(0,0,0,.28), 0 1px 4px rgba(0,0,0,.14);
}