:root{
  --green:#0f3d2e;   /* verde oscuro */
  --steel:#2b3640;   /* gris acero */
  --white:#ffffff;
  --bg:#f6f8f9;
  --text:#1b232a;
  --muted:#60707f;
  --card:#ffffff;
  --shadow: 0 10px 30px rgba(17, 24, 39, .08);
  --radius: 18px;
  --radius2: 26px;
  --max: 1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

.container{max-width:var(--max); margin:0 auto; padding:0 18px}

/* ===========================
   LEGAL BAR
   =========================== */
.legalbar{
  background:#0b1116;
  color:rgba(233,238,242,.92);
  font-size:12px;
}
.legalwrap{
  display:flex;
  gap:14px;
  justify-content:flex-end;
  padding:8px 0;
  flex-wrap:wrap;
}
.legalwrap a{
  color:rgba(233,238,242,.86);
  font-weight:800;
}
.legalwrap a:hover{color:#ffffff}

/* ===========================
   TOPBAR
   =========================== */
.topbar{
  background:rgba(15,61,46,.97);
  color:#eaf3ef;
  font-size:14px;
}
.topbar .wrap{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
  flex-wrap:wrap;
}
.topbar .left,
.topbar .right{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
}
.pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:6px 10px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  backdrop-filter: blur(8px);
}
.pill span{opacity:.95}
.pill b{font-weight:700}

/* ===========================
   HEADER / NAV
   =========================== */
header{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(246,248,249,.85);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(43,54,64,.08);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:16px;
}
.brand{display:flex; align-items:center; gap:12px}
.logo{
  width:44px;
  height:44px;
  border-radius:14px;
  background: linear-gradient(135deg, rgba(15,61,46,1), rgba(43,54,64,1));
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.logo:before{
  content:"";
  position:absolute;
  inset:-10px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 55%);
  transform: rotate(15deg);
}
.brand .name{display:flex; flex-direction:column; line-height:1.1}
.brand .name strong{
  letter-spacing:.8px;
  font-size:16px;
  color:var(--steel);
}
.brand .name strong .dea{
  color:var(--green);
  font-weight:900;
  letter-spacing:1.5px;
}
.brand .name small{
  color:var(--muted);
  font-weight:600;
  font-size:12px;
  margin-top:4px;
}

.menu{display:flex; gap:18px; align-items:center}
.menu a{
  font-weight:700;
  font-size:14px;
  color:var(--steel);
  padding:10px 10px;
  border-radius:999px;
  transition:.2s ease;
}
.menu a:hover{background:rgba(43,54,64,.06)}
.menu .cta{
  background:var(--green);
  color:white;
  padding:10px 14px;
  box-shadow: var(--shadow);
  border:1px solid rgba(255,255,255,.18);
}
.menu .cta:hover{background:#0c3326}

/* Mobile menu */
.hamb{
  display:none;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(43,54,64,.16);
  background:white;
  box-shadow: var(--shadow);
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.hamb svg{width:22px;height:22px}
.mobilePanel{display:none; padding:0 0 16px}
.mobilePanel a{
  display:block;
  padding:12px 12px;
  margin:6px 0;
  border-radius:14px;
  background:white;
  border:1px solid rgba(43,54,64,.10);
  font-weight:800;
  color:var(--steel);
}
.mobilePanel a.cta{background:var(--green); color:white; border-color:transparent}

/* ===========================
   HERO
   =========================== */
.hero{padding:46px 0 18px}
.heroGrid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  align-items:stretch;
}
.heroCard{
  background:linear-gradient(135deg, rgba(15,61,46,.96), rgba(43,54,64,.92));
  color:white;
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding:34px 28px;
  overflow:hidden;
  position:relative;
  min-height: 360px;
}
.heroCard:before{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,.26), transparent 55%),
    radial-gradient(circle at 90% 10%, rgba(249, 180, 51, .18), transparent 45%),
    radial-gradient(circle at 70% 90%, rgba(255,255,255,.12), transparent 50%);
  transform: rotate(6deg);
  pointer-events:none;
}
.heroContent{position:relative; max-width: 640px}
.kicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  font-weight:800;
  font-size:13px;
}
.kicker .dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#3bd07f;
  box-shadow: 0 0 0 6px rgba(59,208,127,.16);
}
.hero h1{
  margin:16px 0 10px;
  font-size:42px;
  line-height:1.08;
  letter-spacing:-.6px;
}
.hero p{
  margin:0 0 18px;
  font-size:16px;
  opacity:.92;
  max-width: 58ch;
}
.heroBadges{display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 22px}
.badge{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:9px 12px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  font-weight:800;
  font-size:13px;
}
.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:10px}
.btn{
  display:inline-flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:14px;
  font-weight:900;
  border:1px solid rgba(255,255,255,.18);
  box-shadow: var(--shadow);
  transition:.2s ease;
  cursor:pointer;
}
.btn.primary{background:#ffffff; color:var(--steel)}
.btn.primary:hover{transform: translateY(-1px)}
.btn.secondary{background:rgba(255,255,255,.10); color:white}
.btn.secondary:hover{background:rgba(255,255,255,.16)}

/* ===========================
   QUICK CONTACT
   =========================== */
.quick{
  background:white;
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding:22px;
  border:1px solid rgba(43,54,64,.10);
  min-height: 360px;
}
.quick h2{margin:0 0 8px;font-size:18px;color:var(--steel);letter-spacing:.2px}
.quick p{margin:0 0 14px;color:var(--muted);font-weight:600;font-size:14px}

.qRow{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 0;
  border-top:1px dashed rgba(43,54,64,.18);
}
.qRow:first-of-type{border-top:none; padding-top:0}
.qIcon{
  width:36px;
  height:36px;
  border-radius:14px;
  background:rgba(15,61,46,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(15,61,46,.14);
  flex:0 0 auto;
}
.qRow b{display:block}
.qRow small{display:block; color:var(--muted); font-weight:700; margin-top:2px}

form{margin-top:14px;display:grid;gap:10px}
input, textarea, select{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(43,54,64,.16);
  background:#fff;
  outline:none;
  font-weight:700;
  color:var(--steel);
}
textarea{min-height:92px; resize:vertical}
.formActions{display:flex; gap:10px; flex-wrap:wrap}
.btnGreen{background:var(--green);color:white;border:1px solid rgba(15,61,46,.18)}
.btnGreen:hover{background:#0c3326}
.btnOutline{background:white;color:var(--steel);border:1px solid rgba(43,54,64,.18)}

/* ===========================
   SECCIONES + TARJETAS
   =========================== */
section{padding:44px 0}
.sectionHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.sectionHead h2{margin:0;font-size:26px;color:var(--steel);letter-spacing:-.3px}
.sectionHead p{margin:0;color:var(--muted);font-weight:650;max-width:70ch}

.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.card{
  background:var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border:1px solid rgba(43,54,64,.10);
  padding:18px;
  position:relative;
  overflow:hidden;
}
.card h3{margin:0 0 8px;font-size:16px;color:var(--steel)}
.card p{margin:0;color:var(--muted);font-weight:600;font-size:14px}
.card a.more{display:inline-flex;margin-top:12px;font-weight:900;color:var(--green)}

.why{display:grid;grid-template-columns: 1fr 1fr;gap:14px}
.why .card{padding:20px}

.ticks{margin:10px 0 0; padding:0; list-style:none; display:grid; gap:8px}
.ticks li{display:flex; gap:10px; align-items:flex-start; color:var(--muted); font-weight:700}
.tick{
  width:18px;height:18px;border-radius:6px;
  background:rgba(59,208,127,.18);
  border:1px solid rgba(59,208,127,.35);
  flex:0 0 auto;
  position:relative;
  margin-top:2px;
}
.tick:after{
  content:"";
  position:absolute;
  left:5px; top:2px;
  width:5px; height:9px;
  border-right:2px solid #1c7f4c;
  border-bottom:2px solid #1c7f4c;
  transform: rotate(40deg);
}

/* Gallery preview general */
.gallery{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
}

/* ===========================
   FOOTER + LEGALES
   =========================== */
footer{
  padding:34px 0;
  background: #0d141a;
  color: #e9eef2;
  margin-top:22px;
}
.foot{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:14px;
  align-items:start;
}
.foot p, .foot a{color:rgba(233,238,242,.86)}
.foot a:hover{color:white}
.foot small{color:rgba(233,238,242,.62)}
.social{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.sbtn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-weight:900;
}
.footLegal{
  margin-top:14px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}
.footLegal a{
  color:rgba(233,238,242,.78);
  font-weight:800;
}
.footLegal a:hover{color:#fff}

/* ===========================
   COOKIE BANNER + MODAL
   =========================== */
.cookieBanner{
  position:fixed;
  left:16px;
  right:16px;
  bottom:16px;
  z-index:100;
  display:none;
}
.cookieCard{
  max-width: 980px;
  margin: 0 auto;
  background:#ffffff;
  border:1px solid rgba(43,54,64,.14);
  box-shadow: var(--shadow);
  border-radius: var(--radius2);
  padding:16px;
  display:flex;
  gap:14px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}
.cookieText{
  min-width: 260px;
  flex: 1 1 520px;
}
.cookieText b{color:var(--steel)}
.cookieText p{margin:6px 0 0;color:var(--muted);font-weight:650;font-size:13px}
.cookieActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}
.cbtn{
  padding:10px 12px;
  border-radius:14px;
  font-weight:900;
  border:1px solid rgba(43,54,64,.18);
  background:#fff;
  cursor:pointer;
}
.cbtn.accept{background:var(--green); color:#fff; border-color:transparent}
.cbtn.accept:hover{background:#0c3326}
.cbtn.reject{background:#fff}
.cbtn.settings{background:rgba(43,54,64,.06)}

.cookieModal{
  position:fixed;
  inset:0;
  z-index:110;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  background: rgba(0,0,0,.45);
}
.cookieModal .box{
  width:min(720px, 100%);
  background:#fff;
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  border:1px solid rgba(43,54,64,.14);
  padding:18px;
}
.cookieModal h3{margin:0 0 8px;color:var(--steel)}
.cookieModal p{margin:0 0 12px;color:var(--muted);font-weight:650}
.toggleRow{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px 0;
  border-top:1px dashed rgba(43,54,64,.18);
  align-items:center;
  flex-wrap:wrap;
}
.toggleRow:first-of-type{border-top:none}
.switch{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  color:var(--steel);
}
.switch input{width:18px;height:18px}
.modalActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-top:12px;
}

/* ===========================
   HOME SLIDER + HOME SECTIONS
   =========================== */
.homeHero{ padding: 18px 0 0; }

.sliderWrap{
  border-radius: var(--radius2);
  overflow:hidden;
  box-shadow: var(--shadow);
  border:1px solid rgba(43,54,64,.10);
  background:#000;
}

.slider{
  position:relative;
  height: clamp(320px, 60vh, 560px);
}

.slides{
  display:flex;
  height:100%;
  transition: transform .6s ease;
  will-change: transform;
}

.slide{ min-width:100%; height:100%; position:relative; }

.slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter: saturate(1.05) contrast(1.03) brightness(.95);
}

.overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.10) 100%),
    linear-gradient(0deg, rgba(0,0,0,.30), rgba(0,0,0,0));
  pointer-events:none;
}

.heroInner{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  padding: 24px;
}

.heroBox{ max-width: 760px; color:#fff; }

.heroTag{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  font-weight:900;
  font-size:13px;
  backdrop-filter: blur(10px);
}

.heroTitle{
  margin:12px 0 10px;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height:1.06;
  letter-spacing:-.6px;
}

.heroDesc{
  margin:0 0 14px;
  opacity:.92;
  font-weight:650;
  max-width: 65ch;
}

.heroCtas{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 10px;
}

.heroBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius:14px;
  font-weight:900;
  border:1px solid rgba(255,255,255,.20);
  box-shadow: var(--shadow);
  transition:.2s ease;
}
.heroBtn.primary{ background:#fff; color:var(--steel); }
.heroBtn.primary:hover{ transform: translateY(-1px); }
.heroBtn.secondary{ background:rgba(255,255,255,.12); color:#fff; }
.heroBtn.secondary:hover{ background:rgba(255,255,255,.18); }

/* Dots */
.navDots{
  position:absolute;
  left:18px;
  bottom:16px;
  display:flex;
  gap:8px;
  z-index:5;
}
.dotBtn{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.22);
  cursor:pointer;
}
.dotBtn.active{
  background:#fff;
  border-color:#fff;
  box-shadow: 0 0 0 6px rgba(255,255,255,.16);
}

/* Flechas */
.navArrows{
  position:absolute;
  right:14px;
  bottom:14px;
  display:flex;
  gap:10px;
  z-index:5;
}
.arrowBtn{
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.2s ease;
}
.arrowBtn:hover{ background: rgba(0,0,0,.35); }
.arrowBtn svg{ fill:#fff; }

/* HOME sections */
.twoCol{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:14px;
  align-items:stretch;
}
.panel{
  background:var(--card);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  border:1px solid rgba(43,54,64,.10);
  padding: 22px;
}
.panel h1{
  margin:0 0 16px;
  font-size: clamp(30px, 4vw, 52px);
  line-height:1.08;
  letter-spacing:-.8px;
  color:var(--steel);
}
.panel h2{
  margin:0 0 10px;
  font-size: 26px;
  color: var(--steel);
  letter-spacing:-.3px;
}
.panel h3{
  margin:0 0 8px;
  color:var(--steel);
}
.panel h4{
  margin:0 0 10px;
  color:var(--steel);
  font-size:18px;
  line-height:1.35;
}
.panel p{
  margin:0 0 12px;
  color: var(--muted);
  font-weight:650;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height:1.65;
}
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 12px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 9px 12px;
  border-radius:999px;
  background: rgba(43,54,64,.06);
  border:1px solid rgba(43,54,64,.10);
  font-weight:900;
  color: var(--steel);
  font-size: 13px;
  transition:.2s ease;
}
a.chip:hover{
  background:rgba(15,61,46,.10);
  border-color:rgba(15,61,46,.18);
  transform:translateY(-1px);
}

.workGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
  margin-top: 14px;
}
.workCard{
  background:var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border:1px solid rgba(43,54,64,.10);
  padding:18px;
}
.workCard h3{ margin:0 0 6px; color: var(--steel); font-size:16px; }
.workCard ul{ margin:10px 0 0; padding-left:18px; color: var(--muted); font-weight:650; }
.workCard li{ margin:6px 0; }

.ctaBand{
  margin-top: 14px;
  border-radius: var(--radius2);
  padding:18px;
  background: linear-gradient(135deg, rgba(15,61,46,.96), rgba(43,54,64,.92));
  color:#fff;
  box-shadow: var(--shadow);
  border:1px solid rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.ctaBand p{ margin:0; opacity:.92; font-weight:650; color:#fff; }
.ctaBand a{
  background:#fff;
  color: var(--steel);
  padding: 12px 16px;
  border-radius:14px;
  font-weight:900;
  border:1px solid rgba(255,255,255,.20);
}
.ctaBand a:hover{ transform: translateY(-1px); }

/* ===========================
   SOBRE NOSOTROS / PROYECTOS
   =========================== */
.pageHero{
  padding: 24px 0 10px;
}

.pageHero .panel{
  position:relative;
  overflow:hidden;
  padding:34px 22px 28px;
}
.pageHero .panel::before{
  content:"";
  position:absolute;
  inset:-60px;
  background:
    radial-gradient(circle at 10% 15%, rgba(15,61,46,.06), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(43,54,64,.05), transparent 30%);
  pointer-events:none;
}

.aboutQuote{
  padding: 6px 0 10px;
}

.ctaPanel{
  background: linear-gradient(135deg, rgba(15,61,46,.97), rgba(43,54,64,.95));
  color:#fff;
  border:1px solid rgba(255,255,255,.08);
}
.ctaPanel h2{
  color:#fff;
  font-size:30px;
  margin-bottom:10px;
}
.ctaPanel p{
  color:rgba(255,255,255,.92);
  font-weight:650;
}
.ctaPanel .heroCtas{
  margin-top:18px;
}
.ctaPanel .miniNote{
  margin-top:16px;
  font-size:14px;
  opacity:.92;
  color:rgba(255,255,255,.88);
}

.aboutProjects{
  padding: 10px 0;
}

.aboutProjects .panel{
  padding:26px 22px;
}

.aboutProjects .panel > h2{
  position:relative;
  margin-bottom:8px;
  padding-left:16px;
}
.aboutProjects .panel > h2::before{
  content:"";
  position:absolute;
  left:0;
  top:5px;
  bottom:5px;
  width:6px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--green), #3bd07f);
}

.projectGrid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:16px;
  margin-top:18px;
}

.projectBlock{
  background:linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  border:1px solid rgba(43,54,64,.10);
  border-radius:22px;
  box-shadow: var(--shadow);
  padding:22px 20px;
  position:relative;
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.projectBlock::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  right:0;
  height:5px;
  background:linear-gradient(90deg, var(--green), #3bd07f);
  opacity:.9;
}
.projectBlock:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(17,24,39,.10);
  border-color:rgba(15,61,46,.16);
}
.projectBlock h3{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 10px;
  font-size:12px;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--green);
  background:rgba(15,61,46,.08);
  border:1px solid rgba(15,61,46,.12);
  border-radius:999px;
  padding:7px 10px;
}
.projectBlock h4{
  margin:0 0 12px;
  font-size:20px;
  line-height:1.35;
  color:var(--steel);
  letter-spacing:-.2px;
}
.projectBlock p{
  margin:0 0 10px;
  color:var(--muted);
  font-weight:650;
  font-size:15px;
  line-height:1.68;
}
.projectBlock p:last-child{
  margin-bottom:0;
}

.relatedServices{
  padding: 14px 0 20px;
}

/* ===========================
   PROYECTOS PAGE
   =========================== */
.heroPage{
  padding: 28px 0 10px;
}

.pageTitle{
  background: var(--card);
  border:1px solid rgba(43,54,64,.10);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding: 22px;
}
.crumbs{
  font-size: 13px;
  color: var(--muted);
  font-weight:700;
  margin-bottom: 10px;
}
.crumbs a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lead{
  margin:0;
  color: var(--muted);
  font-weight:650;
}

.projectsGrid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  align-items:stretch;
}
.projCard{
  background: var(--card);
  border:1px solid rgba(43,54,64,.10);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding: 18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height: 260px;
}
.projHead{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}
.projHead h2{
  margin:0;
  color: var(--steel);
  font-size: 18px;
  letter-spacing:-.2px;
}
.projDesc{
  margin:0;
  color: var(--muted);
  font-weight:650;
  line-height: 1.45;
}
.projMeta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.galleryBox{
  margin-top:auto;
  border-radius: var(--radius);
  border:1px dashed rgba(43,54,64,.25);
  background: rgba(43,54,64,.03);
  padding: 14px;
  display:grid;
  gap:10px;
}
.galleryTitle{
  font-weight:900;
  color: var(--steel);
  margin:0;
  font-size: 13px;
}
.galleryGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}

