/* ===================================================================
   AP Building Contractors — shared styles
   Palette: oxblood maroon (brand), warm ink, plaster paper, brass trim
   Type: Zilla Slab (headings) + Inter (body)
=================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Zilla+Slab:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --maroon: #6E1423;
  --maroon-dark: #4A0D18;
  --maroon-deep: #2E0A11;
  --ink: #1C1613;
  --paper: #EFE8DE;
  --paper-raised: #E4DBCC;
  --concrete: #948A7C;
  --brass: #A87C3F;
  --line: rgba(28,22,19,0.16);
  --max: 1080px;
}

.display{
  font-family:'Anton', 'Zilla Slab', sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:0.01em;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

h1,h2{
  font-family:'Anton', 'Zilla Slab', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing:0.01em;
  margin: 0 0 0.4em;
  color: var(--ink);
}
h3,h4{
  font-family:'Zilla Slab', serif;
  font-weight:600;
  line-height:1.2;
  margin:0 0 0.4em;
  color: var(--ink);
}

h1{ font-size: clamp(2.6rem, 6vw, 4rem); }
h2{ font-size: clamp(1.9rem, 4vw, 2.6rem); }
h3{ font-size: 1.25rem; }

p{ margin:0 0 1em; max-width: 62ch; }

a{ color: var(--maroon); }

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

/* -------------------- header / nav -------------------- */

.site-header{
  border-bottom: 4px solid var(--maroon);
  background: var(--paper);
  position: sticky;
  top:0;
  z-index: 50;
}

.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:16px;
  padding-bottom:16px;
  gap: 16px;
}

.header-right{
  display:flex;
  align-items:center;
  gap:14px;
}

.contact-pill{
  display:inline-block;
  background: var(--maroon);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:0.85rem;
  letter-spacing:0.06em;
  padding:13px 22px;
  text-transform:uppercase;
}
.contact-pill:hover{ background: var(--maroon-dark); }

@media (max-width:560px){
  .contact-pill{ padding:11px 16px; font-size:0.78rem; }
}

.brand{
  display:flex;
  align-items:baseline;
  gap:10px;
  text-decoration:none;
  color: var(--ink);
}

.brand-mark{
  font-family:'Zilla Slab', serif;
  font-weight:700;
  font-size:1.4rem;
  letter-spacing:0.01em;
  color: var(--ink);
}

.brand-mark span{ color: var(--maroon); }

.brand-logo{
  height:48px;
  width:auto;
  display:block;
}
footer .brand-logo{ height:44px; }
@media (max-width:560px){
  .brand-logo{ height:38px; }
}

nav.main-nav{ position:relative; }

nav.main-nav ul{
  list-style:none;
  display:none;
  flex-direction:column;
  gap:0;
  margin:0;
  padding:0;
  position:absolute;
  top:calc(100% + 16px);
  right:0;
  min-width:220px;
  background: var(--ink);
  border-top:4px solid var(--maroon);
  z-index:60;
}

nav.main-nav ul.open{ display:flex; }

nav.main-nav li{ border-top:1px solid rgba(240,233,222,0.14); }
nav.main-nav li:first-child{ border-top:none; }

nav.main-nav a{
  display:block;
  text-decoration:none;
  color: #F0E9DE;
  font-weight:600;
  font-size:0.98rem;
  padding:15px 22px;
}

nav.main-nav a:hover,
nav.main-nav a.active{
  color: var(--brass);
}

.nav-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  background:none;
  border:2px solid var(--ink);
  cursor:pointer;
  flex-shrink:0;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:'';
  display:block;
  width:20px; height:2px;
  background:var(--ink);
  position:relative;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }

/* -------------------- hero / brick motif -------------------- */

.hero{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(46,10,17,0.94) 0%, rgba(46,10,17,0.90) 55%, var(--maroon-deep) 100%),
    var(--bg-photo, none) center/cover no-repeat;
  background-color: var(--maroon-deep);
  color: #F4ECE2;
  border-bottom: 6px solid var(--maroon);
}

.hero-inner{
  position:relative;
  padding: 56px 24px 0;
}

.eyebrow-dash{
  display:flex;
  align-items:center;
  gap:14px;
  color:#CBB89C;
  font-weight:700;
  font-size:0.85rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  margin-bottom:22px;
}
.eyebrow-dash::before{
  content:'';
  display:block;
  width:44px;
  height:2px;
  background: var(--brass);
}

.hero h1.display{
  color:#fff;
  font-size: clamp(2.6rem, 9vw, 4.6rem);
  line-height:0.98;
  max-width: 14ch;
  margin-bottom: 0;
}
.hero h1.display .accent{ color:#9FB9D9; -webkit-text-fill-color:unset; }
.hero h1.display .brass{ color: var(--brass); }

.hero p.lead{
  color:#E3D6C6;
  max-width:56ch;
  font-size:1.08rem;
  margin-top:26px;
}

.hero-cta{
  display:flex;
  flex-direction:column;
  gap:0;
  margin-top:30px;
}

.hero-cta .btn{
  width:100%;
  text-align:center;
  padding:18px 22px;
  font-size:0.95rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  border-radius:0;
}

.hero-cta .btn-primary{
  background: #4E86C6;
  border-color:#4E86C6;
  color:#fff;
}
.hero-cta .btn-primary:hover{ background:transparent; color:#4E86C6; border-color:#4E86C6; }

.hero-cta .btn-outline{ border-color: rgba(244,236,226,0.4); margin-top:14px; }
.hero-cta .btn-outline:hover{ background:transparent; color:#F4ECE2; border-color:#F4ECE2; }

.hero-stats{
  position:relative;
  margin-top:44px;
  border-top:1px solid rgba(244,236,226,0.18);
  display:flex;
  flex-wrap:wrap;
}
.hero-stats .stat{
  flex:1 1 33%;
  padding:22px 20px 30px 0;
  border-left:none;
}
.hero-stats .stat .label-top{
  display:block;
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#CBB89C;
  margin-bottom:6px;
}
.hero-stats .stat .num{
  color:#fff;
  -webkit-text-fill-color:unset;
}
@media (max-width:640px){
  .hero-stats .stat{ flex:1 1 100%; padding-bottom:18px; }
}

/* -------------------- buttons -------------------- */

.btn{
  display:inline-block;
  padding:13px 26px;
  text-decoration:none;
  font-weight:600;
  font-size:1rem;
  border:2px solid transparent;
  cursor:pointer;
  font-family:'Inter', sans-serif;
}

.btn-primary{
  background:#F4ECE2;
  color: var(--maroon-dark);
  border-color:#F4ECE2;
}
.btn-primary:hover{ background:transparent; color:#F4ECE2; border-color:#F4ECE2; }

.btn-outline{
  background:transparent;
  color:#F4ECE2;
  border-color:#F4ECE2;
}
.btn-outline:hover{ background:#F4ECE2; color:var(--maroon-dark); }

.btn-dark{
  background: var(--ink);
  color:#F4ECE2;
  border-color: var(--ink);
}
.btn-dark:hover{ background:transparent; color:var(--ink); }

/* -------------------- sections -------------------- */

section{ padding: 72px 0; }

section.tight{ padding: 48px 0; }

.section-head{
  border-top: 3px solid var(--maroon);
  padding-top:14px;
  margin-bottom:36px;
  max-width:60ch;
}

.section-head .kicker{
  color: var(--maroon);
  font-weight:600;
  font-size:0.95rem;
  margin-bottom:6px;
  display:block;
}

.on-dark{ background: var(--ink); color:#F0E9DE; }
.on-dark h2, .on-dark h3{ color:#fff; }
.on-dark .section-head{ border-top-color: var(--brass); }
.on-dark p{ color:#D8CEC0; }

.on-raised{ background: var(--paper-raised); }

/* -------------------- stats strip -------------------- */

.stats{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.stats .stat{
  flex:1 1 200px;
  padding:28px 24px;
  border-left:1px solid var(--line);
}
.stats .stat:first-child{ border-left:none; }

.stat .num{
  font-family:'Zilla Slab', serif;
  font-weight:700;
  font-size:2.6rem;
  color:var(--maroon);
  display:block;
  line-height:1;
}
.stat .label{ color:var(--ink); font-size:0.95rem; margin-top:6px; display:block; }

/* -------------------- built-up service list (no cards) -------------------- */

.course-list{
  display:flex;
  flex-direction:column;
}

.course{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap: 28px;
  padding: 30px 0;
  border-top: 1px solid var(--line);
  align-items:start;
}
.course:last-child{ border-bottom: 1px solid var(--line); }

.course .course-tag{
  font-family:'Zilla Slab', serif;
  font-weight:600;
  color: var(--maroon);
  font-size:1.05rem;
  padding-top:2px;
}

@media (max-width: 640px){
  .course{ grid-template-columns: 1fr; gap:8px; }
}

/* -------------------- two column -------------------- */

.split{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:48px;
  align-items:center;
}
@media (max-width: 780px){
  .split{ grid-template-columns:1fr; }
}

.frame-photo{
  border: 4px solid var(--maroon);
  padding:10px;
}
.frame-photo img{ display:block; width:100%; height:auto; }

/* -------------------- reviews -------------------- */

.review{
  border-left: 4px solid var(--maroon);
  padding: 6px 0 6px 22px;
  margin-bottom: 28px;
}

.review .stars{ color: var(--brass); letter-spacing:2px; font-size:1.05rem; }
.review .who{ font-weight:600; margin-top:8px; }
.review .who span{ color:var(--concrete); font-weight:400; }

.review-form{
  border-top:3px solid var(--maroon);
  padding-top:28px;
  margin-top:12px;
  max-width:520px;
}

.review-form label{
  display:block;
  font-weight:600;
  margin-bottom:6px;
  margin-top:16px;
  font-size:0.95rem;
}
.review-form input,
.review-form textarea,
.review-form select{
  width:100%;
  padding:11px 12px;
  border:1px solid var(--concrete);
  background:#fff;
  font-family:'Inter', sans-serif;
  font-size:1rem;
}
.review-form textarea{ min-height:110px; resize:vertical; }

.form-note{ font-size:0.88rem; color:var(--concrete); margin-top:18px; }

/* -------------------- contact -------------------- */

.contact-block{
  border-top:3px solid var(--maroon);
  padding-top: 28px;
  max-width: 44ch;
}
.contact-block .phone{
  font-family:'Zilla Slab', serif;
  font-size:2.2rem;
  font-weight:700;
  color: var(--maroon);
  display:block;
  margin: 14px 0;
  text-decoration:none;
}
.contact-block .phone:hover{ color: var(--maroon-dark); }

.area-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  padding:0;
  margin:18px 0 0;
  list-style:none;
}
.area-list li{ color:var(--concrete); }
.area-list li::before{ content:'— '; color:var(--maroon); }

/* -------------------- footer -------------------- */

footer{
  background: var(--ink);
  color:#C9BEAF;
  padding: 40px 0 30px;
}
footer .wrap{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:20px;
  align-items:center;
}
footer .brand-mark{ color:#F0E9DE; }
footer .brand-mark span{ color: var(--brass); }
footer a{ color:#C9BEAF; }
footer nav ul{
  list-style:none;
  display:flex;
  gap:22px;
  padding:0; margin:0;
}
footer small{ display:block; margin-top:22px; color:#8A8072; }