/* =========================================================
   Winepress Mentorship Hub
   Brand system: White #FFFFFF · Wine #68020E · Black #000000
   Supporting: wine tints for soft surfaces, gold for focus rings. Headings: Figtree · Body: Google Sans Flex
   ========================================================= */

:root{
  --white: #FFFFFF;
  --wine:  #68020E;
  --black: #000000;

  --wine-deep: #4A010A;
  --wine-hi:   #86081B;
  --wine-tint: #FBF5F5;
  --wine-tint-2: #F5E8E9;

  --focus: #D4A537;   /* gold focus ring, visible on white, wine and black */

  --text:   rgba(0,0,0,.70);
  --text-2: rgba(0,0,0,.52);
  --line:   rgba(0,0,0,.09);
  --line-2: rgba(0,0,0,.14);
  --on-wine: rgba(255,255,255,.86);
  --on-wine-2: rgba(255,255,255,.66);
  --line-wine: rgba(255,255,255,.2);

  --shadow-sm: 0 6px 20px -12px rgba(74,1,10,.35);
  --shadow:    0 22px 50px -30px rgba(74,1,10,.45);
  --shadow-lg: 0 40px 90px -45px rgba(0,0,0,.45);

  --maxw: 1180px;
  --pad: clamp(20px, 5vw, 64px);
  --radius: 16px;
  --header-h: 74px;

  --font-display: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Google Sans Flex', 'Google Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Type scale (rem = 16px) */
  --fs-h1: 2.25rem;                                   /* 36px mobile/tablet */
  --fs-h2: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);       /* 24 to 32px */
  --fs-h3: 1.25rem;                                   /* 20px */
  --fs-lead: 1.125rem;                                /* 18px */
  --fs-body: 1rem;                                    /* 16px */
  --fs-small: .875rem;                                /* 14px */
  --fs-label: .75rem;                                 /* 12px uppercase labels */
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px); }
body{
  margin:0; background:var(--white); color:var(--text);
  font-family:var(--font-body); font-weight:400; font-size:var(--fs-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
body.menu-open{ overflow:hidden; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
p{ margin:0; }
p + p{ margin-top:16px; }

a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:3px solid var(--focus); outline-offset:3px; border-radius:6px;
}

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.section{ position:relative; padding-block:clamp(72px, 9vw, 120px); }
.section--tint{ background:var(--wine-tint); }

.skip-link{
  position:absolute; left:-9999px; top:16px; z-index:200;
  background:var(--black); color:var(--white); padding:10px 16px; border-radius:8px;
  font-family:var(--font-display); font-weight:700; transition:top .2s var(--ease);
}
.skip-link:focus{ position:fixed; left:16px; }

/* ---------- Type ---------- */
h1,h2,h3{ font-family:var(--font-display); color:var(--black); margin:0; letter-spacing:-.015em; text-wrap:balance; }
h2{ font-size:var(--fs-h2); font-weight:800; line-height:1.2; }
h3{ font-size:var(--fs-h3); font-weight:700; line-height:1.3; letter-spacing:-.005em; }

.eyebrow{
  display:inline-block; margin:0 0 20px; padding:7px 14px; border-radius:100px;
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-label); letter-spacing:.14em; text-transform:uppercase;
  color:var(--wine); background:var(--wine-tint-2);
}
.eyebrow--light{ color:var(--white); background:rgba(255,255,255,.14); }

.section__head{ max-width:700px; margin-bottom:clamp(40px, 5vw, 60px); }
.section__head--center{ margin-inline:auto; text-align:center; }
.section__sub{ margin-top:14px; font-size:var(--fs-lead); max-width:60ch; }
.lede{ font-size:var(--fs-lead); line-height:1.6; color:rgba(0,0,0,.82); max-width:65ch; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--font-display); font-weight:700; font-size:1rem; letter-spacing:.005em;
  padding:.85em 1.6em; border-radius:100px; border:1.5px solid transparent; cursor:pointer;
  transition:transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn--lg{ padding:.95em 1.9em; font-size:1.0625rem; }
.btn--block{ width:100%; }
.btn svg{ width:16px; height:16px; flex:none; }

.btn--wine{ background:var(--wine); color:var(--white); box-shadow:0 14px 28px -16px rgba(104,2,14,.9); }
.btn--wine:hover{ background:var(--wine-hi); transform:translateY(-2px); }
.btn--light{ background:var(--white); color:var(--wine); box-shadow:0 14px 30px -16px rgba(0,0,0,.6); }
.btn--light:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -16px rgba(0,0,0,.65); }
.btn--outline{ background:transparent; color:var(--black); border-color:var(--line-2); }
.btn--outline:hover{ border-color:var(--wine); color:var(--wine); transform:translateY(-2px); }
.btn--outline-light{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.45); }
.btn--outline-light:hover{ border-color:var(--white); background:rgba(255,255,255,.08); transform:translateY(-2px); }
.btn[disabled]{ opacity:.6; cursor:progress; transform:none; }

/* =========================================================
   Announcement bar
   ========================================================= */
.announce{ background:var(--black); color:var(--white); font-size:var(--fs-small); }
.announce__inner{ display:flex; align-items:center; justify-content:center; gap:10px 16px; flex-wrap:wrap; padding-block:10px; text-align:center; }
.announce p{ color:rgba(255,255,255,.88); }
.announce strong{ color:var(--white); font-weight:600; }
.announce__dot{ width:7px; height:7px; border-radius:50%; background:#ff4d5e; flex:none; animation:pulse 2.4s infinite; }
.announce__link{ font-family:var(--font-display); font-weight:700; color:var(--white); border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:1px; }
.announce__link:hover{ border-color:var(--white); }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(255,77,94,.6);} 70%{ box-shadow:0 0 0 8px rgba(255,77,94,0);} 100%{ box-shadow:0 0 0 0 rgba(255,77,94,0);} }

