:root{
  --ink:#181512;
  --paper:#f4efe6;
  --cream:#ebe1d1;
  --clay:#9e4f2d;
  --teal:#0f5654;
  --muted:#75685d;
  --line:rgba(24,21,18,.16);
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
.page-loader{position:fixed;inset:0;z-index:999;pointer-events:none;background:var(--ink);animation:reveal 1.1s .15s forwards cubic-bezier(.76,0,.24,1)}
@keyframes reveal{to{transform:translateY(-100%)}}
.site-header{position:fixed;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:22px clamp(18px,4vw,56px);color:var(--paper);mix-blend-mode:difference}
.wordmark{font-family:"Cormorant Garamond",serif;font-size:27px;letter-spacing:.09em;text-transform:uppercase}
nav{display:flex;gap:clamp(14px,3vw,38px)}
nav a{font-size:12px;text-transform:uppercase;letter-spacing:.18em}
.hero{min-height:100svh;position:relative;display:grid;align-items:end}
.hero-media{position:absolute;inset:0}
.hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.68),rgba(0,0,0,.2) 50%,rgba(0,0,0,.08))}
.hero-panel{position:relative;width:min(760px,calc(100% - 36px));margin:0 0 clamp(32px,7vw,88px) clamp(18px,6vw,86px);padding:clamp(28px,5vw,54px);color:var(--paper);background:rgba(24,21,18,.62);backdrop-filter:blur(14px)}
.kicker,.meta{margin:0 0 15px;font-size:12px;letter-spacing:.19em;text-transform:uppercase;color:var(--muted)}
.hero .kicker,.hero .meta{color:#d8cdbf}
h1,h2{font-family:"Cormorant Garamond",serif;font-weight:500;line-height:.95;margin:0}
h1{font-size:clamp(52px,8.7vw,112px);letter-spacing:-.035em}
h2{font-size:clamp(40px,6vw,78px);letter-spacing:-.025em}
.hero-panel p:not(.kicker){max-width:580px;margin:24px 0 34px;font-size:18px}
.hero-actions{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.button{display:inline-flex;padding:14px 20px;border:1px solid currentColor;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.button.light:hover{background:var(--paper);color:var(--ink)}
.text-link{font-size:13px;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid currentColor}
.studio-statement,.project,.services,.inquire{max-width:var(--max);margin:0 auto;padding:clamp(76px,10vw,136px) clamp(18px,4vw,42px);border-top:1px solid var(--line)}
.studio-statement{text-align:center;max-width:1040px}
.statement-grid{margin:38px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:36px;text-align:left;color:#4d443d;font-size:18px}
.statement-grid p{margin:0}
.project-intro{max-width:850px;margin-bottom:48px}
.project-intro p:last-child{max-width:720px;color:#4d443d;font-size:18px}
.project-intro.split{max-width:none;display:grid;grid-template-columns:.85fr 1fr;gap:48px;align-items:end}
.editorial-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:260px;gap:18px}
figure{margin:0;position:relative;overflow:hidden;background:var(--cream)}
.span-4{grid-column:span 4}.span-5{grid-column:span 5}.span-6{grid-column:span 6}.span-7{grid-column:span 7}.span-8{grid-column:span 8}
.signature-grid .span-7,.signature-grid .span-5{grid-row:span 2}.compact-grid .span-8{grid-row:span 2}
figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px;color:white;font-size:14px;background:linear-gradient(to top,rgba(0,0,0,.66),transparent)}
.image-row{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;margin-bottom:18px}
.image-row figure{height:560px}.image-row figure:not(.large){height:420px;align-self:end}
.small-gallery{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:18px}
.small-gallery img{height:430px;background:var(--cream)}.small-gallery img:first-child{height:520px}
.services{text-align:center}
.service-list{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:34px}
.service-list span{background:var(--paper);padding:28px 20px;font-family:"Cormorant Garamond",serif;font-size:30px}
.inquire{display:grid;grid-template-columns:1fr .8fr;gap:48px;align-items:end}
.inquire p:not(.kicker){color:#4d443d;font-size:18px;max-width:550px}
.contact-card{display:grid;gap:18px;padding:34px;background:var(--ink);color:var(--paper)}
.contact-card a{border-bottom:1px solid rgba(244,239,230,.35);padding-bottom:10px}
footer{display:flex;justify-content:space-between;gap:20px;padding:32px clamp(18px,4vw,56px);color:var(--muted);border-top:1px solid var(--line);font-size:13px}

/* Version 2.1 refinements */
figure img,.small-gallery img{transition:transform .7s ease,filter .7s ease}
figure:hover img,.small-gallery img:hover{transform:scale(1.025);filter:contrast(1.03) saturate(1.03)}
a:focus-visible,button:focus-visible{outline:2px solid var(--clay);outline-offset:4px}
.contact-card a:first-child{font-size:clamp(20px,3vw,30px);font-family:"Cormorant Garamond",serif;letter-spacing:.02em}
.fade-in{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.fade-in.is-visible{opacity:1;transform:translateY(0)}

@media (max-width:900px){
  .site-header{position:absolute;mix-blend-mode:normal}
  .hero-panel{margin:0 18px 28px;width:auto}
  .statement-grid,.project-intro.split,.inquire{grid-template-columns:1fr}
  .editorial-grid{grid-template-columns:1fr 1fr;grid-auto-rows:300px}
  .span-4,.span-5,.span-6,.span-7,.span-8{grid-column:span 1}
  .signature-grid .span-7,.signature-grid .span-5,.compact-grid .span-8{grid-row:span 1}
  .image-row,.small-gallery{grid-template-columns:1fr}
  .image-row figure,.image-row figure:not(.large),.small-gallery img,.small-gallery img:first-child{height:360px}
  .service-list{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  nav{gap:12px} nav a{font-size:10px}.wordmark{font-size:20px}
  h1{font-size:48px} h2{font-size:40px}
  .hero-panel{padding:26px}
  .hero-panel p:not(.kicker),.statement-grid,.project-intro p:last-child,.inquire p:not(.kicker){font-size:16px}
  .editorial-grid{grid-template-columns:1fr}
  .service-list{grid-template-columns:1fr}.service-list span{font-size:26px}
  .contact-card{padding:26px}.contact-card a:first-child{font-size:25px;overflow-wrap:anywhere}
  footer{flex-direction:column}
}
