/* Maryland Builders - themarylandbuilders.com
   One stylesheet for the whole site. No frameworks. */

:root{
  --ink:#131313;
  --ink-2:#1f1f1f;
  --gold:#f5a800;
  --red:#c8102e;
  --paper:#ffffff;
  --stone:#f1f0ec;
  --line:#dcdad4;
  --text:#33322f;
  --muted:#6b6963;
  --wrap:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.62;
}
img{max-width:100%;display:block}
a{color:var(--red)}
a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

h1,h2,h3{color:var(--ink);line-height:1.1;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(2rem,5.6vw,3.3rem);font-weight:800}
h2{font-size:clamp(1.5rem,3.4vw,2.15rem);font-weight:800}
h3{font-size:1.18rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1.1em;max-width:68ch}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.section{padding:64px 0}
.section--stone{background:var(--stone)}
.section--tight{padding:44px 0 40px}
.rule{width:60px;height:5px;background:var(--gold);border:0;margin:0 0 22px}

/* ---------- header ---------- */
.site-head{background:var(--ink);position:sticky;top:0;z-index:40}
.head-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 20px;max-width:var(--wrap);margin:0 auto}
.brand{display:flex;align-items:center}
.brand img{height:56px;width:auto}
.nav-toggle{
  background:none;border:1px solid #444;color:#fff;border-radius:4px;
  padding:8px 12px;font:inherit;font-size:.95rem;cursor:pointer
}
.nav-toggle span{display:inline-block;margin-right:6px}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:26px;align-items:center}
.site-nav a{color:#f2f1ee;text-decoration:none;font-weight:600;font-size:1rem;padding:6px 0;display:inline-block}
.site-nav a:hover{color:var(--gold)}
.site-nav a[aria-current="page"]{color:var(--gold);box-shadow:inset 0 -3px 0 var(--gold)}
.nav-call{
  background:var(--gold);color:#131313 !important;border-radius:4px;padding:9px 16px !important;
  box-shadow:none !important;white-space:nowrap
}
.nav-call:hover{background:#ffbe2e;color:#131313 !important}

@media(max-width:860px){
  .head-bar{flex-wrap:wrap;padding:10px 16px}
  .site-nav{
    display:none;flex-basis:calc(100% + 32px);width:auto;
    background:var(--ink-2);border-top:1px solid #333;
    margin:10px -16px -10px
  }
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column;align-items:stretch;gap:0;padding:6px 16px 18px}
  .site-nav li{border-bottom:1px solid #2e2e2e}
  .site-nav li:last-child{border:0;margin-top:12px}
  .site-nav a{padding:13px 0;font-size:1.05rem}
  .site-nav .nav-call{display:block;text-align:center;padding:13px !important}
}
@media(min-width:861px){.nav-toggle{display:none}}

/* ---------- hero ---------- */
.hero{background:var(--ink);color:#fff}
.hero-grid{display:grid;grid-template-columns:1fr}
.hero-copy{padding:44px 20px 52px;max-width:var(--wrap);margin:0 auto;width:100%}
.hero h1{color:#fff;margin-bottom:16px}
.hero p{color:#ceccc6;font-size:1.08rem;max-width:46ch}
.hero-photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}

@media(min-width:861px){
  .hero-grid{grid-template-columns:0.92fr 1.08fr;align-items:stretch}
  .hero-copy{padding:78px 46px 78px 0;max-width:none;justify-self:end;width:100%;max-width:560px}
  .hero-copy-cell{display:flex;justify-content:flex-end;padding-left:max(20px,calc((100vw - var(--wrap))/2 + 20px))}
  .hero-photo{background:var(--gold);clip-path:polygon(5% 0,100% 0,100% 100%,0 100%)}
  .hero-photo img{clip-path:polygon(7.4% 0,100% 0,100% 100%,2.4% 100%);aspect-ratio:auto;min-height:460px}
}

.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn{
  display:inline-block;text-decoration:none;font-weight:700;font-size:1rem;
  padding:14px 24px;border-radius:4px;border:2px solid transparent
}
.btn-gold{background:var(--gold);color:#131313}
.btn-gold:hover{background:#ffbe2e}
.btn-ghost{border-color:#5a5a5a;color:#fff}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000}

/* ---------- page banner (inner pages) ---------- */
.banner{background:var(--ink);color:#fff;padding:52px 0 46px}
.banner h1{color:#fff;margin-bottom:12px}
.banner p{color:#ceccc6;margin:0;max-width:60ch}

/* ---------- service list ---------- */
.svc{display:grid;gap:26px;align-items:center;padding:46px 0;border-top:1px solid var(--line)}
.svc:first-of-type{border-top:0;padding-top:12px}
.svc img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px}
.svc ul{margin:0 0 0 1.1em;padding:0}
.svc li{margin-bottom:6px}
@media(min-width:760px){
  .svc{grid-template-columns:1fr 1fr;gap:44px}
  .svc--flip .svc-text{order:2}
}

/* ---------- simple 4-up list ---------- */
.what{display:grid;gap:26px}
@media(min-width:620px){.what{grid-template-columns:1fr 1fr;gap:30px 44px}}
.what h3{margin-bottom:6px;padding-top:14px;border-top:4px solid var(--gold)}
.what p{margin:0;font-size:1rem}

/* ---------- project cards ---------- */
.projects{display:grid;gap:30px}
@media(min-width:760px){.projects{grid-template-columns:repeat(2,1fr)}}
.project-card{background:var(--paper);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.project-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.project-card .body{padding:20px 22px 24px}
.project-card h3{margin-bottom:6px}
.project-card .meta{color:var(--muted);font-size:.95rem;margin:0 0 12px}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:8px}
.gallery a{display:block;border-radius:3px;overflow:hidden;background:var(--stone)}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery figure{margin:0}
.gallery figcaption{font-size:.9rem;color:var(--muted);padding:7px 2px 0}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;background:rgba(10,10,10,.94);display:none;align-items:center;justify-content:center;z-index:90;padding:20px}
.lb.open{display:flex}
.lb img{max-width:100%;max-height:88vh;width:auto;object-fit:contain}
.lb-close{position:absolute;top:14px;right:16px;background:none;border:0;color:#fff;font-size:2.2rem;line-height:1;cursor:pointer;padding:6px 12px}

/* ---------- contact ---------- */
.contact-grid{display:grid;gap:40px}
@media(min-width:820px){.contact-grid{grid-template-columns:1fr 1.15fr;gap:60px}}
.cinfo dl{margin:0}
.cinfo dt{font-weight:700;color:var(--ink);margin-top:18px}
.cinfo dd{margin:2px 0 0}
.cinfo a{font-size:1.15rem;font-weight:700;text-decoration:none}
.cinfo a:hover{text-decoration:underline}

/* ---------- callout strip ---------- */
.strip{background:var(--gold);color:#131313;padding:34px 0}
.strip .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.strip h2{margin:0;font-size:clamp(1.3rem,3vw,1.75rem)}
.strip p{margin:4px 0 0;color:#3a2f10}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:#b8b6b0;padding:46px 0 26px;font-size:.98rem}
.foot-grid{display:grid;gap:30px}
@media(min-width:720px){.foot-grid{grid-template-columns:1.2fr 1fr 1fr}}
.site-foot h3{color:#fff;font-size:1rem;margin-bottom:12px}
.site-foot a{color:#e6e4df;text-decoration:none}
.site-foot a:hover{color:var(--gold)}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:8px}
.foot-logo{height:60px;width:auto;margin-bottom:14px}
.foot-base{border-top:1px solid #2f2f2f;margin-top:34px;padding-top:18px;font-size:.9rem;color:#8b8983}

@media(prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}