/*
Theme Name: drubelabs Defence
Theme URI: https://drubelabs.com
Author: D-Rube Labs & Research Pvt. Ltd.
Description: Defence-focused theme for drubelabs.com with STRYKER, Nemesis and DRL Sentinel OS, plus a built-in blog.
Version: 1.4
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: drubelabs
*/
:root{--black:#000;--bone:#E9E6DF;--steel:#8C9096;--panel:#141619;--rule:rgba(233,230,223,.16);--signal:#E8A33D;--max:1280px;--pad:clamp(20px,4vw,56px)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--black);color:var(--bone);font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:400;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
body.admin-bar .nav{top:32px}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.screen-reader-text{position:absolute;left:-9999px}

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;background:linear-gradient(#000c,#0000)}
body:not(.home) .nav{background:#000;border-bottom:1px solid var(--rule)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.brand{font-family:"Poppins",system-ui,sans-serif;font-weight:700;font-size:22px;letter-spacing:-.01em;text-decoration:none;color:#fff}
.brand a,.brand:visited{color:#fff}
.brand img{max-height:40px;width:auto}
.nav ul{display:flex;gap:32px;list-style:none;margin:0;padding:0;font-size:15px}
.nav ul a{text-decoration:none;color:var(--steel)}
.nav ul a:hover,.nav ul .current-menu-item a{color:var(--bone)}
.nav .login{font-size:14px;text-decoration:none;border:1px solid var(--rule);padding:8px 14px;white-space:nowrap}
@media (max-width:820px){.nav ul{display:none}}

/* Hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;border-top:none;padding:0}
.hero .bg{position:absolute;inset:0;background-color:#000;background-position:center;background-size:cover;filter:grayscale(1) contrast(1.1) brightness(.55)}
.hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0006 0%,#0000 40%,#000 100%)}
.hero .wrap{position:relative;padding-bottom:clamp(48px,9vh,110px);width:100%}
.hero h1{font-size:clamp(44px,8.6vw,132px);line-height:.92;font-weight:800;margin:0 0 28px;letter-spacing:-.01em;font-variation-settings:"wdth" 125;max-width:13ch}
.hero p{font-size:clamp(17px,1.5vw,21px);max-width:52ch;color:#cfccc5;margin:0 0 36px}
.actions{display:flex;flex-wrap:wrap;gap:14px}
.btn{display:inline-block;text-decoration:none;font-weight:600;font-size:15px;padding:15px 26px;border:1px solid var(--bone)}
.btn.solid{background:var(--bone);color:#000}
.btn.solid:hover{background:#fff}
.btn.ghost:hover{background:var(--bone);color:#000}
.status{position:absolute;right:var(--pad);bottom:clamp(48px,9vh,110px);font-size:13px;color:var(--steel);display:flex;align-items:center;gap:10px}
.status i{width:8px;height:8px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 4px #e8a33d33}
@media (max-width:900px){.status{display:none}}
@media (prefers-reduced-motion:no-preference){
 .hero .bg{animation:settle 2.4s cubic-bezier(.2,.7,.2,1) both}
 .hero h1{animation:rise 1s .25s cubic-bezier(.2,.7,.2,1) both}
 .hero p,.hero .actions{animation:rise 1s .55s cubic-bezier(.2,.7,.2,1) both}
 @keyframes settle{from{transform:scale(1.08);opacity:0}to{transform:none;opacity:1}}
 @keyframes rise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
}

section{padding:clamp(80px,12vw,160px) 0;border-top:1px solid var(--rule)}
h1,h2,h3{font-family:"Archivo",sans-serif}
h2{font-size:clamp(34px,5vw,72px);line-height:1;font-weight:800;margin:0 0 24px;font-variation-settings:"wdth" 125;letter-spacing:-.01em}
h3{font-size:22px;line-height:1.2;font-weight:700;margin:0 0 10px}
.lede{font-size:clamp(20px,2.2vw,30px);line-height:1.35;font-weight:300;max-width:34ch;margin:0}
.muted{color:var(--steel)}
.body{color:#cfccc5;max-width:58ch;margin:0 0 18px}

/* Mission */
.split{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(32px,6vw,96px);align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}

/* Systems overview */
.systems-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:56px;border-top:1px solid var(--bone)}
.sys{padding:28px 28px 8px 0;text-decoration:none;display:block}
.sys .domain{font-size:14px;color:var(--steel);display:block;margin-bottom:6px}
.sys h3{font-size:clamp(26px,2.6vw,36px);font-variation-settings:"wdth" 115}
.sys p{color:#cfccc5;margin:0 0 16px;max-width:36ch}
.sys .more{font-size:15px;font-weight:600;border-bottom:1px solid var(--rule)}
.sys:hover .more{border-color:var(--bone)}
@media (max-width:860px){.systems-grid{grid-template-columns:1fr}}

/* Product blocks */
.product .head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:48px}
.product .name{font-size:clamp(64px,15vw,230px);line-height:.8;font-weight:800;margin:0;font-variation-settings:"wdth" 125;letter-spacing:-.02em}
.product .tag{max-width:38ch;font-size:19px;color:#cfccc5;margin:0}
.blueprint{background:var(--panel);border:1px solid var(--rule);padding:clamp(16px,3vw,40px);overflow-x:auto}
.blueprint svg{width:100%;min-width:560px;height:auto;color:var(--bone)}
.specs{display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid var(--rule);margin-top:48px}
.spec{border:1px solid var(--rule);border-left:none;padding:24px 20px;margin-top:-1px}
.spec b{display:block;font-size:clamp(30px,3.4vw,48px);line-height:1;font-weight:700;font-variation-settings:"wdth" 110;margin-bottom:8px}
.spec span{font-size:14px;color:var(--steel)}
@media (max-width:860px){.specs{grid-template-columns:repeat(2,1fr)}}
.caps{display:grid;grid-template-columns:repeat(2,1fr);gap:48px 64px;margin-top:80px}
.caps p{margin:0;color:#cfccc5;max-width:48ch}
@media (max-width:760px){.caps{grid-template-columns:1fr}}
.restricted{margin-top:64px;padding:20px 24px;border-left:3px solid var(--signal);background:var(--panel);color:#cfccc5;max-width:70ch;font-size:15px}

/* Sentinel OS */
.os-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.screen{background:var(--panel);border:1px solid var(--rule);aspect-ratio:16/10;overflow:hidden}
.screen svg{width:100%;height:100%;display:block}
.os-list{list-style:none;padding:0;margin:28px 0 0}
.os-list li{border-top:1px solid var(--rule);padding:16px 0;color:#cfccc5}
.os-list li strong{color:var(--bone);font-weight:600;display:block}
@media (max-width:900px){.os-grid{grid-template-columns:1fr}}

/* Missions */
.missions .grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px;border-top:1px solid var(--bone)}
.missions .m{padding:28px 24px 0 0}
.missions .m p{color:#cfccc5;margin:0;font-size:16px}
@media (max-width:900px){.missions .grid{grid-template-columns:repeat(2,1fr);row-gap:32px}}
@media (max-width:520px){.missions .grid{grid-template-columns:1fr}}

/* Heritage */
.heritage{background:var(--bone);color:#000;border-top:none}
.heritage .split{grid-template-columns:1fr 1fr}
.heritage p{max-width:52ch;margin:0 0 16px}
.heritage .muted{color:#55585c}

/* Team */
.team{display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px;border-left:1px solid var(--rule)}
.person{border-right:1px solid var(--rule);padding:4px 20px 0}
.person b{display:block;font-size:19px;font-weight:600}
.person span{font-size:14px;color:var(--steel)}
@media (max-width:860px){.team{grid-template-columns:repeat(2,1fr);row-gap:28px}}
.backing{margin-top:72px;font-size:15px;color:var(--steel);max-width:60ch}

/* News */
.news-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:48px}
.post-card{text-decoration:none;display:block}
.post-card .thumb{aspect-ratio:16/10;background:var(--panel);border:1px solid var(--rule);overflow:hidden;margin-bottom:18px}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3)}
.post-card time{font-size:14px;color:var(--steel)}
.post-card h3{margin:6px 0 8px}
.post-card p{margin:0;color:#cfccc5;font-size:16px}
.post-card:hover h3{text-decoration:underline;text-underline-offset:4px}
@media (max-width:900px){.post-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.post-grid{grid-template-columns:1fr}}

/* CTA */
.cta h2{font-size:clamp(44px,8vw,120px);max-width:12ch}
.cta .row{display:flex;flex-wrap:wrap;gap:48px;margin-top:48px;align-items:flex-end;justify-content:space-between}
.cta address{font-style:normal;color:#cfccc5;font-size:16px;line-height:1.7}
.cta address a{text-decoration:none;border-bottom:1px solid var(--rule)}

/* Inner pages, blog */
.page-main{padding-top:72px;min-height:70vh}
.page-head{padding:clamp(64px,9vw,120px) 0 40px;border-top:none}
.page-head h1{font-size:clamp(40px,6vw,88px);line-height:1;font-weight:800;margin:0;font-variation-settings:"wdth" 125;max-width:18ch}
.page-head time,.page-head .cat{color:var(--steel);font-size:15px;display:inline-block;margin-bottom:18px}
.featured{margin:0 auto 56px;max-width:var(--max);padding:0 var(--pad)}
.featured img{width:100%;border:1px solid var(--rule)}
.prose{max-width:68ch;margin:0 auto;padding:0 var(--pad) 120px;font-size:18px;line-height:1.7;color:#d8d5ce}
.prose h2{font-size:clamp(28px,3vw,40px);margin:56px 0 16px}
.prose h3{margin:40px 0 12px}
.prose a{color:var(--bone);text-underline-offset:3px}
.prose img{margin:32px 0}
.prose blockquote{margin:32px 0;padding-left:24px;border-left:3px solid var(--signal);font-size:21px;color:var(--bone)}
.prose code{background:var(--panel);padding:2px 6px;font-size:.9em}
.prose pre{background:var(--panel);padding:20px;overflow-x:auto;border:1px solid var(--rule)}
.prose figcaption{font-size:14px;color:var(--steel)}
.back{display:inline-block;margin-top:48px;font-weight:600;text-decoration:none;border-bottom:1px solid var(--rule)}
.archive{padding-top:0;border-top:none}
.pagination{margin-top:64px;display:flex;gap:16px}
.pagination .page-numbers{text-decoration:none;padding:8px 14px;border:1px solid var(--rule)}
.pagination .current{background:var(--bone);color:#000}
.elementor-page .page-main{padding-top:72px}

footer.site{border-top:1px solid var(--rule);padding:28px 0;font-size:14px;color:var(--steel)}
footer.site .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer.site a{text-decoration:none}
footer.site ul{list-style:none;display:flex;gap:20px;margin:0;padding:0}

/* ===== Device optimisation: iPhone, Android, iPad, Mac ===== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(80px + env(safe-area-inset-top,0px))}
body{-moz-osx-font-smoothing:grayscale;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
.wrap{padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px))}

/* Header respects the notch / Dynamic Island */
.nav{padding-top:env(safe-area-inset-top,0px)}
@media screen and (max-width:782px){body.admin-bar .nav{top:46px}}
@media screen and (max-width:600px){body.admin-bar .nav{top:0}}

/* Hover effects only on devices with a real pointer (Mac, PC) so taps don't stick on phones */
@media (hover:none){
	.btn.solid:hover{background:var(--bone)}
	.btn.ghost:hover{background:transparent;color:var(--bone)}
	.post-card:hover h3{text-decoration:none}
}

/* Mobile menu button */
.menu-toggle{display:none;width:44px;height:44px;margin-right:-10px;background:none;border:0;color:#fff;cursor:pointer;position:relative}
.menu-toggle i{position:absolute;left:10px;right:10px;height:2px;background:currentColor;transition:transform .25s ease}
.menu-toggle i:first-of-type{top:17px}
.menu-toggle i:last-of-type{top:25px}
.menu-toggle[aria-expanded="true"] i:first-of-type{transform:translateY(4px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] i:last-of-type{transform:translateY(-4px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;top:calc(72px + env(safe-area-inset-top,0px));background:#000;z-index:19;padding:24px max(var(--pad),env(safe-area-inset-left,0px)) calc(32px + env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:32px}
.mobile-menu[hidden]{display:none}
.mobile-menu ul{display:block;list-style:none;margin:0;padding:0}
.mobile-menu li{border-bottom:1px solid var(--rule)}
.mobile-menu li a{display:block;padding:18px 0;font-size:26px;font-weight:700;text-decoration:none;color:var(--bone);font-variation-settings:"wdth" 115}
.mobile-menu .btn{align-self:flex-start}
html.menu-open,html.menu-open body{overflow:hidden}
html.menu-open .nav{background:#000}

/* iPad landscape and small laptops */
@media (max-width:1180px){
	.nav ul{gap:24px}
	.specs{grid-template-columns:repeat(4,1fr)}
}

/* iPad portrait, Android tablets, and below: switch to the menu button */
@media (max-width:1024px){
	.nav nav{display:none}
	.nav .login{display:none}
	.menu-toggle{display:block}
	.status{display:none}
	.systems-grid{grid-template-columns:1fr 1fr 1fr}
	.os-grid{grid-template-columns:1fr}
	.missions .grid{grid-template-columns:repeat(2,1fr);row-gap:40px}
	.team{grid-template-columns:repeat(2,1fr);row-gap:32px}
	.post-grid{grid-template-columns:1fr 1fr}
}

/* Large phones and small tablets */
@media (max-width:860px){
	.specs{grid-template-columns:repeat(2,1fr)}
	.systems-grid{grid-template-columns:1fr}
	.sys{padding:28px 0 24px;border-bottom:1px solid var(--rule)}
	.heritage .split,.split{grid-template-columns:1fr}
	.caps{grid-template-columns:1fr;gap:36px;margin-top:56px}
}

/* Phones: iPhone SE up to Pro Max, Android */
@media (max-width:600px){
	body{font-size:16px}
	section{padding:72px 0}
	.hero .wrap{padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
	.hero h1{font-size:clamp(40px,11.5vw,64px);margin-bottom:20px}
	.hero p{margin-bottom:28px}
	.actions{flex-direction:column;align-items:stretch;width:100%}
	.btn{text-align:center;padding:16px 20px;min-height:48px}
	h2{font-size:clamp(30px,8.5vw,44px)}
	.product .name{font-size:clamp(56px,17vw,96px)}
	.product .head{margin-bottom:32px}
	.product .tag{font-size:17px}
	.blueprint{margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));border-left:0;border-right:0;padding:16px;-webkit-overflow-scrolling:touch}
	.blueprint svg{min-width:640px}
	.spec{padding:18px 14px}
	.spec b{font-size:28px}
	.spec span{font-size:13px}
	.missions .grid{grid-template-columns:1fr;row-gap:28px}
	.team{grid-template-columns:1fr;border-left:0}
	.person{border-right:0;border-top:1px solid var(--rule);padding:16px 0 0}
	.post-grid{grid-template-columns:1fr;gap:36px}
	.cta h2{font-size:clamp(40px,12vw,64px)}
	.cta .row{gap:32px}
	.restricted{padding:16px 18px}
	.prose{font-size:17px;padding-bottom:80px}
	.page-head h1{font-size:clamp(34px,10vw,52px)}
	footer.site{padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
	footer.site .wrap{flex-direction:column}
}

/* Phones turned sideways: keep the hero readable */
@media (max-height:500px) and (orientation:landscape){
	.hero{min-height:auto;padding-top:calc(96px + env(safe-area-inset-top,0px))}
	.hero h1{font-size:clamp(34px,6vw,56px)}
	.mobile-menu li a{font-size:20px;padding:12px 0}
}

/* Large Mac and desktop displays */
@media (min-width:1600px){
	:root{--max:1440px}
	body{font-size:18px}
}

/* Swipe hint for blueprints on touch screens */
@media (max-width:600px){
	.blueprint::after{content:"Swipe to see the full drawing";display:block;margin-top:10px;font-size:13px;color:var(--steel)}
}

/* ===== Sentinel OS ===== */
.sentinel{background:#050607;background-image:linear-gradient(rgba(233,230,223,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(233,230,223,.035) 1px,transparent 1px);background-size:48px 48px;padding-bottom:clamp(80px,10vw,140px)}
.os-head{margin-bottom:clamp(48px,7vw,96px)}
.os-kicker{margin:0 0 4px;font-family:"Poppins",sans-serif;font-weight:700;font-size:clamp(18px,2vw,28px);color:var(--signal)}
.os-name{font-size:clamp(60px,13vw,200px);line-height:.85;margin:0 0 28px;font-variation-settings:"wdth" 125;letter-spacing:-.02em}
.os-tag{font-size:clamp(18px,1.8vw,24px);line-height:1.45;color:#cfccc5;max-width:52ch;margin:0;font-weight:300}

.os-arch{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.stack{position:relative;display:flex;flex-direction:column;gap:8px;padding-right:56px}
.layer{border:1px solid var(--rule);background:var(--panel);padding:22px 24px;display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap}
.layer b{font-size:clamp(18px,1.7vw,22px);font-weight:700;font-variation-settings:"wdth" 110}
.layer span{font-size:14px;color:var(--steel)}
.layer.apps{margin:0 32px}
.layer.core{background:var(--signal);border-color:var(--signal);color:#000;padding:32px 24px;margin:0 16px}
.layer.core span{color:#2a1c05}
.layer.hw{background:transparent}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips i{font-style:normal;font-size:13px;color:var(--bone);border:1px solid var(--rule);padding:4px 10px}
.guard{position:absolute;top:0;bottom:0;right:0;width:32px;border:1px solid var(--rule);border-left:0;display:flex;align-items:center;justify-content:center}
.guard span{writing-mode:vertical-rl;font-size:12px;color:var(--steel);white-space:nowrap}
.os-explain h3{font-size:clamp(24px,2.4vw,32px);margin-bottom:16px}

.os-features{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(64px,9vw,120px);border-top:1px solid var(--bone)}
.os-features .f{padding:32px 32px 32px 0;border-bottom:1px solid var(--rule)}
.os-features .f:nth-child(3n+2),.os-features .f:nth-child(3n){padding-left:32px;border-left:1px solid var(--rule)}
.os-features p{margin:0;color:#cfccc5;font-size:16px;max-width:36ch}

.offline{margin:clamp(64px,9vw,120px) 0;background:var(--bone);color:#000;padding:clamp(56px,8vw,112px) 0}
.offline .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,5vw,80px);align-items:end}
.offline .big{margin:0;font-size:clamp(48px,8vw,120px);line-height:.9;font-weight:800;font-variation-settings:"wdth" 125;letter-spacing:-.02em}
.offline .body{color:#2b2d30;margin:0;font-size:18px}

.scale-title{font-size:clamp(26px,3vw,40px);font-variation-settings:"wdth" 115;margin-bottom:40px;max-width:22ch}
.scale{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;counter-reset:s}
.scale li{padding:0 28px 0 0;position:relative}
.scale li+li{padding-left:28px;border-left:1px solid var(--rule)}
.scale svg{width:100%;max-width:220px;height:auto;margin-bottom:20px;display:block}
.scale .n{fill:var(--bone)}
.scale .n.on{fill:var(--signal)}
.scale .ring{fill:none;stroke:var(--signal);stroke-opacity:.4}
.scale .l{fill:none;stroke:var(--bone);stroke-opacity:.35;stroke-width:1.5}
.scale .hq{fill:none;stroke:var(--bone);stroke-width:2}
.scale b{display:block;font-size:20px;margin-bottom:6px}
.scale span{color:#cfccc5;font-size:16px}
@media (prefers-reduced-motion:no-preference){
	.scale .ring{animation:ping 2.8s ease-out infinite;transform-origin:100px 60px}
	@keyframes ping{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.5);opacity:0}}
}

@media (max-width:1024px){
	.os-arch{grid-template-columns:1fr}
	.os-features{grid-template-columns:1fr 1fr}
	.os-features .f,.os-features .f:nth-child(3n+2),.os-features .f:nth-child(3n){padding:28px 28px 28px 0;border-left:0}
	.os-features .f:nth-child(2n){padding-left:28px;border-left:1px solid var(--rule)}
	.offline .wrap{grid-template-columns:1fr}
}
@media (max-width:600px){
	.stack{padding-right:40px}
	.guard{width:28px}
	.layer{padding:18px 16px;flex-direction:column;gap:6px}
	.layer.apps{margin:0 16px}
	.layer.core{margin:0 8px;padding:24px 16px}
	.os-features{grid-template-columns:1fr}
	.os-features .f,.os-features .f:nth-child(2n){padding:24px 0;border-left:0}
	.scale{grid-template-columns:1fr;gap:40px}
	.scale li,.scale li+li{padding:0;border-left:0}
	.scale svg{max-width:180px}
}

/* ===== About page ===== */
.about-hero{border-top:none;padding:clamp(72px,11vw,160px) 0 clamp(64px,8vw,120px)}
.about-hero h1{font-size:clamp(44px,8.6vw,132px);line-height:.92;font-weight:800;margin:0 0 clamp(40px,6vw,80px);letter-spacing:-.01em;font-variation-settings:"wdth" 125;max-width:12ch}
.about-intro{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,5vw,80px);align-items:start}
.about-intro .lede{max-width:30ch}

.timeline{list-style:none;padding:0;margin:56px 0 0;display:grid;grid-template-columns:repeat(4,1fr);counter-reset:t;border-top:1px solid var(--bone);position:relative}
.timeline li{counter-increment:t;padding:28px 28px 0 0;position:relative}
.timeline li::before{content:counter(t);position:absolute;top:-7px;left:0;width:13px;height:13px;border-radius:50%;background:var(--bone);font-size:0}
.timeline li:last-child::before{background:var(--signal);box-shadow:0 0 0 5px #e8a33d33}
.timeline h3{margin-top:8px}
.timeline p{margin:0;color:#cfccc5;font-size:16px;max-width:34ch}

.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:48px;border-top:1px solid var(--rule)}
.pgrid>div{padding:36px 40px 36px 0;border-bottom:1px solid var(--rule)}
.pgrid>div:nth-child(2n){padding-left:40px;padding-right:0;border-left:1px solid var(--rule)}
.pgrid h3{font-size:clamp(22px,2.2vw,30px);font-variation-settings:"wdth" 115}
.pgrid p{margin:0;color:#cfccc5;max-width:44ch}

.portrait{aspect-ratio:4/5;background:var(--panel);border:1px solid var(--rule);overflow:hidden;position:relative;margin-bottom:18px}
.portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .4s ease}
.portrait .mono{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(48px,6vw,88px);font-weight:800;font-variation-settings:"wdth" 125;color:var(--steel);background:linear-gradient(160deg,#1b1e22,#0b0c0e)}
@media (hover:hover){.leader:hover .portrait img,.founder:hover .portrait img{filter:grayscale(0)}}

.founder{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:end;margin-top:48px;padding-bottom:clamp(56px,7vw,96px);border-bottom:1px solid var(--rule)}
.founder .portrait{margin:0}
.founder blockquote{margin:0 0 32px;font-size:clamp(24px,3vw,42px);line-height:1.2;font-weight:300;max-width:24ch}
.who b{display:block;font-size:22px;font-weight:700}
.who span{color:var(--signal);font-size:16px}

.leaders{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(48px,6vw,80px)}
.leader b{display:block;font-size:20px;font-weight:600}
.leader span{color:var(--steel);font-size:15px}

.backers{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--bone)}
.backers li{padding:24px 24px 0 0}
.backers b{display:block;font-size:19px}
.backers span{color:var(--steel);font-size:15px}

@media (max-width:1024px){
	.timeline{grid-template-columns:1fr 1fr;row-gap:48px;border-top:0}
	.timeline li{border-top:1px solid var(--bone)}
	.about-intro{grid-template-columns:1fr}
}
@media (max-width:860px){
	.founder{grid-template-columns:1fr;align-items:start}
	.founder .portrait{max-width:420px}
	.leaders{grid-template-columns:1fr 1fr 1fr;gap:16px}
	.pgrid{grid-template-columns:1fr}
	.pgrid>div,.pgrid>div:nth-child(2n){padding:28px 0;border-left:0}
	.backers{grid-template-columns:1fr}
	.backers li{padding:20px 0;border-bottom:1px solid var(--rule)}
}
@media (max-width:600px){
	.about-hero h1{font-size:clamp(40px,11.5vw,64px)}
	.timeline{grid-template-columns:1fr;row-gap:0;border-left:1px solid var(--bone);margin-left:6px}
	.timeline li{border-top:0;padding:0 0 36px 28px}
	.timeline li::before{top:4px;left:-7px}
	.leaders{grid-template-columns:1fr 1fr;gap:20px 14px}
	.leader b{font-size:17px}
	.leader span{font-size:14px}
}

/* Menu links sit on the right, next to Nebula login */
.nav .wrap{justify-content:flex-start}
.nav nav{margin-left:auto}
.nav .login{margin-left:32px}
.menu-toggle{margin-left:auto}