/* ============================================================
   Home Service Round Table - concept mockup
   Colors, logo and supporting font per HSRT_Brand-Guidelines_2026
   Blue #0396C7 / Dark Gray #2B2B2B / White #FFFFFF / Barlow
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  --blue:#0396C7;
  --blue-lift:#2FB4E0;
  --blue-deep:#02719A;
  --gray:#2B2B2B;
  --base:#1B1B1B;
  --base-2:#232323;
  --surface:#2B2B2B;
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.22);
  --white:#fff;
  --dim:rgba(255,255,255,.66);
  --dimmer:rgba(255,255,255,.44);
  --ink:#1B1B1B;
  --sans:"Barlow","Helvetica Neue",Arial,sans-serif;
  --shell:1240px;
  --ease:cubic-bezier(.22,1,.36,1);
  --card:0 26px 60px -30px rgba(0,0,0,.85);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--sans) !important;color:var(--white);background:var(--base);
  -webkit-font-smoothing:antialiased;font-size:18px;line-height:1.66;overflow-x:hidden;
}
body {
    
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif !important;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
h1,h2,h3,h4,h5{
  margin:0;font-weight:800;line-height:1.02;letter-spacing:-.015em;
  text-transform:uppercase;text-wrap:balance;
}
h1{font-weight:900}
p{margin:0 0 1.1em;text-wrap:pretty}
li,summary,figcaption,blockquote{text-wrap:pretty}
.shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 24px;position:relative;z-index:2}
.center{text-align:center}
/* available to screen readers and the document outline, not shown */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.mono-num{font-variant-numeric:tabular-nums}

/* ---------- SECTION SHELL ---------- */
.sec{position:relative;padding:112px 0;isolation:isolate;overflow:hidden}
.sec>.bg,.ftr>.bg,.hero>.bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
         background-repeat:no-repeat;transform:scale(1.06);filter:grayscale(1)}
.sec>.tint,.ftr>.tint{position:absolute;inset:0;z-index:1}
.sec>.tint{position:absolute;inset:0;z-index:1}
.tint--dark{background:linear-gradient(160deg,rgba(27,27,27,.955),rgba(20,20,20,.925))}
.tint--gray{background:linear-gradient(160deg,rgba(43,43,43,.955),rgba(27,27,27,.935))}
.tint--footer{background:linear-gradient(160deg,rgba(16,16,16,.97),rgba(12,12,12,.96))}
.tint--blue{background:linear-gradient(118deg,rgba(3,150,199,.94) 0%,rgba(2,113,154,.93) 100%)}
.sec--flat{background:var(--base)}
.sec--panel{background:var(--base-2)}
.hair{height:1px;background:var(--line);border:0;margin:0}

/* section heading block */
.head{max-width:760px;margin:0 0 54px}
.head--c{margin-left:auto;margin-right:auto;text-align:center}
.head h2{font-size:clamp(34px,5.2vw,62px)}
.head h2 em{font-style:normal;color:var(--blue)}
.head p{margin:18px 0 0;color:var(--dim);font-size:19px;text-transform:none;letter-spacing:0}
.sec--blue .head p{color:rgba(255,255,255,.92)}

