/* ==========================================================================
   Fantasy Stables — coming soon
   Palette + type lifted from the HSW crest: heraldic red, laurel green,
   rope gold, parchment cream.
   ========================================================================== */

:root{
  --red:        #d7202a;
  --red-deep:   #a3121a;
  --red-ink:    #7d0d13;
  --gold:       #e3a93c;
  --gold-lt:    #f6cf78;
  --gold-dk:    #a9761d;
  --cream:      #fdfaf1;
  --parchment:  #f3ead6;
  --sand:       #e7d9ba;
  --ink:        #241b15;
  --ink-soft:   #574739;
  --bark:       #6d4a2e;
  --meadow:     #4f9f3e;
  --meadow-dk:  #2f6d2b;
  --meadow-ink: #1d4a1c;
  --sky:        #8fd0f2;
  --sky-dp:     #4ea3d8;
  --night:      #14100e;
  --night-2:    #1e1815;

  --shadow-sm: 0 2px 6px rgba(36,27,21,.10);
  --shadow:    0 10px 30px -12px rgba(36,27,21,.35);
  --shadow-lg: 0 28px 60px -24px rgba(36,27,21,.45);

  --r-sm: 10px;
  --r:    18px;
  --r-lg: 28px;

  --wrap: 1180px;
  --gut: clamp(18px, 4vw, 40px);

  --f-display: 'Bitter', Georgia, 'Times New Roman', serif;
  --f-ui:      'Fredoka', 'Nunito', system-ui, sans-serif;
  --f-body:    'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(16px,1.02vw,17.5px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

h1,h2,h3{ font-family:var(--f-display); font-weight:800; line-height:1.08; letter-spacing:-.015em; margin:0; }
h2{ font-size:clamp(1.85rem,3.6vw,3rem); }
h3{ font-size:clamp(1.12rem,1.5vw,1.35rem); letter-spacing:-.005em; }
p{ margin:0 0 1em; }

.wrap{ width:min(var(--wrap),100% - var(--gut)*2); margin-inline:auto; }

.sr-only,.skip:not(:focus){
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip:focus{
  position:fixed; z-index:200; inset:12px auto auto 12px;
  background:var(--red); color:#fff; padding:10px 16px; border-radius:var(--r-sm);
  font-family:var(--f-ui); text-decoration:none;
}
.hp{ position:absolute!important; left:-9999px!important; width:1px; height:1px; opacity:0; }

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

/* ---------------------------------------------------------------- buttons */
.btn{
  --btn-a:#e8353c; --btn-b:var(--red-deep); --btn-edge:var(--red-ink);
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--f-ui); font-weight:600; font-size:1.02rem; letter-spacing:.005em;
  color:#fff; text-decoration:none; white-space:nowrap; cursor:pointer;
  padding:0; border:0;
  background:linear-gradient(180deg,var(--btn-a),var(--btn-b));
  border-radius:999px;
  box-shadow:0 5px 0 var(--btn-edge), 0 14px 26px -12px rgba(125,13,19,.8);
  transition:transform .13s ease, box-shadow .13s ease, filter .13s ease;
}
.btn > span{
  display:block; padding:.86em 1.75em; border-radius:inherit;
  background:linear-gradient(180deg,var(--btn-a),var(--btn-b));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(0,0,0,.15);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 7px 0 var(--btn-edge), 0 20px 34px -14px rgba(125,13,19,.85); filter:saturate(1.06); }
.btn:active{ transform:translateY(3px); box-shadow:0 2px 0 var(--btn-edge), 0 8px 16px -10px rgba(125,13,19,.8); }
.btn--gold{ --btn-a:#f4c463; --btn-b:#d79a26; --btn-edge:#8c5f11; color:#3b2708; }
.btn--gold > span{ text-shadow:0 1px 0 rgba(255,255,255,.35); }
.btn--sm{ font-size:.92rem; box-shadow:0 4px 0 var(--btn-edge), 0 10px 20px -12px rgba(125,13,19,.7); }
.btn--sm > span{ padding:.6em 1.2em; }
.btn[disabled]{ opacity:.6; pointer-events:none; }
@media (max-width:560px){
  .nav .btn--sm{ font-size:.82rem; }
  .nav .btn--sm > span{ padding:.55em .95em; }
}

/* ---------------------------------------------------------------- nav */
.nav{
  position:fixed; inset:0 0 auto; z-index:100;
  transition:background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}
.nav__inner{ display:flex; align-items:center; gap:20px; padding:12px 0; }
.nav__brand{ display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto; }
.nav__brand img{ width:48px; height:auto; filter:drop-shadow(0 2px 4px rgba(0,0,0,.28)); }
.nav__word{
  display:none; line-height:1; white-space:nowrap;
  font-family:var(--f-display); font-size:1.16rem; font-weight:800; letter-spacing:-.02em;
}
.nav__word b{ font-weight:800; color:var(--ink); }
.nav__word i{ font-style:normal; font-weight:800; color:var(--red); }
.nav__links{ display:none; gap:26px; font-family:var(--f-ui); font-weight:500; font-size:.96rem; }
.nav__links a{ text-decoration:none; color:var(--ink-soft); position:relative; padding:4px 0; }
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--red); border-radius:2px; transition:right .22s ease;
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ right:0; }
.nav.is-stuck{
  background:rgba(253,250,241,.9);
  backdrop-filter:blur(12px) saturate(1.2);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  box-shadow:0 1px 0 rgba(36,27,21,.09), 0 12px 28px -22px rgba(36,27,21,.6);
}
@media (min-width:640px){ .nav__word{ display:inline; } }
@media (min-width:920px){ .nav__links{ display:flex; } }

