
:root{
  --ivory:#f6f3ed; --paper:#fbfaf7; --ink:#22211f; --muted:#77736c;
  --line:#d8d1c6; --espresso:#594b3d;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
.wrap{width:min(1180px,calc(100% - 48px));margin:auto}
header{position:sticky;top:0;z-index:20;background:rgba(251,250,247,.94);backdrop-filter:blur(10px);border-bottom:1px solid rgba(216,209,198,.75)}
.nav{height:94px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{text-align:center;line-height:1}
.brand b{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:.28em;font-size:19px}
.brand span{display:block;margin-top:9px;font-size:10px;letter-spacing:.52em}
.links{display:flex;gap:27px;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.hero{position:relative;min-height:690px;background:#222;overflow:hidden}
.hero img{position:absolute;inset:0}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.40),rgba(0,0,0,.06) 60%,rgba(0,0,0,.03))}
.hero-copy{position:relative;z-index:2;color:white;padding-top:430px;width:min(1180px,calc(100% - 48px));margin:auto}
.eyebrow{font-size:10px;letter-spacing:.32em;text-transform:uppercase;margin-bottom:16px}
h1,h2,h3{font-family:Georgia,'Times New Roman',serif;font-weight:400;margin:0}
h1{font-size:clamp(46px,7vw,88px);line-height:.95;max-width:780px}
.hero p{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:20px;margin:20px 0 0}
.intro{padding:110px 0 100px;text-align:center}
.intro h2{font-size:clamp(34px,5vw,58px);max-width:900px;margin:auto;line-height:1.12}
.intro p{max-width:670px;margin:28px auto 0;color:var(--muted);line-height:1.8;font-size:15px}
.rule{width:52px;height:1px;background:var(--espresso);margin:32px auto}
.projects{padding:0 0 110px}
.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:34px;border-bottom:1px solid var(--line);padding-bottom:18px}
.section-head h2{font-size:42px}
.section-head span{font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--muted)}
.grid{display:grid;grid-template-columns:1.15fr .85fr;gap:26px}
.card{position:relative;overflow:hidden;background:#eee;min-height:470px}
.card.tall{min-height:650px}
.card img{transition:transform .8s ease}
.card:hover img{transform:scale(1.018)}
.caption{position:absolute;left:0;right:0;bottom:0;padding:55px 26px 24px;color:white;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.caption h3{font-size:29px}
.caption p{margin:7px 0 0;font-size:10px;letter-spacing:.22em;text-transform:uppercase}
.project{padding:105px 0;border-top:1px solid var(--line)}
.project-head{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-bottom:42px;align-items:end}
.project h2{font-size:52px}
.project-copy{color:var(--muted);line-height:1.8}
.gallery{display:grid;grid-template-columns:2fr 1fr;gap:18px}
.gallery .big{height:620px}
.gallery .stack{display:grid;gap:18px}
.gallery .stack div{height:301px}
.about{background:var(--ivory);padding:110px 0}
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:center}
.about h2{font-size:54px;line-height:1.05}
.about p{color:var(--muted);line-height:1.85}
.services{padding:110px 0}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.service{background:var(--paper);padding:42px 34px;min-height:240px}
.service .num{font-family:Georgia,serif;font-style:italic;color:var(--muted)}
.service h3{font-size:27px;margin:40px 0 14px}
.service p{color:var(--muted);font-size:14px;line-height:1.7}
.contact{padding:110px 0;text-align:center;background:#252421;color:#f8f5ef}
.contact h2{font-size:clamp(40px,6vw,70px)}
.contact p{color:#c9c4bb;max-width:600px;margin:22px auto 32px;line-height:1.7}
.button{display:inline-block;border:1px solid currentColor;padding:15px 24px;font-size:10px;letter-spacing:.24em;text-transform:uppercase}
footer{padding:34px 0;background:#252421;color:#aaa49a;border-top:1px solid #44413c;font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.foot{display:flex;justify-content:space-between;gap:20px}
@media(max-width:760px){
 .wrap{width:min(100% - 28px,1180px)}
 .nav{height:78px}.links{display:none}.brand b{font-size:15px}
 .hero{min-height:560px}.hero-copy{padding-top:350px;width:calc(100% - 28px)}
 .grid,.project-head,.about-grid{grid-template-columns:1fr}
 .card,.card.tall{min-height:420px}
 .gallery{grid-template-columns:1fr}.gallery .big{height:430px}.gallery .stack{grid-template-columns:1fr 1fr}.gallery .stack div{height:250px}
 .service-grid{grid-template-columns:1fr}
 .section-head{align-items:start;flex-direction:column;gap:8px}
 .foot{flex-direction:column}
}

.transform{margin-top:58px;border-top:1px solid var(--line);padding-top:34px}
.transform-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:22px}
.transform-head h3{font-size:30px}
.transform-head span{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ba{position:relative;min-height:390px;background:#eee;overflow:hidden}
.ba img{width:100%;height:100%;object-fit:cover}
.tag{position:absolute;top:16px;left:16px;background:rgba(251,250,247,.94);padding:9px 12px;font-size:10px;letter-spacing:.22em;text-transform:uppercase}
@media(max-width:760px){.ba-grid{grid-template-columns:1fr}.ba{min-height:320px}.transform-head{align-items:start;flex-direction:column}}

.logo-masthead{
  background:var(--paper);
  padding:32px 24px 26px;
  display:flex;
  justify-content:center;
  align-items:center;
}
.logo-masthead img{
  width:190px;
  height:auto;
  object-fit:contain;
}
.brand-mini{display:block;width:92px;height:70px;overflow:hidden}
.brand-mini img{width:100%;height:100%;object-fit:contain}
.hero{min-height:585px}
.hero-copy{padding-top:355px}
.contact-lead{margin-bottom:42px!important}
.contact-details{
  width:min(850px,100%);
  margin:0 auto 38px;
  padding:30px 0;
  border-top:1px solid #4a4741;
  border-bottom:1px solid #4a4741;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  text-align:left;
}
.contact-details span{
  display:block;
  color:#9f9a91;
  font-size:9px;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.contact-details strong{
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  font-size:17px;
  line-height:1.5;
  color:#f8f5ef;
}
@media(max-width:760px){
 .logo-masthead{padding:24px 18px 20px}
 .logo-masthead img{width:160px}
 .brand-mini{width:72px;height:56px}
 .hero{min-height:500px}
 .hero-copy{padding-top:300px}
 .contact-details{grid-template-columns:1fr;text-align:center}
}

/* Final launch polish: tighter logo masthead */
.logo-masthead{
  padding:18px 24px 14px !important;
}
@media(max-width:760px){
  .logo-masthead{padding:16px 18px 12px !important}
}

/* Header correction: centered navigation logo + unboxed horizontal wordmark */
.nav{position:relative}
.brand-mini{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:86px !important;
  height:70px !important;
}
.links{margin-left:auto}

.logo-masthead.clean-wordmark{
  min-height:150px !important;
  padding:26px 24px 24px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:var(--paper) !important;
}
.clean-wordmark .wordmark{
  text-align:center;
  color:var(--ink);
  line-height:1;
}
.clean-wordmark .wordmark-main{
  font-family:Georgia,'Times New Roman',serif;
  font-size:31px;
  font-weight:400;
  letter-spacing:.38em;
  padding-left:.38em;
  white-space:nowrap;
}
.clean-wordmark .wordmark-sub{
  margin-top:12px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:10px;
  letter-spacing:.62em;
  padding-left:.62em;
  white-space:nowrap;
}
@media(max-width:760px){
  .brand-mini{width:68px !important;height:54px !important}
  .logo-masthead.clean-wordmark{min-height:120px !important;padding:22px 18px !important}
  .clean-wordmark .wordmark-main{font-size:23px;letter-spacing:.28em;padding-left:.28em}
  .clean-wordmark .wordmark-sub{font-size:8px;letter-spacing:.5em;padding-left:.5em}
}