/* ---------- REVEAL ---------- */
.rv{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.07s}.rv[data-d="2"]{transition-delay:.14s}
.rv[data-d="3"]{transition-delay:.21s}.rv[data-d="4"]{transition-delay:.28s}
.rv[data-d="5"]{transition-delay:.35s}.rv[data-d="6"]{transition-delay:.42s}
.rv[data-d="7"]{transition-delay:.49s}.rv[data-d="8"]{transition-delay:.56s}
@keyframes heroIn{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
.hero-copy>*{animation:heroIn .9s var(--ease) both}
.hero-copy>*:nth-child(1){animation-delay:.06s}
.hero-copy>*:nth-child(2){animation-delay:.18s}
.hero-copy>*:nth-child(3){animation-delay:.30s}
.hero-copy>*:nth-child(4){animation-delay:.42s}
.hero-copy>*:nth-child(5){animation-delay:.54s}
.hero-copy>*:nth-child(6){animation-delay:.66s}

@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .hero-copy>*{animation:none}
  html{scroll-behavior:auto}
  .ticker-track{animation:none !important}
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;border-radius:4px;border:2px solid transparent;
  font-weight:800;font-size:15px;letter-spacing:.09em;text-transform:uppercase;
  line-height:1;cursor:pointer;transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s,box-shadow .25s;
}
.btn svg{width:17px;height:17px;fill:currentColor;flex:none}
.btn--blue{background:var(--blue);color:#fff;box-shadow:0 16px 36px -18px rgba(3,150,199,.9)}
.btn--blue:hover{background:var(--blue-lift);transform:translateY(-2px)}
.btn--ghost{border-color:var(--line-strong);color:#fff}
.btn--ghost:hover{border-color:var(--blue);color:var(--blue-lift);transform:translateY(-2px)}
.btn--white{background:#fff;color:var(--gray)}
.btn--white:hover{background:#eaf7fc;transform:translateY(-2px)}
.btn--dark{background:var(--gray);color:#fff}
.btn--dark:hover{background:#111;transform:translateY(-2px)}
.btn--sm{padding:12px 20px;font-size:13px}
.btn--wide{width:100%}

.txtlink{
  display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:14px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--blue);
}
.txtlink svg{width:15px;height:15px;fill:currentColor;transition:transform .25s var(--ease)}
.txtlink:hover svg{transform:translateX(5px)}

/* ---------- SAMPLE-CONTENT FLAGS ---------- */
.notice{
  background:#0d0d0d;border-bottom:1px solid var(--line);
  font-size:13.5px;color:var(--dim);position:relative;z-index:60;
}
.notice .shell{display:flex;align-items:center;gap:14px;padding-top:11px;padding-bottom:11px}
.notice strong{color:#fff;font-weight:700}
.notice-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);flex:none;
  box-shadow:0 0 0 0 rgba(3,150,199,.6);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(3,150,199,0)}100%{box-shadow:0 0 0 0 rgba(3,150,199,0)}}
.notice-x{
  margin-left:auto;background:none;border:0;color:var(--dimmer);cursor:pointer;
  font-size:20px;line-height:1;padding:4px 6px;
}
.notice-x:hover{color:#fff}
.notice[hidden]{display:none}

.flag{
  position:absolute;top:14px;right:14px;z-index:5;
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 9px;border-radius:3px;
  background:rgba(3,150,199,.16);color:var(--blue-lift);border:1px solid rgba(3,150,199,.45);
  backdrop-filter:blur(4px);
}

/* ============ UTILITY BAR ============ */
.utility{background:var(--gray);border-bottom:1px solid var(--line);font-size:13.5px;position:relative;z-index:55}
.utility .shell{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-top:10px;padding-bottom:10px;color:var(--dim)}
.utility strong{color:#fff;font-weight:700}
.usocial{display:flex;align-items:center;gap:6px}
.usocial a{
  width:32px;height:32px;display:grid;place-items:center;border-radius:4px;
  color:var(--dim);transition:color .22s,background .22s;
}
.usocial a:hover{color:#fff;background:rgba(255,255,255,.09)}
.usocial svg{width:16px;height:16px;fill:currentColor}

/* ============ HEADER ============ */
.hdr{
  position:sticky;top:0;z-index:50;background:rgba(27,27,27,.86);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
  transition:background .3s,border-color .3s,box-shadow .3s;
}
.hdr.stuck{background:rgba(17,17,17,.96);box-shadow:0 14px 40px -26px #000}
.hdr .shell{display:flex;align-items:center;gap:28px;padding-top:14px;padding-bottom:14px}
.brand img{height:54px;width:auto;transition:height .3s var(--ease)}
.hdr.stuck .brand img{height:44px}
.nav{display:flex;align-items:center;gap:28px;margin-left:auto}
.nav a{
  position:relative;font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);transition:color .22s;padding:6px 0;
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--blue);
  transition:right .3s var(--ease);
}
.nav a:hover{color:#fff}
.nav a:hover::after{right:0}
.hdr-cta{display:flex;align-items:center;gap:12px}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer}
.burger span{width:24px;height:2px;background:#fff;transition:transform .3s var(--ease),opacity .2s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============ HERO ============ */
.hero{
  position:relative;overflow:hidden;background:var(--base);
  min-height:clamp(560px,80vh,780px);display:flex;align-items:center;
  padding:72px 0 88px;
}
.hero-glow{
  position:absolute;top:-26%;right:-6%;width:64vw;height:64vw;z-index:1;pointer-events:none;
  background:radial-gradient(circle,rgba(3,150,199,.26) 0%,rgba(3,150,199,0) 62%);
}
.hero-grid-lines{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:80px 80px;
  -webkit-mask-image:radial-gradient(ellipse at 30% 40%,#000 18%,transparent 74%);
          mask-image:radial-gradient(ellipse at 30% 40%,#000 18%,transparent 74%);
}
.hero-inner{display:block}
.hero-copy{max-width:620px;padding:0}
.hero-type{
  display:flex;align-items:center;gap:12px;margin-bottom:22px;
  font-size:14px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-lift);
  min-height:22px;
}
.hero-type .bar{width:26px;height:3px;background:var(--blue);flex:none}
.hero-type .cursor{
  display:inline-block;width:2px;height:15px;background:var(--blue-lift);margin-left:2px;
  animation:blink 1s steps(2) infinite;vertical-align:-2px;
}
@keyframes blink{50%{opacity:0}}
.hero h1{font-size:clamp(44px,6.6vw,88px);letter-spacing:-.03em}
.hero h1 .line{display:block;white-space:nowrap}
.hero h1 .accent{color:var(--blue)}
.hero-sub{margin:26px 0 0;max-width:520px;font-size:20px;line-height:1.6;color:var(--dim)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:32px;
  font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dimmer);
}
.hero-meta span{display:flex;align-items:center;gap:8px}
.hero-meta i{width:5px;height:5px;border-radius:50%;background:var(--blue);display:block}
.hero-badge{
  display:inline-flex;align-items:center;gap:16px;margin-top:34px;
  background:var(--blue);color:#fff;padding:15px 22px;border-radius:4px;
  box-shadow:0 24px 50px -24px rgba(0,0,0,.9);
}
.hero-badge b{font-size:32px;font-weight:900;line-height:1;letter-spacing:-.02em;flex:none}
.hero-badge span{
  font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  line-height:1.4;max-width:180px;opacity:.95;
}

/* ============ TICKER ============ */
.ticker{
  background:var(--blue);color:#fff;overflow:hidden;position:relative;z-index:3;
  border-top:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(0,0,0,.18);
}
.ticker-track{display:flex;width:max-content;animation:slide 40s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.ticker-item{
  display:flex;align-items:center;gap:14px;padding:15px 30px;white-space:nowrap;
  font-size:14px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
}
.ticker-item::after{content:"";width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55)}

/* ============ SHOW / EPISODES ============ */

/* inline sample note above the platform tiles */
.plat-note{
  display:flex;align-items:center;gap:12px;margin:0 0 20px;
  font-size:15px;color:var(--dimmer);text-transform:none;
}
.flag--inline{position:static;flex:none}
.platforms{display:flex;flex-wrap:nowrap;gap:14px;margin-bottom:60px;width:100%}
.plat{
  flex:1 1 0;min-width:0;
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  min-height:78px;padding:0 18px;border-radius:5px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);
  font-size:18px;font-weight:700;letter-spacing:.01em;color:#fff;
  transition:border-color .25s,background .25s,transform .25s var(--ease),box-shadow .3s;
}
.plat:hover{border-color:var(--blue);background:rgba(3,150,199,.12);transform:translateY(-3px);
  box-shadow:0 20px 40px -24px rgba(0,0,0,.9)}
.plat svg{width:32px;height:32px;fill:currentColor;flex:none;transition:fill .25s}
.plat:hover svg{fill:var(--blue-lift)}
/* wordmark lockups carry their own name, so no text label */
.plat span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plat--mark{padding:0 14px}
.plat--mark svg{width:82px;height:50px}

.eps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.ep{
  position:relative;display:flex;flex-direction:column;
  background:var(--base-2);border:1px solid var(--line);border-radius:5px;overflow:hidden;
  transition:transform .4s var(--ease),border-color .3s,box-shadow .4s;
}
.ep:hover{transform:translateY(-6px);border-color:rgba(3,150,199,.5);box-shadow:var(--card)}
.ep-art{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--gray)}
.ep-art img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);
  filter:grayscale(1) contrast(1.06);transition:transform .7s var(--ease),filter .5s}
.ep:hover .ep-art img{transform:scale(1.06);filter:grayscale(0) contrast(1)}
.ep-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,27,27,.1),rgba(27,27,27,.75))}
.ep-play{
  position:absolute;left:18px;bottom:16px;z-index:3;width:44px;height:44px;border-radius:50%;
  background:var(--blue);display:grid;place-items:center;box-shadow:0 12px 26px -12px rgba(0,0,0,.9);
  transition:transform .3s var(--ease);
}
.ep:hover .ep-play{transform:scale(1.09)}
.ep-play svg{width:15px;height:15px;fill:#fff;margin-left:2px}
.ep-body{padding:24px;display:flex;flex-direction:column;flex:1}
.ep-meta{display:flex;gap:14px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dimmer);margin-bottom:12px}
.ep-meta .n{color:var(--blue)}
.ep-meta .ep-who{margin-left:auto;color:var(--dim)}
.ep-meta{align-items:center}
.ep h3{font-size:21px;letter-spacing:-.01em;line-height:1.16}
.ep p{margin:12px 0 20px;font-size:16px;color:var(--dim);line-height:1.6}
.ep .txtlink{margin-top:auto}


/* ============ EVENTS LAYOUT + CALENDAR ============ */
.ev-layout{display:grid;grid-template-columns:388px minmax(0,1fr);gap:34px;align-items:start}
.ev-layout .events{gap:14px}

.cal{
  position:relative;position:sticky;top:104px;
  background:rgba(20,20,20,.72);border:1px solid var(--line);border-radius:6px;
  padding:24px 22px 20px;backdrop-filter:blur(8px);box-shadow:var(--card);
}
.cal .flag{top:16px;right:16px}
.cal-head{display:flex;align-items:center;gap:10px;margin-bottom:20px;padding-right:74px}
.cal-title{
  font-size:17px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  flex:1;min-width:0;
}
.cal-nav{
  width:34px;height:34px;flex:none;border-radius:4px;border:1px solid var(--line);
  background:none;color:var(--dim);cursor:pointer;display:grid;place-items:center;
  transition:border-color .22s,color .22s,background .22s;
}
.cal-nav:hover{border-color:var(--blue);color:var(--blue-lift);background:rgba(3,150,199,.1)}
.cal-nav svg{width:18px;height:18px;fill:currentColor}
.cal-head .cal-nav:first-child{order:-1}

.cal-dows,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-dows{margin-bottom:8px}
.cal-dows span{
  text-align:center;font-size:11px;font-weight:800;letter-spacing:.1em;
  color:var(--dimmer);padding:4px 0;
}
.cal-cell{
  position:relative;aspect-ratio:1;display:grid;place-items:center;border-radius:4px;
  font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--dim);
  border:1px solid transparent;background:rgba(255,255,255,.03);
}
.cal-cell.pad{background:none;color:transparent;pointer-events:none}
.cal-cell.has{
  cursor:pointer;color:#fff;font-weight:800;
  background:rgba(3,150,199,.16);border-color:rgba(3,150,199,.5);
  transition:background .22s,transform .22s var(--ease),border-color .22s;
}
.cal-cell.has:hover,.cal-cell.has:focus-visible{
  background:var(--blue);transform:translateY(-2px);border-color:var(--blue);outline:none;
}
.cal-cell.has.on{background:var(--blue);border-color:var(--blue)}
.cal-cell.has::after{
  content:"";position:absolute;bottom:5px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--blue-lift);
}
.cal-cell.has:hover::after,.cal-cell.has.on::after{background:#fff}

.cal-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
}
.cal-key{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--dimmer)}
.cal-key .dot{width:9px;height:9px;border-radius:3px;background:rgba(3,150,199,.35);
  border:1px solid rgba(3,150,199,.7);display:block}
