/* ============================================================
   FREEDOM HOME IMPROVEMENTS — SITE DESIGN SYSTEM
   Built on the calculator's existing brand tokens so the whole
   site + calculator feel like one product.
   ============================================================ */

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

:root {
  /* Brand — pulled directly from the calculator + logo */
  --brand-dark: #1a1a1a;
  --brand-rust: #6a3f31;
  --brand-rust-light: #8a5242;
  --brand-rust-bg: #f7f0ed;
  --brand-gold: #b07d4a;
  --brand-green: #2d6a4f;

  --white: #ffffff;
  --off-white: #faf8f6;
  --paper: #f3ede9;
  --border: #e0d8d3;
  --border-dark: #c8bdb6;

  --text-primary: #1a1a1a;
  --text-secondary: #5a4a42;
  --text-muted: #8a7a72;
  --text-on-dark: #e8e0db;
  --text-on-dark-muted: #a08880;

  --radius: 12px;
  --radius-sm: 7px;
  --radius-lg: 18px;

  --shadow-sm: 0 2px 10px rgba(106,63,49,0.08);
  --shadow-md: 0 8px 30px rgba(26,26,26,0.10);
  --shadow-lg: 0 20px 50px rgba(26,26,26,0.16);

  --maxw: 1140px;
  --gutter: 22px;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--off-white);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }

/* ---------- Layout helpers ---------- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 80px 0; }
.section-sm { padding: 52px 0; }
.section-dark { background: var(--brand-dark); color: var(--text-on-dark); }
.section-solution {
  position: relative; overflow: hidden;
}
.section-solution::after {
  content: ''; position: absolute; inset: 0;
  background: url('projects/stlouis-cedartone-3.jpg') center 45% / cover no-repeat;
  opacity: 0.70;
  filter: saturate(0.95) brightness(0.95);
}
.section-solution::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(20,20,20,0.85) 0%, rgba(20,20,20,0.65) 45%, rgba(20,20,20,0.30) 70%, rgba(20,20,20,0.15) 100%),
    linear-gradient(180deg, rgba(20,20,20,0.15) 0%, rgba(20,20,20,0.30) 100%);
}
.section-solution > .container { position: relative; z-index: 2; }
.section-solution > .container > .grid > .reveal > h2,
.section-solution > .container > .grid > .reveal > .lead {
  text-shadow: 0 2px 12px rgba(0,0,0,0.6), 0 1px 4px rgba(0,0,0,0.45);
}
@media (max-width: 768px) {
  /* Stronger mobile overlay for the "burned before" paragraph readability */
  .section-solution::before {
    background:
      linear-gradient(180deg, rgba(20,20,20,0.78) 0%, rgba(20,20,20,0.62) 40%, rgba(20,20,20,0.55) 70%, rgba(20,20,20,0.78) 100%);
  }
  .section-solution::after {
    background-position: center 40%;
    opacity: 0.60;
  }
}
.section-rust { background: var(--brand-rust-bg); }
.section-paper { background: var(--paper); }
@media (max-width: 720px) { .section { padding: 56px 0; } }

.eyebrow {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--brand-rust);
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px;
}
.eyebrow::before {
  content: ''; width: 26px; height: 2px; background: var(--brand-rust);
}
.section-dark .eyebrow { color: var(--brand-gold); }
.section-dark .eyebrow::before { background: var(--brand-gold); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.18; }
.h-xl  { font-size: clamp(2.1rem, 5.4vw, 3.5rem); }
.h-lg  { font-size: clamp(1.7rem, 4vw, 2.6rem); }
.h-md  { font-size: clamp(1.3rem, 3vw, 1.7rem); }
.lead  { font-size: clamp(1rem, 2.2vw, 1.18rem); color: var(--text-secondary); }
.section-dark .lead { color: var(--text-on-dark-muted); }

.center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.maxw-720 { max-width: 720px; }
.maxw-620 { max-width: 620px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body); font-weight: 700; font-size: 0.98rem;
  padding: 15px 28px; border-radius: var(--radius-sm); border: 2px solid transparent;
  cursor: pointer; text-decoration: none; transition: all 0.2s ease;
  line-height: 1; text-align: center;
}
.btn-primary { background: var(--brand-rust); color: var(--white); }
.btn-primary:hover { background: var(--brand-rust-light); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-dark { background: var(--brand-dark); color: var(--white); }
.btn-dark:hover { background: #000; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--brand-rust); border-color: var(--border-dark); }
.btn-ghost:hover { border-color: var(--brand-rust); background: var(--brand-rust-bg); }
.btn-ghost-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.4); }
.btn-ghost-light:hover { border-color: var(--white); background: rgba(255,255,255,0.08); }
.btn-lg { padding: 17px 34px; font-size: 1.04rem; }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: 13px; flex-wrap: wrap; }
@media (max-width: 540px) {
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; }
}

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(250,248,246,0.97);
  border-bottom: 1px solid var(--border);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 84px; gap: 20px;
}
/* Logo sits centered in the space between the header's left edge and the nav.
   A small left pad + right auto-margin balances it without crowding the links. */
