
:root{
  --ocean:#0d2931;
  --deep:#07191e;
  --lime:#b9d638;
  --fog:#eef1ec;
  --white:#fafbf7;
  --steel:#89a4a9;
  --ink:#14252a;
  --muted:#65757a;
  --line:rgba(20,37,42,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fog);color:var(--ink);font-family:"DM Sans",sans-serif;overflow-x:hidden}
img{display:block;width:100%;height:100%;object-fit:cover}
a{text-decoration:none;color:inherit}
button{font:inherit}
.header{
  height:76px;padding:0 2.5vw;display:grid;grid-template-columns:1fr .35fr 1fr auto;gap:2vw;align-items:center;
  background:var(--fog);border-bottom:1px solid var(--line);position:relative;z-index:50
}
.brand img{width:190px;height:auto}
.header-index{font:500 .55rem "IBM Plex Mono",monospace;color:#6f8084;letter-spacing:.16em}
.nav{display:flex;justify-content:center;gap:1.6rem;font:500 .6rem "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.12em}
.shop-cta{background:var(--ink);color:white;padding:.9rem 1.1rem;font:500 .58rem "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.11em;display:flex;gap:1.4rem}
.menu-btn{display:none;border:0;background:none;padding:9px}
.menu-btn span{display:block;width:27px;height:1px;background:var(--ink);margin:7px 0}

.hero{padding:1.2vw;background:var(--fog)}
.hero-grid{
  min-height:780px;display:grid;grid-template-columns:1.2fr .9fr .45fr;grid-template-rows:1fr .38fr;gap:1.2vw
}
.hero-copy{background:var(--ocean);color:white;padding:5vw;grid-row:1/3;display:flex;flex-direction:column;justify-content:center}
.serial,.micro,.section-no,.hero-spec span,.system-label span,.system-cards article>span,.photo-code,.story-mark,.zeus-head>span,.culture-index{
  font:500 .57rem "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.16em
}
.hero-copy h1,.problem h2,.system h2,.clean-copy h2,.ritual h2,.story h2,.zeus-note h2,.field-title h2,.culture h2,.horizon h2{
  font:400 clamp(4rem,6.7vw,7.6rem)/.86 "Archivo Black",sans-serif;letter-spacing:-.055em;margin:1.2rem 0 1.8rem;text-transform:uppercase
}
.hero-copy h1 em{font-style:normal;color:var(--lime)}
.hero-copy>p{max-width:570px;line-height:1.8;color:#becdce}
.hero-actions{margin-top:3rem;padding-top:1.2rem;border-top:1px solid #35515a;display:flex;justify-content:space-between;font:500 .57rem "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.11em}
.hero-actions a{color:var(--lime)}
.hero-image-main{margin:0;grid-column:2;grid-row:1/3}
.hero-image-detail{margin:0;grid-column:3;grid-row:1}
.hero-spec{grid-column:3;grid-row:2;background:var(--lime);padding:2vw;display:flex;flex-direction:column;justify-content:center}
.hero-spec strong{font:400 2.1rem "Archivo Black",sans-serif;margin:.7rem 0}
.hero-spec p{font-size:.75rem;margin:0}
.hero-badge{position:absolute;display:none}

.ticker{background:var(--lime);padding:.9rem 2vw;display:flex;gap:2rem;justify-content:center;align-items:center;font:500 .58rem "IBM Plex Mono",monospace;letter-spacing:.14em}
.ticker i{font-style:normal;font-size:.4rem}

.problem{padding:10vw 6vw;background:var(--white);display:grid;grid-template-columns:.3fr 1fr .6fr;gap:5vw}
.problem-title{display:flex;gap:1rem;align-items:flex-start}
.section-no{width:36px;height:36px;border:1px solid;border-radius:50%;display:grid;place-items:center}
.problem-title p{margin:.6rem 0;font:500 .57rem "IBM Plex Mono",monospace;letter-spacing:.15em}
.problem h2{font-size:clamp(3.7rem,5.3vw,6rem);margin:0}
.problem-copy{align-self:end}
.problem-copy p{line-height:1.85;color:var(--muted)}

.system{padding:9vw 5vw;background:var(--deep);color:white}
.system-top{display:grid;grid-template-columns:.2fr 1.2fr .4fr;gap:4vw;align-items:end;margin-bottom:5vw}
.section-no.invert{border-color:#52666c}
.system h2{font-size:clamp(3.8rem,5.5vw,6.2rem);margin:.8rem 0 0}
.micro.light{color:#9eb0b4}.micro.dark{color:#687b7f}
.system-label{border-top:1px solid #46585e;padding-top:1rem}
.system-label span{display:block;color:#819499}.system-label strong{font:400 1.4rem "Archivo Black",sans-serif}
.system-cards{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #3f5055}
.system-cards article{min-height:370px;padding:2rem 2rem 0 0;border-right:1px solid #3f5055;display:flex;flex-direction:column}
.system-cards article+article{padding-left:2rem}
.system-cards article:last-child{border-right:0}
.system-cards article>span{color:#71858a}
.system-cards h3{font:400 2rem "Archivo Black",sans-serif;text-transform:uppercase;margin:auto 0 1rem}
.system-cards p{font-size:.78rem;line-height:1.7;color:#a7b7ba}

.clean-split{display:grid;grid-template-columns:1.15fr .85fr;background:var(--fog);min-height:760px}
.clean-photo{position:relative;min-height:760px}
.photo-code{position:absolute;left:1rem;bottom:1rem;background:var(--fog);padding:.6rem .8rem}
.clean-copy{padding:7vw 6vw;display:flex;flex-direction:column;justify-content:center}
.clean-copy h2{font-size:clamp(3.6rem,5vw,5.8rem)}
.clean-copy>p:not(.micro){line-height:1.85;color:var(--muted)}
.use-list{margin-top:2.5rem;border-top:1px solid var(--ink)}
.use-list div{display:grid;grid-template-columns:50px 1fr;padding:1rem 0;border-bottom:1px solid var(--line)}
.use-list span{font:.57rem "IBM Plex Mono",monospace;color:#718085}
.use-list b{font-size:.82rem}

.ritual{padding:10vw 5vw;background:#dfe5df}
.ritual-header{display:grid;grid-template-columns:.18fr 1.1fr .45fr;gap:4vw;align-items:end;margin-bottom:4vw}
.ritual h2{font-size:clamp(3.6rem,5.3vw,6rem);margin:0}
.ritual-header p{color:var(--muted)}
.ritual-grid{display:grid;grid-template-columns:1.1fr .55fr .55fr;grid-template-rows:320px 260px;gap:1vw}
.step{background:var(--white);position:relative;overflow:hidden}
.step.big{grid-row:1/3}.step.big .step-image{height:70%}.step-copy{padding:2rem}
.step-copy span{font:.56rem "IBM Plex Mono",monospace;color:#7a888b}
.step-copy h3{font:400 2.1rem "Archivo Black",sans-serif;text-transform:uppercase;margin:.6rem 0}
.step-copy p{font-size:.75rem;line-height:1.6;color:#68777a}
.step.lime{background:var(--lime)}.step.dark{background:var(--ocean);color:white}.step.dark p{color:#adbec0}
.step.image-card img{position:absolute;inset:0}

.story{display:grid;grid-template-columns:.25fr .75fr 1fr;min-height:700px;background:var(--ocean);color:white}
.story-mark{padding:4vw 2vw;font-size:3.5rem;writing-mode:vertical-rl;color:#35525a}
.story-copy{padding:7vw 5vw;display:flex;flex-direction:column;justify-content:center}
.story h2{font-size:clamp(3.3rem,4.7vw,5.3rem)}
.story-copy>p:last-child{line-height:1.85;color:#b6c5c7}
.story-photo{min-height:700px}

.zeus-note{padding:9vw 6vw;background:var(--white);display:grid;grid-template-columns:.75fr .55fr .9fr;gap:5vw;align-items:center}
.zeus-head h2{font-size:clamp(3.4rem,4.8vw,5.5rem)}
.zeus-text p{line-height:1.9;color:var(--muted)}
.zeus-note figure{height:570px;margin:0}

.field-notes{padding:10vw 6vw;background:var(--fog)}
.field-title{display:grid;grid-template-columns:.2fr 1.4fr;gap:4vw;margin-bottom:5vw}
.field-title h2{font-size:clamp(3.5rem,5vw,5.8rem)}
.note-row{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.note-row article{min-height:260px;padding:2rem;border-right:1px solid var(--line)}
.note-row article:last-child{border-right:0}
.note-row span{font:.56rem "IBM Plex Mono",monospace}
.note-row h3{font:400 1.5rem "Archivo Black",sans-serif;text-transform:uppercase;margin:5rem 0 .7rem}
.note-row p{font-size:.75rem;line-height:1.6;color:var(--muted)}

.culture{padding:9vw 6vw;background:var(--lime);display:grid;grid-template-columns:.25fr 1.1fr .45fr;gap:5vw;align-items:end}
.culture-index{align-self:start}
.culture h2{font-size:clamp(3.6rem,5vw,5.8rem)}
.culture-copy>p:last-child{line-height:1.85;max-width:760px}
.signal{height:260px;display:flex;gap:8px;align-items:flex-end}
.signal span{width:18%;background:var(--ink)}
.signal span:nth-child(1){height:20%}.signal span:nth-child(2){height:48%}.signal span:nth-child(3){height:82%}.signal span:nth-child(4){height:58%}.signal span:nth-child(5){height:100%}

.horizon{height:720px;position:relative;color:white}
.horizon:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,16,20,.68),rgba(3,16,20,.08))}
.horizon-copy{position:absolute;z-index:2;left:6vw;bottom:6vw}
.horizon-copy>p{font:500 .58rem "IBM Plex Mono",monospace;letter-spacing:.16em}
.horizon h2{font-size:clamp(4.2rem,6.5vw,7rem)}
.horizon a{font:500 .58rem "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.13em;border-bottom:1px solid;padding-bottom:.4rem}

footer{padding:5vw 6vw 2.5vw;background:var(--deep);color:white;display:grid;grid-template-columns:1.2fr .5fr .5fr;gap:5vw}
.footer-brand img{width:210px;height:auto}.footer-brand p{font-size:.7rem;color:#72878c}
.footer-links,.footer-meta{display:flex;flex-direction:column;gap:.55rem;font-size:.65rem}
.footer-links>span{font:.55rem "IBM Plex Mono",monospace;color:#667b80;text-transform:uppercase;letter-spacing:.13em;margin-bottom:.5rem}
.footer-meta{color:#75898e;font-family:"IBM Plex Mono",monospace}
.footer-bottom{grid-column:1/-1;border-top:1px solid #263b41;padding-top:1.4rem;margin-top:3rem;font:.56rem "IBM Plex Mono",monospace;color:#60777c}
.mobile-menu{display:none}

@media(max-width:980px){
  .header{grid-template-columns:1fr auto auto}.header-index,.nav{display:none}.menu-btn{display:block}
  .hero-grid{grid-template-columns:1.1fr .9fr;grid-template-rows:1fr .4fr}.hero-copy{grid-row:1/3}.hero-image-main{grid-column:2;grid-row:1}.hero-image-detail{display:none}.hero-spec{grid-column:2;grid-row:2}
  .problem{grid-template-columns:.2fr 1fr}.problem-copy{grid-column:2}
  .system-top{grid-template-columns:.15fr 1fr}.system-label{grid-column:2}
  .system-cards{grid-template-columns:1fr 1fr}
  .ritual-grid{grid-template-columns:1fr 1fr}.step.big{grid-row:1/3}.step.image-card{display:none}
  .story{grid-template-columns:.15fr .85fr 1fr}
  .zeus-note{grid-template-columns:1fr 1fr}.zeus-note figure{grid-column:1/-1}
  .note-row{grid-template-columns:1fr 1fr}
  .culture{grid-template-columns:.2fr 1fr}.signal{grid-column:2}
  .mobile-menu{display:flex;position:fixed;inset:76px 0 0;background:var(--fog);z-index:40;flex-direction:column;padding:8vw;transform:translateX(100%);transition:.35s}
  .mobile-menu.open{transform:none}
  .mobile-menu a{font:400 2.7rem/1.6 "Archivo Black",sans-serif;text-transform:uppercase;border-bottom:1px solid var(--line)}
}
@media(max-width:680px){
  .header{height:70px;padding:0 5vw}.brand img{width:165px}.shop-cta{display:none}.mobile-menu{inset:70px 0 0}
  .hero{padding:0}.hero-grid{display:block;min-height:auto}.hero-copy{min-height:640px;padding:18vw 7vw}.hero-copy h1{font-size:4.6rem}.hero-image-main{height:500px}.hero-spec{padding:10vw 7vw}
  .ticker{justify-content:flex-start;overflow:hidden;white-space:nowrap}
  .problem{grid-template-columns:1fr;padding:18vw 7vw}.problem-copy{grid-column:auto}
  .system{padding:18vw 7vw}.system-top{grid-template-columns:1fr}.system-label{grid-column:auto}.system-cards{grid-template-columns:1fr}.system-cards article,.system-cards article+article{min-height:280px;padding:2rem 0;border-right:0;border-bottom:1px solid #3f5055}
  .clean-split{grid-template-columns:1fr}.clean-photo{min-height:520px}.clean-copy{padding:18vw 7vw}
  .ritual{padding:18vw 6vw}.ritual-header{grid-template-columns:1fr}.ritual-grid{display:grid;grid-template-columns:1fr;grid-template-rows:auto;gap:4vw}.step.big{grid-row:auto}.step.big .step-image{height:420px}.step{min-height:240px}
  .story{grid-template-columns:1fr}.story-mark{writing-mode:initial;padding:12vw 7vw 0}.story-copy{padding:12vw 7vw}.story-photo{min-height:520px}
  .zeus-note{grid-template-columns:1fr;padding:18vw 7vw}.zeus-note figure{grid-column:auto;height:500px}
  .field-notes{padding:18vw 6vw}.field-title{grid-template-columns:1fr}.note-row{grid-template-columns:1fr}.note-row article{min-height:220px;border-right:0;border-bottom:1px solid var(--line)}
  .culture{grid-template-columns:1fr;padding:18vw 7vw}.signal{grid-column:auto}
  .horizon{height:650px}.horizon-copy{left:7vw;bottom:8vw}.horizon h2{font-size:4.5rem}
  footer{grid-template-columns:1fr;padding:14vw 6vw 6vw}.footer-bottom{grid-column:1}
}
