:root { --paper:#f8f7f2; --ink:#172b38; --muted:#58666b; --jade:#087f6b; --line:#dce1dc; --serif:Georgia,"Times New Roman",serif; --ease:cubic-bezier(.2,.8,.2,1); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:32px; } body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; } a:hover { color:var(--jade); } button,input,textarea { font:inherit; } :focus-visible { outline:3px solid var(--jade); outline-offset:5px; } .wrap { max-width:1240px; padding:0 48px; margin:auto; }
.site-header { max-width:1240px; padding:32px 48px; margin:auto; display:flex; justify-content:space-between; align-items:center; gap:24px; }
.site-brand { display:flex; align-items:center; gap:12px; font-weight:650; letter-spacing:-.02em; } .site-brand img { object-fit:contain; } .site-brand small { display:block; font-size:11px; font-weight:450; color:var(--muted); letter-spacing:0; margin-top:2px; }
.site-header nav { display:flex; gap:32px; align-items:center; font-size:13px; font-weight:550; } .nav-contact { border:1px solid var(--line); padding:10px 16px; border-radius:4px; } .nav-contact i { margin-left:12px; }
.hero { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:64px; padding-top:64px; padding-bottom:72px; }
.eyebrow { font-size:10px; letter-spacing:.14em; font-weight:650; margin:0 0 24px; color:var(--muted); } .eyebrow span { display:inline-block; width:6px; height:6px; background:var(--jade); border-radius:50%; margin-right:8px; vertical-align:middle; }
h1 { font:normal 88px/1.04 var(--serif); letter-spacing:-.055em; margin:0 0 40px; max-width:790px; } .pre-line { white-space:pre-line; }
.hero-bottom { display:flex; align-items:center; justify-content:space-between; gap:32px; } .hero-bottom p { max-width:390px; font-size:15px; color:var(--muted); margin:0; }
.circle-link { display:grid; place-items:center; width:56px; height:56px; flex-shrink:0; border:1px solid var(--line); border-radius:50%; transition:background 180ms ease,transform 180ms var(--ease); } .circle-link:hover { background:#e7f0e7; transform:translateY(3px); }
.hero-note { display:flex; flex-direction:column; justify-content:space-between; border-left:1px solid var(--line); padding-left:32px; } .note-number,.note-location { font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.hero-note img { width:160px; height:160px; object-fit:contain; } .hero-note p { font:20px/1.4 var(--serif); letter-spacing:-.02em; margin:12px 0 24px; }
.services-rail { border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .services-rail .wrap { display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; padding-top:22px; padding-bottom:22px; }
.services-rail span { display:flex; align-items:center; gap:40px; font-size:12px; font-weight:500; } .services-rail i { font-size:10px; color:var(--jade); }
.work-section { padding-top:88px; padding-bottom:88px; } .section-head { display:flex; align-items:end; justify-content:space-between; gap:32px; margin-bottom:40px; } .section-head .eyebrow { margin-bottom:16px; }
h2 { font:normal 48px/1.12 var(--serif); letter-spacing:-.045em; margin:0; } .jade { color:var(--jade); } .section-head > p { font-size:12px; color:var(--muted); margin:0; }
.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 32px; } .project-visual { position:relative; aspect-ratio:1.6; background:#dde9e2; border-radius:6px; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.project-visual img { width:100%; height:100%; object-fit:cover; object-position:top; transition:transform 300ms var(--ease); } .project-card:hover .project-visual img { transform:scale(1.025); }
.visual-1 { background:#dce5eb; } .visual-2 { background:#e7e2d7; } .visual-3 { background:#e8dcd3; } .visual-4 { background:#dbe5dd; }
.project-monogram { font:normal 100px/1 var(--serif); opacity:.8; } .project-domain { font-size:11px; margin-top:24px; letter-spacing:.1em; }
.project-meta { display:flex; justify-content:space-between; align-items:start; gap:24px; padding:20px 2px 0; } .project-meta h3 { margin:0 0 4px; font-size:17px; font-weight:600; letter-spacing:-.03em; } .project-meta p { margin:0; font-size:12px; color:var(--muted); } .project-arrow { width:36px; height:36px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; flex-shrink:0; }
.about-section { background:#edf0e8; padding:80px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; } .about-grid h2 { font-size:42px; } .about-copy { margin:0 0 28px; color:var(--muted); font-size:16px; line-height:1.8; } .principles { display:flex; flex-direction:column; } .principles span { padding:14px 0; border-top:1px solid #d4dcd2; font-size:12px; } .principles b { color:var(--jade); font-size:10px; margin-right:24px; }
.contact-section { display:grid; grid-template-columns:1fr 1fr; gap:80px; padding-top:88px; padding-bottom:88px; } .contact-section h2 { font-size:58px; } .contact-section h2 em { font-weight:normal; color:var(--jade); } .contact-section p { font-size:13px; color:var(--muted); margin:24px 0; } .email-link { font-size:14px; border-bottom:1px solid var(--jade); padding-bottom:6px; }
.contact-form-wrap { padding-top:14px; } .contact-form label { display:block; font-size:11px; font-weight:600; margin:0 0 10px; } .contact-form input,.contact-form textarea { width:100%; padding:12px; border:1px solid var(--line); background:transparent; border-radius:4px; font-size:14px; color:var(--ink); } .contact-form input:focus,.contact-form textarea:focus { border-color:var(--jade); } .contact-form textarea { resize:vertical; min-height:140px; } .contact-form ::placeholder { color:var(--muted); opacity:.8; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px; } .form-end { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:24px; } .form-end span { color:var(--muted); font-size:10px; } .form-end button { padding:13px 20px; color:white; background:var(--jade); border:0; border-radius:4px; cursor:pointer; font-size:12px; font-weight:600; } .form-end button i { margin-left:20px; } .form-end button:hover { background:#066756; } .form-end button:disabled { opacity:.6; cursor:wait; }
.contact-form .field-error { color:#aa332c; margin:8px 0 0; font-size:12px; } .form-success { padding:14px; border:1px solid #aacbbc; color:#086550; font-size:13px; margin-bottom:24px; border-radius:4px; }
.site-footer { display:flex; justify-content:space-between; align-items:center; gap:24px; padding-top:24px; padding-bottom:32px; border-top:1px solid var(--line); font-size:10px; color:var(--muted); } .site-footer div { display:flex; gap:24px; }
.honeypot,.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .skip-link { position:fixed; top:-100px; left:16px; z-index:10; padding:12px 20px; background:white; color:var(--jade); } .skip-link:focus { top:16px; }
.hero-main { animation:hero-in 450ms var(--ease); } @keyframes hero-in { from { opacity:.5; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media(max-width:1050px) { .hero { grid-template-columns:minmax(0,1fr) 200px; gap:32px; } h1 { font-size:68px; } .hero-note { padding-left:24px; } .hero-note img { width:130px; height:130px; } .about-grid,.contact-section { gap:40px; } .contact-section h2 { font-size:48px; } }
@media(max-width:767px) { .wrap { padding-left:24px; padding-right:24px; } .site-header { padding:24px; align-items:start; } .site-header nav { gap:16px; font-size:12px; } .site-header nav > a:not(.nav-contact) { display:none; } .site-brand small { max-width:140px; font-size:10px; } .site-brand img { width:36px; height:36px; } .nav-contact { padding:8px 12px; white-space:nowrap; }
.hero { display:block; padding-top:48px; padding-bottom:48px; } h1 { font-size:56px; margin-bottom:32px; } .hero-note { display:none; } .hero-bottom { gap:24px; } .hero-bottom p { font-size:14px; } .circle-link { width:44px; height:44px; }
.services-rail .wrap { gap:12px; padding-top:20px; padding-bottom:20px; } .services-rail span { width:100%; justify-content:space-between; font-size:12px; }
.work-section { padding-top:56px; padding-bottom:56px; } .section-head { display:block; margin-bottom:28px; } .section-head > p { margin-top:20px; } h2 { font-size:40px; } .project-grid { grid-template-columns:1fr; gap:32px; }
.about-section { padding:56px 0; } .about-grid,.contact-section { grid-template-columns:1fr; gap:32px; } .about-grid h2 { font-size:36px; } .about-copy { font-size:15px; } .contact-section { padding-top:56px; padding-bottom:56px; } .contact-section h2 { font-size:48px; }
.form-row { grid-template-columns:1fr; gap:20px; } .contact-form input { min-height:44px; font-size:16px; } .contact-form textarea { font-size:16px; } .site-footer { align-items:start; flex-direction:column; } }
@media(max-width:370px) { h1 { font-size:48px; } .site-brand small { display:none; } .site-header { gap:12px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none !important; transition:none !important; } }

.preview-banner { padding:16px 24px; background:#173d35; color:white; text-align:center; } .preview-banner a { color:white; }
.faq-section { padding-block:80px; } .faq-list { max-width:840px; margin-left:auto; } .faq-list details { border-top:1px solid #d8ded8; padding:8px 0; } .faq-list summary { padding:20px 0; cursor:pointer; font-size:18px; font-weight:600; min-height:44px; } .faq-list p { max-width:70ch; line-height:1.75; padding-bottom:16px; color:#59645f; } .privacy-copy { max-width:760px; padding-block:72px; } .privacy-copy h1 { font-family:Georgia,serif; font-size:48px; } .privacy-copy h2 { font-size:24px; margin-top:40px; } .privacy-copy p { line-height:1.8; }