/* Candler Creative — shared styles for index.html, ecosystem.html, about.html
   Brand palette from the Master Brand Guide + logo files.
   Two fonts only: Instrument Serif (headings) + Karla (everything else). */
:root{
  --paper:#FBF7E6; --surface:#F9F3D8; --surface-2:#F1E7C3;
  --ink:#1F1A17; --muted:#6B6157; --faint:#DDD0A8; --hair:#EAE0BD;
  --accent:#E25E00; --accent-ink:#B84C00; --accent-soft:#FBE2C8;
  --good:#2A7A83; --good-soft:#DCEEEC; --teal:#4CA7B1;
  --night:#1F1A17; --night-2:#2A231F; --night-ink:#F9F3D8; --night-muted:#C9BDA6; --night-hair:#3A312B; --glow:#FF7A1A;
  --display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --body:"Karla","Helvetica Neue",Arial,sans-serif;
  --wrap:72rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,figure{margin:0}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.5rem}
.center{text-align:center}
section{padding:6rem 0}
.alt{background:var(--surface)}

.label{font-family:var(--body);font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem}
.label::after{content:"";flex:1;height:1px;background:var(--faint)}
.center .label{justify-content:center}
.center .label::after{display:none}
h1,h2{font-family:var(--display);font-weight:400;letter-spacing:-.01em;text-wrap:balance}
h2{font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.06}
h3{font-family:var(--body);font-weight:700;font-size:1.05rem}
h1 em,h2 em,.oneline em{font-style:italic;color:var(--accent)}
.lede{font-size:1.15rem;color:var(--muted);max-width:40rem}
.textlink{font-weight:700;color:var(--accent-ink);text-decoration:none;border-bottom:1.5px solid var(--accent-soft)}
.textlink:hover{border-color:var(--accent)}

/* placeholders — content we still need. Deliberately loud so nothing ships by accident. */
.ph{display:inline;background:#FFE9A8;color:#5A3D00;border:1.5px dashed #C98A00;padding:.05em .4em;border-radius:3px;font-family:var(--body);font-size:.82em;font-weight:700;font-style:normal;letter-spacing:0;text-transform:none;line-height:1.7;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--body);font-weight:700;font-size:1rem;padding:.9rem 1.5rem;border-radius:999px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:var(--night-ink)}
.btn-primary:hover{background:var(--accent-ink)}
.btn-ghost{border-color:currentColor;background:transparent}
.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--glow);outline-offset:3px}
.btns{display:flex;flex-wrap:wrap;gap:.8rem}
.center .btns{justify-content:center}

/* banner + nav */
.fest{background:var(--accent);color:var(--ink);font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:.6rem 1rem}
.fest a{text-decoration:none}
.fest a:hover span{text-decoration:underline}
nav{position:sticky;top:0;z-index:20;background:rgba(31,26,23,.97);color:var(--night-ink);border-bottom:1px solid var(--night-hair)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:4rem;gap:1rem}
.brand{display:flex;align-items:center}
.brand img{height:2.1rem;width:auto;display:block}
.navlinks{display:flex;gap:1.6rem;font-size:.92rem;color:var(--night-muted)}
.navlinks a{text-decoration:none}
.navlinks a:hover,.navlinks a[aria-current]{color:var(--night-ink)}
nav .btn{padding:.55rem 1.1rem;font-size:.9rem}

/* dark sections */
.night{background:var(--night);color:var(--night-ink)}
.night .lede{color:var(--night-muted)}
.night .label{color:var(--glow)}
.night .label::after{background:var(--night-hair)}
.night h1 em,.night h2 em{color:var(--glow)}
.night .textlink{color:var(--glow);border-bottom-color:rgba(255,122,26,.4)}

/* hero */
.hero{position:relative;overflow:hidden;padding:6rem 0}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero .wrap{position:relative;z-index:1}
.herogrid{display:grid;grid-template-columns:1.25fr 1fr;gap:3rem;align-items:center;min-height:calc(100vh - 13rem)}
.hero h1{font-size:clamp(2.8rem,6.6vw,5.4rem);line-height:1;margin-bottom:1.6rem}
.herosub{font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.45;color:var(--night-ink);max-width:32rem;margin-bottom:2.4rem}
.heroart{display:flex;justify-content:center}
.heroart img{width:min(100%,19rem);height:auto;filter:drop-shadow(0 0 40px rgba(255,122,26,.55)) drop-shadow(0 0 90px rgba(226,94,0,.35));animation:flicker 5s ease-in-out infinite}
.heroflame-sm{display:none}
@keyframes flicker{0%,100%{transform:scale(1) rotate(0)}40%{transform:scale(1.025) rotate(-1deg)}70%{transform:scale(.985) rotate(.8deg)}}
.pagehero{padding:5rem 0 4.5rem}
.pagehero h1{font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.02;margin-bottom:1.2rem;max-width:18ch}
.pagehero .lede{margin-bottom:2rem}

/* how it works — vertical timeline */
.timeline{list-style:none;padding:0;margin:3rem 0 0;position:relative;max-width:44rem}
.timeline::before{content:"";position:absolute;left:1.35rem;top:1.5rem;bottom:1.5rem;width:2px;background:var(--faint)}
.timeline li{position:relative;padding:0 0 2.6rem 4.4rem}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:attr(data-n);position:absolute;left:0;top:0;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--paper);border:2px solid var(--faint);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:1.4rem;color:var(--muted)}
.timeline .step{font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.timeline h3{font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,3.4vw,2.3rem);line-height:1.1;margin:.2rem 0 .5rem}
.timeline p{color:var(--muted);font-size:1.05rem;max-width:34rem}
.timeline li.here{background:var(--accent-soft);border-radius:.8rem;padding:1.6rem 1.6rem 1.8rem 4.4rem;margin:0 0 2.6rem -0.0rem}
.timeline li.here::before{background:var(--accent);border-color:var(--accent);color:var(--night-ink);left:0;top:1.6rem}
.timeline li.here p{color:var(--ink)}
.timeline li.here .step{color:var(--accent-ink)}
.youarehere{display:inline-flex;align-items:center;gap:.5rem;background:var(--accent);color:var(--night-ink);font-weight:700;font-size:.8rem;padding:.35rem .8rem;border-radius:999px;margin-bottom:.8rem}
.youarehere::before{content:"➜";font-size:.9rem}
.why{margin-top:3rem;border-left:3px solid var(--accent);padding:.4rem 0 .4rem 1.4rem;max-width:44rem}
.why h3{margin-bottom:.4rem}
.why p{font-size:1.1rem}
.evidence{display:grid;grid-template-columns:1fr 1.4fr;gap:1.2rem;margin-top:2rem}
.evidence > div{border:1px solid var(--faint);background:var(--paper);padding:1.4rem;display:flex;flex-direction:column;gap:.6rem}
.evidence .k{font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* testimonial cards */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.2rem;margin-top:2rem}
.quote{background:var(--paper);border:1px solid var(--faint);padding:1.6rem;display:flex;flex-direction:column;gap:1rem}
.quote blockquote{margin:0;font-family:var(--display);font-size:1.3rem;line-height:1.28;flex:1}
.quote figcaption{display:flex;align-items:center;gap:.8rem;font-size:.92rem;color:var(--muted)}
.quote .face{width:3rem;height:3rem;border-radius:50%;background:var(--accent);color:var(--night-ink);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:1.25rem;flex:none}
.quote .face.t{background:var(--teal);color:var(--ink)}
.quote b{color:var(--ink);display:block}

/* who we are */
.oneline{font-family:var(--display);font-size:clamp(2.4rem,6vw,4.4rem);line-height:1.04;letter-spacing:-.01em;text-wrap:balance;max-width:20ch;margin:0 auto 1.6rem}
#who .lede{margin:0 auto}

