@font-face{font-family:"Anton";src:url(assets/fonts/anton.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(assets/fonts/inter.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
:root{
  --deep:#071226;--navy:#0B1B33;--blue:#1767DC;--paper:#F5F7FA;--yellow:#FFE14D;--cyan:#4FE3FF;--mono-bg:#0F2A55;--white:#fff;
  --ink:#0B1B33;--ink-2:#3E4C63;--sky:#C9D6EA;--rule-d:rgba(201,214,234,.18);--rule-l:#D9DFE8;
  --head:"Anton","Impact","Arial Narrow Bold",sans-serif;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --col:46rem;--wide:72rem}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--deep);color:var(--white);font:400 1.0625rem/1.65 var(--sans)}
img{max-width:100%;height:auto}
.wrap{max-width:var(--wide);margin:0 auto;padding:0 1.5rem}
.col>*{max-width:var(--col)}
p{margin:0 0 1rem}
strong{font-weight:700}
h1,h2,h3{margin:0;font-weight:400;line-height:1.05}
h1,h2{font-family:var(--head);text-transform:uppercase;letter-spacing:.005em}
h1{font-size:clamp(2.5rem,6vw,4.6rem)}
h2{font-size:clamp(2rem,4vw,2.9rem);margin-bottom:1.5rem}
h3{font:700 1.1rem/1.3 var(--sans);letter-spacing:-.01em}
.small{font-size:.875rem}
a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--yellow);color:var(--deep);padding:.6rem 1rem;z-index:10;font-weight:700}
.skip:focus{left:1rem;top:1rem}

