/* Arlington Autism Center: home "summit" hero, floating pill nav and page-load wipe.
   Motion lives in hero-summit.js (GSAP + ScrollTrigger + Lenis). Without JS, or with reduced motion, everything shows at rest. */
:root{
  --sh-bg:#0d352e;         /* night-green sky */
  --sh-deep:#08241f;       /* wipe panel */
  --sh-pill:rgba(10,43,37,.95);
  --sh-pill-line:#23403b;
  --sh-sun:#efb300;        /* sun / button yellow */
  --sh-sun-ink:#1f2b13;
  --sh-mist:#b6c2c0;       /* second headline line */
  --sh-display:"quiche-flare","Gloock", "Petrona", Georgia, serif;
  --sh-ui:"Montserrat", var(--sans);
}

/* ---------- Smooth scroll (Lenis) ---------- */
html.lenis, html.lenis body{height:auto}
html.lenis, .lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- Page-load wipe ---------- */
.sh-wipe{display:none;position:fixed;inset:0;z-index:10000;pointer-events:none;align-items:center;justify-content:center}
.sh-anim .sh-wipe{display:flex}
.sh-wipe-bg{position:absolute;inset:0;background:var(--sh-deep)}
.sh-wipe-logo{position:relative;overflow:hidden}
.sh-wipe-logo img{width:72px;height:72px}

