/* Hour 25 — production stylesheet
   Rebuilt 1:1 from the Claude Design canvas (Hour 25 Prototype.dc.html).
   Colours, type, spacing and animations are preserved verbatim from the source.
   Responsive behaviour (tablet/mobile) is layered on top — see the @media blocks. */

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
/* the [hidden] attribute must always win over component display rules (form/sent views, optional fields) */
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
body{margin:0;background:#07080a;color:#f4f1ec;font-family:Archivo,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{color:inherit}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;margin:0;padding:0}
input::placeholder{color:rgba(244,241,236,.34)}
:focus-visible{outline:2px solid #f2c893;outline-offset:2px}

/* gutter scales down intentionally at each breakpoint */
:root{--gutter:56px}

/* ---------- page shell ---------- */
/* full-bleed: sections + backgrounds fill the browser width (no fixed 1440 cap) */
.page{width:100%;max-width:none;margin:0 auto;background:#07080a;position:relative;overflow-x:clip}

/* ================= HEADER ================= */
.hdr{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  padding:24px var(--gutter);border-bottom:1px solid rgba(255,255,255,.1);background:rgba(7,8,10,.97);transform:translateZ(0)}
.brand{display:flex;align-items:center;gap:12px}
.brand svg{flex:none;color:#f4f1ec}
.brand__word{font:400 23px/1 'Instrument Serif',Georgia,serif;letter-spacing:-.01em;color:#f4f1ec}
.brand__word i{font-style:italic}

.nav{display:flex;align-items:center;gap:36px;font:400 11px/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,236,.58)}
.nav a{cursor:pointer;transition:color .3s}
.nav a:hover{color:#f4f1ec}
.nav .btn-join{padding:10px 17px;margin:-10px -3px;background:#f2c893;color:#0a0b0d;font-weight:700;letter-spacing:.16em;border-radius:2px;transition:background .3s,letter-spacing .3s}
.nav .btn-join:hover{background:#f6f3ee;letter-spacing:.2em}

.countdown{display:flex;align-items:center;gap:9px;padding:7px 13px;border:1px solid rgba(255,255,255,.16);border-radius:999px;
  font:400 11px/1 'JetBrains Mono',monospace;letter-spacing:.07em;color:rgba(246,228,200,.85)}
.countdown .dot{display:block;width:5px;height:5px;border-radius:50%;background:#e9a25c;animation:h25breathe 3.4s ease-in-out infinite}

/* mobile nav toggle — hidden on desktop */
.nav-toggle{display:none}
.nav-scrim{display:none}

/* ================= HERO ================= */
.hero{position:relative;height:772px;overflow:hidden;background:#040507}
.hero__bgwrap{position:absolute;inset:0;overflow:hidden}
.hero__bgmove{width:100%;height:100%;animation:h25drift 34s ease-in-out infinite}
/* The glow lives in the TOP of hero-bg.webp (aspect 1.895). The hero is a
   fixed 772px, so once the viewport passes ~1463px `cover` starts scaling by
   width and cropping vertically — at 40% that crop ate the glow and the hero
   went nearly black on wide displays (p99 chroma 47 -> 12 at 2560px). Biasing
   the crop upward keeps it in frame; below the crossover `cover` scales by
   height, there is no vertical crop, and this value has no effect. */
.hero__bg{width:100%;height:100%;object-fit:cover;object-position:22% 14%}
.hero__grad{position:absolute;inset:0;background:linear-gradient(97deg,rgba(4,5,7,.34) 0%,rgba(4,5,7,.66) 46%,rgba(4,5,7,.92) 88%)}
.hero__scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.026) 0 1px,transparent 1px 3px)}
.hero__content{position:absolute;left:var(--gutter);right:40px;top:296px;bottom:80px;display:flex;flex-direction:column;gap:30px}
.eyebrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font:400 11px/1 'JetBrains Mono',monospace;letter-spacing:.17em;text-transform:uppercase;color:rgba(244,241,236,.62)}
.eyebrow .sep{opacity:.4}
.hero h1{margin:0;font:400 80px/1.02 'Instrument Serif',Georgia,serif;letter-spacing:-.026em;color:rgba(246,243,238,.72);text-wrap:pretty}
.hero h1 .accent{color:rgb(248,240,226)}
.roll{height:100px;overflow:hidden;margin-top:-10px}
.roll__track{display:flex;flex-direction:column;animation:h25roll 24s cubic-bezier(.76,0,.24,1) infinite}
.roll__track div{height:100px;font:400 80px/100px 'Instrument Serif',Georgia,serif;letter-spacing:-.026em;font-style:italic;color:#f2c893;white-space:nowrap}
.hero__cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.btn-solid{padding:15px 26px;background:#f6f3ee;color:#0a0b0d;font:500 13px/1 Archivo;letter-spacing:.05em;border-radius:2px;cursor:pointer;transition:background .35s,letter-spacing .35s}
.btn-solid:hover{background:#f2c893;letter-spacing:.12em}
.btn-ghost{padding:15px 24px;border:1px solid rgba(255,255,255,.24);color:rgba(246,243,238,.9);font:400 13px/1 Archivo;letter-spacing:.05em;border-radius:2px;cursor:pointer;transition:border-color .35s,color .35s}
.btn-ghost:hover{border-color:rgba(255,255,255,.5);color:#f6f3ee}

/* ================= ABOUT ================= */
.about{display:grid;grid-template-columns:232px 1fr;gap:64px;padding:104px var(--gutter);background:#0a0b0d;border-top:1px solid rgba(255,255,255,.07)}
.anno{font:400 10.5px/1.8 'JetBrains Mono',monospace;letter-spacing:.13em;text-transform:uppercase;color:rgba(244,241,236,.4)}
.about p{margin:0;max-width:1080px;font:400 32px/1.32 'Instrument Serif',Georgia,serif;letter-spacing:-.012em;color:rgba(246,243,238,.9);text-wrap:pretty}
.about p .gold{color:rgb(242,200,147)}

/* ================= "AN HOUR FOR" CARDS ================= */
.hourfor{padding:0 var(--gutter) 104px;background:#0a0b0d}
.hourfor__label{font:400 11px/1 'JetBrains Mono',monospace;letter-spacing:.15em;text-transform:uppercase;color:rgba(244,241,236,.5);padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.12)}
.hourfor__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.1)}
.hcard{background:#0a0b0d;padding:34px 30px 40px;display:flex;flex-direction:column;gap:52px;transition:background .55s}
.hcard:hover{background:#0c0e12}
.hcard__icon{position:relative;width:44px;height:44px;flex:none}
.hcard .orb{position:absolute;inset:0;opacity:1;transition:opacity .3s ease,transform .55s cubic-bezier(.3,.8,.25,1)}
.hcard .orb>span{position:absolute;inset:3px;border-radius:50%}
.hcard .fx{position:absolute;inset:0;opacity:0;transform:rotate(-180deg) scale(.55);transition:opacity .4s ease,transform .7s cubic-bezier(.3,.8,.25,1);pointer-events:none}
.hcard .fx>.glow{position:absolute;inset:0;border-radius:50%}
.hcard:hover .orb{opacity:0;transform:scale(.4)}
.hcard:hover .fx{opacity:1;transform:rotate(0deg) scale(1)}
.hcard__no{font:400 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.13em;color:rgba(244,241,236,.38);padding-bottom:14px}
.hcard__title{font:400 28px/1.18 'Instrument Serif',Georgia,serif;letter-spacing:-.01em;color:#f2efe9}
.hcard__desc{font:300 15px/1.55 Archivo;color:rgba(244,241,236,.58);padding-top:12px;text-wrap:pretty}

/* ================= METHOD ================= */
/* Height follows the copy. This was a fixed 730px with .method__content
   absolutely pinned to bottom:70px, which left ~264px of empty frame above the
   text on desktop. Fluid padding keeps a band of the photograph visible above
   the heading and scales down to mobile without needing per-breakpoint values. */
.method{position:relative;overflow:hidden;border-top:1px solid rgba(255,255,255,.07);background:#050608}
.method__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:64% 34%;transform:scale(2.35);transform-origin:64% 34%;filter:grayscale(1) brightness(.52) contrast(1.02)}
.method__grad{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,6,8,.9) 0%,rgba(5,6,8,.82) 44%,rgba(5,6,8,.45) 72%,rgba(5,6,8,.25) 100%),linear-gradient(6deg,rgba(5,6,8,.9) 4%,rgba(5,6,8,.42) 52%,rgba(5,6,8,.7) 100%)}
.method__content{position:relative;display:flex;flex-direction:column;gap:24px;
  padding:clamp(76px,9.5vw,140px) var(--gutter) clamp(56px,7vw,96px)}
.method h2{margin:0;max-width:800px;font:400 54px/1.22 'Instrument Serif',Georgia,serif;letter-spacing:-.014em;color:#f6f3ee;text-wrap:pretty}
.method p{margin:0;max-width:769px;font:300 19px/1.62 Archivo;color:rgba(244,241,236,.66);text-wrap:pretty}

/* ============= HOW-IT-WORKS PROGRESS BAR (new; continues §02) ============= */
.pbar{position:relative;background:#08090b;padding:88px var(--gutter) 100px;display:flex;flex-direction:column}
.pbar__track{position:relative;height:1px;background:rgba(255,255,255,.11)}
.pbar__fill{position:absolute;inset:0;background:linear-gradient(90deg,rgba(233,162,92,.4) 0%,#e9a25c 60%,#f2c893 100%);animation:h25prog 16.8s cubic-bezier(.32,0,.24,1) infinite}
.pbar__tick{position:absolute;top:-3px;left:var(--p);width:1px;height:6px;background:rgba(255,255,255,.16);animation:h25tick 16.8s cubic-bezier(.32,0,.24,1) infinite both}
.pbar__glass{position:absolute;top:50%;left:0;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:#08090b;display:flex;align-items:center;justify-content:center;animation:h25grain 16.8s cubic-bezier(.32,0,.24,1) infinite}
.pbar__glow{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 18px 6px rgba(233,162,92,.28)}
.pbar__steps{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.pbar__step{padding:36px 48px 0 0;display:flex;flex-direction:column;gap:16px;animation:h25step 16.8s linear infinite both}
.pbar__step + .pbar__step{padding-left:30px;border-left:1px solid rgba(255,255,255,.07)}
.pbar__step:last-child{padding-right:0}
.pbar__num{font:400 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.13em;color:rgba(244,241,236,.38);animation:h25num 16.8s linear infinite both}
.pbar__title{margin:0;font:400 34px/1.1 'Instrument Serif',Georgia,serif;letter-spacing:-.014em;color:#f4f1ec}
.pbar__desc{margin:0;font:300 15px/1.55 Archivo,Helvetica,sans-serif;color:rgba(244,241,236,.58);text-wrap:pretty}

/* ================= EVENTS ================= */
.events{position:relative;display:flex;flex-direction:column;gap:40px;padding:110px var(--gutter);background:#07080a;border-top:1px solid rgba(255,255,255,.07);overflow:hidden}
.events__head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.14)}
.events__headL{display:flex;flex-direction:column;gap:18px}
.events h2{margin:0;font:400 54px/1.04 'Instrument Serif',Georgia,serif;letter-spacing:-.024em;color:#f4f1ec}
.events__all{cursor:pointer;font:400 11px/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,236,.6);border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:6px;white-space:nowrap}
.events__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.event{display:flex;flex-direction:column;cursor:pointer;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.event:hover{transform:translateY(-8px);box-shadow:0 28px 54px rgba(0,0,0,.42)}
.event:active{transform:translateY(-3px) scale(.995)}
.event__media{position:relative;height:500px;overflow:hidden;background:#101215}
.event__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.event:hover .event__img{transform:scale(1.06)}
.event__grad{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(6,7,9,.52) 0%,rgba(6,7,9,.06) 32%,rgba(6,7,9,.8) 100%)}
.event__top{position:absolute;left:22px;right:22px;top:22px;pointer-events:none;display:flex;justify-content:space-between;gap:12px;font:400 10px/1 'JetBrains Mono',monospace;letter-spacing:.13em;text-transform:uppercase;color:rgba(244,241,236,.8)}
.event__cap{position:absolute;left:22px;right:22px;bottom:26px;pointer-events:none;display:flex;flex-direction:column;gap:10px}
.event__kicker{font:400 10px/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#f2c893}
.event__title{font:400 30px/1.02 'Instrument Serif',Georgia,serif;letter-spacing:-.02em;color:#f8f5f0;text-wrap:pretty}
.event__join{display:block;padding:17px 0;text-align:center;background:#f6f3ee;color:#0a0b0d;font:500 12px/1 Archivo;letter-spacing:.14em;cursor:pointer;transition:background .35s,letter-spacing .35s}
.event__join:hover{background:#f2c893;letter-spacing:.26em}
.event__join:active{background:#e9a25c}

/* ================= MEMBERS ================= */
.members{position:relative;display:flex;flex-direction:column;gap:66px;padding:110px var(--gutter);background:#050608;border-top:1px solid rgba(255,255,255,.07);overflow:hidden}
.members__intro{display:grid;grid-template-columns:1fr 300px;gap:80px;align-items:center}
.members__introL{position:relative;display:flex;flex-direction:column;gap:30px;max-width:620px}
.members h2{margin:0;font:400 54px/1.04 'Instrument Serif',Georgia,serif;letter-spacing:-.022em;color:#f4f1ec;text-wrap:balance}
.members__introL p{margin:0;font:300 19px/1.62 Archivo;color:rgba(244,241,236,.66);text-wrap:pretty}
.members__introL p b{font-weight:600;color:rgba(244,241,236,.85)}

/* spinning orb graphic */
.orbfx{position:relative;width:253px;height:253px;justify-self:center;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.045),rgba(5,6,8,0) 72%)}
.orbfx .ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:linear-gradient(140deg,rgba(255,255,255,.06),rgba(255,255,255,.012) 46%,rgba(0,0,0,.14) 78%,rgba(255,255,255,.04))}
.orbfx .spin{position:absolute;inset:8.8px;border-radius:50%;overflow:hidden;animation:h25spin 16s linear infinite}
.orbfx .spin>div{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(248,240,226,.62),rgba(233,162,92,.2) 22%,rgba(246,228,200,.05) 46%,rgba(255,255,255,0) 62%,rgba(255,255,255,0));filter:blur(5.5px)}
.orbfx .core{position:absolute;inset:57.2px;border-radius:50%;background:radial-gradient(circle at 44% 38%,rgba(248,240,226,.34),rgba(233,162,92,.06) 62%,transparent 78%);filter:blur(3.9px)}
.orbfx .ticks{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from -90deg,rgba(244,241,236,.5) 0deg .32deg,rgba(244,241,236,0) .32deg 14.4deg);
  mask:radial-gradient(circle at 50% 50%,transparent 0 45%,#000 45.5% 49%,transparent 49.5%);-webkit-mask:radial-gradient(circle at 50% 50%,transparent 0 45%,#000 45.5% 49%,transparent 49.5%)}
.orbfx .center{position:absolute;left:50%;top:50%;width:5.5px;height:5.5px;border-radius:50%;transform:translate(-50%,-50%);background:#f8f0e2;box-shadow:0 0 9.9px rgba(246,228,200,.75)}

.members__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.flip{perspective:1600px;height:500px}
.flip__inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.22,.8,.24,1);cursor:pointer;will-change:transform;transform:rotateY(var(--flip,0deg))}
.flip:hover .flip__inner,.flip.is-flipped .flip__inner{--flip:180deg}
.flip__face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column}
.flip__front{border:1px solid rgba(255,255,255,.14);background:#101215}
.flip__photo{position:relative;height:300px;overflow:hidden;background:#141619}
.flip__photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.02) brightness(.96)}
.flip__body{flex:1;display:flex;flex-direction:column;gap:16px;padding:24px 24px 26px}
.flip__eyebrow{font:400 10px/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,236,.45)}
.flip__name{font:400 34px/1 'Instrument Serif',Georgia,serif;letter-spacing:-.018em;color:#f4f1ec}
.flip__role{font:300 15px/1.45 Archivo;color:rgba(244,241,236,.66)}
.flip__turn{margin-top:auto;font:400 10px/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#f2c893}
.flip__back{transform:rotateY(180deg);gap:22px;padding:28px 26px 26px;border:1px solid rgba(242,200,147,.34);background:#0b0d10}
.flip__nameSm{font:400 26px/1.06 'Instrument Serif',Georgia,serif;color:#f4f1ec}
.flip__roleSm{font:300 13.5px/1.45 Archivo;color:rgba(244,241,236,.66)}
.rule{height:1px;background:rgba(255,255,255,.12)}
.flip__k{font:400 10px/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#f2c893}
.flip__bring{margin:0;font:400 19px/1.42 'Instrument Serif',Georgia,serif;color:rgba(246,243,238,.82);text-wrap:pretty}
.flip__look{font:300 15px/1.5 Archivo;color:rgba(244,241,236,.66);text-wrap:pretty}
.flip__col{display:flex;flex-direction:column;gap:7px}
.flip__col2{display:flex;flex-direction:column;gap:10px}

/* ================= CTA ================= */
.cta{position:relative;padding:120px var(--gutter) 124px;overflow:hidden;background:#07080a}
.cta__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.44) contrast(1.06);opacity:.72}
.cta__grad{position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 30%,rgba(7,8,10,.44),rgba(7,8,10,.9) 78%)}
.cta__content{position:relative;display:flex;flex-direction:column;align-items:center;gap:34px;text-align:center}
.cta h2{margin:0;font:400 70px/1 'Instrument Serif',Georgia,serif;letter-spacing:-.024em;color:#f8f5f0}
.cta p{margin:0;max-width:560px;font:300 17px/1.6 Archivo;color:rgba(244,241,236,.66)}
.cta__row{display:flex;align-items:stretch;gap:10px;margin-top:6px;flex-wrap:wrap;justify-content:center}
.cta__mail{width:340px;max-width:100%;padding:14px 18px;border:1px solid rgba(255,255,255,.24);border-radius:2px;background:rgba(255,255,255,.04);font:400 13px/1.2 'JetBrains Mono',monospace;color:rgba(244,241,236,.45);display:flex;align-items:center}
.cta__sub{display:flex;align-items:center;padding:14px 26px;background:#f6f3ee;color:#0a0b0d;font:500 13px/1 Archivo;letter-spacing:.05em;border-radius:2px;cursor:pointer;transition:background .35s}
.cta__sub:hover{background:#f2c893}

/* ================= FOOTER ================= */
.footer{position:relative;height:390px;overflow:hidden;background:#040507;border-top:1px solid rgba(255,255,255,.09)}
.footer__mark{position:absolute;left:-2.5%;bottom:-118px;width:105%;text-align:center;font:400 400px/.8 'Instrument Serif',Georgia,serif;letter-spacing:-.05em;color:#f4f1ec;white-space:nowrap;pointer-events:none}
.footer__mark i{font-style:italic}
.footer__grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:40px;padding:52px var(--gutter) 0}
.footer__col{display:flex;flex-direction:column;gap:9px;font:300 15px/1.5 Archivo;color:rgba(244,241,236,.62)}
.footer__col a{cursor:pointer;transition:color .3s}
.footer__col a:hover{color:#f4f1ec}
.footer__col .strong{color:rgba(244,241,236,.85)}

/* ================= JOIN MODAL ================= */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:40px;
  background:rgba(4,5,7,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.modal[hidden]{display:none}
.modal__card{position:relative;width:540px;max-width:100%;margin:auto;flex:none;padding:42px 40px 36px;border:1px solid rgba(242,200,147,.34);background:#0b0d10;box-shadow:0 40px 90px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:28px}
.modal__close{position:absolute;top:18px;right:20px;font:400 10px/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,236,.45);cursor:pointer;transition:color .3s}
.modal__close:hover{color:#f2c893}
.modal h3{margin:0;font:400 42px/1.02 'Instrument Serif',Georgia,serif;letter-spacing:-.02em;color:#f2c893}
.modal__lead{margin:0;font:300 15px/1.55 Archivo;color:rgba(244,241,236,.62);text-wrap:pretty}
.field{display:flex;flex-direction:column;gap:9px}
.field>span{font:400 10px/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,236,.5)}
.field .opt{color:rgba(244,241,236,.32)}
.field input{width:100%;padding:11px 0;border:0;border-bottom:1px solid rgba(255,255,255,.22);background:transparent;font:300 17px/1.3 Archivo;color:#f4f1ec;outline:none;transition:border-color .3s}
.field input:focus{border-bottom-color:#f2c893}
.field--other input{border-bottom-color:rgba(242,200,147,.4)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:9px 14px;border-radius:999px;cursor:pointer;font:400 12px/1 Archivo;letter-spacing:.02em;border:1px solid rgba(255,255,255,.2);background:transparent;color:rgba(244,241,236,.7);
  transition:border-color .25s,background .25s,color .25s;user-select:none}
.chip[aria-pressed="true"]{border-color:rgba(242,200,147,.9);background:rgba(242,200,147,.16);color:#f2c893}
.chip[data-full="true"]:not([aria-pressed="true"]){color:rgba(244,241,236,.3);cursor:not-allowed}
.modal__err{font:400 10.5px/1.5 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#e9a25c}
.modal__actions{display:flex;align-items:center;gap:14px}
.modal__submit{flex:1;padding:16px 0;text-align:center;background:#f6f3ee;color:#0a0b0d;font:500 12px/1 Archivo;letter-spacing:.16em;cursor:pointer;transition:background .35s,letter-spacing .35s}
.modal__submit:hover{background:#f2c893;letter-spacing:.24em}
.modal__notnow{padding:16px 18px;font:400 11px/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,236,.5);cursor:pointer;transition:color .3s}
.modal__notnow:hover{color:#f4f1ec}
.stack{display:flex;flex-direction:column;gap:28px}
.stack--form{gap:22px}
.sent{display:flex;flex-direction:column;gap:22px;padding:10px 0 6px}
.sent__tag{font:400 10px/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#f2c893}
.sent h3{margin:0;font:400 40px/1.04 'Instrument Serif',Georgia,serif;letter-spacing:-.02em;color:#f8f5f0}
.sent p{margin:0;font:300 15px/1.6 Archivo;color:rgba(244,241,236,.66);text-wrap:pretty}
.sent__back{align-self:flex-start;padding:14px 26px;background:#f6f3ee;color:#0a0b0d;font:500 12px/1 Archivo;letter-spacing:.16em;cursor:pointer;transition:background .35s}
.sent__back:hover{background:#f2c893}

/* ================= KEYFRAMES (verbatim from source) ================= */
@keyframes h25drift{0%{transform:scale(1.08) translate3d(0,0,0)}50%{transform:scale(1.16) translate3d(-2.6%,-1.4%,0)}100%{transform:scale(1.08) translate3d(0,0,0)}}
@keyframes h25spin{to{transform:rotate(360deg)}}
@keyframes h25breathe{0%,100%{opacity:.55}50%{opacity:.9}}
/* percentage steps (one slot = 100/8% for the 8 marquee lines) so it works at any slot height */
@keyframes h25roll{0%,11.1%{transform:translateY(0)}14.29%,25.4%{transform:translateY(-12.5%)}28.57%,39.7%{transform:translateY(-25%)}42.86%,54%{transform:translateY(-37.5%)}57.14%,68.3%{transform:translateY(-50%)}71.43%,82.5%{transform:translateY(-62.5%)}85.71%,96.8%{transform:translateY(-75%)}100%{transform:translateY(-87.5%)}}
@keyframes h25flip{0%,82%{transform:rotate(0deg)}100%{transform:rotate(180deg)}}
@keyframes h25drain{0%{transform:scaleY(1)}80%,100%{transform:scaleY(0)}}
@keyframes h25fill{0%{transform:scaleY(.04)}80%,100%{transform:scaleY(1)}}
@keyframes h25fall{to{stroke-dashoffset:-16}}
@keyframes h25thread{0%,3%{opacity:0}8%,74%{opacity:.95}82%,100%{opacity:0}}
@keyframes h25pulse{0%{transform:scale(.86);opacity:.75}70%{transform:scale(1.7);opacity:0}100%{transform:scale(1.7);opacity:0}}
@keyframes h25spark{0%,100%{transform:scale(.4) rotate(0deg);opacity:0}42%{transform:scale(1) rotate(45deg);opacity:1}72%{transform:scale(.7) rotate(80deg);opacity:.3}}
@keyframes h25bloom{0%,100%{opacity:.5}50%{opacity:1}}

/* progress-bar keyframes — 16.8s = three 5.6s hourglass turns; delays 0/5.6/11.2 keep steps locked to the flip */
@keyframes h25prog{
  0%  {clip-path:inset(0 100%    0 0)}
  5%  {clip-path:inset(0 66.667% 0 0)}
  28% {clip-path:inset(0 66.667% 0 0)}
  33% {clip-path:inset(0 33.333% 0 0)}
  56% {clip-path:inset(0 33.333% 0 0)}
  61% {clip-path:inset(0 0       0 0)}
  84% {clip-path:inset(0 0       0 0)}
  100%{clip-path:inset(0 0       0 100%)}
}
@keyframes h25grain{
  0%  {left:0;opacity:0}
  2%  {opacity:1}
  5%  {left:33.333%}
  28% {left:33.333%}
  33% {left:66.667%}
  56% {left:66.667%}
  61% {left:100%}
  84% {left:100%;opacity:1}
  93% {opacity:0}
  100%{left:100%;opacity:0}
}
@keyframes h25step{
  0%{opacity:.44} 4%{opacity:1} 30%{opacity:1} 36%{opacity:.44} 100%{opacity:.44}
}
@keyframes h25num{
  0%  {color:rgba(244,241,236,.38)}
  4%  {color:#e9a25c}
  30% {color:#e9a25c}
  36% {color:rgba(244,241,236,.38)}
  100%{color:rgba(244,241,236,.38)}
}
@keyframes h25tick{
  0%  {background:rgba(255,255,255,.16);height:6px}
  4%  {background:#e9a25c;height:11px}
  30% {background:#e9a25c;height:11px}
  40% {background:rgba(255,255,255,.16);height:6px}
  100%{background:rgba(255,255,255,.16);height:6px}
}

/* =====================================================================
   RESPONSIVE — intentional reflow, not proportional shrink
   Desktop (>1024) = the 1440 canvas. Tablet and mobile restructure below.
   ===================================================================== */

/* ---------- TABLET  (<=1024px) ---------- */
@media (max-width:1024px){
  :root{--gutter:40px}

  /* header: keep logo + condensed nav + Join; drop the decorative countdown */
  .nav{gap:24px}
  .countdown{display:none}

  /* hero: release the fixed 772px height; anchor content to the bottom naturally */
  .hero{height:auto;min-height:620px}
  .hero__content{position:relative;inset:auto;top:auto;left:auto;right:auto;
    padding:220px var(--gutter) 64px;gap:26px}
  .hero h1{font-size:64px}
  /* marquee lines wrap in a taller slot instead of truncating */
  .roll{height:150px}
  .roll__track div{height:150px;line-height:1.06;white-space:normal;font-size:clamp(34px,5.6vw,56px);display:flex;align-items:center}

  /* about: stack the annotation above the statement */
  .about{grid-template-columns:1fr;gap:22px;padding:88px var(--gutter)}
  .about p{font-size:27px}

  /* four-up grids collapse to two-up */
  .hourfor__grid{grid-template-columns:repeat(2,1fr)}
  .events__grid{grid-template-columns:repeat(2,1fr)}
  .members__grid{grid-template-columns:repeat(2,1fr)}
  .event__media{height:400px}
  .flip{height:460px}

  /* method: let the panel breathe, cap the copy width to the column */
  /* padding is fluid in the base rule now — only the type needs stepping down */
  .method h2{font-size:44px}

  /* members: orb drops below the copy, centred */
  .members__intro{grid-template-columns:1fr;gap:48px;justify-items:start}
  .orbfx{justify-self:center}

  .cta h2{font-size:54px}
  .footer__mark{font-size:230px;bottom:-70px}

  /* progress bar: keep 3-up horizontal, scale down */
  .pbar{padding:72px var(--gutter) 80px}
  .pbar__title{font-size:28px}
  .pbar__desc{font-size:14px}
  .pbar__step{padding-right:28px}
  .pbar__step + .pbar__step{padding-left:22px}
}

/* ---------- MOBILE  (<=640px) ---------- */
@media (max-width:640px){
  :root{--gutter:20px}

  /* header becomes logo + hamburger; links slide down as a panel */
  .hdr{padding:18px var(--gutter)}
  .nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;cursor:pointer;position:relative;z-index:130}
  .nav-toggle span{display:block;height:1.5px;background:#f4f1ec;transition:transform .3s,opacity .3s}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .nav{position:fixed;top:0;right:0;height:100dvh;width:min(78vw,320px);z-index:120;
    flex-direction:column;align-items:flex-start;justify-content:center;gap:28px;
    padding:32px 32px;background:#0a0b0d;border-left:1px solid rgba(255,255,255,.1);
    font-size:14px;letter-spacing:.12em;transform:translateX(100%);transition:transform .38s cubic-bezier(.6,0,.2,1)}
  .nav.open{transform:translateX(0)}
  .nav .btn-join{margin:0}
  .nav-scrim{display:block;position:fixed;inset:0;z-index:110;background:rgba(4,5,7,.6);opacity:0;pointer-events:none;transition:opacity .3s}
  .nav-scrim.open{opacity:1;pointer-events:auto}

  /* hero: sized to content (no big dead gap), headline scaled to the screen */
  .hero{min-height:auto}
  .hero__content{padding:132px var(--gutter) 72px;gap:22px}
  .hero h1{font-size:clamp(34px,10.5vw,52px);line-height:1.05}
  .roll{height:150px;margin-top:0}
  .roll__track div{height:150px;font-size:clamp(30px,8.6vw,42px);line-height:1.12}
  .hero__cta{gap:12px}
  .btn-solid,.btn-ghost{padding:14px 22px}

  .about{padding:64px var(--gutter)}
  .about p{font-size:21px;line-height:1.36}

  /* all card rows go single-column */
  .hourfor{padding:0 var(--gutter) 72px}
  .hourfor__grid{grid-template-columns:1fr}
  .events{padding:72px var(--gutter);gap:28px}
  .events__head{flex-direction:column;align-items:flex-start;gap:18px}
  .events__grid{grid-template-columns:1fr;gap:16px}
  .event__media{height:66vw;min-height:300px}
  .members{padding:72px var(--gutter);gap:44px}
  .members__grid{grid-template-columns:1fr;gap:16px}
  .flip{height:520px}
  .flip__inner{cursor:pointer}

  .method h2{font-size:34px}
  .method p{font-size:16px}

  .orbfx{width:200px;height:200px}

  .cta{padding:80px var(--gutter) 84px}
  .cta h2{font-size:38px}
  .cta__row{flex-direction:column;width:100%}
  .cta__mail{width:100%;justify-content:center}
  .cta__sub{justify-content:center}

  /* footer mirrors desktop: giant wordmark below the columns, bottom lightly clipped */
  .footer{height:300px;padding-bottom:0}
  .footer__grid{grid-template-columns:1fr 1fr;gap:22px 20px;padding-top:40px}
  .footer__mark{font-size:32vw;bottom:-14px;letter-spacing:-.045em}

  .modal{padding:0}
  .modal__card{padding:40px 22px 30px;min-height:100dvh;border:0}
  .modal h3{font-size:34px}

  /* progress bar: rotate 90° — vertical rail on the left, steps stacked, glass travels down */
  .pbar{padding:64px var(--gutter) 72px;display:grid;grid-template-columns:1px 1fr;column-gap:28px}
  .pbar__track{width:1px;height:100%}
  .pbar__fill{background:linear-gradient(180deg,rgba(233,162,92,.4) 0%,#e9a25c 60%,#f2c893 100%)}
  .pbar__tick{top:var(--p);left:-3px;width:6px;height:1px}
  .pbar__glass{top:0}
  .pbar__steps{grid-template-columns:1fr;row-gap:44px}
  .pbar__step{padding:0;border-left:0}
  .pbar__step + .pbar__step{padding-left:0;border-left:0}
  .pbar__title{font-size:26px}
  .pbar__desc{font-size:15px}
  @keyframes h25prog{
    0%  {clip-path:inset(0 0 100%    0)}
    5%  {clip-path:inset(0 0 66.667% 0)}
    28% {clip-path:inset(0 0 66.667% 0)}
    33% {clip-path:inset(0 0 33.333% 0)}
    56% {clip-path:inset(0 0 33.333% 0)}
    61% {clip-path:inset(0 0 0       0)}
    84% {clip-path:inset(0 0 0       0)}
    100%{clip-path:inset(100% 0 0    0)}
  }
  @keyframes h25grain{
    0%  {top:0;left:0;opacity:0}
    2%  {opacity:1}
    5%  {top:33.333%}
    28% {top:33.333%}
    33% {top:66.667%}
    56% {top:66.667%}
    61% {top:100%}
    84% {top:100%;opacity:1}
    93% {opacity:0}
    100%{top:100%;opacity:0}
  }
  @keyframes h25tick{
    0%  {background:rgba(255,255,255,.16);width:6px}
    4%  {background:#e9a25c;width:11px}
    30% {background:#e9a25c;width:11px}
    40% {background:rgba(255,255,255,.16);width:6px}
    100%{background:rgba(255,255,255,.16);width:6px}
  }
}

/* ---------- reduced motion: still shows the design, just calm ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .roll__track{transform:translateY(0)}
  /* progress bar freezes in a complete, legible rest state — all three steps equally lit */
  .pbar__fill{animation:none!important;clip-path:inset(0 0 0 0)!important}
  .pbar__glass{animation:none!important;left:100%!important}
  .pbar__tick{animation:none!important;background:#e9a25c!important;height:11px!important}
  .pbar__step{animation:none!important;opacity:1!important}
  .pbar__num{animation:none!important;color:#e9a25c!important}
}
/* mobile rest state: vertical rail — glass rests at the bottom, ticks widen instead of heighten */
@media (max-width:640px) and (prefers-reduced-motion:reduce){
  .pbar__glass{left:0!important;top:100%!important}
  .pbar__tick{height:1px!important;width:11px!important}
}