.nav-logo { display: flex; align-items: center; padding-left: 8px; margin-right: auto; }
.nav-logo svg, .nav-logo img { height: 64px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 18px; list-style: none; margin: 0 auto; }
/* Nudge the CTA cluster toward the right edge for balanced spacing */
.nav-links a {
  text-decoration: none; font-size: 0.86rem; font-weight: 600; white-space: nowrap;
  color: var(--text-secondary); transition: color 0.18s; padding: 6px 0;
  position: relative;
}
.nav-links a:hover { color: var(--brand-rust); }
.nav-links a.active { color: var(--brand-rust); }
.nav-links a.active::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: var(--brand-rust);
}
.nav-cta { display: flex; align-items: center; gap: 22px; margin-left: 28px; }
.nav-phone {
  text-decoration: none; font-weight: 700; font-size: 0.92rem;
  color: var(--brand-dark); white-space: nowrap;
}
.nav-phone span { color: var(--text-muted); font-weight: 500; display: block; font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; }
.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  padding: 8px; flex-direction: column; gap: 5px;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--brand-dark); transition: 0.2s; }

@media (max-width: 940px) {
  .nav-links, .nav-phone { display: none; }
  .nav-toggle { display: flex; }
  .nav { height: 70px; }
  .nav-logo { padding-left: 0; }
  .nav-logo svg, .nav-logo img { height: 50px; }
  .mobile-menu.open { display: block; }
}
.mobile-menu {
  display: none; background: var(--white); border-bottom: 1px solid var(--border);
  padding: 12px var(--gutter) 22px;
}
.mobile-menu ul { list-style: none; }
.mobile-menu a {
  display: block; padding: 13px 4px; text-decoration: none;
  font-weight: 600; color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}
.mobile-menu a:last-of-type { border-bottom: none; }
.mobile-menu .btn { margin-top: 14px; }

/* ---------- Trust bar ---------- */
.trustbar { background: var(--brand-dark); color: var(--text-on-dark); }
.trustbar .container {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 38px;
  padding-top: 18px; padding-bottom: 18px;
}
.trust-item {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.85rem; font-weight: 600; color: var(--text-on-dark);
}
.trust-item svg { flex: 0 0 auto; color: var(--brand-gold); }
.trust-divider { width: 1px; background: rgba(255,255,255,0.15); }
@media (max-width: 720px) {
  .trust-divider { display: none; }
  .trustbar .container { gap: 12px 22px; }
  .trust-item { font-size: 0.78rem; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; background: var(--brand-dark); color: var(--white);
  overflow: hidden;
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: url('projects/cottleville-replacement-surface.jpg') center 40% / cover no-repeat;
  opacity: 0.80;
  filter: saturate(0.95) brightness(0.95);
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(20,20,20,0.78) 0%, rgba(20,20,20,0.55) 45%, rgba(20,20,20,0.25) 70%, rgba(20,20,20,0.10) 100%),
    linear-gradient(180deg, rgba(20,20,20,0.20) 0%, rgba(20,20,20,0.45) 100%);
}
/* Mobile hero crop fix: show more of the deck not just the railing */
@media (max-width: 768px) {
  /* Mobile hero: show meaningful deck content, not just trees/railing */
  .hero::after {
    background-position: center 65%;
    opacity: 0.70;
  }
  /* Stronger top-down overlay for text crispness over the lighter image */
  .hero::before {
    background:
      linear-gradient(180deg, rgba(20,20,20,0.72) 0%, rgba(20,20,20,0.58) 40%, rgba(20,20,20,0.50) 70%, rgba(20,20,20,0.78) 100%);
  }
}
/* Text-on-image readability boost */
.hero h1, .hero .hero-sub, .hero .hero-promise, .hero .lead {
  text-shadow: 0 2px 16px rgba(0,0,0,0.6), 0 1px 4px rgba(0,0,0,0.45);
}
.hero-rating { background: rgba(255,255,255,0.08); }
.hero-grid {
  position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: 54px; align-items: center; padding: 86px 0 92px;
}
.hero-rating {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  padding: 8px 15px; border-radius: 30px; margin-bottom: 22px;
}
.hero-stars { color: var(--brand-gold); letter-spacing: 2px; font-size: 0.9rem; }
.hero-rating span { font-size: 0.8rem; color: var(--text-on-dark); font-weight: 600; }
.hero h1 { color: var(--white); margin-bottom: 20px; }
.hero h1 .accent { color: var(--brand-gold); }
.hero-sub {
  font-size: 1.1rem; color: var(--text-on-dark); margin-bottom: 16px;
  max-width: 540px;
}
.hero-promise {
  font-size: 0.92rem; color: var(--text-on-dark-muted); margin-bottom: 30px;
  max-width: 520px;
}
.hero-checks { list-style: none; margin: 0 0 32px; display: grid; gap: 11px; }
.hero-checks li { display: flex; align-items: flex-start; gap: 11px; font-size: 0.95rem; color: var(--text-on-dark); }
.hero-checks svg { flex: 0 0 auto; color: var(--brand-gold); margin-top: 3px; }

