:root { --ink: #10221b; --cream: #f3f0e8; --acid: #d7ff43; --mint: #bdebd1; --line: rgba(16,34,27,.18); --font-geist-sans: Inter, "Helvetica Neue", Arial, sans-serif; --font-geist-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font-geist-sans), Arial, sans-serif; }
a { color: inherit; text-decoration: none; }

.nav { height: 92px; display: flex; align-items: center; justify-content: space-between; padding: 0 5vw; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; font-size: 21px; font-weight: 680; letter-spacing: -.04em; }
.brand-mark { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--acid); }
.spark { font-size: 18px; line-height: 1; }
.nav-links { display: flex; align-items: center; gap: 34px; font-size: 14px; font-weight: 560; }
.nav-links > a:not(.nav-cta) { transition: opacity .2s; }
.nav-links > a:not(.nav-cta):hover { opacity: .55; }
.nav-cta { display: flex; gap: 22px; padding: 14px 17px; border: 1px solid var(--ink); border-radius: 4px; transition: background .2s, color .2s; }
.nav-cta:hover { background: var(--ink); color: var(--cream); }

.hero { position: relative; min-height: calc(100vh - 92px); overflow: hidden; padding: 9.5vh 5vw 12vh; border-bottom: 1px solid var(--line); }
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 4.5vh; font: 600 12px/1 var(--font-geist-mono), monospace; text-transform: uppercase; letter-spacing: .13em; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #33b76b; box-shadow: 0 0 0 5px rgba(51,183,107,.12); }
.hero h1 { margin: 0; max-width: 850px; font-size: clamp(66px, 8.7vw, 142px); line-height: .84; letter-spacing: -.075em; font-weight: 580; }
.hero h1 em { font-weight: 390; color: #5a7568; }
.hero-copy { max-width: 580px; margin: 6vh 0 0; font-size: clamp(18px, 1.45vw, 24px); line-height: 1.48; letter-spacing: -.025em; }
.hero-actions { display: flex; align-items: center; gap: 18px; margin-top: 4vh; }
.button { display: inline-flex; justify-content: space-between; align-items: center; gap: 42px; padding: 17px 19px; border-radius: 3px; font-size: 14px; font-weight: 620; }
.primary { background: var(--ink); color: white; }
.primary:hover { background: #254238; }
.text-button { padding-inline: 12px; }
.text-button:hover { opacity: .55; }

.signal-card { position: absolute; width: min(31vw, 460px); aspect-ratio: .83; right: 7vw; top: 14vh; border: 1px solid var(--line); border-radius: 220px 220px 6px 6px; background: linear-gradient(160deg, rgba(215,255,67,.75), rgba(189,235,209,.65) 56%, rgba(255,255,255,.35)); overflow: hidden; }
.signal-top { position: absolute; z-index: 2; top: 8%; left: 12%; right: 12%; display: flex; justify-content: space-between; font: 600 10px/1 var(--font-geist-mono), monospace; letter-spacing: .12em; }
.signal-orbit { position: absolute; border: 1px solid rgba(16,34,27,.35); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.orbit-one { width: 67%; aspect-ratio: 1; }
.orbit-two { width: 96%; aspect-ratio: 1; }
.signal-orbit i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); top: 10%; left: 20%; }
.orbit-two i { top: 62%; left: 95%; }
.signal-core { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 27%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--acid); box-shadow: 0 0 0 16px rgba(255,255,255,.26); }
.signal-core .spark { font-size: 34px; }
.signal-caption { position: absolute; bottom: 7%; left: 10%; right: 10%; display: flex; justify-content: space-between; font: 600 10px/1 var(--font-geist-mono), monospace; text-transform: uppercase; letter-spacing: .08em; }

.intro { padding: 13vh 5vw; display: grid; grid-template-columns: .65fr 1.6fr 1fr; gap: 5vw; align-items: start; }
.section-label { margin: 9px 0 0; font: 600 11px/1 var(--font-geist-mono), monospace; text-transform: uppercase; letter-spacing: .13em; }
.intro h2 { margin: 0; font-size: clamp(39px, 4.3vw, 68px); line-height: .99; letter-spacing: -.055em; font-weight: 540; }
.intro > p:last-child { margin: 8px 0 0; font-size: 17px; line-height: 1.65; color: #43584f; }

.approach-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.approach-card { position: relative; min-height: 490px; padding: 32px 3vw 40px; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: rgba(255,255,255,.16); }
.approach-card:last-child { border-right: 0; }
.approach-card.featured { background: var(--acid); }
.card-index { font: 600 10px/1 var(--font-geist-mono), monospace; letter-spacing: .13em; }
.card-symbol { margin: auto; width: 118px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; color: var(--acid); background: var(--ink); box-shadow: 0 0 0 26px rgba(16,34,27,.08), 0 0 0 52px rgba(16,34,27,.045); }
.card-symbol .spark { font-size: 34px; }
.approach-card h3 { margin: auto 0 12px; font-size: 27px; font-weight: 570; letter-spacing: -.04em; }
.approach-card p { margin: 0; max-width: 390px; color: #42554d; line-height: 1.58; }
.featured p { color: #304138; }
.code-lines { margin: auto; width: 62%; display: grid; gap: 13px; transform: rotate(-4deg); }
.code-lines i { display: block; height: 9px; border-radius: 10px; background: var(--ink); }
.code-lines i:nth-child(2) { width: 68%; margin-left: 18%; background: #72917f; }
.code-lines i:nth-child(3) { width: 82%; background: var(--mint); }
.code-lines i:nth-child(4) { width: 49%; margin-left: 35%; background: #72917f; }
.growth-mark { margin: auto; display: flex; gap: 13px; height: 130px; align-items: end; }
.growth-mark i { display: block; width: 36px; height: 48%; border-radius: 22px 22px 3px 3px; background: #72917f; }
.growth-mark i:nth-child(2) { height: 72%; background: var(--mint); }
.growth-mark i:nth-child(3) { height: 100%; background: var(--ink); }

.work { padding: 14vh 5vw; background: var(--ink); color: #f7f3e9; }
.work-heading { display: grid; grid-template-columns: .55fr 2fr; gap: 5vw; padding-bottom: 10vh; }
.work .section-label { color: var(--mint); }
.work h2 { margin: 0; font-size: clamp(46px, 5.4vw, 82px); line-height: .96; letter-spacing: -.06em; font-weight: 510; }
.work-list { border-top: 1px solid rgba(255,255,255,.22); }
.work-list article { display: grid; grid-template-columns: 70px 1fr 60px; gap: 2vw; align-items: start; padding: 32px 8px; border-bottom: 1px solid rgba(255,255,255,.22); transition: padding .25s, background .25s; }
.work-list article:hover { padding-inline: 24px; background: rgba(255,255,255,.04); }
.work-number { padding-top: 7px; color: var(--acid); font: 600 11px/1 var(--font-geist-mono), monospace; }
.work-list h3 { margin: 0 0 9px; font-size: clamp(25px, 2.5vw, 38px); font-weight: 480; letter-spacing: -.04em; }
.work-list p { margin: 0; max-width: 650px; color: #aab8b2; line-height: 1.55; }
.work-arrow { font-size: 27px; color: var(--acid); justify-self: end; }

.portfolio { padding: 14vh 5vw; border-bottom: 1px solid var(--line); background: #e7e2d7; }
.portfolio-heading { display: grid; grid-template-columns: .55fr 2fr; gap: 5vw; padding-bottom: 9vh; }
.portfolio-heading h2 { margin: 0; font-size: clamp(48px, 5.6vw, 86px); line-height: .93; letter-spacing: -.065em; font-weight: 520; }
.portfolio-heading > div > p { max-width: 570px; margin: 34px 0 0; color: #43584f; font-size: 18px; line-height: 1.6; }
.portfolio-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.project-card { min-height: 510px; padding: 30px 34px 36px; display: flex; flex-direction: column; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--cream); }
.project-card:nth-child(3) { background: var(--mint); }
.project-card:nth-child(4) { background: var(--acid); }
.project-meta { display: flex; justify-content: space-between; font: 600 10px/1 var(--font-geist-mono), monospace; text-transform: uppercase; letter-spacing: .12em; }
.project-meta span:last-child { color: #52655c; }
.project-card h3 { margin: 10vh 0 25px; max-width: 650px; font-size: clamp(34px, 3.5vw, 54px); line-height: .95; letter-spacing: -.055em; font-weight: 540; }
.project-summary { margin: 0; max-width: 630px; color: #31473e; font-size: 17px; line-height: 1.62; }
.project-outcome { margin: auto 0 28px; padding-top: 45px; max-width: 610px; font-weight: 620; line-height: 1.45; }
.project-card ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.project-card li { padding: 9px 11px; border: 1px solid rgba(16,34,27,.45); border-radius: 999px; font: 600 10px/1 var(--font-geist-mono), monospace; text-transform: uppercase; letter-spacing: .04em; }

.principles { min-height: 780px; display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.principles-visual { position: relative; min-height: 680px; overflow: hidden; background: var(--mint); border-right: 1px solid var(--line); }
.crosshair { position: absolute; background: rgba(16,34,27,.18); }
.crosshair.horizontal { width: 100%; height: 1px; top: 50%; }
.crosshair.vertical { height: 100%; width: 1px; left: 50%; }
.principles-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 135px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; background: var(--cream); box-shadow: 0 0 0 70px rgba(243,240,232,.23), 0 0 0 140px rgba(243,240,232,.15); }
.principles-core .spark { font-size: 38px; }
.principle-word { position: absolute; font: 600 10px/1 var(--font-geist-mono), monospace; letter-spacing: .14em; }
.word-one { top: 10%; left: 9%; }.word-two { top: 10%; right: 9%; }.word-three { bottom: 10%; left: 9%; }.word-four { bottom: 10%; right: 9%; }
.principles-copy { padding: 12vh 7vw; display: flex; flex-direction: column; justify-content: center; }
.principles-copy h2 { margin: 5vh 0 26px; font-size: clamp(48px, 5.3vw, 80px); line-height: .94; letter-spacing: -.06em; font-weight: 520; }
.principles-copy > p:not(.section-label) { margin: 0; max-width: 570px; color: #43584f; font-size: 18px; line-height: 1.65; }
.principles-copy blockquote { margin: 7vh 0 0; padding-left: 22px; max-width: 500px; border-left: 3px solid var(--acid); font-size: 18px; line-height: 1.55; font-weight: 560; }

.about { padding: 14vh 5vw; display: grid; grid-template-columns: .55fr 1.25fr .75fr; gap: 5vw; border-bottom: 1px solid var(--line); }
.about-copy h2 { margin: 0 0 36px; font-size: clamp(48px, 5vw, 76px); line-height: .96; letter-spacing: -.06em; font-weight: 520; }
.about-copy p { margin: 0; max-width: 690px; color: #43584f; font-size: 19px; line-height: 1.65; }
.about-stats { display: grid; border-top: 1px solid var(--line); }
.about-stats div { padding: 23px 0; display: grid; grid-template-columns: 95px 1fr; align-items: center; border-bottom: 1px solid var(--line); }
.about-stats strong { font-size: 34px; font-weight: 510; letter-spacing: -.06em; }
.about-stats span { color: #52655c; font: 500 12px/1.45 var(--font-geist-mono), monospace; text-transform: uppercase; letter-spacing: .04em; }

.contact { padding: 14vh 5vw 11vh; background: var(--acid); }
.website-inquiry { padding:14vh 5vw; background:#e7e2d7; border-bottom:1px solid var(--line); }.inquiry-heading{display:grid;grid-template-columns:.55fr 2fr;gap:5vw;padding-bottom:8vh}.inquiry-heading h2{margin:0;max-width:900px;font-size:clamp(48px,5.8vw,88px);line-height:.93;letter-spacing:-.065em;font-weight:520}.inquiry-heading>div>p{max-width:680px;margin:30px 0 0;color:#43584f;font-size:18px;line-height:1.65}.inquiry-form{padding:40px;border:1px solid var(--ink);background:var(--cream)}.inquiry-fields{display:grid;grid-template-columns:1fr 1fr;gap:25px 30px}.inquiry-field{display:grid;align-content:start;gap:9px}.inquiry-field.wide{grid-column:1/-1}.inquiry-field label{font:600 11px/1.3 var(--font-geist-mono),monospace;text-transform:uppercase;letter-spacing:.08em}.inquiry-field label span{color:#9b2d24}.inquiry-field input,.inquiry-field select,.inquiry-field textarea{width:100%;padding:15px;border:1px solid rgba(16,34,27,.45);border-radius:0;background:#fff;color:var(--ink);font:500 16px/1.4 var(--font-geist-sans),sans-serif}.inquiry-field textarea{min-height:145px;resize:vertical}.inquiry-field small{color:#52655c;line-height:1.45}.g-recaptcha{margin-top:30px}.inquiry-submit{width:100%;display:flex;justify-content:space-between;align-items:center;margin-top:22px;padding:18px;border:1px solid var(--ink);background:var(--ink);color:#fff;font-weight:700;cursor:pointer}.inquiry-submit:disabled{opacity:.45;cursor:not-allowed}.form-promise{margin:16px 0 0;color:#52655c;font:500 12px/1.5 var(--font-geist-mono),monospace}.form-trap{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}.inquiry-error{padding:14px 16px;border-left:4px solid #b3261e;background:#f8d7d4;line-height:1.45}.inquiry-success{padding:40px;border:1px solid var(--ink);background:var(--acid)}.inquiry-success strong{font-size:34px;letter-spacing:-.04em}.inquiry-success p{font-size:18px;line-height:1.6}.form-unavailable{padding:25px;border:1px solid var(--ink)}
.contact h2 { margin: 7vh 0 8vh; font-size: clamp(76px, 10.5vw, 164px); line-height: .78; letter-spacing: -.08em; font-weight: 560; }
.contact h2 em { color: #55723f; font-weight: 390; }
.contact-link { padding: 19px 0; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font-size: clamp(20px, 2.3vw, 34px); letter-spacing: -.035em; }
.contact-link span { font-size: 32px; transition: transform .2s; }
.contact-link:hover span { transform: translate(5px,-5px); }

footer { min-height: 235px; padding: 55px 5vw 32px; display: grid; grid-template-columns: 1fr 1fr; align-items: start; background: var(--ink); color: #f7f3e9; }
.footer-brand .brand-mark { color: var(--ink); background: var(--acid); }
footer > p { margin: 8px 0 0; justify-self: end; color: #aab8b2; }
.footer-end { align-self: end; grid-column: 1 / -1; display: flex; justify-content: space-between; color: #83978e; font: 500 10px/1 var(--font-geist-mono), monospace; text-transform: uppercase; letter-spacing: .11em; }
.archive-key { opacity: .35; padding: 5px; transition: opacity .2s, color .2s; }
.archive-key:hover, .archive-key:focus { opacity: 1; color: var(--acid); }

.archive { min-height: 100vh; background: #03277b; color: #f4f0df; font-family: var(--font-geist-mono), monospace; }
.archive-header { height: 78px; padding: 0 4vw; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,.32); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.archive-home:hover { color: #ffe950; }
.archive-hero { padding: 11vh 4vw 13vh; position: relative; border-bottom: 1px solid rgba(255,255,255,.32); }
.archive-cursor { position: absolute; right: 5vw; top: 7vh; color: #ffe950; font-size: clamp(90px, 14vw, 210px); line-height: 1; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.archive-hero > p:first-of-type { color: #ffe950; font-size: 11px; letter-spacing: .16em; }
.archive-hero h1 { margin: 7vh 0 5vh; max-width: 980px; font-family: var(--font-geist-sans), sans-serif; font-size: clamp(62px, 10vw, 150px); line-height: .83; letter-spacing: -.075em; font-weight: 580; }
.archive-intro { max-width: 650px; margin: 0; font: 400 18px/1.65 var(--font-geist-sans), sans-serif; color: #b7c7f1; }
.archive-section { padding: 10vh 4vw; display: grid; grid-template-columns: .6fr 1.5fr; gap: 6vw; border-bottom: 1px solid rgba(255,255,255,.32); }
.archive-title span { color: #ffe950; font-size: 11px; }
.archive-title h2 { margin: 18px 0 0; font: 560 clamp(34px, 4vw, 60px)/.95 var(--font-geist-sans), sans-serif; letter-spacing: -.05em; }
.archive-links { border-top: 1px solid rgba(255,255,255,.32); }
.archive-links a { min-height: 86px; display: grid; grid-template-columns: 1fr 1.2fr 30px; align-items: center; gap: 20px; border-bottom: 1px solid rgba(255,255,255,.32); transition: padding .2s, background .2s; }
.archive-links a:hover { padding-inline: 16px; background: rgba(255,255,255,.06); }
.archive-links a > span { font: 520 21px/1 var(--font-geist-sans), sans-serif; }
.archive-links small { color: #a7bcec; font-size: 11px; }
.archive-links b { color: #ffe950; font-size: 20px; font-weight: 400; }
.favorite-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.3); border: 1px solid rgba(255,255,255,.3); }
.favorite-grid a { min-height: 95px; padding: 20px; display: flex; align-items: center; justify-content: space-between; background: #03277b; font: 520 18px/1 var(--font-geist-sans), sans-serif; }
.favorite-grid a:hover { background: #ffe950; color: #03277b; }
.archive-footer { min-height: 180px; padding: 50px 4vw; display: flex; align-items: end; justify-content: space-between; background: #02194c; color: #8da4df; font-size: 10px; letter-spacing: .1em; }
.archive-footer a { color: #ffe950; }

@media (max-width: 900px) {
  .nav-links > a:not(.nav-cta) { display: none; }
  .hero { padding-top: 8vh; min-height: auto; }
  .hero h1 { font-size: clamp(60px, 15vw, 100px); }
  .signal-card { position: relative; width: 70vw; max-width: 430px; right: auto; top: auto; margin: 10vh auto 0; }
  .intro { grid-template-columns: 1fr; }
  .intro h2 { max-width: 650px; }
  .approach-grid { grid-template-columns: 1fr; }
  .approach-card { min-height: 430px; border-right: 0; border-bottom: 1px solid var(--line); }
  .approach-card:last-child { border-bottom: 0; }
  .work-heading { grid-template-columns: 1fr; }
  .portfolio-heading { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .project-card { min-height: 470px; }
  .principles { grid-template-columns: 1fr; }
  .principles-visual { min-height: 600px; border-right: 0; border-bottom: 1px solid var(--line); }
  .about { grid-template-columns: 1fr; }
  .inquiry-heading { grid-template-columns:1fr; }
  .about-stats { margin-top: 25px; }
}
@media (max-width: 560px) {
  .nav { height: 76px; padding-inline: 22px; }
  .nav-cta { padding: 11px 12px; }
  .nav-cta > span { display: none; }
  .hero { padding: 58px 22px 70px; }
  .hero h1 { font-size: 58px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .button { width: 100%; }
  .signal-card { width: 90vw; }
  .intro { padding: 80px 22px; }
  .approach-card { padding-inline: 22px; min-height: 390px; }
  .work { padding: 90px 22px; }
  .work-heading { padding-bottom: 55px; }
  .work-list article { grid-template-columns: 35px 1fr; }
  .work-arrow { display: none; }
  .portfolio { padding: 90px 22px; }
  .portfolio-heading { padding-bottom: 55px; }
  .project-card { min-height: 440px; padding: 25px 22px 30px; }
  .project-card h3 { margin-top: 65px; }
  .principles-visual { min-height: 470px; }
  .principles-core { width: 105px; box-shadow: 0 0 0 45px rgba(243,240,232,.23), 0 0 0 90px rgba(243,240,232,.15); }
  .principles-copy { padding: 80px 22px; }
  .about { padding: 80px 22px; }
  .about-stats div { grid-template-columns: 82px 1fr; }
  .contact { padding: 90px 22px 75px; }
  .website-inquiry { padding:90px 22px; }.inquiry-form{padding:25px 20px}.inquiry-fields{grid-template-columns:1fr}.inquiry-field.wide{grid-column:auto}
  .contact h2 { font-size: 72px; margin-block: 55px; }
  footer { grid-template-columns: 1fr; gap: 28px; padding-inline: 22px; }
  footer > p { justify-self: start; }
  .archive-header { padding-inline: 22px; }
  .archive-hero { padding: 80px 22px 90px; }
  .archive-cursor { font-size: 90px; }
  .archive-section { padding: 75px 22px; grid-template-columns: 1fr; }
  .archive-links a { grid-template-columns: 1fr 28px; }
  .archive-links small { display: none; }
  .favorite-grid { grid-template-columns: 1fr; }
  .archive-footer { padding-inline: 22px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 28px; }
}
/* Accessible navigation remains available at narrow widths. */
.skip-link{position:absolute;top:8px;left:16px;transform:translateY(-180%);z-index:100;background:#fff;color:#10221b;padding:12px 18px}.skip-link:focus{transform:none}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #087e8b;outline-offset:4px}section[id]{scroll-margin-top:20px}.inquiry-field small,.form-promise{font-size:.875rem;line-height:1.5}.inquiry-field fieldset{min-width:0}.inquiry-field fieldset label{font-size:1rem}.inquiry-field input[type=checkbox],.inquiry-field input[type=radio]{min-width:20px;min-height:20px}
@media(max-width:720px){.nav{flex-wrap:wrap;gap:12px}.nav .nav-links{display:flex;width:100%;flex-wrap:wrap;gap:8px 18px}.nav .nav-links a{display:inline-flex;align-items:center;min-height:44px;font-size:.875rem}.nav .nav-links .nav-cta{margin-left:0}.hero{padding-top:42px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media(max-width:720px){.nav{height:auto;min-height:92px;padding-top:16px;padding-bottom:16px}}