:root { --background:#f3f0e8; --surface:#e8e3d8; --surface-light:#fffdf8; --text:#16243a; --muted-text:#5d6878; --accent:#d85f3f; --accent-dark:#a83f27; --green:#2d8061; --border:#c9c3b7; --grid-line:rgba(22,36,58,.06); --maximum-width:1180px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background-color:var(--background); background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); background-size:32px 32px; color:var(--text); font-family:"Segoe UI",Arial,Helvetica,sans-serif; line-height:1.65; }
a { color:var(--accent-dark); } a:hover { color:var(--accent); } p { margin-top:0; }
.container { width:min(90%,var(--maximum-width)); margin:0 auto; }
.site-header { position:sticky; top:0; z-index:1000; background:rgba(243,240,232,.94); border-bottom:1px solid var(--border); backdrop-filter:blur(12px); }
.header-content { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.site-name { display:flex; align-items:center; gap:11px; color:var(--text); font-weight:750; text-decoration:none; }
.logo-mark { display:grid; place-items:center; width:36px; height:36px; color:white; background:var(--text); border-radius:4px; font-size:.78rem; letter-spacing:.05em; }
.nav-links { display:flex; flex-wrap:wrap; gap:24px; margin:0; padding:0; list-style:none; }
.nav-links a { color:var(--muted-text); font-size:.91rem; font-weight:600; text-decoration:none; }
.nav-links a:hover { color:var(--accent); }
.hero { min-height:81vh; display:flex; align-items:center; padding:110px 0 95px; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr); gap:clamp(55px,8vw,110px); align-items:center; }
.eyebrow,.section-label { margin-bottom:16px; color:var(--accent-dark); font-size:.78rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
h1,h2,h3 { line-height:1.12; }
h1 { max-width:780px; margin:0 0 28px; font-size:clamp(3.15rem,7vw,6.3rem); letter-spacing:-.055em; }
h1 span { color:var(--accent); }
h2 { max-width:790px; margin:0 0 26px; font-size:clamp(2rem,4vw,3.45rem); letter-spacing:-.035em; }
h3 { margin:0 0 14px; font-size:1.35rem; }
.hero-text { max-width:730px; color:var(--muted-text); font-size:1.13rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.button { display:inline-block; padding:13px 21px; border:1px solid var(--accent); border-radius:5px; font-weight:750; text-decoration:none; }
.primary-button { color:white; background:var(--accent); }
.primary-button:hover { color:white; background:var(--text); border-color:var(--text); }
.secondary-button { color:var(--accent-dark); background:transparent; }
.secondary-button:hover { color:white; background:var(--accent); }
.control-card { position:relative; padding:28px; background:var(--surface-light); border:1px solid var(--border); border-top:5px solid var(--text); box-shadow:12px 12px 0 rgba(22,36,58,.08); }
.control-card::before { content:""; position:absolute; top:15px; right:15px; width:9px; height:9px; border-top:2px solid var(--border); border-right:2px solid var(--border); }
.control-card-header,.case-meta,.progress-label { display:flex; justify-content:space-between; gap:18px; color:var(--muted-text); font-size:.78rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.control-card h2 { margin:25px 0; font-size:2rem; }
.live-status { color:var(--green); }
.live-status i { display:inline-block; width:8px; height:8px; margin-right:6px; background:var(--green); border-radius:50%; }
.status-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin:0 0 25px; background:var(--border); border:1px solid var(--border); }
.status-grid div { padding:13px; background:var(--surface-light); }
.status-grid dt { color:var(--muted-text); font-size:.71rem; text-transform:uppercase; letter-spacing:.08em; }
.status-grid dd { margin:2px 0 0; font-weight:750; }
.progress-track,.mini-progress { overflow:hidden; height:8px; margin-top:8px; background:var(--surface); border-radius:99px; }
.progress-track span,.mini-progress span { display:block; height:100%; background:var(--accent); }
.control-note { margin:18px 0 0; color:var(--muted-text); font-size:.86rem; }
.metric-strip { color:white; background:var(--text); }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); }
.metrics div { padding:25px 22px; border-left:1px solid rgba(255,255,255,.16); }
.metrics div:last-child { border-right:1px solid rgba(255,255,255,.16); }
.metrics strong,.metrics span { display:block; }
.metrics strong { color:#f2b39f; font-size:1.55rem; }
.metrics span { color:#c6ccd4; font-size:.81rem; }
.section { padding:105px 0; }
.split-layout { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(50px,8vw,110px); align-items:start; }
.body-copy p,.section-intro,.charter-grid p { color:var(--muted-text); font-size:1.05rem; }
.tag-list { display:flex; flex-wrap:wrap; gap:9px; margin:30px 0 0; padding:0; list-style:none; }
.tag-list li { padding:7px 11px; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:4px; font-size:.82rem; font-weight:650; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:35px; }
.text-link { margin-bottom:34px; font-weight:750; text-decoration:none; }
.roadmap-section { background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.timeline { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:38px 0 0; padding:0; list-style:none; }
.timeline li { position:relative; min-height:245px; padding:45px 26px 25px 0; border-top:2px solid var(--border); }
.timeline li::before { content:""; position:absolute; top:-7px; left:0; width:12px; height:12px; background:var(--surface); border:2px solid var(--border); border-radius:50%; }
.timeline li>span { display:block; margin-bottom:25px; color:var(--muted-text); font-size:.8rem; font-weight:800; }
.timeline li p { color:var(--muted-text); font-size:.92rem; }
.timeline .timeline-state { margin-bottom:8px; color:var(--accent-dark); font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.timeline li.complete,.timeline li.current { border-color:var(--accent); }
.timeline li.complete::before { background:var(--accent); border-color:var(--accent); }
.timeline li.current::before { background:var(--surface); border:4px solid var(--accent); }
.case-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:42px; }
.case-card { padding:30px; background:var(--surface-light); border:1px solid var(--border); border-radius:6px; transition:transform .2s ease,box-shadow .2s ease; }
.case-card:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(22,36,58,.09); }
.case-card.featured { grid-row:span 2; padding:38px; border-top:5px solid var(--accent); }
.case-card p { color:var(--muted-text); }
.case-id { margin:34px 0 9px; color:var(--accent-dark)!important; font-size:.75rem; font-weight:800; letter-spacing:.13em; }
.status-badge { padding:4px 9px; color:var(--accent-dark); background:#f9e2da; border-radius:99px; }
.complete-badge { color:var(--green); background:#dcebe4; }
.planned-badge { color:#6c6045; background:#ece4cf; }
.deliverables { display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; }
.deliverables strong { width:100%; margin-bottom:4px; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }
.deliverables span { padding:5px 8px; background:var(--surface); border:1px solid var(--border); border-radius:3px; font-size:.77rem; }
.skills-used { margin-top:28px; color:var(--accent-dark)!important; font-size:.82rem; font-weight:700; }
.mini-progress { margin:29px 0; }
.artifacts-section { background:var(--text); color:white; }
.artifacts-section .section-label { color:#f2b39f; }
.artifacts-section .section-intro { color:#aeb7c4; }
.artifact-list { border-top:1px solid #47556a; }
.artifact-list>div { display:grid; grid-template-columns:40px 1fr auto; gap:18px; align-items:center; padding:19px 0; border-bottom:1px solid #47556a; }
.artifact-list span { color:#f2b39f; font-size:.78rem; font-weight:800; }
.artifact-list p { margin:0; }
.artifact-list strong,.artifact-list small { display:block; }
.artifact-list small { color:#aeb7c4; }
.artifact-list b { color:#aeb7c4; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; }
.contact-content { display:grid; grid-template-columns:1.2fr .8fr; gap:70px; align-items:center; }
.contact-content p { color:var(--muted-text); }
.contact-links { display:flex; flex-direction:column; border-top:1px solid var(--border); }
.contact-links a { display:flex; justify-content:space-between; gap:20px; padding:18px 0; color:var(--text); border-bottom:1px solid var(--border); text-decoration:none; }
.contact-links span { color:var(--muted-text); font-size:.8rem; }
.site-footer { padding:28px 0; color:#c6ccd4; background:#0f1a2a; border-top:1px solid #344157; }
.footer-content { display:flex; justify-content:space-between; gap:20px; font-size:.85rem; }
.footer-content p { margin:0; } .site-footer a { color:#f2b39f; }
.subpage-hero { padding:120px 0 90px; }
.subpage-hero h1 { max-width:950px; }
.charter-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:90px; }
.charter-details { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin:0; background:var(--border); border:1px solid var(--border); }
.charter-details div { padding:22px; background:var(--surface-light); }
.charter-details dt { color:var(--muted-text); font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.charter-details dd { margin:5px 0 0; font-weight:750; }
.detailed-timeline { grid-template-columns:repeat(3,1fr); row-gap:35px; }
.control-grid { grid-template-columns:repeat(3,1fr); }
@media (max-width:900px) { .hero-grid,.split-layout,.charter-grid,.contact-content { grid-template-columns:1fr; } .hero { min-height:auto; } .control-card { max-width:560px; } .metrics { grid-template-columns:1fr 1fr; } .timeline,.detailed-timeline { grid-template-columns:1fr 1fr; } .case-grid,.control-grid { grid-template-columns:1fr; } .case-card.featured { grid-row:auto; } }
@media (max-width:680px) { .header-content { padding:16px 0; flex-direction:column; align-items:flex-start; } .nav-links { gap:13px 18px; } .hero,.subpage-hero { padding:75px 0; } h1 { font-size:clamp(2.8rem,15vw,4.2rem); } .section { padding:75px 0; } .metrics { grid-template-columns:1fr; } .metrics div,.metrics div:last-child { border-right:1px solid rgba(255,255,255,.16); } .timeline,.detailed-timeline { grid-template-columns:1fr; } .timeline li { min-height:0; padding-bottom:35px; } .section-heading { display:block; } .text-link { display:inline-block; } .footer-content { flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .case-card { transition:none; } }