:root { --ink:#122427; --teal:#007c7b; --teal-dark:#00605f; --ice:#d9f0ef; --paper:#f6f7f3; --line:#cfd8d5; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'Archivo',Arial,sans-serif; font-size:16px; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
.site-header { height:82px; padding:0 clamp(22px,5vw,76px); display:flex; align-items:center; justify-content:space-between; background:rgba(246,247,243,.94); border-bottom:1px solid rgba(18,36,39,.14); position:sticky; top:0; z-index:20; backdrop-filter:blur(12px); }
.brand { display:inline-flex; align-items:center; gap:11px; }
.brand-mark { width:31px; height:31px; background:var(--teal); display:grid; place-items:center; clip-path:polygon(50% 0,100% 100%,66% 100%,50% 58%,34% 100%,0 100%); }
.brand-mark span { width:7px; height:7px; background:var(--paper); border-radius:50%; transform:translateY(7px); }
.brand-type { font-family:'Space Grotesk',Arial,sans-serif; font-weight:700; letter-spacing:-.04em; font-size:17px; }
.brand-type b { font-weight:400; color:var(--teal); }
nav { display:flex; gap:34px; font-size:14px; font-weight:600; }
nav a { padding:8px 0; border-bottom:2px solid transparent; }
nav a:hover,nav a:focus-visible { border-color:var(--teal); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:11px; border:0; background:var(--teal); color:white; padding:17px 23px; font-weight:700; cursor:pointer; transition:background .2s,transform .2s; }
.button:hover { background:var(--teal-dark); transform:translateY(-1px); }
.button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid #f0a93d; outline-offset:3px; }
.button-small { padding:12px 18px; font-size:14px; }
.hero { min-height:calc(100vh - 82px); display:grid; grid-template-columns:48% 52%; position:relative; border-bottom:1px solid var(--line); }
.hero-content { padding:clamp(80px,10vw,145px) clamp(30px,7vw,105px); align-self:center; }
.eyebrow,.section-kicker { color:var(--teal); font-size:13px; line-height:1; font-weight:800; letter-spacing:.13em; text-transform:uppercase; display:flex; align-items:center; gap:8px; }
h1,h2,h3 { font-family:'Space Grotesk',Arial,sans-serif; margin:0; }
h1 { margin:24px 0 27px; font-size:clamp(56px,6.6vw,105px); line-height:.9; letter-spacing:-.065em; max-width:740px; }
h1 em { color:var(--teal); font-style:normal; }
.hero-copy { max-width:610px; font-size:clamp(18px,1.4vw,22px); line-height:1.55; color:#455c5e; }
.hero-actions { margin-top:40px; display:flex; align-items:center; gap:28px; }
.text-link { display:inline-flex; align-items:center; gap:8px; font-weight:700; border-bottom:1px solid var(--ink); padding:7px 0; }
.hero-art { min-height:620px; background:#173a3d; position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:50px; color:white; }
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; }
.hero-art::before { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(145deg,rgba(0,96,95,.14),transparent 52%); }
.hero-art::after { content:''; position:absolute; inset:0; background:linear-gradient(160deg,transparent 20%,rgba(4,17,19,.7)); }
.hero-art::after { z-index:1; }
.hero-grid,.portfolio-pattern { position:absolute; inset:0; z-index:1; background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size:48px 48px; }
.placeholder-label { position:absolute; top:24px; left:24px; z-index:3; border:1px solid rgba(255,255,255,.55); padding:7px 9px; font-size:11px; font-weight:800; letter-spacing:.1em; color:white; }
.hero-caption { position:relative; z-index:2; display:flex; align-items:flex-end; justify-content:flex-end; width:100%; }
.hero-caption strong { font:700 clamp(26px,3vw,45px)/.95 'Space Grotesk',Arial,sans-serif; text-align:right; letter-spacing:-.04em; }
.frame-corner { position:absolute; z-index:2; width:45px; height:45px; }
.corner-one { border-top:2px solid white; border-left:2px solid white; top:23%; left:13%; }
.corner-two { border-bottom:2px solid white; border-right:2px solid white; right:13%; bottom:27%; }
.vertical-note { position:absolute; left:20px; bottom:25px; writing-mode:vertical-rl; transform:rotate(180deg); font-size:10px; letter-spacing:.18em; font-weight:800; }
.intro { padding:125px clamp(24px,8vw,130px) 75px; display:grid; grid-template-columns:1.15fr .85fr; gap:10vw; align-items:end; }
.intro h2,.section-heading h2,.approach h2,.inquiry h2 { font-size:clamp(42px,5vw,76px); line-height:1; letter-spacing:-.055em; margin-top:17px; }
.intro>p,.approach-copy>p { color:#496062; font-size:18px; line-height:1.75; max-width:610px; }
.services-grid { padding:0 clamp(24px,8vw,130px) 130px; display:grid; grid-template-columns:repeat(3,1fr); }
.service-card { border:1px solid var(--line); padding:clamp(28px,3.5vw,52px); min-height:360px; display:flex; flex-direction:column; margin-right:-1px; }
.service-top { display:flex; justify-content:space-between; color:var(--teal); font-size:13px; font-weight:800; }
.service-card h3 { font-size:27px; letter-spacing:-.03em; margin-top:auto; margin-bottom:18px; }
.service-card p { color:#536769; line-height:1.65; margin:0; }
.work { background:var(--ink); color:white; padding:120px clamp(24px,6vw,96px); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:40px; margin-bottom:56px; }
.section-kicker.light { color:#56d0cc; }
.work-note { max-width:350px; color:#afc0c0; line-height:1.55; font-size:14px; }
.portfolio-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:14px; }
.portfolio-card { min-height:410px; position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:30px; }
.portfolio-card:nth-child(2),.portfolio-card:nth-child(3) { min-height:340px; }
.portfolio-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.portfolio-card:nth-child(1) img { object-position:center 38%; }
.portfolio-card:nth-child(2) img { object-position:center 35%; }
.portfolio-card:nth-child(3) img { object-position:center 48%; }
.portfolio-card:nth-child(4) img { object-position:center; }
.portfolio-card:hover img { transform:scale(1.025); }
.portfolio-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(7,24,26,.05) 22%,rgba(7,24,26,.86) 100%); }
.portfolio-meta { z-index:3; display:grid; grid-template-columns:1fr auto; align-items:end; width:100%; }
.portfolio-meta>span:first-child { grid-column:1/-1; font-size:11px; letter-spacing:.15em; font-weight:800; margin-bottom:9px; }
.portfolio-meta h3 { font-size:clamp(27px,3vw,42px); letter-spacing:-.04em; }
.portfolio-meta p { grid-column:1/2; max-width:420px; margin:8px 0 0; color:#d8e3e2; line-height:1.45; font-size:14px; }
.portfolio-meta .index { font-size:13px; font-weight:800; }
.about { padding:120px clamp(24px,8vw,130px); display:grid; grid-template-columns:1fr 1fr; gap:9vw; border-bottom:1px solid var(--line); }
.about h2 { font-size:clamp(42px,5vw,76px); line-height:1; letter-spacing:-.055em; margin-top:17px; }
.about-copy p { color:#496062; font-size:18px; line-height:1.75; margin:0 0 24px; }
.about-facts { display:flex; flex-wrap:wrap; gap:10px; margin-top:40px; }
.about-facts span { border:1px solid #aac0bd; padding:10px 12px; color:var(--teal-dark); font-size:11px; font-weight:800; letter-spacing:.11em; }
.approach { padding:130px clamp(24px,8vw,130px); display:grid; grid-template-columns:.9fr 1.1fr; gap:9vw; }
.approach-copy>p { margin-top:28px; }
.approach-options { border-top:1px solid var(--line); }
.approach-options article { display:grid; grid-template-columns:60px 1fr; gap:24px; padding:38px 0; border-bottom:1px solid var(--line); }
.approach-options article>span { width:50px; height:50px; display:grid; place-items:center; background:var(--ice); color:var(--teal); }
.eyebrow-small { margin:0 0 10px; color:var(--teal); font-weight:800; letter-spacing:.13em; font-size:11px; }
.approach-options h3 { font-size:26px; letter-spacing:-.035em; margin-bottom:9px; }
.approach-options p:last-child { color:#5a6d6e; line-height:1.6; margin:0; }
.process { background:#deeeeb; padding:90px clamp(24px,8vw,130px); }
.process-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:48px; }
.process-grid article { padding:8px 46px 8px 0; border-right:1px solid #a6c3c0; margin-right:46px; }
.process-grid article:last-child { border:0; margin:0; }
.process-grid span { color:var(--teal); font-weight:800; font-size:13px; }
.process-grid h3 { font-size:25px; margin:50px 0 12px; }
.process-grid p { color:#4d6364; line-height:1.6; }
.inquiry { display:grid; grid-template-columns:.85fr 1.15fr; background:var(--teal); color:white; }
.inquiry-copy { padding:clamp(70px,9vw,130px); }
.inquiry-copy>p:not(.section-kicker) { font-size:18px; line-height:1.7; max-width:500px; color:#cce9e7; }
.service-area { margin-top:70px; display:flex; gap:15px; line-height:1.5; color:#d4efed; }
.service-area b { color:white; }
form { background:white; color:var(--ink); padding:clamp(45px,7vw,95px); display:flex; flex-direction:column; gap:22px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
label { display:flex; flex-direction:column; gap:9px; font-weight:700; font-size:14px; }
input,select,textarea { width:100%; border:1px solid #bdcdca; padding:14px 15px; background:#f8faf8; color:var(--ink); border-radius:0; }
textarea { resize:vertical; }.form-button { margin-top:7px; align-self:flex-start; }
.form-note,.form-status { margin:0; color:#667979; font-size:13px; }.form-status { display:flex; align-items:center; gap:8px; color:var(--teal-dark); font-weight:700; }
footer { padding:55px clamp(24px,6vw,96px); display:grid; grid-template-columns:1fr 1fr 1fr; align-items:end; gap:30px; background:var(--ink); color:#9db0b0; border-top:1px solid #365053; font-size:13px; line-height:1.7; }
.footer-brand { color:white; align-self:center; }.copyright { text-align:right; }
@media (max-width:900px) { nav{display:none}.hero{grid-template-columns:1fr}.hero-content{padding:80px 7vw}.hero-art{min-height:560px}.intro,.about,.approach,.inquiry{grid-template-columns:1fr}.intro,.about{gap:35px}.services-grid{grid-template-columns:1fr}.service-card{min-height:300px;margin-right:0;margin-bottom:-1px}.portfolio-grid{grid-template-columns:1fr}.portfolio-card{min-height:420px!important}.process-grid{grid-template-columns:1fr}.process-grid article{border-right:0;border-bottom:1px solid #a6c3c0;margin:0;padding:30px 0}.process-grid h3{margin-top:25px} }
@media (max-width:600px) { .site-header{height:72px}.site-header .button{font-size:0;width:44px;height:44px;padding:0}.brand-type{font-size:15px}.hero{min-height:auto}.hero-content{padding:65px 24px 75px}h1{font-size:clamp(52px,17vw,74px)}.hero-actions{align-items:flex-start;flex-direction:column}.hero-art{min-height:480px;padding:30px 24px}.hero-caption{flex-direction:column;align-items:flex-start;gap:18px}.hero-caption strong{text-align:left}.vertical-note{display:none}.intro{padding-top:90px}.section-heading{align-items:flex-start;flex-direction:column}.field-row{grid-template-columns:1fr}footer{grid-template-columns:1fr}.copyright{text-align:left} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}*{transition:none!important}.hero-video{display:none} }