/* ---------------------------------------------------------------- hero */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(94px,11vh,126px) 0 0;
  background:linear-gradient(180deg,#a9dcf7 0%,#c9e9fb 30%,#e6f5fd 56%,#f7fcff 74%,var(--cream) 100%);
}
.hero__sky{ position:absolute; inset:0 0 34% 0; z-index:-2; pointer-events:none; }
.sun{
  position:absolute; top:-14%; right:6%; width:min(46vw,460px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(255,244,205,.95),rgba(255,236,170,.35) 42%,transparent 68%);
}

.hero__hills{ position:absolute; left:0; right:0; bottom:0; z-index:-1; line-height:0; }
.hero__hills svg{ width:100%; height:clamp(120px,18vw,230px); display:block; }

.hero__inner{ position:relative; text-align:center; padding-bottom:clamp(20px,4vw,40px); }
.hero__crest{
  width:clamp(220px,26vw,360px); height:auto; margin:0 auto clamp(12px,1.6vw,18px);
  filter:drop-shadow(0 16px 26px rgba(36,27,21,.3));
  animation:crestIn .9s cubic-bezier(.17,.84,.44,1) both;
}
@keyframes crestIn{ from{ opacity:0; transform:translateY(-16px) scale(.94); } }

.ribbon{
  display:inline-block; margin:0 0 clamp(14px,2vw,20px); position:relative;
  font-family:var(--f-ui); font-weight:600; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
}
.ribbon span{
  display:block; padding:.6em 1.6em; color:#fff; border-radius:4px;
  background:linear-gradient(180deg,#e8353c,var(--red-deep));
  box-shadow:0 6px 16px -8px rgba(125,13,19,.9), inset 0 1px 0 rgba(255,255,255,.3);
}
.ribbon::before,.ribbon::after{
  content:""; position:absolute; top:50%; width:22px; height:100%;
  transform:translateY(-50%); background:var(--red-ink); z-index:-1; border-radius:3px;
}
.ribbon::before{ left:-14px; clip-path:polygon(0 12%,100% 0,100% 100%,0 88%,10% 50%); }
.ribbon::after{ right:-14px; clip-path:polygon(0 0,100% 12%,90% 50%,100% 88%,0 100%); }

.hero__h1{
  font-size:clamp(2.05rem,4.9vw,3.85rem);
  max-width:19ch; margin:0 auto .38em;
  text-shadow:0 2px 0 rgba(255,255,255,.55);
}
.hero__h1 em{
  font-style:normal; color:var(--red);
  text-shadow:0 2px 0 rgba(255,255,255,.7);
}
.hero__sub{
  max-width:58ch; margin:0 auto clamp(22px,2.8vw,30px);
  font-size:clamp(1.02rem,1.3vw,1.18rem); color:var(--ink-soft);
}

/* ---------------------------------------------------------------- signup */
.signup{ max-width:620px; margin:0 auto; }
.signup__row{
  display:flex; gap:8px; padding:8px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(36,27,21,.09);
  border-radius:999px;
  box-shadow:var(--shadow), inset 0 1px 0 #fff;
  backdrop-filter:blur(8px);
}
.signup input[type=email]{
  flex:1 1 auto; min-width:0;
  border:0; background:transparent; outline:none;
  font-family:var(--f-body); font-size:1.02rem; color:var(--ink);
  padding:.7em 1.1em;
}
.signup input[type=email]::placeholder{ color:#a2968a; }
.signup__note{
  margin:.9em 0 0; font-size:.86rem; color:var(--ink-soft);
  font-family:var(--f-ui); font-weight:500;
}
.signup.is-err .signup__row{ border-color:var(--red); box-shadow:0 0 0 3px rgba(215,32,42,.16); }
.signup.is-err .signup__note{ color:var(--red-deep); }
.signup.is-ok .signup__row{ display:none; }
.signup.is-ok .signup__note{
  font-size:1.05rem; font-weight:600; color:var(--meadow-dk);
  padding:1.1em 1.4em; background:rgba(79,159,62,.1);
  border:1px solid rgba(79,159,62,.3); border-radius:var(--r);
}
.signup--dark .signup__row{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.14); backdrop-filter:blur(6px); }
.signup--dark input[type=email]{ color:#fff; }
.signup--dark input[type=email]::placeholder{ color:rgba(255,255,255,.55); }
.signup--dark .signup__note{ color:rgba(255,255,255,.7); }
.signup--dark.is-ok .signup__note{ color:#eaf7e4; background:rgba(120,200,100,.16); border-color:rgba(160,225,140,.4); }

@media (max-width:540px){
  .signup__row{ flex-direction:column; border-radius:var(--r-lg); padding:10px; }
  .signup input[type=email]{ text-align:center; }
  .signup .btn{ width:100%; }
}

/* ---------------------------------------------------------------- perks */
.perks{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 14px;
  list-style:none; margin:clamp(24px,3vw,34px) auto 0; padding:0; max-width:720px;
}
.perks li{
  display:flex; flex-direction:column; gap:1px; text-align:left;
  padding:.7em 1.1em .75em 2.1em; position:relative;
  background:rgba(255,255,255,.7); border:1px solid rgba(36,27,21,.07);
  border-radius:999px; box-shadow:var(--shadow-sm);
}
.perks li::before{
  content:""; position:absolute; left:.9em; top:50%; transform:translateY(-50%);
  width:11px; height:11px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%,var(--gold-lt),var(--gold) 55%,var(--gold-dk));
  box-shadow:0 0 0 2px rgba(255,255,255,.7);
}
.perks b{ font-family:var(--f-ui); font-weight:600; font-size:.9rem; line-height:1.2; }
.perks span{ font-size:.76rem; color:var(--ink-soft); line-height:1.3; }

/* ---------------------------------------------------------------- hero track art */
.hero__track{
  margin-top:clamp(-10px,-1vw,0px);
  line-height:0;
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.hero__track img{ width:min(1500px,150%); margin-inline:auto; opacity:.97; }

/* ---------------------------------------------------------------- ticker */
.ticker{
  background:linear-gradient(180deg,var(--red),var(--red-deep));
  color:#fff; overflow:hidden; padding:.72em 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.2);
  border-block:1px solid var(--red-ink);
}
.ticker__track{
  display:flex; align-items:center; gap:1.4em; width:max-content;
  font-family:var(--f-ui); font-weight:600; font-size:.82rem;
  letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
  animation:marquee 46s linear infinite;
}
.ticker__track i{ font-style:normal; font-size:.55em; color:var(--gold-lt); }
@keyframes marquee{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .ticker__track{ animation:none; } }

/* ---------------------------------------------------------------- sections */
.sec{ padding:clamp(60px,8vw,110px) 0; position:relative; }
.sec--cream{ background:var(--cream); }
.sec--parchment{ background:linear-gradient(180deg,var(--parchment),#efe3c9); }
.sec--meadow{
  background:linear-gradient(180deg,#54a742,#2f6d2b 78%,#285f24);
  color:#f3fbef;
}
.sec--night{ background:linear-gradient(180deg,var(--night-2),var(--night)); color:#f2ece4; }

.sechead{ max-width:64ch; margin:0 auto clamp(36px,5vw,60px); text-align:center; }
.sechead h2{ margin-bottom:.4em; }
.eyebrow{
  font-family:var(--f-ui); font-weight:600; font-size:.78rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--red); margin:0 0 .9em;
}
.eyebrow--light{ color:#d6f2c9; }
.eyebrow--gold{ color:var(--gold-lt); }
.lede{ font-size:clamp(1rem,1.2vw,1.12rem); color:var(--ink-soft); margin:0; }
.sec--meadow .lede{ color:rgba(255,255,255,.86); }
.sec--night .lede{ color:rgba(242,236,228,.72); }

/* ---------------------------------------------------------------- cards */
.cards{
  display:grid; gap:clamp(18px,2.2vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
}
.card{
  background:#fff; border:1px solid rgba(36,27,21,.08);
  border-radius:var(--r-lg); padding:0 clamp(20px,2vw,26px) clamp(24px,2.4vw,30px);
  box-shadow:var(--shadow);
  transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.card__art{
  margin:0 -8px clamp(8px,1.2vw,14px);
  aspect-ratio:16/11; display:grid; place-items:center;
  background:radial-gradient(ellipse at 50% 78%,rgba(227,169,60,.16),transparent 62%);
}
.card__art img{ max-height:100%; width:auto; filter:drop-shadow(0 10px 14px rgba(36,27,21,.2)); }
.card h3{ margin-bottom:.45em; }
.card p{ margin:0; color:var(--ink-soft); font-size:.97rem; }

/* ---------------------------------------------------------------- disciplines */
.disc{ display:grid; gap:clamp(18px,2.2vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); }
.disc__tile{
  border-radius:var(--r-lg); overflow:hidden;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 22px 44px -26px rgba(0,0,0,.6);
  backdrop-filter:blur(3px);
  transition:transform .25s cubic-bezier(.2,.8,.3,1), background .25s ease;
}
.disc__tile:hover{ transform:translateY(-6px); background:rgba(255,255,255,.2); }
.disc__tile > img{
  width:100%; aspect-ratio:16/9; object-fit:contain; padding:14px 14px 0;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.28));
}
.disc__body{ padding:6px clamp(18px,2vw,24px) clamp(20px,2vw,26px); }
.disc__body h3{ margin-bottom:.35em; }
.disc__body p{ margin:0; font-size:.95rem; color:rgba(255,255,255,.82); }

/* ---------------------------------------------------------------- herd */
.herd{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(8px,1.2vw,16px);
  grid-template-columns:repeat(auto-fill,minmax(min(46%,200px),1fr));
}
.herd li{
  position:relative; text-align:center;
  border-radius:var(--r); overflow:hidden;
  background:radial-gradient(ellipse at 50% 42%,rgba(255,255,255,.055),transparent 68%);
  border:1px solid rgba(255,255,255,.07);
  transition:transform .25s cubic-bezier(.2,.8,.3,1), border-color .25s ease;
}
.herd li:hover{ transform:translateY(-5px) scale(1.02); border-color:rgba(227,169,60,.45); }
.herd img{
  width:100%; height:auto; mix-blend-mode:screen;
  transition:transform .35s cubic-bezier(.2,.8,.3,1);
}
.herd li:hover img{ transform:scale(1.05); }
.herd b{
  display:block; padding:0 8px 14px; margin-top:-10px;
  font-family:var(--f-ui); font-weight:500; font-size:.8rem; letter-spacing:.06em;
  color:rgba(242,236,228,.82);
}
.herd li:hover b{ color:var(--gold-lt); }

/* ---------------------------------------------------------------- roadmap */
.road{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(16px,2vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(216px,1fr));
  position:relative;
}
.road::before{
  content:""; position:absolute; left:26px; right:26px; top:34px; height:3px;
  background:repeating-linear-gradient(90deg,var(--bark) 0 10px,transparent 10px 18px);
  opacity:.28;
}
@media (max-width:700px){ .road::before{ display:none; } }
.road li{
  position:relative; padding:60px clamp(16px,1.6vw,22px) clamp(20px,2vw,26px);
  background:rgba(255,255,255,.66); border:1px solid rgba(109,74,46,.16);
  border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
}
.road__dot{
  position:absolute; top:22px; left:clamp(16px,1.6vw,22px);
  width:26px; height:26px; border-radius:50%;
  background:#fff; border:3px solid var(--bark); opacity:.5;
}
.road li.is-done .road__dot{ background:var(--meadow); border-color:var(--meadow-dk); opacity:1; }
.road li.is-now .road__dot{
  background:var(--red); border-color:var(--red-ink); opacity:1;
  box-shadow:0 0 0 0 rgba(215,32,42,.5); animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{ 70%{ box-shadow:0 0 0 14px rgba(215,32,42,0); } 100%{ box-shadow:0 0 0 0 rgba(215,32,42,0); } }
@media (prefers-reduced-motion:reduce){ .road li.is-now .road__dot{ animation:none; } }
.road h3{ margin-bottom:.4em; }
.road p{ margin:0 0 .9em; font-size:.94rem; color:var(--ink-soft); }
.road b{
  font-family:var(--f-ui); font-weight:600; font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bark);
}
.road li.is-now b{ color:var(--red); }
.road li.is-done b{ color:var(--meadow-dk); }

/* ---------------------------------------------------------------- final CTA */
.cta{
  position:relative; overflow:hidden;
  padding:clamp(56px,7vw,92px) 0;
  background:
    radial-gradient(ellipse at 18% 10%,rgba(227,169,60,.2),transparent 55%),
    linear-gradient(135deg,#3a1113,var(--red-ink) 45%,#2a0c0f);
  color:#fff;
}
.cta::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.025) 0 2px,transparent 2px 9px);
}
.cta__inner{ position:relative; z-index:1; display:grid; gap:clamp(24px,3vw,44px); align-items:center;
  grid-template-columns:1fr; }
.cta__trailer{ width:min(320px,70%); margin-inline:auto; filter:drop-shadow(0 18px 26px rgba(0,0,0,.5)); }
.cta__copy h2{ margin-bottom:.4em; }
.cta__copy > p{ max-width:56ch; color:rgba(255,255,255,.8); margin-bottom:1.8em; }
@media (min-width:860px){
  .cta__inner{ grid-template-columns:minmax(0,320px) minmax(0,1fr); }
  .cta__trailer{ margin:0; width:100%; }
}

/* ---------------------------------------------------------------- footer */
.foot{ background:var(--night); color:rgba(242,236,228,.7); padding:clamp(40px,5vw,60px) 0 26px; }
.foot__inner{ display:flex; flex-wrap:wrap; gap:26px 40px; align-items:center; justify-content:space-between; }
.foot__brand{ display:flex; align-items:center; gap:14px; }
.foot__brand img{ width:72px; background:var(--cream); border-radius:14px; padding:7px 9px; }
.foot__brand p{ margin:0; font-size:.88rem; line-height:1.5; }
.foot__links{ display:flex; flex-wrap:wrap; gap:8px 22px; font-family:var(--f-ui); font-size:.9rem; }
.foot__links a{ text-decoration:none; color:rgba(242,236,228,.72); }
.foot__links a:hover{ color:var(--gold-lt); }
.foot__legal{
  margin:clamp(28px,4vw,40px) 0 0; padding-top:20px; text-align:center; font-size:.78rem;
  color:rgba(242,236,228,.64); border-top:1px solid rgba(255,255,255,.08);
  width:min(var(--wrap),100% - var(--gut)*2); margin-inline:auto;
}

/* ---------------------------------------------------------------- reveal */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }