
:root{
  color-scheme:light;
  --white:#FFFFFF;
  --paper:#F4F5F6;
  --ink:#12181D;
  --ink-2:#4A555E;
  --ink-3:#5F6B74;
  --line:#E1E4E6;
  --orange:#F4581F;        /* display only: large type, rules, marks */
  --orange-text:#C63E0C;   /* small text and fills behind white type */
  --step-0:1.05rem; --step-1:1.18rem;
  --pad:clamp(1.1rem,4.5vw,3.25rem);
  --maxw:1180px;
}
*{box-sizing:border-box}
body{margin:0; background:var(--white); color:var(--ink);
  font-family:"Manrope","Helvetica Neue",Arial,sans-serif;
  font-size:var(--step-0); line-height:1.62; font-weight:500; -webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad)}
h1,h2,h3{font-family:"Anton","Haettenschweiler","Arial Narrow",Arial,sans-serif;
  font-weight:400; margin:0; line-height:1.03; letter-spacing:.004em; text-wrap:balance}
p{margin:0}
a{color:var(--orange-text); text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--orange); outline-offset:3px; border-radius:4px}
.num{font-variant-numeric:tabular-nums}
section{scroll-margin-top:5rem}
header{scroll-margin-top:5rem}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.band-grey{background:var(--paper)}
.band-white{background:var(--white)}

/* tags */
.chip{display:inline-flex; align-items:center; font-size:.68rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; line-height:1; padding:.42rem .7rem;
  border-radius:3px; background:var(--orange-text); color:var(--white); white-space:nowrap}
.chip-out{background:transparent; color:var(--ink-2); border:1px solid var(--line)}
.chip-glow,.chip-surf,.chip-flare{background:var(--orange-text); color:var(--white)}

/* nav */
.nav{position:sticky; top:0; z-index:30; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; gap:1.4rem; min-height:64px; flex-wrap:wrap; padding-block:.5rem}
.brand{font-family:"Anton",Arial,sans-serif; font-size:1.15rem; letter-spacing:.01em; color:var(--ink);
  text-decoration:none; margin-right:auto; display:flex; align-items:center; gap:.55rem; text-transform:uppercase}
.brand span{width:10px; height:10px; background:var(--orange); flex:none}
.navlink{font-size:.82rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); text-decoration:none}
.navlink:hover{color:var(--orange-text)}