/* =========================================================
   Header
   ========================================================= */
.header{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid transparent; transition:border-color .3s var(--ease), box-shadow .3s var(--ease); }
.header.is-scrolled{ border-color:var(--line); box-shadow:0 10px 30px -24px rgba(0,0,0,.4); }
.header__inner{ display:flex; align-items:center; gap:16px; height:var(--header-h); }

.brand{ display:inline-flex; align-items:center; gap:10px; color:var(--wine); }
.brand__logo{ display:block; height:48px; width:calc(48px * 964 / 351); flex:none; }
.brand__m{ color:var(--wine); }
.brand__w{ color:var(--black); }

.header__actions{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.header__cta{ padding:.6em 1.3em; font-size:1rem; }
.menu-btn{
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0;
  border-radius:50%; border:1.5px solid var(--line-2); background:var(--white); color:var(--black);
  font-family:var(--font-display); font-weight:700; font-size:1rem; cursor:pointer;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.menu-btn:hover{ border-color:var(--wine); color:var(--wine); }
.menu-btn__icon{ display:grid; gap:4px; width:18px; }
.menu-btn__icon i{ display:block; height:2px; border-radius:2px; background:currentColor; }
.menu-btn__icon i:last-child{ width:12px; justify-self:end; }
.menu-btn__label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- Overlay menu ---------- */
.menu{ position:fixed; inset:0; z-index:100; background:var(--wine); color:var(--white); overflow-y:auto; opacity:0; transform:translateY(-8px); transition:opacity .3s var(--ease), transform .3s var(--ease); }
.menu.is-open{ opacity:1; transform:none; }
.menu[hidden]{ display:none; }
.menu__top{ display:flex; align-items:center; height:var(--header-h); }
.menu .brand__m, .menu .brand__w{ color:var(--white); }
.menu__close{ margin-left:auto; display:inline-flex; align-items:center; gap:10px; height:44px; padding:0 16px; border-radius:100px; border:1.5px solid rgba(255,255,255,.35); background:transparent; color:var(--white); font-family:var(--font-display); font-weight:700; font-size:1rem; cursor:pointer; }
.menu__close:hover{ border-color:var(--white); }
.menu__close svg{ width:14px; height:14px; }
.menu__body{ max-width:560px; padding-block:clamp(24px,5vh,56px) 48px; }
.menu__nav{ display:flex; flex-direction:column; }
.menu__nav a{ font-family:var(--font-display); font-weight:500; font-size:1.25rem; line-height:1.3; letter-spacing:0; padding:14px 0; color:rgba(255,255,255,.92); border-bottom:1px solid rgba(255,255,255,.12); transition:color .2s var(--ease), padding-left .25s var(--ease); }
.menu__nav a:hover{ color:var(--white); padding-left:10px; }


/* =========================================================
   Hero
   ========================================================= */
.hero{ position:relative; overflow:hidden; color:var(--white);
  background:
    radial-gradient(55% 75% at 78% 45%, rgba(255,255,255,.07), transparent 70%),
    var(--wine);
}
.hero__inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,56px); min-height:clamp(600px, 80vh, 760px); }
.hero__copy{ align-self:center; padding-block:clamp(56px,8vw,96px); position:relative; z-index:2; container-type:inline-size; }
.hero__title{ font-size:var(--fs-h1); font-weight:800; line-height:1.05; letter-spacing:-.025em; color:var(--white); margin-bottom:22px; }
.hero__title > span{ display:block; white-space:nowrap; }
/* longest line is ~10.8em wide, so this keeps the title on two lines at any desktop width */
@supports (font-size: 1cqi){ .hero__title{ font-size:min(4rem, calc(100cqi / 11)); } }
.hero__title .amp{ font-weight:500; font-style:italic; color:rgba(255,255,255,.62); }
.hero__lead{ color:var(--on-wine); font-size:var(--fs-body); line-height:1.6; max-width:58ch; }
.hero__tagline{ margin-top:16px; font-family:var(--font-display); font-weight:600; font-size:var(--fs-lead); line-height:1.4; color:var(--white); }
.hero__actions{ display:flex; flex-wrap:wrap; justify-content:flex-start; gap:12px; margin-top:30px; }

.stats{ list-style:none; margin:40px 0 0; padding:24px 0 0; display:grid; grid-template-columns:repeat(3, auto); justify-content:start; gap:clamp(20px,4vw,48px); border-top:1px solid var(--line-wine); }
.stats li{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.stats__num{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height:1; color:var(--white); }
.stats__label{ font-size:var(--fs-small); color:var(--on-wine-2); max-width:16ch; line-height:1.4; }

.hero__visual{ position:relative; display:flex; align-items:flex-end; justify-content:center; padding-top:40px; }
.hero__figure{ position:relative; width:min(100%, 540px); padding-top:15%; }
.hero__arch{ position:absolute; left:11%; right:11%; top:5%; bottom:0; border-radius:999px 999px 0 0; background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.03) 70%); border:1px solid rgba(255,255,255,.18); border-bottom:0; }
.hero__arch--outline{ left:3%; right:3%; top:0; background:none; border-color:rgba(255,255,255,.1); }
.hero__photo{ position:relative; z-index:1; width:100%; height:auto; filter:drop-shadow(0 30px 40px rgba(0,0,0,.3)); }
.hero__badge{ position:absolute; z-index:2; left:-6%; bottom:20%; display:flex; align-items:center; gap:10px; padding:10px 16px 10px 10px; border-radius:100px; background:var(--white); color:var(--black); box-shadow:var(--shadow-lg); font-family:var(--font-display); }
.hero__badge svg{ width:34px; height:34px; color:var(--wine); }
.hero__badge strong{ display:block; font-size:var(--fs-small); font-weight:800; line-height:1.15; }
.hero__badge span{ display:block; font-size:var(--fs-label); font-weight:600; color:var(--text-2); letter-spacing:.02em; }

