/* The Discovery Wall — marketing site. Ported from the design handoff (hi-fi tokens preserved). */

:root{
  --ink:#16233F; --navy:#1B3266; --green:#5EB41E; --green-pressed:#4C9418; --green-ink:#12300A;
  --cyan:#22C7D6; --cyan-ink:#0F6E7B; --err-border:#C2564C; --err-text:#A8412F; --ok-text:#3F7A14;
  --bg:#FAFAFA;
  --body:rgba(22,35,63,0.56);
  --hair:rgba(22,35,63,0.08);
  --glass-fill:rgba(255,255,255,0.40);
  --glass-border:rgba(255,255,255,0.55);
  --glass-shadow:inset 1px 1px 0 rgba(255,255,255,0.85),0 34px 66px -38px rgba(27,50,102,0.32),0 12px 34px -26px rgba(94,180,30,0.26);
  --pop:linear-gradient(96deg,#1B3266 6%,#2E7A46 46%,#5EB41E 92%);
  --sect-pad-block:clamp(70px,11vh,150px);
  --sect-pad-inline:clamp(20px,4vw,60px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Archivo,system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:16px; line-height:1.7; overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p{margin:0}
p{text-wrap:pretty}

/* ---------- ambient light + veil ---------- */
.ambient{position:fixed;inset:-25vh -25vw;z-index:0;pointer-events:none;will-change:transform}
.blob{position:absolute;border-radius:50%;display:block}
.blob1{left:0;top:0;width:74vw;height:74vw;background:radial-gradient(circle at 50% 50%,rgba(27,50,102,0.20),transparent 64%);filter:blur(46px);animation:drift1 66s ease-in-out infinite}
.blob2{right:-8%;top:26%;width:66vw;height:66vw;background:radial-gradient(circle at 50% 50%,rgba(94,180,30,0.24),transparent 62%);filter:blur(48px);animation:drift2 84s ease-in-out infinite}
.blob3{left:12%;bottom:-6%;width:78vw;height:78vw;background:radial-gradient(circle at 50% 50%,rgba(34,199,214,0.18),transparent 64%);filter:blur(50px);animation:drift3 73s ease-in-out infinite}
.blob4{right:18%;bottom:30%;width:44vw;height:44vw;background:radial-gradient(circle at 50% 50%,rgba(34,199,214,0.16),transparent 60%);filter:blur(44px);animation:drift4 91s ease-in-out infinite}
.veil{position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(250,250,250,0.5),rgba(250,250,250,0) 34%,rgba(250,250,250,0) 68%,rgba(250,250,250,0.6))}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(8vw,-6vh,0) scale(1.18)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1.14)}50%{transform:translate3d(-9vw,7vh,0) scale(0.88)}}
@keyframes drift3{0%,100%{transform:translate3d(0,0,0) scale(0.92)}50%{transform:translate3d(7vw,9vh,0) scale(1.22)}}
@keyframes drift4{0%,100%{transform:translate3d(0,0,0) scale(1.06)}50%{transform:translate3d(-7vw,-8vh,0) scale(0.94)}}
@keyframes pulseDot{0%,100%{opacity:.4;transform:scale(.9)}50%{opacity:1;transform:scale(1)}}

/* ---------- layout ---------- */
main,.site-header,.site-footer{position:relative;z-index:2}
.site-header{z-index:40}
.wrap{max-width:1220px;margin:0 auto;padding-inline:var(--sect-pad-inline);width:100%}
.wrap--wide{max-width:1280px}
.band{padding-block:var(--sect-pad-block)}

/* ---------- glass ---------- */
.glass{
  background:var(--glass-fill);
  -webkit-backdrop-filter:blur(32px) saturate(1.75);
  backdrop-filter:blur(32px) saturate(1.75);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  border-radius:14px;
}
.glass--cyan{
  background:linear-gradient(135deg,rgba(255,255,255,0.5),rgba(34,199,214,0.14));
  border:1px solid rgba(34,199,214,0.40);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,0.85),0 34px 66px -38px rgba(34,199,214,0.45),0 12px 34px -26px rgba(27,50,102,0.24);
}