.cal-today{
  background:none;border:0;cursor:pointer;padding:0;
  font-size:12.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--blue);
}
.cal-today:hover{color:var(--blue-lift)}
.cal-peek{
  margin-top:14px;font-size:14px;line-height:1.5;color:var(--dimmer);min-height:42px;
}
.cal-peek b{display:block;color:#fff;font-size:15px;margin-bottom:2px}

/* the list row the calendar just jumped to */
.evt.pulse{border-color:var(--blue);background:#262626}
.evt.pulse::after{
  content:"";position:absolute;inset:-1px;border-radius:5px;pointer-events:none;
  box-shadow:0 0 0 3px rgba(3,150,199,.35);animation:evtPulse 1.5s var(--ease) forwards;
}
@keyframes evtPulse{to{box-shadow:0 0 0 3px rgba(3,150,199,0)}}
@media (prefers-reduced-motion:reduce){.evt.pulse::after{animation:none}}

/* ============ EVENTS ============ */
.events{display:flex;flex-direction:column;gap:14px}
.evt{
  position:relative;display:grid;grid-template-columns:104px 1fr auto;gap:28px;align-items:center;
  padding:26px 28px;border:1px solid var(--line);border-radius:5px;background:var(--base-2);
  transition:border-color .3s,background .3s,transform .35s var(--ease);
}
.evt:hover{border-color:rgba(3,150,199,.5);background:#262626;transform:translateX(5px)}
.evt-date{
  text-align:center;border-right:1px solid var(--line);padding-right:24px;
}
.evt-date b{display:block;font-size:38px;font-weight:900;line-height:1;letter-spacing:-.03em;color:var(--blue)}
.evt-date span{display:block;margin-top:5px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer)}
.evt-main h3{font-size:22px;letter-spacing:-.01em}
.evt-main p{margin:9px 0 0;font-size:15.5px;color:var(--dim)}
.evt-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.tag{
  font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  padding:5px 10px;border-radius:3px;border:1px solid var(--line-strong);color:var(--dim);
}
.tag--blue{border-color:rgba(3,150,199,.5);color:var(--blue-lift);background:rgba(3,150,199,.1)}
.evt-cta{flex:none}
.evt .flag{top:12px;right:12px}
.events-foot{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:18px}

/* ============ ROUNDTABLE / PARTNER WITH US ============ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.split--rev .split-fig{order:2}
.split-fig{position:relative}
.split-fig img{width:100%;border-radius:5px;position:relative;z-index:2}
.split-fig::after{
  content:"";position:absolute;z-index:1;left:-18px;top:-18px;width:150px;height:150px;
  background-image:radial-gradient(rgba(3,150,199,.75) 1.5px,transparent 1.5px);
  background-size:14px 14px;
}
.split-fig::before{
  content:"";position:absolute;z-index:1;right:-16px;bottom:-16px;width:58%;height:52%;
  border:2px solid var(--blue);border-radius:5px;
}
.pillars{display:grid;gap:2px;margin-top:34px;border:1px solid var(--line);border-radius:5px;overflow:hidden;background:var(--line)}
.pillar{background:var(--base);padding:26px 28px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;transition:background .3s}
.pillar:hover{background:var(--base-2)}
.pillar-ico{width:42px;height:42px;border-radius:4px;background:rgba(3,150,199,.13);border:1px solid rgba(3,150,199,.35);display:grid;place-items:center;flex:none}
.pillar-ico svg{width:20px;height:20px;fill:var(--blue)}
.pillar h3{font-size:17px;letter-spacing:.03em}
.pillar p{margin:8px 0 0;font-size:16px;color:var(--dim);line-height:1.6}

/* ============ CHUCK / BIO ============ */
.bio-grid{display:grid;grid-template-columns:1.02fr 1.16fr;gap:56px;align-items:stretch}
.bio-fig{position:relative;margin:0;height:100%;min-height:520px}
.bio-fig img{width:100%;height:100%;object-fit:cover;object-position:46% 26%;
  border-radius:5px;filter:grayscale(1) contrast(1.05)}
.bio-fig .stamp{
  position:absolute;right:-22px;bottom:38px;background:var(--blue);color:#fff;
  padding:18px 22px;border-radius:4px;box-shadow:0 24px 50px -24px rgba(0,0,0,.9);
}
.bio-fig .stamp b{display:block;font-size:15px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;line-height:1.2}
.bio-fig .stamp span{display:block;margin-top:5px;font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;opacity:.92}
.bio-name{font-size:clamp(38px,5.4vw,66px);letter-spacing:-.03em}
.bio-role{
  margin:16px 0 26px;font-size:14px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--blue-lift);
}
.bio-body p{font-size:18px;color:var(--dim);line-height:1.72}
.bio-body p strong{color:#fff;font-weight:700}
.bio-lead{font-size:22px !important;color:#fff !important;line-height:1.52 !important}
.bio-sub{margin:34px 0 14px;font-size:15px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.bio-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;margin-top:34px;background:var(--line);border:1px solid var(--line);border-radius:5px;overflow:hidden}
.fact{background:var(--base);padding:20px 22px}
.fact b{display:block;font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--blue)}
.fact span{display:block;margin-top:7px;font-size:16.5px;color:var(--dim);line-height:1.5}
.bio-socials{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.bio-socials a{
  display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border-radius:4px;
  border:1px solid var(--line);font-size:14px;font-weight:700;transition:border-color .25s,background .25s,transform .25s var(--ease);
}
.bio-socials a:hover{border-color:var(--blue);background:rgba(3,150,199,.1);transform:translateY(-2px)}
.bio-socials svg{width:16px;height:16px;fill:currentColor}

/* host roster placeholder for future additions */
.roster{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:66px}
.roster-card{
  border:1px dashed var(--line-strong);border-radius:5px;padding:34px 28px;text-align:center;
  color:var(--dimmer);transition:border-color .3s,color .3s;
}
.roster-card:hover{border-color:rgba(3,150,199,.5);color:var(--dim)}
.roster-card .ring{
  width:74px;height:74px;margin:0 auto 18px;border-radius:50%;border:1px dashed var(--line-strong);
  display:grid;place-items:center;
}
.roster-card .ring svg{width:30px;height:30px;fill:currentColor;opacity:.5}
.roster-card h3{font-size:16px;letter-spacing:.08em;color:var(--dim)}
.roster-card p{margin:9px 0 0;font-size:14.5px;line-height:1.55}

/* ============ BOOK CHUCK ============ */
.book-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.book-h{
  font-size:14px;letter-spacing:.16em;color:#fff;margin-bottom:20px;
  padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.32);
}
.book-h--gap{margin-top:40px}

.topics{
  list-style:none;margin:0;padding:0;
  display:grid;gap:2px;background:rgba(255,255,255,.26);
  border:1px solid rgba(255,255,255,.26);border-radius:5px;overflow:hidden;
}
.topic{
  background:var(--blue);padding:20px 24px;display:grid;grid-template-columns:auto 1fr;
  gap:18px;align-items:baseline;transition:background .3s;
}
.topic:hover{background:var(--blue-deep)}
.topic b{font-size:12px;font-weight:800;letter-spacing:.16em;opacity:.72;font-variant-numeric:tabular-nums}
.topic h4{margin:0;font-size:19px;font-weight:800;letter-spacing:-.005em;line-height:1.2;text-transform:uppercase}

.qbox{display:grid;gap:20px}
.q{margin:0;border-left:3px solid rgba(255,255,255,.5);padding:2px 0 2px 20px;
   font-size:19px;font-weight:600;line-height:1.45}
.book-bio{margin:0;font-size:17.5px;line-height:1.65;color:rgba(255,255,255,.92)}
.book-actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:32px}
.txtlink--onblue{color:#fff}
.txtlink--onblue:hover{color:#eaf7fc}

/* ============ SIGNUP ============ */
.signup{position:relative;overflow:hidden}
.signup-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
.signup h2{font-size:clamp(36px,5.4vw,66px)}
.signup h2 em{font-style:normal;color:var(--blue)}
.signup .lead{margin:22px 0 0;font-size:20px;color:var(--dim);max-width:490px}
.signup-list{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:13px}
.signup-list li{display:flex;gap:13px;align-items:flex-start;font-size:16.5px;color:var(--dim)}
.signup-list svg{width:19px;height:19px;fill:var(--blue);flex:none;margin-top:3px}
.form-card{
  background:var(--base-2);border:1px solid var(--line);border-radius:6px;padding:38px;
  box-shadow:var(--card);
}
.form-card h3{font-size:22px;letter-spacing:-.005em}
.form-card>p{margin:12px 0 26px;font-size:15.5px;color:var(--dim);text-transform:none}
.field{margin-bottom:16px}
.field label{display:block;font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--dimmer);margin-bottom:8px}
.field input,.field select{
  width:100%;padding:14px 16px;border-radius:4px;background:#191919;color:#fff;
  border:1px solid var(--line);font-family:inherit;font-size:16px;transition:border-color .25s,box-shadow .25s;
}
.field input::placeholder{color:rgba(255,255,255,.3)}
.field input:focus,.field select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(3,150,199,.2)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-fine{margin:16px 0 0;font-size:13px;color:var(--dimmer);line-height:1.55;text-transform:none}
.form-ok{
  display:none;margin-top:18px;padding:14px 16px;border-radius:4px;
  background:rgba(3,150,199,.14);border:1px solid rgba(3,150,199,.45);
  font-size:15px;color:#fff;
}
.form-ok.on{display:block}

/* ============ FOOTER ============ */
.ftr{position:relative;isolation:isolate;overflow:hidden;background:#141414;border-top:1px solid var(--line);padding:74px 0 0}
.ftr .shell{position:relative;z-index:2}
.ftr-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:50px}
.ftr-brand img{height:42px;width:auto;margin-bottom:22px}
.ftr-brand p{font-size:16px;color:var(--dim);max-width:330px}
.ftr h4{font-size:13px;letter-spacing:.15em;color:#fff;margin-bottom:20px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ftr ul a{font-size:15.5px;color:var(--dim);transition:color .22s}
.ftr ul a:hover{color:var(--blue-lift)}
.ftr-social{display:flex;gap:9px;margin-top:22px}
.ftr-social a{width:38px;height:38px;border-radius:4px;border:1px solid var(--line);display:grid;place-items:center;color:var(--dim);transition:all .25s var(--ease)}
.ftr-social a:hover{border-color:var(--blue);color:var(--blue-lift);transform:translateY(-2px)}
.ftr-social svg{width:17px;height:17px;fill:currentColor}
.ftr-bar{
  margin-top:64px;border-top:1px solid var(--line);padding:26px 0;
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-size:13.5px;color:var(--dimmer);
}
.ftr-bar a:hover{color:var(--dim)}

/* ============ BACK TO TOP ============ */
.totop{
  position:fixed;right:22px;bottom:22px;z-index:70;width:46px;height:46px;border-radius:4px;
  background:var(--blue);border:0;cursor:pointer;display:grid;place-items:center;
  opacity:0;pointer-events:none;transform:translateY(12px);
  transition:opacity .3s,transform .3s var(--ease),background .25s;
  box-shadow:0 16px 34px -16px rgba(0,0,0,.9);
}
.totop.on{opacity:1;pointer-events:auto;transform:none}
.totop:hover{background:var(--blue-lift)}
.totop svg{width:18px;height:18px;fill:#fff}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .hero{min-height:0;padding:64px 0 72px}
  .book-grid{grid-template-columns:1fr;gap:40px}
  .eps{grid-template-columns:repeat(2,1fr)}
  .ev-layout{grid-template-columns:1fr;gap:26px}
  .cal{position:static;max-width:440px}
  .bio-fig{position:static}
  .bio-fig img{height:auto;max-height:none}
  .platforms{flex-wrap:wrap}
  .plat{flex:1 1 190px}
  .split,.bio-grid,.signup-grid{grid-template-columns:1fr;gap:48px}
  .split--rev .split-fig{order:0}
  .bio-fig{max-width:460px}
  .bio-fig .stamp{right:0}
  .ftr-grid{grid-template-columns:1fr 1fr;gap:40px}
}
@media (max-width:880px){
  body{font-size:17px}
  .sec{padding:80px 0}
  .utility .shell{justify-content:center}
  .utility>.shell>div:first-child{display:none}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(320px,84vw);background:#141414;
    flex-direction:column;align-items:flex-start;gap:0;padding:96px 30px 30px;
    transform:translateX(102%);transition:transform .4s var(--ease);margin:0;
    border-left:1px solid var(--line);overflow-y:auto;
  }
  .nav.open{transform:none}
  .nav a{width:100%;padding:16px 0;border-bottom:1px solid var(--line);font-size:15px}
  .burger{display:flex;margin-left:auto;position:relative;z-index:60}
  .hdr-cta .btn{display:none}
  .hdr-cta{margin-left:auto}
  .hdr .shell{gap:14px}
  .evt{grid-template-columns:76px 1fr;gap:20px;row-gap:20px}
  .evt-date{padding-right:16px}
  .evt-cta{grid-column:1/-1}
  .evt-cta .btn{width:100%}
  .roster{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .form-card{padding:28px}
  .plat{flex:1 1 46%;min-height:68px}
  .plat svg{width:26px;height:26px}
  .plat--mark svg{width:70px;height:42px}
  .hero{display:block;padding:0 0 64px}
  .hero-copy{max-width:none;padding-top:8px}
  .hero-badge{margin-top:28px}
}
@media (max-width:640px){
  .eps{grid-template-columns:1fr}
  .bio-facts{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr}
  .hero-badge b{font-size:26px}
  .split-fig::after,.split-fig::before{display:none}
  .bio-fig .stamp{position:static;margin-top:16px;display:inline-block}
}

/* ============================================================
   MOTION + HOVER LAYER
   Everything here is opt-in and switched off under
   prefers-reduced-motion at the bottom of this block.
   ============================================================ */

/* ---- scroll progress rail ---- */
.progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:80;pointer-events:none;
  background:rgba(255,255,255,.06);
}
.progress i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--blue),var(--blue-lift));
  box-shadow:0 0 14px rgba(3,150,199,.7);
  transform-origin:left;
}