/* =========================================================
   The Winepress: the press sequence
   ========================================================= */
.press__intro{ max-width:760px; }
.press__intro h2{ margin-bottom:18px; }

.story{ display:grid; grid-template-columns:.42fr 1fr; gap:clamp(24px,4vw,56px); margin-top:clamp(36px,5vw,56px); padding:clamp(28px,4.5vw,56px); border-radius:24px; background:var(--wine-tint); border:1px solid var(--wine-tint-2); }
.story__side{ display:flex; flex-direction:column; gap:18px; align-items:flex-start; }
.story__icon{ width:64px; height:64px; border-radius:16px; display:grid; place-items:center; background:var(--wine); color:var(--white); }
.story__icon svg{ width:42px; height:42px; }
.story__side h3{ font-size:var(--fs-h2); font-weight:800; line-height:1.2; }
.story__body{ max-width:65ch; }
.story__body p{ font-size:var(--fs-body); line-height:1.6; color:var(--text); }
.story__body p + p{ margin-top:18px; }
.story__body .story__essence{ font-family:var(--font-display); font-weight:700; font-size:var(--fs-h3); line-height:1.35; color:var(--wine); padding-left:16px; border-left:3px solid var(--wine); }

/* =========================================================
   Vision & Mission (wine band)
   ========================================================= */
.mv{ background:var(--wine); color:var(--white); }
.mv h2{ color:var(--white); }
.mv__grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.mv__card{ padding:clamp(28px,3.5vw,40px); border-radius:var(--radius); background:rgba(255,255,255,.06); border:1px solid var(--line-wine); }
.mv__card .mv__label{ display:flex; align-items:center; gap:12px; margin-bottom:16px; font-family:var(--font-display); font-weight:700; font-size:var(--fs-label); letter-spacing:.16em; text-transform:uppercase; color:var(--on-wine-2); }
.mv__label::before{ content:""; width:28px; height:2px; background:var(--white); border-radius:2px; }
.mv__card p{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.125rem, 1rem + .4vw, 1.25rem); line-height:1.5; color:var(--white); letter-spacing:-.005em; }
.values{ display:flex; align-items:center; flex-wrap:wrap; gap:16px 22px; margin-top:34px; padding-top:28px; border-top:1px solid var(--line-wine); }
.values__label{ font-family:var(--font-display); font-weight:700; font-size:var(--fs-label); letter-spacing:.18em; text-transform:uppercase; color:var(--on-wine-2); }
.values ul{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; }
.values li{ padding:9px 20px; border-radius:100px; background:var(--white); color:var(--wine); font-family:var(--font-display); font-weight:700; font-size:1rem; }

/* =========================================================
   Curriculum
   ========================================================= */
.curric__grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.curric__grid li{ display:flex; align-items:center; gap:18px; padding:20px 26px; background:var(--white); font-family:var(--font-display); font-weight:600; font-size:var(--fs-body); line-height:1.4; color:var(--black); -webkit-tap-highlight-color:transparent; }

.format{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:28px; }
.format__item{ padding:26px 26px 28px; border-radius:var(--radius); background:var(--white); border:1px solid var(--line); }
.format__item h3{ display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:1.125rem; }
.format__item h3::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--wine); }
.format__item p{ font-size:var(--fs-body); }

/* =========================================================
   Mentor
   ========================================================= */
.mentor__grid{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(36px,6vw,80px); align-items:start; }
.mentor__figure{ position:relative; margin:0; padding:0 18px 18px 0; position:sticky; top:calc(var(--header-h) + 24px); }
.mentor__figure::before{ content:""; position:absolute; inset:18px 0 0 18px; border-radius:var(--radius); background:var(--wine); }
.mentor__frame{ position:relative; }
.mentor__figure img{ position:relative; width:100%; aspect-ratio:914/1148; object-fit:cover; border-radius:var(--radius); }
.mentor__figure figcaption{ position:absolute; z-index:1; left:16px; bottom:16px; padding:10px 16px; border-radius:12px; background:var(--white); box-shadow:var(--shadow); font-family:var(--font-display); }
.mentor__figure figcaption strong{ display:block; font-size:var(--fs-body); color:var(--black); font-weight:800; }
.mentor__figure figcaption span{ display:block; font-size:var(--fs-small); color:var(--text-2); font-weight:600; }
.mentor__body h2{ margin-bottom:20px; }
.mentor__body p{ max-width:65ch; }
/* =========================================================
   Who it's for
   ========================================================= */