.hero-card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 30px 28px; box-shadow: var(--shadow-lg); color: var(--text-primary);
  border-top: 5px solid var(--brand-rust);
}
.hero-card .kicker {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--brand-rust); margin-bottom: 8px;
}
.hero-card h3 { font-size: 1.5rem; margin-bottom: 8px; }
.hero-card p { font-size: 0.92rem; color: var(--text-secondary); margin-bottom: 20px; }
.hero-card .mini-steps { list-style: none; margin-bottom: 22px; display: grid; gap: 10px; }
.hero-card .mini-steps li {
  display: flex; align-items: center; gap: 12px;
  font-size: 0.9rem; font-weight: 600; color: var(--text-secondary);
}
.hero-card .mini-num {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  background: var(--brand-rust-bg); color: var(--brand-rust);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 800;
}
.hero-card .fineprint { font-size: 0.76rem; color: var(--text-muted); margin: 12px 0 0; text-align: center; }
.hero-card-talk { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.hero-card-talk-label {
  display: block; text-align: center; font-size: 0.78rem; font-weight: 600;
  color: var(--text-muted); margin-bottom: 10px;
}
.hero-card-talk-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn-talk {
  font-size: 0.82rem; padding: 10px 8px; gap: 6px;
  display: inline-flex; align-items: center; justify-content: center;
}
@media (max-width: 380px) {
  .hero-card-talk-btns { grid-template-columns: 1fr; }
}

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: 38px; padding: 56px 0 64px; }
  .hero-sub, .hero-promise, .hero-checks { max-width: 100%; }
}

/* ---------- Generic section header ---------- */
.sec-head { margin-bottom: 44px; }
.sec-head.center { margin-left: auto; margin-right: auto; }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card-box {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px 24px;
  box-shadow: var(--shadow-sm); transition: transform 0.2s, box-shadow 0.2s;
}
.card-box.hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card-icon {
  width: 50px; height: 50px; border-radius: 12px;
  background: var(--brand-rust-bg); color: var(--brand-rust);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.card-box h3 { font-size: 1.16rem; margin-bottom: 9px; }
.card-box p { font-size: 0.92rem; color: var(--text-secondary); }
.card-box .card-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 15px;
  font-size: 0.86rem; font-weight: 700; color: var(--brand-rust);
  text-decoration: none;
}
.card-box .card-link:hover { gap: 10px; }

/* ---------- Problem / fear list ---------- */
.fear-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
@media (max-width: 640px) { .fear-grid { grid-template-columns: 1fr; } }
.fear-item {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--white); border: 1px solid var(--border);
  border-left: 3px solid #c0392b; border-radius: var(--radius-sm);
  padding: 16px 18px;
}
.fear-item .fx { color: #c0392b; flex: 0 0 auto; margin-top: 2px; font-weight: 800; }
.fear-item p { font-size: 0.9rem; color: var(--text-secondary); }
.fear-item strong { color: var(--text-primary); display: block; margin-bottom: 2px; font-size: 0.95rem; }

.solve-item {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--white); border: 1px solid var(--border);
  border-left: 3px solid var(--brand-green); border-radius: var(--radius-sm);
  padding: 16px 18px;
}
.solve-item .sx { color: var(--brand-green); flex: 0 0 auto; margin-top: 2px; }
.solve-item p { font-size: 0.9rem; color: var(--text-secondary); }
.solve-item strong { color: var(--text-primary); display: block; margin-bottom: 2px; font-size: 0.95rem; }

