:root{
  --red:#BF0A30;
  --red-dark:#8C0722;
  --ink:#1B1815;
  --paper:#FFFFFF;
  --stone:#F6F1E9;
  --muted:#6E645B;
  --line:#E4DCCF;
  --max:1240px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Work Sans', sans-serif; font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Newsreader', serif; font-weight:500; margin:0;
  line-height:1.12; color:var(--ink); letter-spacing:-0.01em;
}
p{margin:0 0 1.1em 0;}
a{color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 40px;}
:focus-visible{outline:2.5px solid var(--red); outline-offset:3px;}

.star{display:inline-block; width:11px; height:11px; flex:none;}
.star svg{width:100%; height:100%; fill:var(--red);}

.kicker{
  display:flex; align-items:center; gap:9px;
  font-size:.82rem; font-weight:600; color:var(--red);
  letter-spacing:.01em; margin-bottom:1em; text-transform:uppercase;
}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px; font-family:'Work Sans',sans-serif; font-weight:600;
  font-size:.92rem; text-decoration:none; border:1.4px solid currentColor;
  background:transparent; cursor:pointer; transition:background .2s ease, color .2s ease;
}
.btn-light{color:#fff;}
.btn-light:hover{background:#fff; color:var(--ink);}
.btn-dark{color:var(--ink);}
.btn-dark:hover{background:var(--ink); color:#fff;}
.btn-red{color:var(--red); border-color:var(--red);}
.btn-red:hover{background:var(--red); color:#fff;}

.text-link{
  font-weight:600; color:var(--red); text-decoration:none;
  border-bottom:1.4px solid var(--red); padding-bottom:2px;
}
.text-link:hover{color:var(--red-dark); border-color:var(--red-dark);}

/* ---------------- Header ---------------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 40px; transition:background .3s ease, padding .3s ease, box-shadow .3s ease;
}
header.scrolled{
  background:rgba(255,255,255,.96); padding:16px 40px;
  box-shadow:0 1px 0 var(--line);
  backdrop-filter:blur(6px);
}
.logo{
  display:flex; align-items:center; gap:9px; text-decoration:none;
  font-family:'Newsreader', serif; font-weight:600; font-size:1.35rem;
  letter-spacing:.01em; color:#fff; transition:color .3s ease;
}
header.scrolled .logo{color:var(--ink);}
.logo .star svg{fill:var(--red); width:13px; height:13px;}

.hamburger{
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  width:42px; height:42px; background:none; border:none; cursor:pointer;
  padding:0;
}
.hamburger span{
  display:block; width:26px; height:2px; background:#fff;
  transition:background .3s ease, transform .3s ease, opacity .3s ease;
}
header.scrolled .hamburger span{background:var(--ink);}
body.nav-open .hamburger span{background:#fff !important;}
body.nav-open .hamburger span:nth-child(1){transform:translateY(8px) rotate(45deg);}
body.nav-open .hamburger span:nth-child(2){opacity:0;}
body.nav-open .hamburger span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* ---------------- Nav overlay ---------------- */
.nav-overlay{
  position:fixed; inset:0; z-index:190; background:var(--ink);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:130px 40px 60px;
  opacity:0; visibility:hidden; transform:translateY(-14px);
  transition:opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}
body.nav-open .nav-overlay{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .35s ease, transform .35s ease;
}
.nav-links{list-style:none; margin:0; padding:0;}
.nav-links li{border-top:1px solid rgba(255,255,255,.14);}
.nav-links li:last-child{border-bottom:1px solid rgba(255,255,255,.14);}
.nav-links a{
  display:block; padding:20px 2px; text-decoration:none; color:#fff;
  font-family:'Newsreader', serif; font-size:clamp(1.8rem, 5vw, 3rem);
  font-weight:500; transition:color .2s ease, padding-left .2s ease;
}
.nav-links a:hover, .nav-links a.current{color:var(--red); padding-left:14px;}
.nav-foot{
  display:flex; justify-content:space-between; align-items:flex-end;
  flex-wrap:wrap; gap:20px; color:#B9B0A6; font-size:.92rem;
}
.nav-foot a{color:#fff; text-decoration:none; font-weight:600;}
.nav-foot .socials{display:flex; gap:16px;}
.nav-foot .socials a{color:#B9B0A6;}
.nav-foot .socials a:hover{color:#fff;}

/* ---------------- Hero ---------------- */
.hero{
  position:relative; height:100svh; min-height:560px; padding:0;
  display:flex; align-items:flex-end;
  background-image:url('../images/frontofhouse.webp');
  background-size:cover; background-position:center 62%;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(15,12,10,.82) 0%, rgba(15,12,10,.32) 42%, rgba(15,12,10,0) 68%);
}
.hero-content{position:relative; z-index:2; padding:0 40px 84px; max-width:900px;}
.hero-content .kicker{color:#F0B7C0;}
.hero h1{
  color:#fff; font-size:clamp(2.6rem, 6vw, 4.6rem); max-width:14ch;
  margin-bottom:.3em; animation:rise .8s ease both;
}
.hero p.lede{
  color:#EFE8E0; font-size:1.14rem; max-width:50ch; margin-bottom:1.7em;
  animation:rise .8s .1s ease both;
}
.hero-ctas{animation:rise .8s .2s ease both;}
@keyframes rise{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);}}
.scroll-cue{
  position:absolute; right:40px; bottom:34px; z-index:2; color:#EFE8E0;
  font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; display:flex;
  align-items:center; gap:10px;
}
.scroll-cue .line{width:1px; height:34px; background:rgba(255,255,255,.5); position:relative; overflow:hidden;}
.scroll-cue .line::after{content:""; position:absolute; top:-34px; left:0; width:100%; height:34px; background:#fff; animation:scrollLine 2.2s ease-in-out infinite;}
@keyframes scrollLine{0%{top:-34px;} 100%{top:34px;}}

/* ---------------- Page intro (inner pages) ---------------- */
.page-intro{padding:180px 0 64px; border-bottom:1px solid var(--line);}
.page-intro h1{font-size:clamp(2.3rem, 5vw, 3.4rem); max-width:16ch;}
.page-intro p{color:var(--muted); font-size:1.06rem; max-width:58ch; margin-top:.6em;}

/* ---------------- Section basics ---------------- */
section{padding:130px 0;}
.alt{background:var(--stone);}
.section-head{max-width:640px; margin-bottom:56px;}
.section-head p{color:var(--muted); font-size:1.05rem;}

/* ---------------- About ---------------- */
.about-row{display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center;}
.about-copy p{color:var(--muted); font-size:1.08rem; max-width:52ch;}
.about-visual{position:relative; aspect-ratio:4/5; overflow:hidden;}
.about-visual img{width:100%; height:100%; object-fit:cover; object-position:20% 30%;}
.about-visual::after{content:""; position:absolute; inset:0; background:var(--red); mix-blend-mode:multiply; opacity:.42;}

.stat-row{
  display:flex; flex-wrap:wrap; gap:0; margin-top:52px; border-top:1px solid var(--line);
}
.stat{
  flex:1 1 160px; padding:26px 32px 0 0; border-right:1px solid var(--line);
}
.stat:last-child{border-right:none;}
.stat b{display:block; font-family:'Newsreader',serif; font-size:2.1rem; font-weight:500; color:var(--red); line-height:1;}
.stat span{font-size:.86rem; color:var(--muted);}

/* ---------------- Services ---------------- */
.service-row{
  display:grid; 
  grid-template-columns:1fr 1fr; 
  gap:90px; align-items:center;
  padding: 0; 
  border-top:1px solid var(--line);
}
.service-row:last-child{border-bottom:1px solid var(--line);}
.service-row.reverse .service-visual{order:2;}
.service-row.reverse .service-copy{order:1;}
.service-visual{display:flex; align-items:center; justify-content:center; aspect-ratio:5/4; background:var(--stone);}
.service-visual svg{width:56%; height:56%; stroke:var(--red); fill:none;}
.service-copy .kicker{margin-bottom:.7em;}
.service-copy h3{font-size:1.8rem; margin-bottom:.4em; font-weight:500;}
.service-copy p{color:var(--muted); max-width:48ch;}

/* ---------------- Gallery ---------------- */
.gallery-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); grid-auto-rows:280px; gap:22px;
}
.gallery-item{position:relative; overflow:hidden; background:var(--ink);}
.gallery-item.wide{grid-column:span 2; grid-row:span 2;}
.gallery-item img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.gallery-item:hover img{transform:scale(1.045);}
.gallery-item .g-caption{
  position:absolute; left:0; right:0; bottom:0; padding:22px 24px;
  background:linear-gradient(0deg, rgba(15,12,10,.75), transparent);
  color:#fff;
}
.gallery-item .g-caption .tag{font-size:.76rem; color:#F0B7C0; font-weight:600; letter-spacing:.03em; text-transform:uppercase;}
.gallery-item .g-caption h4{font-family:'Newsreader',serif; font-weight:500; font-size:1.25rem; margin-top:.2em;}
.gallery-item.abstract{
  background:var(--red); display:flex; align-items:flex-end;
}
.gallery-item.abstract svg{position:absolute; top:0; left:0; width:100%; height:100%; opacity:.5;}
.gallery-item.coming-soon{
  background:var(--stone); display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:10px; color:var(--muted);
}
.gallery-item.coming-soon .star svg{fill:var(--red); width:16px; height:16px;}
.gallery-item.coming-soon span.label{font-size:.86rem; font-weight:600;}
.gallery-note{margin-top:40px; color:var(--muted); font-size:.98rem; max-width:56ch;}

/* ---------------- Contact ---------------- */
.contact-row{display:grid; grid-template-columns:1.1fr 0.9fr; gap:100px;}
.field{margin-bottom:26px;}
.field label{display:block; font-size:.83rem; font-weight:600; color:var(--muted); margin-bottom:8px;}
.field input, .field select, .field textarea{
  width:100%; padding:10px 2px 12px; border:none; border-bottom:1.5px solid var(--line);
  background:transparent; font-family:'Work Sans',sans-serif; font-size:1rem; color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--red); outline:none;}
.contact-block{border-top:1px solid var(--line); padding:22px 0;}
.contact-block h4{font-size:.83rem; font-weight:600; color:var(--muted); margin:0 0 .35em;}
.contact-block p, .contact-block a{font-family:'Newsreader',serif; font-size:1.3rem; margin:0; text-decoration:none; color:var(--ink);}
.contact-block:last-child{border-bottom:1px solid var(--line);}

/* ---------------- CTA strip ---------------- */
.cta-strip{background:var(--red); color:#fff; padding:80px 0;}
.cta-strip .wrap{display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap;}
.cta-strip h2{color:#fff; font-size:2.1rem; max-width:18ch;}

/* ---------------- Footer ---------------- */
footer{background:var(--ink); color:#B9B0A6; padding:80px 0 30px;}
.footer-top{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:50px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.14);}
.footer-logo{display:flex; align-items:center; gap:9px; color:#fff; font-family:'Newsreader',serif; font-weight:600; font-size:1.3rem; text-decoration:none; margin-bottom:16px;}
.footer-logo .star svg{fill:var(--red);}
footer p{color:#B9B0A6; max-width:34ch; font-size:.95rem;}
footer h5{color:#fff; font-size:.82rem; font-weight:600; margin:0 0 16px; text-transform:uppercase; letter-spacing:.02em;}
footer a{color:#B9B0A6; text-decoration:none; font-size:.96rem;}
footer a:hover{color:#fff;}
footer .foot-line{margin-bottom:10px;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:.82rem; flex-wrap:wrap; gap:12px;}
.footer-socials{display:flex; gap:16px;}

/* ---------------- Responsive ---------------- */
@media (max-width:900px){
  .wrap{padding:0 24px;}
  header{padding:22px 24px;}
  header.scrolled{padding:14px 24px;}
  .hero-content{padding:0 24px 64px;}
  .scroll-cue{display:none;}
  .about-row, .service-row, .service-row.reverse, 
  .contact-row{grid-template-columns:1fr; gap:0px;}
  .service-row.reverse .service-visual, 
  .service-row.reverse .service-copy{order:initial;}
  .about-visual{order:-1; aspect-ratio:16/10;}
  section{padding:80px 0;}
  .page-intro{padding:150px 0 48px;}
  .gallery-grid{grid-template-columns:1fr 1fr; grid-auto-rows:200px;}
  .gallery-item.wide{grid-column:span 2; grid-row:span 1;}
  .footer-top{grid-template-columns:1fr; gap:36px;}
  .nav-overlay{padding:110px 24px 40px;}
}
@media (max-width:520px){
  .gallery-grid{grid-template-columns:1fr;}
  .gallery-item.wide{grid-column:span 1;}
  .stat-row{flex-direction:column;}
  .stat{border-right:none; border-bottom:1px solid var(--line); padding:20px 0;}
  .cta-strip .wrap{flex-direction:column; align-items:flex-start;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .hero h1,.hero p.lede,.hero-ctas{animation:none;}
  .scroll-cue .line::after{animation:none;}
}