/* stuck + self-check */
.bigq{font-size:clamp(2.3rem,5.4vw,4rem);line-height:1.04;max-width:22ch}
.checkgrid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:3.5rem;align-items:start}
.forlist h3{font-family:var(--display);font-weight:400;font-size:1.7rem;margin-bottom:.9rem}
.forlist h3.not{margin-top:2rem;color:var(--night-muted)}
.forlist ul{padding-left:1.2rem;display:flex;flex-direction:column;gap:.75rem;font-size:1.05rem}
.forlist ul.not li{color:var(--night-muted)}
.quiz{background:var(--night-2);border:1px solid var(--night-hair);border-radius:1rem;padding:1.8rem}
.quiz fieldset{border:0;padding:0;margin:0 0 1.3rem}
.quiz legend{font-size:1.05rem;font-weight:700;margin-bottom:.6rem;padding:0}
.quiz .opts{display:flex;gap:.6rem}
.quiz label{flex:1;cursor:pointer}
.quiz input{position:absolute;opacity:0;pointer-events:none}
.quiz label span{display:block;text-align:center;padding:.65rem;border:1.5px solid var(--night-hair);border-radius:999px;font-weight:700;transition:all .15s ease}
.quiz input:checked + span{background:var(--accent);border-color:var(--accent);color:var(--night-ink)}
.quiz input:focus-visible + span{outline:2px solid var(--glow);outline-offset:2px}
.quizresult{border-top:1px solid var(--night-hair);padding-top:1.3rem;margin-top:.4rem}
.quizresult h3{font-family:var(--display);font-weight:400;font-size:1.7rem;line-height:1.15;margin-bottom:.5rem}
.quizresult p{color:var(--night-muted);margin-bottom:1.1rem}
.quizhint{font-size:.9rem;color:var(--night-muted)}

/* what we do — "you at the centre" */
.centre{display:grid;grid-template-columns:1fr 1fr;gap:4rem;margin-top:3rem;align-items:center}
.diagram svg{width:100%;max-width:30rem;display:block;margin:0 auto}
.seat{cursor:pointer}
.seat circle{fill:var(--paper);stroke:var(--faint);stroke-width:2;transition:fill .35s ease,stroke .35s ease}
.seat text{transition:fill .35s ease}
.seat .k{fill:var(--accent-ink);font-family:Karla,Arial,sans-serif;font-weight:700;font-size:9.5px;letter-spacing:1.5px}
.seat .nm{fill:var(--ink);font-family:"Instrument Serif",Georgia,serif;font-size:19px}
.seat.on .k{fill:rgba(249,243,216,.85)}
.ring{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:7 9;opacity:.75;animation:circulate 16s linear infinite}
@keyframes circulate{to{stroke-dashoffset:-320}}
.seat line{stroke:var(--faint);stroke-width:2;stroke-dasharray:4 5;transition:stroke .35s ease}
.seat:hover circle{stroke:var(--accent)}
.seat.on circle{fill:var(--accent);stroke:var(--accent)}
.seat.on text{fill:var(--night-ink)}
.seat.on line{stroke:var(--accent)}
.offers{display:flex;flex-direction:column;gap:.8rem}
.offer{border:1px solid var(--faint);background:var(--paper);border-radius:.7rem;transition:border-color .3s ease}
.offer[open]{border-color:var(--accent)}
.offer summary{list-style:none;cursor:pointer;padding:1.15rem 1.3rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-family:var(--display);font-size:1.6rem;line-height:1.1}
.offer summary::-webkit-details-marker{display:none}
.offer summary::after{content:"+";font-family:var(--body);font-size:1.5rem;color:var(--accent-ink);transition:transform .25s ease}
.offer[open] summary::after{transform:rotate(45deg)}
.offer .kick{display:block;font-family:var(--body);font-weight:700;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:.2rem}
.offer summary small{display:block;font-family:var(--body);font-size:.85rem;color:var(--muted);margin-top:.2rem}
.offer .body{padding:0 1.3rem 1.3rem;color:var(--muted);display:flex;flex-direction:column;gap:.8rem}

