/* MAPLE — nav + hero */

/* keep in-page anchors clear of the fixed nav */
section[id]{scroll-margin-top:96px}

/* ---------------------------------------------------------------- nav */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:120;
  padding:14px 0;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease, padding .3s ease, box-shadow .3s ease;
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.nav.is-stuck{
  padding:9px 0;
  background:rgba(251,244,233,.78);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  backdrop-filter:blur(16px) saturate(160%);
  border-bottom-color:rgba(22,13,7,.10);
  box-shadow:0 10px 30px -26px rgba(22,13,7,.7);
}

.nav-brand{
  display:inline-flex; align-items:center; gap:.6rem;
  text-decoration:none; flex:0 0 auto; min-width:0;
}
.nav-avatar{
  width:40px; height:40px; border-radius:999px; object-fit:cover;
  border:2px solid var(--paper);
  box-shadow:0 6px 16px -8px rgba(22,13,7,.7), 0 0 0 1px rgba(22,13,7,.10);
  transition:transform .25s cubic-bezier(.2,.7,.2,1), width .3s ease, height .3s ease;
}
.nav-brand:hover .nav-avatar{transform:rotate(-6deg) scale(1.06)}
.nav-word{
  font-family:var(--font-display); font-weight:900; font-size:1.08rem;
  letter-spacing:.1em; color:var(--ink);
}
.nav.is-stuck .nav-avatar{width:34px; height:34px}

.nav-links{
  display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.1rem);
  font-size:.95rem; font-weight:600;
}
.nav-links a{
  position:relative; text-decoration:none; color:var(--ink-2);
  padding:.25rem 0; white-space:nowrap;
  transition:color .2s ease;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--red); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .28s cubic-bezier(.2,.7,.2,1);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{transform:scaleX(1)}

.nav-cta{padding:.68rem 1.25rem; font-size:.94rem; flex:0 0 auto}

@media (max-width:819px){
  .nav-links{display:none}
  .nav-word{font-size:1rem}
  .nav-avatar{width:36px; height:36px}
  .nav-cta{padding:.6rem 1rem; font-size:.88rem}
}

/* --------------------------------------------------------------- hero */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  padding-top:clamp(96px,13vw,140px);
  padding-bottom:clamp(48px,6vw,84px);
}
.hero-shell{position:relative; z-index:2}

/* ambient full-bleed wash built from the banner */
.hero-bg{
  position:absolute; inset:-12% -12% auto -12%; height:78%;
  z-index:0; pointer-events:none;
  background:url("../assets/maple-banner.jpeg") center 38%/cover no-repeat;
  filter:blur(64px) saturate(150%);
  opacity:.55;
  transform:scale(1.06);
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(246,199,107,.30) 0%, rgba(251,244,233,0) 62%),
    linear-gradient(180deg, rgba(251,244,233,.42) 0%, rgba(251,244,233,.72) 48%, var(--paper) 88%);
}

/* ------------------------------------------------------------ hero art */
.hero-art{
  position:relative; margin:0;
  border-radius:var(--radius); overflow:hidden;
  background:var(--water);
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(22,13,7,.08);
}
.hero-art::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  border:1px solid rgba(251,244,233,.20);
  box-shadow:inset 0 -70px 90px -60px rgba(22,13,7,.75);
}
.hero-art-img{
  width:100%; height:auto; display:block;
  aspect-ratio:3/1; object-fit:cover; object-position:center 45%;
}
.hero-art-badge{
  position:absolute; left:clamp(12px,2vw,22px); bottom:clamp(12px,2vw,22px);
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.42rem .8rem; border-radius:999px;
  background:rgba(22,13,7,.42);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(251,244,233,.22);
  color:var(--paper); font-size:.72rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
}
.hero-art-dot{
  width:7px; height:7px; border-radius:999px; background:var(--amber);
  box-shadow:0 0 0 4px rgba(246,199,107,.22); flex:0 0 auto;
}

/* ----------------------------------------------------------- hero grid */
.hero-grid{
  display:grid; grid-template-columns:1fr;
  gap:clamp(30px,4vw,60px);
  margin-top:clamp(30px,4.5vw,58px);
}
.hero-copy{min-width:0}