/* ---------- Floating pill nav (home only) ---------- */
.nav.nav--float{border-bottom:0;background:none;backdrop-filter:none;padding-top:1.9rem;transition:transform .6s, opacity .6s}
.nav.nav--float.nav-hide{transform:translateY(-100%);opacity:0;pointer-events:none}
.nav--float .wrap{max-width:none;height:80px;margin:0 4rem;padding:0 1rem 0 2rem;gap:1.75rem;
  background:var(--sh-pill);border:1px solid var(--sh-pill-line);border-radius:1000px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.nav--float .logo{color:#fff}
.nav--float .logo img{width:36px;height:36px}
.nav--float .logo .logo-color{display:none}
.nav--float .logo .logo-mono{display:block}
.nav--float .menu{margin:0 auto;gap:0;color:#fff;font-family:var(--sh-ui);font-size:.8rem;font-weight:500;letter-spacing:.05rem;text-transform:uppercase}
.nav--float .menu a{display:flex;align-items:center;height:80px;padding:0 14px;transition:color .4s}
.nav--float .menu a:hover{color:var(--sh-sun)}
.nav--float .nav-right{margin-left:0;gap:1.25rem}
.nav--float .nav-phone{color:#fff;font-family:var(--sh-ui);font-size:.8rem;font-weight:500;letter-spacing:.05rem}
.nav.nav--float .nav-right .btn-primary{background:var(--sh-sun);color:var(--sh-sun-ink);border:0;backdrop-filter:none;border-radius:40px;padding:1.25rem;
  font-family:var(--sh-ui);font-size:15px;font-weight:700;line-height:1;text-transform:uppercase;transition:box-shadow .4s}
.nav.nav--float .nav-right .btn-primary:hover{background:var(--sh-sun);color:var(--sh-sun-ink);box-shadow:0 10px 50px rgba(255,153,0,.8)}
.nav--float .burger span{background:#fff}
@media (min-width:1241px) and (max-width:1320px){
  .nav--float .wrap{margin:0 2rem;gap:1rem}
  .nav--float .logo-tag{display:none}
  .nav--float .menu a{padding:0 8px}
  .nav--float .nav-phone{display:none}
  .nav.nav--float .nav-right .btn-primary{padding:1rem 1.1rem;font-size:14px}
}
/* Common laptop widths (1321–1520px, e.g. 1366 and 1440): Quiche Flare sets the name wider, so the tagline steps out
   and the pill's margins, gaps, link padding and letter-spacing shrink smoothly with the window (no width in the range overlaps) */
@media (min-width:1321px) and (max-width:1520px){
  .nav--float .wrap{margin:0 clamp(1rem, 12.5vw - 10rem, 4rem);gap:clamp(.75rem, 4vw - 3.5rem, 1.75rem)}
  .nav--float .logo-tag{display:none}
  .nav--float .menu{letter-spacing:clamp(.01rem, .25vw - .2rem, .05rem)}
  .nav--float .menu a{padding:0 clamp(8px, 1.5vw - 12px, 14px)}
}
/* The pill holds the full menu from 1241px; below that it switches to the burger */
@media (max-width:1240px){
  .nav--float .menu,.nav--float .nav-right{display:none}
  .nav--float .burger{display:block;margin-left:auto}
  .nav.nav--float.open .menu{display:flex;flex-direction:column;position:absolute}
  .nav.nav--float{padding-top:1rem}
  .nav--float .wrap{height:64px;margin:0 1rem;padding:0 .75rem 0 1.25rem;border-radius:20px}
  .nav.nav--float.open{background:none}
  .nav.nav--float.open .logo{color:#fff}
  .nav.nav--float.open .burger span{background:#fff}
  .nav.nav--float.open .menu{top:calc(100% + 8px);left:1rem;right:1rem;margin:0;background:var(--sh-pill);border:1px solid var(--sh-pill-line);border-radius:20px;
    color:#fff;padding:12px 24px 16px;gap:0;box-shadow:0 18px 40px rgba(0,0,0,.25);backdrop-filter:blur(8px)}
  .nav.nav--float.open .menu a{height:52px;padding:0}
}

/* ---------- Hero ---------- */
/* One screen tall. The landscape is anchored so the parent and child on the knoll always sit in frame
   (their middle at --people of the screen height); --lh is the landscape's height (3:2 photo at full width). */
.sh-hero{--sun:min(max(150px,13.8vw),24vh);--logo:min(120px,13vh);--lh:calc(100vw * 2 / 3);--people:76;
  position:relative;z-index:0;height:100vh;height:100svh;min-height:560px;background:var(--sh-bg);color:#fff;overflow:hidden;overflow:clip}
/* Daytime sky, faded in by hero-summit.js once the sun has become the logo. Deep blue where the title sits
   (white text keeps 4.5:1 or better), lightening toward the horizon. */
.sh-day{position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,#0f3a57 0%,#16557d 20%,#226c95 36%,#4d97bd 50%,#9ccde2 62%,#cfe9f2 72%,#e4f3f7 80%)}
.sh-golden,.sh-dusk{position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none}
/* Golden hour into sunset: dark teal where the title sits (white text stays readable), amber and gold at the horizon */
.sh-golden{background:linear-gradient(180deg,#112c40 0%,#1d4058 20%,#33505f 34%,#7f6550 45%,#cc8a44 53%,#eeaa52 60%,#f7c870 66%,#f3cd8a 74%,#e7b77a 82%)}
/* Afterglow once the sun has gone: indigo overhead, rose and peach low on the horizon */
.sh-dusk{background:linear-gradient(180deg,#0b1628 0%,#15213d 22%,#2a2c4d 36%,#5a4365 48%,#a35f6f 56%,#d78a73 62%,#b0717a 70%,#4a3d58 82%)}
.sh-text{position:relative;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding:calc(116px + var(--logo) + 1.8rem) 2.2rem 0;container-type:inline-size}
/* Lines are spaced so no word overlaps another; a soft dark halo keeps them readable over the sun's glow */
.sh-title-wrap{position:relative;width:100%}
.sh-title{display:flex;flex-direction:column;align-items:center;width:100%;margin:0;color:#fff;font-weight:400;letter-spacing:0}
.sh-l1{display:block;font-family:var(--sh-display);font-weight:400;font-size:min(11.5cqw,15.5vh);line-height:66%;letter-spacing:-.05em;color:#fff;text-align:center;white-space:nowrap;
  text-shadow:0 0 2px rgba(4,28,23,.4),0 0 12px rgba(4,28,23,.45),0 2px 24px rgba(4,28,23,.55)}   /* a soft dark edge: reads in front of the sun */
.sh-l2{display:flex;justify-content:center;width:100%;font-family:var(--sh-display);font-weight:400;font-size:min(9cqw,12vh);line-height:100%;letter-spacing:-.04em;color:var(--sh-mist);white-space:nowrap;
  text-shadow:0 0 2px rgba(4,28,23,.4),0 0 12px rgba(4,28,23,.45),0 2px 20px rgba(4,28,23,.55)}
/* The tagline uses the heading face, upright (it was a handwriting font: hard to read, especially with low vision) */
.sh-script{display:block;position:relative;margin-top:.55em;font-family:var(--sh-display);font-weight:400;font-size:min(2.5cqw,3.5vh);letter-spacing:.01em;line-height:1.15;color:var(--sh-sun);white-space:nowrap;
  text-shadow:0 0 2px rgba(4,20,18,.85),0 1px 14px rgba(4,28,23,.95),0 0 28px rgba(4,28,23,.6)}
/* "How to begin": appears under the title once it's day (hero-summit.js); sits over the sky, so the layout doesn't shift */
.sh-cta{position:absolute;left:50%;top:calc(100% + 1.6rem);z-index:2;display:inline-flex;align-items:center;gap:10px;padding:1.1rem 1.9rem;border-radius:40px;
  background:var(--sh-sun);color:var(--sh-sun-ink);font-family:var(--sh-ui);font-size:15px;font-weight:700;line-height:1;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 10px 30px rgba(6,30,40,.35);transform:translate(-50%,14px);opacity:0;visibility:hidden;transition:box-shadow .4s,opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1),visibility 0s .7s}
.sh-cta.is-on{opacity:1;visibility:visible;transform:translate(-50%,0);transition:box-shadow .4s,opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1),visibility 0s}
.sh-cta:hover{box-shadow:0 10px 50px rgba(255,153,0,.8)}
.sh-cta:focus-visible{outline:2px solid #fff;outline-offset:4px}
.sh-cta .arr{transition:transform .2s}
.sh-cta:hover .arr{transform:translateX(3px)}
/* split pieces (hero-summit.js) */
.sh-ch,.sh-w,.sh-mask{display:inline-block;position:relative}
.sh-mask{overflow:clip}
.sh-landed .sh-mask{overflow:visible}
.sh-sp{display:inline-block;width:.25em}

/* The scene doesn't clip (the sun rises out of it into the title area); the hero clips instead */
.sh-scene{position:absolute;left:0;right:0;z-index:1;top:calc(var(--people) * 1vh - 0.47 * var(--lh));top:calc(var(--people) * 1svh - 0.47 * var(--lh))}
.sh-layers{position:relative}
.sh-layers img{position:absolute;inset:0 0 auto;width:100%;max-width:none;pointer-events:none;user-select:none}
.sh-layers .sh-sky{position:static;display:block}   /* the sky (farthest layer) sets the scene's height */
.sh-sky{z-index:1}
.sh-sun{z-index:2}   /* between the sky and the far mountains, so it can set behind them */
.sh-land{position:absolute;inset:0;z-index:3;pointer-events:none}   /* mountains, hills and knoll: lit together */
.sh-mtn{z-index:1}
.sh-hills{z-index:3}
.sh-people{z-index:4}
/* A soft shade on the mountains behind the title, so the words stay readable over bright snow */
.sh-landshade{position:absolute;inset:0;z-index:5;pointer-events:none;
  background:radial-gradient(ellipse 62% 20% at 50% 22%,rgba(6,22,28,.6),rgba(6,22,28,.28) 55%,rgba(6,22,28,0) 85%)}
/* Daytime haze over the valley where the sun came up: the golden sunrise glow cools to a clear daylight haze */
.sh-dayhaze{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 34% 16% at 50% 30%,rgba(214,234,242,.62),rgba(214,234,242,.25) 55%,rgba(214,234,242,0))}
/* Light falling from the logo above: a soft wash over the landscape, faded in with the day */
.sh-daylight{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 80% 50% at 50% 22%,rgba(255,248,226,.3),rgba(255,244,214,.12) 50%,rgba(255,244,214,0) 80%);
  -webkit-mask-image:linear-gradient(transparent,#000 22%);mask-image:linear-gradient(transparent,#000 22%)}

/* The sun (positioned by hero-summit.js; its centre sits at the element's top-left + half its size) */
.sh-sun{position:absolute;left:50%;top:0;width:var(--sun);height:var(--sun);margin:calc(var(--sun) / -2) 0 0 calc(var(--sun) / -2);pointer-events:none;will-change:transform;visibility:hidden}
.sh-sun.is-on{visibility:visible}
.sh-sun-glow{position:absolute;inset:-120%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,214,96,.62),rgba(255,184,40,.26) 42%,rgba(255,170,30,.08) 70%,rgba(255,170,30,0))}
.sh-sun-disc{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 44%,#fffbe6 0,#ffe68a 24%,#ffc928 56%,#f2b200 80%,#e39c00 100%);
  box-shadow:0 0 36px 8px rgba(255,196,48,.6),0 0 110px 36px rgba(239,163,0,.3)}
.sh-layers .sh-sun-logo{position:absolute;inset:auto;left:50%;top:50%;width:var(--logo);height:var(--logo);margin:calc(var(--logo) / -2) 0 0 calc(var(--logo) / -2);
  max-width:none;border-radius:50%;opacity:0;box-shadow:0 10px 34px rgba(0,0,0,.3)}
/* The logo as the light source: a wide, soft halo of daylight around it */
.sh-sun-rays{position:absolute;inset:-260%;border-radius:50%;opacity:0;
  background:radial-gradient(closest-side,rgba(255,244,214,.42),rgba(255,230,160,.16) 38%,rgba(255,230,160,.05) 62%,rgba(255,230,160,0))}

/* Night closing in at the bottom of the scene (faded up on scroll) */
.sh-overlay{position:absolute;inset:auto 0 0;z-index:2;height:45%;pointer-events:none;opacity:0;
  background:linear-gradient(rgba(8,25,0,0),rgba(3,10,0,.75) 40%,#030a00 85%)}

/* Highlights strip on the page, just below the scene */
.sh-proof{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 40px;max-width:1320px;margin:0 auto;padding:22px 24px 6px}
.sh-proof-title{flex:none;font-family:var(--sh-display);font-size:30px;line-height:1;color:var(--green)}
.sh-proof-list{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px;list-style:none;
  font-family:var(--sh-ui);font-size:15px;font-weight:600;color:var(--ink)}
.sh-proof-list li{display:flex;align-items:center;gap:10px;white-space:nowrap}
.sh-proof-list li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold-2)}
/* Balance: from 768px up the five points always sit two over three (one 6-column grid: the first two span three
   columns each, the last three span two), instead of wrapping 3/2 or 4/1 depending on the width. Phones: one column. */
@media (min-width:768px){
  .sh-proof-list{display:grid;grid-template-columns:repeat(6,auto);justify-content:center;gap:12px 34px}
  .sh-proof-list li{justify-self:center}
  .sh-proof-list li:nth-child(-n+2){grid-column:span 3}
  .sh-proof-list li:nth-child(n+3){grid-column:span 2}
}
@media (max-width:767px){
  .sh-proof-list{flex-direction:column;align-items:flex-start;gap:8px}
}

/* Torn-paper edge: overlaps the bottom of the hero and becomes the page */
.sh-tear{position:relative;z-index:2;margin-top:-4rem;height:clamp(60px,11.6vw,200px);margin-bottom:-1px;pointer-events:none}
.sh-tear img{display:block;width:100%;height:100%}
.sh-proof + .reveal{padding-top:60px}

/* ---------- Intro start state (only while .sh-anim is on; hero-summit.js animates from here) ---------- */
.sh-anim .sh-l1,.sh-anim .sh-l2,.sh-anim .sh-script{visibility:hidden}
.sh-anim .nav--float .wrap{opacity:0}

/* ---------- Tablet ---------- */
@media (max-width:991px){
  .sh-hero{--sun:min(140px,20vh);--logo:min(110px,12vh)}
  .sh-text{padding:calc(88px + var(--logo) + 1.4rem) 1.5rem 0}
  .sh-l1{font-size:min(14cqw,13vh)}
  .sh-l2{font-size:min(11cqw,10vh)}
  .sh-script{font-size:min(3.6cqw,3.4vh)}
}

/* ---------- Phone ---------- */
@media (max-width:640px){
  .sh-hero{--sun:min(112px,15vh);--logo:min(88px,11vh);--lh:calc(170vw * 2 / 3);--people:79}
  .sh-text{padding:calc(80px + var(--logo) + 1.2rem) 1rem 0}
  .sh-cta{top:calc(100% + .9rem);padding:.95rem 1.5rem;font-size:13px}
  .sh-l1{font-size:min(16cqw,9vh);line-height:70%}
  .sh-l2{font-size:min(13.5cqw,7.5vh)}
  .sh-script{font-size:min(5.4cqw,3vh);margin-top:.45em}
  .sh-layers{width:170%;margin-left:-35%}
  .sh-proof{padding:18px 16px 4px;gap:12px}
  .sh-proof-title{font-size:24px}
  .sh-proof-list{justify-content:flex-start;gap:8px 18px;font-size:13.5px}
  .sh-proof-list li{white-space:normal}
  .sh-tear{margin-top:-2rem}
}

@media (prefers-reduced-motion:reduce){ .sh-wipe{display:none !important} }