/* KAEHAM CONSTRUCTION  |  styles.css  |  brand system v2.0  |  2026-08-08
   Palette: navy #0A1239, brand blue #0F68B2, mid #1C7EBB, bright #218DCB (accents),
   charcoal #444444, steel #646464, light grey #8D8C8D.  No gradients. */

:root{
  --navy:#0A1239;
  --blue:#0F68B2;
  --mid:#1C7EBB;
  --bright:#218DCB;
  --charcoal:#444444;
  --steel:#646464;
  --grey:#8D8C8D;
  --surface:#F4F6F9;
  --hairline:#DCE1E8;
  --tint:#E7F0F8;
  --silver:#C6CBD1;
  --shadow-soft:#C9D6E4;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:#FFFFFF;color:var(--navy);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 26px;}
img{max-width:100%;height:auto;}
a{color:var(--blue);}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--bright);outline-offset:2px;
}
h1,h2,h3{font-family:"Archivo Black",Archivo,Inter,sans-serif;letter-spacing:-.01em;line-height:1.08;color:var(--navy);}
h4{font-family:Archivo,sans-serif;}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:99;}
.skip:focus{left:12px;top:12px;}

/* ---------- tagline rail ---------- */
.rail{background:var(--navy);color:#fff;}
.rail .wrap{display:flex;justify-content:center;align-items:center;gap:16px;padding-top:10px;padding-bottom:11px;}
.rail .tag-line{margin:0;font-family:Archivo,sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.2em;color:#fff;text-align:center;}
.rail .d{width:7px;height:7px;background:var(--bright);transform:rotate(45deg);flex:none;}

/* ---------- masthead ---------- */
.masthead{background:#fff;border-bottom:1px solid var(--hairline);position:relative;z-index:5;}
.masthead .wrap{display:flex;align-items:center;gap:22px;padding-top:14px;padding-bottom:14px;}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;flex:none;}
.brand img.mono{height:44px;width:auto;display:block;}
.brand img.word{height:23px;width:auto;display:block;}
.navtoggle{
  display:none;margin-left:auto;
  font:600 14px Inter,sans-serif;color:var(--navy);
  background:#F1F7FC;border:1.5px solid #C9DDEF;border-radius:3px;
  padding:9px 14px;cursor:pointer;box-shadow:2px 2px 0 var(--tint);
}
.nav{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.nav a{
  font-size:14px;font-weight:600;color:var(--navy);text-decoration:none;letter-spacing:.01em;
  background:#F1F7FC;border:1.5px solid #C9DDEF;border-radius:3px;
  padding:8px 14px;box-shadow:2px 2px 0 var(--tint);
  transition:background .1s ease,transform .08s ease,box-shadow .08s ease;
}
.nav a:hover{background:var(--tint);border-color:var(--mid);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--tint);}
.nav a:active{transform:translate(1px,1px);box-shadow:0 0 0 var(--tint);}
.nav a[aria-current="page"]{background:var(--tint);border-color:var(--mid);}
.nav a.btn{
  font-family:Archivo,sans-serif;font-weight:700;font-size:14.5px;color:#fff;
  background:var(--blue);border:2px solid var(--blue);
  padding:9px 18px;box-shadow:3px 3px 0 var(--navy);
}
.nav a.btn:hover{background:var(--navy);border-color:var(--navy);transform:none;}
.nav a.btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--navy);}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;text-decoration:none;cursor:pointer;
  font-family:Archivo,sans-serif;font-weight:700;font-size:15.5px;
  color:#fff;background:var(--blue);border:2px solid var(--blue);border-radius:3px;
  padding:12px 24px;box-shadow:3px 3px 0 var(--navy);
  transition:transform .08s ease,box-shadow .08s ease,background .1s ease;
}
.btn:hover{background:var(--navy);border-color:var(--navy);}
.btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--navy);}
.btn-ghost{background:#fff;color:var(--navy);border-color:var(--navy);box-shadow:3px 3px 0 var(--shadow-soft);}
.btn-ghost:hover{background:var(--surface);color:var(--navy);border-color:var(--navy);}
.btn-light{background:#fff;color:var(--navy);border-color:#fff;box-shadow:3px 3px 0 rgba(0,0,0,.35);}
.btn-light:hover{background:var(--tint);border-color:var(--tint);color:var(--navy);}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px;}

/* ---------- heroes ---------- */
.hero{background:var(--navy);color:#fff;position:relative;}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:26px;background:#fff;clip-path:polygon(0 100%,100% 0,100% 100%);}
.hero .wrap{padding-top:64px;padding-bottom:78px;max-width:900px;}
.eyebrow{
  display:inline-block;font-family:Archivo,sans-serif;font-weight:700;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:#8EC7F5;margin:0 0 18px;border-bottom:3px solid rgba(33,141,203,.4);padding-bottom:8px;
}
.hero h1{font-size:clamp(36px,4.4vw,56px);margin:0 0 20px;color:#fff;}
.hero .lede{font-size:18.5px;line-height:1.62;color:#DCE6F2;max-width:62ch;margin:0;}
.facts{display:flex;flex-wrap:wrap;gap:14px;margin:30px 0 0;padding:0;}
.facts div{
  background:rgba(28,126,187,.16);border:1px solid rgba(142,199,245,.35);border-radius:3px;
  padding:12px 18px;min-width:150px;
}
.facts dt{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8EC7F5;margin:0 0 4px;}
.facts dd{font-family:"Archivo Black",Archivo,sans-serif;font-size:18px;color:#fff;margin:0;}
.facts dd a{color:#fff;text-decoration:none;}

/* home hero: white, two column, mascot + wizard */
.hero.home{background:#fff;color:var(--navy);}
.hero.home::after{display:none;}
.hero.home .wrap{
  max-width:1180px;display:grid;grid-template-columns:1.12fr .88fr;gap:52px;
  padding-top:56px;padding-bottom:64px;align-items:start;
}
.hero.home .eyebrow{color:var(--blue);border-bottom-color:var(--tint);}
.hero.home h1{color:var(--navy);font-size:clamp(38px,4.4vw,58px);}
.hero.home h1 .kae{color:var(--blue);}
.hero.home .lede{color:var(--charcoal);font-size:17.5px;max-width:50ch;margin:0 0 22px;}
.hero-left{display:flex;gap:28px;align-items:flex-start;}
.guy{flex:none;width:132px;height:auto;margin-top:48px;filter:drop-shadow(0 6px 0 rgba(10,18,57,.12));}
.owners{font-size:14.5px;color:var(--steel);max-width:46ch;margin:0;}

/* ---------- estimate wizard ---------- */
.wiz{background:#fff;border:2px solid var(--navy);border-radius:4px;box-shadow:12px 12px 0 var(--tint);overflow:hidden;}
.wiz-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:16px 22px 14px;border-bottom:1px solid var(--hairline);}
.wiz-title{font-family:Archivo,sans-serif;font-weight:700;font-size:16px;color:var(--navy);}
.wiz-step{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);}
.wiz-bar{height:4px;background:var(--tint);}
.wiz-bar i{display:block;height:100%;background:var(--blue);width:0;transition:width .25s ease;}
.picks{display:flex;flex-wrap:wrap;gap:7px;padding:12px 22px 0;}
.picks:empty{padding-top:0;}
.pick{font-size:12px;font-weight:600;color:var(--blue);background:var(--tint);border:1px solid #BBD8EF;border-radius:3px;padding:4px 9px;}
.wiz-body{padding:16px 22px 20px;min-height:236px;}
.wiz .q{font-size:16.5px;font-weight:600;color:var(--navy);margin:4px 0 6px;font-family:Inter,sans-serif;}
.wiz .hint{font-size:14px;font-weight:600;color:var(--charcoal);margin:0 0 14px;}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.opt{
  text-align:left;cursor:pointer;background:#fff;color:var(--navy);
  border:2px solid var(--navy);border-radius:3px;
  font:600 15px Inter,sans-serif;padding:14px 16px;
  box-shadow:3px 3px 0 var(--shadow-soft);
  transition:background .12s ease,transform .08s ease,box-shadow .08s ease;
}
.opt:hover{background:var(--surface);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--shadow-soft);}
.opt:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--shadow-soft);}
.opt.on{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:3px 3px 0 #073155;}
.opt small{display:block;font-weight:500;font-size:12.5px;color:var(--steel);margin-top:3px;}
.opt.on small{color:#C7E3FA;}
.opt.fill-blue{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:3px 3px 0 #073155;}
.opt.fill-blue small{color:#C7E3FA;}
.opt.fill-blue:hover{background:var(--navy);border-color:var(--navy);}
.opt.fill-steel{background:var(--silver);border-color:var(--steel);color:var(--navy);box-shadow:3px 3px 0 var(--steel);}
.opt.fill-steel small{color:var(--charcoal);}
.opt.fill-steel:hover{background:#B7BDC5;}
.opt.fill-blue.on,.opt.fill-steel.on{outline:3px solid var(--bright);outline-offset:2px;}
.opt.check{display:flex;align-items:center;gap:12px;padding:12px 14px;}
.opt.check .box{flex:none;width:21px;height:21px;border:2px solid var(--navy);border-radius:3px;background:#fff;position:relative;}
.opt.check.on{background:var(--tint);border-color:var(--blue);color:var(--navy);box-shadow:3px 3px 0 #8EC7F5;}
.opt.check.on .box{background:var(--blue);border-color:var(--blue);}
.opt.check.on .box::after{content:"";position:absolute;left:5.5px;top:1.5px;width:6px;height:11px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(42deg);}
.wiz-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.wiz-fields .full{grid-column:1 / -1;}
.wiz-foot{display:flex;align-items:center;gap:12px;padding:0 22px 20px;}
.wiz-back{
  background:#fff;color:var(--steel);border:2px solid var(--hairline);border-radius:3px;
  font:600 14px Inter,sans-serif;padding:11px 16px;cursor:pointer;box-shadow:2px 2px 0 var(--hairline);
}
.wiz-back:hover{border-color:var(--steel);color:var(--navy);}
.wiz-back:active{transform:translate(1px,1px);box-shadow:0 0 0 var(--hairline);}
.wiz-next{
  margin-left:auto;background:var(--blue);color:#fff;border:2px solid var(--blue);border-radius:3px;
  font-family:Archivo,sans-serif;font-weight:700;font-size:15.5px;padding:12px 24px;cursor:pointer;
  box-shadow:3px 3px 0 var(--navy);transition:transform .08s ease,box-shadow .08s ease;
}
.wiz-next:hover{background:var(--navy);border-color:var(--navy);}
.wiz-next:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--navy);}
.wiz-next:disabled{background:#fff;border-color:var(--grey);color:var(--grey);cursor:not-allowed;box-shadow:none;transform:none;}
.wiz-sent{font-size:14px;color:var(--charcoal);line-height:1.5;padding:2px 0 0;}

/* ---------- photo frames ---------- */
.wideshot{margin:0;border:2px solid var(--navy);box-shadow:10px 10px 0 var(--tint);background:#fff;}
.wideshot img{display:block;width:100%;}
.photoband{background:#fff;}
.photoband .wrap{padding-top:8px;padding-bottom:56px;}
.sheetphoto{margin:26px 0 0;border:2px solid var(--navy);box-shadow:8px 8px 0 var(--tint);background:#fff;max-width:640px;}
.sheetphoto img{display:block;width:100%;}
.sheetphoto figcaption{font-size:13px;color:var(--steel);padding:10px 14px;border-top:1px solid var(--hairline);}

/* ---------- content sheets ---------- */
.sheet{background:#fff;}
.sheet.alt{background:var(--surface);}
.sheet-inner{max-width:1180px;margin:0 auto;padding:64px 26px;display:grid;grid-template-columns:200px 1fr;gap:44px;}
.sheet-label{
  font-family:Archivo,sans-serif;font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);margin:6px 0 0;border-top:3px solid var(--bright);padding-top:10px;height:fit-content;
}
.sheet-body h2{font-size:clamp(26px,2.8vw,34px);margin:0 0 18px;}
.sheet-body p{max-width:68ch;color:var(--charcoal);}
.sheet-body > p + p{margin-top:14px;}

/* the two doors */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px;}
.door{
  border:2px solid var(--steel);border-radius:4px;background:var(--silver);
  padding:26px 26px 22px;box-shadow:6px 6px 0 var(--steel);
}
.door h3{font-size:20px;margin:0 0 12px;color:var(--navy);}
.door p{color:var(--charcoal);font-size:15.5px;margin:0 0 16px;}
.door-link{font-family:Archivo,sans-serif;font-weight:700;font-size:15px;color:var(--navy);text-decoration:none;border-bottom:2px solid var(--navy);padding-bottom:2px;}
.door.primary{background:var(--blue);border-color:var(--blue);box-shadow:6px 6px 0 var(--navy);}
.door.primary h3{color:#fff;}
.door.primary p{color:#D9EAF8;}
.door.primary .door-link{color:#fff;border-bottom-color:#8EC7F5;}
.door-link:hover{border-bottom-color:var(--bright);}

/* services chip list */
.services{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.services a{
  display:block;text-decoration:none;color:var(--navy);
  background:#fff;border:2px solid var(--navy);border-radius:3px;
  padding:14px 16px;font:600 15.5px Inter,sans-serif;
  box-shadow:3px 3px 0 var(--shadow-soft);
  transition:transform .08s ease,box-shadow .08s ease,background .1s ease;
}
.services a:hover{background:var(--tint);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--shadow-soft);}
.services a span{display:block;font-weight:500;font-size:13px;color:var(--steel);margin-top:3px;}

/* notes cards */
.notes{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:18px;}
.notes li{
  background:#fff;border:2px solid var(--navy);border-radius:4px;
  padding:22px 24px;box-shadow:5px 5px 0 var(--tint);
}
.sheet.alt .notes li{box-shadow:5px 5px 0 #D5DEE9;}
.notes .tag{
  display:inline-block;font-family:Archivo,sans-serif;font-weight:700;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--blue);
  border-radius:2px;padding:4px 9px;margin:0 0 12px;
}
.notes h3{font-size:19px;margin:0 0 8px;}
.notes p{margin:0;color:var(--charcoal);font-size:15.5px;max-width:75ch;}

/* navy call-out band */
.band{background:var(--navy);color:#fff;clip-path:polygon(0 26px,100% 0,100% 100%,0 100%);margin-top:-26px;position:relative;}
.band .wrap{padding-top:74px;padding-bottom:52px;max-width:900px;}
.band h2{color:#fff;font-size:clamp(24px,2.6vw,32px);margin:0 0 14px;}
.band p{color:#DCE6F2;max-width:70ch;}
.band + .sheet .sheet-inner,.band + .photoband .wrap{padding-top:64px;}

/* cities */
.cities h4{
  font-family:Archivo,sans-serif;font-weight:700;font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue);margin:26px 0 10px;border-bottom:2px solid var(--tint);padding-bottom:6px;
}
.cities h4:first-child{margin-top:6px;}
.cities ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px 18px;}
.cities li{font-size:15px;color:var(--charcoal);padding-left:16px;position:relative;}
.cities li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;background:var(--bright);}

/* emergency card */
.emergency{
  border:2px solid var(--navy);border-left:8px solid var(--blue);border-radius:4px;
  background:#fff;padding:26px 28px;box-shadow:6px 6px 0 var(--tint);max-width:640px;
}
.emergency .tag{
  display:inline-block;font-family:Archivo,sans-serif;font-weight:700;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--blue);
  border-radius:2px;padding:4px 9px;margin:0 0 14px;
}
.emergency .tel{
  display:block;font-family:"Archivo Black",Archivo,sans-serif;font-size:clamp(26px,3.4vw,38px);
  color:var(--navy);text-decoration:none;margin:0 0 10px;
}
.emergency .tel:hover{color:var(--blue);}
.emergency p{margin:0;color:var(--charcoal);}

/* form cards */
.formcard{
  background:#fff;border:2px solid var(--navy);border-radius:4px;
  box-shadow:8px 8px 0 var(--tint);padding:28px 30px;max-width:720px;
}
.sheet.alt .formcard{box-shadow:8px 8px 0 #D5DEE9;}
.formcard h3{font-size:22px;margin:0 0 4px;}
.formcard .who{font-size:13.5px;font-weight:600;color:var(--steel);margin:0 0 20px;letter-spacing:.02em;}
.field{margin:0 0 14px;}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.field label{display:block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);margin:0 0 5px;}
.field input,.field select,.field textarea{
  width:100%;border:2px solid var(--navy);border-radius:3px;background:#fff;
  font:500 15px Inter,sans-serif;color:var(--navy);padding:11px 12px;
}
.field textarea{min-height:96px;resize:vertical;}
.formcard .hint{font-size:13.5px;color:var(--steel);margin:12px 0 0;}
.formcard .btn{margin-top:6px;}

/* record strip */
.record{background:var(--surface);border-top:1px solid var(--hairline);}
.record .wrap{display:flex;flex-wrap:wrap;gap:18px 44px;align-items:center;padding-top:26px;padding-bottom:28px;}
.record .item{display:flex;flex-direction:column;gap:3px;}
.record .k{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--grey);}
.record .v{font-family:"Archivo Black",Archivo,sans-serif;font-size:19px;color:var(--navy);}
.record .v.blue{color:var(--blue);}
.record .v a{color:inherit;text-decoration:none;}
.record .v a:hover{text-decoration:underline;}
.record .tel{margin-left:auto;text-align:right;}
.record .tel a{font-family:"Archivo Black",Archivo,sans-serif;font-size:23px;color:var(--navy);text-decoration:none;display:block;}
.record .tel a:hover{color:var(--blue);}

/* ---------- footer ---------- */
.foot{background:var(--navy);color:#B9C6D8;}
.foot .wrap{padding-top:56px;padding-bottom:30px;}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:36px;}
.foot .mark{font-family:"Archivo Black",Archivo,sans-serif;font-size:18px;color:#fff;margin:0 0 12px;letter-spacing:.02em;}
.foot p{font-size:14.5px;margin:0 0 10px;max-width:34ch;}
.foot .lic{color:#8EC7F5;font-size:13px;}
.foot h4{font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#8EC7F5;margin:0 0 12px;}
.foot ul{list-style:none;margin:0;padding:0;}
.foot li{margin:0 0 9px;font-size:14.5px;}
.foot a{color:#DCE6F2;text-decoration:none;}
.foot a:hover{color:#fff;text-decoration:underline;}
.foot-base{
  display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:40px;padding-top:20px;
  border-top:1px solid rgba(142,199,245,.25);font-size:13px;color:#8FA1B8;
}
.foot-base .spacer{margin-left:auto;color:#8EC7F5;}

/* ---------- learning center ---------- */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:26px 0 0;}
.pair figure{margin:0;border:2px solid var(--navy);box-shadow:8px 8px 0 var(--tint);background:#fff;}
.sheet.alt .pair figure{box-shadow:8px 8px 0 #D5DEE9;}
.pair img{display:block;width:100%;}
.pair figcaption{font-size:13.5px;color:var(--steel);padding:11px 14px;border-top:1px solid var(--hairline);}
.callout{
  border:2px solid var(--navy);border-left:8px solid var(--blue);border-radius:4px;
  background:#fff;padding:22px 26px;box-shadow:6px 6px 0 var(--tint);max-width:72ch;margin:26px 0 0;
}
.sheet.alt .callout{box-shadow:6px 6px 0 #D5DEE9;}
.callout .tag{
  display:inline-block;font-family:Archivo,sans-serif;font-weight:700;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--blue);
  border-radius:2px;padding:4px 9px;margin:0 0 12px;
}
.callout p{margin:0;color:var(--charcoal);font-size:15.5px;}
.callout p + p{margin-top:12px;}
.srcnote{font-size:13.5px;color:var(--steel);border-top:1px solid var(--hairline);padding-top:14px;margin-top:26px;max-width:72ch;}
.notes p + p{margin-top:12px;}

/* ---------- service area map ---------- */
.mapfig{margin:26px 0 38px;border:2px solid var(--navy);box-shadow:10px 10px 0 var(--tint);background:#fff;max-width:820px;}
.sheet.alt .mapfig{box-shadow:10px 10px 0 #D5DEE9;}
.mapfig svg{display:block;width:100%;height:auto;}
.mapfig figcaption{font-size:13.5px;color:var(--steel);padding:11px 14px;border-top:1px solid var(--hairline);}

/* ---------- masthead nav, one row ---------- */
.masthead .wrap{max-width:1320px;gap:18px;}
.nav{gap:6px;}
.nav a{font-size:13.5px;padding:8px 10px;}
.nav a.btn{font-size:14px;padding:9px 15px;}
.brand img.mono{height:40px;}
.brand img.word{height:21px;}

/* ---------- hero ground, home ---------- */
.hero.home{
  background:
    linear-gradient(rgba(255,255,255,.88),rgba(231,240,248,.93)),
    url("images/townhomes-wide.jpg") center 38% / cover no-repeat;
  border-bottom:1px solid var(--hairline);
}

/* ---------- wizard, tightened ---------- */
.wiz-head{padding:15px 20px 12px;align-items:center;}
.wiz-title{font-family:"Archivo Black",Archivo,sans-serif;font-size:19px;letter-spacing:-.01em;color:var(--navy);}
.wiz-step{font-size:11.5px;color:var(--steel);}
.wiz-bar{height:5px;}
.wiz-body{padding:13px 20px 16px;min-height:0;}
.wiz .q{font-size:16px;margin:2px 0 5px;}
.wiz .hint{font-size:13.5px;margin:0 0 11px;}
.opts{gap:8px;}
.opt{font:600 14.5px Inter,sans-serif;padding:11px 13px;}
.opt small{font-size:12px;margin-top:2px;}
.opt.check{padding:10px 12px;gap:10px;}
.opt.check .box{width:19px;height:19px;}
.opt.check.on .box::after{left:5px;top:1px;width:5px;height:10px;}
.picks{padding:10px 20px 0;gap:6px;}
.pick{font-size:11.5px;padding:3px 8px;}
.wiz-foot{padding:0 20px 16px;}
.wiz-next{font-size:15px;padding:11px 20px;}
.wiz-back{font-size:13.5px;padding:10px 14px;}
.wiz-fields{gap:10px;}
.wiz-sent{font-size:13px;}

/* ---------- estimate page ---------- */
.est{background:
    linear-gradient(rgba(255,255,255,.90),rgba(231,240,248,.94)),
    url("images/roofs-aerial.jpg") center 42% / cover no-repeat;
  border-bottom:1px solid var(--hairline);}
.est .wrap{padding-top:46px;padding-bottom:56px;max-width:1180px;}
.est-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:52px;align-items:start;}
.est-copy h1{font-size:clamp(30px,3.4vw,44px);margin:0 0 16px;}
.est-copy .lede{font-size:17px;color:var(--charcoal);max-width:46ch;margin:0 0 18px;}
.est-guy{display:block;width:120px;height:auto;margin:6px 0 18px;
  filter:drop-shadow(0 6px 0 rgba(10,18,57,.12));}
.est-facts{margin:0 0 18px;}
.est-facts div{background:#fff;border:2px solid var(--navy);box-shadow:3px 3px 0 var(--tint);min-width:0;}
.est-facts dt{color:var(--steel);}
.est-facts dd{color:var(--navy);font-size:17px;}
.est-call{font-size:15px;color:var(--charcoal);margin:0;}
.est-call a{font-weight:700;color:var(--blue);text-decoration:none;border-bottom:2px solid var(--tint);}
.est .wiz{box-shadow:12px 12px 0 var(--tint);}

@media (max-width:900px){
  .est-grid{grid-template-columns:1fr;gap:30px;}
  .est-guy{display:none;}
}

.hero.tight .wrap{padding-top:44px;padding-bottom:52px;}
.hero.tight h1{font-size:clamp(30px,3.4vw,42px);margin-bottom:14px;}
.hero.tight .lede{font-size:17px;}

.hero .hero-guy{position:absolute;right:6%;bottom:0;width:132px;height:auto;z-index:1;}
.hero .wrap{position:relative;z-index:2;}
.aside-guy{float:right;width:104px;height:auto;margin:0 0 14px 26px;
  filter:drop-shadow(0 6px 0 rgba(10,18,57,.10));}
@media (max-width:820px){.hero .hero-guy{display:none;} .aside-guy{display:none;}}

.urgentbar{background:#FFF6EC;border-top:2px solid #D97706;border-bottom:2px solid #D97706;}
.urgentbar .wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-top:15px;padding-bottom:15px;}
.urgentbar p{margin:0;font-size:15.5px;color:#4A2E06;max-width:70ch;}
.urgentbar strong{color:#7A3F04;}
.urgentbar .btn{margin-left:auto;background:#D97706;border-color:#D97706;box-shadow:3px 3px 0 #7A3F04;}
.urgentbar .btn:hover{background:#7A3F04;border-color:#7A3F04;}
@media (max-width:700px){.urgentbar .btn{margin-left:0;}}

.wiz-fields .field{margin:0;}
.wiz-fields textarea{min-height:74px;}
.wiz-fields label{font-size:11px;margin-bottom:3px;}
.wiz-fields input,.wiz-fields textarea{padding:9px 11px;font-size:14.5px;}

/* ---------- nav dropdown ---------- */
.navdrop{position:relative;}
.navdrop-t{
  font:600 13.5px Inter,sans-serif;color:var(--navy);cursor:pointer;
  background:#F1F7FC;border:1.5px solid #C9DDEF;border-radius:3px;
  padding:8px 26px 8px 10px;box-shadow:2px 2px 0 var(--tint);
  transition:background .1s ease,border-color .1s ease;
}
.navdrop-t::after{
  content:"";position:absolute;right:11px;top:50%;margin-top:-2px;
  border:4px solid transparent;border-top-color:var(--blue);
}
.navdrop-t:hover,.navdrop.open .navdrop-t{background:var(--tint);border-color:var(--mid);}
.navdrop-m{
  display:none;position:absolute;left:0;top:calc(100% + 7px);z-index:40;min-width:252px;
  background:#fff;border:2px solid var(--navy);border-radius:4px;box-shadow:6px 6px 0 var(--tint);
  padding:7px;
}
.navdrop.open .navdrop-m{display:block;}
.navdrop-m a{
  display:block;font:600 14px Inter,sans-serif;color:var(--navy);text-decoration:none;
  padding:9px 11px;border-radius:3px;border:none;background:none;box-shadow:none;
}
.navdrop-m a:hover{background:var(--tint);transform:none;box-shadow:none;}
.navdrop-m .navdrop-all{
  margin-top:5px;border-top:1px solid var(--hairline);border-radius:0;
  color:var(--blue);font-family:Archivo,sans-serif;font-weight:700;font-size:13.5px;
}

/* ---------- service cards, landing page ---------- */
.servicecards{background:var(--navy);border-bottom:3px solid var(--blue);}
.servicecards .wrap{padding-top:26px;padding-bottom:30px;max-width:1320px;}
.sc-label{
  font-family:Archivo,sans-serif;font-weight:700;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:#8EC7F5;margin:0 0 14px;
}
.servicecards ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(6,1fr);}
.servicecards a{
  display:block;height:100%;text-decoration:none;color:#fff;
  background:rgba(28,126,187,.18);border:1.5px solid rgba(142,199,245,.38);border-radius:4px;
  padding:14px 14px 15px;font-family:Archivo,sans-serif;font-weight:700;font-size:15.5px;
  transition:background .12s ease,border-color .12s ease,transform .08s ease;
}
.servicecards a span{
  display:block;font-family:Inter,sans-serif;font-weight:500;font-size:12.5px;
  color:#B9CFE6;margin-top:5px;line-height:1.35;
}
.servicecards a:hover{background:var(--blue);border-color:var(--blue);transform:translateY(-2px);}
.servicecards a:hover span{color:#D9EAF8;}

/* three doors */
.doors{grid-template-columns:repeat(3,1fr);}
.door h3{font-size:18px;}
.door p{font-size:15px;}

@media (max-width:1100px){.servicecards ul{grid-template-columns:repeat(3,1fr);}}
@media (max-width:1020px){.doors{grid-template-columns:1fr 1fr;}}
@media (max-width:620px){.servicecards ul{grid-template-columns:1fr 1fr;}}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .guy{width:110px;margin-top:40px;}
  .sheet-inner{grid-template-columns:1fr;gap:18px;padding:52px 26px;}
  .sheet-label{border-top:none;border-bottom:3px solid var(--bright);padding:0 0 8px;margin:0;}
  .cities ul{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:1330px) and (min-width:1081px){
  .masthead .wrap{gap:12px;}
  .nav{gap:5px;}
  .nav a{font-size:12.5px;padding:7px 8px;}
  .nav a.btn{font-size:13px;padding:8px 12px;}
  .navdrop-t{font-size:12.5px;padding:7px 22px 7px 8px;}
  .brand img.mono{height:34px;}
  .brand img.word{height:18px;}
}
@media (max-width:1080px){
  .navdrop{width:100%;}
  .navdrop-t{width:100%;text-align:center;font-size:15px;padding:11px 14px;}
  .navdrop-m{position:static;display:block;box-shadow:none;border:none;padding:4px 0 8px;min-width:0;}
  .navdrop-m a{text-align:center;font-size:14.5px;}

  .navtoggle{display:block;}
  .nav{
    display:none;width:100%;flex-direction:column;align-items:stretch;
    padding:12px 0 4px;
  }
  .nav.open{display:flex;}
  .nav a{text-align:center;font-size:15px;padding:11px 14px;}
  .masthead .wrap{flex-wrap:wrap;}
}
@media (max-width:900px){
  .hero.home .wrap{grid-template-columns:1fr;gap:40px;}
  .wiz{max-width:560px;}
  .doors{grid-template-columns:1fr;}
  .services{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .record .tel{margin-left:0;text-align:left;}
}
@media (max-width:760px){
  .pair{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .guy{display:none;}
  .hero-left{gap:0;}
  .opts{grid-template-columns:1fr;}
  .wiz-fields{grid-template-columns:1fr;}
  .field-2{grid-template-columns:1fr;}
  .cities ul{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:1fr;}
  .brand img.word{height:19px;}
  .wiz{box-shadow:7px 7px 0 var(--tint);}
  .facts div{min-width:calc(50% - 7px);}
}


/* ============================================================
   WARM RESTYLE  v2.7  |  2026-08-09
   Director ruling: go warm, lean corporate.  Supersedes the
   "heavy, plain, built" direction in Design Card v1.0 section 2.
   Method: neutralize the hard offset shadows and heavy borders,
   let photography carry the page, add air.
   ============================================================ */

:root{
  --ink:#16202B;
  --soft:#5A6875;
  --line:#E4E9EF;
  --cream:#FAFBFC;
  --shadow-1:0 1px 2px rgba(16,32,52,.06), 0 4px 14px rgba(16,32,52,.07);
  --shadow-2:0 2px 6px rgba(16,32,52,.07), 0 12px 34px rgba(16,32,52,.10);
}

body{color:var(--ink);font-size:17px;line-height:1.68;}
h1,h2,h3{letter-spacing:-.02em;}
h2,h3{font-family:Archivo,Inter,sans-serif;font-weight:700;}
.sheet-body p,.door p,.notes p,.callout p{color:var(--soft);}

/* kill every hard offset shadow and heavy border on the site */
.btn,.nav a,.nav a.btn,.navtoggle,.navdrop-t,.navdrop-m,.opt,.wiz,.wiz-back,.wiz-next,
.door,.notes li,.services a,.sheetphoto,.wideshot,.formcard,.emergency,.callout,
.mapfig,.pair figure,.est-facts div,.field input,.field select,.field textarea,
.wiz-fields input,.wiz-fields textarea,.opt.check .box{
  box-shadow:none;
}
.btn,.nav a,.navdrop-t,.navtoggle{border-radius:8px;}
.door,.notes li,.services a,.formcard,.callout,.emergency,.wiz,.navdrop-m,
.sheetphoto,.wideshot,.mapfig,.pair figure,.est-facts div,.opt{border-radius:12px;}

/* photography carries the page */
.sheetphoto,.wideshot,.mapfig,.pair figure{border:none;overflow:hidden;box-shadow:var(--shadow-1);}
.sheetphoto{max-width:none;}
.pair{gap:24px;}
.sheetphoto figcaption,.pair figcaption,.mapfig figcaption{
  color:var(--soft);background:var(--cream);border-top:1px solid var(--line);font-size:14px;padding:13px 16px;
}

/* nav: plain and light, no chips */
.masthead{border-bottom:1px solid var(--line);}
.masthead .wrap{padding-top:20px;padding-bottom:20px;}
.nav a{background:none;border:1px solid transparent;color:var(--ink);font-weight:600;padding:9px 12px;}
.nav a:hover{background:var(--cream);border-color:var(--line);transform:none;}
.nav a[aria-current="page"]{background:none;border-color:transparent;color:var(--blue);}
.navdrop-t{background:none;border:1px solid transparent;color:var(--ink);}
.navdrop-t:hover,.navdrop.open .navdrop-t{background:var(--cream);border-color:var(--line);}
.navdrop-m{border:1px solid var(--line);box-shadow:var(--shadow-2);padding:9px;}
.nav a.btn{background:var(--blue);border:1px solid var(--blue);color:#fff;font-weight:700;padding:10px 20px;}
.nav a.btn:hover{background:var(--mid);border-color:var(--mid);}

/* buttons */
.btn{border:1px solid var(--blue);padding:13px 26px;font-weight:700;}
.btn:hover{background:var(--mid);border-color:var(--mid);}
.btn:active{transform:translateY(1px);}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink);}
.btn-ghost:hover{background:var(--cream);border-color:var(--silver);color:var(--ink);}
.btn-light{background:#fff;border-color:#fff;color:var(--navy);}
.btn-light:hover{background:var(--cream);border-color:var(--cream);}

/* air */
.sheet-inner{padding:84px 26px;gap:56px;}
.sheet-body h2{margin-bottom:22px;}
.wrap{max-width:1220px;}

/* cards go quiet */
.notes li{border:1px solid var(--line);background:#fff;padding:26px 28px;box-shadow:var(--shadow-1);}
.sheet.alt .notes li{background:#fff;}
.notes .tag,.callout .tag,.emergency .tag{
  background:var(--tint);color:var(--blue);font-weight:700;letter-spacing:.1em;padding:5px 10px;border-radius:5px;
}
.door{border:1px solid var(--line);background:#fff;padding:30px;box-shadow:var(--shadow-1);}
.door h3{color:var(--ink);}
.door p{color:var(--soft);}
.door.primary{background:var(--navy);border-color:var(--navy);}
.door.primary h3{color:#fff;}
.door.primary p{color:#C9D8E8;}
.door-link{border-bottom-width:1px;}
.services a{border:1px solid var(--line);box-shadow:var(--shadow-1);}
.services a:hover{background:#fff;border-color:var(--blue);transform:translateY(-2px);box-shadow:var(--shadow-2);}
.callout{border:1px solid var(--line);border-left:4px solid var(--blue);box-shadow:var(--shadow-1);}
.formcard{border:1px solid var(--line);box-shadow:var(--shadow-2);padding:34px 36px;}
.emergency{border:1px solid var(--line);border-left:4px solid var(--blue);box-shadow:var(--shadow-1);}
.field input,.field select,.field textarea,
.wiz-fields input,.wiz-fields textarea{border:1px solid var(--line);border-radius:8px;background:var(--cream);}
.field input:focus,.field textarea:focus{background:#fff;}

/* wizard, quiet and light */
.wiz{border:1px solid var(--line);box-shadow:var(--shadow-2);background:#fff;}
.wiz-title{font-family:Archivo,sans-serif;font-weight:700;font-size:19px;}
.opt{border:1px solid var(--line);font-weight:600;}
.opt:hover{background:var(--cream);border-color:var(--silver);transform:none;}
.opt.on,.opt.fill-blue{background:var(--blue);border-color:var(--blue);color:#fff;}
.opt.fill-steel{background:#fff;border-color:var(--line);color:var(--ink);}
.opt.fill-steel small{color:var(--soft);}
.opt.fill-steel:hover{background:var(--cream);}
.opt.check .box{border:1.5px solid var(--silver);border-radius:5px;}
.opt.check.on{background:var(--tint);border-color:var(--blue);}
.wiz-next{border-radius:8px;}
.wiz-back{border:1px solid var(--line);border-radius:8px;}
.pick{background:var(--cream);border:1px solid var(--line);border-radius:20px;}

/* hero: photography forward */
.hero.home{
  background:linear-gradient(rgba(255,255,255,.82),rgba(255,255,255,.88)),
    url("images/townhomes-wide.jpg") center 40% / cover no-repeat;
  border-bottom:1px solid var(--line);
}
.hero.home .wrap{padding-top:76px;padding-bottom:86px;}
.hero:not(.home){
  background:linear-gradient(rgba(10,18,57,.78),rgba(10,18,57,.87)),
    var(--heroimg, url("images/roofs-aerial.jpg")) center 45% / cover no-repeat;
}
.hero:not(.home)::after{display:none;}
.hero .wrap{padding-top:78px;padding-bottom:86px;}
.eyebrow{border-bottom:none;letter-spacing:.2em;padding-bottom:0;margin-bottom:14px;}
.facts div{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);border-radius:10px;}

/* service cards: lighter navy band */
.servicecards{background:var(--navy);border-bottom:none;}
.servicecards .wrap{padding-top:38px;padding-bottom:42px;}
.servicecards a{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:12px;}
.servicecards a:hover{background:var(--blue);border-color:var(--blue);}

/* urgency bar, softer */
.urgentbar{background:#FFF8F0;border-top:1px solid #F0D9BC;border-bottom:1px solid #F0D9BC;}
.urgentbar .btn{box-shadow:none;border-radius:8px;}

/* bands and record strip */
.band{clip-path:none;margin-top:0;}
.band .wrap{padding-top:70px;padding-bottom:70px;}
.record{background:var(--cream);border-top:1px solid var(--line);}
.foot{background:var(--navy);}
.est .wiz{box-shadow:var(--shadow-2);}
.est{background:linear-gradient(rgba(255,255,255,.86),rgba(255,255,255,.92)),
  url("images/roofs-aerial.jpg") center 42% / cover no-repeat;}


/* wizard header, louder */
.wiz-head{flex-direction:column;align-items:flex-start;gap:5px;padding:20px 22px 14px;
  background:var(--cream);border-bottom:1px solid var(--line);}
.wiz-title{font-family:"Archivo Black",Archivo,sans-serif;font-size:21px;line-height:1.2;
  color:var(--navy);letter-spacing:-.02em;}
.wiz-step{font-size:11.5px;font-weight:700;letter-spacing:.16em;color:var(--blue);}
@media (max-width:520px){.wiz-title{font-size:18.5px;}}


/* mascot placements */
.aside-guy{float:right;width:112px;height:auto;margin:-6px 0 16px 30px;}
.hero-guy-side{
  position:absolute;right:4%;bottom:-2px;width:138px;height:auto;z-index:1;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.30));
}
@media (min-width:901px){
  .hero:not(.home) .wrap{max-width:1180px;padding-right:210px;}
}
.hero{position:relative;overflow:hidden;}
.hero .wrap{position:relative;z-index:2;}
.hero.tight .wrap{max-width:820px;margin-left:0;margin-right:auto;}
.est-guy{width:150px;}
@media (max-width:1100px){.hero-guy-side{width:120px;right:2%;}}
@media (max-width:900px){.hero-guy-side{display:none;}}
@media (max-width:700px){.aside-guy{width:84px;margin-left:18px;}}


/* contact, one form with the details alongside */
.contact-grid{grid-template-columns:1fr 320px;gap:44px;}
.contact-grid .sheet-body{grid-column:auto;}
.contact-side{display:grid;gap:14px;align-content:start;}
.side-card{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:20px 22px;}
.side-card h4{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin:0 0 9px;}
.side-card p{margin:0;color:var(--soft);font-size:15px;}
.side-card p + p{margin-top:8px;}
.side-card a{color:var(--ink);text-decoration:none;font-weight:600;}
.side-card a:hover{color:var(--blue);}
.side-tel{display:block;font-family:"Archivo Black",Archivo,sans-serif;font-size:25px;color:var(--navy);margin:0 0 8px;}
.side-note{font-size:14px;}
.formcard [hidden]{display:none;}
@media (max-width:1020px){.contact-grid{grid-template-columns:1fr;}}


/* ---------- top photo band, home ---------- */
.topshot{position:relative;background:var(--navy);}
.topshot img{display:block;width:100%;height:min(52vh,520px);object-fit:cover;object-position:center 42%;}
.topshot-tag{
  position:absolute;left:0;right:0;bottom:0;margin:0;
  padding:14px 26px;font-size:14px;color:#fff;
  background:linear-gradient(transparent, rgba(10,18,57,.82));
  text-align:center;
}
.hero.home.plain{background:#fff;border-bottom:1px solid var(--line);}
.hero.home.plain .wrap{padding-top:52px;padding-bottom:64px;}

/* ---------- watchout callout ---------- */
.watchout{
  background:#FFF8EE;border:1px solid #EBD6B4;border-left:5px solid #D97706;
  border-radius:12px;padding:20px 24px;margin:24px 0;max-width:76ch;
}
.wo-title{
  margin:0 0 10px;font-family:Archivo,sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:#9A5B04;
}
.watchout ul{margin:0;padding:0 0 0 18px;}
.watchout li{color:#4A3A22;font-size:15.5px;margin:0 0 10px;}
.watchout li:last-child{margin-bottom:0;}
.watchout strong{color:#2E2415;}


/* ---------- v3.4: sticky masthead, dense nav ---------- */
.masthead{position:sticky;top:0;z-index:60;box-shadow:0 1px 0 var(--line), 0 6px 18px rgba(16,32,52,.06);}
.masthead .wrap{padding-top:14px;padding-bottom:14px;gap:14px;max-width:1360px;}
.nav{gap:2px;}
.nav a{font-size:13px;font-weight:600;padding:8px 9px;}
.nav a.btn{font-size:13.5px;padding:9px 16px;margin-left:6px;}
.brand img.mono{height:38px;}
.brand img.word{height:19px;}
@media (max-width:1500px){
  .nav a{font-size:12.5px;padding:7px 7px;}
  .nav a.btn{font-size:13px;padding:8px 13px;}
  .brand img.mono{height:34px;}
  .brand img.word{height:17px;}
}

/* both wizard property buttons blue */
.opt.fill-steel{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:none;}
.opt.fill-steel small{color:#C7E3FA;}
.opt.fill-steel:hover{background:var(--mid);border-color:var(--mid);}

/* solution closer on guide pages */
.solution{background:var(--navy);}
.solution .sheet-inner{padding:64px 26px;}
.solution .sheet-label{color:#8EC7F5;border-color:transparent;}
.solution h2{color:#fff;}
.solution p{color:#C9D8E8;max-width:66ch;}


/* nav density applies at every width; hamburger below 1280 */
.nav a{font-size:12.5px;padding:7px 7px;}
.nav a.btn{font-size:13px;padding:8px 13px;}
.brand img.mono{height:34px;}
.brand img.word{height:17px;}
@media (max-width:1279px){
  .navtoggle{display:block;}
  .nav{display:none;width:100%;flex-direction:column;align-items:stretch;padding:10px 0 6px;gap:4px;}
  .nav.open{display:flex;}
  .nav a{text-align:center;font-size:14.5px;padding:10px 12px;}
  .nav a.btn{margin-left:0;}
  .masthead .wrap{flex-wrap:wrap;}
}


/* ---------- the two owners, James and Dusty ---------- */
/* sized by HEIGHT, never width: the poses have very different widths */
.duo{display:flex;align-items:flex-end;gap:4px;flex:none;margin-top:34px;}
.duo img{width:auto;display:block;filter:drop-shadow(0 6px 0 rgba(10,18,57,.12));}
.duo .j{height:250px;}
.duo .d{height:228px;}          /* Dusty is the shorter one */
.duo.duo-wide{float:right;margin:-8px 0 18px 30px;}
.duo.duo-wide .j{height:230px;}
.duo.duo-wide .d{height:210px;}
@media (max-width:820px){.duo.duo-wide{display:none;}}
@media (max-width:700px){.duo{margin-top:0;} .duo .j{height:150px;} .duo .d{height:137px;}}