:root { --ink:#111512; --cream:#f5f4ee; --green:#38d45a; --sage:#9baa98; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
button,input,textarea { font:inherit; }
.site-header { height:94px; padding:0 3.5vw; display:flex; align-items:center; justify-content:space-between; position:absolute; z-index:20; width:100%; color:white; border-bottom:1px solid rgba(255,255,255,.18); }
.wordmark { font-size:17px; font-weight:700; letter-spacing:.28em; text-transform:uppercase; white-space:nowrap; }
.nav { display:flex; align-items:center; gap:34px; font-size:14px; }
.nav>a:not(.nav-contact) { position:relative; }
.nav>a:not(.nav-contact)::after { content:""; position:absolute; left:0; right:100%; bottom:-8px; height:1px; background:var(--green); transition:right .25s; }
.nav>a:hover::after { right:0; }
.nav-contact { border:1px solid rgba(255,255,255,.8); padding:15px 22px; text-transform:uppercase; letter-spacing:.08em; font-size:12px; transition:.2s; }
.nav-contact:hover { background:white; color:var(--ink); }
.menu-toggle { display:none; background:none; border:0; padding:10px; }
.menu-toggle span { display:block; width:25px; height:1px; margin:6px; background:white; }
.hero { min-height:900px; height:100vh; position:relative; color:white; background:url('/hero.png') center/cover no-repeat; overflow:hidden; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,14,9,.78) 0%,rgba(7,14,9,.38) 48%,rgba(7,14,9,.05) 80%),linear-gradient(0deg,rgba(7,14,9,.35),transparent 42%); }
.hero-content { position:absolute; left:3.5vw; top:36%; max-width:820px; }
.eyebrow { text-transform:uppercase; letter-spacing:.23em; font-size:12px; font-weight:700; }
.light { color:rgba(255,255,255,.75); }
h1,h2,h3,p { margin-top:0; }
h1 { text-transform:uppercase; letter-spacing:-.055em; font-size:clamp(70px,7vw,108px); line-height:.88; margin:22px 0 20px; font-weight:800; }
.hero-copy { max-width:600px; font-size:19px; line-height:1.5; color:rgba(255,255,255,.9); margin-bottom:32px; }
.button { min-height:62px; padding:0 30px; display:inline-flex; align-items:center; justify-content:space-between; gap:45px; border:0; text-transform:uppercase; letter-spacing:.07em; font-size:13px; font-weight:700; cursor:pointer; }
.button span { font-size:22px; transition:transform .2s; }
.button:hover span { transform:translate(5px,-5px); }
.button-green { background:var(--green); color:#07130a; }
.button-green:hover { background:#fff; }
.hero-index { position:absolute; left:3.5vw; bottom:47px; width:280px; display:flex; align-items:center; gap:15px; font-size:13px; }
.hero-index i { height:1px; background:white; flex:1; position:relative; }
.hero-index i::after { content:""; display:block; height:2px; width:25%; background:var(--green); }
.stats-card { position:absolute; right:3.5vw; bottom:0; width:min(520px,45vw); background:var(--cream); color:var(--ink); display:grid; grid-template-columns:repeat(3,1fr); padding:34px 22px; }
.stats-card div { padding:0 22px; border-left:1px solid #d8d9d3; display:flex; flex-direction:column; gap:8px; }
.stats-card div:first-child { border:0; }
.stats-card strong { font-size:31px; font-weight:500; }
.stats-card span { font-size:10px; line-height:1.5; text-transform:uppercase; letter-spacing:.1em; }
.section { padding:120px 5vw; }
.section-kicker { display:flex; gap:18px; align-items:center; text-transform:uppercase; letter-spacing:.2em; font-size:11px; font-weight:700; margin-bottom:82px; }
.section-kicker span { color:#6e756f; }
.intro-copy,.services-head,.work-head,.process-grid,.contact { display:grid; grid-template-columns:1.45fr .75fr; gap:9vw; }
h2 { font-size:clamp(52px,6vw,90px); line-height:.98; letter-spacing:-.055em; font-weight:600; margin-bottom:0; }
h2 em { color:#6d7c70; font-weight:400; }
.intro-side { align-self:end; }
.intro-side p,.services-head>p,.work-head>p,.contact-main>p { font-size:17px; line-height:1.7; color:#545b56; }
.text-link { display:inline-flex; gap:24px; align-items:center; margin-top:22px; padding-bottom:8px; border-bottom:1px solid var(--ink); text-transform:uppercase; letter-spacing:.11em; font-size:12px; font-weight:700; }
.dark,.process,.contact { background:var(--ink); color:white; }
.services-head { align-items:end; }
.services-head>p { color:#aeb6b0; max-width:410px; }
.service-cards { margin-top:84px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.service-card { background:#18201a; overflow:hidden; position:relative; transition:transform .35s ease,background .35s ease; }
.service-card:hover { transform:translateY(-10px); background:#1f2922; }
.service-photo { min-height:285px; padding:25px; position:relative; display:flex; justify-content:space-between; align-items:flex-start; background-size:cover; background-position:center; overflow:hidden; }
.service-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,13,9,.08),rgba(8,13,9,.7)); }
.service-card-1 .service-photo { background-image:url('/service-design.png'); }
.service-card-2 .service-photo { background-image:url('/service-build.png'); }
.service-card-3 .service-photo { background-image:url('/service-care.png'); }
.service-photo span,.service-photo b { position:relative; z-index:1; }
.service-photo span { width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.7); font-size:11px; }
.service-photo b { position:absolute; right:18px; bottom:22px; font-size:52px; line-height:.82; text-transform:uppercase; letter-spacing:-.05em; color:white; writing-mode:vertical-rl; transform:rotate(180deg); opacity:.95; }
.service-card-copy { min-height:255px; padding:34px; position:relative; border-top:5px solid var(--green); }
.service-card-copy h3 { font-size:27px; font-weight:500; margin:0 0 20px; }
.service-card-copy p { color:#aeb7b0; line-height:1.65; margin:0; max-width:330px; }
.service-card-copy i { position:absolute; right:28px; bottom:25px; width:45px; height:45px; border-radius:50%; background:var(--green); color:var(--ink); display:grid; place-items:center; font-style:normal; font-size:19px; transition:transform .25s; }
.service-card:hover .service-card-copy i { transform:rotate(45deg); }
.work-head { align-items:end; margin-bottom:80px; }
.work-head p { max-width:420px; }
.project-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:28px; align-items:start; }
.project-small { margin-top:130px; }
.project-image { background-size:cover; background-position:center; width:100%; aspect-ratio:4/3; filter:saturate(.86); transition:transform .5s,filter .5s; }
.project { overflow:hidden; }
.project:hover .project-image { transform:scale(1.015); filter:saturate(1); }
.project-one { background-image:url('/project1.png'); }
.project-two { background-image:url('/project2.png'); }
.project-meta { display:grid; grid-template-columns:1fr auto; gap:4px; padding-top:20px; border-top:1px solid #b5bab6; margin-top:14px; }
.project-meta h3 { font-size:20px; margin:0; }
.project-meta p { font-size:12px; color:#687069; text-transform:uppercase; letter-spacing:.09em; grid-row:2; }
.project-meta span { grid-column:2; grid-row:1/3; align-self:center; font-size:12px; text-transform:uppercase; letter-spacing:.1em; }
.process-grid>div { position:sticky; top:70px; align-self:start; }
.process-grid h2 { font-size:clamp(46px,5vw,74px); margin-top:20px; }
.process ol { margin:0; padding:0; list-style:none; border-top:1px solid #4b524d; }
.process li { display:grid; grid-template-columns:60px 1fr; gap:20px; padding:30px 0; border-bottom:1px solid #4b524d; }
.process li>span { color:var(--green); font-size:12px; }
.process li h3 { font-size:25px; margin:0 0 10px; }
.process li p { color:#aab1ac; line-height:1.55; margin:0; }
.quote { text-align:center; max-width:1180px; margin:auto; }
.quote-mark { color:var(--green); font-size:100px; line-height:.55; margin-bottom:25px; }
.quote blockquote { margin:0; font-size:clamp(28px,3.5vw,52px); line-height:1.25; letter-spacing:-.035em; }
.quote-author { margin-top:34px; text-transform:uppercase; letter-spacing:.14em; color:#727a73; font-size:11px; }
.contact { padding-top:130px; padding-bottom:130px; }
.contact-main h2 { margin:26px 0 30px; }
.contact-main>p { color:#abb3ad; max-width:500px; }
.contact-form { display:grid; align-content:start; }
.contact-form label { text-transform:uppercase; letter-spacing:.12em; font-size:10px; color:#9ba49d; padding-top:20px; }
.contact-form input,.contact-form textarea { width:100%; border:0; border-bottom:1px solid #5b625d; background:transparent; color:white; padding:14px 0 18px; outline:0; resize:vertical; font-size:16px; text-transform:none; letter-spacing:0; }
.contact-form input:focus,.contact-form textarea:focus { border-color:var(--green); }
.contact-form .button { margin-top:34px; justify-self:start; }
footer { background:#080b09; color:white; padding:60px 5vw 35px; display:grid; grid-template-columns:1fr 1fr auto; gap:30px; align-items:start; }
footer p,footer a { color:#aeb5b0; font-size:13px; }
footer .wordmark { color:white; font-size:17px; }
footer div { display:flex; flex-direction:column; gap:10px; text-align:right; }
footer small { grid-column:1/-1; border-top:1px solid #303531; padding-top:24px; color:#747b76; font-size:10px; text-transform:uppercase; letter-spacing:.1em; }
.reveal { animation:rise .8s ease both; }
@keyframes rise { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }

@media (max-width:900px) {
  .site-header { height:76px; padding:0 22px; }
  .menu-toggle { display:block; position:relative; z-index:2; }
  .nav { position:absolute; inset:0 0 auto; background:var(--ink); padding:100px 25px 35px; display:none; flex-direction:column; align-items:flex-start; }
  .nav.open { display:flex; }
  .hero { min-height:780px; }
  .hero-content { left:24px; right:24px; top:26%; }
  h1 { font-size:clamp(54px,14vw,82px); }
  .hero-index { display:none; }
  .stats-card { width:100%; right:0; padding:22px 10px; }
  .stats-card div { padding:0 12px; }
  .stats-card strong { font-size:24px; }
  .section { padding:80px 24px; }
  .section-kicker { margin-bottom:50px; }
  .intro-copy,.services-head,.work-head,.process-grid,.contact { grid-template-columns:1fr; gap:45px; }
  .service-cards { grid-template-columns:1fr; }
  .service-photo { min-height:320px; }
  .service-photo b { font-size:46px; }
  .project-grid { grid-template-columns:1fr; }
  .project-small { margin-top:30px; }
  .process-grid>div { position:static; }
  footer { grid-template-columns:1fr; }
  footer div { text-align:left; }
}
@media (max-width:520px) {
  .hero-copy { font-size:16px; max-width:95%; }
  .stats-card span { font-size:8px; }
  .stats-card strong { font-size:20px; }
  .stats-card div { padding:0 8px; }
  .button { width:100%; }
  .project-meta { grid-template-columns:1fr; }
  .project-meta span { grid-column:1; grid-row:3; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }