:root { --ink: #172d42; --muted: #64727e; --paper: #f2f5f7; --blue-light: #a9d5f2; --line: #cbd7e0; --rust: #c66b42; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: 'Trebuchet MS', sans-serif; line-height: 1.6; }
a { color: inherit; }
.site-header { display: flex; justify-content: space-between; align-items: center; max-width: 1240px; margin: auto; padding: 26px 32px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-size: 13px; letter-spacing: .02em; line-height: 1.25; }
.brand strong { display: block; font-weight: 800; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; color: var(--ink); background: var(--blue-light); font-size: 12px; font-weight: 800; }
nav { display: flex; align-items: center; gap: 28px; font-family: 'DM Mono', monospace; font-size: 11px; text-transform: uppercase; }
nav a, .site-footer a { text-decoration: none; }
nav a:hover, .site-footer a:hover, .contact-details a:hover { color: var(--rust); }
.nav-button { border: 1px solid var(--ink); padding: 8px 12px; }
.section-wrap { max-width: 1240px; margin: auto; padding-left: 32px; padding-right: 32px; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, .85fr); gap: 9vw; align-items: center; min-height: 650px; padding-top: 50px; padding-bottom: 90px; }
.eyebrow, .section-number, .small-note, .visual-caption { color: var(--muted); font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.section-number { font-size: 13px; font-weight: 500; }
.eyebrow { margin: 0 0 24px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { letter-spacing: -.06em; line-height: .98; }
h1 { max-width: 700px; margin-bottom: 28px; font-size: clamp(55px, 7vw, 100px); font-weight: 700; }
h1 em, h2 em { color: var(--rust); font-family: Georgia, serif; font-weight: 400; }
.hero-intro { max-width: 490px; color: var(--muted); font-size: 17px; }
.hero-actions { display: flex; align-items: center; gap: 26px; margin-top: 38px; }
.button { display: inline-flex; gap: 22px; align-items: center; padding: 14px 18px; text-decoration: none; font-family: 'DM Mono', monospace; font-size: 11px; text-transform: uppercase; }
.button-primary { background: var(--ink); color: var(--paper); }
.button-primary:hover { background: var(--rust); }
.text-link { font-size: 13px; text-underline-offset: 5px; }
.hero-visual { position: relative; min-height: 445px; overflow: hidden; background: #163c60; }
.hero-visual > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .42; filter: saturate(.75); }
.visual-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(169,213,242,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(169,213,242,.16) 1px, transparent 1px); background-size: 38px 38px; }
.circuit { position: absolute; height: 1px; background: var(--blue-light); transform-origin: left; }
.circuit::before, .circuit::after, .circuit span { content: ''; position: absolute; width: 9px; height: 9px; border: 2px solid var(--blue-light); border-radius: 50%; background: #163c60; }
.circuit::before { left: 0; top: -5px; }.circuit::after { right: 0; top: -5px; }.circuit span { left: 48%; top: -5px; }
.circuit-one { width: 82%; left: 9%; top: 42%; transform: rotate(28deg); }.circuit-two { width: 70%; left: 18%; top: 68%; transform: rotate(-36deg); }
.visual-label { position: absolute; right: 25px; top: 24px; color: var(--blue-light); font-family: 'DM Mono', monospace; font-size: 12px; line-height: 1.1; letter-spacing: .08em; }.visual-label strong { font-size: 21px; }
.visual-caption { position: absolute; bottom: 22px; left: 24px; color: var(--blue-light); }
.intro-band, .services-band, .project-band { background: var(--blue-light); }.intro-grid, .contact-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 8vw; padding-top: 90px; padding-bottom: 90px; }.intro-grid h2, .contact-grid h2 { margin-bottom: 22px; font-size: clamp(40px, 5vw, 70px); }.intro-grid h2 span { color: var(--rust); font-family: Georgia, serif; font-weight: 400; }.intro-grid div > p { max-width: 570px; font-size: 16px; }
.services { padding-top: 105px; padding-bottom: 120px; }.section-heading { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 18px; }.service-list { border-bottom: 1px solid var(--line); }.service-item { display: grid; grid-template-columns: 90px 1fr 30px; gap: 20px; align-items: start; padding: 31px 0; border-bottom: 1px solid var(--line); }.service-item:last-child { border-bottom: 0; }.service-index { color: var(--rust); font-family: 'DM Mono', monospace; font-size: 12px; }.service-item h3 { margin-bottom: 7px; font-size: 24px; letter-spacing: -.03em; }.service-item p { max-width: 570px; margin-bottom: 0; color: var(--muted); }.service-symbol { font-size: 26px; font-weight: 300; }
.contact-band { background: var(--paper); }.contact-grid { align-items: end; }.contact-details { display: grid; gap: 5px; font-family: 'DM Mono', monospace; font-size: 13px; }.contact-details p { margin-bottom: 19px; font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.7; }.contact-details a { text-underline-offset: 4px; }
.project-photos { padding-top: 105px; padding-bottom: 110px; }.project-photos .section-heading { display: flex; justify-content: flex-start; align-items: baseline; gap: 8px; text-align: left; }.project-photos .small-note { margin-top: 0; font-size: 13px; }.photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 32px; align-items: start; }.photo-grid figure { margin: 0; }.photo-grid img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center; }.photo-grid figcaption { padding-top: 11px; color: var(--muted); font-family: 'DM Mono', monospace; font-size: 11px; text-transform: uppercase; }
.site-footer { display: flex; justify-content: space-between; gap: 20px; padding-top: 25px; padding-bottom: 25px; color: var(--muted); font-family: 'DM Mono', monospace; font-size: 10px; text-transform: uppercase; }.site-footer span:last-child { display: flex; gap: 22px; }
.legal-page { min-height: calc(100vh - 130px); padding-top: 100px; padding-bottom: 100px; }.legal-page h1 { font-size: clamp(52px, 8vw, 96px); margin-bottom: 70px; }.legal-content { max-width: 720px; margin-left: 25%; }.legal-content h2 { margin-top: 42px; font-size: 21px; letter-spacing: -.03em; }.legal-content p, .legal-content ul, .legal-content ol, .legal-content li { color: var(--muted); }.legal-content a { color: var(--ink); }.legal-note { border-left: 3px solid var(--rust); padding: 15px 20px; background: #e5e7dd; }
@media (max-width: 980px) { .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .site-header { padding: 20px; align-items: flex-start; }.site-header nav { gap: 12px; }.site-header nav a:not(.nav-button) { display: none; }.section-wrap { padding-left: 20px; padding-right: 20px; }.hero { display: block; min-height: auto; padding-top: 65px; padding-bottom: 70px; }.hero-intro { font-size: 15px; }.hero-visual { min-height: 310px; margin-top: 58px; }.intro-grid, .contact-grid { display: block; padding-top: 65px; padding-bottom: 65px; }.intro-grid .section-number, .contact-grid .eyebrow { margin-bottom: 38px; }.services, .project-photos { padding-top: 70px; padding-bottom: 80px; }.section-heading { display: block; }.small-note { margin-top: 25px; }.service-item { grid-template-columns: 40px 1fr 20px; gap: 10px; }.service-item h3 { font-size: 20px; }.service-item p { font-size: 14px; }.photo-grid { display: grid; grid-template-columns: 1fr; }.legal-page { padding-top: 65px; }.legal-page h1 { margin-bottom: 50px; }.legal-content { margin-left: 0; }.site-footer { display: block; line-height: 2; }.site-footer span:last-child { gap: 14px; } }