/* ---------- typography helpers ---------- */
.eyebrow{font-size:10.5px;font-weight:600;letter-spacing:0.34em;text-transform:uppercase;color:var(--navy);display:block}
.micro{font-size:10px;font-weight:600;letter-spacing:0.26em;text-transform:uppercase;color:rgba(22,35,63,0.42)}
.section-h{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(38px,5vw,72px);line-height:1.01;letter-spacing:-0.018em;margin-top:14px;max-width:20ch}
.lede{font-family:Newsreader,Georgia,serif;font-style:italic;font-weight:300;font-size:clamp(18px,1.5vw,23px);line-height:1.61;color:var(--body);max-width:60ch;margin-top:22px}
.pull-quote{font-family:Newsreader,Georgia,serif;font-style:italic;font-weight:300;font-size:clamp(24px,3vw,44px);line-height:1.26;color:var(--ink);max-width:30ch;margin:clamp(30px,5vh,64px) auto 0}
.pop{font-family:"Instrument Serif",Georgia,serif;font-style:italic;background:var(--pop);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:0.06em}
.pop--cyan{background:none;-webkit-text-fill-color:var(--cyan-ink);color:var(--cyan-ink)}

/* ---------- header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;height:68px;display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--sect-pad-inline);
  background:rgba(255,255,255,0.4);-webkit-backdrop-filter:blur(28px) saturate(1.8);backdrop-filter:blur(28px) saturate(1.8);
  border-bottom:1px solid rgba(255,255,255,0.5);box-shadow:0 12px 40px -30px rgba(27,50,102,0.5);
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.wordmark{font-size:11px;font-weight:600;letter-spacing:0.28em;color:var(--ink)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:14px;font-family:Archivo;text-transform:uppercase;text-decoration:none;cursor:pointer;border:0;border-radius:8px;transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease}
.btn--cta-sm{padding:13px 22px;font-size:10px;font-weight:600;letter-spacing:0.22em;background:var(--green);color:var(--green-ink);box-shadow:0 16px 34px -18px rgba(94,180,30,0.7)}
.btn--cta-sm:hover{background:var(--green-pressed)}
.btn--primary{padding:19px 32px;font-size:11px;font-weight:700;letter-spacing:0.22em;background:var(--green);color:var(--green-ink);box-shadow:0 16px 34px -18px rgba(94,180,30,0.7)}
.btn--primary:hover{background:var(--green-pressed)}
.btn--lg{padding:22px 40px;font-size:11px;letter-spacing:0.24em}
.btn--rule::after{content:"";width:18px;height:1px;background:currentColor;opacity:.6;display:inline-block}
.btn--lg.btn--rule::after{width:22px}
.btn--glass{padding:19px 30px;font-size:11px;font-weight:700;letter-spacing:0.22em;background:rgba(255,255,255,0.45);-webkit-backdrop-filter:blur(24px) saturate(1.7);backdrop-filter:blur(24px) saturate(1.7);border:1px solid rgba(255,255,255,0.6);color:rgba(22,35,63,0.72)}
.btn--glass:hover{border-color:rgba(94,180,30,0.7);color:var(--navy)}

/* ---------- 1 · hero ---------- */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding-block:140px 90px}
.eyebrow-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.eyebrow-rule{flex:1 1 40px;height:1px;min-width:40px;background:linear-gradient(90deg,rgba(27,50,102,.4),rgba(94,180,30,.3),rgba(27,50,102,0))}
.eyebrow-note{font-family:Newsreader,Georgia,serif;font-style:italic;font-size:16px;color:rgba(22,35,63,0.5);text-align:right}
.hero-panel{margin-top:26px;padding:clamp(24px,3vw,44px);-webkit-backdrop-filter:blur(34px) saturate(1.8);backdrop-filter:blur(34px) saturate(1.8);border-radius:16px}
.stage{position:relative;min-height:clamp(236px,34vh,380px)}
.slide{position:absolute;inset:0;opacity:0;filter:blur(4px);transform:translateY(30px);transition:opacity 900ms cubic-bezier(.22,1,.28,1),transform 1150ms cubic-bezier(.14,1.14,.28,1),filter 900ms;pointer-events:none}
.slide.is-active{opacity:1;filter:none;transform:none;pointer-events:auto}
.hero-h{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(46px,8vw,132px);line-height:.94;letter-spacing:-0.02em}
.hero-sub{font-size:clamp(16px,1.3vw,18px);color:rgba(22,35,63,0.55);max-width:44ch;margin-top:18px}
.board{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:2px;margin-top:clamp(24px,3vh,40px)}
.tab{position:relative;display:flex;flex-direction:column;gap:9px;padding:14px 4px 4px;background:none;border:0;text-align:left;cursor:pointer}
.tab-track{position:absolute;top:0;left:4px;right:4px;height:2px;background:rgba(22,35,63,0.1);overflow:hidden}
.tab-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,#1B3266,#5EB41E)}
.tab-index{font-size:9.5px;font-weight:600;letter-spacing:0.22em;color:rgba(22,35,63,0.36)}
.tab-label{font-size:11px;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;color:rgba(22,35,63,0.5)}
.tab.is-active .tab-index{color:var(--cyan-ink)}
.tab.is-active .tab-label{color:var(--ink)}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:clamp(26px,4vh,44px)}

/* ---------- 2 · day rail ---------- */
.rail{display:flex;flex-wrap:wrap;gap:clamp(30px,5vw,90px);margin-top:clamp(30px,5vh,60px)}
.rail-side{flex:0 1 300px;position:sticky;top:122px;align-self:flex-start}
.rail-clock{font-family:"Instrument Serif",Georgia,serif;font-size:clamp(58px,7vw,116px);line-height:1;transition:opacity 460ms ease}
.rail-place{font-size:11px;font-weight:600;letter-spacing:0.22em;color:var(--navy);margin-top:8px;transition:opacity 460ms ease}
.rail-progress{width:2px;height:clamp(120px,20vh,190px);background:rgba(22,35,63,0.1);margin:24px 0;overflow:hidden}
.rail-progress-fill{display:block;width:100%;height:0;background:linear-gradient(180deg,#1B3266,#5EB41E 55%,#22C7D6)}
.rail-note{font-size:16px;color:rgba(22,35,63,0.48);max-width:26ch}
.rail-cards{flex:1 1 460px;display:flex;flex-direction:column;gap:clamp(16px,3vh,30px)}
.moment{padding:clamp(22px,2.4vw,34px);transition:border-color 700ms ease,box-shadow 700ms ease}
.moment-time{font-size:11px;font-weight:600;letter-spacing:0.2em;color:rgba(22,35,63,0.5);transition:color 700ms ease}
.moment-place{font-size:10px;font-weight:600;letter-spacing:0.26em;text-transform:uppercase;color:rgba(22,35,63,0.34);margin-top:4px}
.moment-title{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(25px,2.6vw,40px);line-height:1.1;letter-spacing:-0.012em;margin-top:14px}
.moment-body{font-size:16px;color:var(--body);margin-top:12px}
.moment.is-active{border-color:rgba(94,180,30,0.5);box-shadow:0 44px 84px -40px rgba(94,180,30,0.44)}
.moment.is-active .moment-time{color:var(--navy)}
.moment--cyan.is-active{border-color:rgba(34,199,214,0.55);box-shadow:0 44px 84px -40px rgba(34,199,214,0.5)}
.moment--cyan.is-active .moment-time{color:var(--cyan-ink)}

/* ---------- 3 · benefit grid ---------- */
.benefit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(14px,1.8vw,22px);margin-top:clamp(30px,5vh,56px)}
.benefit{padding:clamp(24px,2.6vw,38px);display:flex;flex-direction:column}
.benefit--wide{grid-column:span 2}
/* README-flagged fallback: the wide "01" card must drop to a single column below the 2-column
   threshold, or its span-2 forces an implicit track and overflows the viewport. */
@media (max-width:620px){.benefit--wide{grid-column:auto}}
.benefit-num{font-size:9.5px;font-weight:600;letter-spacing:0.26em;color:rgba(27,50,102,0.9)}
.benefit-num--cyan{color:var(--cyan-ink)}
.benefit-title{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(25px,2.6vw,40px);line-height:1.1;letter-spacing:-0.012em;margin-top:12px}
.benefit-title--lg{font-size:clamp(28px,3vw,48px)}
.benefit-body{font-size:16px;color:var(--body);margin-top:10px}
.diagram{margin-top:auto;padding-top:22px}
.diagram svg{width:100%;height:auto;display:block;overflow:visible}

/* ---------- 4 · questions ---------- */
.questions{display:flex;flex-direction:column;gap:clamp(18px,3vh,32px);margin-top:clamp(30px,5vh,56px)}
.qpanel{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,60px);padding:clamp(28px,3.2vw,48px);align-items:center}
.qcopy{flex:1 1 340px}
.qdiagram{flex:1 1 380px}
.qlabel{font-size:10px;font-weight:600;letter-spacing:0.26em;text-transform:uppercase;color:var(--navy)}
.qlabel--cyan{color:var(--cyan-ink)}
.qhead{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(28px,3.2vw,50px);line-height:1.08;letter-spacing:-0.018em;margin-top:12px}
.qbody{font-size:16px;color:var(--body);margin-top:16px}

/* ---------- 5 · global ---------- */
.global{display:flex;flex-wrap:wrap;gap:clamp(30px,5vw,90px);margin-top:clamp(30px,5vh,56px);align-items:center}
.global-left{flex:1 1 380px}
.global-right{flex:1 1 420px;max-width:520px;margin-inline:auto}
.city-panel{padding:clamp(24px,2.6vw,38px)}
.city-cue{display:flex;align-items:center;gap:10px;font-size:10px;font-weight:600;letter-spacing:0.26em;text-transform:uppercase;color:rgba(22,35,63,0.42)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);animation:pulseDot 2.4s ease-in-out infinite}
.city-window{height:128px;margin:18px 0;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 28%,#000 72%,transparent);mask-image:linear-gradient(180deg,transparent,#000 28%,#000 72%,transparent)}
.city-strip{will-change:transform}
.city-cell{height:128px;display:flex;flex-direction:column;justify-content:center;opacity:.02;transition:opacity 700ms ease}
.city-name{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(34px,3.9vw,58px);line-height:1;color:var(--ink)}
.city-country{font-size:9.5px;font-weight:600;letter-spacing:0.3em;text-transform:uppercase;color:rgba(22,35,63,0.4);margin-top:8px}
.city-facets{display:flex;flex-wrap:wrap;gap:18px;border-top:1px solid var(--hair);padding-top:16px;font-size:9.5px;font-weight:600;letter-spacing:0.26em;color:rgba(22,35,63,0.4)}
.city-lede{margin-top:24px;max-width:52ch}

/* ---------- 6 · gulf ---------- */
.lede--gulf{max-width:62ch}
.museum-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(24px,3vw,44px);margin-top:clamp(30px,5vh,52px)}
.museum-col{border-top:1px solid rgba(27,50,102,0.18);padding-top:18px}
.museum-label{font-size:10px;font-weight:600;letter-spacing:0.26em;text-transform:uppercase;color:var(--navy)}
.museum-body{font-size:16px;color:var(--body);margin-top:12px}

/* ---------- 7 · steps + form ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(14px,1.8vw,22px);margin-top:clamp(30px,5vh,52px)}
.step{padding:clamp(24px,2.6vw,38px)}
.step-num{font-family:"Instrument Serif",Georgia,serif;font-size:clamp(30px,3.2vw,50px);line-height:1}
.step-num--navy{color:rgba(27,50,102,0.75)}
.step-num--green{color:rgba(94,180,30,0.9)}
.step-num--cyan{color:var(--cyan-ink)}
.step-title{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(25px,2.4vw,36px);line-height:1.1;margin-top:12px}
.step-body{font-size:16px;color:var(--body);margin-top:10px}
.steps-note{font-size:16px;color:rgba(22,35,63,0.52);margin-top:clamp(22px,3vh,34px)}
.form-panel{margin-top:clamp(24px,4vh,40px);padding:clamp(26px,3vw,46px);border-radius:16px}
.form-head{display:flex;flex-wrap:wrap;gap:14px;align-items:baseline;justify-content:space-between}
.form-title{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(26px,2.8vw,42px)}
.form-kicker{font-size:11px;font-weight:600;letter-spacing:0.22em;color:rgba(22,35,63,0.42)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(16px,2vw,24px);margin-top:26px}
.field{display:flex;flex-direction:column;gap:8px}
.field-label{font-size:9.5px;font-weight:600;letter-spacing:0.26em;text-transform:uppercase;color:rgba(22,35,63,0.5)}
.field input{width:100%;padding:14px 16px;border-radius:8px;border:1px solid rgba(27,50,102,0.18);background:rgba(255,255,255,0.7);font-family:Archivo;font-size:15px;color:var(--ink);outline:none;transition:border-color .18s ease,box-shadow .18s ease}
.field input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(94,180,30,0.16)}
.field input.is-invalid{border-color:var(--err-border)}
.form-submit{display:flex;flex-wrap:wrap;gap:16px 22px;align-items:center;margin-top:26px}
.form-note{font-size:13.5px;color:rgba(22,35,63,0.52)}
.form-note a{color:var(--navy)}
.form-note.is-error{color:var(--err-text)}
.form-note.is-ok{color:var(--ok-text)}
.form-note.form-fallback{flex-basis:100%}
.botcheck{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;opacity:0;pointer-events:none}

/* ---------- 8 · closing ---------- */
.closing{text-align:center}
.closing-h{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(56px,8vw,132px);line-height:.94;letter-spacing:-0.022em;max-width:24ch;margin-inline:auto}
.closing-sub{font-size:clamp(16px,1.3vw,19px);color:var(--body);margin-top:20px}
.closing .btn{margin-top:clamp(28px,4vh,44px)}

/* ---------- 9 · footer ---------- */
.site-footer{border-top:1px solid var(--hair);padding-block:30px 44px;margin-top:clamp(40px,6vh,90px)}
.footer-inner{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;justify-content:space-between}
.footer-lockup{height:clamp(52px,6vw,74px);width:auto}
.footer-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right}
.footer-email{font-size:13.5px;color:var(--navy);text-decoration:none;border-bottom:1px solid rgba(27,50,102,0.28)}
.footer-email:hover{border-color:var(--green)}
.footer-domain{font-size:10px;font-weight:600;letter-spacing:0.24em;text-transform:uppercase;color:rgba(22,35,63,0.3)}
.footer-city{font-size:8.5px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:rgba(22,35,63,0.15)}
.footer-legal{font-size:8.5px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:rgba(22,35,63,0.12)}
.footer-links{display:flex;gap:16px;margin-top:2px}
.footer-privacy{font-size:9.5px;letter-spacing:0.1em;color:rgba(22,35,63,0.3);text-decoration:none}
.footer-privacy:hover{color:var(--navy)}

/* ---------- reveal on scroll ---------- */
[data-in="up"]{opacity:0;transform:translateY(40px);transition:opacity 1000ms cubic-bezier(.22,1,.28,1),transform 1300ms cubic-bezier(.14,1.16,.28,1)}
[data-in="up"].is-in{opacity:1;transform:none}
[data-in="draw"]{opacity:0;transition:opacity 1400ms ease}
[data-in="draw"].is-in{opacity:1}

/* ---------- privacy page ---------- */
.legal{max-width:760px;padding-block:clamp(110px,14vh,170px)}
.legal h1{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(38px,5vw,64px);line-height:1.02;letter-spacing:-0.018em}
.legal h2{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(22px,2.4vw,30px);margin-top:clamp(30px,4vh,48px)}
.legal p{color:var(--body);margin-top:14px;max-width:66ch}
.legal a{color:var(--navy)}
.legal .updated{font-size:11px;font-weight:600;letter-spacing:0.24em;text-transform:uppercase;color:rgba(22,35,63,0.4);margin-top:18px}
.legal .back{display:inline-block;margin-top:clamp(30px,5vh,56px);font-size:11px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--navy);text-decoration:none}
.legal .back:hover{color:var(--green)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .blob{animation:none!important}
  .dot{animation:none!important}
  .slide{transition:opacity 300ms ease!important;transform:none!important;filter:none!important}
  [data-in]{opacity:1!important;transform:none!important;transition:none!important}
  .city-strip{transition:none!important}
  *{scroll-behavior:auto!important}
}