.galleryBox .ph{
  border-radius: 14px;
  border:1px solid rgba(43,54,64,.10);
  background: linear-gradient(135deg, rgba(15,61,46,.07), rgba(43,54,64,.06));
  aspect-ratio: 1 / 1;
  min-height: 0;
  height: auto;
  box-shadow: none;
  position:relative;
  overflow:hidden;
}
.galleryBox .ph::before{
  display:none;
}
.galleryBox .ph img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.galleryBox .ph span{
  position:absolute;
  left:10px;
  bottom:10px;
  font-size:12px;
  font-weight:900;
  color:rgba(43,54,64,.72);
  background:rgba(255,255,255,.75);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(43,54,64,.10);
}

.ctaStrip{
  margin-top: 14px;
  border-radius: var(--radius2);
  padding: 16px;
  background: linear-gradient(135deg, rgba(15,61,46,.96), rgba(43,54,64,.92));
  color:#fff;
  box-shadow: var(--shadow);
  border:1px solid rgba(255,255,255,.12);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.ctaStrip p{
  margin:0;
  color:rgba(255,255,255,.92);
  font-weight:750;
}
.ctaStrip a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 14px;
  border-radius:14px;
  background:#fff;
  color: var(--steel);
  font-weight:950;
  border:1px solid rgba(255,255,255,.12);
  text-decoration:none;
  white-space:nowrap;
}

