/* ===================================================================
   GeoBrix Inc — Brand Stylesheet
   Palette built from the GeoBrix logo: leaf green + earthy brown
   =================================================================== */

:root {
  --green:        #2f9e3d;   /* leaf green from "geo" */
  --green-dark:   #1f6e2b;
  --green-deep:   #14491e;
  --olive:        #4e7a3a;   /* eco-icon green */
  --brown:        #574a3f;   /* earthy brown from "brix" */
  --brown-dark:   #3a322b;
  --ink:          #2a241f;
  --cream:        #faf7f1;
  --panel:        #f2ece0;
  --panel-2:      #ece3d3;
  --line:         #e4dccd;
  --white:        #ffffff;
  --muted:        #6f6a60;
  --gold:         #c79a3e;
  --shadow:       0 14px 40px rgba(42,36,31,.12);
  --shadow-sm:    0 6px 18px rgba(42,36,31,.10);
  --radius:       14px;
  --maxw:         1180px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Helvetica Neue", Arial, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--green-dark); text-decoration: none; }

h1, h2, h3, h4 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1.18;
  color: var(--brown-dark);
}

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

.accent { color: var(--green); font-style: italic; }
.accent-brown { color: var(--brown); font-style: italic; }

/* ---------- Eyebrow / section labels ---------- */
.eyebrow {
  display: inline-block;
  font-family: Arial, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-dark);
  margin-bottom: 14px;
}
.eyebrow.light { color: #bfe6c2; }

/* ===================================================================
   HEADER
   =================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px;
}
.logo img { height: 38px; width: auto; }
.main-nav { display: flex; align-items: center; gap: 26px; }
.main-nav a.navlink {
  font-family: Arial, sans-serif;
  font-size: 14.5px; font-weight: 600;
  color: var(--brown-dark);
  letter-spacing: .01em;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.main-nav a.navlink:hover,
.main-nav a.navlink.active { color: var(--green-dark); border-color: var(--green); }
.header-cta { display: flex; align-items: center; gap: 16px; }
.header-phone {
  font-family: Arial, sans-serif; font-weight: 700; font-size: 14.5px;
  color: var(--brown-dark); white-space: nowrap;
}
.header-phone:hover { color: var(--green-dark); }

.btn {
  display: inline-block;
  font-family: Arial, sans-serif;
  font-weight: 700; font-size: 14px;
  letter-spacing: .02em;
  padding: 13px 26px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-dark); color: #fff; }
.btn-outline { border-color: var(--green); color: var(--green-dark); background: transparent; }
.btn-outline:hover { background: var(--green); color: #fff; }
.btn-light { background: #fff; color: var(--green-deep); }
.btn-light:hover { background: var(--cream); color: var(--green-deep); }
.btn-ghost-light { border-color: rgba(255,255,255,.6); color: #fff; background: transparent; }
.btn-ghost-light:hover { background: rgba(255,255,255,.14); color: #fff; }

.menu-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  font-size: 26px; color: var(--brown-dark); line-height: 1;
}

/* ===================================================================
   HERO
   =================================================================== */
.hero {
  position: relative;
  background:
    radial-gradient(900px 500px at 78% -10%, rgba(47,158,61,.30), transparent 60%),
    linear-gradient(150deg, var(--green-deep) 0%, #1c5a28 48%, #2c3a26 100%);
  color: #fff;
  padding: 96px 0 104px;
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; right: -120px; bottom: -120px;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(199,154,62,.20), transparent 70%);
}
.hero .wrap { position: relative; z-index: 2; }
.hero-inner { max-width: 720px; }
.hero h1 {
  color: #fff;
  font-size: clamp(38px, 5.4vw, 64px);
  letter-spacing: -.01em;
  margin: 6px 0 20px;
}
.hero h1 .accent { color: #8fd99a; }
.hero p.lead {
  font-size: 18.5px; color: #e8f0e7; max-width: 600px;
  margin-bottom: 32px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-badges {
  display: flex; gap: 26px; flex-wrap: wrap;
  margin-top: 40px; padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.16);
}
.hero-badge { display: flex; align-items: center; gap: 10px; }
.hero-badge .dot {
  width: 9px; height: 9px; border-radius: 50%; background: #8fd99a;
  flex: none;
}
.hero-badge span {
  font-family: Arial, sans-serif; font-size: 13.5px; font-weight: 600;
  color: #d8e6d7;
}

/* small page hero for interior pages */
.page-hero {
  background:
    radial-gradient(700px 380px at 85% 0%, rgba(47,158,61,.32), transparent 62%),
    linear-gradient(150deg, var(--green-deep) 0%, #1c5a28 60%, #2c3a26 100%);
  color: #fff;
  padding: 60px 0 70px;
  min-height: 560px;
  display: flex;
  align-items: center;
}
.page-hero > .wrap { width: 100%; }
.page-hero h1 { color: #fff; font-size: clamp(32px, 4.4vw, 50px); margin-bottom: 14px; }
.page-hero h1 .accent { color: #8fd99a; }
.page-hero p { color: #dce7db; max-width: 620px; font-size: 17px; }
.crumbs {
  font-family: Arial, sans-serif; font-size: 12.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: #9fc8a3; margin-bottom: 16px;
}
.crumbs a { color: #9fc8a3; }
.crumbs a:hover { color: #fff; }

/* ===================================================================
   SECTIONS
   =================================================================== */
section { padding: 84px 0; }
section.tight { padding: 60px 0; }
.bg-cream { background: var(--cream); }
.bg-panel { background: var(--panel); }
.bg-gray  { background: var(--n-gray); }
.bg-dark  { background: var(--n-dark); color: #fff; }
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4 { color: #fff; }
.bg-dark p { color: #cfd3d0; }

/* ====================================================
   ABOUT-HERO — matches .svc-hero (Service page) exactly
   ==================================================== */
.about-hero { position: relative; overflow: hidden; min-height: 560px; padding: 60px 0 70px; color: #fff; background-position: center 40%; background-size: 1400px auto; background-repeat: no-repeat; }
.about-hero::before { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(30,25,19,.94) 0%, rgba(30,25,19,.88) 45%, rgba(30,25,19,.78) 70%, rgba(30,25,19,.65) 100%); z-index: 1; }
@media (max-width: 1400px) { .about-hero { background-size: cover; } }
.about-hero .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: flex-start; }
.about-hero .crumbs { color: #cfd3d0; font-size: 13px; margin-bottom: 18px; }
.about-hero .crumbs a { color: #cfd3d0; text-decoration: none; }
.about-hero .crumbs a:hover { color: var(--n-action); }
.about-hero .welcome { color: #fff; font-family: Arial, sans-serif; font-size: 18px; font-weight: 700; margin-bottom: 12px; letter-spacing: -.005em; text-transform: uppercase; }
.about-hero h1 { color: #fff; font-family: 'Arial Black', "Helvetica Neue", Arial, sans-serif; font-size: clamp(38px, 5vw, 60px); font-weight: 900; letter-spacing: -.02em; line-height: 1.02; margin-bottom: 24px; }
.about-hero h1 em { color: var(--n-action); font-style: normal; }
.about-hero .lead { max-width: 560px; font-size: 18px; line-height: 1.4; margin-bottom: 26px; color: #e6e8e5; font-weight: 700; }
.about-hero .hero-bullets { list-style: none; padding: 0; margin: 0 0 30px; max-width: 500px; }
.about-hero .hero-bullets li { padding: 8px 0 8px 26px; position: relative; color: #fff; font-size: 17px; font-weight: 700; font-family: Arial, sans-serif; }
.about-hero .hero-bullets li::before { content: "•"; position: absolute; left: 0; top: 6px; color: var(--n-action); font-size: 22px; font-weight: 900; line-height: 1; }
.about-hero .cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.about-hero .btn-primary { background: var(--n-action); color: #fff; padding: 14px 30px; border-radius: 4px; font-family: 'Arial Black', Arial, sans-serif; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; }
.about-hero .btn-outline { border: 2px solid #fff; color: #fff; background: transparent; padding: 12px 28px; border-radius: 4px; font-family: 'Arial Black', Arial, sans-serif; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; }
/* Right-side accent card — same shape as .svc-hero .quote-card */
.hero-card { background: #fff; border-radius: 8px; padding: 30px 30px 24px; box-shadow: 0 12px 30px rgba(0,0,0,.25); color: var(--brown-dark); text-align: center; }
.hero-card .card-eyebrow { color: var(--brown-dark); font-family: Arial, sans-serif; font-weight: 700; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 20px; }
.hero-card .card-num { font-family: 'Arial Black', Arial, sans-serif; font-size: 58px; color: var(--n-action); line-height: 1; margin-bottom: 4px; letter-spacing: -.03em; }
.hero-card .card-label { font-family: 'Arial Black', Arial, sans-serif; font-size: 14px; color: var(--brown-dark); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 20px; }
.hero-card .card-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 16px; border-top: 1px solid #e2e5e0; margin-bottom: 4px; }
.hero-card .card-stats > div { padding: 4px 0; }
.hero-card .card-stats .stat-num { font-family: 'Arial Black', Arial, sans-serif; font-size: 26px; color: var(--n-action); line-height: 1; }
.hero-card .card-stats .stat-lbl { font-size: 11px; color: var(--brown-dark); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; }
.hero-card ul { list-style: none; padding: 0; margin: 6px 0 18px; text-align: left; }
.hero-card ul li { padding: 6px 0 6px 22px; position: relative; font-size: 14px; color: var(--brown-dark); }
.hero-card ul li::before { content: "•"; position: absolute; left: 0; top: 4px; color: var(--n-action); font-weight: 900; font-size: 18px; }
.hero-card .card-btn { display: block; width: 100%; background: var(--n-action); color: #fff; padding: 14px 20px; border-radius: 4px; font-family: 'Arial Black', Arial, sans-serif; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; text-align: center; box-sizing: border-box; }
.hero-card .stars-lg { color: #f5a623; font-size: 28px; letter-spacing: 4px; margin-bottom: 8px; }
@media (max-width: 900px) {
  .about-hero { min-height: 0; padding: 50px 0 60px; }
  .about-hero .wrap { grid-template-columns: 1fr; gap: 36px; }
  .hero-card { max-width: 480px; margin: 0 auto; }
}
.bg-green { background: linear-gradient(150deg, var(--green-deep), #1c5a28); color: #fff; }

.section-head { max-width: 680px; margin-bottom: 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(28px, 3.6vw, 42px); margin-bottom: 14px; }
.section-head p { color: var(--muted); font-size: 16.5px; }
.bg-green .section-head h2 { color: #fff; }
.bg-green .section-head p { color: #cfe0ce; }

/* ---------- Intro split ---------- */
.split {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px;
  align-items: center;
}
.split.reverse .split-media { order: 2; }
.split-text h2 { font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 16px; }
.split-text p { color: var(--muted); margin-bottom: 16px; font-size: 16.5px; }
.split-media {
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow);
  background: linear-gradient(150deg, var(--green-deep), #2c3a26);
  min-height: 320px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; text-align: center; padding: 40px;
}
.split-media .media-note {
  font-family: Arial, sans-serif; font-size: 13px; color: #bcd3bb;
  letter-spacing: .03em;
}
.media-stat { font-family: Georgia, serif; font-size: 56px; color: #8fd99a; font-weight: 700; }
.media-stat-label { font-family: Arial, sans-serif; font-size: 14px; color: #dce7db; margin-top: 6px; }

/* ===================================================================
   CARDS / GRIDS
   =================================================================== */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: var(--shadow-sm);
}
.card h3 { font-size: 20px; margin-bottom: 10px; }
.card h4 { font-size: 17px; margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 15px; }
.card .card-num {
  font-family: Georgia, serif; font-size: 30px; font-weight: 700;
  color: var(--green); display: block; margin-bottom: 6px;
}
.card-icon {
  width: 54px; height: 54px; border-radius: 12px;
  background: linear-gradient(150deg, var(--green), var(--olive));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; color: #fff; font-size: 24px; font-weight: 700;
  font-family: Georgia, serif;
}

/* feature list (checkmarks) */
.checklist { list-style: none; }
.checklist li {
  position: relative; padding: 7px 0 7px 30px;
  font-size: 15.5px; color: var(--brown-dark);
  border-bottom: 1px solid var(--line);
}
.checklist li:last-child { border-bottom: 0; }
.checklist li::before {
  content: "✓"; position: absolute; left: 0; top: 7px;
  color: var(--green); font-weight: 700;
}
.bg-green .checklist li { color: #e3eee2; border-color: rgba(255,255,255,.14); }
.bg-green .checklist li::before { color: #8fd99a; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.step {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 20px;
  position: relative;
}
.step .step-no {
  font-family: Georgia, serif; font-weight: 700; font-size: 15px;
  color: #fff; background: var(--green);
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.step h4 { font-size: 16px; margin-bottom: 8px; }
.step p { font-size: 14px; color: var(--muted); }

/* ---------- Eco icon grid ---------- */
.eco-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.eco-item { text-align: center; }
.eco-item img {
  width: 92px; height: 92px; margin: 0 auto 14px;
  border-radius: 16px; box-shadow: var(--shadow-sm);
}
.eco-item h4 { font-size: 16px; margin-bottom: 4px; }
.eco-item p { font-size: 13.5px; color: var(--muted); }
.bg-green .eco-item h4 { color: #fff; }
.bg-green .eco-item p { color: #cfe0ce; }

/* ---------- Results / case cards ---------- */
.case-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
.case-top { padding: 26px 26px 18px; flex: 1 1 auto; }
.case-top h3 { font-size: 19px; margin-bottom: 8px; }
.case-top p { font-size: 14.5px; color: var(--muted); }
.case-stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line);
}
.case-stat {
  padding: 16px 26px; border-bottom: 1px solid var(--line);
}
.case-stat:nth-child(odd) { border-right: 1px solid var(--line); }
.case-stat .label {
  font-family: Arial, sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.case-stat .value {
  font-family: Georgia, serif; font-size: 24px; font-weight: 700;
  color: var(--brown-dark);
}
.case-stat.win .value { color: var(--green); }
.case-foot {
  padding: 16px 26px; background: var(--cream);
  font-size: 14px; color: var(--brown-dark); font-style: italic;
  min-height: 78px; display: flex; align-items: center;
  border-top: 1px solid var(--line);
}

/* ---------- Stat band ---------- */
.statband { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.statband .stat { text-align: center; }
.statband .stat .num {
  font-family: Georgia, serif; font-weight: 700; font-size: 46px;
  color: #8fd99a;
}
.bg-cream .statband .stat .num { color: var(--green); }
.statband .stat .cap {
  font-family: Arial, sans-serif; font-size: 13.5px; font-weight: 600;
  letter-spacing: .03em; color: #cfe0ce;
}
.bg-cream .statband .stat .cap { color: var(--muted); }

/* ---------- FAQ ---------- */
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item summary {
  list-style: none; cursor: pointer;
  padding: 22px 44px 22px 0; position: relative;
  font-family: Georgia, serif; font-weight: 700; font-size: 18px;
  color: var(--brown-dark);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 4px; top: 18px;
  font-size: 26px; color: var(--green); font-family: Arial, sans-serif;
  transition: transform .2s ease;
}
.faq-item[open] summary::after { content: "–"; }
.faq-item .faq-body { padding: 0 44px 24px 0; color: var(--muted); font-size: 15.5px; }

/* ---------- CTA band ---------- */
.cta-band {
  background:
    radial-gradient(600px 300px at 80% 0%, rgba(199,154,62,.22), transparent 60%),
    linear-gradient(150deg, var(--green-deep), #1c5a28);
  color: #fff; text-align: center;
}
.cta-band h2 { color: #fff; font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 14px; }
.cta-band p { color: #d6e4d5; max-width: 540px; margin: 0 auto 28px; font-size: 16.5px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Portfolio ---------- */
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.portfolio-tile {
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: #fff;
  box-shadow: var(--shadow-sm);
}
.portfolio-tile .tile-img {
  height: 210px;
  background: linear-gradient(150deg, var(--green-deep), #2c3a26);
  display: flex; align-items: center; justify-content: center;
  color: #8fd99a; font-family: Georgia, serif; font-size: 17px;
  text-align: center; padding: 20px;
}
.portfolio-tile .tile-body { padding: 20px 22px; }
.portfolio-tile h3 { font-size: 18px; margin-bottom: 6px; }
.portfolio-tile p { font-size: 14px; color: var(--muted); }
.tag {
  display: inline-block; font-family: Arial, sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--green-dark);
  background: #e7f3e8; padding: 4px 10px; border-radius: 999px;
  margin-bottom: 10px;
}

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.form-field { margin-bottom: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field label {
  display: block; font-family: Arial, sans-serif; font-size: 13px;
  font-weight: 700; color: var(--brown-dark); margin-bottom: 6px;
  letter-spacing: .02em;
}
.form-field input, .form-field textarea {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 9px;
  font-family: Arial, sans-serif; font-size: 15px; color: var(--ink);
  background: #fff;
}
.form-field input:focus, .form-field textarea:focus {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(47,158,61,.14);
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-note { font-size: 12.5px; color: var(--muted); margin-top: 12px; }

.contact-block { margin-bottom: 26px; }
.contact-block .ico {
  font-family: Georgia, serif; color: var(--green); font-weight: 700;
}
.contact-block h4 { font-size: 16px; margin-bottom: 4px; }
.contact-block p, .contact-block a { font-size: 15px; color: var(--muted); }

.office-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 24px;
}
.office-card h4 { font-size: 16px; margin-bottom: 6px; }
.office-card .role {
  font-family: Arial, sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--green-dark);
  margin-bottom: 8px;
}
.office-card p { font-size: 14.5px; color: var(--muted); }

/* ===================================================================
   FOOTER
   =================================================================== */
.site-footer {
  background: var(--brown-dark); color: #d9d1c5;
  padding: 64px 0 30px;
}
.footer-top {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px;
  padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-brand img { height: 34px; margin-bottom: 16px; }
.footer-brand p { font-size: 14px; color: #b6ada0; max-width: 280px; }
.footer-col h5 {
  font-family: Arial, sans-serif; font-size: 12.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #fff;
  margin-bottom: 14px;
}
.footer-col a, .footer-col p {
  display: block; font-size: 14px; color: #c4bbac;
  margin-bottom: 9px;
}
.footer-col a:hover { color: #8fd99a; }
.footer-badges { display: flex; gap: 12px; margin-top: 18px; }
.footer-badge {
  font-family: Arial, sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 7px; padding: 7px 11px;
  text-align: center; line-height: 1.3;
}
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 14px; padding-top: 24px;
  font-size: 12.5px; color: #9b9284;
}
.footer-bottom .socials a { color: #c4bbac; margin-left: 16px; font-size: 12.5px; }
.footer-bottom .socials a:hover { color: #8fd99a; }

/* ===================================================================
   PORTFOLIO — BEFORE / AFTER PROJECTS
   =================================================================== */
.project {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  overflow: hidden; margin-bottom: 34px;
}
.project:last-child { margin-bottom: 0; }
.project-head { padding: 26px 30px 18px; }
.project-head .tag { margin-bottom: 10px; }
.project-head h3 { font-size: 23px; margin-bottom: 6px; }
.project-head .project-meta {
  font-family: Arial, sans-serif; font-size: 13.5px; color: var(--muted);
}
.ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: var(--line); }
.ba-col { background: #fff; display: flex; flex-direction: column; }
.ba-label {
  font-family: Arial, sans-serif; font-weight: 700; font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 11px 18px; color: #fff;
}
.ba-label.before { background: var(--brown); }
.ba-label.after  { background: var(--green); }
.ba-col img { width: 100%; height: 250px; object-fit: cover; display: block; }
.ba-col img + img { border-top: 3px solid var(--line); }
.gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: var(--line); }
.gallery-grid img { width: 100%; height: 300px; object-fit: cover; display: block; }
.project-desc { padding: 20px 30px 26px; color: var(--muted); font-size: 15px; }

/* ---------- Photo media inside split sections ---------- */
.split-media.photo { padding: 0; display: block; background: none; }
.split-media .media-img {
  width: 100%; height: 100%; min-height: 360px;
  object-fit: cover; display: block;
}

/* ---------- Hero with background photo ---------- */
.hero.has-photo {
  background:
    linear-gradient(150deg, rgba(20,73,30,.93) 0%, rgba(28,90,40,.82) 50%, rgba(44,58,38,.93) 100%),
    url('../assets/hero.jpg') center/cover no-repeat;
}

/* ---------- Photo gallery grids ---------- */
.gallery-block { margin-top: 4px; }
.gallery-block + .gallery-block { margin-top: 0; }
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 8px; padding: 14px 0 4px;
}
.thumb {
  padding: 0; border: 0; margin: 0; cursor: pointer;
  background: var(--panel); border-radius: 9px; overflow: hidden;
  aspect-ratio: 4 / 3; display: block;
}
.thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s ease;
}
.thumb:hover img { transform: scale(1.06); }
.thumb:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(18,20,16,.95);
  display: none; align-items: center; justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 92vw; max-height: 84vh;
  object-fit: contain; border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.lb-btn {
  position: absolute; background: rgba(255,255,255,.12);
  color: #fff; border: 1px solid rgba(255,255,255,.25);
  width: 52px; height: 52px; border-radius: 50%;
  font-size: 24px; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.lb-btn:hover { background: rgba(255,255,255,.26); }
.lb-close { top: 22px; right: 22px; }
.lb-prev { left: 22px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 22px; top: 50%; transform: translateY(-50%); }
.lb-counter {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  color: #e8f0e7; font-family: Arial, sans-serif; font-size: 13px;
  letter-spacing: .06em; background: rgba(0,0,0,.4);
  padding: 7px 16px; border-radius: 999px;
}
@media (max-width: 720px) {
  .photo-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .lb-btn { width: 44px; height: 44px; font-size: 20px; }
  .lb-prev { left: 10px; } .lb-next { right: 10px; } .lb-close { right: 12px; top: 12px; }
}

/* ===================================================================
   NED-STYLE TEMPLATE (GeoBrix green + dark brown)
   Modeled on Ned Stevens template style
   =================================================================== */
:root {
  --n-dark: #1e1913;
  --n-dark-2: #2a2420;
  --n-action: #2f9e3d;
  --n-action-dark: #1f6e2b;
  --n-gray: #eef1f5;
  --n-gray-2: #f7f7f7;
}

/* =========================================================
   SECTION PALETTE — used across all pages for consistent
   alternating dividing sections (matches index.html rhythm)
   ========================================================= */
.sec           { padding: 70px 0; }
.sec-sm        { padding: 45px 0; }
.sec-lg        { padding: 90px 0; }
.sec-white     { background: #ffffff; }
.sec-gray      { background: var(--n-gray); }        /* light blue-gray #eef1f5 */
.sec-cream     { background: var(--panel); }         /* warm cream #f2ece0 */
.sec-cream-lt  { background: var(--cream); }         /* pale cream #faf7f1 */
.sec-dark      { background: var(--n-dark); color: #fff; }
.sec-dark h1, .sec-dark h2, .sec-dark h3, .sec-dark h4 { color: #fff; }
.sec-dark p    { color: #cfd3d0; }
.sec-green     { background: var(--n-action); color: #fff; }
.sec-green h1, .sec-green h2, .sec-green h3 { color: #fff; }
.sec-green p   { color: #eaf5ec; }
.sec-hero-gradient { background: linear-gradient(135deg, #f4f6f2 0%, #e9ece4 100%); border-bottom: 1px solid #e2e5e0; }
/* Section header helper */
.sec-title     { text-align: center; font-family: 'Arial Black', Arial, sans-serif; font-size: 30px; color: var(--brown-dark); letter-spacing: -.01em; margin-bottom: 12px; }
.sec-dark .sec-title { color: #fff; }
.sec-sub       { text-align: center; color: var(--brown-dark); font-size: 16px; max-width: 640px; margin: 0 auto 44px; line-height: 1.55; opacity: .85; }
.sec-dark .sec-sub { color: #cfd3d0; opacity: 1; }

/* --- Top mini-bar (reviews strip) --- */
.tb-reviews {
  background: #f6f6f2;
  padding: 10px 0; text-align: center;
  font-family: Arial, sans-serif; font-size: 13px; font-weight: 700;
  color: var(--brown-dark);
}
.tb-reviews a { color: var(--n-action); text-decoration: underline; margin-left: 4px; }

/* --- Dark services top bar --- */
.tb-services {
  background: var(--n-dark);
  padding: 6px 0;
}
.tb-services .wrap {
  display: flex; justify-content: center; align-items: center; gap: 32px;
  max-width: 1180px;
}
.tb-services-list {
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
  list-style: none; margin: 0; padding: 0; flex: 0 0 auto;
}
.tb-services-list li { position: relative; display: flex; align-items: center; white-space: nowrap; }
.tb-services-list li + li::before {
  content: "|"; color: rgba(255,255,255,.28); margin-right: 10px;
}
.tb-services-list a {
  color: #fff; font-family: Arial, sans-serif; font-size: 11.5px; font-weight: 800;
  text-decoration: none; letter-spacing: .04em; text-transform: uppercase;
  transition: color .15s ease;
}
.tb-services-list a:hover { color: var(--n-action); }
.tb-phone-block {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Arial Black', Arial, sans-serif;
  color: #fff; white-space: nowrap; flex: none;
  background: transparent; padding: 0; border: 0; border-radius: 0;
}
.tb-phone-block .tb-lbl {
  color: var(--n-action); font-size: 11px; font-weight: 900; letter-spacing: .1em;
  display: flex; align-items: center; gap: 5px;
}
.tb-phone-block .tb-num {
  font-size: 16px; font-weight: 900; color: #fff; text-decoration: none;
  letter-spacing: .01em;
}
.tb-phone-block .tb-num:hover { color: var(--n-action); }

/* --- Green main header (replaces Ned orange) --- */
.header-ned {
  background: var(--n-action);
  padding: 14px 0;
  border-bottom: 3px solid var(--n-action-dark);
}
.header-ned .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.header-ned .logo-wrap { display: flex; align-items: center; }
.header-ned .logo-wrap img {
  height: 46px; width: auto;
  background: #fff;
  padding: 6px 14px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.header-ned .nav-ned {
  display: flex; gap: 30px; align-items: center;
}
.header-ned .nav-ned a {
  color: #fff; font-family: Arial, sans-serif; font-size: 14px; font-weight: 800;
  text-decoration: none; letter-spacing: .04em; text-transform: uppercase;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  transition: border-color .15s ease;
}
.header-ned .nav-ned a:hover,
.header-ned .nav-ned a.active { border-bottom-color: #fff; }

/* --- Nav dropdown --- */
.header-ned .nav-ned .nav-dropdown {
  position: relative;
}
.header-ned .nav-ned .nav-dropdown > a .caret {
  font-size: 10px; margin-left: 2px;
}
.header-ned .nav-ned .dropdown-menu {
  position: absolute;
  top: 100%; left: -14px;
  background: #fff;
  min-width: 260px;
  padding: 8px 0;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  opacity: 0; visibility: hidden;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index: 100;
}
.header-ned .nav-ned .nav-dropdown:hover .dropdown-menu,
.header-ned .nav-ned .nav-dropdown:focus-within .dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
.header-ned .nav-ned .dropdown-menu a {
  display: block; color: var(--brown-dark);
  padding: 10px 20px; border-bottom: 0;
  font-size: 13px; text-transform: none; letter-spacing: 0;
  font-weight: 700;
}
.header-ned .nav-ned .dropdown-menu a:hover {
  background: var(--n-gray); border-bottom-color: transparent;
  color: var(--n-action);
}

.header-ned .header-right { display: flex; align-items: center; gap: 20px; }
.header-ned .acct {
  color: #fff; font-family: Arial, sans-serif; font-size: 13px; font-weight: 800;
  text-decoration: none; display: flex; align-items: center; gap: 6px;
  letter-spacing: .04em; text-transform: uppercase;
}
.header-ned .btn-quote-ned {
  background: var(--n-dark); color: #fff; font-weight: 700;
  padding: 10px 22px; border-radius: 999px; font-size: 12px;
  letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; font-family: Arial, sans-serif;
  border: 2px solid var(--n-dark);
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.header-ned .btn-quote-ned:hover { background: transparent; border-color: #fff; }
.header-ned .menu-toggle-ned {
  display: none; background: none; border: 0; cursor: pointer;
  color: #fff; font-size: 26px;
}

/* --- Hero full-width banner with crew photo --- */
.hero-ned {
  position: relative; overflow: hidden;
  background:
    linear-gradient(90deg, rgba(30,25,19,.88) 0%, rgba(30,25,19,.55) 35%, rgba(30,25,19,.15) 60%, rgba(30,25,19,0) 80%),
    url('../assets/hero.jpg') center 40% / cover no-repeat;
  image-rendering: -webkit-optimize-contrast;
  min-height: 560px;
  padding: 60px 0 70px;
}
.hero-ned h1 {
  font-size: clamp(32px, 4.4vw, 46px);
  margin-bottom: 22px;
}
.hero-ned .welcome {
  font-size: 20px; margin-bottom: 8px;
}
.hero-ned .zip-box { padding: 16px 20px; max-width: 400px; }
.hero-ned .zip-box .zip-label { font-size: 18px; margin-bottom: 4px; }
.hero-ned .zip-box .zip-sub { font-size: 12.5px; margin-bottom: 10px; }
.hero-ned .zip-box .zip-form input,
.hero-ned .zip-box .zip-form button { padding: 11px 16px; font-size: 14px; }
.hero-ned .offer-strip { padding: 9px; font-size: 12.5px; margin-top: 8px; }
.hero-ned .wrap {
  position: relative; z-index: 2;
  display: block;
}
.hero-ned .hero-content {
  color: #fff; max-width: 620px;
}
.hero-ned .hero-image { display: none; }

@media (max-width: 900px) {
  .hero-ned {
    background:
      linear-gradient(180deg, rgba(30,25,19,.88) 0%, rgba(30,25,19,.55) 55%, rgba(30,25,19,.35) 100%),
      url('../assets/hero.jpg') center center / cover no-repeat;
    min-height: 460px; padding: 60px 0 60px;
  }
  .hero-ned .hero-content { max-width: none; }
}
.hero-ned .welcome {
  color: #fff; font-family: Arial, sans-serif; font-size: 26px;
  font-weight: 700; margin-bottom: 14px; letter-spacing: -.005em;
}
.hero-ned h1 {
  color: #fff; font-family: 'Arial Black', "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(38px, 5.4vw, 58px); font-weight: 900;
  letter-spacing: -.025em; line-height: 1.02; margin-bottom: 34px;
}
.hero-ned .zip-box {
  background: var(--n-dark-2); padding: 20px 22px;
  border-radius: 4px; max-width: 440px;
  border: 2px solid var(--n-action);
}
.hero-ned .zip-box .zip-label {
  color: #fff; font-family: 'Arial Black', Arial, sans-serif;
  font-size: 22px; font-weight: 900; margin-bottom: 6px;
  text-transform: uppercase; text-align: center; letter-spacing: .01em;
  line-height: 1.1;
}
.hero-ned .zip-box .zip-label em { color: var(--n-action); font-style: normal; }
.hero-ned .zip-box .zip-sub {
  color: #cfd3d0; font-size: 13.5px; margin-bottom: 14px;
  text-align: center; font-family: Arial, sans-serif;
}
.hero-ned .zip-form { display: flex; gap: 6px; }
.hero-ned .zip-form input {
  flex: 1; padding: 14px 16px; border: 0; border-radius: 4px;
  font-size: 15px; font-weight: 700; font-family: Arial, sans-serif;
}
.hero-ned .zip-form button {
  background: var(--n-action); color: #fff; border: 0;
  padding: 14px 22px; border-radius: 4px; cursor: pointer;
  font-family: 'Arial Black', Arial, sans-serif; font-size: 13px;
  font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
  transition: background .15s ease;
}
.hero-ned .zip-form button:hover { background: var(--n-action-dark); }
.hero-ned .offer-strip {
  background: var(--n-action); color: #fff;
  padding: 12px; text-align: center; font-weight: 800;
  font-size: 13.5px; margin-top: 10px; border-radius: 4px;
  font-family: Arial, sans-serif; letter-spacing: .02em;
}

/* --- Trust badges strip --- */
.trust-ned {
  background: var(--n-gray); padding: 34px 0;
}
.trust-ned .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap;
}
.trust-ned .trust-title {
  font-family: 'Arial Black', Arial, sans-serif; font-weight: 900; font-size: 20px;
  color: var(--brown-dark); max-width: 260px; line-height: 1.15;
  letter-spacing: -.01em;
}
.trust-ned .trust-title em {
  color: var(--n-action); font-style: italic;
  font-family: Georgia, serif; font-weight: 700;
  display: block; margin-top: 6px;
  font-size: 17px;
}
.trust-ned .badges { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.trust-ned .badge-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; font-family: Arial, sans-serif; font-size: 10.5px; font-weight: 800;
  color: var(--brown-dark); text-align: center; letter-spacing: .06em;
  text-transform: uppercase;
}
.trust-ned .badge-item .badge-num {
  font-family: 'Arial Black', Arial, sans-serif; font-size: 22px;
  color: var(--brown-dark); line-height: 1;
}
.trust-ned .badge-item .badge-num em { color: var(--n-action); font-style: normal; }
.trust-ned .badge-item .badge-circle {
  width: 78px; height: 78px; border-radius: 50%;
  background: var(--n-action); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: Arial, sans-serif; font-size: 9.5px; font-weight: 700;
  line-height: 1.15; padding: 6px; text-align: center;
  letter-spacing: .02em;
}
.trust-ned .badge-item .badge-circle strong {
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 13px; font-weight: 900;
  display: block; margin-bottom: 2px;
  letter-spacing: 0;
}

/* --- Tagline band --- */
.tagline-band {
  padding: 46px 20px;
  text-align: center;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.tagline-band h2 {
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: clamp(24px, 3.6vw, 40px);
  color: var(--brown-dark);
  letter-spacing: -.01em;
  line-height: 1.15;
  margin: 0 auto;
  max-width: 900px;
}
.tagline-band h2 em {
  color: var(--n-action);
  font-style: italic;
  font-family: Georgia, serif;
  font-weight: 700;
}
.tagline-band p {
  color: var(--muted);
  font-size: 15px;
  margin-top: 12px;
  font-family: Arial, sans-serif;
  letter-spacing: .02em;
}

/* --- Promo dashed banner --- */
.promo-band {
  border: 2px dashed var(--n-action);
  border-radius: 6px; padding: 20px 28px;
  margin: 50px auto;
  display: flex; align-items: center; justify-content: center;
  gap: 20px; flex-wrap: nowrap;
  max-width: 1300px; background: #eef1f5;
}
.promo-band .promo-ico-box {
  width: 38px; height: 38px; background: var(--n-action);
  border-radius: 4px; display: flex; align-items: center; justify-content: center;
  color: #fff; flex: none;
}
.promo-band .promo-ico-box svg { width: 22px; height: 22px; }
.promo-band .promo-text {
  font-family: 'Arial Black', Arial, sans-serif; font-size: 15px;
  color: var(--brown-dark); letter-spacing: .02em;
  white-space: nowrap; text-transform: uppercase;
}
.promo-band .promo-text a { color: var(--n-action); text-decoration: none; font-weight: 900; }
.promo-band .btn-promo {
  background: var(--n-action); color: #fff; flex: none;
  padding: 10px 18px; border-radius: 4px;
  font-family: 'Arial Black', Arial, sans-serif; font-size: 12px;
  letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  transition: background .15s ease;
}
.promo-band .btn-promo:hover { background: var(--n-action-dark); }
@media (max-width: 900px) {
  .promo-band { flex-wrap: wrap; padding: 14px 16px; gap: 14px; }
  .promo-band .promo-text { white-space: normal; font-size: 13px; text-align: center; }
}
.promo-band .promo-text em {
  color: var(--n-action); font-style: normal;
}
.promo-band .btn-promo {
  background: var(--n-action); color: #fff;
  padding: 12px 22px; border-radius: 4px;
  font-family: 'Arial Black', Arial, sans-serif; font-size: 12px;
  letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; transition: background .15s ease;
}
.promo-band .btn-promo:hover { background: var(--n-action-dark); }

/* --- Service tiles - big colored buttons --- */
.services-outer-band {
  background: var(--n-gray);
  padding: 70px 0 40px;
  margin: 60px 0 30px;
}
.services-ned-box {
  background: #fff;
  background-image: radial-gradient(rgba(0,0,0,.05) 1px, transparent 1px);
  background-size: 14px 14px;
  padding: 70px 60px;
  border-radius: 10px;
  margin: 0;
  box-shadow: 0 4px 20px rgba(0,0,0,.05);
}
.services-ned-box .svc-head {
  text-align: center; margin-bottom: 40px;
}
.services-ned-box .svc-head h2 {
  color: var(--n-action); font-family: 'Arial Black', Arial, sans-serif;
  font-size: clamp(18px, 2.2vw, 26px); font-weight: 900;
  margin-bottom: 14px; letter-spacing: -.01em;
  white-space: nowrap;
}
.services-ned-box .svc-head p {
  font-size: 14.5px; color: var(--brown-dark);
  max-width: none; margin: 0 auto;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .services-ned-box { padding: 50px 24px; }
  .services-ned-box .svc-head h2,
  .services-ned-box .svc-head p { white-space: normal; }
}
.services-tiles-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.svc-tile {
  background: var(--n-action); color: #fff;
  padding: 14px 22px;
  min-height: 68px;
  border-radius: 4px;
  text-decoration: none;
  display: flex; align-items: center; gap: 14px;
  font-family: 'Arial Black', Arial, sans-serif; font-size: 14px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .03em;
  position: relative; overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
  min-height: 82px;
}
.svc-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,.15); }
.svc-tile::after {
  content: "›"; position: absolute; right: 22px;
  font-size: 26px; color: #fff; font-family: Arial, sans-serif; font-weight: 900;
  line-height: 1;
}
.svc-tile .ico-circle {
  width: 46px; height: 46px; background: #fff;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  flex: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.svc-tile .ico-circle svg { width: 28px; height: 28px; color: var(--n-action); }
.svc-tile.alt-gold .ico-circle svg { color: var(--gold); }
.svc-tile.alt-dark .ico-circle svg { color: var(--n-dark); }
.svc-tile.alt-brown .ico-circle svg { color: var(--brown); }
.svc-tile.alt-gold { background: var(--gold); }
.svc-tile.alt-dark { background: var(--n-dark); }
.svc-tile.alt-brown { background: var(--brown); }
.services-ned-box .svc-foot,
.svc-foot-outside {
  text-align: center; margin-top: 30px;
}
.svc-foot-outside { margin-top: 34px; margin-bottom: 20px; }
.services-ned-box .svc-foot .btn-quote-big,
.svc-foot-outside .btn-quote-big {
  background: var(--n-action); color: #fff;
  padding: 14px 40px; border-radius: 4px; display: inline-block;
  font-family: 'Arial Black', Arial, sans-serif; font-size: 14px;
  letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; transition: background .15s ease;
}
.services-ned-box .svc-foot .btn-quote-big:hover { background: var(--n-action-dark); }

/* --- Body copy section with orange link callouts --- */
.body-lead {
  padding: 70px 0 50px;
}
.body-lead h2 {
  font-family: 'Arial Black', Arial, sans-serif; font-weight: 900;
  font-size: clamp(24px, 3vw, 34px); color: var(--brown-dark);
  margin-bottom: 20px; letter-spacing: -.01em;
}
.body-lead p { font-size: 16px; color: var(--brown-dark); margin-bottom: 16px; }
.body-lead p a { color: var(--n-action); font-weight: 700; text-decoration: underline; }
.pillars-3 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin: 40px 0;
}
.pillar-card {
  background: var(--n-gray); padding: 32px 26px;
  border-radius: 8px;
}
.pillar-card h3 {
  font-family: 'Arial Black', Arial, sans-serif; font-size: 18px;
  color: var(--brown-dark); margin-bottom: 12px;
}
.pillar-card p { font-size: 14.5px; color: var(--brown-dark); }

/* --- Service Divisions - dark + light card row --- */
.divisions-row {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 22px;
  margin: 90px 0;
  align-items: stretch;
}
.division-card-dark {
  background: var(--n-dark); color: #fff;
  padding: 38px 34px; border-radius: 8px;
  display: flex; flex-direction: column;
}
.division-card-dark h3 {
  color: #fff; font-family: 'Arial Black', Arial, sans-serif;
  font-size: 22px; font-weight: 900; margin-bottom: 18px;
}
.division-list { list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  flex: 1;
}
.division-list li {
  padding: 8px 0 8px 26px; position: relative;
  color: #fff; font-family: Arial, sans-serif; font-size: 15px; font-weight: 700;
}
.division-list li::before {
  content: "›"; position: absolute; left: 0; top: 4px;
  color: var(--n-action); font-size: 22px; font-weight: 900;
}
.division-card-light {
  background: var(--n-gray); color: var(--brown-dark);
  padding: 38px 34px; border-radius: 8px;
  display: flex; flex-direction: column;
}
.division-card-light h3 {
  color: var(--brown-dark); font-family: 'Arial Black', Arial, sans-serif;
  font-size: 22px; font-weight: 900; margin-bottom: 18px;
}
.division-card-light p { font-size: 15px; line-height: 1.65; margin-bottom: 18px; color: var(--brown-dark); }
.division-card-light p:last-of-type { margin-bottom: auto; }
.btn-booknow {
  background: var(--n-action); color: #fff;
  padding: 12px 26px; border-radius: 4px;
  font-family: 'Arial Black', Arial, sans-serif; font-size: 12px;
  letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; display: inline-block;
  margin-top: 20px; align-self: flex-start;
}

/* --- Video + features row --- */
.video-row {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px;
  margin: 90px 0;
}
.video-tile {
  border-radius: 8px; overflow: hidden; position: relative;
  background: var(--n-dark);
  min-height: 320px;
}
.video-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-tile .play-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(255,255,255,.9); display: flex; align-items: center; justify-content: center;
}
.video-tile .play-btn::before {
  content: ""; border-left: 22px solid var(--n-dark);
  border-top: 14px solid transparent; border-bottom: 14px solid transparent;
  margin-left: 6px;
}
.features-tile {
  background: var(--n-dark); color: #fff;
  padding: 34px 30px; border-radius: 8px;
}
.features-tile h3 {
  color: #fff; font-family: 'Arial Black', Arial, sans-serif;
  font-size: 22px; margin-bottom: 20px;
}
.features-list { list-style: none; padding: 0; margin: 0; }
.features-list li {
  padding: 10px 0 10px 26px; position: relative;
  color: #fff; font-family: Arial, sans-serif; font-size: 14.5px; font-weight: 700;
}
.features-list li::before {
  content: "›"; position: absolute; left: 0; top: 6px;
  color: var(--n-action); font-size: 20px; font-weight: 900;
}

/* --- Quality box (white on gray outer band) --- */
.quality-outer-band {
  background: var(--n-gray);
  padding: 70px 0 70px;
  margin: 90px 0;
}
.quality-box {
  background: #fff;
  padding: 50px 40px; border-radius: 10px;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px;
  align-items: start; margin: 0;
  box-shadow: 0 4px 20px rgba(0,0,0,.05);
}
.quality-box .quality-head {
  font-family: 'Arial Black', Arial, sans-serif; font-size: clamp(22px, 3vw, 32px);
  font-weight: 900; color: var(--brown-dark);
  text-transform: uppercase; text-align: center;
  grid-column: 1 / -1; margin-bottom: 20px; letter-spacing: -.01em;
}
.quality-box .quality-sub {
  font-family: 'Arial Black', Arial, sans-serif; font-weight: 900; font-size: 20px;
  color: var(--brown-dark); margin-bottom: 14px;
}
.quality-box .quality-body p { font-size: 15px; color: var(--brown-dark); margin-bottom: 14px; }
.quality-features-card {
  background: var(--n-dark); color: #fff;
  padding: 32px 26px; border-radius: 8px;
}
.quality-features-card h3 {
  color: #fff; font-family: 'Arial Black', Arial, sans-serif;
  font-size: 18px; margin-bottom: 18px;
}
.quality-features-list { list-style: none; padding: 0; margin: 0; }
.quality-features-list li {
  padding: 10px 0 10px 32px; position: relative;
  color: #fff; font-family: Arial, sans-serif; font-size: 14px;
}
.quality-features-list li::before {
  content: "✓"; position: absolute; left: 6px; top: 8px;
  color: var(--n-action); font-weight: 900; font-size: 16px;
}

/* --- Service Areas (hero-style banner with home background) --- */
.areas-ned {
  position: relative; overflow: hidden;
  background:
    linear-gradient(90deg, rgba(30,25,19,.85) 0%, rgba(30,25,19,.7) 45%, rgba(30,25,19,.6) 65%, rgba(30,25,19,.5) 100%),
    url('../assets/projects/whitteck-st/photos/full/01.jpg') center 40% / cover no-repeat;
  min-height: 460px;
  padding: 70px 0;
  margin: 60px 0 90px;
}
.areas-ned .wrap {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px;
  align-items: center;
  position: relative; z-index: 2;
}
.areas-ned .areas-ned-content { color: #fff; }
.areas-ned .welcome {
  color: #fff; font-family: Arial, sans-serif; font-size: 20px;
  font-weight: 700; margin-bottom: 10px; letter-spacing: -.005em;
}
.areas-ned h2 {
  color: #fff; font-family: 'Arial Black', "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(38px, 5vw, 54px); font-weight: 900;
  letter-spacing: -.02em; line-height: 1.02; margin-bottom: 20px;
  text-transform: uppercase;
}
.areas-ned h2 em { color: var(--n-action); font-style: normal; }
.areas-ned .areas-ned-tag {
  color: #e6e8e5; font-family: Arial, sans-serif;
  font-size: 17px; line-height: 1.5; margin-bottom: 26px;
  max-width: 500px;
}
.btn-areas-hero {
  background: var(--n-action); color: #fff;
  padding: 15px 34px; border-radius: 4px;
  font-family: 'Arial Black', Arial, sans-serif; font-size: 14px;
  letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; display: inline-block;
  transition: background .15s ease;
}
.btn-areas-hero:hover { background: var(--n-action-dark, #2a6a2e); }

.areas-ned-panel {
  background: transparent;
  border: 0;
  padding: 20px 10px;
}
.areas-ned-panel-title {
  color: #fff; font-family: 'Arial Black', Arial, sans-serif;
  font-size: 22px; font-weight: 900; margin-bottom: 22px;
  text-transform: uppercase; text-align: center;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--n-action);
  text-shadow: 0 2px 8px rgba(0,0,0,.7), 0 0 2px rgba(0,0,0,.9);
  letter-spacing: .03em;
}
.areas-ned-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 30px;
  list-style: none; padding: 0; margin: 0;
}
.areas-ned-list li {
  padding: 14px 0 14px 34px; position: relative;
  color: #fff; font-family: 'Arial Black', Arial, sans-serif;
  font-size: 24px; text-transform: uppercase; letter-spacing: .04em;
  text-shadow: 0 2px 8px rgba(0,0,0,.85), 0 0 4px rgba(0,0,0,.9);
}
.areas-ned-list li::before {
  content: "›"; position: absolute; left: 0; top: 8px;
  color: var(--n-action); font-size: 30px; font-weight: 900;
  text-shadow: 0 2px 6px rgba(0,0,0,.7);
}
@media (max-width: 900px) {
  .areas-ned {
    background:
      linear-gradient(180deg, rgba(30,25,19,.88) 0%, rgba(30,25,19,.75) 100%),
      url('../assets/projects/whitteck-st/photos/full/01.jpg') center center / cover no-repeat;
  }
  .areas-ned .wrap { grid-template-columns: 1fr; gap: 30px; }
}

/* --- (legacy areas-box, kept for other pages) --- */
.areas-box {
  background: var(--n-dark-2, #1e1913); color: #fff;
  border: 3px solid var(--n-action);
  padding: 40px 50px 40px; border-radius: 4px;
  display: grid; grid-template-columns: 1fr 1.2fr;
  grid-template-areas:
    "header header"
    "photo  content"
    "cta    cta";
  gap: 30px 50px;
  align-items: center; margin: 40px 0 90px;
}
.areas-header {
  grid-area: header;
  text-align: center;
}
.areas-header h3 {
  color: #fff; font-family: 'Arial Black', Arial, sans-serif;
  font-size: clamp(22px, 2.4vw, 30px); font-weight: 900;
  line-height: 1.15; text-transform: uppercase; letter-spacing: .01em;
  margin: 0 0 10px;
}
.areas-header h3 em {
  color: var(--n-action); font-style: normal;
}
.areas-header .areas-sub {
  color: #cfd3d0; font-family: Arial, sans-serif;
  font-size: 15px; margin: 0;
}
.areas-box .areas-photo {
  grid-area: photo;
  border-radius: 6px; overflow: hidden;
  min-height: 360px;
  display: flex; align-items: center; justify-content: center;
}
.areas-box .areas-photo img {
  max-width: 100%; max-height: 400px;
  width: auto; height: auto;
  display: block;
  object-fit: contain;
}
.areas-box .areas-content {
  grid-area: content;
  display: flex; flex-direction: column; justify-content: center;
}
.areas-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 32px;
  list-style: none; padding: 0; margin: 0;
}
.areas-list li {
  padding: 10px 0 10px 28px; position: relative;
  color: #fff; font-family: 'Arial Black', Arial, sans-serif;
  font-size: 17px; text-transform: uppercase; letter-spacing: .04em;
}
.areas-list li::before {
  content: "›"; position: absolute; left: 0; top: 4px;
  color: #fff; font-size: 24px; font-weight: 900;
}
.areas-cta-wrap {
  grid-area: cta; text-align: center; margin-top: 10px;
}
.areas-box .btn-areas {
  background: var(--n-action); color: #fff; border: 0;
  padding: 14px 34px; border-radius: 4px;
  font-family: 'Arial Black', Arial, sans-serif; font-size: 14px;
  letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; display: inline-block; margin-top: 0;
  transition: background .15s ease;
  width: 100%; max-width: 600px;
  box-sizing: border-box;
}
.areas-box .btn-areas:hover { background: var(--n-action-dark, #2a6a2e); }

/* --- About Company box --- */
.about-ned {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 30px;
  margin: 40px 0 90px; align-items: stretch;
}
.about-ned .about-photo {
  border-radius: 8px; overflow: hidden;
}
.about-ned .about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-ned .about-content {
  background: var(--n-dark); color: #fff;
  padding: 40px 34px; border-radius: 8px;
}
.about-ned .about-content p { color: #fff; font-size: 14.5px; margin-bottom: 14px; line-height: 1.6; }

/* --- FAQ two-column --- */
.faq-ned {
  background: var(--n-gray);
  padding: 60px 40px; border-radius: 8px 8px 0 0;
  margin: 90px 0 0;
}
.faq-ned h2 {
  text-align: center; font-family: 'Arial Black', Arial, sans-serif;
  font-size: clamp(24px, 3vw, 34px); color: var(--brown-dark);
  text-transform: uppercase; margin-bottom: 34px; letter-spacing: -.01em;
}
.faq-ned-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.faq-ned-item {
  background: #fff; border: 2px solid var(--n-action);
  border-radius: 4px;
}
.faq-ned-item summary {
  list-style: none; cursor: pointer;
  padding: 14px 18px; display: flex; align-items: center; gap: 12px;
  font-family: Arial, sans-serif; font-weight: 700; font-size: 14px;
  color: var(--brown-dark);
}
.faq-ned-item summary::-webkit-details-marker { display: none; }
.faq-ned-item summary::before {
  content: "+"; color: #fff; background: var(--n-action);
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 16px; flex: none; line-height: 1;
}
.faq-ned-item[open] summary::before { content: "−"; }
.faq-ned-item .faq-body { padding: 0 18px 16px 52px; color: var(--brown-dark); font-size: 14px; }

/* --- More questions bar --- */
.more-q-bar {
  background: var(--n-dark); padding: 22px;
  border-radius: 0 0 8px 8px; margin: 0 0 90px;
  display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap;
}
.more-q-bar p {
  color: #fff; font-family: 'Arial Black', Arial, sans-serif;
  font-size: 18px; margin: 0; letter-spacing: .04em; text-transform: uppercase;
}
.more-q-bar .btn-callus {
  background: var(--n-action); color: #fff;
  padding: 12px 22px; border-radius: 4px;
  font-family: 'Arial Black', Arial, sans-serif; font-size: 15px;
  text-decoration: none; display: flex; align-items: center; gap: 8px;
}

/* --- Reviews strip --- */
.reviews-band-ned {
  padding: 60px 0;
}
.reviews-header-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 30px; background: var(--n-gray-2); border-radius: 8px;
  margin-bottom: 24px; flex-wrap: wrap;
}
.grev-title-block {
  display: flex; align-items: center; gap: 14px;
}
.grev-title-block .grev-logo {
  font-family: Arial, sans-serif; font-weight: 700; font-size: 20px;
  letter-spacing: -.02em;
}
.grev-title-block .grev-logo span:nth-child(1) { color: #4285f4; }
.grev-title-block .grev-logo span:nth-child(2) { color: #ea4335; }
.grev-title-block .grev-logo span:nth-child(3) { color: #fbbc04; }
.grev-title-block .grev-logo span:nth-child(4) { color: #4285f4; }
.grev-title-block .grev-logo span:nth-child(5) { color: #34a853; }
.grev-title-block .grev-logo span:nth-child(6) { color: #ea4335; }
.grev-title-block .grev-word {
  font-family: Arial, sans-serif; font-weight: 700; font-size: 20px;
  color: var(--brown-dark);
}
.grev-rating {
  display: flex; align-items: center; gap: 10px;
}
.grev-rating .num {
  font-family: 'Arial Black', Arial, sans-serif; font-size: 26px; color: var(--brown-dark);
}
.grev-rating .stars { color: #fbbc04; letter-spacing: 2px; font-size: 20px; }
.grev-rating .count { color: var(--muted); font-size: 13px; }
.btn-google {
  border: 2px solid var(--n-action); color: var(--n-action);
  padding: 8px 20px; border-radius: 20px;
  font-family: Arial, sans-serif; font-weight: 700; font-size: 12px;
  text-decoration: none;
}
.reviews-grid-ned {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.review-card-ned {
  background: var(--n-gray-2); padding: 22px 20px;
  border-radius: 8px;
}
.review-card-ned .stars {
  color: #fbbc04; margin-bottom: 12px; letter-spacing: 2px; font-size: 15px; text-align: center;
}
.review-card-ned blockquote {
  font-size: 13.5px; color: var(--brown-dark);
  margin: 0 0 16px 0; padding: 0; font-style: normal;
  line-height: 1.55; text-align: center;
}
.review-card-ned .reviewer {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.review-card-ned .reviewer .avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, #4285f4, #34a853);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 16px; font-family: Arial, sans-serif;
}
.review-card-ned .reviewer .name {
  font-family: Arial, sans-serif; font-weight: 700; font-size: 12.5px;
  color: var(--brown-dark); text-align: center;
}
.review-card-ned .reviewer .when { font-size: 11px; color: var(--muted); text-align: center; }

/* --- Big CTA zip band (before footer) --- */
.zip-cta-band {
  background: var(--n-dark); padding: 40px 20px;
  margin-top: 40px;
}
.zip-cta-band .wrap {
  display: flex; align-items: center; justify-content: center; gap: 30px; flex-wrap: wrap;
}
.zip-cta-band h2 {
  color: #fff; font-family: 'Arial Black', Arial, sans-serif;
  font-size: clamp(18px, 2.4vw, 28px); margin: 0;
  text-transform: uppercase; letter-spacing: .01em;
}
.zip-cta-band h2 em {
  color: var(--n-action); font-style: normal;
}
.zip-cta-band form {
  display: flex; gap: 6px;
}
.zip-cta-band input {
  padding: 14px 18px; border: 0; border-radius: 4px;
  font-size: 15px; font-weight: 700; min-width: 180px; font-family: Arial, sans-serif;
}
.zip-cta-band button {
  background: var(--n-action); color: #fff; border: 0;
  padding: 14px 26px; border-radius: 4px;
  font-family: 'Arial Black', Arial, sans-serif; font-size: 13px;
  font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer;
}

/* --- Zigzag transition --- */
.zigzag-transition {
  background: var(--n-action);
  height: 24px;
  clip-path: polygon(0 0, 100% 0, 100% 100%,
    97% 0, 94% 100%, 91% 0, 88% 100%, 85% 0, 82% 100%, 79% 0, 76% 100%,
    73% 0, 70% 100%, 67% 0, 64% 100%, 61% 0, 58% 100%, 55% 0, 52% 100%,
    49% 0, 46% 100%, 43% 0, 40% 100%, 37% 0, 34% 100%, 31% 0, 28% 100%,
    25% 0, 22% 100%, 19% 0, 16% 100%, 13% 0, 10% 100%, 7% 0, 4% 100%, 1% 0, 0 100%);
}

/* --- Green footer (replaces Ned orange) --- */
.footer-ned {
  background: var(--n-action); color: #fff;
  padding: 60px 0 40px;
}
.footer-ned .footer-cols {
  display: grid; grid-template-columns: 1fr 1.2fr 1.2fr 1fr;
  gap: 40px;
}
.footer-ned h5 {
  font-family: 'Arial Black', Arial, sans-serif; font-size: 14px;
  color: #fff; text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 8px;
  margin-bottom: 14px; letter-spacing: .06em;
}
.footer-ned a, .footer-ned p {
  color: #fff; font-family: Arial, sans-serif; font-size: 13.5px;
  text-decoration: none; display: block; margin-bottom: 8px;
  line-height: 1.5;
}
.footer-ned a:hover { text-decoration: underline; }
.footer-ned .list-plus a { padding-left: 22px; position: relative; }
.footer-ned .list-plus a::before {
  content: "+"; position: absolute; left: 0;
  color: #fff; font-weight: 900; font-size: 14px;
}
.footer-ned .footer-brand-col img {
  height: 60px; background: #fff; border-radius: 6px;
  padding: 8px 12px; margin-bottom: 16px;
}
.footer-ned .footer-brand-col p { font-size: 13px; }
.footer-ned .footer-brand-col .footer-tagline { white-space: nowrap; font-size: 12.5px; }
.footer-ned .footer-brand-col .footer-tagline strong { white-space: normal; font-size: 13px; }
.footer-ned .footer-ig {
  display: inline-flex; align-items: center; gap: 10px;
  color: #fff; text-decoration: none;
  margin-top: 8px;
  font-family: 'Arial Black', Arial, sans-serif;
  font-size: 13px; letter-spacing: .02em;
}
.footer-ned .footer-ig:hover { opacity: .85; }
.footer-ned .footer-ig svg { flex: none; }
.footer-ned .footer-copyright {
  padding-top: 30px; border-top: 1px solid rgba(255,255,255,.2);
  margin-top: 30px; font-size: 12px;
}

/* --- Responsive --- */
@media (max-width: 980px) {
  .services-tiles-grid { grid-template-columns: repeat(2, 1fr); }
  .divisions-row, .video-row, .quality-box, .areas-box, .about-ned,
  .faq-ned-grid, .reviews-grid-ned, .pillars-3 {
    grid-template-columns: 1fr;
  }
  .footer-ned .footer-cols { grid-template-columns: 1fr 1fr; }
  .hero-ned { min-height: 420px; padding: 50px 0 60px; }
  .tb-services-list { display: none; }
  .header-ned .nav-ned { display: none; }
  .header-ned .menu-toggle-ned { display: block; }
  .header-ned .acct { display: none; }
  .header-ned .nav-ned.open {
    display: flex; flex-direction: column; position: absolute;
    top: 100%; left: 0; right: 0; background: var(--n-action);
    padding: 20px; z-index: 100; gap: 6px;
  }
  .header-ned { position: relative; }
}
@media (max-width: 640px) {
  .services-tiles-grid { grid-template-columns: 1fr; }
  .reviews-grid-ned { grid-template-columns: 1fr; }
  .footer-ned .footer-cols { grid-template-columns: 1fr; }
  .trust-ned .badges { gap: 16px; }
}

/* ===================================================================
   BOOK CTA + HEADER HOURS (legacy — kept for other pages)
   =================================================================== */
.btn-book {
  background: var(--gold);
  color: var(--brown-dark);
  font-weight: 800;
  letter-spacing: .03em;
  box-shadow: 0 6px 18px rgba(199,154,62,.35);
}
.btn-book:hover { background: #b7892f; color: #fff; }
.header-hours {
  font-family: Arial, sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .04em; color: var(--muted); line-height: 1.35;
  text-align: right; margin-right: 10px; white-space: nowrap;
}
.header-hours strong { color: var(--green-dark); display: block; font-size: 13px; }

/* ===================================================================
   SERVICE CARDS (9-services grid)
   =================================================================== */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.service-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px 26px;
  text-decoration: none; color: inherit; display: block;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative; overflow: hidden;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(42,36,31,.15);
  border-color: var(--green);
}
.service-card::after {
  content: "→"; position: absolute; bottom: 22px; right: 24px;
  color: var(--green); font-size: 20px; font-weight: 700;
  opacity: 0; transition: opacity .18s ease, transform .18s ease;
}
.service-card:hover::after { opacity: 1; transform: translateX(4px); }
.service-card .svc-ico {
  width: 58px; height: 58px; border-radius: 14px;
  background: linear-gradient(150deg, var(--green), var(--olive));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px; color: #fff;
}
.service-card .svc-ico svg { width: 32px; height: 32px; }
.service-card h3 { font-size: 18px; margin-bottom: 8px; color: var(--brown-dark); }
.service-card p { font-size: 14.5px; color: var(--muted); }

/* ---------- Reviews strip ---------- */
.reviews {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.review {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 24px;
  box-shadow: var(--shadow-sm);
}
.review .stars { color: var(--gold); font-size: 18px; letter-spacing: 2px; margin-bottom: 12px; }
.review blockquote { font-size: 15px; color: var(--brown-dark); font-style: italic; line-height: 1.55; margin-bottom: 14px; }
.review cite { font-family: Arial, sans-serif; font-size: 13px; font-weight: 700; color: var(--muted); font-style: normal; }

/* ---------- Book CTA banner ---------- */
.book-band {
  background: linear-gradient(90deg, var(--gold) 0%, #b7892f 100%);
  color: var(--brown-dark);
  padding: 60px 0;
  text-align: center;
}
.book-band h2 { color: var(--brown-dark); font-size: clamp(18px, 2.2vw, 28px); margin-bottom: 14px; white-space: nowrap; }
@media (max-width: 700px) { .book-band h2 { white-space: normal; font-size: 22px; } }
.book-band p { color: rgba(58,50,43,.85); font-size: 17px; max-width: 640px; margin: 0 auto 26px; }

/* ---------- Trust badges strip ---------- */
.trust-strip {
  display: flex; justify-content: center; gap: 40px; flex-wrap: wrap;
  padding: 30px 0; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); background: var(--cream);
}
.trust-item {
  display: flex; align-items: center; gap: 10px;
  font-family: Arial, sans-serif; font-size: 13.5px; font-weight: 700;
  letter-spacing: .04em; color: var(--brown-dark); text-transform: uppercase;
}
.trust-item svg { width: 22px; height: 22px; color: var(--green); flex: none; }

@media (max-width: 980px) {
  .service-grid, .reviews { grid-template-columns: repeat(2, 1fr); }
  .header-hours { display: none; }
}
@media (max-width: 720px) {
  .service-grid, .reviews { grid-template-columns: 1fr; }
  .trust-strip { gap: 20px; padding: 22px 12px; }
}

/* ===================================================================
   COMPARISON TABLE (Cash Offers page)
   =================================================================== */
.compare-wrap { overflow-x: auto; border-radius: var(--radius); }
.compare {
  width: 100%; border-collapse: collapse;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); min-width: 620px;
}
.compare th, .compare td {
  padding: 16px 18px; text-align: left;
  border-bottom: 1px solid var(--line); font-size: 14.5px;
  vertical-align: top;
}
.compare th {
  font-family: Georgia, serif; font-weight: 700;
  background: var(--cream); color: var(--brown-dark); font-size: 15px;
}
.compare th.col-cash { background: var(--green); color: #fff; }
.compare td:first-child, .compare th:first-child {
  font-family: Arial, sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  width: 26%; background: #fafaf6;
}
.compare th:first-child { color: var(--brown-dark); font-family: Georgia, serif;
  font-size: 14px; letter-spacing: 0; text-transform: none; }
.compare tr:last-child td { border-bottom: 0; }
.compare .yes { color: var(--green-dark); font-weight: 700; }
.compare .no { color: var(--brown); }

/* ===================================================================
   PROJECT GALLERY — FEATURED STAGE + FILMSTRIP
   =================================================================== */
.gallery { margin-top: 4px; }
.stage {
  position: relative; background: #14120f;
  border-radius: 12px; overflow: hidden; aspect-ratio: 3 / 2;
}
.stage-img {
  width: 100%; height: 100%; object-fit: contain;
  display: block; cursor: zoom-in;
}
.stage-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.86); border: 0; cursor: pointer;
  font-size: 22px; color: var(--brown-dark);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.stage-nav:hover { background: #fff; }
.stage-nav.prev { left: 14px; }
.stage-nav.next { right: 14px; }
.stage-badge {
  position: absolute; top: 14px; left: 14px;
  font-family: Arial, sans-serif; font-weight: 700; font-size: 11px;
  letter-spacing: .11em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px; color: #fff;
}
.stage-badge.before { background: var(--brown); }
.stage-badge.after  { background: var(--green); }
.stage-count {
  position: absolute; bottom: 14px; right: 14px;
  background: rgba(0,0,0,.55); color: #fff;
  font-family: Arial, sans-serif; font-size: 12px;
  padding: 5px 12px; border-radius: 999px;
}
.strip-label {
  font-family: Arial, sans-serif; font-weight: 700; font-size: 11px;
  letter-spacing: .11em; text-transform: uppercase; color: var(--muted);
  margin: 18px 0 8px;
}
.filmstrip {
  display: flex; gap: 8px; overflow-x: auto;
  padding-bottom: 8px; scroll-behavior: smooth;
}
.filmstrip::-webkit-scrollbar { height: 8px; }
.filmstrip::-webkit-scrollbar-track { background: var(--cream); border-radius: 4px; }
.filmstrip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.film {
  flex: 0 0 auto; width: 104px; height: 78px;
  border-radius: 7px; overflow: hidden; padding: 0;
  border: 2px solid transparent; cursor: pointer; background: var(--panel);
}
.film img { width: 100%; height: 100%; object-fit: cover; display: block; }
.film.active { border-color: var(--green); }
.film:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
@media (max-width: 720px) {
  .film { width: 84px; height: 63px; }
  .stage-nav { width: 38px; height: 38px; font-size: 19px; }
}

/* ===================================================================
   INSTAGRAM FEED SECTION
   =================================================================== */
.ig-ico { width: 17px; height: 17px; vertical-align: -3px; margin-right: 8px; }
.ig-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 26px;
}
.ig-id { display: flex; align-items: center; gap: 14px; }
.ig-logo { width: 46px; height: 46px; color: var(--green-dark); flex: none; }
.ig-id strong {
  display: block; font-family: Georgia, serif; font-size: 22px;
  color: var(--brown-dark);
}
.ig-id span {
  font-family: Arial, sans-serif; font-size: 14px; color: var(--muted);
}
.ig-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ig-tile {
  position: relative; aspect-ratio: 1 / 1;
  border-radius: 10px; overflow: hidden; display: block;
}
.ig-tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .45s ease;
}
.ig-tile:hover img { transform: scale(1.08); }
.ig-overlay {
  position: absolute; inset: 0; background: rgba(20,73,30,.55);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .25s ease;
}
.ig-tile:hover .ig-overlay { opacity: 1; }
.ig-overlay svg { width: 34px; height: 34px; color: #fff; }
@media (max-width: 720px) {
  .ig-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 980px) {
  .split, .contact-grid { grid-template-columns: 1fr; gap: 34px; }
  .split.reverse .split-media { order: 0; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .eco-grid { grid-template-columns: repeat(3, 1fr); }
  .statband { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .header-cta .header-phone, .header-cta .btn { display: none; }
  .menu-toggle { display: block; }
  .main-nav {
    display: none; position: absolute; top: 76px; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: 10px 26px 20px;
  }
  .main-nav.open { display: flex; }
  .main-nav a.navlink { width: 100%; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .grid-2, .grid-3, .grid-4, .steps, .eco-grid,
  .portfolio-grid, .ba-grid, .gallery-grid { grid-template-columns: 1fr; }
  .statband { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  section { padding: 60px 0; }
  .hero { padding: 70px 0 76px; }
}