.hero-title{
  font-size:clamp(2.5rem,6.6vw,4.5rem);
  margin:.7rem 0 0;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.hero-title em{
  font-style:normal; color:var(--red);
  position:relative; white-space:nowrap;
}
.hero-title em::after{
  content:""; position:absolute; left:2%; right:2%; bottom:.02em; height:.085em;
  background:var(--red); border-radius:999px; opacity:.28;
}
.hero-lede{margin-top:1.1rem; max-width:52ch}

.hero-cta{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.7rem; margin-top:1.8rem;
}
.hero-disclosure{
  margin-top:1.15rem; max-width:46ch;
  font-size:.83rem; line-height:1.55; color:var(--ink-2); opacity:.82;
}

/* ---------------------------------------------------------- info panel */
.hero-panel{
  min-width:0; align-self:start;
  padding:clamp(18px,2.4vw,26px);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(251,244,233,.92), rgba(243,230,210,.92));
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(22,13,7,.09);
  box-shadow:var(--shadow);
}
.hero-panel-label{
  font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-2); opacity:.75; margin-bottom:.6rem;
}
.hero-ca{
  display:flex; align-items:center; gap:.5rem; min-width:0;
  padding:.42rem .42rem .42rem .95rem;
  border-radius:999px;
  background:var(--paper);
  border:1px solid rgba(22,13,7,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.hero-ca-code{
  flex:1 1 auto; min-width:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.82rem; letter-spacing:-.01em; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
button.hero-copy{
  flex:0 0 auto; cursor:pointer; border:0;
  font-family:var(--font-body); font-weight:700; font-size:.8rem;
  padding:.55rem 1.05rem; border-radius:999px;
  background:var(--ink); color:var(--paper);
  transition:background .2s ease, transform .18s ease;
}
button.hero-copy:hover{background:var(--red); transform:translateY(-1px)}
button.hero-copy.is-copied{background:var(--moss)}

.hero-facts{
  margin:1.1rem 0 0; padding:0;
  border-top:1px solid rgba(22,13,7,.10);
}
.hero-fact{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.62rem 0; border-bottom:1px solid rgba(22,13,7,.07);
}
.hero-fact:last-child{border-bottom:0; padding-bottom:0}
.hero-fact dt{
  font-size:.78rem; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-2); opacity:.7;
}
.hero-fact dd{
  margin:0; font-family:var(--font-display); font-weight:600; font-size:1rem;
  color:var(--ink); text-align:right;
}
.hero-fact-hi{color:var(--red-deep)!important}

/* -------------------------------------------------------------- caption */
.hero-cap{
  margin-top:clamp(28px,4vw,48px);
  padding-left:clamp(14px,1.6vw,20px);
  border-left:3px solid var(--red);
  max-width:56ch;
  font-size:.95rem; line-height:1.6; color:var(--ink-2);
  font-style:italic;
}

/* --------------------------------------------------------- desktop grid */
@media (min-width:900px){
  .hero-grid{grid-template-columns:1.2fr .8fr; align-items:start; gap:clamp(40px,5vw,72px)}
  .hero-panel{margin-top:.5rem}
}
@media (min-width:1180px){
  .hero-title{font-size:clamp(3.4rem,4.6vw,4.6rem)}
}

/* -------------------------------------------------------------- mobile */
@media (max-width:719px){
  .hero-art-img{aspect-ratio:4/3; object-position:center 42%}
  .hero-art-badge{font-size:.66rem; letter-spacing:.05em; padding:.36rem .68rem}
  .hero-cta .btn{flex:1 1 auto; min-width:0}
  .hero-ca{padding-left:.8rem}
  .hero-ca-code{font-size:.76rem}
}

/* ------------------------------------------------------- falling leaves */
.hero-leaves{
  position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none;
}
.hero-leaf{
  position:absolute; top:-12%; display:block;
  width:26px; color:var(--red);
  opacity:0;
  will-change:transform;
  animation:hero-fall 17s linear infinite;
}
.hero-leaf svg{width:100%; height:auto; display:block; fill:currentColor}
.hero-leaf-1{left:6%;  width:22px; animation-duration:19s; animation-delay:-2s;  opacity:.10}
.hero-leaf-2{left:24%; width:15px; animation-duration:24s; animation-delay:-11s; opacity:.08}
.hero-leaf-3{left:46%; width:28px; animation-duration:21s; animation-delay:-6s;  opacity:.07; color:var(--gold)}
.hero-leaf-4{left:67%; width:18px; animation-duration:26s; animation-delay:-16s; opacity:.10}
.hero-leaf-5{left:83%; width:24px; animation-duration:20s; animation-delay:-9s;  opacity:.08}
.hero-leaf-6{left:93%; width:14px; animation-duration:28s; animation-delay:-20s; opacity:.09; color:var(--gold)}

@keyframes hero-fall{
  0%   {transform:translate3d(0,-10vh,0) rotate(0deg)}
  50%  {transform:translate3d(-26px,50vh,0) rotate(180deg)}
  100% {transform:translate3d(14px,115vh,0) rotate(360deg)}
}

/* -------------------------------------------------------------- ticker */
.hero-ticker{
  position:relative; z-index:3;
  overflow:hidden; width:100%;
  background:var(--red); color:var(--paper);
  border-block:1px solid rgba(156,18,24,.55);
  padding:.62rem 0;
  box-shadow:0 14px 34px -26px rgba(156,18,24,.9);
}
.hero-ticker-track{
  display:flex; width:max-content;
  animation:hero-marquee 34s linear infinite;
}
.hero-ticker:hover .hero-ticker-track{animation-play-state:paused}
.hero-ticker-group{
  display:flex; align-items:center; flex:0 0 auto;
  font-size:.78rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; white-space:nowrap;
}
.hero-ticker-group span{padding:0 .85rem}
.hero-ticker-group i{font-style:normal; opacity:.55; font-size:.7rem}

@keyframes hero-marquee{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(-50%,0,0)}
}

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  .hero-leaves{display:none}
  .hero-ticker-track{animation:none; transform:none}
  .hero-ticker{overflow-x:auto}
}