/* brand builder */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--faint);border:1px solid var(--faint);margin-top:2.6rem}
.flow div{background:var(--paper);padding:1.4rem}
.flow .k{font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);display:block;margin-bottom:.4rem}
.flow p{font-size:1.02rem}
.bbsteps{list-style:none;padding:0;margin:2.6rem 0 0;display:flex;flex-direction:column;gap:.8rem;max-width:48rem}
.bbsteps details{background:var(--paper);border:1px solid var(--faint);border-radius:.7rem}
.bbsteps details[open]{border-color:var(--accent)}
.bbsteps summary{list-style:none;cursor:pointer;padding:1.2rem 1.3rem;display:grid;grid-template-columns:auto 1fr auto;gap:1.1rem;align-items:center}
.bbsteps summary::-webkit-details-marker{display:none}
.bbsteps .num{width:2.6rem;height:2.6rem;border-radius:50%;background:var(--accent);color:var(--night-ink);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:1.35rem}
.bbsteps .t{font-family:var(--display);font-size:1.55rem;line-height:1.1}
.bbsteps .t small{display:block;font-family:var(--body);font-size:.92rem;color:var(--muted);margin-top:.15rem}
.bbsteps summary::after{content:"+";font-size:1.5rem;color:var(--accent-ink);transition:transform .25s ease}
.bbsteps details[open] summary::after{transform:rotate(45deg)}
.bbsteps dl{margin:0;padding:0 1.3rem 1.3rem 5rem;display:grid;grid-template-columns:9rem 1fr;gap:.5rem 1rem;font-size:.98rem}
.bbsteps dt{font-weight:700}
.bbsteps dd{margin:0;color:var(--muted)}
.bbcta{margin-top:2.6rem;border:1.5px solid var(--accent);border-radius:1rem;padding:2rem;display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;background:var(--paper)}
.bbcta .big{font-family:var(--display);font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.15;margin-bottom:.4rem}
.bbcta p:not(.big){color:var(--muted)}

/* founders — profile cut-outs */
.founders{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:3rem}
.founder{display:flex;flex-direction:column;gap:1rem}
.avatar{position:relative;width:9.5rem;height:9.5rem;margin:0 0 .6rem}
.avatar::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);transform:translate(.7rem,.55rem)}
.founder:not(.v) .avatar::before{background:var(--teal)}  /* Dan teal, Val orange */
.avatar img{position:relative;width:100%;height:100%;border-radius:50%;object-fit:cover;border:4px solid var(--paper);display:block}
.founder .who{font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
.founder.v .who{color:var(--good)}
.founder .pull{font-family:var(--display);font-size:clamp(1.5rem,2.8vw,1.95rem);line-height:1.15}
.founder p{color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips span:not(.ph){background:var(--surface-2);border-radius:999px;padding:.3rem .8rem;font-size:.88rem}

/* ecosystem page */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--faint);border:1px solid var(--faint)}
.stats div{background:var(--paper);padding:1.6rem;display:flex;flex-direction:column;gap:.4rem}
.stats .n{font-family:var(--display);font-size:2.4rem;line-height:1}
.stats p{color:var(--muted);font-size:.95rem}
.gets{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:2.6rem}
.get{background:var(--paper);border:1px solid var(--faint);border-radius:.8rem;padding:1.8rem;display:flex;flex-direction:column;gap:.7rem}
.get h3{font-family:var(--display);font-weight:400;font-size:1.9rem;line-height:1.1}
.get p{color:var(--muted)}
.get .btn{align-self:flex-start;margin-top:.4rem}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.gallery div{aspect-ratio:4/3;background:repeating-linear-gradient(135deg,var(--surface) 0 12px,var(--surface-2) 12px 24px);display:flex;align-items:center;justify-content:center;padding:1rem;text-align:center}
.eventcard{background:var(--night);color:var(--night-ink);border-radius:1rem;padding:2.4rem;display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center}
.eventcard .k{font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--glow)}
.eventcard h3{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,3.6vw,2.6rem);line-height:1.05;margin:.4rem 0 .5rem}
.eventcard .when{font-weight:700;margin-bottom:.4rem}
.eventcard p{color:var(--night-muted)}
.flames-note{max-width:40rem;color:var(--muted);font-size:1rem}