/* ---- nav: the link for the section you are in stays lit ---- */
.nav a.active{color:#fff}
.nav a.active::after{right:0}

/* ---- headings draw a blue rule as they arrive ---- */
.head h2,.signup h2{position:relative;display:inline-block}
.head h2::after,.signup h2::after{
  content:"";position:absolute;left:0;bottom:-12px;height:3px;width:100%;
  background:var(--blue);transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--ease) .15s;
}
.js .rv.in h2::after{transform:scaleX(1)}

/* ---- buttons: light sweeps across on hover ---- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.28) 50%,transparent 80%);
  transform:translateX(-120%);transition:transform .75s var(--ease);
}
.btn:hover::before{transform:translateX(120%)}
.btn--white::before{background:linear-gradient(115deg,transparent 20%,rgba(3,150,199,.22) 50%,transparent 80%)}

/* ---- cards track the cursor with a soft blue spotlight ---- */
.spot{position:relative}
.spot::before{
  content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
             rgba(3,150,199,.20),transparent 62%);
}
.spot:hover::before{opacity:1}
.ep .ep-body,.ep .ep-art,.form-card>*,.pillar>*,.roster-card>*{position:relative;z-index:2}

/* ---- episode cards tilt toward the cursor ---- */
.eps{perspective:1400px}
.ep{
  transform-style:preserve-3d;
  transition:transform .5s var(--ease),border-color .3s,box-shadow .4s;
  will-change:transform;
}
.ep.tilt{transition:transform .12s linear,border-color .3s,box-shadow .4s}
.ep-play{transition:transform .35s var(--ease),background .3s}
.ep:hover .ep-play{transform:scale(1.14) translateZ(30px);background:var(--blue-lift)}
.ep:hover h3{color:var(--blue-lift)}
.ep h3{transition:color .3s}

/* ---- platform tiles adopt their own brand color on hover ---- */
.plat{position:relative;overflow:hidden}
.plat::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--brand,var(--blue));transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.plat:hover::after{transform:scaleX(1)}
.plat:hover{border-color:var(--brand,var(--blue));background:rgba(255,255,255,.07)}
.plat:hover svg{fill:var(--brand,var(--blue-lift));transform:scale(1.08)}
.plat svg{transition:fill .25s,transform .35s var(--ease)}

/* ---- event rows grow a blue edge ---- */
.evt::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--blue);
  transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease);
  border-radius:5px 0 0 5px;
}
.evt:hover::before{transform:scaleY(1)}
.evt-date b{transition:transform .4s var(--ease)}
.evt:hover .evt-date b{transform:scale(1.09)}

