:root {
  --green-950: #03271f;
  --green-900: #06372b;
  --green-800: #0b4a38;
  --green-700: #166249;
  --cream: #f4efe3;
  --paper: #fbf8f0;
  --ink: #13211b;
  --gold: #e3aa1b;
  --gold-soft: #f0c95d;
  --line: rgba(8, 54, 42, .18);
  --muted: #6d756f;
  --shadow: 0 28px 70px rgba(0,0,0,.18);
  --condensed: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Narrow", sans-serif;
  --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--body);
  overflow-x: hidden;
}
img { display: block; width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: .075;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(210px, 300px) 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 14px 3.2vw;
  color: #fff;
  background: linear-gradient(180deg, rgba(2,28,22,.96), rgba(2,28,22,.82));
  border-bottom: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(15px);
  transition: padding .25s ease, background .25s ease;
}
.site-header.scrolled { padding-top: 9px; padding-bottom: 9px; background: rgba(3,39,31,.96); }
.brand { width: min(280px, 25vw); }
.brand img { aspect-ratio: 1383/392; object-fit: cover; border-radius: 12px; }
.site-nav { justify-self: center; display: flex; gap: clamp(18px, 2.5vw, 46px); align-items: center; }
.site-nav a { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; position: relative; }
.site-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-9px; height:2px; background:var(--gold); transition:right .25s ease; }
.site-nav a:hover::after { right:0; }
.header-cta { display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.header-cta span { color:var(--gold-soft); font-size:10px; text-transform:uppercase; letter-spacing:.16em; font-weight:800; }
.header-cta strong { font-size:15px; letter-spacing:.04em; }
.menu-toggle { display:none; background:none; border:0; padding:10px; }
.menu-toggle span:not(.sr-only) { display:block; width:27px; height:2px; background:white; margin:5px 0; }

.hero {
  min-height: 880px;
  display: grid;
  grid-template-columns: minmax(370px, 39%) 1fr;
  position: relative;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero-copy {
  position: relative;
  z-index: 3;
  padding: 190px 6vw 100px 5.2vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    linear-gradient(rgba(244,239,227,.98),rgba(244,239,227,.98)),
    repeating-linear-gradient(14deg, transparent 0 36px, rgba(5,62,48,.05) 37px 38px);
}
.hero-copy::before {
  content:"";
  position:absolute;
  inset:0;
  opacity:.18;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cpath d='M-20 85 C30 45 80 145 145 95 S245 35 280 88M-30 122 C28 88 76 176 148 132 S238 82 278 130M-22 158 C43 128 95 203 158 170 S239 125 279 170' fill='none' stroke='%2306342a' stroke-width='1' opacity='.55'/%3E%3C/svg%3E");
}
.hero-copy > * { position:relative; }
.eyebrow, .section-num { font-size:11px; letter-spacing:.19em; text-transform:uppercase; font-weight:900; color:#9b6b00; }
.hero h1 {
  margin: 22px 0 20px;
  font-family: var(--condensed);
  font-size: clamp(86px, 8vw, 152px);
  line-height: .82;
  letter-spacing: .012em;
  text-transform: uppercase;
  color: var(--green-950);
  max-width: 740px;
}
.hero h1 em { display:block; color:transparent; -webkit-text-stroke: 2px var(--green-950); font-style:normal; }
.hero-lede { max-width:520px; font-size:clamp(17px,1.35vw,22px); line-height:1.55; color:#314139; }
.hero-actions { display:flex; align-items:center; gap:30px; margin-top:30px; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:28px; min-width:220px; padding:17px 20px; font-size:12px; font-weight:900; letter-spacing:.09em; text-transform:uppercase; border:1px solid transparent; transition:transform .2s ease, background .2s ease, color .2s ease; }
.button:hover { transform:translateY(-2px); }
.button-gold { background:var(--gold); color:#12231c; box-shadow:0 12px 35px rgba(227,170,27,.24); }
.text-link { font-size:12px; text-transform:uppercase; letter-spacing:.11em; font-weight:900; border-bottom:1px solid currentColor; padding-bottom:6px; }
.hero-meta { margin-top:58px; display:flex; gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); max-width:560px; }
.hero-meta span { flex:1; padding:13px 10px 13px 0; font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.hero-meta span + span { border-left:1px solid var(--line); padding-left:16px; }
.hero-visual { position:relative; min-height:880px; overflow:hidden; }
.hero-visual img { position:absolute; inset:0; height:112%; object-fit:cover; object-position:center 45%; transform:translateY(var(--parallax,0)); }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg, rgba(4,32,25,.16), rgba(4,32,25,.04) 45%, rgba(4,32,25,.34)); }
.hero-stamp { position:absolute; right:4vw; bottom:54px; background:rgba(4,44,34,.94); color:white; padding:20px 22px; border-left:4px solid var(--gold); min-width:235px; }
.hero-stamp span { display:block; color:var(--gold-soft); font-size:10px; font-weight:900; letter-spacing:.18em; }
.hero-stamp strong { display:block; margin-top:6px; font-family:var(--condensed); font-size:31px; letter-spacing:.04em; }
.coordinate { position:absolute; right:18px; top:33%; writing-mode:vertical-rl; color:rgba(255,255,255,.86); font-size:10px; letter-spacing:.18em; font-weight:800; }
.hero-rule { position:absolute; left:39%; top:0; bottom:0; width:1px; background:rgba(6,55,43,.18); z-index:4; }

.field-notes {
  display:grid;
  grid-template-columns: minmax(270px, .78fr) 1.22fr minmax(300px, .9fr);
  background:var(--green-950);
  color:white;
  min-height:720px;
  position:relative;
}
.field-notes::before, .work::before, .process::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='260' viewBox='0 0 420 260'%3E%3Cpath d='M-20 125 C50 66 128 178 205 120 S351 54 445 124M-33 160 C51 117 115 208 211 157 S357 103 451 161M-20 199 C63 161 141 239 230 199 S359 161 452 200' fill='none' stroke='%23ffffff' stroke-width='1' opacity='.06'/%3E%3C/svg%3E");
}
.field-notes > * { position:relative; }
.field-notes-intro { padding:88px 3vw 90px 5.2vw; border-right:1px solid rgba(255,255,255,.13); }
.field-notes-intro .section-num { color:var(--gold-soft); }
.field-notes-intro h2 { font-family:var(--condensed); font-size:clamp(48px,4.2vw,78px); line-height:.94; text-transform:uppercase; margin:25px 0 28px; }
.field-notes-intro p { color:#c7d1cc; font-size:15px; line-height:1.75; max-width:400px; }
.service-index { padding:64px 0; align-self:center; }
.service-row { width:100%; border:0; border-bottom:1px solid rgba(255,255,255,.14); color:white; background:transparent; display:grid; grid-template-columns:54px minmax(150px,1fr) minmax(140px,.8fr) 40px; gap:10px; align-items:center; padding:22px 26px; text-align:left; cursor:pointer; transition:background .22s ease, padding .22s ease; }
.service-row:first-child { border-top:1px solid rgba(255,255,255,.14); }
.service-row:hover, .service-row.active { background:rgba(227,170,27,.1); padding-left:34px; }
.service-number { color:var(--gold); font-family:var(--condensed); font-size:24px; }
.service-name { font-family:var(--condensed); font-size:clamp(24px,2vw,35px); text-transform:uppercase; letter-spacing:.03em; }
.service-note { color:#b8c8c1; font-size:12px; line-height:1.45; }
.service-arrow { color:var(--gold); font-size:24px; }
.service-preview { margin:0; position:relative; overflow:hidden; min-height:720px; border-left:1px solid rgba(255,255,255,.12); }
.service-preview img { width:100%; height:100%; object-fit:cover; filter:saturate(.8) contrast(1.06); transition:opacity .22s ease, transform .5s ease; }
.service-preview:hover img { transform:scale(1.015); }
.service-preview::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(2,30,23,.92)); }
.service-preview figcaption { position:absolute; z-index:2; bottom:42px; left:34px; right:34px; }
.service-preview figcaption span { color:var(--gold-soft); font-size:10px; letter-spacing:.18em; font-weight:900; }
.service-preview figcaption strong { display:block; font-family:var(--condensed); text-transform:uppercase; font-size:32px; line-height:1.05; margin-top:9px; }

.marquee { background:var(--gold); overflow:hidden; border-top:1px solid #c88c00; border-bottom:1px solid #c88c00; }
.marquee-track { display:flex; align-items:center; gap:32px; width:max-content; padding:13px 0; animation:marquee 28s linear infinite; }
.marquee span { font-family:var(--condensed); font-size:27px; letter-spacing:.03em; color:#143629; }
.marquee b { font-size:13px; }
@keyframes marquee { to { transform:translateX(-50%); } }

.work { position:relative; background:var(--cream); padding:105px 5.2vw 125px; overflow:hidden; }
.work::before { opacity:.75; background-size:580px auto; filter:invert(1); }
.work > * { position:relative; }
.work-heading { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:40px; margin-bottom:58px; }
.work-heading h2 { font-family:var(--condensed); text-transform:uppercase; font-size:clamp(62px,6.2vw,116px); line-height:.85; margin:16px 0 0; color:var(--green-950); }
.work-heading p { justify-self:end; max-width:520px; font-size:17px; line-height:1.65; color:#405047; margin:0 0 5px; }
.work-collage { display:grid; grid-template-columns:1.05fr .9fr 1.2fr; grid-template-rows:360px 310px; gap:14px; }
.project { margin:0; overflow:hidden; position:relative; background:#ddd; box-shadow:var(--shadow); }
.project img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease, filter .45s ease; }
.project:hover img { transform:scale(1.025); filter:saturate(1.08); }
.project::after { content:""; position:absolute; inset:35% 0 0; background:linear-gradient(transparent,rgba(3,37,29,.86)); }
.project figcaption { position:absolute; left:22px; right:22px; bottom:19px; color:white; z-index:2; display:grid; grid-template-columns:34px 1fr; gap:0 12px; align-items:end; }
.project figcaption span { grid-row:1/3; align-self:center; color:var(--gold); font-family:var(--condensed); font-size:23px; }
.project figcaption strong { font-family:var(--condensed); font-size:25px; line-height:1; text-transform:uppercase; }
.project figcaption small { color:#cdd6d1; font-size:10px; letter-spacing:.1em; text-transform:uppercase; margin-top:6px; }
.project-a { grid-row:1/3; }
.project-b { grid-column:2; grid-row:1; }
.project-c { grid-column:3; grid-row:1; }
.project-d { grid-column:2; grid-row:2; }
.project-e { grid-column:3; grid-row:2; }

.process { position:relative; display:grid; grid-template-columns:.85fr 1fr 1.1fr; background:var(--green-950); color:white; min-height:760px; }
.process > * { position:relative; }
.process-title { padding:94px 3.4vw 90px 5.2vw; border-right:1px solid rgba(255,255,255,.12); }
.process-title .section-num { color:var(--gold-soft); }
.process-title h2 { font-family:var(--condensed); font-size:clamp(54px,4.7vw,86px); text-transform:uppercase; line-height:.9; margin:24px 0 0; }
.process-list { list-style:none; margin:0; padding:80px 3vw; align-self:center; }
.process-list li { display:grid; grid-template-columns:54px 1fr; gap:18px; padding:23px 0; border-bottom:1px solid rgba(255,255,255,.13); }
.process-list li:first-child { border-top:1px solid rgba(255,255,255,.13); }
.process-list li > span { color:var(--gold); font-family:var(--condensed); font-size:26px; }
.process-list h3 { font-family:var(--condensed); font-size:32px; text-transform:uppercase; margin:0; }
.process-list p { margin:7px 0 0; color:#becdc6; font-size:13px; line-height:1.55; }
.process-photo { overflow:hidden; min-height:760px; position:relative; }
.process-photo img { height:100%; object-fit:cover; }
.process-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(3,39,31,.08),rgba(3,39,31,.8)); }
.process-note { position:absolute; z-index:2; left:35px; right:35px; bottom:38px; }
.process-note span { color:var(--gold-soft); font-size:10px; letter-spacing:.18em; font-weight:900; }
.process-note strong { display:block; font-family:var(--condensed); font-size:33px; line-height:1.06; text-transform:uppercase; margin-top:10px; }

.area { min-height:680px; display:grid; grid-template-columns:1.25fr .75fr; background:var(--paper); overflow:hidden; position:relative; }
.area-map { display:flex; align-items:center; justify-content:center; color:#174b3a; padding:60px 3vw 45px 4vw; background:#e7e6dd; }
.area-map svg { width:100%; max-width:930px; }
.area-map .coast { fill:#0b4a38; opacity:.93; }
.area-map circle { fill:var(--gold); stroke:#f7efd4; stroke-width:3; }
.area-copy { padding:100px 5vw 70px; align-self:center; }
.area-copy h2 { font-family:var(--condensed); font-size:clamp(60px,5.5vw,102px); text-transform:uppercase; line-height:.86; margin:23px 0 29px; color:var(--green-950); }
.area-copy h2 em { font-style:normal; color:#a66f00; }
.area-copy p { font-size:16px; line-height:1.7; color:#45534c; }
.cities { display:flex; flex-wrap:wrap; gap:9px; margin-top:28px; }
.cities span { padding:9px 11px; border:1px solid #b5b9b4; font-size:10px; text-transform:uppercase; letter-spacing:.08em; font-weight:800; background:white; }

.contact { display:grid; grid-template-columns:1.1fr .9fr; min-height:590px; background:var(--green-950); color:white; }
.contact-photo { overflow:hidden; }
.contact-photo img { height:100%; object-fit:cover; filter:saturate(.75) contrast(1.08); }
.contact-copy { align-self:center; padding:80px 6vw; }
.contact-copy .section-num { color:var(--gold-soft); }
.contact-copy h2 { font-family:var(--condensed); font-size:clamp(65px,6vw,112px); line-height:.87; text-transform:uppercase; margin:23px 0; }
.contact-copy p { color:#c6d1cc; font-size:17px; line-height:1.65; max-width:570px; }
.contact-actions { margin-top:33px; display:flex; flex-direction:column; align-items:flex-start; gap:15px; }
.availability { color:#aebdb6; font-size:12px; text-transform:uppercase; letter-spacing:.1em; }

.site-footer { display:grid; grid-template-columns:1.1fr .9fr .6fr; gap:40px; padding:46px 5.2vw 24px; background:#071b16; color:white; border-top:1px solid rgba(255,255,255,.1); }
.footer-brand img { width:min(270px,100%); border-radius:10px; }
.footer-brand p { color:#95a79f; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.footer-links { display:grid; grid-template-columns:repeat(2, max-content); gap:14px 38px; align-content:start; }
.footer-links a { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:#dbe1de; }
.footer-contact { display:flex; flex-direction:column; align-items:flex-end; gap:7px; }
.footer-contact a { font-family:var(--condensed); font-size:29px; }
.footer-contact span { color:var(--gold-soft); font-size:10px; text-transform:uppercase; letter-spacing:.15em; }
.footer-bottom { grid-column:1/-1; border-top:1px solid rgba(255,255,255,.1); padding-top:18px; display:flex; justify-content:space-between; color:#71867d; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.2,.75,.25,1), transform .8s cubic-bezier(.2,.75,.25,1); }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 1100px) {
  .site-header { grid-template-columns:200px 1fr auto; }
  .site-nav { gap:16px; }
  .hero { grid-template-columns:44% 56%; }
  .hero-rule { left:44%; }
  .hero-copy { padding-left:4vw; padding-right:4vw; }
  .field-notes { grid-template-columns:1fr 1.25fr; }
  .service-preview { grid-column:1/-1; min-height:430px; }
  .process { grid-template-columns:.8fr 1fr; }
  .process-photo { grid-column:1/-1; min-height:460px; }
  .area { grid-template-columns:1fr 1fr; }
}

@media (max-width: 820px) {
  .site-header { grid-template-columns:1fr auto; padding:10px 18px; }
  .brand { width:220px; max-width:68vw; }
  .menu-toggle { display:block; }
  .header-cta { display:none; }
  .site-nav { position:absolute; top:100%; left:0; right:0; display:none; flex-direction:column; align-items:flex-start; gap:0; padding:14px 20px 24px; background:rgba(3,39,31,.98); border-top:1px solid rgba(255,255,255,.1); }
  .site-nav.open { display:flex; }
  .site-nav a { width:100%; padding:15px 0; border-bottom:1px solid rgba(255,255,255,.08); }
  .hero { display:block; min-height:auto; padding-top:76px; }
  .hero-copy { padding:74px 25px 56px; min-height:600px; }
  .hero h1 { font-size:clamp(78px,22vw,120px); }
  .hero-visual { min-height:540px; }
  .hero-rule { display:none; }
  .hero-stamp { right:22px; bottom:22px; }
  .field-notes { display:block; }
  .field-notes-intro { padding:70px 25px 45px; border-right:0; }
  .service-index { padding:0 0 30px; }
  .service-row { grid-template-columns:42px 1fr 32px; padding:19px 24px; }
  .service-note { display:none; }
  .service-arrow { grid-column:3; }
  .service-preview { min-height:490px; }
  .work { padding:75px 22px 80px; }
  .work-heading { display:block; }
  .work-heading p { margin-top:24px; }
  .work-collage { grid-template-columns:1fr 1fr; grid-template-rows:420px 280px 280px; }
  .project-a { grid-column:1/-1; grid-row:1; }
  .project-b { grid-column:1; grid-row:2; }
  .project-c { grid-column:2; grid-row:2; }
  .project-d { grid-column:1; grid-row:3; }
  .project-e { grid-column:2; grid-row:3; }
  .process { display:block; }
  .process-title { padding:70px 24px 20px; border-right:0; }
  .process-list { padding:20px 24px 60px; }
  .process-photo { min-height:510px; }
  .area { display:flex; flex-direction:column-reverse; }
  .area-copy { padding:72px 24px 42px; }
  .area-map { min-height:430px; padding:20px; }
  .contact { display:block; }
  .contact-photo { height:430px; }
  .contact-copy { padding:68px 24px 76px; }
  .site-footer { grid-template-columns:1fr; padding:38px 22px 22px; }
  .footer-contact { align-items:flex-start; }
  .footer-bottom { flex-direction:column; gap:8px; }
}

@media (max-width: 520px) {
  .hero-copy { min-height:560px; }
  .hero h1 { font-size:74px; }
  .hero-meta { flex-wrap:wrap; }
  .hero-meta span { min-width:33%; }
  .hero-visual { min-height:460px; }
  .hero-stamp strong { font-size:25px; }
  .field-notes-intro h2, .process-title h2 { font-size:50px; }
  .work-heading h2, .area-copy h2, .contact-copy h2 { font-size:62px; }
  .work-collage { display:block; }
  .project { height:330px; margin-bottom:12px; }
  .project-a { height:460px; }
  .footer-links { grid-template-columns:1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
  .reveal { opacity:1; transform:none; }
}
