:root {
  --paper: #f4f0e8;
  --paper-deep: #eae4da;
  --ink: #17201f;
  --muted: #6c7370;
  --line: rgba(23, 32, 31, .18);
  --teal: #147e73;
  --teal-dark: #0b4a46;
  --teal-deep: #083b39;
  --lime: #d5e569;
  --white: #fffdf8;
  --display: 'Space Grotesk', sans-serif;
  --body: 'DM Sans', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
.section-pad { padding-left: clamp(24px, 6vw, 96px); padding-right: clamp(24px, 6vw, 96px); }
.site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 20; display: flex; justify-content: space-between; align-items: center; padding: 24px clamp(24px, 6vw, 96px); transition: background .3s, box-shadow .3s; }
.site-header.scrolled { background: rgba(244,240,232,.95); box-shadow: 0 1px 0 var(--line); backdrop-filter: blur(12px); }
.brand { display: inline-flex; gap: 10px; align-items: center; color: var(--ink); }
.brand-mark { width: 36px; height: 36px; color: var(--teal); flex: none; }
.brand-type { display: flex; flex-direction: column; line-height: 1; letter-spacing: .02em; }
.brand-type strong { font-family: var(--display); font-size: 14px; font-weight: 700; }
.brand-type small { margin-top: 4px; color: var(--muted); font-size: 8px; letter-spacing: .12em; }
.site-nav { display: flex; gap: clamp(20px, 3.1vw, 48px); align-items: center; font-size: 13px; font-weight: 600; }
.site-nav > a:not(.nav-cta) { color: #535b58; }
.site-nav > a:hover, .text-link:hover { color: var(--teal); }
.nav-cta { display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--ink); color: var(--white); }
.nav-cta span, .button span { font-size: 18px; line-height: 0; }
.menu-toggle { display: none; border: 0; background: transparent; padding: 8px; cursor: pointer; }
.menu-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; }
.hero { min-height: 790px; display: grid; grid-template-columns: minmax(0, .93fr) minmax(420px, 1.07fr); gap: clamp(34px, 7vw, 120px); align-items: end; padding-top: 160px; padding-bottom: 62px; }
.hero-copy { padding-bottom: 56px; }
.eyebrow { display: flex; gap: 11px; align-items: center; margin: 0 0 26px; color: var(--teal); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow-light { color: var(--lime); }
.eyebrow-line { display: block; width: 30px; height: 1px; background: currentColor; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: 0; line-height: .98; }
h1 { max-width: 700px; margin-bottom: 28px; font-size: clamp(58px, 8vw, 122px); letter-spacing: -.055em; }
h1 em, h2 em { color: var(--teal); font-style: normal; }
.hero-lede { max-width: 470px; margin-bottom: 34px; color: var(--muted); font-size: 17px; line-height: 1.55; }
.hero-actions { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 30px; min-height: 51px; padding: 14px 20px; border: 0; cursor: pointer; font-size: 13px; font-weight: 700; }
.button-dark { background: var(--ink); color: var(--white); }
.button-light { background: var(--lime); color: var(--ink); }
.button:hover { transform: translateY(-2px); }
.text-link { display: inline-flex; align-items: center; gap: 14px; padding-bottom: 5px; border-bottom: 1px solid currentColor; color: var(--ink); font-size: 13px; font-weight: 700; }
.hero-meta { display: flex; gap: 13px; align-items: center; margin-top: 82px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.meta-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--teal); }
.hero-visual { position: relative; min-height: 565px; }
.image-placeholder { position: relative; overflow: hidden; background: #346864; }
.image-placeholder-hero { height: 565px; background: linear-gradient(130deg, #073d3b 0%, #24756b 55%, #b8ca95 150%); }
.placeholder-grid { position: absolute; inset: 0; opacity: .3; background-image: linear-gradient(rgba(255,255,255,.25) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.25) 1px, transparent 1px); background-size: 46px 46px; transform: perspective(650px) rotateX(55deg) scale(1.4); transform-origin: bottom; }
.placeholder-structure { position: absolute; border: 1px solid rgba(213,229,105,.6); }
.structure-main { width: 56%; height: 73%; right: 12%; top: 12%; transform: skewY(-9deg); box-shadow: 22px 20px 0 rgba(5,45,42,.28); }
.structure-main:before, .structure-main:after { content: ''; position: absolute; top: 18%; bottom: 0; width: 1px; background: rgba(213,229,105,.55); }
.structure-main:before { left: 24%; }.structure-main:after { left: 69%; }
.structure-side { width: 32%; height: 48%; left: 7%; bottom: 13%; transform: skewY(12deg); border-color: rgba(255,253,248,.45); }
.placeholder-label { position: absolute; left: 22px; bottom: 20px; display: flex; align-items: center; gap: 9px; color: rgba(255,253,248,.82); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.label-pulse { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(213,229,105,.18); }
.hero-stamp { position: absolute; bottom: -28px; left: -38px; display: flex; flex-direction: column; justify-content: center; width: 138px; height: 138px; padding-left: 22px; background: var(--lime); color: var(--ink); transform: rotate(-8deg); }
.hero-stamp span { font-family: var(--display); font-size: 43px; font-weight: 700; line-height: 1; }
.hero-stamp small { margin-top: 7px; font-size: 8px; font-weight: 700; letter-spacing: .13em; line-height: 1.45; }
.hero-caption { position: absolute; top: 24px; right: 0; display: flex; gap: 10px; align-items: center; color: var(--white); font-size: 10px; letter-spacing: .1em; }
.hero-caption span { width: 42px; height: 1px; background: var(--white); opacity: .7; }
.signal-band { background: var(--teal-dark); color: var(--white); }
.signal-inner { padding-top: 64px; padding-bottom: 64px; }
.signal-grid { display: grid; grid-template-columns: repeat(3, minmax(100px, 1fr)) minmax(250px, 1.35fr); gap: 24px; align-items: end; }
.signal-stat { display: flex; gap: 14px; align-items: start; border-left: 1px solid rgba(255,255,255,.26); padding-left: 16px; }
.signal-stat strong { color: var(--lime); font-family: var(--display); font-size: 13px; }.signal-stat span { font-size: 14px; line-height: 1.2; }
.signal-note { max-width: 310px; margin: 0 0 0 auto; color: rgba(255,255,255,.6); font-size: 13px; line-height: 1.55; }
.services { padding-top: 140px; padding-bottom: 150px; }
.section-heading { display: grid; grid-template-columns: 1fr 1.1fr .9fr; gap: 28px; align-items: end; margin-bottom: 86px; }
.section-heading .eyebrow { align-self: start; }.section-heading h2, .principles h2 { margin: 0; font-size: clamp(40px, 5vw, 70px); letter-spacing: -.045em; }.heading-note { max-width: 265px; margin: 0 0 3px auto; color: var(--muted); font-size: 14px; }
.service-list { border-top: 1px solid var(--line); }.service-row { display: grid; grid-template-columns: 80px 1fr 30px; gap: 26px; align-items: center; padding: 30px 0; border-bottom: 1px solid var(--line); transition: padding .25s, color .25s; }.service-row:hover { padding-left: 12px; color: var(--teal); }.service-number { align-self: start; color: var(--teal); font-family: var(--display); font-size: 13px; }.service-row h3 { margin-bottom: 9px; font-size: clamp(23px, 3vw, 34px); letter-spacing: -.035em; }.service-row p { max-width: 520px; margin: 0; color: var(--muted); font-size: 14px; }.service-arrow { font-size: 25px; font-weight: 300; }
.experience { display: grid; grid-template-columns: .73fr 1.27fr; gap: clamp(34px, 8vw, 140px); align-items: center; background: var(--paper-deep); padding-top: 130px; padding-bottom: 130px; }.experience-intro h2 { margin-bottom: 26px; font-size: clamp(45px, 5.5vw, 78px); letter-spacing: -.055em; }.experience-intro > p:not(.eyebrow) { max-width: 330px; color: var(--muted); font-size: 14px; line-height: 1.6; }.experience-intro .text-link { margin-top: 28px; }.experience-card { min-width: 0; }.image-placeholder-project { aspect-ratio: 1.42 / 1; background: linear-gradient(142deg, #b8cfa8, #47776c 47%, #173f3d); }.project-lines { position: absolute; inset: 9% 11% 13%; border: 1px solid rgba(255,255,255,.6); transform: skewY(-11deg); }.project-lines:before, .project-lines:after { content: ''; position: absolute; inset: 12% 15%; border: 1px solid rgba(213,229,105,.65); }.project-lines:after { inset: 42% -5% -14% 40%; border-color: rgba(255,255,255,.38); }.experience-card-footer { display: flex; justify-content: space-between; gap: 20px; padding-top: 17px; }.card-kicker { color: var(--teal); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }.experience-card-footer h3 { margin: 8px 0 0; font-size: clamp(21px, 2.4vw, 31px); letter-spacing: -.035em; }.card-index { color: var(--muted); font-size: 10px; letter-spacing: .08em; }
.principles { padding-top: 135px; padding-bottom: 145px; }.principles-top { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; align-items: start; margin-bottom: 92px; }.principles-top .eyebrow { margin-top: 8px; }.principles-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }.principle { min-height: 220px; padding: 23px 30px 20px 0; border-bottom: 1px solid var(--line); }.principle + .principle { border-left: 1px solid var(--line); padding-left: 30px; }.principle span { color: var(--teal); font-family: var(--display); font-size: 12px; }.principle h3 { margin: 50px 0 12px; font-size: 28px; }.principle p { max-width: 240px; margin: 0; color: var(--muted); font-size: 14px; }
.contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(38px, 9vw, 150px); padding-top: 105px; padding-bottom: 110px; background: var(--teal-deep); color: var(--white); }.contact h2 { margin-bottom: 26px; font-size: clamp(47px, 6vw, 84px); letter-spacing: -.055em; }.contact-copy > p:not(.eyebrow) { max-width: 380px; color: rgba(255,255,255,.64); font-size: 14px; line-height: 1.65; }.contact-details { display: flex; flex-direction: column; gap: 8px; margin-top: 48px; color: var(--lime); font-size: 13px; }.contact-details a:hover { text-decoration: underline; }.contact-details span { margin-top: 8px; color: rgba(255,255,255,.55); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }.contact-form { padding-top: 15px; }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }.contact-form label { display: block; margin-bottom: 28px; }.contact-form label > span { display: block; margin-bottom: 8px; color: rgba(255,255,255,.62); font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }.contact-form input, .contact-form textarea { display: block; width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.3); border-radius: 0; outline: 0; background: transparent; color: var(--white); resize: vertical; }.contact-form input:focus, .contact-form textarea:focus { border-color: var(--lime); }.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(255,255,255,.35); }.contact-form .button { margin-top: 13px; }.form-status { min-height: 20px; margin: 16px 0 0; color: var(--lime); font-size: 12px; }
.site-footer { display: grid; grid-template-columns: 1fr auto auto; gap: 30px; align-items: center; min-height: 120px; background: var(--teal-deep); border-top: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.56); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }.brand-footer { color: var(--white); }.brand-footer .brand-mark { color: var(--lime); }.brand-footer .brand-type small { color: rgba(255,255,255,.52); }.site-footer > a:last-child { color: var(--lime); }
@media (max-width: 880px) { .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 130px; }.hero-copy { padding-bottom: 14px; }.hero-visual { min-height: auto; margin-top: 30px; }.hero-caption { top: 16px; right: 16px; }.signal-grid { grid-template-columns: repeat(3, 1fr); }.signal-note { grid-column: 1 / -1; margin: 22px 0 0; max-width: 420px; }.section-heading, .principles-top { grid-template-columns: 1fr 1.4fr; }.heading-note { grid-column: 2; margin: 0; }.section-heading .eyebrow { grid-row: span 2; }.experience { grid-template-columns: 1fr; }.experience-intro { max-width: 520px; }.principles-top { margin-bottom: 60px; }.contact { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .site-header { padding-top: 18px; padding-bottom: 18px; }.menu-toggle { display: block; }.site-nav { position: absolute; top: 72px; left: 16px; right: 16px; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 12px; background: var(--white); box-shadow: 0 18px 35px rgba(0,0,0,.13); }.site-nav.is-open { display: flex; }.site-nav > a { padding: 14px 12px; }.nav-cta { justify-content: space-between; margin-top: 6px; }.hero { padding-top: 112px; padding-bottom: 45px; }.hero h1 { font-size: clamp(57px, 17vw, 86px); }.hero-lede { font-size: 15px; }.hero-meta { margin-top: 51px; flex-wrap: wrap; line-height: 1.45; }.hero-visual, .image-placeholder-hero { height: 470px; }.hero-stamp { left: 15px; bottom: -24px; width: 112px; height: 112px; padding-left: 15px; }.hero-stamp span { font-size: 34px; }.signal-inner { padding-top: 48px; padding-bottom: 48px; }.signal-grid { grid-template-columns: 1fr 1fr; gap: 22px 14px; }.signal-stat:nth-child(3) { grid-column: 1 / -1; }.signal-note { margin-top: 10px; }.services { padding-top: 92px; padding-bottom: 98px; }.section-heading, .principles-top { display: block; margin-bottom: 55px; }.section-heading h2, .principles h2 { margin-bottom: 20px; font-size: clamp(43px, 12vw, 64px); }.heading-note { max-width: 340px; }.service-row { grid-template-columns: 34px 1fr 22px; gap: 10px; padding: 26px 0; }.service-row h3 { font-size: 24px; }.service-row p { font-size: 13px; }.experience { padding-top: 94px; padding-bottom: 94px; }.experience-intro h2 { font-size: clamp(46px, 13vw, 67px); }.principles { padding-top: 94px; padding-bottom: 100px; }.principles-grid { grid-template-columns: 1fr; }.principle, .principle + .principle { min-height: auto; padding: 22px 0 28px; border-left: 0; }.principle h3 { margin-top: 32px; }.contact { display: block; padding-top: 84px; padding-bottom: 86px; }.contact h2 { font-size: clamp(48px, 14vw, 74px); }.contact-form { padding-top: 62px; }.form-row { grid-template-columns: 1fr; gap: 0; }.site-footer { grid-template-columns: 1fr; gap: 18px; padding-top: 38px; padding-bottom: 38px; }.site-footer span:not(.brand-type) { order: 3; }.site-footer > a:last-child { order: 2; } }

