:root{
  --navy:#1a1a4d;
  --navy-deep:#111136;
  --orange:#f26522;
  --orange-light:#ffdcc4;
  --cream:#faf8f4;
  --ink:#1c1c22;
  --line:#e7e2d9;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Work Sans',sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
}
h1,h2,h3,.eyebrow{font-family:'Oswald',sans-serif; letter-spacing:.02em;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px;}

/* ---------- Loader ---------- */
.loader{
  position:fixed; inset:0; background:var(--navy); z-index:9999;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  transition:opacity .6s ease, visibility .6s ease;
  overflow:hidden;
}
.loader.hide{opacity:0; visibility:hidden; pointer-events:none;}

.loader-stage{position:relative; display:flex; flex-direction:column; align-items:center; gap:22px;}

/* House line-drawing animation */
.loader-house{width:150px; height:110px;}
.loader-house path{
  fill:none; stroke:var(--orange); stroke-width:3; stroke-linejoin:round; stroke-linecap:round;
  stroke-dasharray:600; stroke-dashoffset:600;
  animation:draw-house 2.2s ease forwards .2s;
}
.loader-house .fill-bit{
  fill:var(--orange); stroke:none; opacity:0;
  animation:fade-in-bit .5s ease forwards 2.1s;
}
@keyframes draw-house{to{stroke-dashoffset:0;}}
@keyframes fade-in-bit{to{opacity:1;}}

/* Logo pulse-in */
.loader-logo-wrap{
  width:64px; height:64px; border-radius:14px; background:#fff;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.6);
  animation:logo-pop .6s cubic-bezier(.34,1.56,.64,1) forwards 2.4s;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.loader-logo-wrap img{width:38px; height:auto;}
@keyframes logo-pop{to{opacity:1; transform:scale(1);}}

/* Brand name letter reveal */
.loader-brand{font-family:'Oswald',sans-serif; font-weight:700; font-size:1.4rem; color:#fff; letter-spacing:.12em; display:flex;}
.loader-brand span{opacity:0; transform:translateY(10px); animation:letter-in .45s ease forwards;}
.loader-tagline{
  color:var(--orange); font-size:.72rem; letter-spacing:.32em; text-transform:uppercase; margin-top:6px;
  opacity:0; animation:fade-in-bit .6s ease forwards 4.6s;
}
@keyframes letter-in{to{opacity:1; transform:translateY(0);}}

/* Progress bar */
.loader-bar-track{width:220px; height:3px; background:rgba(255,255,255,.12); border-radius:3px; margin-top:8px; overflow:hidden;}
.loader-bar-fill{height:100%; width:0%; background:var(--orange); border-radius:3px; animation:fill-bar 7s linear forwards;}
@keyframes fill-bar{to{width:100%;}}

@media (prefers-reduced-motion: reduce){
  .loader-house path, .loader-house .fill-bit, .loader-logo-wrap, .loader-brand span, .loader-tagline, .loader-bar-fill{
    animation:none !important; opacity:1 !important; stroke-dashoffset:0 !important; transform:none !important; width:100% !important;
  }
}

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:var(--navy);
  border-bottom:3px solid var(--orange);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:10px 24px;max-width:1140px;margin:0 auto;}
.brand{display:flex;align-items:center;gap:12px;}
.brand-logo-wrap{
  background:#fff; border-radius:10px; padding:6px 9px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.brand-logo-wrap img{height:40px; width:auto; display:block;}
.brand-text{color:#fff;font-family:'Oswald',sans-serif;font-weight:600;font-size:1.1rem;letter-spacing:.03em;line-height:1.1;}
.brand-text span{display:block;font-family:'Work Sans',sans-serif;font-weight:400;font-size:.6rem;letter-spacing:.2em;color:var(--orange);margin-top:3px;}
nav.links{display:flex;gap:28px;align-items:center;}
nav.links a{color:#eceaf4;font-size:.92rem;font-weight:500;transition:color .2s;padding:4px 0;border-bottom:2px solid transparent;}
nav.links a:hover{color:var(--orange);}
nav.links a.active{color:var(--orange);border-bottom-color:var(--orange);}
.menu-toggle{display:none;background:none;border:none;color:#fff;font-size:1.7rem;cursor:pointer;line-height:1;}

@media (max-width:860px){
  nav.links{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--navy); flex-direction:column; gap:0; padding:8px 24px 18px;
    border-bottom:3px solid var(--orange);
  }
  nav.links.open{display:flex;}
  nav.links a{padding:12px 0; border-bottom:1px solid rgba(255,255,255,.08);}
  .menu-toggle{display:block;}
}

/* ---------- Hero (used on every page, shorter on inner pages) ---------- */
.hero{
  position:relative;
  background-image:linear-gradient(160deg, rgba(20,20,66,.90) 0%, rgba(15,15,48,.94) 100%), var(--hero-img, none);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-color:var(--navy);
  color:#fff;
  overflow:hidden;
  padding:80px 0 0;
}
.hero-inner{max-width:1140px;margin:0 auto;padding:0 24px 110px;position:relative;z-index:2;}
.hero-inner.compact{padding-bottom:70px;}
.eyebrow{color:var(--orange);font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;margin-bottom:18px;font-weight:500;}
.hero h1{font-size:clamp(2rem,5vw,3.4rem);font-weight:700;max-width:680px;line-height:1.14;margin-bottom:20px;}
.hero h1 em{font-style:normal;color:var(--orange);}
.hero p{max-width:540px;color:#c9c8dc;font-size:1.03rem;margin-bottom:30px;}
.btn-row{display:flex;gap:16px;flex-wrap:wrap;}

/* Hero entrance animation */
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
.hero-inner .eyebrow{animation:fadeInUp .7s ease both;animation-delay:.15s;}
.hero-inner h1{animation:fadeInUp .7s ease both;animation-delay:.3s;}
.hero-inner p{animation:fadeInUp .7s ease both;animation-delay:.45s;}
.hero-inner .btn-row{animation:fadeInUp .7s ease both;animation-delay:.6s;}

/* Scroll-reveal for sections as the user scrolls down */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in-view{opacity:1;transform:translateY(0);}
.service-grid .reveal:nth-child(2){transition-delay:.08s;}
.service-grid .reveal:nth-child(3){transition-delay:.16s;}
.service-grid .reveal:nth-child(4){transition-delay:.24s;}
.project-grid .reveal:nth-child(2){transition-delay:.1s;}
.value-grid .reveal:nth-child(2){transition-delay:.1s;}
.value-grid .reveal:nth-child(3){transition-delay:.2s;}
.why-list .reveal:nth-child(2){transition-delay:.1s;}
.why-list .reveal:nth-child(3){transition-delay:.2s;}
@media (prefers-reduced-motion: reduce){
  .reveal, .hero-inner .eyebrow, .hero-inner h1, .hero-inner p, .hero-inner .btn-row{
    animation:none !important; transition:none !important; opacity:1 !important; transform:none !important;
  }
}
.btn{display:inline-block;padding:14px 30px;font-weight:600;font-size:.92rem;border-radius:2px;transition:transform .2s, background .2s;}
.btn-primary{background:var(--orange);color:#fff;}
.btn-primary:hover{background:#d9540f;transform:translateY(-2px);}
.btn-ghost{border:1.5px solid #4a4a7a;color:#fff;}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange);}

.roofline{display:block;width:100%;height:64px;position:relative;z-index:2;margin-top:-2px;}

/* ---------- Stats ---------- */
.stats{background:var(--orange);}
.stats .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;padding:26px 24px;gap:20px;}
.stat{color:#fff;text-align:left;flex:1;min-width:140px;}
.stat b{display:block;font-family:'Oswald',sans-serif;font-size:1.9rem;font-weight:700;}
.stat span{font-size:.8rem;letter-spacing:.05em;opacity:.9;}

/* ---------- Section generic ---------- */
section{padding:90px 0;}
.section-head{max-width:640px;margin-bottom:52px;}
.section-head .eyebrow{color:var(--orange);}
.section-head h2{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:700;color:var(--navy);}
.section-head p{color:#585868;margin-top:14px;}

/* ---------- About ---------- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.about-visual{background:var(--navy); border-radius:4px; position:relative; aspect-ratio:1/1; overflow:hidden; border:6px solid var(--navy);}
.about-visual img{width:100%;height:100%;object-fit:cover;display:block;}
.about-visual svg{width:78%;height:78%;}
.about-text p{color:#484858;margin-bottom:16px;}
.about-text .eyebrow{color:var(--orange);}
.about-text h2{color:var(--navy);font-size:clamp(1.6rem,3vw,2.1rem);font-weight:700;margin-bottom:20px;}

.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:10px;}
.value-card{background:#fff;padding:32px 26px;transition:transform .3s ease, box-shadow .3s ease;}
.value-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px -16px rgba(26,26,77,.25);}
.value-card h3{color:var(--navy);font-size:1rem;font-weight:600;margin-bottom:8px;}
.value-card p{color:#5c5c6c;font-size:.9rem;}

/* ---------- Services ---------- */
.services{background:#fff;}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.service-card{background:#fff;padding:38px 28px;transition:background .2s;}
.service-card:hover{background:var(--cream);}
.service-card .icon{width:46px;height:46px;margin-bottom:22px;}
.service-card h3{color:var(--navy);font-size:1.08rem;font-weight:600;margin-bottom:10px;}
.service-card p{color:#5c5c6c;font-size:.9rem;}

.service-detail{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:70px 0;border-bottom:1px solid var(--line);}
.service-detail:last-child{border-bottom:none;}
.service-detail.reverse .sd-visual{order:2;}
.sd-visual{background:var(--navy);border-radius:4px;aspect-ratio:4/3;overflow:hidden;position:relative;}
.sd-visual img{width:100%;height:100%;object-fit:cover;display:block;}
.sd-visual svg{width:60%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
.sd-visual .sd-icon-badge{position:absolute;bottom:16px;left:16px;background:rgba(26,26,77,.85);border-radius:50%;width:56px;height:56px;display:flex;align-items:center;justify-content:center;}
.sd-visual .sd-icon-badge svg{position:static;transform:none;width:28px;}
.sd-text .eyebrow{color:var(--orange);}
.sd-text h3{color:var(--navy);font-size:1.5rem;font-weight:700;margin-bottom:14px;}
.sd-text p{color:#484858;margin-bottom:14px;}
.sd-list{list-style:none;margin-top:14px;}
.sd-list li{color:#484858;font-size:.92rem;padding-left:22px;position:relative;margin-bottom:8px;}
.sd-list li::before{content:'';position:absolute;left:0;top:9px;width:8px;height:8px;background:var(--orange);}

/* ---------- Projects ---------- */
.projects-head-row{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;margin-bottom:52px;}
.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;}
.project-card{background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;transition:box-shadow .25s, transform .25s;}
.project-card:hover{box-shadow:0 18px 40px -18px rgba(26,26,77,.25); transform:translateY(-3px);}
.project-media{height:210px; position:relative; overflow:hidden; background:var(--navy);}
.project-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
.project-card:hover .project-media img{transform:scale(1.05);}
.project-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(17,17,54,.05) 0%, rgba(17,17,54,.65) 100%);}
.project-media svg{width:56%;position:relative;z-index:1;}
.project-tag{position:absolute; top:14px; left:14px; z-index:2; background:var(--orange); color:#fff; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; padding:5px 12px; border-radius:2px; font-weight:600;}
.project-body{padding:24px 26px 28px;}
.project-body h3{color:var(--navy);font-size:1.15rem;font-weight:600;margin-bottom:8px;}
.project-body p{color:#585868;font-size:.92rem;margin-bottom:14px;}
.project-loc{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--orange);font-weight:600;letter-spacing:.03em;text-transform:uppercase;}
.project-address{font-size:.8rem;color:#8a8a9a;margin-top:5px;}

/* ---------- Why ---------- */
.why{background:var(--navy);color:#fff;}
.why .wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.why h2{font-size:clamp(1.6rem,3vw,2.1rem);font-weight:700;margin-bottom:20px;}
.why .eyebrow{color:var(--orange);}
.why p{color:#c9c8dc;margin-bottom:26px;}
.why-list{display:flex;flex-direction:column;gap:18px;}
.why-item{display:flex;gap:16px;align-items:flex-start;}
.why-item .num{font-family:'Oswald',sans-serif; color:var(--orange); font-weight:700; font-size:1rem; border:1.5px solid var(--orange); border-radius:50%; width:34px;height:34px; display:flex;align-items:center;justify-content:center;flex-shrink:0; transition:background .3s ease, color .3s ease;}
.why-item:hover .num{background:var(--orange);color:#fff;}
.why-item h4{font-size:1rem;font-weight:600;margin-bottom:4px;}
.why-item p{color:#b6b5cc;font-size:.88rem;margin-bottom:0;}

/* ---------- Contact ---------- */
.contact{background:#fff;}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:4px;overflow:hidden;}
.contact-info{background:var(--navy);color:#fff;padding:48px 44px;}
.contact-info .eyebrow{color:var(--orange);}
.contact-info h2{font-size:1.7rem;font-weight:700;margin-bottom:18px;}
.contact-info p{color:#c9c8dc;margin-bottom:28px;font-size:.95rem;}
.addr-block{display:flex;gap:14px;align-items:flex-start;margin-bottom:22px;}
.addr-block svg{width:22px;height:22px;flex-shrink:0;margin-top:2px;}
.addr-block b{display:block;font-size:.95rem;margin-bottom:4px;}
.addr-block span{color:#c9c8dc;font-size:.9rem;}
.map-frame{min-height:340px;}
.map-frame iframe{width:100%;height:100%;min-height:340px;border:0;display:block;}

/* ---------- Footer ---------- */
footer{background:var(--navy-deep);color:#8a8aa8;padding:34px 0;}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:.82rem;}
footer b{color:#c9c8dc;}

@media (max-width:860px){
  .about{grid-template-columns:1fr;}
  .service-grid{grid-template-columns:repeat(2,1fr);}
  .service-detail, .service-detail.reverse{grid-template-columns:1fr;}
  .service-detail.reverse .sd-visual{order:0;}
  .project-grid{grid-template-columns:1fr;}
  .value-grid{grid-template-columns:1fr;}
  .why .wrap{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
}