/* ---------- Guarantee band ---------- */
.guarantee {
  display: grid; grid-template-columns: 150px 1fr; gap: 32px; align-items: center;
}
.guarantee-seal {
  width: 150px; height: 150px; border-radius: 50%;
  background: var(--brand-rust); color: var(--white);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 14px; border: 4px solid var(--brand-gold);
}
.guarantee-seal .big { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
.guarantee-seal .sm { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 6px; color: #e8c97e; }
@media (max-width: 640px) {
  .guarantee { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}

/* ---------- Process steps ---------- */
.process-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; }
@media (max-width: 820px) { .process-grid { grid-template-columns: repeat(2,1fr); gap: 30px 22px; } }
@media (max-width: 460px) { .process-grid { grid-template-columns: 1fr; } }
.process-step { padding: 0 22px; position: relative; }
.process-step:not(:last-child)::after {
  content: ''; position: absolute; top: 22px; right: -2px;
  width: 4px; bottom: auto; height: calc(100% - 60px);
}
.process-num {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--brand-dark); color: var(--brand-gold);
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.process-step h3 { font-size: 1.1rem; margin-bottom: 8px; }
.process-step p { font-size: 0.88rem; color: var(--text-secondary); }
.process-label {
  display: inline-block; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--brand-gold); margin-bottom: 4px;
}
/* On the dark process section, lift paragraph + heading contrast for readability */
.section-dark .process-step p { color: rgba(255,255,255,0.82); }
.section-dark .process-step h3 { color: #ffffff; }
/* Inside the dark process section the number badge needs a lighter ring to read */
.section-dark .process-num {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(176,125,74,0.55);
}

/* ---------- Reviews ---------- */
.review-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px 22px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.review-stars { color: var(--brand-gold); letter-spacing: 2px; margin-bottom: 12px; font-size: 0.95rem; }
.review-card blockquote { font-size: 0.95rem; color: var(--text-secondary); margin-bottom: 16px; flex: 1; }
.review-author { display: flex; align-items: center; gap: 11px; }
.review-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  background: var(--brand-rust); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.95rem;
}
.review-author .name { font-weight: 700; font-size: 0.88rem; }
.review-author .meta { font-size: 0.76rem; color: var(--text-muted); }

/* ---------- Gallery ---------- */
.gallery-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  align-items: stretch;
}
@media (max-width: 960px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .gallery-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 580px) { .gallery-grid { grid-template-columns: 1fr; } }
.project-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex; flex-direction: column; height: 100%;
}
.project-card.hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.project-photo {
  aspect-ratio: 4 / 3; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #2b2b2b, #4a3a33);
  display: flex; align-items: center; justify-content: center;
}
.project-photo img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.project-photo .ph-label {
  color: rgba(255,255,255,0.5); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.05em; text-align: center; padding: 18px;
}
.project-photo .ph-tag {
  position: absolute; top: 12px; left: 12px;
  background: var(--brand-rust); color: #fff; font-size: 0.68rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 5px 10px; border-radius: 20px;
}
.project-body {
  padding: 18px 18px 20px;
  display: flex; flex-direction: column;
  flex-grow: 1;
}
.project-body .project-specs { margin-top: 0; }
.project-body h3 { font-size: 1.05rem; margin-bottom: 6px; }
.project-body .loc { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 12px; }
.project-specs { list-style: none; display: grid; gap: 6px; margin-bottom: 12px; }
.project-specs li { font-size: 0.82rem; color: var(--text-secondary); display: flex; justify-content: space-between; gap: 12px; }
.project-specs li span:first-child { color: var(--text-muted); }
.project-specs li span:last-child { font-weight: 600; text-align: right; }
.project-range {
  font-size: 0.86rem; font-weight: 700; color: var(--brand-rust);
  padding-top: 10px; border-top: 1px solid var(--border);
}

/* ---------- FAQ ---------- */
.faq-list { display: grid; gap: 0; max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 22px 44px 22px 4px; font-family: var(--font-body);
  font-size: 1.02rem; font-weight: 700; color: var(--text-primary);
  position: relative; line-height: 1.4;
}
.faq-q::after {
  content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--brand-rust); transition: transform 0.2s;
}
.faq-item.open .faq-q::after { content: '\2013'; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.28s ease; }
.faq-item.open .faq-a { max-height: 480px; }
.faq-a-inner { padding: 0 44px 24px 4px; font-size: 0.94rem; color: var(--text-secondary); }
.faq-a-inner a:not(.btn) { color: var(--brand-rust); font-weight: 600; }
/* Buttons inside FAQ answers keep their own button text color (was being
   overridden by the rust link color above, making button text invisible) */
.faq-a-inner a.btn { color: var(--white); font-weight: 700; text-decoration: none; }
.faq-a-inner a.btn.btn-rust,
.faq-a-inner a.btn.btn-safety,
.faq-a-inner a.btn.btn-primary { color: var(--white); }
.faq-a-inner a.btn.btn-ghost { color: var(--brand-rust); }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; background: var(--brand-rust); color: var(--white);
  overflow: hidden;
}
.cta-band::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(600px 400px at 85% 20%, rgba(176,125,74,0.35), transparent 65%);
}
.cta-band .container { position: relative; }
.cta-band h2 { color: var(--white); }
.cta-band p { color: rgba(255,255,255,0.85); }

/* ---------- Stat strip ---------- */
.stat-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
@media (max-width: 640px) { .stat-strip { grid-template-columns: repeat(2,1fr); } }
.stat { text-align: center; }
.stat .num { font-family: var(--font-display); font-size: clamp(1.8rem,4vw,2.5rem); font-weight: 700; color: var(--brand-rust); }
.section-dark .stat .num { color: var(--brand-gold); }
.stat .lbl { font-size: 0.82rem; color: var(--text-secondary); margin-top: 4px; }
.section-dark .stat .lbl { color: var(--text-on-dark-muted); }

/* ---------- Footer ---------- */
.site-footer { background: #141414; color: var(--text-on-dark-muted); padding: 56px 0 28px; }
.footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 38px;
  padding-bottom: 38px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-logo svg, .footer-logo img { height: 54px; width: auto; margin-bottom: 16px; }
.footer-about p { font-size: 0.86rem; line-height: 1.7; max-width: 320px; }
.footer-col h4 {
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--white);
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; display: grid; gap: 10px; }
.footer-col a { text-decoration: none; font-size: 0.88rem; color: var(--text-on-dark-muted); transition: color 0.18s; }
.footer-col a:hover { color: var(--brand-gold); }
.footer-contact-line { display: flex; gap: 9px; align-items: flex-start; font-size: 0.88rem; margin-bottom: 12px; }
.footer-contact-line svg { flex: 0 0 auto; color: var(--brand-gold); margin-top: 2px; }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-top: 24px; font-size: 0.78rem; color: #6b5e58;
}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 300;
  background: var(--white); border-top: 1px solid var(--border);
  padding: 10px 14px; gap: 10px;
  box-shadow: 0 -6px 20px rgba(0,0,0,0.10);
}
.sticky-cta .btn { flex: 1; padding: 13px 10px; font-size: 0.9rem; }
@media (max-width: 760px) {
  .sticky-cta { display: flex; }
  body { padding-bottom: 70px; }
}

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  background: var(--brand-dark); color: var(--white);
  padding: 64px 0 56px; position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(700px 400px at 80% 30%, rgba(176,125,74,0.18), transparent 60%);
}
.page-hero .container { position: relative; }
.page-hero h1 { color: var(--white); margin-bottom: 14px; }
.page-hero p { color: var(--text-on-dark-muted); max-width: 640px; }
.breadcrumb { font-size: 0.8rem; color: var(--text-on-dark-muted); margin-bottom: 16px; }
.breadcrumb a { color: var(--brand-gold); text-decoration: none; }

/* ---------- Misc utility ---------- */
.divider { border: none; border-top: 1px solid var(--border); margin: 0; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 10px; } .mt-2 { margin-top: 20px; } .mt-3 { margin-top: 32px; }
.mb-2 { margin-bottom: 20px; } .mb-3 { margin-bottom: 32px; }
.text-muted { color: var(--text-muted); }
.checklist { list-style: none; display: grid; gap: 11px; }
.checklist li { display: flex; gap: 11px; align-items: flex-start; font-size: 0.94rem; color: var(--text-secondary); }
.checklist svg { flex: 0 0 auto; color: var(--brand-green); margin-top: 3px; }
.prose p { margin-bottom: 16px; color: var(--text-secondary); font-size: 1rem; }
.prose h2 { margin: 36px 0 14px; }
.prose h3 { margin: 28px 0 10px; font-size: 1.2rem; }
.prose ul { margin: 0 0 16px 4px; list-style: none; display: grid; gap: 9px; }
.prose ul li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-secondary); }
.prose ul li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-rust); margin-top: 9px; flex: 0 0 auto; }

.tag-pill {
  display: inline-block; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 4px 11px; border-radius: 20px;
  background: var(--brand-rust-bg); color: var(--brand-rust); margin-bottom: 14px;
}

/* fade-in on scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- Project Photo Gallery (arrows) ---------- */
.project-photo { position: relative; }
.project-photo .gallery-imgs { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.project-photo .gallery-imgs img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 0.35s ease;
}
.project-photo .gallery-imgs img.active { opacity: 1; }
.gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0,0,0,0.55); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; line-height: 1; opacity: 1; transition: background 0.2s, opacity 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
/* Controls are always visible; a slight darkening on hover for feedback */
.project-photo:hover .gallery-arrow { opacity: 1; }
.gallery-arrow.left { left: 8px; }
.gallery-arrow.right { right: 8px; }
.gallery-arrow:hover { background: rgba(0,0,0,0.78); }
.gallery-dots {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); z-index: 5;
  display: flex; gap: 5px; opacity: 1; transition: opacity 0.2s;
  padding: 4px 7px; border-radius: 10px; background: rgba(0,0,0,0.32);
}
.project-photo:hover .gallery-dots { opacity: 1; }
.gallery-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.55); border: none; padding: 0; cursor: pointer;
}
.gallery-dot.active { background: #fff; }

/* ---------- Review Carousel (rebuilt) ---------- */
.review-carousel { position: relative; padding: 0 60px; }
.review-viewport { overflow: hidden; }
.review-track { display: flex; transition: transform 0.4s ease; }
.review-slide {
  flex: 0 0 33.3333%; padding: 0 12px; box-sizing: border-box;
}
@media (max-width: 980px) { .review-slide { flex: 0 0 50%; } }
@media (max-width: 640px) {
  .review-carousel { padding: 0 8px; }
  .review-slide { flex: 0 0 100%; padding: 0 8px; }
}
.review-slide .review-card {
  background: #fff; padding: 24px 22px; border-radius: var(--radius);
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);
  height: 100%; display: flex; flex-direction: column;
  min-height: 280px;
}
.review-slide .review-stars { color: var(--brand-gold); font-size: 1rem; margin-bottom: 10px; }
.review-slide blockquote {
  font-size: 0.93rem; line-height: 1.55; color: var(--text-secondary);
  margin: 0 0 14px; flex-grow: 1; font-style: normal;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
  overflow: hidden; transition: -webkit-line-clamp 0.3s;
}
.review-slide blockquote.expanded {
  display: block; -webkit-line-clamp: unset; overflow: visible;
}
.review-readmore {
  background: none; border: none; color: var(--brand-rust);
  font-weight: 600; font-size: 0.85rem; cursor: pointer;
  padding: 0; margin: -4px 0 12px; align-self: flex-start;
  text-decoration: underline; text-underline-offset: 2px;
}
.review-readmore:hover { color: var(--brand-rust-light); }
.review-author {
  display: flex; align-items: center; gap: 12px;
  padding-top: 14px; border-top: 1px solid var(--border);
  margin-top: auto;
}
.review-avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--brand-rust);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.85rem; flex-shrink: 0;
}
.review-author .name { font-weight: 700; font-size: 0.92rem; color: var(--text-primary); }
.review-author .meta { font-size: 0.78rem; color: var(--text-muted); }

.rev-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--brand-rust); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; line-height: 1; box-shadow: var(--shadow-sm);
  transition: background 0.2s, transform 0.15s;
}
.rev-arrow:hover { background: var(--brand-rust-light); transform: translateY(-50%) scale(1.05); }
.rev-arrow:disabled { opacity: 0.4; cursor: not-allowed; }
.rev-arrow.prev { left: 0; }
.rev-arrow.next { right: 0; }

/* On mobile, place arrows BELOW the cards for clarity */
@media (max-width: 640px) {
  .review-carousel { padding: 0 4px; padding-bottom: 60px; }
  .rev-arrow {
    top: auto; bottom: 0; transform: none;
    width: 42px; height: 42px;
  }
  .rev-arrow:hover { transform: scale(1.05); }
  .rev-arrow.prev { left: calc(50% - 50px); }
  .rev-arrow.next { right: calc(50% - 50px); }
}

/* ---------- TimberTech PRO Badge under hero card ---------- */
.hero-card-badge {
  display: flex; align-items: center; gap: 12px;
  margin-top: 16px; padding: 14px 16px;
  background: #f5f2ef; border-radius: var(--radius);
  border: 1px solid rgba(106,63,49,0.12);
}
.hero-card-badge img {
  height: 42px; width: auto; object-fit: contain; flex-shrink: 0;
}
.hero-card-badge span {
  font-size: 0.82rem; font-weight: 700; color: var(--text-secondary);
  letter-spacing: 0.01em;
}
@media (max-width: 380px) {
  .hero-card-badge { flex-direction: column; text-align: center; gap: 8px; }
  .hero-card-badge img { height: 36px; }
}

/* ---------- Review Platform Badge Line ---------- */
.review-platforms {
  font-size: 0.82rem; font-weight: 600; color: var(--brand-rust);
  margin-top: 10px; letter-spacing: 0.01em;
}

/* ---------- Mobile hero breathing room (Task 6) ---------- */
@media (max-width: 768px) {
  .hero-grid { padding-left: 8px; padding-right: 8px; }
  .hero h1 { font-size: clamp(1.7rem, 6vw, 2.2rem); }
}
@media (max-width: 480px) {
  .hero-grid { padding-left: 12px; padding-right: 12px; }
}

/* ---------- Reviews stat spacing fix (Task 7) ---------- */
.stat strong {
  display: block; font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.5rem); color: var(--brand-rust);
  line-height: 1.1; margin-bottom: 6px;
}
.stat span { display: block; margin-top: 2px; }

/* ---------- Mobile Quick-Jump CTAs (under hero) ---------- */
.mobile-quickjump { display: none; }
@media (max-width: 768px) {
  .mobile-quickjump {
    display: block; background: var(--brand-dark); padding: 0 0 18px;
    margin-top: -1px;
  }
  .mqj-row {
    display: grid; grid-template-columns: 1fr; gap: 10px;
    padding: 18px 12px 0;
  }
  .mqj-row .btn-ghost {
    background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.25); color: #fff;
  }
  .mqj-row .btn-ghost:hover { background: rgba(255,255,255,0.12); }
}
/* Smooth scroll with sticky header offset */
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (max-width: 940px) { html { scroll-padding-top: 76px; } }

/* ---------- Project Card: Budget Range + CTA ---------- */
.project-budget {
  margin: 10px 0 12px; padding: 10px 12px;
  background: var(--brand-rust-bg); border-left: 3px solid var(--brand-rust);
  border-radius: 4px;
}
.bud-label {
  display: block; font-size: 0.72rem; font-weight: 600;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em;
}
.bud-amt {
  display: block; font-family: var(--font-display); font-size: 1.05rem;
  font-weight: 700; color: var(--brand-rust); margin-top: 2px;
}
.project-cta { margin-top: 4px; font-size: 0.86rem; padding: 10px 14px; }

