:root{
  --concrete-900:#1c1c1a;
  --concrete-800:#2b2a27;
  --concrete-600:#59564f;
  --concrete-300:#c9c5ba;
  --concrete-100:#efece5;
  --concrete-050:#f8f6f1;
  --steel-500:#3a5a6f;
  --steel-700:#28404f;
  --orange-600:#cf4f1e;
  --orange-700:#af3f16;
  --orange-100:#fbe7dc;
  --white:#ffffff;
  --line:rgba(28,28,26,0.12);
  --line-dark:rgba(255,255,255,0.14);
  --radius-s:3px;
  --radius-m:6px;
  --shadow-1: 0 1px 2px rgba(20,18,14,0.06), 0 8px 24px rgba(20,18,14,0.06);
  --maxw:1180px;
  box-sizing:border-box;
  padding-top: env(safe-area-inset-top,0px);
  padding-bottom: env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit;}
html{scroll-behavior:smooth; scroll-padding-top: calc(78px + env(safe-area-inset-top,0px));}
body{
  margin:0;
  font-family:'Work Sans',sans-serif;
  color:var(--concrete-900);
  background:var(--concrete-050);
  -webkit-font-smoothing:antialiased;
}
/* Safety net: clip any stray horizontal overflow (e.g. from embeds) inside
   the page content. Deliberately NOT applied to <header>, which needs
   overflow:visible for position:sticky to keep working correctly. */
main, footer{overflow-x:clip; max-width:100vw;}
img{max-width:100%;display:block;}
iframe{max-width:100%;}
a{color:inherit;}
h1,h2,h3,h4{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  line-height:1.02;
  margin:0;
  letter-spacing:0.002em;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
section{scroll-margin-top:78px;}
.eyebrow-none{} /* intentionally no ALL-CAPS eyebrow labels used in this design */

/* ---------- Buttons ---------- */
/* One consistent size everywhere (header, hero, contact form) — no more
   btn-lg / header-specific overrides. Glass = translucent fill + backdrop
   blur + a soft inner highlight, like frosted glass over whatever sits
   behind the button. */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'Work Sans',sans-serif;
  font-weight:600;
  font-size:15px;
  padding:13px 22px;
  border-radius:var(--radius-s);
  border:1px solid rgba(255,255,255,0.3);
  cursor:pointer;
  text-decoration:none;
  line-height:1;
  transition:transform .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
  white-space:nowrap;
  backdrop-filter:blur(10px) saturate(180%);
  -webkit-backdrop-filter:blur(10px) saturate(180%);
  box-shadow:0 1px 2px rgba(20,18,14,0.10), 0 6px 16px -6px rgba(20,18,14,0.18), inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn:active{transform:translateY(1px); box-shadow:0 1px 2px rgba(20,18,14,0.10);}
.btn svg{width:17px;height:17px;flex:none;}
.btn-call{background:rgba(207,79,30,0.86); color:var(--white);}
.btn-call:hover{background:rgba(175,63,22,0.9);}
.btn-whatsapp{background:rgba(37,211,102,0.82); color:#0b2b16; border-color:rgba(255,255,255,0.4);}
.btn-whatsapp:hover{background:rgba(31,185,86,0.88);}
.btn-outline{background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.3); color:inherit;}
.btn-outline:hover{background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.5);}
.btn-dark-outline{background:rgba(255,255,255,0.5); border-color:rgba(28,28,26,0.16); color:var(--concrete-900);}
.btn-dark-outline:hover{background:rgba(255,255,255,0.75); border-color:rgba(28,28,26,0.28);}
.btn-block{width:100%; justify-content:center;}

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(248,246,241,0.92);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
  padding-top: env(safe-area-inset-top,0px);
}
.header-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 28px;
  height:74px; display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  font-size:26px;
  letter-spacing:0.01em;
  display:flex; flex-direction:column; line-height:0.92;
  text-decoration:none;
  color:var(--concrete-900);
}
.brand .b2{
  font-size:12.5px; font-weight:600; letter-spacing:0.16em;
  color:var(--orange-600); font-family:'Work Sans',sans-serif; margin-top:5px;
}
nav.main-nav{display:flex; align-items:center; gap:30px;}
nav.main-nav a{
  font-size:15px; font-weight:500; text-decoration:none; color:var(--concrete-800);
  padding:6px 2px; border-bottom:2px solid transparent;
}
nav.main-nav a:hover{border-bottom-color:var(--orange-600);}
.header-actions{display:flex; align-items:center; gap:10px;}
.hamburger{
  display:none; background:none; border:none; cursor:pointer; padding:8px; margin:-8px;
}
.hamburger span{display:block; width:23px; height:2px; background:var(--concrete-900); margin:5px 0; transition:transform .2s ease, opacity .2s ease;}
body.no-scroll{overflow:hidden;}
.mobile-panel{
  display:none; flex-direction:column;
  position:fixed; inset:0; z-index:60;
  background:var(--concrete-050);
  padding: calc(18px + env(safe-area-inset-top,0px)) 24px calc(24px + env(safe-area-inset-bottom,0px));
  overflow-y:auto;
}
.mobile-panel.open{display:flex;}
.mobile-panel-top{
  display:flex; align-items:center; justify-content:space-between;
  min-height:44px;
}
.mobile-panel-top .brand{font-size:24px;}
.mobile-close{
  background:none; border:none; cursor:pointer; padding:10px; margin:-10px;
  display:flex; align-items:center; justify-content:center; flex:none;
}
.mobile-close svg{width:25px; height:25px; color:var(--concrete-900);}
.mobile-panel nav{display:flex; flex-direction:column; margin-top:22px;}
.mobile-panel a{
  display:block; font-family:'Barlow Condensed',sans-serif; font-size:30px; font-weight:600;
  padding:15px 0; text-decoration:none; color:var(--concrete-900); border-bottom:1px solid var(--line);
}