/* hero: full photo, text over */
.hero{position:relative; min-height:min(78vh,660px); display:flex; align-items:flex-end; overflow:hidden; background:var(--ink)}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.62}
.hero::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(18,24,29,.55) 0%, rgba(18,24,29,.25) 40%, rgba(18,24,29,.88) 100%)}
.hero-in{position:relative; z-index:2; padding-block:clamp(3rem,10vw,5.5rem); color:var(--white); width:100%}
.kicker{font-size:.76rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--orange); margin-bottom:1.1rem}
h1{font-size:clamp(2.6rem,7.6vw,5.2rem); max-width:16ch; color:var(--white); text-transform:none}
.rot{display:inline-grid; color:var(--orange); vertical-align:top}
.rot i{grid-area:1/1; font-style:normal; opacity:0; animation:cycle 14s infinite}
.rot i:nth-child(1){animation-delay:0s} .rot i:nth-child(2){animation-delay:3.5s}
.rot i:nth-child(3){animation-delay:7s} .rot i:nth-child(4){animation-delay:10.5s}
@keyframes cycle{0%{opacity:0;transform:translateY(.18em)}3%{opacity:1;transform:none}22%{opacity:1;transform:none}26%{opacity:0;transform:translateY(-.14em)}100%{opacity:0}}
.hero-sub{margin-top:1.6rem; max-width:56ch; font-size:clamp(1.02rem,2.2vw,1.2rem); color:#E4E9EC; font-weight:500}
.cta-row{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.1rem}
.btn{display:inline-block; font-weight:800; font-size:.86rem; letter-spacing:.1em; text-transform:uppercase;
  padding:1rem 1.8rem; border-radius:3px; text-decoration:none; border:2px solid transparent; transition:.15s}
.btn-main{background:var(--orange-text); color:var(--white)}
.btn-main:hover{background:var(--white); color:var(--ink)}
.btn-ghost{border-color:rgba(255,255,255,.7); color:var(--white)}
.btn-ghost:hover{background:var(--white); color:var(--ink); border-color:var(--white)}

/* stats strip */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(245px,1fr)); gap:0; border-top:1px solid var(--line)}
.stat{padding:1.9rem 1.4rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
.stat b{display:block; font-family:"Anton",Arial,sans-serif; font-size:clamp(2.1rem,5vw,2.9rem); line-height:1; color:var(--orange); font-variant-numeric:tabular-nums}
.stat small{display:block; margin-top:.6rem; font-size:.82rem; font-weight:600; color:var(--ink-2); line-height:1.5}
.stat i{display:block; margin-top:.5rem; font-style:normal; font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}

/* ticker */
.ticker{position:relative; background:var(--ink); color:var(--white); overflow:hidden}
.motion-toggle{position:absolute; right:.5rem; top:50%; transform:translateY(-50%); z-index:3;
  font:inherit; font-size:.64rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  background:var(--white); color:var(--ink); border:0; border-radius:3px; padding:.35rem .6rem; cursor:pointer}
.motion-toggle:hover{background:var(--orange-text); color:var(--white)}
body.motion-off .ticker-track,body.motion-off .rot i{animation-play-state:paused}
.ticker-track{display:flex; width:max-content; animation:slide 42s linear infinite}
.ticker-track span{font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; padding:.85rem .9rem; white-space:nowrap}
@keyframes slide{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* sections */
.sec{padding-block:clamp(3.25rem,7.5vw,5.25rem)}
.sec-head{max-width:58ch; margin-bottom:2.6rem; display:grid; gap:.9rem}
.sec-head h2{font-size:clamp(2rem,5.4vw,3.1rem); text-transform:uppercase}
.sec-head h2 em{font-style:normal; color:var(--orange)}
.sec-head p{color:var(--ink-2); font-size:var(--step-1)}
.eyebrow{font-size:.72rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--orange-text)}

/* cards */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:2rem 1.75rem}
.card{background:transparent; display:flex; flex-direction:column; gap:.65rem}
.card .badges{margin:0; gap:.4rem; display:flex; flex-wrap:wrap}
.card h3{font-size:1.35rem; line-height:1.08; text-transform:uppercase}
.card p{color:var(--ink-2); font-size:.95rem}
.card .where{font-size:.82rem; font-weight:600; color:var(--ink-3); line-height:1.5}
.card a.go{margin-top:auto; padding-top:.5rem; font-weight:800; font-size:.76rem; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none; color:var(--orange-text)}
.card a.go:hover{color:var(--ink)}
.card-img{position:relative; overflow:hidden; aspect-ratio:4/3; margin-bottom:.5rem; line-height:0; background:var(--paper)}
.card-img img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .4s ease}
.card:hover .card-img img{transform:scale(1.04)}

/* art */
.art{position:relative; overflow:hidden; line-height:0; aspect-ratio:13/7.5}
.art img,.art svg{display:block; width:100%; height:100%; object-fit:cover}
.aicred{position:absolute; right:.5rem; bottom:.5rem; z-index:2; font-size:.58rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; line-height:1; color:var(--white);
  background:rgba(18,24,29,.72); border-radius:3px; padding:.32rem .5rem}
.split{display:grid; gap:2rem; align-items:start}
@media (min-width:900px){ .split{grid-template-columns:1.05fr .95fr; gap:3rem} .split.flip>.art{order:-1} }
.split .sec-head{margin-bottom:1.5rem}
.caption{margin-top:.8rem; font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}

/* missing list */
.missing{display:grid; gap:0; margin-top:2rem; border-top:1px solid var(--line)}
.missing div{display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:start; padding:1.25rem 0; border-bottom:1px solid var(--line)}
.missing b{font-family:"Anton",Arial,sans-serif; font-size:1.1rem; color:var(--orange-text); line-height:1.3}
.missing p{color:var(--ink-2); font-size:.96rem}
.missing strong{color:var(--ink); font-weight:800}
.prose{max-width:62ch; color:var(--ink-2); font-size:var(--step-1); display:grid; gap:1.1rem}
.prose strong{color:var(--ink); font-weight:800}