/* ---------- Link list (service areas) ---------- */
.link-list { list-style: none; padding: 0; margin: 0; }
.link-list li { padding: 8px 0; border-bottom: 1px solid var(--border); }
.link-list li:last-child { border-bottom: none; }
.link-list li a {
  color: var(--text-primary); text-decoration: none; font-weight: 500;
  display: block; transition: color 0.2s;
}
.link-list li a:hover { color: var(--brand-rust); }
.link-list.grid { display: grid; }


.section-solution h2,
.section-solution .lead,
.section-solution > .container > .grid > .reveal > .eyebrow {
  text-shadow: 0 2px 12px rgba(0,0,0,0.6), 0 1px 4px rgba(0,0,0,0.45);
}
/* CRITICAL: Solve-item cards have WHITE backgrounds - NO text-shadow on their text */
.section-solution .solve-item p,
.section-solution .solve-item strong,
.section-solution .solve-item * {
  text-shadow: none !important;
}

/* Task 2: Mobile-only proof CTAs under hero card */
.hero-mobile-ctas { display: none; margin-top: 14px; }
@media (max-width: 940px) {
  .hero-mobile-ctas { display: block; }
  .hero-mobile-ctas .btn { font-size: 0.92rem; }
}
/* Smooth scroll offset for sticky header */
html { scroll-padding-top: 90px; scroll-behavior: smooth; }
@media (max-width: 940px) { html { scroll-padding-top: 76px; } }


.budget-label {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
}
.budget-value {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 700;
  color: var(--brand-rust);
}
.btn-rust-outline {
  background: transparent; border: 1.5px solid var(--brand-rust);
  color: var(--brand-rust); font-weight: 700;
}
.btn-rust-outline:hover {
  background: var(--brand-rust); color: #fff;
}
.btn-sm { padding: 9px 14px; font-size: 0.86rem; }
.project-cta { margin-top: 4px; }
.project-card .project-body p.budget-note {
  font-size: 0.72rem; color: var(--text-muted); margin: 0;
}

/* Task 4: Four Steps mobile balance - consistent title + paragraph heights */
@media (max-width: 720px) {
  .process-step { padding: 22px 18px; }
  .process-step h3 { min-height: 2.6em; display: flex; align-items: center; justify-content: center; text-align: center; }
  .process-step p { min-height: 5.5em; text-align: center; }
  .process-step .process-label { text-align: center; display: block; }
  .process-num { margin: 0 auto; }
}


/* Task 6: Service area hub page styles */
.area-grid { display: grid; gap: 36px; max-width: 980px; margin: 0 auto; }
.area-region { padding: 20px 24px; background: var(--paper); border-radius: var(--radius); border: 1px solid var(--border); }
.area-region h3 { margin-bottom: 10px; color: var(--brand-rust); }
.area-list { font-size: 0.95rem; line-height: 1.9; color: var(--text-secondary); }
.area-list a { color: var(--brand-rust); font-weight: 600; text-decoration: none; }
.area-list a:hover { text-decoration: underline; }
.area-pending { color: var(--text-muted); }
@media (max-width: 720px) {
  .area-region { padding: 16px 18px; }
  .area-list { line-height: 2.1; }
}

/* Task 1: Mobile hero-promise readability boost */
@media (max-width: 768px) {
  .hero .hero-promise {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.92);
    font-weight: 500;
    text-shadow: 0 2px 14px rgba(0,0,0,0.75), 0 1px 4px rgba(0,0,0,0.6);
  }
  .hero .hero-sub {
    color: rgba(255,255,255,0.94);
  }
}

/* ---------- Accessibility: focus-visible states ---------- */
:focus-visible {
  outline: 3px solid var(--brand-rust);
  outline-offset: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--brand-rust);
  outline-offset: 2px;
}
/* Don't show focus ring for mouse clicks, only keyboard */
:focus:not(:focus-visible) {
  outline: none;
}
/* Skip-to-content link, hidden until focused */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--brand-rust); color: #fff;
  padding: 12px 18px; font-weight: 700;
  z-index: 1000; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ============================================================
   REFINEMENT PASS - Tasks 1-11
   ============================================================ */

/* Task 1: "See Real Projects" CTA under the hero calculator card */
.hero-card-projects { margin-top: 12px; }
.hero-card-projects .btn { font-size: 0.92rem; }

/* Task 2/3: equal-height project cards. Consistent min-heights on the
   title, location, and specs list so the budget block starts at the same
   Y position on every card in a row, regardless of how text wraps. */
.gallery-grid .project-card { display: flex; flex-direction: column; height: 100%; }
.gallery-grid .project-body { display: flex; flex-direction: column; flex-grow: 1; }
.gallery-grid .project-body h3 {
  min-height: 2.6em;          /* absorbs 1-line vs 2-line titles */
  display: flex; align-items: flex-start;
}
.gallery-grid .project-body .loc { min-height: 1.2em; }
.gallery-grid .project-body .project-specs {
  min-height: 3.4em;          /* absorbs short vs wrapped spec values */
  margin-bottom: 14px;
  align-content: start;
}
/* Budget block now sits at a consistent position; auto-margin lives below
   the CTA so cards still stretch to equal height without shifting budget. */