/* Surfaces: one accent per section */
.s-deep{background:var(--deep);color:var(--white)}
.s-navy{background:var(--navy);color:var(--white)}
.s-mono{background:var(--mono-bg);color:var(--white)}
.s-paper{background:var(--paper);color:var(--ink)}
.acc-yellow{--acc:var(--yellow);--acc-ink:var(--deep)}
.acc-cyan{--acc:var(--cyan);--acc-ink:var(--deep)}
.acc-mono{--acc:var(--blue);--acc-ink:var(--white)}
.s-deep a,.s-navy a,.s-mono a{color:var(--white)}
.s-deep a:hover,.s-navy a:hover{color:var(--acc)}
.s-mono a:hover{color:var(--sky)}
.s-paper a{color:#1159C2}
.s-paper a:hover{color:var(--ink)}
.s-paper :focus-visible{outline-color:var(--blue)}
.payoff{background:var(--acc);color:var(--acc-ink);padding:0 .18em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
h2 .payoff{display:inline-block;transform:rotate(-1.5deg);padding:.02em .22em .06em;margin:.14em 0 .04em}

/* Header */
header.site{background:var(--deep);border-bottom:1px solid var(--rule-d)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1rem;padding-bottom:1rem;flex-wrap:wrap}
.name{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;color:var(--white);text-decoration:none}
.mc{display:block;width:2.1rem;height:2.1rem}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1.5rem}
nav a{color:var(--sky)!important;text-decoration:none;font-size:.95rem;font-weight:500}
nav a:hover{color:var(--white)!important;text-decoration:underline}

/* Hero */
.hero{position:relative;padding:clamp(3rem,7vw,5.5rem) 0 clamp(3.25rem,6vw,5rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.eyebrow{font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sky);margin-bottom:1.25rem}
.hero h1{line-height:1.02}
.h1-line{display:inline}
.hero h1 .payoff-block{display:inline-block;transform:rotate(-1.5deg);transform-origin:left center;padding:.06em .2em .12em;margin:.3em 0 .12em;line-height:1.08}
.identity{font-size:1.18rem;color:var(--sky);margin:1.6rem 0 0;max-width:38rem}
.identity a{color:var(--white)}
.actions{display:flex;flex-wrap:wrap;gap:1.25rem;align-items:center;margin-top:2rem}
.btn{display:inline-block;background:var(--acc);color:var(--acc-ink)!important;text-decoration:none;padding:.85rem 1.3rem;border-radius:.4rem;font-weight:800;font-size:1rem}
.btn:hover{background:var(--white)}
.hero-photo{margin:0;justify-self:center;width:100%;max-width:26rem;aspect-ratio:4/5;border-radius:.6rem;overflow:hidden;background:var(--navy);border:1px solid rgba(201,214,234,.18);box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.hero-photo img{display:block;width:100%;height:100%;object-fit:cover}
.baseline{position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--acc)}

/* Proof */
.proof dl{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.proof dl>div{padding:1.6rem 1.5rem 1.2rem 0}
.proof dl>div+div{padding-left:1.5rem;border-left:1px solid var(--rule-d)}
.proof dt{font:400 2.6rem/1 var(--head);color:var(--acc)}
.proof dd{margin:.5rem 0 0;color:var(--sky);font-size:.9rem;line-height:1.45}
.proof .small{margin:0;padding:0 0 1.25rem}

/* Blocks */
section.block{padding:clamp(3.25rem,7vw,5.5rem) 0}
.dated{font-size:.85rem;color:var(--sky);margin:-.5rem 0 1.25rem}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
ul.now{margin:0;padding:0;list-style:none}
ul.now li{padding:1rem 0 1rem 1.1rem;border-top:1px solid var(--rule-d);position:relative}
ul.now li::before{content:"";position:absolute;left:0;top:1.55rem;width:.4rem;height:.4rem;background:var(--acc);border-radius:50%}
ul.now li:last-child{border-bottom:1px solid var(--rule-d)}
ul.now strong{color:var(--acc)}
.shot{margin:0}
.shot img{display:block;width:100%;border-radius:.6rem;border:1px solid rgba(79,227,255,.45);box-shadow:0 24px 50px -28px rgba(0,0,0,.8)}
.shot figcaption{font-size:.85rem;color:var(--sky);margin-top:.6rem}
.shot.light img{border-color:var(--rule-l);box-shadow:0 18px 40px -26px rgba(11,27,51,.45)}
.shot.light figcaption{color:var(--ink-2)}
.s-paper h2{color:var(--ink)}

.companies{display:grid}
.co{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:2rem;padding:1.75rem 0;border-top:2px solid var(--ink)}
.co:last-child{border-bottom:1px solid var(--rule-l)}
.co-body{max-width:var(--col)}
.co-body p:last-child{margin-bottom:0}
.co h3 a{color:var(--ink);text-decoration:none}
.co h3{font:400 1.7rem/1.1 var(--head);text-transform:uppercase}
.lockup{display:block;height:2rem;width:auto}
.co .role{display:inline-block;margin:.6rem 0 0;font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--acc);color:var(--acc-ink);padding:.15rem .5rem;border-radius:.25rem}
.co .shot{margin-top:1.5rem;max-width:34rem}
.slot{display:grid;place-items:center;text-align:center;margin-top:1.25rem;aspect-ratio:16/10;max-width:34rem;border:2px dashed #9AA8BD;border-radius:.6rem;background:repeating-linear-gradient(135deg,#EDF1F6 0 12px,#F5F7FA 12px 24px);padding:1rem}
.slot-portrait{aspect-ratio:4/5;max-width:14rem;border-color:rgba(201,214,234,.5);background:rgba(255,255,255,.05)}

ul.log{margin:0;padding:0;list-style:none}
ul.log li{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1.25rem;padding:1rem 0;border-top:1px solid var(--rule-d)}
ul.log li:last-child{border-bottom:1px solid var(--rule-d)}
ul.log .when{font-size:.85rem;color:var(--acc);font-weight:700;padding-top:.15rem}

/* About (mono: blue/white) */
.about-grid{display:grid;grid-template-columns:13rem minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.avatar{display:block;width:12rem;height:12rem;border-radius:50%;object-fit:cover;object-position:50% 30%;border:4px solid var(--white);background:var(--blue)}
.about-body{max-width:var(--col)}
.about-body h3{margin:2.25rem 0 .8rem;font:400 1.5rem/1.1 var(--head);text-transform:uppercase}
.about-body p{color:#E6EDF7}
.values{list-style:none;margin:0;padding:0}
.values li{padding:.7rem 0;border-top:1px solid rgba(255,255,255,.18)}
.values li:last-child{border-bottom:1px solid rgba(255,255,255,.18)}
.bio{border-left:4px solid var(--white);padding-left:1rem}

blockquote{margin:0 0 2rem;padding:0 0 0 1.25rem;border-left:4px solid var(--acc)}
blockquote p{font-size:1.1rem}
blockquote footer{font-size:.9rem;color:var(--ink-2);font-weight:600}

.routes{margin:0;padding:0;list-style:none}
.routes li{display:grid;grid-template-columns:12rem minmax(0,1fr);gap:1.5rem;padding:.9rem 0;border-top:1px solid var(--rule-d)}
.routes li:last-child{border-bottom:1px solid var(--rule-d)}
.routes a{font-weight:700}
.routes span{color:var(--sky)}
.social{margin-top:1.5rem}
#contact{border-bottom:6px solid var(--acc)}

.add,.routes span.add,.about-body p .add{background:var(--yellow);color:var(--deep);border:1px dashed var(--deep);padding:0 .3em;font-size:.82em;border-radius:2px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500}

footer.site{padding:2rem 0 3rem;font-size:.875rem;color:var(--sky)}
footer.site .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
footer.site a{color:var(--sky)}

@media (max-width:860px){
 .hero-grid,.split{grid-template-columns:1fr}
 .hero-photo{max-width:22rem;justify-self:start}
 .co{grid-template-columns:1fr;gap:.75rem}
 .about-grid{grid-template-columns:1fr}
 .avatar{width:9rem;height:9rem}
}
@media (max-width:600px){
 nav ul{gap:1rem}
 nav a{font-size:.9rem}
 .proof dl{grid-template-columns:1fr}
 .proof dl>div,.proof dl>div+div{padding:1rem 0;border-left:0}
 .proof dl>div+div{border-top:1px solid var(--rule-d)}
 .routes li,ul.log li{grid-template-columns:1fr;gap:.25rem}
}
@media print{nav,.skip{display:none}}

.portrait-link{display:block;max-width:14rem;margin:1.25rem 0 .6rem}.portrait{display:block;width:100%;height:auto;border-radius:.6rem}