.who__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.who__card{ position:relative; padding:30px 26px 32px; border-radius:var(--radius); background:var(--white); border:1px solid var(--line); transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
@media (hover:hover){ .who__card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:transparent; } }
.who__icon{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--wine); color:var(--white); margin-bottom:22px; }
.who__icon svg{ width:24px; height:24px; }
.who__card h3{ margin-bottom:10px; }
.who__card p{ font-size:var(--fs-body); }

/* =========================================================
   Testimonials
   ========================================================= */
.testi__card{ margin:0; display:flex; flex-direction:column; gap:22px; padding:32px 28px; border-radius:var(--radius); background:var(--white); border:1px solid var(--line); }
.testi__mark{ width:34px; height:34px; color:var(--wine); }
.testi__card blockquote{ margin:0; font-size:var(--fs-body); line-height:1.6; color:rgba(0,0,0,.8); }
.testi__card figcaption{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:20px; border-top:1px solid var(--line); }
.testi__avatar{ position:relative; overflow:hidden; width:52px; height:52px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--wine); color:var(--white); font-family:var(--font-display); font-weight:700; font-size:var(--fs-small); }
.testi__photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--wine); }
.testi__name{ font-family:var(--font-display); font-weight:700; color:var(--black); }

/* =========================================================
   Rails (swipeable rows) for testimonials and videos
   ========================================================= */
.rail__track{ display:flex; gap:20px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:4px 2px 8px; margin:-4px -2px 0; scrollbar-width:none; }
.rail__track::-webkit-scrollbar{ display:none; }
.rail__track > *{ flex:0 0 auto; scroll-snap-align:start; }
.rail__track:focus-visible{ outline:3px solid var(--focus); outline-offset:4px; border-radius:var(--radius); }
.rail__nav{ display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:22px; }
.rail__count{ margin-right:auto; font-family:var(--font-display); font-weight:700; font-size:var(--fs-small); color:var(--text-2); }
.rail__btn{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:var(--white); color:var(--black); border:1.5px solid var(--line-2); cursor:pointer; transition:border-color .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease); }
.rail__btn svg{ width:18px; height:18px; }
.rail__btn:disabled{ opacity:.35; cursor:default; }
@media (hover:hover){ .rail__btn:not(:disabled):hover{ border-color:var(--wine); color:var(--wine); } }
.rail.is-static .rail__nav{ display:none; }

.rail--testi .testi__card{ width:calc((100% - 40px) / 3); }
@media (max-width:1024px){ .rail--testi .testi__card{ width:calc((100% - 20px) / 2); } }
@media (max-width:640px){ .rail--testi .testi__card{ width:86%; } }

.precious__inner{ display:grid; grid-template-columns:minmax(0, 440px) minmax(260px, 380px); justify-content:center; gap:clamp(28px,6vw,96px); align-items:center; }
.precious__head h2{ font-size:clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
.precious__role{ margin-top:10px; font-family:var(--font-display); font-weight:600; font-size:var(--fs-lead); color:var(--wine); }
.player{ position:relative; width:100%; aspect-ratio:var(--player-ratio, 9 / 16); border-radius:20px; overflow:hidden; background:radial-gradient(90% 70% at 30% 20%, var(--wine-hi), var(--wine) 45%, var(--wine-deep) 75%, var(--black)); box-shadow:var(--shadow-lg); }
.player__poster{ position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; cursor:pointer; background:none; color:var(--white); font:inherit; }
.player__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.player__shade{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.02) 45%, rgba(0,0,0,.6)); }
.player__play{ position:absolute; left:50%; top:47%; transform:translate(-50%,-50%); width:72px; height:72px; border-radius:50%; background:var(--white); box-shadow:0 14px 30px -10px rgba(0,0,0,.6); transition:transform .25s var(--ease); }
.player__play::after{ content:""; position:absolute; left:29px; top:24px; border-style:solid; border-width:12px 0 12px 19px; border-color:transparent transparent transparent var(--wine); }
.player__foot{ position:absolute; left:16px; right:16px; bottom:16px; display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; border-radius:100px; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(4px); font-family:var(--font-display); font-weight:700; font-size:var(--fs-small); }
.player__foot svg{ width:14px; height:14px; flex:none; }
.player__time{ font-weight:600; opacity:.75; padding-left:8px; margin-left:2px; border-left:1px solid rgba(255,255,255,.35); }
.player__video{ position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:contain; background:var(--black); }
.player__poster{ z-index:1; }
.player.is-playing .player__poster{ display:none; }
@media (hover:hover){ .player__poster:hover .player__play{ transform:translate(-50%,-50%) scale(1.08); } }
.player__poster:focus-visible{ outline:3px solid var(--focus); outline-offset:-6px; border-radius:20px; }
/* landscape video: heading on top, wide player below */
.precious__inner.is-landscape{ grid-template-columns:minmax(0, 880px); }
.precious__inner.is-landscape .player{ max-width:880px; }
.precious__inner.is-landscape .player__play{ top:60%; }   /* keep the button off the speaker's face */

/* =========================================================
   Webinars
   ========================================================= */