.gallery-grid .project-budget { margin-top: 0; }
.gallery-grid .project-cta { margin: 10px 0 auto; }

/* Task 10: Reviews trust stat strip - center and balance */
.stat-strip {
  max-width: 760px; margin-left: auto; margin-right: auto;
  justify-items: center;
}
.stat-strip .stat { width: 100%; }

/* Trust badges row */
.trust-badges {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 32px;
  margin: 0 auto; max-width: 820px;
}
.trust-badges img {
  height: 84px; width: auto; object-fit: contain;
  opacity: 0.92; transition: opacity 0.2s;
}
.trust-badges img:hover { opacity: 1; }
.trust-badges .badge-wide { height: 64px; }
@media (max-width: 640px) {
  .trust-badges { gap: 22px; }
  .trust-badges img { height: 62px; }
  .trust-badges .badge-wide { height: 46px; }
}

/* Inline contextual CTA block (service pages) */
.inline-cta-block {
  background: var(--white); border: 1px solid var(--border);
  border-left: 3px solid var(--brand-rust);
  border-radius: var(--radius); padding: 22px 24px;
}
.inline-cta-block p { font-size: 0.95rem; color: var(--text-secondary); margin: 0; }
.inline-cta-centered {
  border-left: none; border-top: 3px solid var(--brand-rust);
  text-align: center;
}
.inline-cta-centered .btn-row { justify-content: center; }
.text-link {
  color: var(--brand-rust); font-weight: 600; text-decoration: none;
  font-size: 0.92rem;
}
.text-link:hover { text-decoration: underline; }

/* ============================================================
   DESKTOP REVISION PASS - Tasks 1-10
   ============================================================ */

/* Task 7: Services decision note */
.services-decision-note {
  font-size: 0.86rem; color: var(--text-muted);
}
.services-decision-note a { color: var(--brand-rust); font-weight: 600; }

/* ============================================================
   CTA REVISION PASS - safety buttons + arrow alignment
   ============================================================ */

/* .btn-rust was referenced by every safety CTA but never defined,
   so those CTAs rendered as unstyled text. Define it now to match
   the site's button system (solid rust fill, same hover as btn-primary). */
.btn-rust {
  background: var(--brand-rust);
  color: var(--white);
  border-color: var(--brand-rust);
}
.btn-rust:hover {
  background: var(--brand-rust-light);
  border-color: var(--brand-rust-light);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Safety-check CTA button - solid, professional, matches site buttons.
   Self-contained so the CTA is a real button even if other classes change. */
.btn-safety {
  background: var(--brand-rust);
  color: var(--white);
  border: 2px solid var(--brand-rust);
  cursor: pointer;
}
.btn-safety:hover {
  background: var(--brand-rust-light);
  border-color: var(--brand-rust-light);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Task 3: FAQ CTA - button + supporting text + arrow that points UP at it */
.faq-cta-block {
  display: block; margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--border);
}
.faq-cta-text {
  display: block; font-size: 0.92rem; color: var(--text-secondary);
  margin-bottom: 14px;
}
.faq-cta-action {
  display: flex; align-items: center; gap: 6px;
}
.faq-cta-arrow {
  flex: 0 0 auto; display: block; align-self: flex-end;
  margin-bottom: 6px;
}
.faq-cta-buttonwrap {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.faq-cta-buttonwrap .btn { display: inline-block; }
.faq-cta-time {
  font-size: 0.8rem; font-weight: 600; color: var(--brand-gold);
  letter-spacing: 0.02em;
}
@media (max-width: 560px) {
  .faq-cta-arrow { display: none; }
}

/* Task 2: Horror stories - arrow + button side by side, arrow points AT button */
.problem-cta { text-align: center; }
.problem-cta-text { margin-bottom: 22px; }
/* The button is the centered anchor; the arrow is positioned relative to it
   (sitting above-left) so it points at the button without pushing it off-center. */
.problem-cta-action {
  position: relative;
  display: inline-block;
}
.problem-cta-arrow {
  position: absolute;
  right: 100%; bottom: 100%;
  margin-right: -18px; margin-bottom: -14px;
  display: block;
  pointer-events: none;
}
@media (max-width: 768px) {
  .problem-cta-arrow { display: none; }
}

/* Task 4: invisible scroll anchor - lands the heading below the sticky header */
.scroll-anchor {
  display: block; height: 0; width: 0;
  scroll-margin-top: 96px;
  visibility: hidden;
}
@media (max-width: 940px) { .scroll-anchor { scroll-margin-top: 80px; } }

/* ============================================================
   MOBILE CTA CLEANUP + GALLERY POLISH
   ============================================================ */

/* Task 1: hide the two hero CTAs on mobile only (desktop unchanged).
   The mobile quick-jump bar + calculator card already cover conversion. */
@media (max-width: 768px) {
  .hero-btn-row { display: none; }
  /* Remove the gap the hidden buttons would have left above the hero card */
  .hero-content .hero-btn-row { margin: 0; }
}