/* ---- big figures wipe in rather than just fading ---- */
.js .wipe{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease)}
.js .rv.in .wipe{clip-path:inset(0 0 0 0)}
.split-fig img,.bio-fig img{transition:transform 1.2s var(--ease),filter .6s}
.split-fig:hover img,.bio-fig:hover img{transform:scale(1.03)}
.bio-fig:hover img{filter:grayscale(0) contrast(1.02)}

/* ---- the dotted corner on split figures drifts ---- */
.split-fig::after{transition:transform .8s var(--ease)}
.split-fig:hover::after{transform:translate(6px,6px)}
.split-fig::before{transition:transform .8s var(--ease)}
.split-fig:hover::before{transform:translate(-6px,-6px)}

/* ---- fact and pillar tiles lift ---- */
.fact{transition:background .3s,transform .35s var(--ease)}
.fact:hover{background:#242424;transform:translateY(-3px)}
.pillar{transition:background .3s,padding-left .35s var(--ease)}
.pillar:hover{padding-left:34px}
.pillar-ico{transition:transform .45s var(--ease),background .3s}
.pillar:hover .pillar-ico{transform:rotate(-8deg) scale(1.08);background:rgba(3,150,199,.24)}

/* ---- topic rows slide ---- */
.topic{transition:background .3s,transform .35s var(--ease)}
.topic:hover{transform:translateX(6px)}

/* ---- hero badge counts up, then sits still ---- */
.hero-badge b{font-variant-numeric:tabular-nums}
.hero-badge{transition:transform .4s var(--ease),box-shadow .4s}
.hero-badge:hover{transform:translateY(-3px);box-shadow:0 30px 60px -26px rgba(0,0,0,.95)}

/* ---- roster slots breathe on hover ---- */
.roster-card .ring{transition:transform .5s var(--ease),border-color .3s}
.roster-card:hover .ring{transform:scale(1.08) rotate(6deg);border-color:rgba(3,150,199,.6)}

@media (prefers-reduced-motion:reduce){
  .progress i{transition:none}
  .btn::before,.spot::before{display:none}
  .ep,.ep.tilt{transform:none !important;transition:border-color .3s}
  .js .wipe{clip-path:none;transition:none}
  .split-fig:hover img,.bio-fig:hover img,.evt:hover .evt-date b,
  .roster-card:hover .ring,.pillar:hover .pillar-ico,.topic:hover{transform:none}
  .head h2::after,.signup h2::after{transition:none;transform:scaleX(1)}
}

/* ============ HOSTS ============ */
.hosts{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
.host{
  position:relative;display:flex;flex-direction:column;
  background:rgba(20,20,20,.66);border:1px solid var(--line);border-radius:6px;overflow:hidden;
  backdrop-filter:blur(6px);
  transition:transform .4s var(--ease),border-color .3s,box-shadow .4s;
}
.host:hover{transform:translateY(-6px);border-color:rgba(3,150,199,.5);box-shadow:var(--card)}
.host>.flag{top:16px;right:16px}
.host-fig{position:relative;margin:0;overflow:hidden;background:var(--gray)}
.host-fig img{width:100%;height:auto;display:block;transition:transform .9s var(--ease)}
.host:hover .host-fig img{transform:scale(1.04)}
.host-fig::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(27,27,27,0) 62%,rgba(20,20,20,.55) 100%)}
.host-body{padding:26px 24px 28px;display:flex;flex-direction:column;flex:1;position:relative;z-index:2}
.host-body h3{font-size:26px;letter-spacing:-.015em}
.host-role{margin:8px 0 16px;font-size:12.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--blue)}
.host-lead{margin:0 0 14px;font-size:17px;line-height:1.55;color:#fff}
.host-body p{font-size:15.5px;line-height:1.62;color:var(--dim)}
.host-body p strong{color:#fff;font-weight:700}
.host .bio-facts{margin-top:auto}
.host .bio-socials{margin-top:20px}
.host .bio-socials a{padding:9px 14px;font-size:13px}
.host-cta{margin-top:20px;justify-content:center}

/* ============ UPCOMING GUESTS ============ */
.guest-grid{display:grid;grid-template-columns:1fr .92fr;gap:56px;align-items:start}
.guest-block{margin-bottom:30px}
.guest-block:last-child{margin-bottom:0}
.guest-when{
  display:flex;align-items:center;gap:10px;margin:0 0 14px;
  font-size:12.5px;letter-spacing:.16em;color:var(--blue-lift);
}
.guest-when span{
  font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--dimmer);
  border:1px solid var(--line);border-radius:999px;padding:2px 8px;
}
.guests{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.guest{
  position:relative;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;
  padding:13px 16px;border:1px solid var(--line);border-radius:5px;
  transition:border-color .3s,background .3s,transform .35s var(--ease);
}
.guest:hover{border-color:rgba(3,150,199,.5);background:rgba(255,255,255,.03);transform:translateX(5px)}
.guest .flag{top:10px;right:12px}
.guest-ring{width:36px;height:36px;border-radius:50%;border:1px dashed var(--line-strong);
  display:grid;place-items:center;flex:none;color:var(--dimmer)}
.guest-ring svg{width:17px;height:17px;fill:currentColor;opacity:.55}
.guest h3{font-size:15.5px;letter-spacing:.01em;color:#fff;text-transform:none;font-weight:700}
.guest-co{margin:3px 0 0;font-size:13px;line-height:1.35;color:var(--dim)}
/* no company was supplied for any guest, so the slot says so rather than guessing */
.guest-co--tbc{color:var(--dimmer);font-style:italic;opacity:.65}
.guest-where{
  display:block;margin:-8px 0 14px;font-size:13.5px;color:var(--dim);
}
.guest p{margin:5px 0 0;font-size:14.5px;color:var(--dimmer)}

/* ============ PARTNER WITH US LANES ============ */
.lanes{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
.lane{
  position:relative;display:flex;flex-direction:column;
  background:rgba(20,20,20,.7);border:1px solid var(--line);border-radius:6px;
  padding:28px 26px;backdrop-filter:blur(6px);
  transition:transform .4s var(--ease),border-color .3s,box-shadow .4s;
}
.lane:hover{transform:translateY(-6px);border-color:rgba(3,150,199,.5);box-shadow:var(--card)}
.lane-head{display:flex;align-items:center;gap:16px;margin-bottom:18px;position:relative;z-index:2}
.lane-head img{
  width:58px;height:58px;border-radius:50%;object-fit:cover;object-position:50% 22%;flex:none;
  filter:grayscale(1);border:2px solid rgba(3,150,199,.5);
}
.lane-head h3{font-size:20px;letter-spacing:-.005em}
.lane-who{display:block;margin-top:5px;font-size:12px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--blue-lift)}
.lane-lead{margin:0 0 18px;font-size:16px;line-height:1.6;color:var(--dim);position:relative;z-index:2}
.lane-list{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:11px;position:relative;z-index:2}
.lane-list li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--dim);line-height:1.5}
.lane-list svg{width:17px;height:17px;fill:var(--blue);flex:none;margin-top:3px}
.lane .btn{margin-top:auto;position:relative;z-index:2}

/* ============ GRANT ============ */
.grant-teaser{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.grant-h{font-size:clamp(34px,5vw,60px)}
.grant-h em{font-style:normal;color:var(--gray)}
.grant-lead{margin:22px 0 0;font-size:21px;line-height:1.55;color:#fff}
.grant-body{margin:16px 0 0;font-size:17.5px;line-height:1.65;color:rgba(255,255,255,.9)}
.grant-actions{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px}
.grant-figure{display:grid;place-items:center}
.grant-amount{
  text-align:center;border:2px solid rgba(255,255,255,.5);border-radius:6px;
  padding:44px 38px;background:rgba(0,0,0,.16);
}
.grant-amount b{display:block;font-size:clamp(46px,6.4vw,76px);font-weight:900;line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.grant-amount span{display:block;margin-top:16px;font-size:12.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.6;opacity:.92}

/* ============ SECONDARY PAGES ============ */
.page-hero{padding:96px 0 104px}
.crumb{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:24px;
  font-size:12.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.7);transition:color .22s;
}
.crumb::before{content:"";width:22px;height:2px;background:currentColor;display:block}
.crumb:hover{color:#fff}
.page-h1{font-size:clamp(42px,6.6vw,84px);font-weight:900;letter-spacing:-.03em}
.page-h1 .wht{color:var(--gray)}
.page-h1 .blu{color:var(--blue)}
.page-lead{margin:24px 0 0;max-width:640px;font-size:20px;line-height:1.6;color:rgba(255,255,255,.9)}
.sec--dark .page-lead{color:var(--dim)}
.page-stats{display:grid;grid-template-columns:repeat(4,auto);gap:0 52px;justify-content:start;margin-top:46px}
.pstat b{display:block;font-size:clamp(30px,3.6vw,44px);font-weight:900;line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.pstat span{display:block;margin-top:9px;font-size:12px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;opacity:.82}

.apply-note{margin:26px 0 0;font-size:14.5px;line-height:1.6;color:var(--dimmer)}

/* The apply column is topped out against the form rather than centred on it, so
   the heading and the form card start on the same line. The photo then takes the
   space the copy leaves at the bottom, so the two columns finish level too. */
.signup-grid--top{align-items:stretch}
.apply-col{display:flex;flex-direction:column}
.apply-art{
  margin:38px 0 0;flex:1 1 auto;min-height:210px;
  border-radius:8px;overflow:hidden;border:1px solid var(--line);
}
.apply-art img{
  display:block;width:100%;height:100%;min-height:210px;object-fit:cover;object-position:50% 45%;
  transition:transform .9s var(--ease);
}
.apply-art:hover img{transform:scale(1.035)}
/* This one is a three-up composite, so cropping the sides lops off Chuck and
   Shai. The frame is pinned to the file's own 2100x975 ratio, which means cover
   crops nothing, and it sits at the foot of the column instead of stretching. */
.apply-art--hosts{flex:0 0 auto;margin-top:auto;aspect-ratio:2100 / 975;min-height:0}
.apply-art--hosts img{width:100%;height:100%;min-height:0;object-fit:cover;object-position:50% 50%}
.apply-col .signup-list{margin-bottom:40px}
@media (max-width:880px){
  .apply-art--hosts{margin-top:0}
  .apply-art--hosts img{height:auto;aspect-ratio:2100 / 975}
}
@media (max-width:880px){
  .apply-art{margin-top:30px;min-height:0}
  .apply-art img{height:240px;min-height:0}
}
.field textarea{
  width:100%;padding:14px 16px;border-radius:4px;background:#191919;color:#fff;
  border:1px solid var(--line);font-family:inherit;font-size:16px;resize:vertical;
  transition:border-color .25s,box-shadow .25s;
}
.field textarea::placeholder{color:rgba(255,255,255,.3)}
.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(3,150,199,.2)}
.field-hint{margin:8px 0 0;font-size:13px;color:var(--dimmer);text-transform:none;line-height:1.5}
.lead--onblue{color:rgba(255,255,255,.92) !important}
.signup-list--onblue li{color:rgba(255,255,255,.92)}
.signup-list--onblue svg{fill:#fff}
.bookcall-h{font-size:clamp(34px,5vw,60px)}
.bookcall-h em{font-style:normal;color:var(--blue)}
.bookcall-h em.wht{color:var(--gray)}

/* ============ SPONSORS ============ */
.tiers{display:grid;gap:56px}
.tier-h{font-size:14px;letter-spacing:.16em;color:var(--blue-lift);margin-bottom:22px;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.sponsor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.sponsor{
  position:relative;border:1px solid var(--line);border-radius:6px;padding:34px 28px;
  background:rgba(20,20,20,.6);min-height:180px;display:flex;flex-direction:column;gap:14px;
  transition:border-color .3s,transform .35s var(--ease),background .3s;
}
.sponsor:hover{border-color:rgba(3,150,199,.5);transform:translateY(-4px)}
.sponsor--open{border-style:dashed}
.sponsor-mark{
  display:inline-block;font-size:23px;font-weight:900;letter-spacing:-.01em;
  text-transform:uppercase;color:#fff;line-height:1.1;position:relative;z-index:2;
  transition:color .25s;
}
a.sponsor-mark:hover{color:var(--blue-lift)}
.sponsor--open .sponsor-mark{min-height:29px}
.sponsor p{margin:0;font-size:15.5px;line-height:1.6;color:var(--dim);position:relative;z-index:2}
.sponsor--open p{color:var(--dimmer)}

/* homepage sponsor + swag promos */
.two-up{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.promo{
  position:relative;border:1px solid var(--line);border-radius:6px;padding:34px 32px;
  background:rgba(20,20,20,.66);backdrop-filter:blur(6px);
  transition:border-color .3s,transform .35s var(--ease);
}
.promo:hover{border-color:rgba(3,150,199,.5);transform:translateY(-4px)}
.promo h3{font-size:24px;letter-spacing:-.01em;position:relative;z-index:2}
.promo p{margin:14px 0 22px;font-size:16.5px;line-height:1.6;color:var(--dim);position:relative;z-index:2}
.promo p strong{color:#fff;font-weight:700}
.promo .btn{position:relative;z-index:2}
.sponsor-row,.swag-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px;position:relative;z-index:2}
.sponsor-chip,.swag-chip{
  font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:10px 16px;border-radius:4px;border:1px dashed var(--line-strong);color:var(--dimmer);
}
.sponsor-chip--real{border-style:solid;border-color:rgba(3,150,199,.55);
  background:rgba(3,150,199,.12);color:#fff}
.swag-chip{border-style:solid}

/* price tag on a real, paid event */
.tag--price{border-color:rgba(3,150,199,.6);color:#fff;background:rgba(3,150,199,.18);font-weight:800}
.events-note{color:var(--dimmer);font-size:14.5px}

/* ============ RESPONSIVE FOR THE NEW BLOCKS ============ */
@media (max-width:1080px){
  .hosts,.lanes,.sponsor-grid{grid-template-columns:repeat(2,1fr)}
  .hosts .host:last-child,.lanes .lane:last-child{grid-column:1/-1}
  .guest-grid,.grant-teaser,.two-up{grid-template-columns:1fr;gap:44px}
  .page-stats{grid-template-columns:repeat(2,auto);gap:32px 52px}
}
@media (max-width:880px){
  .page-hero{padding:64px 0 72px}
}
@media (max-width:640px){
  .hosts,.lanes,.sponsor-grid{grid-template-columns:1fr}
  .hosts .host:last-child,.lanes .lane:last-child{grid-column:auto}
  .page-stats{grid-template-columns:1fr;gap:26px}
  .grant-amount{padding:32px 24px}
}

/* the host picker flashes when a card preselects it */
@keyframes pick{0%,100%{box-shadow:0 0 0 0 rgba(3,150,199,0)}30%{box-shadow:0 0 0 4px rgba(3,150,199,.35)}}
.field select.picked{border-color:var(--blue);animation:pick 1.6s var(--ease)}
@media (prefers-reduced-motion:reduce){.field select.picked{animation:none}}

/* ============ HERO: THREE HOSTS SIDE BY SIDE ============ */
.hero--trio{padding:76px 0 84px;min-height:clamp(560px,78vh,760px)}
.hero--trio .hero-inner{
  display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);
  gap:36px;align-items:center;
}
.hero--trio .hero-copy{max-width:none;padding:0;min-width:0}
/* 'JUST RESULTS.' is nowrap. At 70px it is ~500px, inside the 520px column. */
.hero--trio h1{font-size:clamp(36px,5.4vw,70px)}
.hero--trio .hero-sub{max-width:500px}
.hero--trio .hero-glow{top:-22%;right:-4%;width:56vw;height:56vw}

/* Bleeds past the content column to the viewport edge.
   Overlapping fan rather than a 3-up grid: at 22% overlap each card is 35% wider
   than it could be side by side, and the overlap only ever covers background. */
.hero-trio{
  display:flex;align-items:center;justify-content:flex-end;
  margin-right:calc(-1 * max(0px, (100vw - var(--shell)) / 2));
  padding-right:0;
}
.trio-card{
  position:relative;display:block;flex:0 0 39.06%;width:39.06%;
  border-radius:6px;overflow:hidden;
  border:1px solid var(--line);background:var(--gray);
  box-shadow:0 20px 44px -22px rgba(0,0,0,.9);
  transition:transform .45s var(--ease),border-color .3s,box-shadow .45s;
  will-change:transform;
}
.trio-card + .trio-card{margin-left:-8.59%}
/* middle card sits on top so the fan reads symmetrically */
.trio-card:nth-child(1),.trio-card:nth-child(3){z-index:2}
.trio-card:nth-child(2){z-index:3}
/* a gentle rise and fall so it does not read as a passport strip */
.trio-card:nth-child(1){transform:translateY(-18px)}
.trio-card:nth-child(2){transform:translateY(18px)}
.trio-card:nth-child(3){transform:translateY(-18px)}
.trio-card img{
  width:100%;height:auto;display:block;aspect-ratio:700/975;object-fit:cover;
  filter:grayscale(1) contrast(1.08) brightness(.92);
  transition:filter .5s,transform .9s var(--ease);
}
.trio-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(27,27,27,0) 40%,rgba(15,15,15,.92) 100%);
}
.trio-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 16px 15px;
  display:flex;flex-direction:column;gap:3px;
}
.trio-cap b{font-size:19px;font-weight:900;letter-spacing:-.01em;text-transform:uppercase;line-height:1}
/* the fan puts Olga's card over the left edge of Shai's, which is where his caption
   would sit, so his flips to the right edge where nothing covers it */
.trio-card:nth-child(3) .trio-cap{align-items:flex-end;text-align:right}
.trio-cap i{
  font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--blue-lift);
}
.trio-card:hover{border-color:var(--blue);box-shadow:0 34px 70px -26px rgba(0,0,0,.98);z-index:6}
.trio-card:nth-child(1):hover{transform:translateY(-28px)}
.trio-card:nth-child(2):hover{transform:translateY(8px)}
.trio-card:nth-child(3):hover{transform:translateY(-28px)}
.trio-card:hover img{filter:grayscale(0) contrast(1.02) brightness(1);transform:scale(1.04)}

@keyframes trioIn{from{opacity:0;transform:translateY(46px)}to{opacity:1}}
.js .hero--trio .trio-card{animation:trioIn 1s var(--ease) both}
.js .hero--trio .trio-card:nth-child(1){animation-delay:.20s}
.js .hero--trio .trio-card:nth-child(2){animation-delay:.32s}
.js .hero--trio .trio-card:nth-child(3){animation-delay:.44s}

@media (max-width:1180px){
  .hero--trio .hero-inner{grid-template-columns:1fr;gap:44px}
  .hero--trio h1{font-size:clamp(40px,7vw,80px)}
  .hero-trio{margin-right:0;padding-right:0;max-width:820px;justify-content:flex-start}
}
@media (max-width:880px){
  .hero--trio{min-height:0;padding:56px 0 64px}
}
@media (max-width:640px){
  /* less overlap on a narrow screen, where every card is already small */
  .trio-card{flex-basis:35.5%;width:35.5%}
  .trio-card + .trio-card{margin-left:-3.25%}
  .trio-card:nth-child(1),.trio-card:nth-child(3){transform:translateY(-8px)}
  .trio-card:nth-child(2){transform:translateY(8px)}
  .trio-cap{padding:11px 10px 10px}
  .trio-cap b{font-size:14px}
  .trio-cap i{font-size:9px;letter-spacing:.1em}
}
@media (prefers-reduced-motion:reduce){
  .js .hero--trio .trio-card{animation:none}
  .trio-card,.trio-card:hover{transform:none}
}

/* the three bios differ in length, so pin the facts and CTA to a common baseline */
.host-body>p:last-of-type{margin-bottom:22px}
.host .bio-facts{margin-top:auto}
.lane-list{margin-bottom:24px}

/* ============ INDIVIDUAL PARTNER WITH US PAGES ============ */
.partner-hero{padding:84px 0 92px}
.partner-head{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:56px;align-items:center}
.partner-fig{margin:0;border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.partner-fig img{width:100%;height:auto;display:block;filter:grayscale(1) contrast(1.08)}
.partner-role{margin:20px 0 0;font-size:13px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--blue)}
.partner-hero .page-lead{margin-top:18px}
.partner-hero .page-stats{margin:36px 0 32px;grid-template-columns:repeat(3,auto);gap:0 46px}
.partner-bio p{font-size:17px;line-height:1.68;color:var(--dim)}
.partner-bio p:last-child{margin-bottom:0}

.peers{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:4px}
.peer{
  position:relative;display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:center;
  padding:14px 18px 14px 14px;border:1px solid var(--line);border-radius:6px;
  transition:border-color .3s,background .3s,transform .35s var(--ease);
}
.peer:hover{border-color:var(--blue);background:rgba(3,150,199,.1);transform:translateY(-3px)}
.peer img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 22%;
  filter:grayscale(1);border:2px solid rgba(3,150,199,.45)}
.peer b{display:block;font-size:17px;font-weight:900;letter-spacing:-.01em;text-transform:uppercase;line-height:1}
.peer i{display:block;margin-top:5px;font-style:normal;font-size:10.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue-lift)}

/* bio card now carries two actions rather than one */
.host-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.host-actions .btn{flex:1 1 auto;justify-content:center}

@media (max-width:1080px){
  .partner-head{grid-template-columns:1fr;gap:34px}
  .partner-fig{max-width:360px}
}
@media (max-width:640px){
  .peers{grid-template-columns:1fr}
  .partner-hero .page-stats{grid-template-columns:1fr;gap:22px}
}

/* ============ SPONSOR STRIP (top fold) ============ */
.sponsor-strip{background:#151515;border-bottom:1px solid var(--line);padding:28px 0 30px}
.strip-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line);
}
/* This was 11.5px at 44% white and read as a caption, so the logos underneath were
   not obviously sponsors. Full white, larger, with the same blue rule the hero
   kicker uses, so it reads as a heading. */
.strip-label{
  margin:0;display:flex;align-items:center;gap:12px;
  font-size:15px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;
}
.strip-label .bar{width:26px;height:3px;background:var(--blue);flex:none;display:block}
/* four equal cells spanning the full content width */
.slogos{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.slogo{
  position:relative;display:grid;place-items:center;gap:7px;
  min-height:84px;padding:14px 22px;
  border-left:1px solid var(--line);
  transition:opacity .25s,transform .3s var(--ease);
}
.slogo:first-child{border-left:0}
/* Every mark is rendered white so a row of four different brand palettes reads as
   one row rather than four. brightness(0) flattens to black, invert(1) to white,
   and alpha is preserved, so it works on the PNGs and the SVG alike. */
.slogo img{
  max-width:100%;width:auto;height:auto;display:block;
  filter:brightness(0) invert(1);
  opacity:.72;transition:opacity .25s;
}
/* Heights are balanced by ink, not by matching the tallest. A wordmark is mostly air
   between letters; Ad Leverage's solid tagline bar is not. Measured coverage at a
   common height was 50% / 19% / 66% / 20%, so equal heights would have left Ad
   Leverage looking twice the weight of Align. */
.slogo img[src*="ad-leverage"]{max-height:40px}
.slogo img[src*="align"]{max-height:43px}
.slogo img[src*="family-fortune"]{max-height:44px}
/* Elite Call's own mark is a full colour 3D icon. Flattening it to white gives a
   blob, so it keeps its colours and takes the extra height a compact mark needs. */
/* Their lockup is a glossy full-colour mark next to the wordmark. Flattening it
   to white destroys the mark, so it keeps its own colours. */
.slogo img[src*="elite-call"]{max-height:44px;filter:none;opacity:.95}
.slogo:hover img[src*="elite-call"]{opacity:1}
.slogo i{
  font-style:normal;font-size:9px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue-lift);opacity:.9;
}
.slogo:hover img{opacity:1}
.slogo:hover{transform:translateY(-2px)}
.slogo--lead img{opacity:.9}

@media (max-width:880px){
  .strip-label{font-size:13.5px;letter-spacing:.14em}
  .strip-label .bar{width:20px}
  .slogos{grid-template-columns:repeat(2,1fr)}
  .slogo{min-height:74px;padding:12px 16px}
  .slogo:nth-child(3){border-left:0}
  .slogo:nth-child(n+3){border-top:1px solid var(--line)}
  .slogo img[src*="ad-leverage"]{max-height:34px}
  .slogo img[src*="align"]{max-height:36px}
  .slogo img[src*="family-fortune"]{max-height:37px}
  .slogo img[src*="elite-call"]{max-height:36px}
}
@media (max-width:420px){
  .slogos{grid-template-columns:1fr}
  .slogo{border-left:0;border-top:1px solid var(--line)}
  .slogo:first-child{border-top:0}
}


/* events with no date yet still belong on the list */
.evt--tbc .evt-date b{font-size:19px;letter-spacing:.06em;color:var(--dimmer)}
.evt--tbc{border-style:dashed}
@media (max-width:640px){ .guests{grid-template-columns:1fr} }

/* sponsor page: same white plate treatment as the strip */
.sponsor-plate{
  display:grid;place-items:center;min-height:84px;padding:8px 0 20px;
  transition:transform .3s var(--ease);
}
.sponsor-plate img{
  max-width:100%;width:auto;height:auto;display:block;
  filter:brightness(0) invert(1);opacity:.85;transition:opacity .25s;
}
.sponsor-plate img[src*="ad-leverage"]{max-height:48px}
.sponsor-plate img[src*="align"]{max-height:52px}
.sponsor-plate img[src*="family-fortune"]{max-height:53px}
.sponsor--real:hover .sponsor-plate img{opacity:1}
.sponsor--real:hover .sponsor-plate{transform:translateY(-2px)}

/* company link on a host page; a pending slot rather than a guessed URL */
.host-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:26px 0 0}
.host-links--tbc span:last-child{font-size:14px;color:var(--dimmer)}