.webinar{ display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(28px,5vw,60px); align-items:center; padding:clamp(32px,5vw,60px); border-radius:24px; background:var(--wine-tint); border:1px solid var(--wine-tint-2); }
.webinar h2{ margin-bottom:16px; }
.webinar__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.webinar__badge{ justify-self:center; width:100%; max-width:230px; aspect-ratio:1; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; background:var(--wine); color:var(--white); box-shadow:var(--shadow); position:relative; }
.webinar__badge::before{ content:""; position:absolute; inset:-12px; border-radius:50%; border:1px dashed rgba(104,2,14,.35); }
.webinar__badge span{ font-family:var(--font-display); font-weight:700; font-size:var(--fs-label); letter-spacing:.24em; text-transform:uppercase; color:var(--on-wine); }
.webinar__badge strong{ font-family:var(--font-display); font-weight:900; font-size:clamp(2.3rem,4.6vw,3.2rem); line-height:1.05; display:flex; align-items:center; gap:10px; }
.webinar__badge strong i{ width:12px; height:12px; border-radius:50%; background:#ff4d5e; animation:pulse 2.4s infinite; }

/* =========================================================
   Join the Seat-Up (wine band) + ticket
   ========================================================= */
.join{ background:var(--wine); color:var(--white); overflow:hidden; }
.join h2{ color:var(--white); }
.join .section__sub{ color:var(--on-wine); }
.join__layout{ display:grid; grid-template-columns:.8fr 1.2fr; grid-template-areas:"flyer head" "flyer body"; column-gap:clamp(32px,5vw,64px); align-items:start; }
.join__head{ grid-area:head; margin-bottom:32px; }
.join__flyer{ grid-area:flyer; margin:0; position:sticky; top:calc(var(--header-h) + 24px); }
.join__flyer img{ width:100%; height:auto; border-radius:18px; box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.14); }
.join__body{ grid-area:body; }
.join__body .ticket{ margin-top:40px; }
.join__block + .join__block{ margin-top:36px; }
.join__block h3{ color:var(--white); font-size:var(--fs-label); letter-spacing:.16em; text-transform:uppercase; margin-bottom:16px; color:var(--on-wine-2); }
.ticklist{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.ticklist li{ position:relative; padding-left:34px; color:var(--on-wine); }
.ticklist li::before{ content:""; position:absolute; left:0; top:3px; width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.14); }
.ticklist li::after{ content:""; position:absolute; left:7px; top:9px; width:8px; height:5px; border-left:2px solid var(--white); border-bottom:2px solid var(--white); transform:rotate(-45deg); }
.ticklist--two{ grid-template-columns:1fr 1fr; gap:12px 22px; }
.ticklist small{ opacity:.7; }

.ticket{ position:relative; border-radius:22px; background:var(--white); color:var(--black); box-shadow:var(--shadow-lg); overflow:hidden; }
.ticket__head{ padding:28px 30px 24px; }
.ticket__label{ font-family:var(--font-display); font-weight:700; font-size:var(--fs-label); letter-spacing:.18em; text-transform:uppercase; color:var(--text-2); }
.ticket__name{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem, 1.3rem + .8vw, 1.75rem); line-height:1.05; color:var(--black); margin-top:6px; letter-spacing:-.02em; }
.ticket__name span{ color:var(--wine); }
.ticket__fee{ display:flex; align-items:baseline; gap:12px; margin-top:20px; }
.ticket__fee strong{ font-family:var(--font-display); font-weight:800; font-size:2.5rem; line-height:1; color:var(--wine); letter-spacing:-.02em; }
.ticket__fee span{ font-family:var(--font-display); font-weight:700; color:var(--text-2); }
.ticket__feenote{ margin-top:6px; font-size:var(--fs-small); color:var(--text-2); }
.ticket__tear{ position:relative; height:24px; }
.ticket__tear::before{ content:""; position:absolute; left:24px; right:24px; top:50%; border-top:2px dashed var(--line-2); }
.ticket__tear::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 0 50%, var(--wine) 12px, transparent 13px), radial-gradient(circle at 100% 50%, var(--wine) 12px, transparent 13px); }
.ticket__body{ padding:20px 30px 30px; }
.timeline{ list-style:none; margin:0 0 26px; padding:0; display:grid; gap:0; }
.timeline li{ position:relative; display:flex; justify-content:space-between; gap:12px; padding:12px 0 12px 26px; border-bottom:1px solid var(--line); font-size:var(--fs-body); }
.timeline li:last-child{ border-bottom:0; }
.timeline li::before{ content:""; position:absolute; left:3px; top:50%; width:10px; height:10px; margin-top:-5px; border-radius:50%; border:2px solid var(--wine); background:var(--white); }
.timeline li:last-child::before{ background:var(--wine); }
.timeline span{ color:var(--text-2); }
.timeline strong{ font-family:var(--font-display); font-weight:700; color:var(--black); white-space:nowrap; }
.ticket__note{ margin-top:14px; text-align:center; font-size:var(--fs-small); color:var(--text-2); }

/* =========================================================
   FAQ
   ========================================================= */
.faq__list{ max-width:860px; }
.faq details{ border-bottom:1px solid var(--line); }
.faq details:first-child{ border-top:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; position:relative; padding:22px 48px 22px 0; font-family:var(--font-display); font-weight:700; font-size:1.125rem; line-height:1.4; color:var(--black); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; position:absolute; right:4px; top:50%; width:30px; height:30px; margin-top:-15px; border-radius:50%; background:var(--wine-tint-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2368020E' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat; transition:transform .25s var(--ease), background-color .25s var(--ease); }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ padding:0 48px 24px 0; max-width:68ch; }

/* =========================================================
   Footer
   ========================================================= */
.footer{ background:var(--black); color:rgba(255,255,255,.72); padding-block:64px 28px; }
.footer__top{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:40px; }
.footer .brand__m, .footer .brand__w{ color:var(--white); }
.footer__about{ margin-top:18px; max-width:40ch; font-size:var(--fs-body); color:rgba(255,255,255,.6); }
.footer__h{ margin:0 0 16px; font-family:var(--font-display); font-weight:700; font-size:var(--fs-label); letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.footer__links{ list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:var(--fs-body); }
.footer__links a:hover{ color:var(--white); }
.footer__cta{ margin-top:22px; }
.footer__base{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:52px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); font-size:var(--fs-small); color:rgba(255,255,255,.5); }
.footer__base p{ margin:0; }
.footer__motto{ font-family:var(--font-display); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:var(--fs-label); }

/* =========================================================
   Register page
   ========================================================= */
.reg{ padding-block:clamp(36px,5vw,64px) clamp(64px,8vw,104px); background:linear-gradient(180deg, var(--wine-tint) 0, var(--white) 420px); }
.reg__back{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--text-2); margin-bottom:26px; }
.reg__back:hover{ color:var(--wine); }
.reg__back svg{ width:16px; height:16px; }
.reg__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,4vw,48px); align-items:start; }

.reg__summary{ position:sticky; top:calc(var(--header-h) + 24px); padding:clamp(28px,3.5vw,40px); border-radius:22px; background:var(--wine); color:var(--white); box-shadow:var(--shadow); }
.reg__summary h1{ color:var(--white); font-size:var(--fs-h1); font-weight:800; line-height:1.05; letter-spacing:-.025em; }
.reg__summary .sub{ margin-top:12px; color:var(--on-wine); }
.reg__fee{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px; margin-top:24px; padding:18px 20px; border-radius:14px; background:rgba(255,255,255,.08); border:1px solid var(--line-wine); }
.reg__fee strong{ font-family:var(--font-display); font-weight:800; font-size:2.25rem; line-height:1; }
.reg__fee span{ font-family:var(--font-display); font-weight:700; color:var(--on-wine-2); }
.reg__fee small{ flex-basis:100%; font-size:var(--fs-small); color:var(--on-wine-2); }
.reg__dates{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:10px; }
.reg__dates li{ display:flex; justify-content:space-between; gap:10px; font-size:var(--fs-body); color:var(--on-wine); padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.12); }
.reg__dates li:last-child{ border-bottom:0; padding-bottom:0; }
.reg__dates strong{ color:var(--white); font-family:var(--font-display); font-weight:700; white-space:nowrap; }
.reg__summary .join__block h3{ margin-bottom:14px; }
.reg__summary .ticklist{ gap:10px; font-size:var(--fs-body); }
.reg__summary .join__block{ margin-top:28px; }

.steps{ list-style:none; margin:0; padding:0; display:grid; gap:12px; counter-reset:step; }
.steps li{ counter-increment:step; display:flex; gap:12px; align-items:flex-start; color:var(--on-wine); font-size:var(--fs-body); }
.steps li::before{ content:counter(step); flex:none; width:24px; height:24px; border-radius:50%; background:var(--white); color:var(--wine); font-family:var(--font-display); font-weight:800; font-size:.75rem; display:grid; place-items:center; margin-top:1px; }

.formcard{ padding:clamp(26px,3.5vw,44px); border-radius:22px; background:var(--white); border:1px solid var(--line); box-shadow:var(--shadow-lg); }
.formcard__head{ margin-bottom:28px; }
.formcard__head h2{ font-size:var(--fs-h2); }
.formcard__head p{ margin-top:8px; }

.form{ display:grid; gap:20px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:grid; gap:7px; align-content:start; }
.field label, .fieldset legend{ font-family:var(--font-display); font-weight:700; font-size:.9375rem; color:var(--black); }
.field .req{ color:var(--wine); }
.field .opt{ font-family:var(--font-body); font-weight:400; color:var(--text-2); }
.field .hint{ font-size:var(--fs-small); color:var(--text-2); line-height:1.5; }
.field input, .field select, .field textarea{
  width:100%; padding:13px 15px; border-radius:12px; border:1.5px solid var(--line-2); background:var(--white);
  font-family:var(--font-body); font-size:1rem; color:var(--black);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea{ min-height:96px; resize:vertical; }
.field select{ appearance:none; padding-right:40px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2368020E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:16px; }
.field input::placeholder, .field textarea::placeholder{ color:rgba(0,0,0,.35); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--wine); box-shadow:0 0 0 4px rgba(104,2,14,.1); }
.field.is-invalid input, .field.is-invalid select{ border-color:#C4152B; }
.field__error{ display:none; font-size:var(--fs-small); color:#C4152B; }
.field.is-invalid .field__error{ display:block; }

.fieldset{ border:0; margin:0; padding:0; display:grid; gap:10px; }
.fieldset legend{ margin-bottom:10px; padding:0; }
.choices{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.choice{ position:relative; cursor:pointer; }
.choice input{ position:absolute; opacity:0; pointer-events:none; }
.choice__box{ display:flex; flex-direction:column; gap:2px; padding:14px 16px; border-radius:12px; border:1.5px solid var(--line-2); transition:border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); }
.choice__box strong{ font-family:var(--font-display); font-weight:700; color:var(--black); font-size:1rem; }
.choice__box span{ font-size:var(--fs-small); color:var(--text-2); }
.choice__box b{ font-family:var(--font-display); font-weight:800; color:var(--wine); font-size:1.15rem; margin-top:4px; }
.choice input:checked + .choice__box{ border-color:var(--wine); background:var(--wine-tint); box-shadow:0 0 0 4px rgba(104,2,14,.08); }
.choice input:focus-visible + .choice__box{ outline:3px solid var(--focus); outline-offset:2px; }

.group{ border:0; margin:0; padding:24px 0 0; display:grid; gap:20px; border-top:1px solid var(--line); min-width:0; }
.group:first-of-type{ border-top:0; padding-top:0; }
.group__title{ display:flex; align-items:center; gap:10px; padding:0; margin-bottom:4px; font-family:var(--font-display); font-weight:800; font-size:1.125rem; color:var(--black); }
.group__title span{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--wine); color:var(--white); font-size:var(--fs-small); }
.field__label{ font-family:var(--font-display); font-weight:700; font-size:.9375rem; color:var(--black); line-height:1.45; }
.field label[for]{ line-height:1.45; }
.field__intro{ font-size:var(--fs-body); color:var(--text); }
.choices--sm .choice__box{ flex-direction:row; align-items:center; justify-content:center; padding:12px 14px; min-height:48px; }
.choices--stack{ grid-template-columns:1fr; gap:10px; }
.choices--stack .choice__box{ padding:13px 16px 13px 46px; position:relative; }
.choices--stack .choice__box strong{ font-weight:600; line-height:1.4; }
.choices--stack .choice__box::before{ content:""; position:absolute; left:16px; top:50%; width:18px; height:18px; margin-top:-9px; border-radius:50%; border:2px solid var(--line-2); background:var(--white); }
.choices--stack .choice input:checked + .choice__box::before{ border-color:var(--wine); box-shadow:inset 0 0 0 4px var(--white); background:var(--wine); }
.field[data-group].is-invalid .choice__box{ border-color:#C4152B; }
.notice{ padding:18px 18px 16px; border-radius:14px; background:var(--wine-tint); border:1px solid var(--wine-tint-2); gap:12px; }
.notice__text{ font-size:var(--fs-body); color:var(--text); }
.notice__text strong{ color:var(--wine); }
.upload{ display:flex; align-items:center; gap:14px; padding:14px; border-radius:14px; border:1.5px dashed var(--line-2); background:var(--white); cursor:pointer; transition:border-color .2s var(--ease), background .2s var(--ease); }
.upload:hover{ border-color:var(--wine); background:var(--wine-tint); }
.upload input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.upload:focus-within{ outline:3px solid var(--focus); outline-offset:2px; }
.upload__thumb{ width:64px; height:64px; flex:none; border-radius:12px; overflow:hidden; display:grid; place-items:center; background:var(--wine-tint-2); color:var(--wine); }
.upload__thumb svg{ width:28px; height:28px; }
.upload__thumb img{ width:100%; height:100%; object-fit:cover; }
.upload__text{ display:grid; gap:2px; min-width:0; }
.upload__text strong{ font-family:var(--font-display); font-weight:700; color:var(--black); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.upload__text span{ font-size:var(--fs-small); color:var(--text-2); }
.field.is-invalid .upload{ border-color:#C4152B; }
.terms{ gap:14px; }
.terms__text{ padding:16px 18px; border-radius:14px; background:var(--wine-tint); border:1px solid var(--wine-tint-2); display:grid; gap:10px; }
.terms__text p{ margin:0; font-size:.9375rem; color:var(--text); }
.consent{ display:flex; gap:12px; align-items:flex-start; font-size:.9375rem; color:var(--text); cursor:pointer; }
.nw{ white-space:nowrap; }
.field .consent{ font-family:var(--font-body); font-weight:400; font-size:.9375rem; color:var(--text); line-height:1.55; }
.consent input{ width:18px; height:18px; flex:none; margin-top:3px; accent-color:var(--wine); }
.form__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form__note{ text-align:center; font-size:var(--fs-small); color:var(--text-2); }
.form__error{ display:none; padding:12px 14px; border-radius:12px; background:#FDECEE; color:#9B0F22; font-size:.9375rem; }
.form__error.is-visible{ display:block; }

.success{ text-align:center; padding:12px 0 4px; }
.success__icon{ width:72px; height:72px; margin:0 auto 22px; border-radius:50%; display:grid; place-items:center; background:var(--wine); color:var(--white); box-shadow:var(--shadow); }
.success__icon svg{ width:32px; height:32px; }
.success h2{ font-size:var(--fs-h2); margin-bottom:12px; }
.success p{ max-width:46ch; margin-inline:auto; }
.success__next{ margin:26px 0; padding:20px; border-radius:14px; background:var(--wine-tint); border:1px solid var(--wine-tint-2); text-align:left; }
.success__next strong{ display:block; font-family:var(--font-display); color:var(--black); margin-bottom:6px; }
.success__next p{ margin:0; max-width:none; font-size:var(--fs-body); }
.success__actions{ display:grid; gap:12px; }
.success__icon > *{ display:none; }
.success__icon .success__tick{ display:block; }
.success[data-state="confirming"] .success__tick,
.success[data-state="cancelled"] .success__tick,
.success[data-state="failed"] .success__tick,
.success[data-state="problem"] .success__tick{ display:none; }
.success[data-state="confirming"] .success__spin{ display:block; width:30px; height:30px; border-radius:50%; border:3px solid rgba(255,255,255,.3); border-top-color:var(--white); animation:spin .9s linear infinite; }
.success[data-state="cancelled"] .success__mark,
.success[data-state="failed"] .success__mark,
.success[data-state="problem"] .success__mark{ display:block; font:800 2rem/1 var(--font-display); }
.success[data-state="cancelled"] .success__icon,
.success[data-state="failed"] .success__icon,
.success[data-state="problem"] .success__icon{ background:var(--wine-tint-2); color:var(--wine); box-shadow:none; }
.success__id{ max-width:360px; margin:24px auto 0; padding:18px 20px; border-radius:14px; border:1.5px dashed var(--wine); background:var(--white); }
.success__id span{ display:block; font-size:var(--fs-label); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--wine); }
.success__id strong{ display:block; margin:4px 0 2px; font-family:var(--font-display); font-weight:800; font-size:2rem; line-height:1.2; letter-spacing:.04em; color:var(--black); }
.success__id small{ display:block; font-size:var(--fs-small); color:var(--text-2); }
.success__next a{ color:var(--wine); font-weight:600; }
.success__actions .btn--lg{ padding-inline:1.2em; }
.success #waBtn svg{ width:20px; height:20px; }
.form__code{ display:block; margin-top:6px; font-size:var(--fs-label); letter-spacing:.02em; opacity:.75; }
.setupcheck{ margin:0 0 24px; padding:18px 20px; border-radius:14px; border:1.5px dashed var(--wine); background:var(--wine-tint); }
.setupcheck strong{ display:block; font-family:var(--font-display); color:var(--black); margin-bottom:10px; }
.setupcheck ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.setupcheck li{ display:flex; gap:12px; align-items:flex-start; font-size:var(--fs-small); line-height:1.45; }
.setupcheck li b{ flex:none; min-width:40px; padding:2px 8px; border-radius:100px; text-align:center; font-size:var(--fs-label); color:var(--white); background:#1F7A3F; }
.setupcheck li.is-bad b{ background:var(--wine); }
.setupcheck li.is-wait b{ background:var(--text-2); }
.setupcheck li small{ display:block; color:var(--text-2); }
.success__secure{ margin-top:16px; font-size:var(--fs-small); color:var(--text-2); }
.success:not([data-state="saved"]):not([data-state="cancelled"]):not([data-state="failed"]) .success__secure{ display:none; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* =========================================================
   Reveal on scroll
   ========================================================= */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none; }
  .announce__dot, .webinar__badge strong i{ animation:none; }
  .menu{ transition:none; }
  .success__spin{ animation-duration:2.4s !important; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (min-width:1025px){
  :root{ --fs-h1: clamp(3rem, 1.6rem + 2.2vw, 4rem); }   /* 48 to 64px desktop */
}
@media (max-width:1024px){
  .who__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .rail__track{ margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad); scroll-padding-inline:var(--pad); }
  .hero__inner{ grid-template-columns:1fr; min-height:0; gap:0; }
  .hero__copy{ padding-bottom:40px; text-align:center; }
  .hero__title, .hero__title[class]{ font-size:clamp(1.75rem, 1.25rem + 2.4vw, 2.5rem); font-weight:700; line-height:1.12; letter-spacing:-.02em; }
  .hero__title > span{ display:inline; white-space:normal; }
  .hero__lead{ margin-inline:auto; }
  .hero__actions{ justify-content:center; }
  .stats{ justify-content:center; margin-inline:auto; }
  .stats li{ align-items:center; }
  .hero__visual{ padding-top:8px; }
  .hero__figure{ width:min(88%, 420px); }
  .hero__badge{ left:-2%; bottom:12%; }
  .story{ grid-template-columns:1fr; }
  .story__side{ flex-direction:row; align-items:center; }
  .story__icon{ width:52px; height:52px; border-radius:14px; }
  .story__icon svg{ width:34px; height:34px; }
  .mv__grid{ grid-template-columns:1fr; }
  .format{ grid-template-columns:1fr; }
  .mentor__grid{ grid-template-columns:1fr; }
  .mentor__figure{ position:relative; top:auto; max-width:420px; }
  .webinar{ grid-template-columns:1fr; }
  .webinar__badge{ order:-1; max-width:170px; justify-self:start; }
  .precious__inner{ grid-template-columns:1fr; gap:24px; }
  .player{ max-width:380px; }
  .precious__inner.is-landscape .player{ max-width:none; }
  .player__play{ width:60px; height:60px; }
  .player__play::after{ left:24px; top:19px; border-width:11px 0 11px 17px; }
  .player__foot{ left:12px; right:auto; bottom:12px; padding:9px 14px; }
  .join__layout{ grid-template-columns:1fr; grid-template-areas:"head" "flyer" "body"; }
  .join__flyer{ position:relative; top:auto; max-width:480px; margin-bottom:36px; }
  .footer__top{ grid-template-columns:1fr 1fr; }
  .footer__brandcol{ grid-column:1 / -1; }
  .reg__grid{ grid-template-columns:1fr; }
  .reg__summary{ position:relative; top:auto; }
}
@media (max-width:640px){
  .player__foot{ display:none; }   /* the caption in the video sits here on small screens */
  .announce__dot{ display:none; }
  .announce__inner{ gap:2px 10px; padding-block:9px; }
  .header__cta{ display:none; }
  .brand__logo{ height:40px; width:calc(40px * 964 / 351); }
  .stats{ grid-template-columns:repeat(3,1fr); gap:14px; }
  .stats__label{ font-size:var(--fs-small); }
  .hero__actions .btn{ flex:1 1 100%; }
  .curric__grid{ grid-template-columns:1fr; }
  .who__grid{ grid-template-columns:1fr; }
  .ticklist--two{ grid-template-columns:1fr; }
  .form__row, .choices{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; }
  .faq summary{ font-size:1.0625rem; }
}