/* ---------- Hero ---------- */
.hero{
  background:var(--concrete-900);
  color:var(--concrete-050);
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 64px);
  pointer-events:none;
}
.hero-inner{
  max-width:var(--maxw); margin:0 auto; padding:64px 28px 76px;
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;
  position:relative;
}
.hero h1{
  font-size:clamp(38px,5.6vw,62px);
  color:var(--white);
}
.hero h1 span{color:var(--orange-600);}
.hero p.lede{
  font-size:17.5px; line-height:1.55; color:var(--concrete-300);
  max-width:46ch; margin:22px 0 0;
}
.hero p.lede strong{color:var(--orange-600); font-weight:700;}
.hero-ctas{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap;}
.hero-caps{
  display:flex; gap:26px; margin-top:46px; flex-wrap:wrap;
  border-top:1px solid var(--line-dark); padding-top:22px;
}
.hero-caps div{display:flex; align-items:center; gap:9px; font-size:14.5px; color:var(--concrete-300); font-weight:500;}
.hero-caps svg{width:18px; height:18px; color:var(--orange-600); flex:none;}
.hero-media{position:relative;}
.hero-media .frame{
  position:relative; border-radius:var(--radius-m); overflow:hidden;
  border:1px solid var(--line-dark);
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.55);
}
.hero-slider{position:relative; width:100%; height:420px;}
.hero-slide{position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease;}
.hero-slide.active{opacity:1; z-index:1;}
.hero-slide img{width:100%; height:100%; object-fit:cover; display:block;}
.hero-slide-contain{background:var(--concrete-900); padding:16px 16px 56px; box-sizing:border-box;}
.hero-slide-contain img{object-fit:contain;}
.hero-dots{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  display:flex; gap:8px; z-index:2; margin:0; padding:0; list-style:none;
}
.hero-dot{
  width:8px; height:8px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.7);
  padding:0; background:rgba(255,255,255,0.25); cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.hero-dot.active{background:var(--white); transform:scale(1.3);}
.hero-tag{
  position:absolute; left:20px; bottom:-18px;
  background:var(--concrete-050); color:var(--concrete-900);
  padding:13px 18px; border-radius:var(--radius-s);
  box-shadow:var(--shadow-1);
  font-family:'Barlow Condensed', sans-serif;
  display:flex; align-items:center; gap:12px;
  z-index:3;
}
.hero-tag .num{font-size:26px; font-weight:700; color:var(--orange-600); line-height:1;}
.hero-tag .lbl{font-family:'Work Sans',sans-serif; font-size:12.5px; font-weight:500; color:var(--concrete-600); max-width:15ch; line-height:1.25;}

/* ---------- Section heading pattern ---------- */
.sec-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
  margin-bottom:40px; flex-wrap:wrap;
}
.sec-head h2{font-size:clamp(30px,4vw,42px);}
.sec-head p{font-size:16px; color:var(--concrete-600); max-width:42ch; margin:10px 0 0; line-height:1.5;}
.sec-num{
  font-family:'Barlow Condensed',sans-serif; font-size:15px; font-weight:600;
  color:var(--concrete-600); border:1px solid var(--line); border-radius:20px;
  padding:6px 14px; white-space:nowrap;
}

/* ---------- Services ---------- */
.services{padding:92px 0; background:var(--concrete-050);}
.service-grid-primary{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.service-card-primary{
  position:relative; background:var(--white); border:1px solid var(--line);
  border-radius:10px; padding:22px 20px 20px; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.service-card-primary::before{
  content:"";
  position:absolute; top:-42px; right:-42px; width:130px; height:130px;
  background:radial-gradient(circle, rgba(207,79,30,0.16), transparent 72%);
  pointer-events:none; transition:transform .35s ease;
}
.service-card-primary::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 42%, rgba(207,79,30,0.09) 50%, transparent 58%);
  transform:translateX(-130%);
  transition:transform .65s ease;
  pointer-events:none;
}
.service-card-primary:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 36px -14px rgba(20,18,14,0.22);
  border-color:rgba(207,79,30,0.4);
}
.service-card-primary:hover::before{transform:scale(1.4);}
.service-card-primary:hover::after{transform:translateX(130%);}
.service-index, .icon-badge, .service-card-primary h3, .service-card-primary p{position:relative; z-index:1;}
.service-index{
  position:absolute; top:18px; right:20px;
  font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:600;
  color:var(--concrete-300); transition:color .25s ease;
}
.service-card-primary:hover .service-index{color:var(--orange-600);}
.icon-badge{
  width:42px; height:42px; border-radius:10px;
  background:linear-gradient(135deg, var(--orange-600), var(--orange-700));
  display:flex; align-items:center; justify-content:center;
  margin-bottom:14px;
  box-shadow:0 10px 18px -8px rgba(207,79,30,0.5);
  transition:transform .25s ease;
}
.service-card-primary:hover .icon-badge{transform:scale(1.08);}
.icon-badge svg{width:21px; height:21px; color:#fff;}
.service-card-primary h3{font-size:16.5px; font-weight:600; font-family:'Work Sans',sans-serif; margin:0;}
.service-card-primary p{font-size:12.5px; line-height:1.4; color:var(--concrete-600); margin:5px 0 0;}

/* ---------- Work / Gallery ---------- */
.work{padding:92px 0; background:var(--concrete-100); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.work-grid{
  display:grid; grid-template-columns:1.3fr 1fr 1fr; grid-template-rows:auto auto; gap:14px;
}
.work-item{position:relative; border-radius:var(--radius-m); overflow:hidden; background:var(--concrete-900);}
.work-item img{width:100%; height:100%; object-fit:cover; display:block; opacity:0.94;}
.work-item.tall{grid-row:span 2;}
.work-item .cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:16px 16px 14px;
  background:linear-gradient(to top, rgba(15,14,12,0.82), transparent);
  color:var(--white); font-size:14px; font-weight:600;
  font-family:'Work Sans',sans-serif;
}
.work-item .cap span{display:block; font-size:11.5px; font-weight:500; color:var(--concrete-300); margin-top:2px;}

/* ---------- Process ---------- */
.process{padding:92px 0;}
.process-list{display:grid; grid-template-columns:repeat(4,1fr); gap:0; counter-reset:step;}
.process-step{
  padding:0 24px 0 0; position:relative;
  border-left:1px solid var(--line);
  padding-left:24px;
}
.process-step:first-child{border-left:none; padding-left:0;}
.process-step .step-num{
  font-family:'Barlow Condensed',sans-serif; font-size:44px; font-weight:700; color:var(--orange-600); line-height:1;
}
.process-step h3{font-size:20px; font-weight:600; font-family:'Work Sans',sans-serif; margin-top:14px;}
.process-step p{font-size:14.5px; color:var(--concrete-600); line-height:1.55; margin:8px 0 0;}

/* ---------- Why / values (replaces fabricated reviews) ---------- */
.values{padding:92px 0; background:var(--steel-700); color:var(--concrete-050);}
.values .sec-head h2{color:var(--white);}
.values .sec-head p{color:rgba(239,236,229,0.7);}
.values .sec-num{color:rgba(239,236,229,0.75); border-color:var(--line-dark);}
.values-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}
.value-item{border-top:2px solid var(--orange-600); padding-top:18px;}
.value-item h3{font-family:'Work Sans',sans-serif; font-size:18px; font-weight:600;}
.value-item p{font-size:14.5px; line-height:1.6; color:rgba(239,236,229,0.68); margin:8px 0 0;}
.review-strip{margin-top:56px; padding-top:44px; border-top:1px solid var(--line-dark);}
.review-strip .rh{display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; flex-wrap:wrap; gap:10px;}
.review-strip .rh h4{font-family:'Work Sans',sans-serif; font-weight:600; font-size:15px; color:rgba(239,236,229,0.85);}
.review-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.review-card{
  background:rgba(255,255,255,0.045); border:1px dashed rgba(255,255,255,0.22);
  border-radius:var(--radius-m); padding:22px;
}
.review-card .stars{color:var(--orange-600); font-size:14px; letter-spacing:2px;}
.review-card p{font-size:14px; line-height:1.6; color:rgba(239,236,229,0.62); margin:12px 0 0; font-style:italic;}
.review-card .who{margin-top:14px; font-size:13px; color:rgba(239,236,229,0.42);}