.image-placeholder-hero img,.image-placeholder-project img{width:100%;height:100%;display:block;object-fit:cover}.leader-feature{display:grid;grid-template-columns:minmax(220px,.7fr) 1fr;gap:clamp(28px,6vw,90px);align-items:center;margin-bottom:92px}.leader-photo{aspect-ratio:1.1/1;overflow:hidden;background:var(--paper-deep)}.leader-photo img{width:100%;height:100%;display:block;object-fit:cover;object-position:top}.leader-copy{max-width:440px}.leader-copy h3{font-size:clamp(31px,4vw,56px);letter-spacing:-.045em;margin-bottom:22px}.leader-copy h3 em{color:var(--teal);font-style:normal}.leader-copy>p:not(.eyebrow){color:var(--muted);font-size:14px;line-height:1.6}.leader-copy .text-link{margin-top:18px}@media (max-width:640px){.leader-feature{grid-template-columns:1fr;margin-bottom:56px}.leader-photo{max-width:420px}.leader-copy h3{font-size:40px}}

.brand-logo{display:block;height:48px;width:auto}.brand-footer .brand-logo{height:64px;width:auto}@media (max-width:640px){.brand-logo{height:40px;width:auto}.brand-footer .brand-logo{height:56px;width:auto}}

/* Project gallery */
.gallery{padding-top:130px;padding-bottom:135px;background:var(--ink);color:var(--white)}
.gallery-heading{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:end;margin-bottom:56px}
.gallery-heading h2{margin:0;font-size:clamp(42px,5vw,72px)}
.gallery-heading>p{max-width:390px;margin:0 0 8px;color:rgba(255,255,255,.62);font-size:14px;line-height:1.65}
.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.gallery-item{position:relative;display:block;aspect-ratio:4/3;padding:0;overflow:hidden;border:0;background:#26302f;cursor:zoom-in}
.gallery-item:nth-child(5n+1){grid-row:span 2;aspect-ratio:auto;min-height:100%}
.gallery-item img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .45s ease,filter .45s ease}
.gallery-item:hover img,.gallery-item:focus-visible img{transform:scale(1.035);filter:brightness(.88)}
.gallery-item:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.gallery-more{margin-top:30px}
.gallery-more[hidden]{display:none}
.gallery-dialog{width:100vw;max-width:none;height:100vh;max-height:none;margin:0;padding:48px 72px;border:0;background:rgba(8,19,18,.96);color:var(--white)}
.gallery-dialog::backdrop{background:rgba(8,19,18,.88)}
.gallery-dialog[open]{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;gap:24px;align-items:center}
.gallery-dialog figure{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 96px);margin:0;min-width:0}
.gallery-dialog figure img{display:block;max-width:100%;max-height:calc(100% - 42px);object-fit:contain}
.gallery-dialog figcaption{margin-top:16px;color:rgba(255,255,255,.68);font-size:12px;letter-spacing:.04em;text-align:center}
.gallery-close,.gallery-control{border:0;background:transparent;color:var(--white);cursor:pointer}
.gallery-close{position:fixed;top:20px;right:25px;z-index:2;width:44px;height:44px;font-size:36px;line-height:1}
.gallery-control{width:52px;height:52px;border:1px solid rgba(255,255,255,.3);font-size:24px}
.gallery-control:hover,.gallery-control:focus-visible,.gallery-close:hover,.gallery-close:focus-visible{color:var(--lime);border-color:var(--lime);outline:0}
@media(max-width:880px){.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery-heading{grid-template-columns:1fr 1fr}.gallery-item:nth-child(5n+1){grid-row:auto;aspect-ratio:4/3;min-height:0}}
@media(max-width:640px){.gallery{padding-top:88px;padding-bottom:92px}.gallery-heading{display:block;margin-bottom:38px}.gallery-heading h2{margin-bottom:22px}.gallery-grid{gap:7px}.gallery-item{aspect-ratio:1/1}.gallery-dialog{padding:60px 12px 20px}.gallery-dialog[open]{grid-template-columns:42px minmax(0,1fr) 42px;gap:6px}.gallery-dialog figure{height:calc(100vh - 80px)}.gallery-control{width:42px;height:42px}}
