/* CoDeS LLC public site. One small stylesheet, no JavaScript, no web fonts. Colours follow the CoDeS app. */
:root{--black:#050706;--f0:#07100c;--f1:#09140f;--f2:#0d1b15;--f3:#13261d;--gold:#d1a91b;--gold2:#f1d68a;--goldsoft:#8f7314;--live:#67e5be;--blue:#2a56c6;--text:#e8ebe9;--mute:#a7b2ad;--line:rgba(212,175,55,.26);--lineg:rgba(47,122,84,.34);--r:16px;--serif:Georgia,"Times New Roman",Cambria,serif;--sans:system-ui,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--black);color:var(--text);font:17px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--gold2)}a:hover{color:#fff}
:focus-visible{outline:3px solid var(--live);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:#1a1200;padding:10px 16px;border-radius:8px;z-index:50;font-weight:700}
.skip:focus{left:8px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
svg.i{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.18em}
/* header */
.bar{position:sticky;top:0;z-index:10;background:rgba(5,7,6,.96);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:18px;min-height:64px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--gold);font:700 20px var(--serif);letter-spacing:.04em;white-space:nowrap}
.logo img{width:36px;height:auto}
.bar nav{margin-left:auto}
.bar nav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.bar nav a{display:block;color:var(--mute);text-decoration:none;font-size:15px;padding:8px 11px;border-radius:10px;white-space:nowrap}
.bar nav a:hover,.bar nav a[aria-current]{color:var(--gold2);background:var(--f2)}
.btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:700;padding:12px 22px;border-radius:12px;border:1px solid var(--gold);background:var(--gold);color:#1a1200;font-size:16px}
.btn:hover{background:var(--gold2);color:#1a1200}
.btn.ghost{background:transparent;color:var(--gold2);border-color:rgba(212,175,55,.45)}.btn.ghost:hover{background:var(--f2);color:#fff}
.bar .btn{padding:9px 16px;font-size:15px}
@media(max-width:860px){.bar{position:static}.bar nav{order:3;flex:1 0 100%;margin:0;overflow-x:auto}.bar nav ul{flex-wrap:nowrap}.bar .btn{margin-left:auto}}
/* hero */
.hero{background:radial-gradient(900px 520px at 78% 30%,#08161f 0,rgba(8,22,31,0) 62%),radial-gradient(760px 420px at 8% 0,#08150f 0,rgba(8,21,15,0) 60%);padding:64px 0 56px}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
@media(max-width:860px){.hero .wrap{grid-template-columns:1fr}.hero .seal{order:-1;max-width:260px;margin:0 auto}}
.eyebrow{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--live);margin:0 0 16px}
h1{font:700 clamp(38px,6.2vw,68px)/1.04 var(--serif);margin:0 0 20px;letter-spacing:-.01em}
h1 em{font-style:normal;color:var(--gold)}
.lead{font-size:20px;color:#d6e0d9;max-width:620px;margin:0 0 26px}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 8px;padding:0;list-style:none}
.badges li{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--lineg);background:rgba(13,27,21,.85);border-radius:99px;padding:6px 14px;font-size:14px;color:#d7e3dc}
.badges svg{color:var(--live)}
.badges a{color:inherit;text-decoration:none}.badges a:hover{text-decoration:underline}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.seal{width:100%;max-width:400px;margin-left:auto}
.seal img{width:100%;height:auto;display:block;border-radius:50%;box-shadow:0 0 0 1px #3b4f86,0 0 60px rgba(42,86,198,.35),0 24px 70px rgba(0,0,0,.65)}
.ids{display:flex;gap:6px 22px;flex-wrap:wrap;margin:30px 0 0;padding:18px 0 0;border-top:1px solid var(--f3);font-size:14px;color:var(--mute);list-style:none}
.ids b{color:var(--gold2);font-weight:600}
/* sections */
section{padding:64px 0;border-top:1px solid var(--f2)}
section.alt{background:linear-gradient(180deg,var(--f0),var(--f1))}
.kicker{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:#8fc29c;margin:0 0 10px;font-weight:700}
h2{font:700 clamp(27px,3.8vw,38px)/1.15 var(--serif);margin:0 0 14px}
h3{font:700 22px var(--serif);margin:0 0 8px;color:var(--gold2)}
.sub{color:var(--mute);max-width:740px;margin:0 0 30px;font-size:18px}
.sub.tight{margin-bottom:0}
.mission{font:italic 400 clamp(21px,3vw,30px)/1.4 var(--serif);color:#e7efe9;max-width:860px;margin:0 0 20px}
.mission b{font-style:normal;color:var(--gold)}
.grid{display:grid;gap:18px}.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.g4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:linear-gradient(160deg,rgba(15,42,29,.5),rgba(14,19,16,.92) 65%);border:1px solid var(--lineg);border-radius:var(--r);padding:24px}
.card p{margin:0;color:#c9d5ce;font-size:16.5px}
.card .q{font:italic 400 16px var(--serif);color:var(--live);margin:0 0 10px}
.card .tg{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 10px}
.card img.ic{height:52px;width:auto;display:block;margin:0 0 14px}
.card img.round{border-radius:50%}
.flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 26px;padding:0;list-style:none}
.flow li{background:var(--f2);border:1px solid var(--lineg);border-radius:12px;padding:9px 15px;font-size:15px;color:#d6e0d9}
.flow li b{color:var(--gold2)}
.flow li+li:before{content:"\203A";color:var(--goldsoft);margin-right:10px;font-size:19px}
.support{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.support li{border-left:3px solid var(--gold);padding:2px 0 2px 16px;color:#c9d5ce}
.support b{color:var(--gold2)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.chips li{border:1px solid var(--lineg);background:var(--f1);border-radius:99px;padding:7px 15px;font-size:15.5px;color:#d3ded7}
/* research list */
.rlist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.rlist li{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;background:var(--f2);border:1px solid var(--lineg);border-radius:14px;padding:16px 18px}
.rlist .ico{width:42px;height:42px;border-radius:12px;background:var(--f3);display:grid;place-items:center;color:var(--gold);font-size:21px}
.rlist a.t{display:block;font:700 18px var(--serif);color:var(--text);text-decoration:none}.rlist a.t:hover{color:var(--gold2);text-decoration:underline}
.rlist .d{display:block;color:var(--mute);font-size:15px}
.rlist .m{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
@media(max-width:600px){.rlist li{grid-template-columns:auto 1fr}.rlist .m{grid-column:2}}
.pill{display:inline-block;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;border-radius:6px;padding:2px 8px;margin-left:8px;vertical-align:middle;font-family:var(--sans);font-weight:700}
.pill.draft{background:#3a2d0d;color:#f0c35a}
.fine{font-size:14.5px;color:var(--mute);margin:16px 0 0}
.band{background:linear-gradient(135deg,#0d1f4a,#0a1a2c 60%,#0c1a14);border:1px solid #2b4a8f;border-radius:20px;padding:40px 32px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
@media(max-width:760px){.band{grid-template-columns:1fr;padding:28px 22px}}
.band h2{margin:0 0 8px}.band p{margin:0;color:#d3deec}
/* article pages */
.crumbs{font-size:14px;color:var(--mute);padding:20px 0 0}.crumbs a{color:var(--mute)}
.art{padding:28px 0 56px}
.art h1{font-size:clamp(30px,5vw,46px)}
.art .meta{color:var(--mute);font-size:15px;margin:0 0 26px}
.prose{max-width:760px}
.prose h2{font-size:27px;margin:38px 0 12px}
.prose h3{margin:26px 0 8px}
.prose p,.prose li{color:#d3ded7}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin:6px 0}
.tablewrap{overflow-x:auto;margin:18px 0}
table{width:100%;border-collapse:collapse;font-size:15.5px}
th,td{padding:12px 12px;border-bottom:1px solid var(--lineg);text-align:left;vertical-align:top}
th{color:var(--gold2);font-size:13px;letter-spacing:.08em;text-transform:uppercase;background:var(--f1)}
.kv td:first-child{width:30%;color:var(--mute);font-size:13.5px;letter-spacing:.08em;text-transform:uppercase}
.note{border:1px solid var(--lineg);background:var(--f1);border-radius:14px;padding:16px 18px;margin:22px 0;color:#d3ded7}
.review{background:#2a210a;border:2px solid #d9a52b;color:#f6e6b8;border-radius:12px;padding:14px 18px;margin:0 0 22px;font-size:15.5px}
.review b{color:#ffd978}
footer{padding:40px 0 52px;border-top:1px solid var(--f2);color:var(--mute);font-size:14.5px}
footer .wrap{display:grid;gap:18px;grid-template-columns:auto 1fr;align-items:center}
footer img{width:60px;height:60px;border-radius:50%}
footer ul{list-style:none;display:flex;gap:6px 18px;flex-wrap:wrap;margin:8px 0 0;padding:0}
footer a{color:var(--mute)}
@media(prefers-reduced-motion:no-preference){.seal img{animation:glow 8s ease-in-out infinite}@keyframes glow{50%{box-shadow:0 0 0 1px #4a64a8,0 0 80px rgba(42,86,198,.5),0 24px 70px rgba(0,0,0,.65)}}}
@media print{body{background:#fff;color:#000}.bar,.cta,.skip{display:none}a{color:#000}}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprite{position:absolute}
.card span.ic{display:block;font-size:46px;color:var(--gold);margin:0 0 12px;line-height:1}
.prose caption{caption-side:top}

.tablewrap table:not(.kv){min-width:640px}

/* Living background: a faint dot grid that drifts, with a few gold dots that softly pulse. CSS only: no script, no canvas, no tracking. Still when the visitor prefers reduced motion. */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero .wrap{position:relative;z-index:1}
.hero:before,.hero:after{content:"";position:absolute;inset:-60px;z-index:0;pointer-events:none}
.hero:before{background-image:radial-gradient(circle,rgba(103,229,190,.6) 1px,transparent 1.7px);background-size:28px 28px;opacity:.3;-webkit-mask-image:radial-gradient(70% 90% at 74% 40%,#000 8%,transparent 74%);mask-image:radial-gradient(70% 90% at 74% 40%,#000 8%,transparent 74%)}
.hero:after{background-image:radial-gradient(circle,rgba(241,214,138,.9) 1px,transparent 1.8px);background-size:84px 84px;background-position:14px 14px;opacity:.05;-webkit-mask-image:radial-gradient(45% 65% at 74% 40%,#000,transparent 72%);mask-image:radial-gradient(45% 65% at 74% 40%,#000,transparent 72%)}
@media(prefers-reduced-motion:no-preference){
  .hero:before{animation:dotdrift 70s linear infinite}
  .hero:after{animation:dotpulse 8s ease-in-out infinite}
}
@keyframes dotdrift{to{transform:translate3d(-28px,-28px,0)}}
@keyframes dotpulse{50%{opacity:.6}}
@media(max-width:860px){.hero:before,.hero:after{-webkit-mask-image:radial-gradient(90% 60% at 50% 22%,#000 8%,transparent 74%);mask-image:radial-gradient(90% 60% at 50% 22%,#000 8%,transparent 74%)}}

/* Aurora borealis: soft, snaking ribbons of light that undulate and slide past each other, like the real thing (deliberately blurry, not crisp).
   Blue lives in the left half and green in the right half, each clipped inside its own fixed box with a dark strip between, so they can glow at the same time but can never touch or mix.
   Each runs on its own timing (26 s and 34 s), so sometimes both glow, sometimes one rests, and they drift in and out of step.
   The softness is baked into two small image files, so the browser does no live blurring. CSS transforms and opacity only: no script, no canvas, no tracking. For visitors who prefer reduced motion nothing moves. */
.aurora{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.5}
.aurora .half{position:absolute;top:0;bottom:0;width:47%;overflow:hidden}
.aurora .hl{left:0;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 55%,transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 55%,transparent 100%)}
.aurora .hr{right:0;-webkit-mask-image:linear-gradient(270deg,#000 0,#000 55%,transparent 100%);mask-image:linear-gradient(270deg,#000 0,#000 55%,transparent 100%)}
.aurora .cur{position:absolute;left:-12%;right:-12%;top:0;height:min(100%,520px);opacity:.001;transform-origin:50% 100%;will-change:transform,opacity}
.aurora .cur i{position:absolute;display:block;top:0;bottom:0;left:0;width:calc(100% + 1500px);background-repeat:repeat-x;will-change:transform,opacity}
.aurora .cb i{background-image:url(/assets/aurora-blue.svg?v=4878f675)}
.aurora .cg i{background-image:url(/assets/aurora-green.svg?v=73df9728)}
.aurora .cur i:nth-child(1){background-size:800px 100%;background-position:0 0}
.aurora .cur i:nth-child(2){background-size:1100px 118%;background-position:0 -8%;width:calc(100% + 1900px)}
.aurora .cb{opacity:.85}.aurora .cg{opacity:.75}
@media(prefers-reduced-motion:no-preference){
  .aurora .cb,.aurora .cg{opacity:.001}
  .aurora .cb{animation:auroraBlue 26s ease-in-out infinite}
  .aurora .cg{animation:auroraGreen 34s ease-in-out infinite}
  .aurora .cur i:nth-child(1){animation:slideA 38s linear infinite,flick 7s ease-in-out infinite alternate}
  .aurora .cur i:nth-child(2){animation:slideB 56s linear infinite,flick 11s ease-in-out infinite alternate-reverse}
}
@keyframes slideA{to{transform:translate3d(-800px,0,0)}}
@keyframes slideB{from{transform:translate3d(-1100px,0,0)}to{transform:translate3d(0,0,0)}}
@keyframes flick{from{opacity:.55}to{opacity:1}}
@keyframes auroraBlue{
  0%{opacity:.001;transform:translate3d(-2%,0,0) skewX(-4deg) scaleY(.9)}
  12%{opacity:.7;transform:translate3d(0,0,0) skewX(3deg) scaleY(1)}
  25%{opacity:1;transform:translate3d(2%,0,0) skewX(-3deg) scaleY(1.08)}
  38%{opacity:.7;transform:translate3d(0,0,0) skewX(4deg) scaleY(1)}
  50%{opacity:.001;transform:translate3d(-2%,0,0) skewX(-3deg) scaleY(.9)}
  62%{opacity:.5;transform:translate3d(1%,0,0) skewX(3deg) scaleY(1)}
  75%{opacity:.9;transform:translate3d(2%,0,0) skewX(-4deg) scaleY(1.06)}
  88%{opacity:.4;transform:translate3d(0,0,0) skewX(2deg) scaleY(.98)}
  100%{opacity:.001;transform:translate3d(-2%,0,0) skewX(-4deg) scaleY(.9)}}
@keyframes auroraGreen{
  0%{opacity:.4;transform:translate3d(1%,0,0) skewX(3deg) scaleY(1)}
  15%{opacity:.9;transform:translate3d(-1%,0,0) skewX(-4deg) scaleY(1.06)}
  30%{opacity:.3;transform:translate3d(-2%,0,0) skewX(2deg) scaleY(.96)}
  45%{opacity:.001;transform:translate3d(1%,0,0) skewX(-3deg) scaleY(.9)}
  60%{opacity:.001;transform:translate3d(2%,0,0) skewX(4deg) scaleY(.9)}
  72%{opacity:.8;transform:translate3d(0,0,0) skewX(-3deg) scaleY(1)}
  85%{opacity:1;transform:translate3d(-2%,0,0) skewX(4deg) scaleY(1.08)}
  100%{opacity:.4;transform:translate3d(1%,0,0) skewX(3deg) scaleY(1)}}
/* hero text that can sit on the glows is brighter so contrast holds in the worst overlap */
.hero .ids{color:#cdd6d1}.hero .eyebrow{color:#8ff0d0}

/* Calm zone behind the hero text: the waves stay vivid everywhere else, the words always sit on a dark, readable panel. */
.hero .wrap>div:first-child{position:relative}
.hero .wrap>div:first-child:before{content:"";position:absolute;inset:-6px -16px;z-index:-1;border-radius:24px;background:rgba(5,7,6,.58);box-shadow:0 0 36px 28px rgba(5,7,6,.58);pointer-events:none}

.prose .timeline{list-style:none;padding:0;margin:14px 0}.prose .timeline li{border-left:3px solid var(--gold);padding:4px 0 14px 18px;margin:0;position:relative}.prose .timeline li b{color:var(--gold2)}

.prose .founder{float:right;margin:4px 0 14px 24px;width:220px;text-align:center}.prose .founder img{width:220px;height:220px;border-radius:50%;border:2px solid var(--gold);display:block;background:#050706}.prose .founder figcaption{font-size:14px;color:#9fb0a6;margin-top:8px}@media(max-width:600px){.prose .founder{float:none;margin:6px auto 18px}}
.prose h2{clear:both}.prose h2:first-child{clear:none}

.exhibit{margin:18px 0}.exhibit img{display:block;width:100%;height:auto;border:1px solid var(--lineg);border-radius:12px;background:#050706}.exhibit figcaption{font-size:14px;color:#9fb0a6;margin-top:8px}

.hero.home{min-height:calc(100svh - 76px);display:flex;align-items:center;padding:36px 0 44px}.hero.home .wrap{width:100%}
.btn.enter{font-size:18px;padding:15px 28px;margin-top:6px}.btn.enter .i{width:1.25em;height:1.25em;margin-left:4px}
.fine-home{font-size:13.5px;color:var(--mute);margin:18px 0 0}
@media(max-width:860px){.hero.home{align-items:flex-start;padding:20px 0 28px}.hero.home .seal{max-width:176px}.hero.home .wrap{gap:20px}.hero.home .lead{font-size:17px;margin-bottom:20px}.hero.home h1{margin-bottom:12px}}

.bar .wrap{position:relative;flex-wrap:nowrap}
.bar .menu{margin-left:auto}
.bar .menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:99px;border:1px solid var(--line);background:var(--f1);color:var(--gold2);font-size:15px;font-weight:600;user-select:none}
.bar .menu summary::-webkit-details-marker{display:none}
.bar .menu summary:hover,.bar .menu[open] summary{background:var(--f2)}
.bar .menu summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.bar .menu .mi{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.bar .menu nav{position:absolute;right:0;top:calc(100% + 8px);min-width:240px;margin:0;order:0;flex:none;overflow:visible;background:#070b09;border:1px solid var(--line);border-radius:16px;padding:8px;box-shadow:0 18px 50px rgba(0,0,0,.6);z-index:30}
.bar .menu nav ul{display:block}
.bar .menu nav a{padding:13px 16px;font-size:16px}
@media(max-width:860px){.bar .wrap{padding-left:16px;padding-right:16px}.bar .menu nav{left:12px;right:12px;min-width:0}}

/* reading pages: clearer hierarchy and colour */
.prose h2{color:var(--gold2);position:relative;padding-top:18px;margin-top:44px}
.prose h2:before{content:"";position:absolute;top:0;left:0;width:44px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--gold),rgba(212,175,55,0))}
.prose h2:first-child{margin-top:8px}
.prose p,.prose li{color:#e0e9e3;font-size:17.5px;line-height:1.72}
.prose b,.prose strong{color:#f3e7b3;font-weight:650}
.prose a{color:#8ff0d0;text-underline-offset:3px}.prose a:hover{color:#c9fbe9}
.prose .lead-p{font-size:21px;line-height:1.6;color:#f2f6f3}
.prose .callout{border-left:4px solid var(--gold);background:linear-gradient(90deg,rgba(212,175,55,.13),rgba(212,175,55,0));padding:18px 22px;border-radius:0 16px 16px 0;font-size:19.5px;line-height:1.6;color:#f6f1de;margin:22px 0}
.prose .callout b{color:var(--gold2);font-size:1.05em}
.prose .roles{list-style:none;padding:0;margin:14px 0 18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px}
.prose .roles li{margin:0;padding:15px 18px;border:1px solid var(--lineg);border-radius:14px;background:linear-gradient(160deg,rgba(19,38,29,.9),rgba(10,17,13,.9));font-size:16px;line-height:1.55}
.prose .roles li b{display:block;color:var(--gold2);font:700 21px var(--serif);margin:0 0 4px;letter-spacing:.02em}
.prose .roles li.proof{grid-column:1/-1;border-color:rgba(143,240,208,.4)}
.prose .roles li.proof b{color:#8ff0d0}
.prose .note-box{border:1px solid var(--lineg);background:rgba(13,27,21,.72);border-radius:14px;padding:18px 22px;color:#dbe5df}
.bar .menu nav a{color:#dbe5df}
@media(max-width:600px){.prose .lead-p{font-size:19.5px}.prose p,.prose li{font-size:17px}}

/* one button language: soft gradient, inner light, gentle glow; glass for secondary */
.btn{border-radius:999px;border:1px solid rgba(255,230,150,.55);background:linear-gradient(180deg,#f3d373 0%,#d9ae2c 52%,#b98b16 100%);color:#1a1200;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 8px rgba(110,70,0,.35),0 10px 28px rgba(212,170,40,.26),0 2px 6px rgba(0,0,0,.55);transition:transform .22s ease,box-shadow .28s ease,filter .28s ease;text-shadow:0 1px 0 rgba(255,255,255,.28)}
.btn:hover{background:linear-gradient(180deg,#f8dd85 0%,#e2b83a 52%,#c4951c 100%);color:#1a1200;transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -3px 8px rgba(110,70,0,.3),0 14px 38px rgba(212,170,40,.42),0 2px 6px rgba(0,0,0,.55)}
.btn:active{transform:translateY(0);filter:brightness(.97)}
.btn:focus-visible{outline:2px solid #fff3c4;outline-offset:3px}
.btn.ghost{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.02));color:var(--gold2);border:1px solid rgba(241,214,138,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 22px rgba(0,0,0,.4);text-shadow:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn.ghost:hover{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));color:#fff;border-color:rgba(241,214,138,.65)}
.btn.enter{padding:17px 34px;font-size:19px;letter-spacing:.01em;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -4px 10px rgba(110,70,0,.38),0 14px 44px rgba(212,170,40,.38),0 0 0 6px rgba(212,170,40,.08),0 2px 6px rgba(0,0,0,.55)}
.btn.enter .i{transition:transform .25s ease}.btn.enter:hover .i{transform:translateX(5px)}
.bar .menu summary{border:1px solid rgba(241,214,138,.4);background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.025));box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 20px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--gold2)}
.bar .menu summary:hover,.bar .menu[open] summary{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05))}
.bar .menu nav{background:linear-gradient(180deg,rgba(14,24,19,.96),rgba(6,10,8,.97));border:1px solid rgba(241,214,138,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 22px 60px rgba(0,0,0,.7)}
.bar .menu nav a:hover{background:linear-gradient(90deg,rgba(212,175,55,.16),rgba(212,175,55,.02));color:var(--gold2)}
/* emphasis colours, same everywhere: gold = key term / action, teal = evidence and links, white = reading text */
h1 em{background:linear-gradient(180deg,#f6dc84,#cf9f20);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:normal}
.kicker,.eyebrow{text-shadow:0 0 18px rgba(143,240,208,.25)}
.card h3,.card .tg{color:var(--gold2)}

/* home: seal beside the text, one centred glowing entry phrase underneath */
.hero.home .wrap{grid-template-columns:1.15fr .85fr;grid-template-areas:"text seal" "enter enter";row-gap:40px}
.hero.home .home-text{grid-area:text}.hero.home .seal{grid-area:seal}
.hero.home .enter-row{grid-area:enter;text-align:center}
.hero.home .enter-row .fine-home{margin:20px 0 0}
@media(max-width:860px){.hero.home .wrap{grid-template-columns:1fr;grid-template-areas:"seal" "text" "enter";row-gap:22px}.hero.home .seal{order:0;margin:0 auto}.hero.home .home-text{text-align:left}}
@keyframes enterGlow{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -4px 10px rgba(110,70,0,.38),0 12px 38px rgba(212,170,40,.30),0 0 0 6px rgba(212,170,40,.06),0 2px 6px rgba(0,0,0,.55)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -4px 10px rgba(110,70,0,.34),0 16px 56px rgba(240,200,70,.55),0 0 0 12px rgba(212,170,40,.10),0 2px 6px rgba(0,0,0,.55)}}
@media(prefers-reduced-motion:no-preference){.btn.enter{animation:enterGlow 3.4s ease-in-out infinite}.btn.enter:hover{animation:none;transform:translateY(-2px) scale(1.03)}.btn.enter .i{animation:nudge 3.4s ease-in-out infinite}@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}}
/* one-screen home: the aurora is the stage, so no dark panel muting it behind the text */
.hero.home .wrap>div:first-child:before{content:none}

.hero.home h1,.hero.home .lead{text-shadow:0 1px 14px rgba(0,0,0,.55)}

/* the aurora runs through the whole site: fixed behind every page, strongest on the home, calmer under reading text */
body>.aurora{position:fixed;inset:0;z-index:0;opacity:.92}
body.inner>.aurora{opacity:.45}
body>.aurora .cur{height:min(100%,520px)}
.bar,main,footer{position:relative;z-index:1}
.bar{z-index:10}

/* findings from the blind reviews: defined terms, balanced cards, numbered steps */
.gloss{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px 22px;margin:18px 0 26px}
.gloss>div{border-left:3px solid var(--gold);padding:3px 0 3px 14px}
.gloss dt{color:var(--gold2);font:700 19px var(--serif);margin:0}
.gloss dd{margin:2px 0 0;color:#dbe5df;font-size:15.5px;line-height:1.5}
@media(min-width:760px){.grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.flow.steps{counter-reset:st;gap:12px 14px}
.flow.steps li{counter-increment:st;display:flex;align-items:baseline;gap:10px}
.flow.steps li+li:before{content:none}
.flow.steps li:before{content:counter(st);display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(180deg,#f0cf6a,#b98b16);color:#1a1200;font:700 14px var(--sans);margin:0;flex:none}

/* Approach: one list of parts, each introduced once */
.parts{margin:18px 0 28px}
.parts section{border-left:3px solid var(--gold);padding:2px 0 2px 20px;margin:0 0 26px}
.parts h3{margin:0;color:var(--gold2);font:700 25px var(--serif);letter-spacing:.01em}
.parts .line{margin:3px 0 8px;color:#f2f6f3;font-size:18.5px;line-height:1.5}
.parts p:not(.line){margin:0;color:#d9e4dd;font-size:17px;line-height:1.7}
/* soft bottom: the ribbon image ended in a straight cut while still bright; fade it into the dark instead */
.aurora .cur{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 38%,rgba(0,0,0,.55) 66%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(180deg,#000 0,#000 38%,rgba(0,0,0,.55) 66%,rgba(0,0,0,0) 100%)}