:root{
  --amber:#F8A800;
  --blue:#2348A3;
  --blue-dark:#1A377E;
  --blue-tint:#EDF1F9;
  --dark:#0F1524;
  --black:#000000;
  --white:#FFFFFF;
  --bg-soft:#F5F6F8;
  --line:#E5E7EC;
  --muted:#4A4A4A;
  --muted-dark:#A9AFBD;
  --radius:14px;
  --shadow-sm:0 1px 2px rgba(15,21,36,.06), 0 4px 12px rgba(15,21,36,.05);
  --shadow-md:0 6px 16px rgba(15,21,36,.08), 0 20px 44px rgba(15,21,36,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:'Barlow',sans-serif;
  background:var(--white);
  color:var(--black);
  line-height:1.6;
  font-size:17px;
}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(15,21,36,.94);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.hdr{display:flex;align-items:center;gap:28px;height:74px}
.hdr .logo{display:flex;align-items:center}
.hdr .logo img{height:54px;width:auto;display:block}
nav{margin-left:auto;display:flex;align-items:center;gap:28px}
nav a.navlink{color:var(--white);text-decoration:none;font-weight:600;font-size:15.5px}
nav a.navlink:hover{color:var(--amber)}
nav a.navlink:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:8px}
nav a:focus-visible,.btn:focus-visible,.btn-ghost:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:8px}
.btn{
  display:inline-block;border:none;cursor:pointer;font-family:'Barlow',sans-serif;background:var(--blue);color:var(--white);
  font-weight:700;font-size:16px;letter-spacing:.01em;
  text-decoration:none;padding:12px 26px;border-radius:10px;
  box-shadow:0 2px 8px rgba(35,72,163,.28);
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn:hover{background:var(--blue-dark);transform:translateY(-1px);box-shadow:0 6px 16px rgba(35,72,163,.32)}
.btn-ghost{
  display:inline-block;color:var(--black);text-decoration:none;
  font-weight:700;font-size:16px;
  padding:12px 26px;border-radius:10px;border:1.5px solid var(--line);
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-tint)}
@media (prefers-reduced-motion:reduce){.btn,.btn-ghost{transition:none}.btn:hover{transform:none}}

/* ---------- hero ---------- */
.hero{
  background:
    linear-gradient(180deg, rgba(15,21,36,.42) 0%, rgba(15,21,36,.68) 100%),
    url("Construction_BG.webp") center/cover no-repeat;
  border-bottom:1px solid var(--dark);
}
.hero .wrap{
  display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
  padding-top:84px;padding-bottom:88px;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--blue);font-weight:700;font-size:14px;
  text-transform:uppercase;letter-spacing:.12em;
  margin-bottom:20px;
}
.eyebrow::before{content:"";width:30px;height:3px;border-radius:2px;background:var(--amber)}
h1{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:clamp(44px,5.8vw,76px);line-height:.98;
  text-transform:uppercase;letter-spacing:.005em;
  margin-bottom:24px;
}
h1 .blue{color:var(--blue)}
.hero p{max-width:54ch;color:var(--muted);font-size:18.5px;margin-bottom:36px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-art .plate{
  background:var(--white);border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);
  padding:clamp(24px,4vw,52px);
  box-shadow:var(--shadow-md);
  position:relative;overflow:hidden;
}
.hero-art .plate::before{
  content:"";position:absolute;inset:0 0 auto 0;height:5px;
  background:linear-gradient(90deg, var(--blue) 0 62%, var(--amber) 62% 100%);
}
.hero-art img{width:100%;height:auto;display:block}

/* hero over photo background */
.hero h1{color:var(--white)}
.hero .eyebrow{color:var(--amber)}
.hero p{color:#C9CFDB}
.hero .btn-ghost{color:var(--white);border-color:rgba(255,255,255,.4)}
.hero .btn-ghost:hover{border-color:var(--amber);color:var(--amber);background:rgba(248,168,0,.08)}
.hero-art .plate{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-color:rgba(255,255,255,.35);
}

/* ---------- sections ---------- */
section{padding:88px 0}
section.alt{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{max-width:72ch;margin-bottom:44px}
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--blue);font-weight:700;font-size:13.5px;
  text-transform:uppercase;letter-spacing:.12em;margin-bottom:12px;
}
.kicker::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--amber)}
h2{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:clamp(32px,3.6vw,46px);text-transform:uppercase;line-height:1;
  margin-bottom:14px;
}
.sec-sub{color:var(--muted);font-size:18px}

