:root{
  --navy:#141B26; --navy-2:#0F141D; --navy-3:#1F2A38;
  --amber:#F5A623; --amber-2:#FFB937; --gold-ink:#8A5B00;
  --cream:#F4F1EC; --paper:#FFFFFF; --paper-2:#FBFAF7;
  --line:#E3DDD2; --line-2:#D2C9B8;
  --muted:#5C6470; --muted-2:#98A2B3; --muted-3:#B8C0CC;
  --r:3px; --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} }
body{
  margin:0; background:var(--cream); color:var(--navy);
  font-family:Barlow,"Helvetica Neue",Arial,sans-serif; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
}
h1,h2,h3,h4{margin:0; text-wrap:balance; font-family:Anton,Impact,"Arial Narrow",sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:.5px; line-height:1.1}
p{margin:0}
img{max-width:100%; display:block}
a{color:var(--gold-ink); text-decoration:none}
a:hover{color:var(--navy)}
::selection{background:var(--amber); color:var(--navy)}
:focus-visible{outline:3px solid var(--amber); outline-offset:2px}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
.skip{position:absolute; left:-9999px; top:0; background:var(--amber); color:var(--navy); padding:12px 18px; font-weight:800; z-index:100}
.skip:focus{left:0}

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 24px; border-radius:var(--r); border:2px solid transparent;
  font-weight:800; font-size:14px; letter-spacing:1.2px; text-transform:uppercase;
  cursor:pointer; text-align:center; transition:background .15s,color .15s,border-color .15s;
}
.btn svg{width:17px; height:17px; flex:none}
.btn-amber{background:var(--amber); color:var(--navy); border-color:var(--amber)}
.btn-amber:hover{background:var(--amber-2); border-color:var(--amber-2); color:var(--navy)}
.btn-navy{background:var(--navy); color:#fff; border-color:var(--navy)}
.btn-navy:hover{background:var(--navy-2); border-color:var(--navy-2); color:#fff}
.btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.35)}
.btn-ghost:hover{background:rgba(255,255,255,.1); color:#fff; border-color:#fff}
.btn-ghost-dark{background:transparent; color:var(--navy); border-color:var(--line-2)}
.btn-ghost-dark:hover{background:var(--navy); color:#fff; border-color:var(--navy)}
.btn-sm{padding:11px 17px; font-size:12.5px}

/* ---- top strip ---- */
.strip{background:var(--navy-2); color:var(--muted-2); font-size:13.5px; font-weight:500}
.strip .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:9px; padding-bottom:9px}
.strip a{color:#fff; font-weight:700; display:inline-flex; align-items:center; gap:8px}
.strip a:hover{color:var(--amber)}
.strip svg{width:14px; height:14px; flex:none}
.strip-l{display:flex; align-items:center; gap:9px; min-width:0}
.strip-r{display:flex; align-items:center; gap:22px}

/* ---- header ---- */
.hdr{background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50}
.hdr .wrap{display:flex; align-items:center; gap:18px; padding-top:14px; padding-bottom:14px}
.logo{display:flex; align-items:center; gap:12px; flex:none}
.logo svg{width:44px; height:44px; flex:none}
.logo-t{display:flex; flex-direction:column; line-height:1}
.logo-1{font-family:Anton,Impact,sans-serif; font-size:20px; letter-spacing:.6px; text-transform:uppercase; color:var(--navy)}
.logo-1 span{color:var(--gold-ink)}
.logo-2{font-family:Barlow,sans-serif; font-size:9.5px; font-weight:700; letter-spacing:1.7px; text-transform:uppercase; color:var(--muted); margin-top:4px}
.nav{margin-left:auto; display:flex; align-items:center; gap:4px}
.nav a{
  padding:10px 13px; font-weight:700; font-size:14px; letter-spacing:.9px; text-transform:uppercase;
  color:var(--muted); border-bottom:3px solid transparent;
}
.nav a:hover{color:var(--navy)}
.nav a[aria-current="page"]{color:var(--navy); border-bottom-color:var(--amber)}
.hdr-cta{flex:none}
.burger{display:none}

/* ---- sections ---- */
.sec{padding:70px 0}
.sec-tight{padding:52px 0}
.sec-cream{background:var(--cream)}
.sec-paper{background:var(--paper-2)}
.sec-navy{background:var(--navy); color:#fff}
.sec-navy h2,.sec-navy h3{color:#fff}
.sec-navy p{color:var(--muted-3)}
.eyebrow{
  display:inline-block; font-size:12.5px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
  color:var(--gold-ink); margin-bottom:14px;
}
.sec-navy .eyebrow{color:var(--amber)}
.rule{height:4px; width:56px; background:var(--amber); margin-bottom:22px}
.big{font-size:clamp(28px,4.6vw,44px)}
.crumbs{font-size:13px; color:var(--muted); padding:14px 0 0}
.crumbs ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.crumbs li::after{content:"›"; margin-left:6px; color:var(--line-2)}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--navy)}
.sec-navy .crumbs, .sec-navy .crumbs a{color:var(--muted-2)}
.prose p{margin-bottom:18px; max-width:68ch}
.prose p:last-child{margin-bottom:0}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; padding:18px 34px 18px 0; position:relative; list-style:none;
  font-weight:700; font-size:17px; color:var(--navy);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:6px; top:50%; width:11px; height:11px; margin-top:-8px;
  border-right:2.5px solid var(--amber); border-bottom:2.5px solid var(--amber);
  transform:rotate(45deg); transition:transform .18s;
}
.faq details[open] summary::after{transform:rotate(-135deg); margin-top:-3px}
.faq details p{margin:0 0 20px; color:var(--muted); max-width:68ch}
.tiles{display:flex; flex-wrap:wrap; gap:9px; margin-top:6px; padding:0}
.tiles li{list-style:none}
.tiles a{
  display:block; background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:10px 16px; font-weight:700; font-size:14.5px; color:var(--navy);
}
.tiles a:hover{border-color:var(--amber); background:var(--amber-soft, #FCEFD6)}
.sec-navy .tiles a{background:var(--navy-3); border-color:rgba(255,255,255,.12); color:#fff}
.sec-navy .tiles a:hover{border-color:var(--amber)}
.lede{font-size:18px; color:var(--muted); max-width:62ch; margin-top:14px}
.sec-navy .lede{color:var(--muted-3)}
.sec-head{margin-bottom:34px}
.sec-head-row{display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:34px}
.sec-head-row .grow{flex:1 1 340px}

/* ---- hero ---- */
.hero{background:var(--navy); color:#fff; overflow:hidden}
.hero .wrap{display:grid; grid-template-columns:1.08fr .92fr; gap:52px; align-items:center; padding-top:64px; padding-bottom:64px}
.hero h1{font-size:clamp(34px,5.6vw,58px); line-height:1.04}
.hero h1 em{font-style:normal; color:var(--amber)}
.hero p{color:var(--muted-3); font-size:18px; margin-top:20px; max-width:56ch}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}
.hero-trust{display:flex; gap:10px 26px; flex-wrap:wrap; margin-top:30px; font-size:14px; font-weight:600; color:var(--muted-3)}
.hero-trust span{display:flex; align-items:center; gap:8px}
.hero-trust svg{width:15px; height:15px; color:var(--amber); flex:none}
.hero-fig{position:relative}
.hero-fig img{width:100%; height:auto; border-radius:var(--r); aspect-ratio:998/562; object-fit:cover}
.badge{
  position:absolute; left:-14px; bottom:-22px; background:var(--amber); color:var(--navy);
  padding:16px 20px; border-radius:var(--r); display:flex; align-items:center; gap:13px; max-width:250px;
}
.badge b{font-family:Anton,Impact,sans-serif; font-size:38px; line-height:1}
.badge span{font-size:13px; font-weight:700; line-height:1.35}

/* ---- grids ---- */
.grid{display:grid; gap:16px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:26px 24px}
.card h3{font-size:20px; margin-bottom:10px}
.card p{color:var(--muted); font-size:15px}
.card-ico{width:46px; height:46px; border-radius:var(--r); background:var(--cream); display:flex; align-items:center; justify-content:center; margin-bottom:16px}
.card-ico svg{width:26px; height:26px; color:var(--gold-ink)}
.card ul{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:8px}
.card li{position:relative; padding-left:20px; font-size:14.5px; color:var(--muted)}
.card li::before{content:""; position:absolute; left:0; top:9px; width:8px; height:8px; background:var(--amber); border-radius:1px}
.card-link{margin-top:18px; display:inline-flex; align-items:center; gap:7px; font-weight:800; font-size:13.5px; letter-spacing:1.1px; text-transform:uppercase}

/* ---- promises / steps ---- */
.promise{border-left:3px solid var(--amber); padding-left:20px}
.promise b{display:block; font-family:Anton,Impact,sans-serif; font-size:30px; color:var(--gold-ink); text-transform:uppercase; letter-spacing:.4px}
.sec-navy .promise b{color:var(--amber)}
.promise span{display:block; color:var(--muted); font-size:15px; margin-top:6px}
.sec-navy .promise span{color:var(--muted-3)}
.step b{font-family:Anton,Impact,sans-serif; font-size:44px; color:var(--amber); display:block; line-height:1}
.step h3{font-size:19px; margin:10px 0 8px}
.step p{color:var(--muted); font-size:15px}
.sec-navy .step p{color:var(--muted-3)}

/* ---- projects ---- */
.proj{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column}
.proj img{width:100%; aspect-ratio:758/505; object-fit:cover}
.proj-b{padding:18px 20px 20px}
.proj-tag{display:inline-block; background:var(--amber); color:var(--navy); font-size:11.5px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; padding:4px 9px; border-radius:2px; margin-bottom:11px}
.proj h3{font-size:18px}
.proj span{display:block; color:var(--muted); font-size:14px; margin-top:6px}

/* ---- reviews ---- */
.quote{background:var(--paper); border:1px solid var(--line); border-top:4px solid var(--amber); border-radius:var(--r); padding:26px 24px; display:flex; flex-direction:column; gap:16px}
.quote p{font-size:16.5px; line-height:1.6}
.quote footer{margin-top:auto; font-size:14px}
.quote b{display:block; font-weight:800}
.quote em{font-style:normal; color:var(--muted)}

/* ---- cta band ---- */
.band{background:var(--amber); color:var(--navy)}
.band .wrap{display:flex; align-items:center; gap:26px; flex-wrap:wrap; padding-top:38px; padding-bottom:38px}
.band .grow{flex:1 1 420px}
.band h2{font-size:clamp(24px,3.4vw,36px)}
.band p{margin-top:8px; font-weight:600}

/* ---- contact ---- */
.contact-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:22px; align-items:start}
.panel-navy{background:var(--navy); color:#fff; border-radius:var(--r); padding:30px 28px}
.panel-navy h3{font-size:23px; margin-bottom:10px}
.panel-navy h3 span{color:var(--amber)}
.panel-navy p{color:var(--muted-3); font-size:15px}
.deets{list-style:none; margin:22px 0 0; padding:22px 0 0; border-top:1px solid rgba(255,255,255,.14); display:flex; flex-direction:column; gap:14px}
.deets li{display:flex; align-items:center; gap:13px; font-size:15.5px; color:var(--muted-3)}
.deets svg{width:17px; height:17px; color:var(--amber); flex:none}
.deets a{color:#fff; font-weight:700}
.deets a:hover{color:var(--amber)}
.note{background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--amber); border-radius:var(--r); padding:20px 22px; font-size:15px; color:var(--muted); margin-top:16px}
.note b{color:var(--navy)}
form.quote-form{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:30px 28px}
form.quote-form h3{font-size:23px}
form.quote-form>p{color:var(--muted); font-size:15px; margin-bottom:22px}
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:16px}
.field label{font-size:12.5px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--navy)}
.field input,.field select,.field textarea{
  padding:13px 14px; border:1.5px solid var(--line-2); border-radius:var(--r);
  background:var(--paper-2); font-size:16px; font-family:inherit; color:var(--navy); width:100%;
}
.field textarea{min-height:110px; resize:vertical}
.f2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.form-foot{font-size:13px; color:var(--muted); margin-top:14px; text-align:center}
.form-alt{font-size:14.5px; color:var(--muted); margin-top:16px; text-align:center}
.field .opt{font-weight:600; text-transform:none; letter-spacing:0; color:var(--muted)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-status{
  margin-top:16px; padding:14px 16px; border-radius:var(--r); font-size:15px; line-height:1.5;
  border:1px solid var(--line-2); background:var(--paper-2);
}
.form-status.is-good{background:#E9F4EE; border-color:#B7DCC9; color:#17603F; font-weight:600}
.form-status.is-bad{background:#FBE9E7; border-color:#EFC2BE; color:#9C2117; font-weight:600}

/* ---- areas ---- */
.areas{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px}
.areas li{list-style:none; background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:8px 16px; font-weight:600; font-size:14.5px}
.sec-navy .areas li{background:var(--navy-3); border-color:rgba(255,255,255,.12); color:#fff}

/* ---- footer ---- */
.ftr{background:var(--navy); color:var(--muted-3); padding:54px 0 0}
.ftr-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:34px}
.ftr h4{font-size:14px; letter-spacing:1.6px; color:#fff; margin-bottom:16px}
.ftr .logo-1{color:#fff}
.ftr .logo-1 span{color:var(--amber)}
.ftr .logo-2{color:var(--muted-2)}
.ftr p{font-size:14.5px; margin-top:16px; max-width:38ch}
.ftr ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.ftr a{color:var(--muted-3); font-size:14.5px}
.ftr a:hover{color:var(--amber)}
.ftr-deets a{color:#fff; font-weight:700}
.ftr-btm{margin-top:44px; border-top:1px solid rgba(255,255,255,.12); padding:20px 0 26px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13.5px; color:var(--muted-2)}

/* ---- sticky mobile call bar ---- */
.callbar{display:none}

/* ============ RESPONSIVE ============ */
@media (max-width:1000px){
  .hero .wrap{grid-template-columns:1fr; gap:38px}
  .hero-fig{order:-1}
  .badge{left:auto; right:10px; bottom:-16px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr 1fr; gap:30px}
}
@media (max-width:860px){
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(320px,84vw); background:var(--paper);
    flex-direction:column; align-items:stretch; gap:0; padding:88px 18px 24px;
    transform:translateX(100%); transition:transform .22s ease; box-shadow:-14px 0 40px -20px rgba(0,0,0,.5);
    overflow-y:auto; z-index:60;
  }
  .nav a{padding:15px 8px; font-size:16px; border-bottom:1px solid var(--line)}
  .nav a[aria-current="page"]{border-bottom-color:var(--amber)}
  .nav-toggle:checked ~ .nav{transform:translateX(0)}
  .nav-toggle:checked ~ .scrim{opacity:1; pointer-events:auto}
  .scrim{position:fixed; inset:0; background:rgba(20,27,38,.5); opacity:0; pointer-events:none; transition:opacity .22s; z-index:55}
  .burger{
    display:flex; margin-left:auto; align-items:center; justify-content:center; gap:8px;
    width:46px; height:46px; border:1px solid var(--line-2); border-radius:var(--r);
    background:var(--paper); cursor:pointer; z-index:65; flex:none;
  }
  .burger svg{width:22px; height:22px; color:var(--navy)}
  .nav-toggle:checked ~ .burger .ico-open{display:none}
  .ico-close{display:none}
  .nav-toggle:checked ~ .burger .ico-close{display:block}
  .hdr-cta{display:none}
  .strip-l{display:none}
  .strip .wrap{justify-content:center}
  .strip-r{gap:18px}
}
@media (max-width:720px){
  body{font-size:15.5px}
  .sec{padding:52px 0}
  .sec-tight{padding:40px 0}
  .g3,.g2,.g4{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr}
  .f2{grid-template-columns:1fr}
  .hero .wrap{padding-top:44px; padding-bottom:52px}
  .badge{position:static; margin-top:14px; max-width:none}
  .panel-navy,form.quote-form{padding:24px 20px}
  .callbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:70;
    background:var(--navy); border-top:2px solid var(--amber); padding:9px 10px; gap:9px;
  }
  .callbar a{flex:1; padding:14px 8px; font-size:13px; letter-spacing:.9px}
  body{padding-bottom:76px}
  .ftr-btm{padding-bottom:20px}
}
@media (max-width:420px){
  .logo-1{font-size:17px} .logo-2{font-size:8.5px} .logo svg{width:38px;height:38px}
  .btn{padding:14px 18px; font-size:13px}
}
@media print{ .strip,.hdr,.callbar,.band,form.quote-form{display:none} }