/* A multi-day conference and the dinner inside it share a start date. Without this
   the list shows "27" twice and reads as a duplicate entry. */
.evt-date--span b{line-height:.95}
.evt-date--span span:first-of-type{
  display:block;margin-top:2px;font-size:12px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue-lift);
}
.evt--within{margin-left:34px;border-left:2px solid rgba(3,150,199,.45)}
.evt-within{
  margin:0 0 8px;font-size:12px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue-lift);
}
@media (max-width:880px){ .evt--within{margin-left:14px} }

/* ============ SPONSORS PAGE ============ */
/* The founding sponsor sits above the rest rather than in the same grid, so the
   hierarchy is obvious without making the other three look like an afterthought. */
.sponsor--lead{
  display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:48px;
  align-items:center;padding:40px 44px;margin-bottom:56px;
  border:1px solid rgba(3,150,199,.4);border-radius:8px;
  background:linear-gradient(135deg,rgba(3,150,199,.10),rgba(3,150,199,.02));
}
.lead-plate{display:grid;place-items:center;min-height:120px}
.lead-plate img{
  max-height:96px;max-width:100%;width:auto;height:auto;display:block;
  filter:brightness(0) invert(1);transition:opacity .25s;
}
.sponsor--lead:hover .lead-plate img{opacity:.85}
.lead-tag{
  margin:0 0 10px;font-size:11px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue-lift);
}
.lead-body h3{font-size:30px;letter-spacing:-.01em;margin:0}
.lead-copy{margin:14px 0 18px;font-size:17.5px;line-height:1.6;color:var(--dim)}

/* the other three share one row and one set of sizes */
.sponsor-grid--three{grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.sponsor-grid--three .sponsor{display:flex;flex-direction:column;min-height:0}
.sponsor-name{font-size:21px;letter-spacing:-.005em;margin:0 0 10px}
.sponsor-grid--three .sponsor p{flex:1}
.sponsor-grid--three .txtlink{margin-top:14px;font-size:12.5px;text-transform:none;letter-spacing:.02em}
.sponsor-grid--three .sponsor-plate{min-height:90px;padding:10px 0 22px;margin-bottom:4px}
.sponsor-grid--three .sponsor-plate img{max-height:44px}
.sponsor-plate img[src*="elite-call"]{filter:none;opacity:1;max-height:56px}

@media (max-width:1080px){
  .sponsor--lead{grid-template-columns:1fr;gap:28px;padding:32px}
  .lead-plate{min-height:0}
  .lead-plate img{max-height:72px}
  .sponsor-grid--three{grid-template-columns:1fr;gap:18px}
}

/* ============ GRANT PAGE ============ */
/* Three prizes, so three even rows. Every card is the same height and splits the
   same way: the copy on the left, one visual in a fixed column on the right, so
   the three visuals stack into a single aligned strip down the page. */
.gcards{display:grid;grid-template-columns:1fr;grid-auto-rows:1fr;gap:18px}
.gcard{
  display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:44px;align-items:center;
  padding:46px 48px;border-radius:8px;
  border:1px solid var(--line);background:rgba(20,20,20,.62);
  backdrop-filter:blur(6px);
  transition:transform .4s var(--ease),border-color .3s,box-shadow .4s;
}
.gcard:hover{transform:translateY(-5px);border-color:rgba(3,150,199,.5);box-shadow:var(--card)}
.gcard h3{font-size:34px;letter-spacing:-.02em;line-height:1.12}
.gcard p{margin:16px 0 0;font-size:18.5px;line-height:1.6;color:var(--dim);max-width:54ch}
.gcard-vis{display:flex;align-items:center;justify-content:center;min-height:118px}

.gcard-big{
  font-size:clamp(52px,6.4vw,84px);font-weight:900;line-height:.92;
  letter-spacing:-.035em;color:var(--blue-lift);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
/* the three who actually turn up */
.gcard-faces{display:flex}
.gcard-faces img{
  width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:50% 20%;
  filter:grayscale(1);border:3px solid #1b1b1b;margin-left:-24px;
  transition:filter .4s,transform .4s var(--ease);
}
.gcard-faces img:first-child{margin-left:0}
.gcard:hover .gcard-faces img{filter:grayscale(0)}
/* before and after, set as type: there is no footage to show yet */
.gcard-ba{display:flex;align-items:center;gap:18px;font-weight:900;letter-spacing:-.02em}
.gcard-ba b{font-size:clamp(26px,2.6vw,34px)}
.gcard-ba b:first-of-type{color:var(--dim)}
.gcard-ba b:last-of-type{color:var(--blue-lift)}
.gcard-ba i{
  display:block;width:46px;height:3px;background:var(--blue);flex:none;
  transition:width .45s var(--ease);
}
.gcard:hover .gcard-ba i{width:70px}

@media (max-width:980px){
  .gcard{grid-template-columns:minmax(0,1fr) 260px;gap:32px;padding:38px 34px}
  .gcard h3{font-size:28px}
  .gcard-faces img{width:76px;height:76px;margin-left:-20px}
}
@media (max-width:760px){
  .gcards{grid-auto-rows:auto;gap:16px}
  .gcard{grid-template-columns:1fr;gap:26px;padding:32px 26px 30px}
  .gcard h3{font-size:25px}
  .gcard p{font-size:17px}
  .gcard-vis{justify-content:flex-start;min-height:0}
  .gcard-big{font-size:clamp(46px,13vw,64px)}
}

/* The about pages carry a single stat, so that one is still set large. */
.page-hero .page-stats:not(.page-stats--even) .pstat:first-child b{font-size:clamp(38px,5vw,62px)}
.page-hero .page-stats:not(.page-stats--even){gap:0 56px}

/* The grant hero lists four prizes of equal standing, so they are set at one
   size in four even columns and their labels line up on a single baseline. */
.page-stats--even{
  grid-template-columns:repeat(4,minmax(0,1fr));
  justify-content:stretch;gap:0 30px;max-width:1040px;
}
.page-stats--even .pstat b{font-size:clamp(34px,4.1vw,56px)}
.page-stats--even .pstat span{margin-top:12px;font-size:12.5px}
.page-stats--even .pstat{
  padding-left:22px;border-left:1px solid rgba(255,255,255,.18);
}
.page-stats--even .pstat:first-child{padding-left:0;border-left:0}
@media (max-width:880px){
  .page-stats--even{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px;max-width:none}
  .page-stats--even .pstat:nth-child(3){padding-left:0;border-left:0}
}
@media (max-width:520px){
  .page-stats--even{grid-template-columns:1fr;gap:22px}
  .page-stats--even .pstat{padding-left:0;border-left:0}
}