:root{
  --red:#f40000;
  --red-dark:#b90000;
  --black:#080808;
  --ink:#171717;
  --muted:#626262;
  --soft:#f4f5f6;
  --soft-2:#e7e8ea;
  --line:#d3d5d8;
  --oxford:#44484d;
  --steel:#2d5875;
  --copper:#b85e27;
  --white:#ffffff;
  --radius:24px;
  --shadow:0 24px 80px rgba(0,0,0,.13);
  --shadow-soft:0 14px 38px rgba(0,0,0,.09);
  --container:min(1180px, calc(100% - 36px));
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit}
.container{width:var(--container); margin-inline:auto}
.section-pad{padding:92px 0}
.skip-link{position:absolute; left:-999px; top:12px; z-index:99; background:#fff; color:#000; padding:10px 14px; border-radius:8px}
.skip-link:focus{left:12px}

.site-header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(0,0,0,.08);
}
.navbar{display:flex; align-items:center; justify-content:space-between; min-height:78px; gap:22px}
.brand{display:flex; align-items:center; width:190px; max-width:54vw}
.brand img{width:100%; height:auto; object-fit:contain}
.nav-menu{display:flex; align-items:center; gap:8px}
.nav-menu a{
  font-weight:700;
  font-size:.92rem;
  color:#222;
  padding:10px 13px;
  border-radius:999px;
  transition:.25s ease;
}
.nav-menu a:hover{background:var(--black); color:#fff}
.nav-toggle{display:none; width:44px; height:44px; border:0; border-radius:12px; background:var(--black); cursor:pointer; padding:10px}
.nav-toggle span{display:block; height:2px; background:#fff; margin:6px 0; border-radius:10px; transition:.25s ease}
.nav-toggle.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle.active span:nth-child(2){opacity:0}
.nav-toggle.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.hero{
  position:relative;
  min-height:calc(100svh - 78px);
  display:flex;
  align-items:center;
  overflow:hidden;
  background:linear-gradient(120deg, #101010 0%, #31363b 58%, #f7f7f7 58%);
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.45),rgba(255,255,255,.10)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px, transparent 1px 90px);
  z-index:1;
}
.hero-bg{
  position:absolute;
  inset:0;
  background-image:url('../assets/img/hero-casa60.jpg');
  background-size:cover;
  background-position:center;
  opacity:.27;
  filter:saturate(.85) contrast(1.05);
}
.hero-grid{position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .78fr; gap:44px; align-items:center}
.eyebrow,.section-kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--red);
}
.eyebrow::before,.section-kicker::before{content:""; width:34px; height:3px; background:currentColor; border-radius:4px}
.hero h1{
  margin:18px 0 18px;
  color:#fff;
  font-size:clamp(3.3rem, 7vw, 7.3rem);
  line-height:.86;
  letter-spacing:-.07em;
  text-transform:uppercase;
  max-width:900px;
}
.hero-lead{
  max-width:680px;
  font-size:clamp(1.05rem, 2vw, 1.3rem);
  color:#f1f1f1;
  margin:0 0 30px;
}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:50px;
  padding:13px 22px;
  border-radius:999px;
  font-weight:800;
  transition:.25s ease;
}
.btn-primary{background:var(--red); color:#fff; box-shadow:0 18px 45px rgba(244,0,0,.32)}
.btn-primary:hover{background:var(--red-dark); transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24); color:#fff}
.btn-ghost:hover{background:#fff; color:#111; transform:translateY(-2px)}
.hero-card{
  background:rgba(255,255,255,.94);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.65);
  position:relative;
  overflow:hidden;
}
.hero-card::before{content:""; position:absolute; inset:0 auto 0 0; width:9px; background:var(--red)}
.hero-logo{background:#fff; border-radius:18px; padding:14px; box-shadow:var(--shadow-soft); margin-bottom:18px}
.metric-wrap{display:grid; gap:12px}
.metric{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:15px; background:var(--soft); border-radius:16px; border:1px solid #ececec}
.metric strong{font-size:1.05rem}
.metric span{color:var(--muted); font-weight:700; font-size:.84rem; text-align:right}

.intro-strip{background:#fff; padding-top:34px; padding-bottom:34px; position:relative; z-index:3}
.strip-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:-72px}
.strip-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:22px;
  padding:27px;
  box-shadow:var(--shadow-soft);
}
.strip-card span{display:inline-grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--black); color:#fff; font-weight:900; margin-bottom:12px}
.strip-card h2{margin:0 0 8px; font-size:1.3rem}
.strip-card p{margin:0; color:var(--muted)}

.about{background:linear-gradient(180deg,#fff,#f8f8f8)}
.about-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:42px; align-items:center}
.about-image{border-radius:28px; overflow:hidden; box-shadow:var(--shadow); background:#fff; border:1px solid rgba(0,0,0,.08)}
.about-image img{width:100%; height:100%; min-height:470px; object-fit:cover; object-position:center}
.about-copy h2,.section-head h2,.casa-hero h2,.contact-copy h2,.documents h2{
  font-size:clamp(2rem,4.4vw,4rem);
  line-height:1;
  letter-spacing:-.045em;
  margin:14px 0 16px;
}
.about-copy p,.section-head p,.casa-hero p,.documents p,.contact-copy p{color:var(--muted); font-size:1.04rem; margin:0 0 18px}
.statement-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px}
.statement-grid article{background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:20px; padding:22px; box-shadow:var(--shadow-soft)}
.statement-grid h3{margin:0 0 8px; color:#000}
.statement-grid p{font-size:.98rem; margin:0}

.values-section{background:#111; color:#fff; position:relative; overflow:hidden}
.values-section::after{content:""; position:absolute; width:420px; height:420px; border:80px solid rgba(244,0,0,.12); border-radius:50%; right:-140px; bottom:-210px}
.values-section .section-head{position:relative; z-index:1; max-width:850px}
.values-section h2{color:#fff}
.values-grid{position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}
.values-grid span{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#fff; border-radius:999px; padding:11px 16px; font-weight:800}

.services{background:var(--soft)}
.section-head{max-width:830px; margin-bottom:34px}
.centered{text-align:center; margin-inline:auto}
.centered .section-kicker{justify-content:center}
.centered .section-kicker::before{display:none}
.services-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.services-grid article{
  min-height:122px;
  background:#fff;
  border-radius:18px;
  padding:18px;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
  border:1px solid #ebebeb;
  position:relative;
  overflow:hidden;
  transition:.25s ease;
}
.services-grid article::after{content:""; position:absolute; right:-26px; top:-26px; width:70px; height:70px; background:rgba(244,0,0,.08); border-radius:22px; transform:rotate(16deg)}
.services-grid article:hover{transform:translateY(-4px); box-shadow:var(--shadow-soft)}
.services-grid span{display:block; width:32px; height:5px; background:var(--red); border-radius:8px; margin-bottom:18px}
.services-grid h3{font-size:.98rem; line-height:1.25; margin:0}

.projects{background:#fff}
.timeline{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.timeline-card{
  display:grid;
  grid-template-columns:210px 1fr;
  min-height:210px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:24px;
  box-shadow:var(--shadow-soft);
}
.timeline-card img{width:100%; height:100%; object-fit:cover; cursor:zoom-in; transition:.35s ease}
.timeline-card:hover img{transform:scale(1.04)}
.timeline-card div{padding:22px}
.timeline-card span{font-size:.76rem; text-transform:uppercase; letter-spacing:.13em; color:var(--red); font-weight:900}
.timeline-card h3{margin:6px 0 8px; font-size:1.23rem; line-height:1.15}
.timeline-card p{margin:0; color:var(--muted); font-size:.96rem}
.subsection-title{margin:58px 0 22px; display:flex; justify-content:space-between; align-items:end; gap:24px}
.subsection-title h3{font-size:clamp(1.7rem,3vw,2.6rem); margin:0; letter-spacing:-.04em}
.subsection-title p{margin:0; color:var(--muted)}
.portfolio-grid,.project-gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.portfolio-grid figure,.project-gallery figure{margin:0; border-radius:22px; overflow:hidden; background:#fff; box-shadow:var(--shadow-soft); border:1px solid rgba(0,0,0,.08)}
.portfolio-grid img,.project-gallery img{width:100%; aspect-ratio:4/3; object-fit:cover; cursor:zoom-in; transition:.35s ease}
.portfolio-grid figure:hover img,.project-gallery figure:hover img{transform:scale(1.05)}
.portfolio-grid figcaption,.project-gallery figcaption{padding:14px 16px; font-weight:800; color:#111; font-size:.95rem}

.casa{background:linear-gradient(180deg,#f7f7f7,#fff)}
.casa-hero{display:grid; grid-template-columns:.8fr 1.2fr; gap:24px; align-items:stretch; background:#fff; border-radius:32px; padding:28px; box-shadow:var(--shadow); border:1px solid rgba(0,0,0,.08)}
.casa-hero>div{padding:20px; display:flex; flex-direction:column; justify-content:center}
.casa-hero img{width:100%; height:100%; min-height:340px; object-fit:cover; border-radius:24px; cursor:zoom-in}
.finish-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:28px 0 28px}
.finish-grid article{background:#161616; color:#fff; border-radius:22px; padding:24px; position:relative; overflow:hidden}
.finish-grid article::after{content:""; position:absolute; inset:auto -24px -34px auto; width:110px; height:110px; background:rgba(244,0,0,.18); border-radius:50%}
.finish-grid span{color:var(--red); font-weight:900; letter-spacing:.12em; text-transform:uppercase; font-size:.74rem}
.finish-grid h3{margin:8px 0; font-size:1.2rem}
.finish-grid p{margin:0; color:#d8d8d8}
.gallery-toolbar{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:18px 0 24px}
.filter-btn{border:1px solid #ddd; background:#fff; color:#222; border-radius:999px; padding:10px 18px; font-weight:900; cursor:pointer; transition:.25s ease}
.filter-btn.active,.filter-btn:hover{background:var(--black); color:#fff; border-color:var(--black)}
.project-gallery figure.hidden{display:none}

.documents{background:#111; color:#fff}
.documents-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:28px; align-items:center}
.documents p{color:#d8d8d8}
.document-cards{display:grid; gap:14px}
.document-cards article{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.13); border-radius:20px; padding:20px}
.document-cards strong{display:block; margin-bottom:6px; color:#fff; font-size:1.12rem}
.document-cards span{color:#d6d6d6}

.contact{background:#f6f6f6}
.contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:34px; align-items:center}
.contact-card{font-style:normal; background:#fff; padding:28px; border-radius:28px; border:1px solid rgba(0,0,0,.08); box-shadow:var(--shadow-soft); display:grid; gap:18px}
.contact-card div{padding:18px; border-radius:18px; background:var(--soft); border-left:5px solid var(--red)}
.contact-card span{display:block; color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.14em; font-weight:900; margin-bottom:8px}
.contact-card strong,.contact-card a{display:block; color:#111; font-weight:900; overflow-wrap:anywhere}
.contact-card a:hover{color:var(--red)}

.site-footer{background:#060606; color:#fff; padding:32px 0}
.footer-grid{display:grid; grid-template-columns:180px 1fr auto; gap:22px; align-items:center}
.footer-grid img{background:#fff; border-radius:14px; padding:8px}
.footer-grid strong{font-size:1.1rem}
.footer-grid p{margin:4px 0 0; color:#cfcfcf}
.back-top{background:#fff; color:#000; border-radius:999px; padding:12px 18px; font-weight:900}

.lightbox{position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center; padding:28px; background:rgba(0,0,0,.86)}
.lightbox.active{display:flex}
.lightbox img{max-width:min(1120px, 92vw); max-height:82vh; object-fit:contain; border-radius:16px; box-shadow:0 24px 80px rgba(0,0,0,.5); background:#fff}
.lightbox p{position:absolute; bottom:18px; left:50%; transform:translateX(-50%); color:#fff; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:9px 16px; font-weight:800; max-width:90vw; text-align:center}
.lightbox-close{position:absolute; top:18px; right:22px; border:0; background:#fff; color:#000; width:44px; height:44px; border-radius:50%; font-size:2rem; line-height:1; cursor:pointer}

.reveal{opacity:1; transform:none; transition:opacity .65s ease, transform .65s ease}
.reveal.visible{opacity:1; transform:none}

@media (max-width:1060px){
  .services-grid{grid-template-columns:repeat(3,1fr)}
  .timeline{grid-template-columns:1fr}
  .portfolio-grid,.project-gallery{grid-template-columns:repeat(3,1fr)}
  .hero-grid{grid-template-columns:1fr; padding-top:20px}
  .hero-card{max-width:620px}
  .hero{background:#141414}
}

@media (max-width:820px){
  .section-pad{padding:68px 0}
  .nav-toggle{display:block}
  .nav-menu{
    position:absolute;
    left:18px;
    right:18px;
    top:78px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    padding:16px;
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:18px;
    box-shadow:var(--shadow-soft);
  }
  .nav-menu.active{display:flex}
  .nav-menu a{padding:13px 14px}
  .strip-grid,.about-grid,.statement-grid,.casa-hero,.finish-grid,.documents-grid,.contact-grid,.footer-grid{grid-template-columns:1fr}
  .strip-grid{margin-top:0}
  .intro-strip{padding-top:40px}
  .about-image img{min-height:auto}
  .timeline-card{grid-template-columns:1fr}
  .timeline-card img{height:240px}
  .portfolio-grid,.project-gallery{grid-template-columns:repeat(2,1fr)}
  .footer-grid{text-align:center}
  .footer-grid img{margin:auto; max-width:180px}
  .back-top{justify-self:center}
}

@media (max-width:560px){
  :root{--container:min(100% - 24px, 1180px); --radius:20px}
  .navbar{min-height:70px}
  .brand{width:150px}
  .nav-menu{top:70px}
  .hero{min-height:auto; padding-top:74px}
  .hero h1{font-size:clamp(2.55rem,15vw,4.7rem); letter-spacing:-.06em}
  .hero-lead{font-size:1rem}
  .hero-card,.casa-hero,.contact-card{padding:18px; border-radius:20px}
  .metric{display:block}
  .metric span{text-align:left; display:block; margin-top:2px}
  .services-grid{grid-template-columns:1fr}
  .portfolio-grid,.project-gallery{grid-template-columns:1fr}
  .subsection-title{display:block}
  .lightbox{padding:14px}
  .lightbox p{position:fixed; bottom:10px; border-radius:14px}
}