/* ---------- Contact ---------- */
.contact{padding:92px 0;}
.contact-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:stretch;}
.form-card, .info-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-m); padding:36px;
}
.info-card{display:flex; flex-direction:column;}
.form-card h3, .info-card h3{font-family:'Work Sans',sans-serif; font-size:20px; font-weight:600; margin-bottom:4px;}
.form-row{margin-top:18px;}
.form-row label{display:block; font-size:13px; font-weight:600; color:var(--concrete-800); margin-bottom:7px;}
.form-row input, .form-row select, .form-row textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-s);
  font-family:'Work Sans',sans-serif; font-size:15px; background:var(--concrete-050); color:var(--concrete-900);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  outline:2px solid var(--steel-500); outline-offset:1px; background:var(--white);
}
.form-row input.invalid, .form-row textarea.invalid{
  border-color:var(--orange-600); background:var(--orange-100);
}
.form-row input.invalid:focus{outline-color:var(--orange-600);}
.field-error{
  display:none; color:var(--orange-700); font-size:12.5px; margin-top:6px; line-height:1.4;
}
.field-error.show{display:block;}
.form-row textarea{resize:vertical; min-height:96px;}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.form-actions{display:flex; gap:12px; margin-top:24px; flex-wrap:wrap;}
.form-note{font-size:12.5px; color:var(--concrete-600); margin-top:14px; line-height:1.5;}

.info-list{list-style:none; padding:0; margin:22px 0 0; display:flex; flex-direction:column; gap:18px;}
.info-list li{display:flex; gap:14px; align-items:flex-start;}
.info-list .ic{
  width:36px; height:36px; border-radius:var(--radius-s); background:var(--concrete-100); flex:none;
  display:flex; align-items:center; justify-content:center;
}
.info-list .ic svg{width:18px; height:18px; color:var(--steel-500);}
.info-list .t{font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:var(--concrete-600);}
.info-list .d{font-size:15px; color:var(--concrete-900); margin-top:2px; line-height:1.5;}
.info-list .d a{text-decoration:none; border-bottom:1px solid var(--line);}
.map-embed{
  margin-top:26px; border-radius:var(--radius-s); overflow:hidden; border:1px solid var(--line);
  background:var(--concrete-100); line-height:0; flex:1; min-height:220px;
}
.map-embed iframe{width:100%; height:100%; min-height:220px; display:block; border:0;}
.map-embed-static{
  display:flex; align-items:center; gap:14px; padding:20px; height:100%; min-height:220px;
  box-sizing:border-box;
}
.map-embed-static svg{width:30px; height:30px; color:var(--orange-600); flex:none;}
.map-embed-static-text{flex:1; min-width:0;}
.map-embed-static strong{display:block; font-size:14.5px; color:var(--concrete-900);}
.map-embed-static span{display:block; font-size:12.5px; color:var(--concrete-600); margin-top:4px; line-height:1.45;}
.map-link{
  margin-top:14px; display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; background:var(--concrete-050); border:1px solid var(--line); border-radius:var(--radius-s);
  text-decoration:none; font-size:14px; font-weight:600; color:var(--concrete-900);
}
.map-link svg{width:16px; height:16px; color:var(--orange-600);}