.footGrid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap:16px;
  padding: 22px 0;
}
.footTitle{
  margin:0 0 10px;
  font-weight: 950;
  letter-spacing: -.2px;
  color:#fff;
}
.footText{
  margin:0 0 10px;
  font-weight:650;
  color:rgba(255,255,255,.86);
}
.footLinks a{
  display:block;
  color:rgba(255,255,255,.90);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin: 7px 0;
  font-weight: 750;
}
.footPill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff;
  font-weight: 900;
  margin: 6px 0;
  width: fit-content;
  text-decoration:none;
}
.footBottom{
  border-top:1px solid rgba(255,255,255,.10);
  padding: 12px 0;
  font-size: 13px;
  font-weight: 650;
  color: rgba(255,255,255,.80);
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.footBottom a{
  color:rgba(255,255,255,.88);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===========================
   RESPONSIVE GENERAL
   =========================== */
@media (max-width: 980px){
  .heroGrid{grid-template-columns:1fr}
  .grid{grid-template-columns: repeat(2,1fr)}
  .why{grid-template-columns:1fr}
  .gallery{grid-template-columns: repeat(2,1fr)}
  .foot{grid-template-columns:1fr}
  .footGrid{grid-template-columns:1fr}

  .twoCol{ grid-template-columns:1fr; }
  .workGrid{ grid-template-columns: repeat(2,1fr); }
  .projectGrid{ grid-template-columns:1fr; }
  .projectsGrid{ grid-template-columns:1fr; }
  .galleryGrid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px){
  .menu{display:none}
  .hamb{display:flex}
  .mobilePanel{display:none}
  .hero h1{font-size:34px}
  .legalwrap{justify-content:center}

  .pageHero .panel{
    padding:24px 18px;
  }
  .panel h1{
    font-size:38px;
  }
  .panel p{
    font-size:16px;
  }
}
@media (max-width: 560px){
  .workGrid{ grid-template-columns:1fr; }
  .heroInner{ padding: 18px; }

  .projectBlock{
    padding:18px 16px;
    border-radius:18px;
  }
  .projectBlock h4{
    font-size:18px;
  }
  .ctaPanel h2{
    font-size:26px;
  }

  .galleryGrid{
    grid-template-columns: 1fr 1fr;
  }
}

/* ===========================
   FLOATING BUTTONS
   =========================== */
.floatWrap{
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 99999;
}

.fab{
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
  transition: transform .2s ease, box-shadow .2s ease;
  text-decoration: none;
}

.fab:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0,0,0,.28);
}

.fab.whatsapp{ background: #25D366; }
.fab.top{ background: var(--steel); }

.fab svg{
  width: 26px;
  height: 26px;
  display: block;
  fill: #fff !important;
}

@media (max-width: 600px){
  .fab{
    width: 50px;
    height: 50px;
    border-radius: 16px;
  }
  .fab svg{
    width: 24px;
    height: 24px;
  }
}