@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  --navy:#061421;--navy-deep:#030b13;--navy-soft:#0b1d2e;
  --panel:#10293e;--panel2:#14334c;--panel3:#0a2134;
  --text:#f7f2e8;--muted:#b8c7d5;--muted2:#7f93a6;
  --gold:#f4c83d;--gold2:#d5a61f;--ivory:#f3efe5;
  --line:rgba(255,255,255,.14);--shadow:0 26px 80px rgba(0,0,0,.38);
  --radius:12px;--danger:#ff6978;--ok:#45d483;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#061421;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
.container{width:min(1320px,calc(100% - 96px));margin-inline:auto}

/* HEADER — closer to the mockup */
.site-header{position:sticky;top:0;z-index:50;background:rgba(4,14,23,.84);border-bottom:1px solid rgba(255,255,255,.10);backdrop-filter:blur(18px)}
.nav{height:94px;display:flex;align-items:center;justify-content:space-between;gap:36px}
.logo-pill{width:265px;height:66px;display:inline-flex;align-items:center;justify-content:center;padding:12px 26px;border-radius:999px;background:linear-gradient(180deg,#fffaf0,#f1eadc);box-shadow:0 18px 46px rgba(0,0,0,.30),inset 0 0 0 1px rgba(6,20,33,.08);overflow:hidden}
.logo-pill img{width:218px;max-height:46px;object-fit:contain}
.nav-links{display:flex;align-items:center;gap:31px;color:#e9f0f5;font-weight:780;font-size:15px}
.nav-links a{position:relative;opacity:.94}.nav-links a:hover,.nav-links a.active{opacity:1;color:#fff}
.nav-links a.active:after,.nav-links a:hover:after{content:"";position:absolute;left:0;right:0;bottom:-16px;height:2px;background:var(--gold);border-radius:99px}
.lang-switch{display:flex;gap:8px;margin-left:6px}
.lang-switch a{min-width:31px;height:31px;display:grid;place-items:center;font-size:12px;border:1px solid rgba(255,255,255,.16);color:var(--muted);border-radius:9px;background:rgba(255,255,255,.025)}
.lang-switch a.active{color:#071522;background:linear-gradient(180deg,#ffda59,var(--gold));border-color:var(--gold);box-shadow:0 8px 22px rgba(244,200,61,.24)}
.mobile-toggle{display:none}

/* HERO — real photo visible like the preview */
.hero{position:relative;min-height:640px;display:flex;align-items:center;overflow:hidden;background:#071522}
.hero:before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(5,15,25,.55) 0%,rgba(5,15,25,.36) 34%,rgba(5,15,25,.10) 60%,rgba(5,15,25,.02) 100%),
    linear-gradient(180deg,rgba(5,15,25,.02),rgba(5,15,25,.38)),
    url('/assets/img/hero-construction-wide.jpg') center center/cover no-repeat;
  opacity:1;
}
.hero:after{content:"";position:absolute;inset:auto 0 0 0;height:115px;background:linear-gradient(180deg,transparent,#071522)}
.hero .container{position:relative;z-index:2;padding-top:24px}
.eyebrow{color:var(--gold);text-transform:uppercase;letter-spacing:.095em;font-weight:920;font-size:13px}
.hero h1,.page-hero h1{font-size:clamp(48px,5.4vw,72px);line-height:1.04;letter-spacing:-.055em;margin:18px 0 18px;max-width:740px}
.lead{font-size:19px;color:#c9d7e3;max-width:710px}.hero .lead{max-width:610px}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:27px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:9px;padding:12px 23px;min-height:48px;font-weight:880;border:1px solid var(--gold);background:rgba(255,255,255,.025);color:var(--text);box-shadow:0 8px 20px rgba(0,0,0,.13)}
.btn.primary{background:linear-gradient(180deg,#ffd85b,var(--gold));color:#071522;border-color:#ffda5b}.btn:hover{transform:translateY(-1px)}.danger{color:#ff7b86!important;border-color:#ff7b86!important}

/* HOME CARDS — tighter and closer to preview */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:-78px;position:relative;z-index:4}
.card,.service-card,.admin-card{background:linear-gradient(180deg,rgba(20,48,72,.96),rgba(9,30,48,.98));border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);box-shadow:var(--shadow)}
.pillar{min-height:104px;padding:24px 28px;display:flex;gap:22px;align-items:center}
.icon{font-size:36px;color:var(--gold);line-height:1}.pillar h3,.service-card h3{margin:0 0 7px;font-size:17px}.muted,.pillar p,.service-card p{color:var(--muted);margin:0}
.section{padding:54px 0;border-top:1px solid rgba(255,255,255,.075)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:26px}.section h2{font-size:29px;line-height:1.08;letter-spacing:-.025em;margin:0}.underline{width:42px;height:2px;background:var(--gold);margin-top:10px;border-radius:999px}
.about-grid{display:grid;grid-template-columns:210px 1fr 170px;gap:42px;align-items:start}.about-grid .lead{font-size:17px}

/* Services compact */
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.service-card{min-height:152px;padding:22px 24px;transition:.22s ease}.service-card:hover,.project-card:hover{transform:translateY(-3px);border-color:rgba(244,200,61,.45)}.arrow{color:var(--gold);font-size:21px;margin-top:16px}

/* Projects more like the preview */
.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.project-card{overflow:hidden;background:linear-gradient(180deg,rgba(19,45,68,.95),rgba(8,27,44,.98));border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);box-shadow:0 20px 56px rgba(0,0,0,.25);transition:.22s ease}
.project-card img{height:176px;width:100%;object-fit:cover;background:#0a1b2b}.project-card .body{padding:17px 18px 18px}.project-card h3{font-size:17px;margin:7px 0 9px}.meta{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:14px}.tag{color:var(--gold);font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:900}

/* Approach */
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;margin-top:28px}.timeline:before{content:"";position:absolute;top:18px;left:30px;right:30px;height:1px;background:linear-gradient(90deg,var(--gold),rgba(244,200,61,.35))}
.step{position:relative;padding-top:49px}.step:before{content:attr(data-step);position:absolute;top:0;left:0;width:36px;height:36px;border-radius:50%;border:2px solid var(--gold);display:grid;place-items:center;font-weight:900;background:#071522;box-shadow:0 0 0 6px #071522}.step h3{margin:0 0 8px}
.cta{margin:50px 0;background:linear-gradient(90deg,rgba(22,51,76,.96),rgba(9,29,47,.98));border:1px solid rgba(255,255,255,.13);border-radius:var(--radius);padding:28px;display:flex;align-items:center;justify-content:space-between;gap:25px;box-shadow:var(--shadow)}

/* Footer light logo like mockup */
.footer{border-top:1px solid var(--line);padding:34px 0;background:linear-gradient(180deg,#061421,#030b13)}
.footer-grid{display:grid;grid-template-columns:1.2fr 1.1fr 1fr 1.6fr;gap:28px;align-items:center;color:var(--muted);font-size:14px}
.footer-logo-light{width:220px;display:inline-flex;align-items:center}.footer-logo-light img{width:205px;height:auto;object-fit:contain}.footer-tagline{margin-top:12px;font-size:13px}.legal-links{display:flex;gap:18px;flex-wrap:wrap}.footer a:hover{color:#fff}.footer-item{line-height:1.75}

/* Inner pages */
.page-hero{position:relative;padding:108px 0 58px;overflow:hidden;background:#071522}.page-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#061421 0%,rgba(6,20,33,.68) 52%,rgba(6,20,33,.18)),url('/assets/img/hero-construction-wide.jpg') center center/cover no-repeat;opacity:.98}.page-hero .container{position:relative;z-index:2}
.filters{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 0}.filter{border:1px solid var(--line);border-radius:9px;padding:10px 22px;background:rgba(255,255,255,.035)}.filter.active{border-color:var(--gold);box-shadow:inset 0 0 0 1px rgba(244,200,61,.2)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:linear-gradient(180deg,var(--panel),var(--panel3));margin-top:34px;box-shadow:var(--shadow)}.stat{padding:30px;text-align:center;border-right:1px solid var(--line)}.stat:last-child{border-right:0}.stat strong{font-size:38px}
.project-detail-hero{display:grid;grid-template-columns:1fr 1.25fr;gap:32px;align-items:center}.project-detail-hero img{box-shadow:var(--shadow)}.facts{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:rgba(18,43,64,.80);margin-top:27px}.fact{padding:18px;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}.fact:nth-child(even){border-right:0}.gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.gallery img{height:154px;object-fit:cover;width:100%;border-radius:10px;border:1px solid var(--line);background:#0a1b2b}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px}.form{display:grid;gap:14px}.input,textarea,select{width:100%;background:#081a2a;color:#fff;border:1px solid rgba(255,255,255,.16);border-radius:9px;padding:13px 14px}textarea{min-height:150px}label{display:grid;gap:6px;color:var(--muted);font-size:14px}

/* Admin premium dashboard */
.admin-body{background:#061421}.admin-layout{min-height:100vh;display:grid;grid-template-columns:275px 1fr;background:#061421}.admin-sidebar{border-right:1px solid var(--line);padding:24px 18px;background:linear-gradient(180deg,#071a2a,#061421)}.admin-logo-pill{width:205px;height:64px;margin:0 auto;display:flex;align-items:center;justify-content:center;padding:12px 22px;background:linear-gradient(180deg,#fffaf0,var(--ivory));border-radius:999px;box-shadow:0 18px 44px rgba(0,0,0,.24)}.admin-logo-pill img{width:170px;max-height:42px;object-fit:contain}.admin-main{padding:40px}.admin-menu a{display:flex;gap:12px;padding:13px 14px;border-radius:9px;color:var(--muted);margin:4px 0;font-weight:750}.admin-menu a.active,.admin-menu a:hover{background:rgba(244,200,61,.13);color:var(--gold)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.admin-card{padding:23px}.admin-card strong{font-size:36px}.admin-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.admin-grid-wide{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.table{width:100%;border-collapse:collapse}.table th,.table td{border-bottom:1px solid var(--line);padding:13px;text-align:left;color:var(--muted)}.table th{color:#fff}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:24px}
.chart-panel{min-height:330px}.chart-wrap{height:245px;margin-top:16px;border:1px solid rgba(255,255,255,.10);border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));padding:18px}.chart-svg{width:100%;height:100%;overflow:visible}.chart-line{fill:none;stroke:var(--gold);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.chart-area{fill:rgba(244,200,61,.10)}.chart-dot{fill:#071522;stroke:var(--gold);stroke-width:3}.bars{display:grid;gap:13px;margin-top:18px}.bar-row{display:grid;grid-template-columns:90px 1fr 44px;gap:12px;align-items:center;color:var(--muted)}.bar-track{height:12px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}.bar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold2),var(--gold))}.mini-list{display:grid;gap:12px;margin-top:16px}.mini-item{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding-bottom:10px}.mini-path{color:#fff;font-weight:760;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.image-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.thumb{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#102437}.thumb img{height:142px;width:100%;object-fit:cover;background:#0a1b2b}.thumb-actions{display:flex;gap:7px;padding:8px;flex-wrap:wrap}.thumb .input{padding:8px;font-size:13px}.alert{padding:14px 16px;border-radius:10px;border:1px solid rgba(244,200,61,.32);background:rgba(244,200,61,.09);color:#ffe08a;margin:16px 0}.admin-card pre{background:#071522;border:1px solid var(--line);border-radius:10px;padding:16px;max-height:420px;overflow:auto}

@media(max-width:980px){
  .container{width:min(100% - 34px,1320px)}.nav{height:82px}.logo-pill{width:215px;height:58px}.logo-pill img{width:176px}.nav-links{display:none}.mobile-toggle{display:block;border:1px solid var(--line);color:#fff;border-radius:10px;padding:9px 12px;background:rgba(255,255,255,.05)}.nav-links.open{display:flex;position:absolute;top:82px;left:0;right:0;flex-direction:column;background:#061421;padding:22px}
  .pillars,.service-grid,.projects-grid,.timeline,.stats,.contact-grid,.project-detail-hero,.admin-layout,.kpis,.admin-grid,.admin-grid-wide,.about-grid,.footer-grid{grid-template-columns:1fr}.hero{position:relative;min-height:640px;display:flex;align-items:center;overflow:hidden;background:#071522}.pillars{margin-top:0}.cta{flex-direction:column;align-items:flex-start}.timeline:before{display:none}.gallery{grid-template-columns:repeat(2,1fr)}.admin-main{padding:24px}
}


/* v13 admin chart refinement */
.daily-bars{height:245px;margin-top:16px;border:1px solid rgba(255,255,255,.10);border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));padding:22px 18px 14px;display:grid;grid-template-columns:repeat(7,1fr);align-items:end;gap:14px}
.daily-bar-item{display:grid;grid-template-rows:1fr auto;gap:10px;height:100%}
.daily-bar-track{height:100%;display:flex;align-items:end;justify-content:center;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.055);overflow:hidden}
.daily-bar-fill{width:48%;min-height:3px;border-radius:999px 999px 0 0;background:linear-gradient(180deg,#ffd85b,#d7a820);box-shadow:0 0 20px rgba(244,200,61,.18)}
.daily-bar-label{text-align:center;color:var(--muted);font-size:12px;white-space:nowrap}
.daily-bar-label strong{display:block;color:#fff;font-size:13px;margin-bottom:2px}
.chart-note{display:flex;justify-content:space-between;gap:20px;margin-top:12px;color:var(--muted);font-size:13px}
.admin-card h2{letter-spacing:-.02em}

/* v14 visual target adjustments */
.hero .container{padding-top:10px}
.hero h1{max-width:760px}
.hero .lead{max-width:620px}
.pillars{margin-top:-86px}


/* v15 admin messages + visitor details */
.inline-form{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:4px 9px;font-size:12px;color:var(--muted);background:rgba(255,255,255,.035)}
.badge-admin{border-color:rgba(244,200,61,.42);color:var(--gold);background:rgba(244,200,61,.10)}
.badge-ok{border-color:rgba(69,212,131,.42);color:var(--ok);background:rgba(69,212,131,.10)}
.badge-warn{border-color:rgba(255,105,120,.42);color:var(--danger);background:rgba(255,105,120,.08)}
.message-list{display:grid;gap:14px;margin-top:18px}
.message-card{border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.025);padding:18px}
.message-card.message-new{border-color:rgba(244,200,61,.38);box-shadow:inset 3px 0 0 var(--gold)}
.message-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.message-head h3{margin:0 0 6px}
.message-actions{display:flex;gap:8px;flex-wrap:wrap}
.table td{vertical-align:top}
@media(max-width:980px){.message-head{flex-direction:column}.inline-form{align-items:stretch}.inline-form .input{max-width:none!important}}


/* v17 platform modules */
.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.checkline{display:flex!important;grid-template-columns:none!important;align-items:center;gap:10px;color:var(--muted)}
.checkline input{width:auto}
.progress-bar{height:10px;background:rgba(255,255,255,.10);border-radius:99px;overflow:hidden;margin:12px 0 18px}
.progress-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--gold2),var(--gold));border-radius:99px}
.message-list{display:grid;gap:14px;margin-top:18px}
.message-card{border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.025);padding:18px}
.message-card.message-new{border-color:rgba(244,200,61,.38);box-shadow:inset 3px 0 0 var(--gold)}
.message-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.message-head h3{margin:0 0 6px}
.message-actions{display:flex;gap:8px;flex-wrap:wrap}
.inline-form{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:4px 9px;font-size:12px;color:var(--muted);background:rgba(255,255,255,.035)}
.badge-admin{border-color:rgba(244,200,61,.42);color:var(--gold);background:rgba(244,200,61,.10)}
.badge-ok{border-color:rgba(69,212,131,.42);color:var(--ok);background:rgba(69,212,131,.10)}
.badge-warn{border-color:rgba(255,105,120,.42);color:var(--danger);background:rgba(255,105,120,.08)}
.table td{vertical-align:top}
@media(max-width:980px){.two-cols{grid-template-columns:1fr}.message-head{flex-direction:column}.inline-form{align-items:stretch}.inline-form .input{max-width:none!important}}


/* v18-v21 combined */
.mail-list{display:grid;gap:10px;margin-top:12px}.mail-row{display:grid;gap:4px;border:1px solid var(--line);border-radius:12px;padding:13px;background:rgba(255,255,255,.025)}.mail-row:hover,.mail-unread{border-color:rgba(244,200,61,.42);background:rgba(244,200,61,.06)}.mail-row span,.mail-row small{color:var(--muted)}.mail-body{white-space:pre-wrap;background:#071522;border:1px solid var(--line);border-radius:12px;padding:18px;max-height:520px;overflow:auto;color:#dce9f4}.daily-bars{height:245px;margin-top:16px;border:1px solid rgba(255,255,255,.10);border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));padding:22px 18px 14px;display:grid;grid-template-columns:repeat(7,1fr);align-items:end;gap:14px}.daily-bar-item{display:grid;grid-template-rows:1fr auto;gap:10px;height:100%}.daily-bar-track{height:100%;display:flex;align-items:end;justify-content:center;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.055);overflow:hidden}.daily-bar-fill{width:48%;min-height:3px;border-radius:999px 999px 0 0;background:linear-gradient(180deg,#ffd85b,#d7a820);box-shadow:0 0 20px rgba(244,200,61,.18)}.daily-bar-label{text-align:center;color:var(--muted);font-size:12px;white-space:nowrap}.daily-bar-label strong{display:block;color:#fff;font-size:13px;margin-bottom:2px}.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}.checkline{display:flex!important;grid-template-columns:none!important;align-items:center;gap:10px;color:var(--muted)}.checkline input{width:auto}.progress-bar{height:10px;background:rgba(255,255,255,.10);border-radius:99px;overflow:hidden;margin:12px 0 18px}.progress-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--gold2),var(--gold));border-radius:99px}@media(max-width:980px){.daily-bars{gap:7px;padding:16px 10px}.two-cols{grid-template-columns:1fr}}



/* v25 — visual polish / product finish */

/* Typography personality */
body{
  font-family:'Manrope',Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
h1,h2,h3,.nav-links,.btn,.eyebrow,.admin-menu a,.tag,.badge{
  font-family:'Space Grotesk','Manrope',Inter,Arial,sans-serif;
}

/* Header + logo: wide horizontal logo, S left + STAD Construction right */
.site-header{
  background:rgba(4,14,23,.90);
  backdrop-filter:blur(18px);
}
.nav{
  height:104px;
}
.logo-pill{
  width:342px!important;
  height:78px!important;
  padding:10px 28px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#fffaf0,#f1eadc)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.34), inset 0 0 0 1px rgba(6,20,33,.08)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
}
.logo-pill img{
  width:292px!important;
  max-height:58px!important;
  object-fit:contain!important;
}

/* Admin logo: readable but not oversized in sidebar */
.admin-logo-pill{
  width:224px!important;
  height:66px!important;
  padding:10px 22px!important;
}
.admin-logo-pill img{
  width:190px!important;
  max-height:46px!important;
  object-fit:contain!important;
}

/* Hero: keep true v24 scene, force cache refresh */
.hero{
  min-height:730px;
  background:#071522;
}
.hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(5,15,25,.96) 0%,rgba(5,15,25,.82) 30%,rgba(5,15,25,.38) 52%,rgba(5,15,25,.08) 76%,rgba(5,15,25,.03) 100%),
    linear-gradient(180deg,rgba(5,15,25,.02),rgba(5,15,25,.30)),
    url('/assets/img/hero-construction-v24-full-scene.jpg?v=25') center center/cover no-repeat!important;
  opacity:1;
}
.hero:after{
  height:88px;
  background:linear-gradient(180deg,transparent,#071522);
}
.page-hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(5,15,25,.94) 0%,rgba(5,15,25,.76) 36%,rgba(5,15,25,.30) 64%,rgba(5,15,25,.08) 100%),
    url('/assets/img/hero-construction-v24-full-scene.jpg?v=25') center center/cover no-repeat!important;
  opacity:1;
}
.hero h1,.page-hero h1{
  letter-spacing:-.062em;
  font-weight:700;
}
.hero h1{
  max-width:845px;
}
.hero .lead{
  max-width:670px;
  font-weight:500;
}

/* Premium cards/buttons */
.btn{
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 34px rgba(0,0,0,.20);
}
.btn.primary{
  box-shadow:0 14px 30px rgba(244,200,61,.20);
}
.pillar,.service-card,.project-card,.admin-card,.card{
  border-color:rgba(255,255,255,.16)!important;
  box-shadow:0 22px 70px rgba(0,0,0,.28)!important;
  backdrop-filter:blur(10px);
}
.pillar{
  min-height:118px;
}
.pillar .icon,.service-card .icon{
  filter:drop-shadow(0 0 12px rgba(244,200,61,.20));
}

/* Homepage and public sections */
.section{
  padding:64px 0;
}
.section-head{
  margin-bottom:32px;
}
.underline{
  width:50px;
  height:3px;
}
.project-card img{
  height:205px;
}
.project-card .body{
  padding:22px;
}
.tag{
  letter-spacing:.10em;
}

/* Footer if current footer uses these classes */
.footer-v25,.footer{
  background:
    radial-gradient(circle at 15% 0%,rgba(244,200,61,.08),transparent 34%),
    linear-gradient(180deg,#061421,#02080e);
}
.footer-logo-light img{
  width:235px!important;
  height:auto!important;
}
.footer-item strong{
  color:#fff;
}

/* Admin polish */
.admin-main h1,.admin-card h2{
  letter-spacing:-.035em;
}
.admin-card{
  background:linear-gradient(180deg,rgba(20,48,72,.97),rgba(8,27,44,.98))!important;
}
.kpis .admin-card strong{
  letter-spacing:-.04em;
}
.mail-row,.message-card{
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
.mail-row:hover,.message-card:hover{
  transform:translateY(-1px);
}
.table th{
  font-family:'Space Grotesk','Manrope',Inter,Arial,sans-serif;
}

/* Client portal / report UI polish through shared classes */
.progress-bar{
  height:11px;
}
.client-card-soft,.project-card .body{
  background:linear-gradient(180deg,rgba(255,255,255,.015),rgba(255,255,255,0));
}

/* Responsive */
@media(max-width:980px){
  .nav{
    height:88px;
  }
  .logo-pill{
    width:252px!important;
    height:64px!important;
    padding:9px 20px!important;
  }
  .logo-pill img{
    width:214px!important;
    max-height:46px!important;
  }
  .hero{
    min-height:650px;
  }
  .hero:before{
    background:
      linear-gradient(90deg,rgba(5,15,25,.98) 0%,rgba(5,15,25,.88) 48%,rgba(5,15,25,.55) 100%),
      url('/assets/img/hero-construction-v24-full-scene.jpg?v=25') 65% center/cover no-repeat!important;
  }
}



/* v26 — stable hero frame + fade transitions
   Goal: the construction background stays visually stable across public pages.
*/

:root{
  --stad-header-height:104px;
  --stad-hero-frame:720px;
  --stad-hero-bg-x:50%;
  --stad-hero-bg-y:50%;
}

/* Smooth page entrance */
body{
  opacity:1;
  transition:opacity .28s ease;
}
body.stad-page-leaving{
  opacity:0;
}

/* Keep public hero frame consistent between home and internal pages */
.hero,
.page-hero{
  min-height:var(--stad-hero-frame)!important;
  height:var(--stad-hero-frame)!important;
  display:flex!important;
  align-items:center!important;
  overflow:hidden!important;
  position:relative!important;
  background:#071522!important;
}

/* Keep the same background size/crop/position everywhere */
.hero:before,
.page-hero:before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:
    linear-gradient(90deg,rgba(5,15,25,.96) 0%,rgba(5,15,25,.82) 30%,rgba(5,15,25,.38) 52%,rgba(5,15,25,.08) 76%,rgba(5,15,25,.03) 100%),
    linear-gradient(180deg,rgba(5,15,25,.02),rgba(5,15,25,.30)),
    url('/assets/img/hero-construction-v24-full-scene.jpg?v=26') var(--stad-hero-bg-x) var(--stad-hero-bg-y)/cover no-repeat!important;
  opacity:1!important;
  transform:none!important;
}

/* Same bottom blend on all hero variants */
.hero:after,
.page-hero:after{
  content:""!important;
  position:absolute!important;
  inset:auto 0 0 0!important;
  height:88px!important;
  background:linear-gradient(180deg,transparent,#071522)!important;
  pointer-events:none!important;
}

/* Stable text block layout */
.hero .container,
.page-hero .container{
  position:relative!important;
  z-index:2!important;
  padding-top:0!important;
  padding-bottom:0!important;
  animation:stadHeroTextIn .46s ease both;
}

/* The visible text changes, not the background frame */
.hero h1,
.page-hero h1{
  max-width:850px!important;
}
.hero .lead,
.page-hero .lead{
  max-width:720px!important;
}

/* Filters on projects page should not change hero height */
.page-hero .filters{
  margin-top:28px!important;
}

/* Fade/slight rise only for text/content in the hero */
@keyframes stadHeroTextIn{
  from{
    opacity:0;
    transform:translateY(10px);
    filter:blur(2px);
  }
  to{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
}

/* Keep cards close but stable after full hero */
.pillars{
  margin-top:-92px!important;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce){
  body,
  .hero .container,
  .page-hero .container{
    transition:none!important;
    animation:none!important;
  }
}

/* Tablet/mobile: keep stable frame, but slightly shorter */
@media(max-width:980px){
  :root{
    --stad-header-height:88px;
    --stad-hero-frame:650px;
    --stad-hero-bg-x:65%;
    --stad-hero-bg-y:50%;
  }
  .hero,
  .page-hero{
    min-height:var(--stad-hero-frame)!important;
    height:auto!important;
    padding:96px 0 86px!important;
  }
  .hero:before,
  .page-hero:before{
    background:
      linear-gradient(90deg,rgba(5,15,25,.98) 0%,rgba(5,15,25,.88) 48%,rgba(5,15,25,.55) 100%),
      url('/assets/img/hero-construction-v24-full-scene.jpg?v=26') var(--stad-hero-bg-x) var(--stad-hero-bg-y)/cover no-repeat!important;
  }
  .pillars{
    margin-top:0!important;
  }
}



/* v27 — unique visitors + section snap navigation */

/* Admin: clearer visitor table */
.table-compact td,
.table-compact th{
  padding:14px 12px;
}
.details-summary{
  cursor:pointer;
  font-family:'Space Grotesk','Manrope',Inter,Arial,sans-serif;
  font-weight:700;
  color:#fff;
  padding:12px 0;
}
details[open] .details-summary{
  color:var(--gold);
}

/* Public home: section snap, desktop only.
   Applied only when JS adds .stad-home-snap to body/html. */
@media(min-width:981px){
  html.stad-snap-enabled{
    scroll-snap-type:y proximity;
    scroll-behavior:smooth;
  }

  body.stad-home-snap .hero,
  body.stad-home-snap .section,
  body.stad-home-snap .footer{
    scroll-snap-align:start;
    scroll-snap-stop:normal;
  }

  body.stad-home-snap .hero{
    scroll-snap-align:start;
  }

  body.stad-home-snap .section{
    min-height:calc(100vh - var(--stad-header-height,104px));
    display:flex;
    align-items:center;
  }

  body.stad-home-snap .section > .container{
    width:min(1320px,calc(100% - 96px));
  }

  body.stad-home-snap .pillars + .section{
    min-height:auto;
  }

  body.stad-home-snap .footer{
    min-height:44vh;
    display:flex;
    align-items:center;
  }

  /* Small fixed hint/dots */
  .stad-snap-dots{
    position:fixed;
    right:22px;
    top:50%;
    transform:translateY(-50%);
    z-index:60;
    display:grid;
    gap:10px;
    pointer-events:none;
  }
  .stad-snap-dots span{
    width:8px;
    height:8px;
    border-radius:99px;
    border:1px solid rgba(244,200,61,.55);
    background:rgba(255,255,255,.05);
    box-shadow:0 0 20px rgba(0,0,0,.2);
  }
  .stad-snap-dots span.active{
    background:var(--gold);
    border-color:var(--gold);
  }
}

@media(max-width:980px){
  html.stad-snap-enabled{
    scroll-snap-type:none!important;
  }
  .stad-snap-dots{
    display:none!important;
  }
}



/* v28 — true section frames + fixed hero title anchor
   Fixes:
   - no more compressed/half-cut section stops on desktop home;
   - public hero titles start at the same vertical anchor on every page;
   - background remains stable while text changes.
*/

:root{
  --stad-header-height:104px;
  --stad-hero-frame:calc(100vh - var(--stad-header-height));
  --stad-hero-content-top:clamp(128px, 18vh, 190px);
  --stad-section-frame:calc(100vh - var(--stad-header-height));
}

.site-header{
  min-height:var(--stad-header-height);
}
.nav{
  min-height:var(--stad-header-height);
}

/* Fixed title anchor for home and internal hero pages */
.hero,
.page-hero{
  min-height:var(--stad-hero-frame)!important;
  height:var(--stad-hero-frame)!important;
  display:block!important;
  overflow:hidden!important;
  position:relative!important;
}

.hero .container,
.page-hero .container{
  position:relative!important;
  z-index:2!important;
  padding-top:var(--stad-hero-content-top)!important;
  padding-bottom:0!important;
  margin-top:0!important;
  transform:none!important;
}

.hero .eyebrow,
.page-hero .eyebrow{
  margin-top:0!important;
}
.hero h1,
.page-hero h1{
  margin-top:24px!important;
  max-width:850px!important;
}
.hero .lead,
.page-hero .lead{
  max-width:720px!important;
}

.page-hero .filters,
.page-hero .actions,
.hero .actions{
  margin-top:30px!important;
}

@media(min-width:981px){
  html.stad-snap-enabled{
    scroll-snap-type:y mandatory!important;
    scroll-behavior:smooth;
    scroll-padding-top:var(--stad-header-height);
  }

  body.stad-home-snap main{
    overflow:visible;
  }

  body.stad-home-snap .hero{
    scroll-snap-align:start!important;
    scroll-snap-stop:always!important;
  }

  body.stad-home-snap .pillars{
    margin-top:-126px!important;
    position:relative;
    z-index:5;
  }

  body.stad-home-snap main > .section{
    min-height:var(--stad-section-frame)!important;
    height:auto!important;
    display:flex!important;
    align-items:center!important;
    padding:96px 0!important;
    scroll-snap-align:start!important;
    scroll-snap-stop:always!important;
  }

  body.stad-home-snap main > .section > .container{
    width:min(1320px,calc(100% - 96px));
    margin-left:auto;
    margin-right:auto;
  }

  body.stad-home-snap .pillars + .section{
    padding-top:150px!important;
    min-height:var(--stad-section-frame)!important;
  }

  body.stad-home-snap .service-grid,
  body.stad-home-snap .projects-grid,
  body.stad-home-snap .zones-grid{
    align-items:stretch;
  }

  body.stad-home-snap .service-card,
  body.stad-home-snap .project-card{
    min-height:0;
  }

  body.stad-home-snap .timeline,
  body.stad-home-snap .approach-grid{
    margin-top:42px;
  }

  body.stad-home-snap .footer{
    min-height:calc(72vh - var(--stad-header-height))!important;
    display:flex!important;
    align-items:center!important;
    scroll-snap-align:start!important;
    scroll-snap-stop:always!important;
    padding:84px 0!important;
  }

  .stad-snap-dots{
    right:18px!important;
    gap:9px!important;
    opacity:.72;
  }
  .stad-snap-dots span{
    width:7px!important;
    height:7px!important;
  }
}

@media(max-width:980px){
  :root{
    --stad-header-height:88px;
    --stad-hero-frame:auto;
    --stad-hero-content-top:110px;
  }

  .hero,
  .page-hero{
    height:auto!important;
    min-height:650px!important;
    display:block!important;
    padding:0!important;
  }

  .hero .container,
  .page-hero .container{
    padding-top:var(--stad-hero-content-top)!important;
    padding-bottom:92px!important;
  }

  body.stad-home-snap main > .section{
    min-height:auto!important;
    display:block!important;
    padding:72px 0!important;
  }
}

@media(min-height:1050px) and (min-width:981px){
  :root{
    --stad-hero-content-top:170px;
  }
}