:root{
  --black:#090a0a;
  --ink:#141414;
  --ivory:#f3f0e8;
  --stone:#d5d0c6;
  --line:rgba(20,20,20,.18);
  --blue:#2447ff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:Inter,Arial,sans-serif;font-weight:300}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{width:100%;height:100%;object-fit:cover;display:block}
.nav{
  height:78px;padding:0 3vw;display:flex;align-items:center;justify-content:space-between;
  position:fixed;top:0;left:0;right:0;z-index:20;color:white;
  mix-blend-mode:difference
}
.brand{font-family:"Cormorant Garamond",serif;font-size:30px;letter-spacing:.08em}
.menu{display:flex;gap:28px;font-size:12px;text-transform:uppercase;letter-spacing:.18em}
.menu-toggle{display:none;background:none;border:0;color:inherit;font:inherit;letter-spacing:.14em}
.hero{height:100svh;min-height:650px;position:relative;color:white;overflow:hidden;background:#111}
.hero-image{position:absolute;inset:-7%;background:url("assets/hero-v2.png") center/cover no-repeat;transform:translate3d(0,var(--parallax-y,0),0) scale(1.08);will-change:transform}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.12) 62%,rgba(0,0,0,.2))}
.hero-copy{position:absolute;left:5vw;top:50%;transform:translateY(-44%);max-width:850px}
.eyebrow{font-size:11px;letter-spacing:.25em;text-transform:uppercase;margin:0 0 28px}
.eyebrow.dark{color:#606060}
.hero h1,.intro h2,.section-head h2,.statement h2,.contact h2{
  font-family:"Cormorant Garamond",serif;font-weight:400;letter-spacing:-.025em;margin:0
}
.hero h1{font-size:clamp(54px,7.1vw,116px);line-height:.9;max-width:12ch}
.hero-sub{max-width:550px;font-size:16px;line-height:1.7;margin:30px 0}
.text-link{display:inline-flex;gap:12px;align-items:center;text-transform:uppercase;letter-spacing:.15em;font-size:11px;border-bottom:1px solid currentColor;padding-bottom:7px}
.hero-bottom{position:absolute;left:5vw;right:5vw;bottom:32px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.2em}
.scroll-cue{position:absolute;right:2.2vw;top:50%;display:flex;align-items:center;gap:12px;transform:rotate(90deg) translateX(50%);transform-origin:right center;font-size:8px;letter-spacing:.28em}
.scroll-cue span{display:block;width:45px;height:1px;background:rgba(255,255,255,.65);transform-origin:left;animation:scrollPulse 2.2s ease-in-out infinite}
.intro{display:grid;grid-template-columns:70px 1.3fr .8fr;gap:5vw;padding:130px 5vw 150px;border-bottom:1px solid var(--line)}
.section-number{font-size:11px;letter-spacing:.2em;color:#666}
.intro h2{font-size:clamp(46px,5vw,82px);line-height:.96}
.intro-copy{padding-top:42px;max-width:520px;font-size:16px;line-height:1.8}
.projects{padding:100px 5vw 150px}
.section-head{display:flex;justify-content:space-between;align-items:end;border-top:1px solid var(--line);padding-top:18px;margin-bottom:45px}
.section-head span{font-size:11px;letter-spacing:.2em}
.section-head h2{font-size:20px;letter-spacing:.16em}
.project{margin-bottom:110px}
.project-wide{display:grid;grid-template-columns:1.55fr .45fr;gap:35px;align-items:end}
.project-img{height:min(68vw,820px);overflow:hidden;background:#ddd}
.project-img img{height:114%;margin-top:-7%;transition:transform 1.1s cubic-bezier(.2,.7,.2,1);transform:translate3d(0,var(--parallax-y,0),0) scale(1.02);will-change:transform}
.project:hover .project-img img{filter:saturate(1.06) contrast(1.03)}
.project-info span{font-size:10px;letter-spacing:.2em;color:#666}
.project-info h3{font-family:"Cormorant Garamond",serif;font-weight:400;font-size:clamp(48px,5vw,78px);line-height:.9;margin:12px 0 18px}
.project-info p{font-size:14px;line-height:1.6;max-width:420px}
.project-info .tags{font-size:10px;letter-spacing:.18em;line-height:1.8;margin-top:30px}
.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:6vw}
.project-grid .project{margin-bottom:130px}
.project-grid .project.offset{padding-top:160px}
.project-img.tall{height:74vw;max-height:920px}
.coast{grid-template-columns:.5fr 1.5fr}
.coast .project-img{order:2}
.coast .project-info{order:1}
.immersive{height:120svh;min-height:760px;position:relative;overflow:hidden;background:#0a0a0a;color:#fff}
.immersive-media{position:sticky;top:0;height:100svh;overflow:hidden}
.immersive-media img{position:absolute;inset:-8%;width:116%;height:116%;transform:translate3d(0,var(--parallax-y,0),0) scale(1.03);will-change:transform}
.immersive-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.65),rgba(0,0,0,.05) 70%)}
.immersive-copy{position:absolute;left:5vw;bottom:12svh;z-index:2}
.immersive-copy span{font-size:10px;letter-spacing:.25em}
.immersive-copy h2{font-family:"Cormorant Garamond",serif;font-size:clamp(64px,9vw,142px);font-weight:400;line-height:.83;letter-spacing:-.03em;margin:25px 0 0}
.planning{padding:110px 5vw 130px;background:#e9e4da}
.planning-head{display:flex;justify-content:space-between;gap:30px;border-top:1px solid var(--line);padding-top:18px;font-size:10px;letter-spacing:.2em}
.planning-head p{margin:0}
.planning-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:8vw;padding:100px 0 90px}
.planning-title h2{font-family:"Cormorant Garamond",serif;font-weight:400;font-size:clamp(50px,6.2vw,98px);line-height:.88;letter-spacing:-.035em;margin:0}
.planning-copy{align-self:end;max-width:560px}
.planning-copy p{font-size:14px;line-height:1.8;color:#3f3f3f}
.planning-copy .planning-lead{font-family:"Cormorant Garamond",serif;font-size:clamp(25px,2.15vw,36px);line-height:1.15;color:var(--ink);margin-top:0}
.planning-copy .text-link{margin-top:28px}
.planning-services{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.planning-services>div{padding:28px 25px 15px 0;min-height:190px;border-right:1px solid var(--line)}
.planning-services>div:not(:first-child){padding-left:25px}
.planning-services>div:last-child{border-right:0}
.planning-services span{font-size:10px;letter-spacing:.2em;color:#777}
.planning-services h3{font-family:"Cormorant Garamond",serif;font-size:24px;font-weight:500;line-height:1;margin:22px 0 14px}
.planning-services p{font-size:12px;line-height:1.7;color:#555;max-width:28ch}
.services{background:var(--black);color:white;padding:100px 5vw 110px}
.section-head.inverted{border-color:rgba(255,255,255,.2)}
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:65px;border-top:1px solid rgba(255,255,255,.2)}
.service{padding:30px 25px 35px 0;border-right:1px solid rgba(255,255,255,.2);min-height:330px}
.service:not(:first-child){padding-left:25px}
.service:last-child{border-right:0}
.service span{font-size:10px;letter-spacing:.2em;color:#999}
.service h3{font-family:"Cormorant Garamond",serif;font-size:34px;font-weight:400;line-height:.95;margin:24px 0}
.service p{font-size:13px;line-height:1.8;color:#c6c6c6}
.service-cta{margin-top:45px}
.statement{text-align:center;padding:180px 5vw}
.statement>p:first-child{font-size:11px;letter-spacing:.25em;margin-bottom:16px}
.statement h2{font-size:clamp(70px,9vw,145px);line-height:.85}
.statement-note{font-size:11px;letter-spacing:.2em;margin-top:30px}
.contact{height:90svh;min-height:650px;position:relative;color:#fff;overflow:hidden;background:#0a0a0a}
.contact-image{position:absolute;inset:0}
.contact-image img{object-position:center 52%}
.contact-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,8,16,.86),rgba(3,8,16,.38) 62%,rgba(3,8,16,.15)),linear-gradient(0deg,rgba(0,0,0,.45),transparent 55%)}
.contact-copy{position:absolute;left:5vw;top:50%;transform:translateY(-50%);z-index:2}
.contact-copy>span{font-size:10px;letter-spacing:.2em}
.contact h2{font-size:clamp(58px,7.5vw,110px);line-height:.85;margin:25px 0 35px}
.contact-copy a{display:inline-flex;align-items:center;min-height:52px;font-family:Inter,Arial,sans-serif;font-size:15px;font-weight:500;letter-spacing:.02em;color:#090a0a;background:#fff;border:1px solid #fff;border-radius:999px;padding:0 24px;box-shadow:0 8px 30px rgba(0,0,0,.2);transition:background .3s ease,color .3s ease,transform .3s ease}
.contact-copy a:hover{background:transparent;color:#fff;transform:translateY(-2px)}
.contact-copy p{max-width:480px;font-size:12px;letter-spacing:.06em;line-height:1.8;margin-top:24px}
.contact-brand{position:absolute;right:5vw;bottom:6vw;font-family:"Cormorant Garamond",serif;font-size:clamp(55px,8vw,130px);letter-spacing:.06em;opacity:.92}
footer{display:flex;justify-content:space-between;gap:20px;padding:30px 5vw;font-size:9px;letter-spacing:.17em;text-transform:uppercase}
.reveal{opacity:0;transform:translateY(48px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.reveal.is-visible{opacity:1;transform:none}
.project.reveal{transition-delay:.06s}
@keyframes scrollPulse{0%,100%{transform:scaleX(.25);opacity:.35}50%{transform:scaleX(1);opacity:1}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.scroll-cue span{animation:none}[data-parallax]{transform:none!important}}
@media(max-width:850px){
  .nav{height:62px}
  .menu{display:none;position:fixed;inset:62px 0 auto;background:#0a0a0a;color:#fff;padding:30px 5vw;flex-direction:column;mix-blend-mode:normal}
  .menu.open{display:flex}
  .menu-toggle{display:block}
  .hero-copy{left:6vw;right:6vw}
  .hero h1{font-size:clamp(45px,12.5vw,72px);line-height:.93;max-width:9.5ch}
  .hero-copy{top:48%;transform:translateY(-44%)}
  .hero-sub{max-width:34ch;margin:22px 0;line-height:1.55}
  .eyebrow{margin-bottom:20px;line-height:1.5}
  .scroll-cue{display:none}
  .hero-bottom{left:6vw;right:6vw;gap:20px}
  .hero-bottom span:last-child{display:none}
  .intro{grid-template-columns:1fr;padding:100px 6vw}
  .section-number{margin-bottom:-18px}
  .intro-copy{padding-top:5px}
  .projects,.services{padding-left:6vw;padding-right:6vw}
  .project-wide,.coast{grid-template-columns:1fr}
  .coast .project-img,.coast .project-info{order:initial}
  .project-grid{grid-template-columns:1fr}
  .project-grid .project.offset{padding-top:0}
  .project-img,.project-img.tall{height:110vw;max-height:none}
  .project{margin-bottom:80px}
  .services-grid{grid-template-columns:1fr 1fr}
  .planning{padding:90px 6vw 100px}
  .planning-grid{grid-template-columns:1fr;gap:45px;padding:75px 0 70px}
  .planning-copy{max-width:620px}
  .planning-services{grid-template-columns:1fr 1fr}
  .planning-services>div:nth-child(2){border-right:0}
  .planning-services>div:nth-child(3),.planning-services>div:nth-child(4){border-top:1px solid var(--line)}
  .service:nth-child(2){border-right:0}
  .service:nth-child(3),.service:nth-child(4){border-top:1px solid rgba(255,255,255,.2)}
  .contact-brand{font-size:14vw;bottom:5vw}
  .contact{height:auto;min-height:780px;padding:120px 6vw 150px;display:flex;align-items:center}
  .contact-copy{position:relative;left:auto;top:auto;transform:none;width:100%;max-width:100%;z-index:2}
  .contact h2{max-width:8.5ch;margin:24px 0 32px;overflow-wrap:normal}
  .contact-copy a{display:inline-flex;max-width:100%;min-height:50px;padding:0 20px;overflow-wrap:anywhere;line-height:1.3}
  .contact-copy p{max-width:38ch;margin:24px 0 0}
  .contact-brand{right:6vw;bottom:5vw}
  .immersive{height:105svh;min-height:680px}
  .immersive-copy{left:6vw;right:6vw;bottom:10svh}
  .immersive-copy h2{font-size:clamp(52px,15vw,86px);line-height:.88}
  footer{flex-direction:column}
}
@media(max-width:560px){
  .planning-head{flex-direction:column;gap:8px}
  .planning-services{grid-template-columns:1fr}
  .planning-services>div{border-right:0!important;border-top:1px solid var(--line)}
  .services-grid{grid-template-columns:1fr}
  .service{border-right:0!important;border-top:1px solid rgba(255,255,255,.2)}
  .hero-sub{font-size:14px}
  .contact-copy a{font-size:13px}
  .hero{min-height:620px}
  .hero h1{font-size:clamp(42px,12vw,58px)}
  .contact h2{font-size:clamp(44px,12vw,58px);line-height:.94}
  .statement{padding:120px 6vw}
  .statement h2{font-size:clamp(58px,16vw,82px);line-height:.9}
}