/* services grid */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc article{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 26px 30px;box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.svc article::before{
  content:"";position:absolute;inset:0 auto 0 0;width:4px;
  background:var(--blue);opacity:0;transition:opacity .18s ease;
}
.svc article:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#CBD5EA}
.svc article:hover::before{opacity:1}
@media (prefers-reduced-motion:reduce){.svc article{transition:none}.svc article:hover{transform:none}}
.svc h3{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:25px;
  text-transform:uppercase;line-height:1.05;margin-bottom:10px;
}
.svc p{font-size:15.5px;color:var(--muted)}

/* why choose — dark band */
.why{background:var(--dark);color:var(--white);border:none}
.why .kicker{color:var(--amber)}
.why .kicker::before{background:var(--amber)}
.why h2{color:var(--white)}
.why .sec-sub{color:var(--muted-dark)}
.why-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.why-list{list-style:none;display:grid;gap:18px}
.why-list li{display:flex;gap:14px;align-items:flex-start;font-size:17px;color:#E6E9F0}
.why-list .tick{
  flex:0 0 auto;width:26px;height:26px;margin-top:2px;border-radius:8px;
  background:var(--amber);color:var(--dark);font-weight:700;
  display:flex;align-items:center;justify-content:center;font-size:15px;
}
.why-list strong{color:var(--white)}
.why-card{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);padding:30px;
}
.why-card p{color:#C9CFDB;margin-bottom:18px;font-size:16.5px}
.why-card p:last-of-type{margin-bottom:26px}
.btn-amber{
  display:inline-block;border:none;cursor:pointer;font-family:'Barlow',sans-serif;background:var(--amber);color:var(--dark);
  font-weight:700;font-size:16px;text-decoration:none;
  padding:12px 26px;border-radius:10px;
  transition:filter .15s ease, transform .15s ease;
}
.btn-amber:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-amber:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.btn-amber{transition:none}.btn-amber:hover{transform:none}}

/* about */
.about{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.about p{color:var(--muted);margin-bottom:16px;font-size:17.5px}
.about strong{color:var(--black)}
.spec{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden;
}
.spec dl{display:grid;grid-template-columns:auto 1fr}
.spec dt,.spec dd{padding:15px 20px;border-bottom:1px solid var(--line);font-size:15.5px;display:flex;align-items:center}
.spec dt{
  font-weight:700;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue);background:var(--blue-tint);white-space:nowrap;
}
.spec dd{font-weight:600}
.spec dt:nth-last-of-type(1),.spec dd:last-of-type{border-bottom:none}

/* service areas strip */
.areas{padding:0 0 88px}
.areas-box{
  background:var(--blue-tint);border:1px solid #D4DCEE;border-radius:var(--radius);
  padding:26px 30px;display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;
}
.areas-box .lbl{font-weight:700;color:var(--blue);text-transform:uppercase;font-size:13.5px;letter-spacing:.1em;white-space:nowrap}
.areas-box p{color:var(--muted);font-size:16px;font-weight:500}
.areas-box p b{color:var(--black)}

/* contact */
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.contact-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:8px 28px;box-shadow:var(--shadow-md);
}
.contact-card .row{display:flex;flex-direction:column;gap:2px;padding:18px 0;border-bottom:1px solid var(--line)}
.contact-card .row:last-of-type{border-bottom:none}
.contact-card .lbl{font-weight:700;font-size:12.5px;letter-spacing:.1em;color:var(--blue);text-transform:uppercase}
.contact-card a{color:var(--black);font-weight:700;text-decoration:none;font-size:19px}
.contact-card a:hover{color:var(--blue)}
.contact-card .val{font-weight:700;font-size:19px}

/* ---------- footer ---------- */
footer{background:var(--dark);color:#C9CFDB;padding:52px 0}
.foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot .fmark{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:24px;letter-spacing:.03em;text-transform:uppercase;color:var(--white)}
.foot .fmark span{color:var(--amber)}
.foot nav{display:flex;gap:22px;margin-left:0}
.foot a{color:#C9CFDB;text-decoration:none;font-size:15px;font-weight:600}
.foot a:hover{color:var(--white)}
.foot-rule{height:3px;border-radius:2px;background:linear-gradient(90deg, var(--blue) 0 62%, var(--amber) 62% 100%);margin:26px 0 20px}
.foot-note{font-size:14px;color:#8B93A3}


/* ---------- coming soon modal ---------- */
dialog#soon{
  margin:auto;
  border:none;border-radius:16px;padding:0;
  max-width:420px;width:calc(100% - 48px);
  box-shadow:0 24px 64px rgba(15,21,36,.35);
}
dialog#soon::backdrop{background:rgba(15,21,36,.55);backdrop-filter:blur(3px)}
.soon-inner{padding:36px 34px 32px;text-align:center;position:relative;overflow:hidden}
.soon-inner::before{
  content:"";position:absolute;inset:0 0 auto 0;height:5px;
  background:linear-gradient(90deg, var(--blue) 0 62%, var(--amber) 62% 100%);
}
.soon-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:16px;background:var(--blue-tint);
  margin-bottom:18px;font-size:26px;
}
.soon-inner h3{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:32px;
  text-transform:uppercase;line-height:1;margin-bottom:10px;color:var(--black);
}
.soon-inner p{color:var(--muted);font-size:16.5px;margin-bottom:26px}
.soon-inner .btn{width:100%}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr;padding-top:56px;padding-bottom:60px;gap:44px}
  .hero-art{max-width:540px}
  .svc{grid-template-columns:repeat(2,1fr)}
  .about,.contact,.why-grid{grid-template-columns:1fr;gap:36px}
  section{padding:64px 0}
  .areas{padding:0 0 64px}
}
@media(max-width:600px){
  nav a.navlink{display:none}
  .svc{grid-template-columns:1fr}
  .hdr .logo img{height:46px}
}