/* ---------- Footer ---------- */
footer{background:var(--concrete-900); color:var(--concrete-300); padding:56px 0 28px;}
.footer-inner{display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px;}
.footer-brand{font-family:'Barlow Condensed',sans-serif; font-size:30px; font-weight:700; color:var(--white); letter-spacing:0.01em;}
.footer-nav{display:flex; gap:26px; flex-wrap:wrap; justify-content:center;}
.footer-nav a{font-size:14.5px; color:var(--concrete-300); text-decoration:none;}
.footer-nav a:hover{color:var(--white);}
.footer-contact{display:flex; gap:22px; flex-wrap:wrap; justify-content:center; font-size:14px; color:var(--concrete-300);}
.footer-contact a{color:inherit; text-decoration:none; border-bottom:1px solid var(--line-dark);}
footer hr{border:none; border-top:1px solid var(--line-dark); width:100%; margin:8px 0;}
.footer-bottom{font-size:12.5px; color:var(--concrete-600);}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  /* Full nav + header call/WhatsApp buttons don't comfortably fit from here
     down (this covers tablets like iPad Mini in portrait, not just phones),
     so switch to the hamburger menu at this width instead of 680px. */
  nav.main-nav{display:none;}
  .header-actions{display:none;}
  .hamburger{display:block;}
  .header-inner{padding:0 20px; gap:12px;}
  .hero-inner{grid-template-columns:1fr; gap:40px; padding-top:48px;}
  .hero-slider{height:320px;}
  .service-grid-primary{grid-template-columns:repeat(2,1fr);}
  .work-grid{grid-template-columns:1fr 1fr;}
  .work-item.tall{grid-row:span 1;}
  .process-list{grid-template-columns:repeat(2,1fr); row-gap:36px;}
  .process-step{border-left:none; padding-left:0; padding-right:0;}
  .values-grid{grid-template-columns:repeat(2,1fr); row-gap:30px;}
  .review-cards{grid-template-columns:1fr 1fr;}
  .contact-grid{grid-template-columns:1fr; gap:28px;}
}
@media (max-width:680px){
  .header-inner{padding:0 18px; gap:12px;}
  .hero-inner{padding:40px 20px 56px;}
  .hero-caps{gap:16px 24px;}
  .wrap{padding:0 20px;}
  .services, .work, .process, .values, .contact{padding:64px 0;}
  .service-grid-primary{grid-template-columns:1fr;}
  .work-grid{grid-template-columns:1fr; grid-template-rows:none;}
  .work-item.tall{grid-row:auto;}
  .work-item img{height:230px;}
  .process-list{grid-template-columns:1fr; row-gap:30px;}
  .values-grid{grid-template-columns:1fr; row-gap:26px;}
  .review-cards{grid-template-columns:1fr;}
  .two-col{grid-template-columns:1fr;}
  .form-card, .info-card{padding:24px;}
  .footer-nav{gap:16px 22px;}
  .footer-contact{flex-direction:column; align-items:center; gap:12px;}
}
@media (max-width:380px){
  .header-inner{padding:0 14px; gap:8px;}
  .brand{font-size:22px;}
  .brand .b2{font-size:10.5px; letter-spacing:0.12em; margin-top:4px;}
}
/* Defensive: grid/flex items shouldn't be forced wider than their track by
   an input's intrinsic content size — a common source of hidden horizontal
   overflow on narrow phones. */
.service-grid-primary > *, .work-grid > *, .process-list > *, .values-grid > *,
.review-cards > *, .two-col > *, .contact-grid > *, .hero-inner > *,
.hero-caps > *{ min-width:0; }