/* mission band */
.pull{border-top:4px solid var(--orange); margin:0 0 2.25rem; padding-top:1.35rem; display:grid; gap:1rem}
.pull blockquote{margin:0; font-family:"Anton",Arial,sans-serif; font-size:clamp(1.55rem,4.2vw,2.6rem); line-height:1.12; text-transform:uppercase; color:var(--ink); max-width:26ch}
.pull blockquote em{font-style:normal; color:var(--orange)}
.pull .attrib{margin:0; font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.role .badges{display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.2rem}
.role p + p{margin-top:.85rem}
.role a.go{display:inline-block; margin-top:.7rem; font-weight:800; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; color:var(--orange-text)}
.role a.go:hover{color:var(--ink)}
.voice{background:var(--ink); color:var(--white)}
.voice .eyebrow{color:var(--orange)}
.voice-line{font-family:"Anton",Arial,sans-serif; font-size:clamp(2rem,6.2vw,4rem); line-height:1.06;
  margin-block:1.3rem 1.2rem; max-width:20ch; text-transform:uppercase; color:var(--white)}
.voice-line em{font-style:normal; color:var(--orange)}
.voice-by{font-size:.76rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#9AA6AE}
.voice-note{margin-top:1.5rem; color:#C7D0D6; max-width:58ch; font-size:var(--step-1)}
.voice-grid{display:grid; gap:2.5rem; align-items:center}
@media (min-width:900px){ .voice-grid{grid-template-columns:1.1fr .9fr; gap:3.5rem} .voice-fig{justify-self:end} }
.voice-bio{margin-top:1.5rem; color:#C7D0D6; max-width:58ch; font-size:var(--step-1); display:grid; gap:1rem}
.voice-bio strong{color:var(--white); font-weight:800}
.voice-facts{margin:2rem 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:0 1.5rem; border-top:1px solid #2C363E}
.voice-facts div{padding:1rem 0; border-bottom:1px solid #2C363E}
.voice-facts dt{font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--orange)}
.voice-facts dd{margin:.4rem 0 0; font-size:.9rem; font-weight:600; color:#E4E9EC; line-height:1.5}
.voice .cta-row{margin-top:2rem}
.voice-fig{margin:0; width:100%; max-width:440px}
.voice-fig .art{aspect-ratio:4/5; border-top:4px solid var(--orange); background:#1C242B}
.voice .caption{color:#9AA6AE}

/* roles + form */
.roles{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:2rem 1.75rem; margin-bottom:3.25rem}
.roles .role{border-top:4px solid var(--orange); padding-top:1.2rem}
.stat:last-child{border-right:0}
#missing .split{align-items:center}
.role h3{font-size:1.3rem; margin-block:.8rem .55rem; text-transform:uppercase}
.role p{color:var(--ink-2); font-size:.95rem}
form{display:grid; gap:1.05rem; max-width:33rem}
.field{display:grid; gap:.45rem}
label{font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2)}
input,select,textarea{font:inherit; font-size:1rem; font-weight:500; color:var(--ink); background:var(--white);
  border:1px solid var(--line); border-radius:3px; padding:.85rem .9rem; width:100%}
textarea{min-height:6.5rem; resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--orange); outline-offset:2px; border-color:var(--orange)}
button{font:inherit; font-weight:800; font-size:.86rem; letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
  background:var(--orange-text); color:var(--white); border:2px solid var(--orange-text); border-radius:3px;
  padding:1rem 1.9rem; justify-self:start; transition:.15s}
button:hover{background:var(--ink); border-color:var(--ink)}
.hint,.form-note{font-size:.85rem; color:var(--ink-3)}

/* about */
.about-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:2.25rem 2.5rem}
.about-grid h3{font-size:1.05rem; text-transform:uppercase; letter-spacing:.02em; margin-bottom:.7rem; padding-bottom:.7rem; border-bottom:2px solid var(--orange)}
.about-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.about-grid p{color:var(--ink-2); font-size:.95rem}
.about-grid p+p{margin-top:.75rem}
.about-grid strong{color:var(--ink); font-weight:800}
.srcs{list-style:none; margin:0; padding:0}
.srcs li{font-size:.95rem; line-height:1.9}
.acknow{margin-top:2.75rem; padding-top:1.5rem; border-top:1px solid var(--line); max-width:74ch; font-size:.92rem; color:var(--ink-2); line-height:1.8}

/* footer */
footer{background:var(--ink); color:#C7D0D6; padding-block:2.25rem}
.foot-in{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2rem}
.foot-brand{color:var(--white); font-size:1.05rem; margin-right:auto}
.foot-nav{display:flex; flex-wrap:wrap; gap:.35rem 1.5rem}
.foot-nav a{font-size:.78rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#C7D0D6; text-decoration:none}
.foot-nav a:hover{color:var(--orange)}
.foot-contact{flex-basis:100%; font-size:.84rem; color:#8E9AA3; padding-top:1.25rem; border-top:1px solid #2C363E}
footer a{color:var(--white)} footer a:hover{color:var(--orange)}

@media (max-width:560px){
  .nav{position:static}
  .brand{width:100%; margin-right:0}
  .nav-in{gap:.7rem 1.1rem}
  .stat{border-right:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  .ticker-track{width:100%; overflow-x:auto}
  .rot i{opacity:1; animation:none} .rot i:not(:first-child){display:none}
}

/* the format */
.segs{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2rem 1.75rem; margin-top:2.75rem}
.seg{border-top:4px solid var(--orange); padding-top:1.2rem}
.seg b{display:block; font-family:"Anton",Arial,sans-serif; font-size:.95rem; letter-spacing:.1em; color:var(--orange-text); text-transform:uppercase}
.seg h3{font-size:1.25rem; margin-block:.55rem .5rem; text-transform:uppercase}
.seg p{color:var(--ink-2); font-size:.95rem}

/* people */
.people{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:2.4rem 1.75rem}
.person{display:flex; flex-direction:column; gap:.7rem}
.face{position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--paper); line-height:0}
.face img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .4s ease}
.person:hover .face img{transform:scale(1.04)}
.face.mono{background:var(--ink); display:grid; place-items:center}
.face.mono span{font-family:"Anton",Arial,sans-serif; font-size:clamp(3rem,7vw,4.4rem); line-height:1; color:var(--orange)}
.face.mono::after{content:""; position:absolute; left:0; right:0; bottom:0; height:6px; background:var(--orange)}
.person h3{font-size:1.2rem; text-transform:uppercase; line-height:1.1}
.person .role{font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--orange-text)}
.person p{color:var(--ink-2); font-size:.92rem; line-height:1.6}
.person .note{font-size:.78rem; color:var(--ink-3); font-weight:600}

/* callout */
.callout{background:var(--ink); color:var(--white)}
.callout .eyebrow{color:var(--orange)}
.callout h2{color:var(--white); font-size:clamp(1.9rem,5vw,2.9rem); text-transform:uppercase; margin-block:1rem .4rem; max-width:20ch}
.callout h2 em{font-style:normal; color:var(--orange)}
.callout p{color:#C7D0D6; max-width:56ch; font-size:var(--step-1); margin-top:1rem}
.cta-row{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.1rem}
.btn{display:inline-block; font-weight:800; font-size:.86rem; letter-spacing:.1em; text-transform:uppercase;
  padding:1rem 1.8rem; border-radius:3px; text-decoration:none; border:2px solid transparent; transition:.15s}
.btn-main{background:var(--orange-text); color:var(--white)}
.btn-main:hover{background:var(--white); color:var(--ink)}
.btn-ghost{border-color:rgba(255,255,255,.7); color:var(--white)}
.btn-ghost:hover{background:var(--white); color:var(--ink); border-color:var(--white)}


/* ---------- multi-page additions ---------- */
.navlink[aria-current="page"]{color:var(--orange-text); border-bottom:2px solid var(--orange); padding-bottom:2px}
h1 em{font-style:normal; color:var(--orange)}
.hero-cap{margin-top:1.6rem; font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#9AA6AE}

/* compact page header used on interior pages */
.pagehead{min-height:min(52vh,430px)}
.pagehead h1{font-size:clamp(2.2rem,6.4vw,4.2rem); max-width:18ch}
.pagehead .hero-in{padding-block:clamp(2.5rem,7vw,4rem)}

/* home page teasers */
.teaser .card-img{aspect-ratio:16/10}
.teaser h3 a{color:var(--ink); text-decoration:none}
.teaser h3 a:hover{color:var(--orange-text)}
.teaser h3 a::after{content:""; position:absolute; inset:0}
.teaser{position:relative}

/* dark call-to-action band */
.callout{background:var(--ink); color:var(--white)}
.callout .eyebrow{color:var(--orange)}
.callout h2{color:var(--white); font-size:clamp(1.9rem,5vw,2.9rem); text-transform:uppercase; margin-block:1rem .4rem; max-width:22ch}
.callout h2 em{font-style:normal; color:var(--orange)}
.callout p{color:#C7D0D6; max-width:56ch; font-size:var(--step-1); margin-top:1rem}

/* next-page strip */
.nextup{display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; padding-block:2rem; border-top:1px solid var(--line)}
.nextup b{font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-right:.5rem}
.nextup a{font-weight:800; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; color:var(--orange-text);
  border:1px solid var(--line); border-radius:3px; padding:.6rem .9rem}
.nextup a:hover{background:var(--ink); color:var(--white); border-color:var(--ink)}

.pagehead.plain{background:var(--ink); min-height:0}
.pagehead.plain::after{display:none}
.pagehead.plain .hero-in{padding-block:clamp(3rem,8vw,4.75rem)}
.teasers{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:2rem 1.75rem}
.teaser-card{border-top:4px solid var(--orange); padding-top:1.2rem; position:relative; display:flex; flex-direction:column; gap:.55rem}
.teaser-card h3{font-size:1.3rem; text-transform:uppercase; margin-top:.35rem}
.teaser-card h3 a{color:var(--ink); text-decoration:none}
.teaser-card h3 a::after{content:""; position:absolute; inset:0}
.teaser-card:hover h3 a{color:var(--orange-text)}
.teaser-card p{color:var(--ink-2); font-size:.95rem}
.teaser-card .go{margin-top:auto; padding-top:.6rem; font-weight:800; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--orange-text)}
.voice-slim .voice-line{margin-block:1.1rem .9rem}

.teaser-card .eyebrow{color:var(--orange-text); font-size:.72rem; letter-spacing:.18em}
.narrow{max-width:78ch}

/* ---------- pre-launch review fixes ---------- */
.skip{position:absolute; left:-9999px; top:.5rem; z-index:40; background:var(--ink); color:var(--white);
  padding:.7rem 1.1rem; border-radius:3px; font-weight:800; font-size:.8rem; letter-spacing:.08em;
  text-transform:uppercase; text-decoration:none}
.skip:focus{left:.5rem}
/* headings promoted from h3 to h2 keep the card/role/column look */
.card h2{font-size:1.35rem; line-height:1.08; text-transform:uppercase}
.role h2{font-size:1.3rem; margin-block:.8rem .55rem; text-transform:uppercase}
.about-grid h2{font-size:1.05rem; text-transform:uppercase; letter-spacing:.02em; margin-bottom:.7rem;
  padding-bottom:.7rem; border-bottom:2px solid var(--orange)}
/* eight nav links need more room than a phone breakpoint allows */
@media (max-width:1023px){
  .nav{position:static}
  .brand{width:100%; margin-right:0}
  .nav-in{gap:.7rem 1.1rem}
}
.motion-toggle{font-size:.72rem; padding:.5rem .7rem}
@media (prefers-reduced-motion:reduce){ .motion-toggle{display:none} }

.teaser-card h2{font-size:1.3rem; text-transform:uppercase; margin-top:.35rem}
.teaser-card h2 a{color:var(--ink); text-decoration:none}
.teaser-card h2 a::after{content:""; position:absolute; inset:0}
.teaser-card:hover h2 a{color:var(--orange-text)}

.foot-note{flex-basis:100%; font-size:.88rem; color:#C7D0D6; line-height:1.7; max-width:74ch;
  padding-top:1.25rem; border-top:1px solid #2C363E}
.foot-note a{color:var(--white)}
.foot-contact{border-top:0; padding-top:.55rem}
