@import "tailwindcss";

:root { --orange:#ff6a00; --ink:#111; --grey:#d9d9d9; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--white); color:var(--ink); font-family:var(--font-sans),sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { height:96px; padding:0 clamp(24px,5vw,76px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #e8e8e8; background:#fff; }
.brand { width:225px; height:52px; overflow:hidden; display:block; position:relative; }
.logo-crop { display:block; width:100%; height:100%; overflow:hidden; position:relative; }
.logo-crop img { width:100%; height:100%; object-fit:contain; object-position:left center; }
nav { display:flex; align-items:center; gap:34px; font-size:13px; font-weight:700; }
nav a:not(.nav-contact):hover { color:var(--orange); }
.nav-contact { background:var(--orange); color:#fff; padding:14px 19px; border-radius:3px; display:flex; gap:16px; transition:transform .2s; }
.nav-contact:hover { transform:translateY(-2px); }
.hero { min-height:calc(100vh - 96px); background:var(--ink); color:#fff; padding:clamp(70px,9vw,135px) clamp(24px,8vw,122px) 50px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.hero-orbit { width:420px; height:420px; border:1px solid #3a3a3a; border-radius:50%; position:absolute; right:-100px; top:40px; }
.hero-orbit:before,.hero-orbit:after { content:""; position:absolute; border:1px solid #2d2d2d; border-radius:50%; inset:38px; }
.hero-orbit:after { inset:120px; border-color:var(--orange); opacity:.65; }
.hero-orbit span { width:10px; height:10px; background:var(--orange); border-radius:50%; position:absolute; left:21px; top:115px; box-shadow:0 0 0 8px rgba(255,106,0,.12); }
.eyebrow { font-size:12px; text-transform:uppercase; letter-spacing:.18em; font-weight:800; display:flex; align-items:center; gap:12px; }
.eyebrow span { width:26px; height:2px; background:var(--orange); }
.light { color:#b7b7b7; }
.hero h1 { font-size:clamp(54px,8.1vw,124px); line-height:.91; letter-spacing:-.065em; margin:38px 0 65px; max-width:1200px; font-weight:750; position:relative; }
em { color:var(--orange); font-family:var(--font-serif),serif; font-weight:450; }
.hero-foot { border-top:1px solid #333; padding-top:30px; display:flex; align-items:flex-end; justify-content:space-between; }
.hero-foot p { color:#c9c9c9; max-width:610px; line-height:1.75; margin:0; font-size:16px; }
.round-link { width:52px; height:52px; border:1px solid #555; border-radius:50%; display:grid; place-items:center; font-size:22px; transition:.2s; }
.round-link:hover { border-color:var(--orange); color:var(--orange); }
.section { padding:clamp(85px,10vw,150px) clamp(24px,8vw,122px); }
.section-kicker { font-size:11px; text-transform:uppercase; letter-spacing:.17em; font-weight:800; display:flex; gap:16px; align-items:center; }
.section-kicker span { color:var(--orange); }
.story-grid,.platform-grid { display:grid; grid-template-columns:1fr 1fr; gap:8vw; margin-top:75px; }
h2 { font-size:clamp(43px,5.3vw,78px); line-height:1; letter-spacing:-.055em; margin:0; }
.story-copy { max-width:650px; }
.story-copy p,.platform-grid p { font-size:16px; line-height:1.8; color:#555; }
.story-copy .lead { font-size:22px; color:var(--ink); line-height:1.55; margin-top:0; }
.text-link { display:inline-flex; gap:18px; color:var(--orange); font-size:13px; font-weight:800; border-bottom:1px solid var(--orange); padding:8px 0; margin-top:12px; }
.principles { display:grid; grid-template-columns:repeat(3,1fr); margin-top:100px; border-top:1px solid var(--grey); }
.principles div { padding:30px 45px 10px 0; border-right:1px solid var(--grey); margin-right:40px; }
.principles div:last-child { border:0; }
.principles span { color:var(--orange); font-size:11px; }
.principles strong { font-size:24px; display:block; margin:30px 0 10px; }
.principles p { color:#777; font-size:14px; line-height:1.6; }
.platform-band { background:var(--orange); color:#fff; padding:clamp(80px,9vw,130px) clamp(24px,8vw,122px); }
.platform-band .section-kicker span { color:var(--ink); }
.platform-band .light { color:#ffe2cf; }
.platform-grid { align-items:end; }
.platform-grid h2 em { color:var(--ink); }
.platform-grid p { color:#fff; font-size:20px; line-height:1.6; }
.platform-grid .muted { color:#ffe0ca; font-size:15px; }
.platform-link { display:inline-flex; gap:18px; margin-top:18px; padding:13px 0; border-bottom:1px solid var(--ink); color:var(--ink); font-size:12px; font-weight:800; }
.agents { background:#f7f7f5; }
.agents-intro { display:grid; grid-template-columns:1fr 1fr; gap:8vw; margin:70px 0 80px; align-items:end; }
.agents-intro > p { font-size:20px; line-height:1.7; color:#555; margin:0; }
.agent-flow { display:grid; grid-template-columns:1fr auto 1.7fr auto 1fr; gap:20px; align-items:stretch; }
.flow-card,.agent-cluster { background:#fff; border:1px solid var(--grey); padding:28px; min-height:200px; }
.flow-card > span,.cluster-label { color:var(--orange); text-transform:uppercase; letter-spacing:.15em; font-size:10px; font-weight:800; }
.flow-card strong { display:block; font-size:22px; margin:38px 0 12px; }
.flow-card p { color:#777; font-size:13px; line-height:1.6; margin:0; }
.control-card { background:var(--ink); color:#fff; border-color:var(--ink); }
.control-card p { color:#aaa; }
.flow-arrow { display:grid; place-items:center; color:var(--orange); font-size:25px; }
.agent-cluster { border-color:var(--orange); box-shadow:inset 0 3px var(--orange); }
.agent-roles { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:24px; }
.agent-roles div { background:#f2f2ef; padding:16px; font-size:13px; font-weight:800; }
.agent-roles span { display:block; color:var(--orange); font-size:9px; margin-bottom:18px; }
.control-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--grey); margin-top:75px; }
.control-grid article { padding:32px 40px 0 0; margin-right:40px; border-right:1px solid var(--grey); }
.control-grid article:last-child { border:0; }
.control-grid article > span { color:var(--orange); font-size:11px; }
.control-grid h3 { font-size:23px; margin:25px 0 12px; }
.control-grid p { color:#777; font-size:14px; line-height:1.65; }
.tech-section { background:var(--ink); color:#fff; padding:clamp(80px,9vw,130px) clamp(24px,8vw,122px); }
.tech-section .section-kicker span { color:var(--orange); }
.tech-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:10vw; margin-top:65px; align-items:end; }
.tech-grid > div > p { color:#aaa; line-height:1.7; max-width:430px; }
.tech-list { display:flex; flex-wrap:wrap; gap:10px; align-content:flex-end; }
.tech-list span { border:1px solid #3c3c3c; padding:14px 18px; font-size:12px; font-weight:700; color:#d5d5d5; transition:.2s; }
.tech-list span:first-child,.tech-list span:nth-child(2),.tech-list span:last-child { border-color:var(--orange); color:#fff; }
.tech-list span:hover { background:var(--orange); border-color:var(--orange); }
.notes { display:grid; grid-template-columns:.75fr 1.25fr; gap:9vw; }
.notes-heading { position:sticky; top:60px; align-self:start; }
.notes-heading h2 { margin:45px 0 25px; }
.notes-heading > p { color:#777; line-height:1.7; max-width:390px; }
.build-days-link { display:flex; align-items:center; gap:14px; width:max-content; margin:28px 0 8px; }
.build-days-link strong { color:var(--orange); font:500 64px/1 var(--font-serif),serif; }
.build-days-link span { color:#777; font-size:10px; font-weight:800; line-height:1.45; letter-spacing:.12em; text-transform:uppercase; }
.note { display:grid; grid-template-columns:58px 1fr; border-top:1px solid var(--grey); padding:35px 0 55px; }
.note-index { color:var(--orange); font-size:12px; font-weight:800; }
.note-meta { display:flex; justify-content:space-between; text-transform:uppercase; font-size:10px; letter-spacing:.12em; font-weight:800; color:#777; }
.note-meta span { color:var(--orange); }
.note h3 { font-size:clamp(25px,2.5vw,38px); line-height:1.15; letter-spacing:-.035em; margin:25px 0 15px; }
.note p { color:#686868; line-height:1.75; margin:0; max-width:650px; }
footer { background:var(--ink); color:#fff; padding:clamp(75px,8vw,120px) clamp(24px,8vw,122px) 35px; }
.footer-top { display:flex; justify-content:space-between; align-items:flex-end; padding-bottom:100px; }
.footer-top h2 { margin-top:38px; }
.footer-mail { font-family:var(--font-serif),serif; font-size:clamp(20px,2.2vw,34px); color:var(--orange); border-bottom:1px solid #555; padding-bottom:12px; }
.footer-bottom { border-top:1px solid #333; padding-top:28px; display:flex; justify-content:space-between; color:#8f8f8f; font-size:11px; text-transform:uppercase; letter-spacing:.1em; }
.footer-bottom a { color:#fff; }
.experience-hero { background:var(--ink); color:#fff; padding:clamp(80px,9vw,135px) clamp(24px,8vw,122px) 70px; }
.experience-hero h1 { font-size:clamp(56px,8vw,118px); line-height:.92; letter-spacing:-.065em; margin:55px 0 80px; max-width:1200px; }
.experience-deck { border-top:1px solid #383838; padding-top:32px; display:flex; justify-content:space-between; align-items:flex-end; gap:50px; }
.experience-deck > p { max-width:650px; color:#bbb; font-size:18px; line-height:1.7; margin:0; }
.career-number { display:flex; align-items:center; gap:15px; color:#999; font-size:11px; text-transform:uppercase; line-height:1.5; }
.career-number strong { color:var(--orange); font-family:var(--font-serif),serif; font-size:66px; line-height:1; font-weight:500; }
.career-list { margin-top:70px; }
.career-chapter { display:grid; grid-template-columns:90px 1fr; border-top:1px solid var(--grey); padding:45px 0 70px; }
.chapter-number { color:var(--orange); font-size:12px; font-weight:800; }
.chapter-copy { display:grid; grid-template-columns:.5fr 1fr; column-gap:6vw; }
.chapter-era { color:#777; text-transform:uppercase; letter-spacing:.14em; font-size:10px; font-weight:800; padding-top:10px; }
.chapter-copy h2 { font-size:clamp(33px,4vw,58px); grid-column:2; }
.chapter-copy > p { grid-column:2; color:#666; line-height:1.75; max-width:720px; font-size:16px; }
.chapter-tags { grid-column:2; display:flex; flex-wrap:wrap; gap:8px; margin-top:15px; }
.chapter-tags span { border:1px solid var(--grey); padding:9px 12px; font-size:10px; font-weight:700; color:#666; }
.beyond-work { padding:clamp(80px,9vw,130px) clamp(24px,8vw,122px); background:var(--orange); color:#fff; }
.beyond-work .section-kicker span { color:var(--ink); }
.beyond-work .light { color:#ffe0ca; }
.beyond-grid,.now-grid { display:grid; grid-template-columns:1fr 1fr; gap:8vw; margin-top:70px; align-items:start; }
.beyond-grid h2 em { color:var(--ink); }
.beyond-grid p { font-size:18px; line-height:1.75; margin-top:0; }
.now-grid .lead { font-size:23px; color:var(--ink); }
.now-grid p { color:#666; line-height:1.75; }
.journal-hero { background:var(--ink); color:#fff; padding:clamp(80px,9vw,135px) clamp(24px,8vw,122px) 70px; }
.journal-hero h1 { font-size:clamp(58px,8vw,120px); line-height:.92; letter-spacing:-.065em; margin:52px 0 80px; }
.journal-deck { border-top:1px solid #383838; padding-top:32px; display:flex; justify-content:space-between; align-items:flex-end; gap:50px; }
.journal-deck > p { max-width:700px; color:#bbb; font-size:18px; line-height:1.7; margin:0; }
.journal-deck > div { display:flex; align-items:center; gap:14px; color:#888; font-size:10px; text-transform:uppercase; line-height:1.5; }
.journal-deck strong { color:var(--orange); font:500 68px/1 var(--font-serif),serif; }
.journal-list { margin-top:70px; }
.journal-entry { display:grid; grid-template-columns:65px 170px 1fr; gap:35px; border-top:1px solid var(--grey); padding:45px 0 80px; }
.journal-marker { display:flex; flex-direction:column; align-items:center; color:var(--orange); font-size:11px; font-weight:800; }
.journal-marker i { display:block; width:1px; min-height:100px; flex:1; background:linear-gradient(var(--orange),transparent); margin-top:20px; }
.journal-date { display:flex; flex-direction:column; gap:10px; padding-top:3px; }
.journal-date time { font-size:12px; font-weight:800; }
.journal-date span { color:#888; font-size:10px; text-transform:uppercase; letter-spacing:.13em; }
.journal-content h2 { font-size:clamp(30px,3.7vw,54px); max-width:900px; }
.journal-summary { color:#555; font-size:18px; line-height:1.7; max-width:800px; margin:28px 0; }
.journal-content ul { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 25px; max-width:850px; }
.journal-content li { color:#666; font-size:13px; line-height:1.55; padding:11px 0 11px 18px; border-bottom:1px solid #e8e8e8; position:relative; }
.journal-content li:before { content:""; position:absolute; left:0; top:18px; width:5px; height:5px; border-radius:50%; background:var(--orange); }
.journal-content blockquote { margin:32px 0 0; padding:18px 24px; border-left:3px solid var(--orange); background:#f7f7f5; font-family:var(--font-serif),serif; font-style:italic; color:#555; max-width:800px; line-height:1.65; }
.journal-next { background:var(--orange); color:#fff; padding:clamp(80px,9vw,130px) clamp(24px,8vw,122px); }
.journal-next .section-kicker span { color:var(--ink); }
.journal-next > div:last-child { display:grid; grid-template-columns:1fr 1fr; gap:8vw; margin-top:65px; align-items:end; }
.journal-next h2 em { color:var(--ink); }
.journal-next p { font-size:18px; line-height:1.7; }
.journal-button { display:inline-block; color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:9px; font-size:12px; font-weight:800; margin-top:18px; }

@media (max-width:800px) {
  .site-header { height:78px; padding:0 20px; }
  .brand { width:178px; height:42px; }
  nav a:not(.nav-contact) { display:none; }
  .nav-contact { padding:11px 14px; }
  .hero { min-height:calc(100svh - 78px); padding-top:80px; }
  .hero-orbit { opacity:.55; width:300px; height:300px; }
  .hero h1 { margin-top:35px; }
  .hero-foot { align-items:flex-start; gap:30px; }
  .round-link { flex:0 0 48px; }
  .story-grid,.platform-grid,.notes,.agents-intro,.tech-grid { grid-template-columns:1fr; gap:45px; margin-top:50px; }
  .principles { grid-template-columns:1fr; margin-top:70px; }
  .principles div { border-right:0; border-bottom:1px solid var(--grey); margin:0; padding-right:0; }
  .notes-heading { position:static; }
  .agent-flow { grid-template-columns:1fr; }
  .flow-arrow { transform:rotate(90deg); min-height:25px; }
  .control-grid { grid-template-columns:1fr; }
  .control-grid article { border-right:0; border-bottom:1px solid var(--grey); margin:0; padding-right:0; }
  .footer-top { align-items:flex-start; flex-direction:column; gap:65px; }
  .footer-bottom { flex-direction:column; gap:16px; }
  .experience-deck { align-items:flex-start; flex-direction:column; }
  .career-chapter { grid-template-columns:42px 1fr; }
  .chapter-copy { grid-template-columns:1fr; }
  .chapter-copy h2,.chapter-copy > p,.chapter-tags { grid-column:1; }
  .chapter-era { margin-bottom:22px; }
  .beyond-grid,.now-grid { grid-template-columns:1fr; gap:45px; }
  .journal-deck { flex-direction:column; align-items:flex-start; }
  .journal-entry { grid-template-columns:35px 1fr; gap:20px; }
  .journal-date { grid-column:2; }
  .journal-content { grid-column:2; }
  .journal-content ul { grid-template-columns:1fr; }
  .journal-next > div:last-child { grid-template-columns:1fr; gap:30px; }
}

.build-days-upload { padding:70px clamp(24px,8vw,122px); display:flex; align-items:flex-end; justify-content:space-between; gap:40px; background:#f7f7f5; border-top:1px solid var(--grey); }
.build-days-upload h2 { margin-top:32px; }
.story-grid > h2 { font-size:clamp(40px,4.7vw,70px); font-weight:600; }

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }
