:root{
  --navy:#16232F;
  --slate:#3F5568;
  --stone:#8A9AA5;
  --stone-dark:#4F5E69;
  --mist:#DDE3E6;
  --paper:#F6F7F6;
  --line: rgba(22,35,47,0.14);
  --line-light: rgba(246,247,246,0.28);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', sans-serif;
  color:var(--navy);
  background:var(--paper);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{
  font-family:'Fraunces', serif;
  font-weight:400;
  letter-spacing:-0.01em;
}
img{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1240px; margin:0 auto; padding:0 40px;}

/* ---------- corner brackets (architectural motif) ---------- */
.bracketed{position:relative;}
.bracketed::before,
.bracketed::after{
  content:"";
  position:absolute;
  width:22px; height:22px;
  border:1.5px solid rgba(246,247,246,0.85);
  z-index:2;
}
.bracketed::before{top:14px; left:14px; border-right:none; border-bottom:none;}
.bracketed::after{bottom:14px; right:14px; border-left:none; border-top:none;}
.bracketed.dark::before,
.bracketed.dark::after{border-color:rgba(22,35,47,0.55);}

/* ---------- nav ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:26px 0;
  transition:background 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease;
}
header.scrolled, body.interior header{
  background:rgba(246,247,246,0.96);
  padding:16px 0;
  box-shadow:0 1px 0 var(--line);
  backdrop-filter:blur(6px);
}
header .wrap{display:flex; align-items:center; justify-content:space-between;}
.logo{display:inline-flex; align-items:center;}
.logo img{
  height:68px; width:auto; display:block;
  filter:brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0,0,0,0.35));
  transition:filter 0.35s ease;
}
header.scrolled .logo img, body.interior header .logo img{
  filter:none;
}
@media (max-width:860px){
  .logo img{height:52px;}
}
nav.primary{display:flex; align-items:center; gap:40px;}
nav.primary a{
  font-size:14px; letter-spacing:0.04em; color:#fff;
  padding-bottom:2px; border-bottom:1px solid transparent;
  transition:color 0.3s ease, border-color 0.3s ease;
}
header.scrolled nav.primary a, body.interior header nav.primary a{color:var(--navy);}
nav.primary a.active{border-color:currentColor;}
nav.primary a:hover{border-color:currentColor;}
nav.primary .cta-link{
  color:#fff; border:1px solid var(--line-light); padding:9px 18px; border-radius:2px; font-size:13px;
}
header.scrolled nav.primary .cta-link, body.interior header nav.primary .cta-link{border-color:var(--navy); color:var(--navy);}
.nav-toggle{display:none;}

/* ---------- hero (home) ---------- */
.hero{
  position:relative; height:100vh; min-height:640px;
  display:flex; align-items:flex-end;
  overflow:hidden;
  color:#fff;
}
.hero-img{
  position:absolute; inset:0; width:100%; height:110%; object-fit:cover;
  z-index:0;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(22,35,47,0.30) 0%, rgba(22,35,47,0.15) 40%, rgba(22,35,47,0.82) 100%);
  z-index:1;
}
.hero-content{position:relative; z-index:2; width:100%; padding-bottom:88px;}
.hero-content .wrap{max-width:760px; margin:0; padding-left:40px;}
.hero-eyebrow{
  font-size:13px; color:var(--mist); margin-bottom:18px; opacity:0;
  letter-spacing:0.14em; text-transform:uppercase; font-weight:500;
  animation:rise 0.9s ease 0.2s forwards;
}
.hero h1{
  font-size:clamp(38px, 5.4vw, 66px);
  line-height:1.08;
  font-weight:400;
  margin-bottom:22px;
  opacity:0;
  animation:rise 0.9s ease 0.4s forwards;
}
.hero p{
  font-size:18px; max-width:480px; color:var(--mist); margin-bottom:34px;
  opacity:0;
  animation:rise 0.9s ease 0.6s forwards;
}
.hero-actions{display:flex; gap:16px; align-items:center; opacity:0; animation:rise 0.9s ease 0.8s forwards;}
@keyframes rise{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);} }

/* ---------- interior page hero (About / Services / Gallery / Contact) ---------- */
.page-hero{
  position:relative; height:46vh; min-height:340px;
  display:flex; align-items:flex-end;
  overflow:hidden; color:#fff;
}
.page-hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.page-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(22,35,47,0.35) 0%, rgba(22,35,47,0.78) 100%);
}
.page-hero-content{position:relative; z-index:2; padding-bottom:56px;}
.page-hero-content .eyebrow{font-size:13px; color:var(--mist); margin-bottom:14px; letter-spacing:0.14em; text-transform:uppercase; font-weight:500;}
.page-hero-content h1{font-size:clamp(32px,4.4vw,50px); font-weight:400;}

.btn{
  display:inline-block; padding:15px 30px; font-size:14px; letter-spacing:0.03em;
  border-radius:2px; transition:background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; border:1px solid transparent; cursor:pointer;
}
.btn:hover{transform:translateY(-2px);}
.btn-solid:hover{box-shadow:0 10px 24px rgba(22,35,47,0.18);}
.btn-dark:hover{box-shadow:0 10px 24px rgba(22,35,47,0.28);}
.btn-solid{background:#fff; color:var(--navy);}
.btn-solid:hover{background:var(--mist);}
.btn-outline{border:1px solid var(--line-light); color:#fff;}
.btn-outline:hover{background:rgba(255,255,255,0.08);}
.btn-dark{background:var(--navy); color:#fff;}
.btn-dark:hover{background:var(--slate);}

/* ---------- intro ---------- */
.intro{padding:120px 0; }
.intro .wrap{display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;}
.intro-text .label{font-size:13px; color:var(--stone-dark); margin-bottom:18px; letter-spacing:0.12em; text-transform:uppercase; font-weight:500;}
.intro-text h2{font-size:clamp(28px,3vw,38px); line-height:1.25; margin-bottom:24px; max-width:460px;}
.intro-text p{color:var(--slate); max-width:440px; margin-bottom:20px; font-size:15.5px;}
.facts{display:flex; gap:36px; margin-top:34px; border-top:1px solid var(--line); padding-top:24px;}
.facts div{flex:1;}
.facts .n{font-family:'Fraunces', serif; font-size:26px; display:block; margin-bottom:4px;}
.facts .l{font-size:13px; color:var(--stone-dark); letter-spacing:0.02em;}
.intro-img img{width:100%; height:560px; object-fit:cover;}

/* ---------- projects / gallery ---------- */
.projects{padding:0 0 130px;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:56px; gap:24px; flex-wrap:wrap;}
.section-head h2{font-size:clamp(28px,3vw,38px);}
.section-head p{color:var(--stone-dark); font-size:15px; max-width:340px;}
.project-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:24px;}
.project-col-b{display:flex; flex-direction:column; gap:24px;}
.project-card{position:relative; overflow:hidden;}
.project-card img{width:100%; height:100%; object-fit:cover; transition:transform 0.6s ease;}
.project-card:hover img{transform:scale(1.04);}
.project-card .cap{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:24px; color:#fff;
  background:linear-gradient(0deg, rgba(22,35,47,0.75), rgba(22,35,47,0));
}
.project-card .cap .name{font-family:'Fraunces', serif; font-size:20px; margin-bottom:2px;}
.project-card .cap .loc{font-size:13px; color:var(--mist);}
.project-main{height:100%;}
.project-sub{height:calc(50% - 12px);}

.gallery-page{padding:110px 0 130px;}
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; grid-auto-flow:dense;}
.gallery-grid .g-tall{grid-row:span 2; height:100%;}
.gallery-grid .project-card{height:280px;}
.gallery-grid .g-tall .project-card{height:100%;}
.gallery-note{margin-top:48px; padding-top:28px; border-top:1px solid var(--line); color:var(--stone-dark); font-size:14.5px; max-width:560px;}

/* ---------- process ---------- */
.process{background:var(--navy); color:#fff; padding:120px 0;}
.process .section-head h2{color:#fff;}
.process .section-head p{color:var(--stone);}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative;}
.steps::before{
  content:""; position:absolute; top:20px; left:0; right:0; height:1px; background:var(--line-light);
}
.step{padding-right:32px; padding-top:56px; position:relative;}
.step .num{
  position:absolute; top:0; left:0;
  font-family:'Fraunces', serif; font-size:15px; color:var(--stone);
  background:var(--navy); padding-right:14px;
}
.step h3{font-size:19px; font-weight:500; margin-bottom:10px; font-family:'Inter';}
.step p{font-size:14.5px; color:var(--mist); max-width:250px;}

/* ---------- differentiators / services list ---------- */
.diff{padding:120px 0;}
.diff-grid{display:grid; grid-template-columns:repeat(3,1fr);}
.diff-item{padding:0 40px 0 0; border-left:1px solid var(--line); padding-left:36px;}
.diff-item:first-child{border-left:none; padding-left:0;}
.diff-item h3{font-size:20px; font-weight:400; margin-bottom:14px;}
.diff-item p{color:var(--slate); font-size:15px;}

.services-list{padding:110px 0;}
.service-row{
  display:grid; grid-template-columns:1fr 2fr; gap:60px;
  padding:44px 0; border-top:1px solid var(--line);
}
.service-row:last-child{border-bottom:1px solid var(--line);}
.service-row h3{font-size:24px; font-weight:400;}
.service-row p{color:var(--slate); font-size:15.5px; max-width:520px; margin-bottom:14px;}
.service-row ul{color:var(--slate); font-size:14.5px; padding-left:18px;}
.service-row li{margin-bottom:6px;}

/* ---------- testimonial ---------- */
.testimonial{background:var(--mist); padding:130px 0;}
.testimonial .wrap{max-width:820px;}
.testimonial blockquote{
  font-family:'Fraunces', serif; font-size:clamp(24px,3vw,34px); line-height:1.42; font-weight:400; color:var(--navy);
  margin-bottom:32px;
}
.testimonial cite{font-style:normal; font-size:14px; color:var(--slate); display:block;}
.testimonial cite span{color:var(--stone-dark);}

.testimonial-grid{max-width:none !important; display:grid; grid-template-columns:1fr 1fr; gap:60px;}
.testimonial-item{border-left:1px solid var(--line); padding-left:44px;}
.testimonial-item:first-child{border-left:none; padding-left:0;}
.testimonial-item blockquote{font-size:clamp(19px,2.1vw,23px); line-height:1.48; margin-bottom:24px; position:relative; padding-left:2px;}
.testimonial-item blockquote::before{
  content:"\201C"; display:block; font-family:'Fraunces', serif; font-size:64px; line-height:1;
  color:var(--stone); opacity:0.35; margin-bottom:-14px;
}

/* ---------- cta band ---------- */
.cta-band{padding:110px 0; text-align:left;}
.cta-band .wrap{display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap;}
.cta-band h2{font-size:clamp(26px,3vw,36px); max-width:520px;}
.cta-band .region{color:var(--stone-dark); font-size:14px; margin-top:10px;}

/* ---------- about page specifics ---------- */
.values{padding:0 0 120px;}
.values-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:40px 60px;}
.value-item{border-top:1px solid var(--line); padding-top:22px;}
.value-item h3{font-size:19px; font-weight:400; margin-bottom:10px;}
.value-item p{color:var(--slate); font-size:15px;}

/* ---------- contact page ---------- */
.contact-wrap{padding:110px 0 140px;}
.contact-columns{display:grid; grid-template-columns:1fr 1fr; gap:80px;}
.contact-info h2{font-size:clamp(26px,3vw,34px); margin-bottom:22px; max-width:420px;}
.contact-info p{color:var(--slate); font-size:15.5px; max-width:420px; margin-bottom:34px;}
.contact-detail{border-top:1px solid var(--line); padding:20px 0;}
.contact-detail .l{font-size:13px; color:var(--stone-dark); margin-bottom:6px;}
.contact-detail .v{font-size:15.5px;}
form.contact-form{display:flex; flex-direction:column; gap:20px;}
.f-row{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.field label{display:block; font-size:13px; color:var(--stone-dark); margin-bottom:8px;}
.field input, .field select, .field textarea{
  width:100%; border:none; border-bottom:1px solid var(--line); background:transparent;
  padding:10px 2px; font-family:'Inter'; font-size:15px; color:var(--navy);
  transition:border-color 0.3s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--slate);}
.field textarea{resize:vertical; min-height:110px;}
.contact-form .btn{align-self:flex-start; margin-top:10px; border:none;}
.form-note{font-size:13px; color:var(--stone-dark); margin-top:6px;}

/* ---------- footer ---------- */
footer{background:var(--navy); color:var(--mist); padding:80px 0 30px;}
.footer-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:60px; border-bottom:1px solid var(--line-light);}
.footer-logo{display:inline-block; margin-bottom:18px;}
.footer-logo img{
  height:52px; display:block;
  filter:brightness(0) invert(1);
}
.footer-top p{font-size:14px; color:var(--stone); max-width:260px;}
.fcol h4{font-size:13px; color:var(--stone); margin-bottom:16px; font-weight:500;}
.fcol a, .fcol p{display:block; font-size:14.5px; margin-bottom:10px; color:var(--mist);}
.fcol a:hover{color:#fff;}
.footer-bottom{display:flex; justify-content:space-between; padding-top:26px; font-size:13px; color:var(--stone); flex-wrap:wrap; gap:10px;}

/* ---------- photo tone unification ---------- */
.project-card img, .intro-img img, .page-hero-img, .hero-img{
  filter: saturate(0.94) contrast(1.03) brightness(1.01);
}

/* ---------- refined gallery cards (brackets removed at scale; soft frame instead) ---------- */
.gallery-grid .project-card{
  border-radius:3px;
  cursor:pointer;
  box-shadow:0 1px 3px rgba(22,35,47,0.08);
  transition:box-shadow 0.35s ease, transform 0.35s ease;
}
.gallery-grid .project-card:hover{
  box-shadow:0 14px 34px rgba(22,35,47,0.22);
  transform:translateY(-3px);
}
.gallery-grid .project-card:focus-visible{
  outline:2px solid var(--slate);
  outline-offset:3px;
}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed; inset:0; background:rgba(10,16,22,0.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity 0.3s ease;
  z-index:1000; padding:60px;
}
.lightbox.open{opacity:1; visibility:visible;}
.lightbox-stage{width:min(1400px, 88vw); height:86vh; display:flex; align-items:center; justify-content:center;}
.lightbox-img{width:100%; height:100%; object-fit:contain; box-shadow:0 20px 60px rgba(0,0,0,0.5); border-radius:2px;}
.lightbox-close, .lightbox-nav{
  position:absolute; background:rgba(255,255,255,0.08); color:#fff; border:1px solid rgba(255,255,255,0.25);
  border-radius:50%; width:46px; height:46px; display:flex; align-items:center; justify-content:center;
  font-size:22px; cursor:pointer; transition:background 0.3s ease; line-height:1;
}
.lightbox-close:hover, .lightbox-nav:hover{background:rgba(255,255,255,0.18);}
.lightbox-close{top:24px; right:24px;}
.lightbox-prev{left:24px; top:50%; transform:translateY(-50%);}
.lightbox-next{right:24px; top:50%; transform:translateY(-50%);}
@media (max-width:860px){
  .lightbox{padding:20px;}
  .lightbox-prev{left:8px;} .lightbox-next{right:8px;}
  .lightbox-close{top:12px; right:12px;}
}

/* ---------- animated hamburger ---------- */
.nav-toggle span{transition:transform 0.3s ease, opacity 0.3s ease;}
.nav-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity 0.8s ease, transform 0.8s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}
@media (max-width: 860px){
  .wrap{padding:0 24px;}
  nav.primary{position:fixed; top:0; right:0; bottom:0; width:78%; max-width:340px;
    background:var(--navy); flex-direction:column; align-items:flex-start; justify-content:flex-start;
    gap:28px; padding:100px 36px 36px; overflow-y:auto; transform:translateX(100%); transition:transform 0.4s ease; z-index:99;}
  nav.primary.open{transform:translateX(0);}
  nav.primary a{color:#fff !important;}
  .nav-toggle{display:flex; flex-direction:column; gap:5px; width:26px; z-index:101; background:none; border:none; cursor:pointer;}
  .nav-toggle span{height:1.5px; width:100%; background:#fff; display:block;}
  header.scrolled .nav-toggle span, body.interior .nav-toggle span{background:var(--navy);}
  .intro .wrap, .project-grid, .steps, .diff-grid, .footer-top, .values-grid, .contact-columns, .service-row, .testimonial-grid{grid-template-columns:1fr;}
  .steps::before{display:none;}
  .step{padding-top:0; padding-right:0; margin-bottom:40px;}
  .step .num{position:static; display:block; margin-bottom:10px; padding:0;}
  .diff-item{border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:28px; margin-top:28px;}
  .diff-item:first-child{border-top:none; padding-top:0; margin-top:0;}
  .project-grid{gap:16px;}
  .project-main{height:320px;}
  .project-col-b{flex-direction:row; height:220px;}
  .intro-img img{height:340px;}
  .cta-band .wrap{flex-direction:column; align-items:flex-start;}
  .gallery-grid{grid-template-columns:1fr;}
  .gallery-grid .g-tall{grid-row:auto;}
  .service-row{gap:14px;}
  .f-row{grid-template-columns:1fr;}
  .testimonial-item{border-left:none; padding-left:0; padding-top:36px; border-top:1px solid var(--line);}
  .testimonial-item:first-child{padding-top:0; border-top:none;}
}