/* about page */
.specs{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;margin-top:2.4rem}
.spec{background:var(--paper);border:1px solid var(--faint);border-radius:.8rem;padding:1.6rem;display:flex;flex-direction:column;gap:.6rem}
.spec .avatar{width:6.5rem;height:6.5rem}
.spec .avatar.empty{border-radius:50%;background:var(--surface-2);border:1.5px dashed #C98A00;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#5A3D00}
.spec .avatar.empty::before{display:none}
.spec h3{font-family:var(--display);font-weight:400;font-size:1.7rem;line-height:1.1}
.spec .role{font-size:.92rem;color:var(--muted)}
.spec .co{font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}

/* final CTA */
.finalcta{padding:7rem 0}
.finalcta h2{font-size:clamp(2.4rem,5.4vw,4rem);max-width:18ch;margin:0 auto 2.2rem}

footer{background:var(--night);color:var(--night-muted);border-top:1px solid var(--night-hair);font-size:.85rem;line-height:1.8;padding:2.2rem 0 5.5rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem}
footer nav{position:static;background:none;border:0;display:flex;gap:1.4rem}
footer a{text-decoration:none}
footer a:hover{color:var(--night-ink)}

.stick{display:none}
.toast{position:fixed;left:50%;bottom:5.5rem;transform:translate(-50%,1rem);background:var(--ink);color:var(--paper);font-size:.9rem;padding:.7rem 1.1rem;border-radius:.5rem;opacity:0;pointer-events:none;transition:all .25s ease;z-index:40}
.toast.show{opacity:1;transform:translate(-50%,0)}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

@media(max-width:56rem){
  .navlinks{display:none}
  nav .btn{display:none}
  section{padding:4.5rem 0}
  .herogrid{grid-template-columns:1fr;min-height:0;gap:0}
  .heroart{display:none}
  .heroflame-sm{display:block;height:3.4rem;width:auto;margin-bottom:1.4rem;filter:drop-shadow(0 0 18px rgba(255,122,26,.55))}
  .hero{padding:4rem 0 4.5rem}
  .evidence,.checkgrid,.centre,.founders,.gets,.bbcta,.eventcard{grid-template-columns:1fr}
  .centre{gap:2rem}
  .diagram svg{max-width:22rem}
  .flow{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .bbsteps dl{padding-left:1.3rem;grid-template-columns:1fr}
  .bbsteps dt{margin-top:.4rem}
  .stick{display:flex;position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:30;box-shadow:0 12px 30px -10px rgba(0,0,0,.5)}
}
@media (prefers-reduced-motion:reduce){.ring{animation:none}.reveal{opacity:1;transform:none}.heroart img{animation:none}html{scroll-behavior:auto}}
.stats .n .ph{font-size:.48em}
.statbig{font-size:1.05rem;line-height:1.45}
.statbig b{display:block;font-family:var(--display);font-weight:400;font-size:2.6rem;line-height:1;color:var(--accent)}
.src{font-size:.82rem;color:var(--muted);margin-bottom:.6rem}
.src a{color:inherit}
.casegrid{display:grid;grid-template-columns:9rem 1fr;gap:1.2rem;align-items:start}
.casegrid img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:.5rem;display:block}
.casesteps{display:flex;flex-direction:column;gap:.7rem}
.casesteps b{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
.casesteps p{font-size:.98rem;line-height:1.45}
.casequote{margin:.4rem 0 0;font-family:var(--display);font-size:1.25rem;line-height:1.3;border-left:3px solid var(--accent);padding-left:1rem}
img.face{object-fit:cover}
@media(max-width:30rem){.casegrid{grid-template-columns:1fr}.casegrid img{max-width:14rem}}

/* site menu dropdown */
.navright{position:relative;display:flex;align-items:center;gap:.7rem}
.menubtn{display:inline-flex;align-items:center;gap:.55rem;background:transparent;color:var(--night-ink);border:1.5px solid var(--night-hair);border-radius:999px;padding:.5rem .95rem;font-family:var(--body);font-weight:700;font-size:.9rem;cursor:pointer}
.menubtn:hover,.menubtn.open{border-color:var(--night-ink)}
.menubtn:focus-visible{outline:2px solid var(--glow);outline-offset:3px}
.burger{display:inline-flex;flex-direction:column;gap:3px}
.burger i{display:block;width:14px;height:2px;background:currentColor;border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.menubtn.open .burger i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menubtn.open .burger i:nth-child(2){opacity:0}
.menubtn.open .burger i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.menupanel{position:absolute;right:0;top:calc(100% + .6rem);min-width:16rem;background:var(--night-2);border:1px solid var(--night-hair);border-radius:.8rem;padding:.5rem;box-shadow:0 24px 50px -20px rgba(0,0,0,.6);display:flex;flex-direction:column;z-index:50}
.menupanel[hidden]{display:none}
.menupanel > a{color:var(--night-ink);text-decoration:none;padding:.7rem .9rem;border-radius:.5rem;font-size:1rem}
.menupanel > a:hover{background:rgba(249,243,216,.08)}
.menupanel > a[aria-current]{color:var(--glow)}
.menupanel > a[aria-current]::after{content:" · you're here";font-size:.8rem;color:var(--night-muted)}
.menuctas{display:flex;flex-direction:column;gap:.5rem;border-top:1px solid var(--night-hair);margin-top:.4rem;padding:.8rem .4rem .4rem}
.menuctas .btn{width:100%;padding:.7rem 1rem;font-size:.95rem}
.menuctas .btn-ghost{color:var(--night-ink)}
@media(max-width:56rem){
  .navright .btn{display:none}
  .menuctas .btn{display:inline-flex}
  .menupanel{width:calc(100vw - 3rem);min-width:0}
}
.statnote{margin-top:1.2rem;color:var(--muted);max-width:44rem}
.proofline{font-size:1.1rem;margin:0 auto 1.6rem;color:var(--muted)}
.proofline b{font-family:var(--display);font-weight:400;font-size:2rem;color:var(--accent);vertical-align:-.15em;margin-right:.15rem}
.proofline{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.6rem}
.proofline i{font-style:normal;white-space:nowrap}

/* enquiry pop-up */
dialog.enquiry{border:0;padding:0;border-radius:1rem;background:var(--paper);color:var(--ink);width:min(34rem,calc(100vw - 2rem));max-height:calc(100vh - 2rem);overflow:auto;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
dialog.enquiry::backdrop{background:rgba(31,26,23,.7)}
.eform,.edone{padding:2rem;display:flex;flex-direction:column;gap:1rem;position:relative}
.eform[hidden],.edone[hidden]{display:none}
.ekick{font-weight:700;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink)}
.etitle{font-family:var(--display);font-weight:400;font-size:2rem;line-height:1.05;margin-top:-.6rem}
.esub{color:var(--muted)}
.eform label{display:flex;flex-direction:column;gap:.35rem;font-weight:700;font-size:.92rem}
.eform .opt{font-weight:400;color:var(--muted)}
.eform input,.eform select,.eform textarea{font:inherit;font-weight:400;font-size:1rem;padding:.7rem .8rem;border:1.5px solid var(--faint);border-radius:.5rem;background:#fff;color:var(--ink);width:100%}
.eform input:focus,.eform select:focus,.eform textarea:focus{outline:none;border-color:var(--accent)}
.erow{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.esend{align-self:flex-start}
.ealt{font-size:.9rem;color:var(--muted)}
.ealt a{color:var(--accent-ink)}
.eclose{position:absolute;top:1rem;right:1rem;width:2.2rem;height:2.2rem;border-radius:50%;border:1.5px solid var(--faint);background:transparent;font-size:1.3rem;line-height:1;cursor:pointer;color:var(--ink)}
.edone .btn{align-self:flex-start}
@media(max-width:30rem){.erow{grid-template-columns:1fr}.eform,.edone{padding:1.5rem}}
.facts{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.55rem}
.facts li{display:flex;gap:.7rem;align-items:flex-start;background:var(--paper);border:1px solid var(--faint);border-radius:.6rem;padding:.65rem .85rem;font-size:.95rem;line-height:1.45}
.facts li .ic{font-size:1.15rem;line-height:1.2;flex:none}
@media(max-width:42rem){.specs{grid-template-columns:1fr}}