/* ============================================================
   GHAREEB FENCING SOLUTIONS — SITE-WIDE STYLES
   This single CSS file is loaded by every page.
   ============================================================ */

/* Design tokens now live in system.css (loaded first).
   The old navy/gold/cream palette was defined here and, because this
   file loads second, it silently overrode the new system. Removed. */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--charcoal);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
input, select, textarea { font-family: inherit; font-size: 16px; }
::selection { background: var(--gold); color: var(--navy); }

/* ============================================================
   UTILITIES
   ============================================================ */
.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.container-wide { max-width: 1440px; }
.container-narrow { max-width: 960px; }
@media (max-width: 600px) { .container { padding: 0 20px; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold-deep);
}
.eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--gold); }

h1, h2, h3, h4 {
  font-family: var(--serif); font-weight: 500; letter-spacing: -0.02em;
  color: var(--navy); line-height: 1.08;
}
.display-1 { font-size: clamp(40px, 7vw, 92px); font-weight: 400; }
.display-2 { font-size: clamp(32px, 5.2vw, 64px); font-weight: 500; }
.display-3 { font-size: clamp(26px, 3.6vw, 44px); font-weight: 500; }
.italic-accent { font-style: italic; font-weight: 400; color: var(--gold-deep); }

/* ============================================================
   ANNOUNCE BAR
   ============================================================ */
.announce {
  background: var(--navy-deep); color: var(--cream);
  font-size: 13px; padding: 10px 0; letter-spacing: 0.02em;
}
.announce-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.announce-stars { color: var(--gold-bright); letter-spacing: 0.1em; font-size: 14px; }
.announce-trust { display: flex; gap: 28px; flex-wrap: wrap; }
.announce-trust span { display: inline-flex; align-items: center; gap: 6px; opacity: 0.92; }
.announce-trust span::before { content: '✓'; color: var(--gold-bright); font-weight: 700; }
@media (max-width: 720px) { .announce-trust { display: none; } }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 246, 239, 0.94);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid rgba(26, 46, 64, 0.08);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 78px; gap: 32px;
}
.logo {
  font-family: var(--serif); font-size: 22px; font-weight: 600;
  color: var(--navy); letter-spacing: -0.01em; line-height: 1;
  display: flex; flex-direction: column; gap: 2px;
}
.logo small {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  color: var(--gold-deep); letter-spacing: 0.22em; text-transform: uppercase;
}
.nav-links {
  display: flex; gap: 32px; list-style: none; align-items: center;
}
.nav-links a {
  font-size: 14px; font-weight: 500; color: var(--gray-700);
  position: relative; padding: 6px 0;
}
.nav-links a:hover { color: var(--navy); }
.nav-links a.active { color: var(--navy); font-weight: 600; }
.nav-links a.has-menu::after { content: ' ⌄'; font-size: 12px; opacity: 0.6; }
.nav-cta-group { display: flex; align-items: center; gap: 10px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 24px; font-size: 15px; font-weight: 600;
  letter-spacing: 0.01em; border-radius: 4px;
  transition: all 0.25s var(--ease); text-decoration: none; white-space: nowrap;
}
.btn-primary { background: var(--navy); color: var(--cream); box-shadow: var(--shadow-md); }
.btn-primary:hover { background: var(--navy-deep); transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.btn-gold { background: var(--gold); color: var(--navy-deep); }
.btn-gold:hover { background: var(--gold-bright); transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.btn-outline { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); }
.btn-outline:hover { background: var(--navy); color: var(--cream); }
.btn-ghost { padding: 10px 16px; color: var(--navy); font-weight: 600; }
.btn-ghost:hover { background: rgba(26,46,64,0.06); border-radius: 4px; }
.btn-sm { padding: 10px 18px; font-size: 13px; }
.btn-lg { padding: 18px 32px; font-size: 16px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.nav-toggle {
  display: none; width: 44px; height: 44px;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--navy); }

@media (max-width: 1100px) {
  .nav-links, .nav-cta-group .btn-ghost { display: none; }
  .nav-toggle { display: flex; }
}

.mobile-drawer {
  position: fixed; inset: 0; background: var(--navy-deep);
  z-index: 200; padding: 80px 32px 32px;
  transform: translateX(100%); transition: transform 0.35s var(--ease);
  overflow-y: auto;
}
.mobile-drawer.open { transform: translateX(0); }
.mobile-drawer-close {
  position: absolute; top: 24px; right: 24px;
  width: 44px; height: 44px; color: var(--cream); font-size: 32px;
}
.mobile-drawer ul { list-style: none; }
.mobile-drawer ul li { border-bottom: 1px solid rgba(255,255,255,0.08); }
.mobile-drawer ul li a {
  display: block; padding: 18px 0;
  font-family: var(--serif); font-size: 20px; color: var(--cream); font-weight: 400;
}
.mobile-drawer-cta { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }

/* ============================================================
   PAGE HEADER (interior pages)
   ============================================================ */
.page-header {
  padding: 60px 0 40px;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-warm) 100%);
}
.breadcrumbs { font-size: 13px; color: var(--gray-500); margin-bottom: 16px; }
.breadcrumbs a { color: var(--gray-700); }
.breadcrumbs a:hover { color: var(--navy); }
.breadcrumbs span { margin: 0 8px; }
.page-header h1 { margin-bottom: 16px; }
.page-header .lede { font-size: 19px; color: var(--gray-700); max-width: 720px; line-height: 1.55; }

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding: 100px 0; position: relative; }
.section-cream { background: var(--cream-warm); }
.section-navy { background: var(--navy); color: var(--cream); }
.section-navy h2, .section-navy h3, .section-navy h4 { color: var(--cream); }
.section-navy .eyebrow { color: var(--gold-bright); }
.section-navy .eyebrow::before { background: var(--gold-bright); }

.section-header { text-align: center; margin-bottom: 64px; max-width: 720px; margin-left: auto; margin-right: auto; }
.section-header .eyebrow { margin-bottom: 20px; }
.section-header h2 { margin-bottom: 20px; }
.section-header p { font-size: 19px; color: var(--gray-700); line-height: 1.55; }
.section-navy .section-header p { color: rgba(250,246,239,0.78); }
@media (max-width: 768px) { .section { padding: 72px 0; } }
@media (max-width: 960px) {
}
@media (max-width: 480px) { }
@media (max-width: 960px) { }
@media (max-width: 600px) { }
@media (max-width: 600px) { }

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust-strip { background: var(--white); padding: 32px 0; border-top: 1px solid rgba(26,46,64,0.06); border-bottom: 1px solid rgba(26,46,64,0.06); }
.trust-strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.trust-label { font-size: 12px; color: var(--gray-500); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; flex-shrink: 0; }
.trust-badges { display: flex; gap: 40px; flex-wrap: wrap; align-items: center; flex: 1; justify-content: flex-end; }
.trust-badge { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 17px; color: var(--navy); font-weight: 500; }
.trust-badge-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--cream-warm); display: inline-flex; align-items: center; justify-content: center; color: var(--gold-deep); font-weight: 700; font-family: var(--sans); font-size: 14px; flex-shrink: 0; }

/* ============================================================
   FENCE CARDS (no pricing per Nicholas's direction)
   ============================================================ */
.fence-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 960px) { .fence-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .fence-grid { grid-template-columns: 1fr; } }

.fence-card {
  background: var(--white); border-radius: 6px; overflow: hidden;
  transition: all 0.4s var(--ease); box-shadow: var(--shadow-sm);
  position: relative; display: flex; flex-direction: column;
}
.fence-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }
.fence-card-img { aspect-ratio: 4/3; overflow: hidden; position: relative; }
.fence-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.fence-card:hover .fence-card-img img { transform: scale(1.05); }
.fence-card-badge {
  position: absolute; top: 16px; left: 16px; background: var(--gold);
  color: var(--navy-deep); padding: 5px 12px; border-radius: 3px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.fence-card-body { padding: 28px 28px 32px; flex: 1; display: flex; flex-direction: column; }
.fence-card-eyebrow { font-size: 12px; letter-spacing: 0.18em; color: var(--gold-deep); text-transform: uppercase; font-weight: 700; margin-bottom: 10px; }
.fence-card h3 { font-size: 26px; margin-bottom: 8px; }
.fence-card-tagline { font-style: italic; font-family: var(--serif); color: var(--gray-700); margin-bottom: 18px; font-size: 16px; }
.fence-card-features { list-style: none; margin-bottom: 24px; flex: 1; }
.fence-card-features li {
  padding: 8px 0; border-bottom: 1px solid var(--gray-100);
  font-size: 14px; color: var(--gray-700); display: flex; gap: 10px;
}
.fence-card-features li::before { content: '+'; color: var(--gold); font-weight: 700; flex-shrink: 0; }
.fence-card-features li:last-child { border-bottom: none; }
.fence-card-foot { display: flex; justify-content: flex-end; align-items: center; padding-top: 8px; }
.fence-card-link {
  font-size: 13px; font-weight: 600; color: var(--navy);
  letter-spacing: 0.04em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
  padding-bottom: 2px; border-bottom: 1.5px solid var(--gold);
  transition: gap 0.2s;
}
.fence-card-link:hover { gap: 10px; }

/* ============================================================
   DIFFERENCE GRID
   ============================================================ */
.diff-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; overflow: hidden; }
@media (max-width: 900px) { .diff-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .diff-grid { grid-template-columns: 1fr; } }
.diff-cell { background: var(--navy); padding: 48px 36px; text-align: left; transition: background 0.3s ease; }
.diff-cell:hover { background: var(--navy-deep); }
.diff-num { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--gold-bright); margin-bottom: 32px; font-weight: 400; display: flex; align-items: center; gap: 10px; }
.diff-num::after { content: ''; flex: 1; height: 1px; background: rgba(212,176,116,0.3); }
.diff-cell h3 { font-size: 24px; margin-bottom: 14px; color: var(--cream); }
.diff-cell p { font-size: 15px; line-height: 1.6; color: rgba(250,246,239,0.72); }

/* ============================================================
   PROCESS
   ============================================================ */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; position: relative; }
@media (max-width: 900px) { .process-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; } }
@media (max-width: 480px) { .process-grid { grid-template-columns: 1fr; } }
.process-step { position: relative; padding-top: 24px; }
.process-num { position: absolute; top: -40px; left: -8px; font-family: var(--serif); font-size: 120px; font-weight: 300; color: rgba(184,148,90,0.18); line-height: 1; font-style: italic; pointer-events: none; }
.process-step h3 { font-size: 22px; margin-bottom: 10px; position: relative; }
.process-step p { color: var(--gray-700); font-size: 15px; line-height: 1.6; position: relative; }

/* ============================================================
   GALLERY
   ============================================================ */
.gallery-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; grid-auto-rows: 200px; }
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
.gallery-item { position: relative; border-radius: 6px; overflow: hidden; cursor: pointer; background: var(--gray-100); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item-tag {
  position: absolute; bottom: 12px; left: 12px;
  background: rgba(26,46,64,0.85); color: var(--cream);
  padding: 5px 12px; border-radius: 3px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; backdrop-filter: blur(4px);
}
.gallery-feature { grid-column: span 2; grid-row: span 2; }
.gallery-tall { grid-row: span 2; }
.gallery-wide { grid-column: span 2; }

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews-meta { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.reviews-meta-stars { color: var(--gold); font-size: 24px; letter-spacing: 0.06em; }
.reviews-meta-text { font-family: var(--serif); font-size: 18px; color: var(--navy); font-weight: 500; }
.reviews-meta-text strong { font-size: 24px; }

.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 960px) { .reviews-grid { grid-template-columns: 1fr; } }
.review { background: var(--white); padding: 36px 32px; border-radius: 6px; box-shadow: var(--shadow-sm); position: relative; display: flex; flex-direction: column; }
.review::before { content: '"'; position: absolute; top: 16px; right: 24px; font-family: var(--serif); font-size: 100px; color: var(--gold); opacity: 0.18; line-height: 1; font-weight: 700; }
.review-stars { color: var(--gold); letter-spacing: 0.08em; margin-bottom: 18px; font-size: 16px; }
.review-text { font-family: var(--serif); font-size: 17px; line-height: 1.6; color: var(--charcoal); font-weight: 400; margin-bottom: 24px; flex: 1; }
.review-meta { border-top: 1px solid var(--gray-100); padding-top: 18px; display: flex; justify-content: space-between; align-items: flex-end; }
.review-author { font-weight: 600; color: var(--navy); font-size: 15px; margin-bottom: 4px; }
.review-detail { font-size: 13px; color: var(--gray-500); }
.review-source { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--gold-deep); }
.reviews-cta { text-align: center; margin-top: 48px; }

/* ============================================================
   OWNER STORY
   ============================================================ */
.owner-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: center; }
@media (max-width: 900px) { .owner-grid { grid-template-columns: 1fr; gap: 48px; } }
.owner-img { position: relative; }
.owner-img img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 6px; box-shadow: var(--shadow-lg); }
.owner-img::before { content: ''; position: absolute; top: 24px; left: 24px; right: -24px; bottom: -24px; border: 2px solid var(--gold); border-radius: 6px; z-index: -1; opacity: 0.5; }
.owner-quote { font-family: var(--serif); font-size: clamp(22px, 2.6vw, 30px); font-weight: 400; font-style: italic; line-height: 1.4; color: var(--navy); margin: 24px 0 32px; padding-left: 24px; border-left: 2px solid var(--gold); }
.owner-sig { font-family: var(--serif); font-size: 28px; font-style: italic; color: var(--navy); margin-top: 24px; }
.owner-sig small { display: block; font-family: var(--sans); font-style: normal; font-size: 13px; font-weight: 500; color: var(--gray-500); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 6px; }

/* ============================================================
   SERVICE AREAS
   ============================================================ */
.areas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; max-width: 980px; margin: 0 auto; }
.area-pill { background: rgba(255,255,255,0.05); border: 1px solid rgba(212,176,116,0.25); padding: 18px 20px; border-radius: 4px; text-align: center; font-size: 14px; font-weight: 500; color: var(--cream); transition: all 0.2s ease; cursor: pointer; }
.area-pill:hover { background: var(--gold); color: var(--navy-deep); border-color: var(--gold); }
.area-pill-state { display: block; font-size: 12px; letter-spacing: 0.16em; color: var(--gold-bright); text-transform: uppercase; margin-bottom: 4px; font-weight: 700; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-grid { max-width: 880px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid rgba(26,46,64,0.12); padding: 4px 0; }
.faq-item summary {
  padding: 24px 0; cursor: pointer;
  font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--navy);
  list-style: none; display: flex; justify-content: space-between; align-items: center;
  gap: 24px; transition: color 0.2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; font-family: var(--serif); font-size: 32px;
  color: var(--gold); font-weight: 300;
  transition: transform 0.3s var(--ease); flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--gold-deep); }
.faq-item p { padding: 0 0 28px; font-size: 16px; line-height: 1.7; color: var(--gray-700); max-width: 720px; }

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner { position: relative; padding: 120px 0; background: var(--navy-deep); color: var(--cream); overflow: hidden; }
.cta-banner::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at top right, rgba(184,148,90,0.15), transparent 50%),
              radial-gradient(ellipse at bottom left, rgba(184,148,90,0.08), transparent 50%);
  pointer-events: none;
}
.cta-banner-inner { text-align: center; position: relative; z-index: 2; }
.cta-banner h2 { color: var(--cream); margin-bottom: 24px; }
.cta-banner-lede { font-size: 19px; color: rgba(250,246,239,0.78); max-width: 640px; margin: 0 auto 40px; line-height: 1.5; }
.cta-banner-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--navy-deep); color: rgba(250,246,239,0.7); padding: 80px 0 32px; font-size: 14px; border-top: 1px solid rgba(255,255,255,0.06); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 56px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand h4 { font-family: var(--serif); font-size: 22px; color: var(--cream); margin-bottom: 16px; font-weight: 500; }
.footer-brand p { line-height: 1.65; max-width: 340px; font-size: 14px; }
.footer h5 { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-bright); margin-bottom: 20px; font-weight: 700; }
.footer ul { list-style: none; }
.footer ul li { margin-bottom: 12px; }
.footer ul a { color: rgba(250,246,239,0.7); }
.footer ul a:hover { color: var(--cream); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 32px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font-size: 13px; }
.footer-bottom-badges { display: flex; gap: 20px; }
.footer-bottom-badges span { display: inline-flex; align-items: center; gap: 6px; }

/* ============================================================
   MOBILE CTA
   ============================================================ */
.mobile-cta {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--navy-deep);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  z-index: 90; box-shadow: 0 -8px 24px rgba(0,0,0,0.2); gap: 10px;
}
.mobile-cta .btn { flex: 1; padding: 14px 16px; font-size: 14px; }
@media (max-width: 768px) {
  .mobile-cta { display: flex; }
  body { padding-bottom: 76px; }
}

/* ============================================================
   FORMS
   ============================================================ */
.form-group { margin-bottom: 24px; }
.form-label { display: block; font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 8px; letter-spacing: 0.04em; text-transform: uppercase; }
.form-label .req { color: var(--danger); }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 14px 16px; font-size: 16px;
  background: var(--white); border: 1.5px solid var(--gray-300);
  border-radius: 4px; color: var(--charcoal);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(184,148,90,0.15);
}
.form-textarea { resize: vertical; min-height: 120px; font-family: inherit; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.form-note { font-size: 13px; color: var(--gray-500); margin-top: 16px; line-height: 1.5; }
.form-success {
  background: rgba(16,185,129,0.1); border-left: 4px solid var(--success);
  padding: 16px 20px; border-radius: 4px; color: var(--success);
  font-weight: 600; display: none;
}
.form-success.show { display: block; }
.form-error {
  background: rgba(239,68,68,0.1); border-left: 4px solid var(--danger);
  padding: 16px 20px; border-radius: 4px; color: var(--danger);
  font-weight: 500; display: none; margin-top: 16px;
}
.form-error.show { display: block; }

/* ============================================================
   BALLPARK QUOTE TOOL (rebuilt)
   ============================================================ */
.ballpark-layout {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: start;
}
@media (max-width: 1024px) { .ballpark-layout { grid-template-columns: 1fr; } }
.ballpark-step-num {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--gold); color: var(--navy-deep);
  font-family: var(--serif); font-size: 18px; font-weight: 700;
}

/* Photo cards for fence styles */
.ballpark-photo-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
@media (max-width: 768px) { .ballpark-photo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ballpark-photo-grid { grid-template-columns: 1fr; } }

.ballpark-photo-card {
  display: block; cursor: pointer; position: relative;
  background: var(--white); border-radius: 6px; overflow: hidden;
  border: 2px solid var(--gray-300); transition: all 0.2s;
}
.ballpark-photo-card:hover { border-color: var(--gold-bright); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ballpark-photo-card.selected { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184,148,90,0.18); }
.ballpark-photo-card input { position: absolute; opacity: 0; pointer-events: none; }
.ballpark-photo-card-img-wrap {
  position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--gray-100);
}
.ballpark-photo-card-img-wrap img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ballpark-photo-card-check {
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--gold); color: var(--navy-deep);
  display: none; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px;
}
.ballpark-photo-card.selected .ballpark-photo-card-check { display: flex; }
.ballpark-photo-card-body { padding: 14px 16px 16px; }
.ballpark-photo-card-name {
  font-family: var(--serif); font-weight: 600; color: var(--navy);
  font-size: 17px; margin-bottom: 4px;
}
.ballpark-photo-card-detail {
  font-size: 13px; color: var(--gray-500); line-height: 1.4;
}

/* Sidebar */
.ballpark-sidebar { position: sticky; top: 100px; }
@media (max-width: 1024px) { .ballpark-sidebar { position: static; } }

.ballpark-sidebar-card {
  background: var(--navy); color: var(--cream);
  border-radius: 6px; padding: 32px; box-shadow: var(--shadow-lg);
}
.ballpark-summary-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; font-size: 14px; gap: 16px;
}
.ballpark-summary-row + .ballpark-summary-row {
  border-top: 1px solid rgba(250,246,239,0.10);
}
.ballpark-summary-row span { color: rgba(250,246,239,0.65); }
.ballpark-summary-row strong { color: var(--cream); font-weight: 600; text-align: right; }

.ballpark-price-block { text-align: center; padding: 16px 0; }
.ballpark-price-label {
  font-family: var(--serif); font-size: 12px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--gold-bright); margin-bottom: 12px;
}
.ballpark-price-value {
  font-family: var(--serif); font-size: 32px; font-weight: 700;
  color: var(--cream); line-height: 1.1;
}
.ballpark-price-locked {
  font-size: 14px; color: rgba(250,246,239,0.7);
  padding: 16px; border: 1px dashed rgba(250,246,239,0.25); border-radius: 4px;
}

/* Leaflet map style overrides so it fits the theme */
.leaflet-container { font-family: var(--sans); }
.leaflet-control-attribution { font-size: 12px !important; opacity: 0.75; }



/* ============================================================
   QUOTE ROUTER CARDS
   ============================================================ */
.quote-router-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .quote-router-grid { grid-template-columns: 1fr; } }

.quote-router-card {
  display: block; padding: 40px 32px;
  background: var(--white); border-radius: 6px; box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-300); color: var(--charcoal);
  transition: all 0.25s var(--ease); text-decoration: none;
}
.quote-router-card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-lg);
  border-color: var(--gold);
}
.quote-router-card-icon {
  font-size: 40px; margin-bottom: 16px;
}
.quote-router-card h3 {
  margin-bottom: 12px; color: var(--navy);
}
.quote-router-card p {
  font-size: 15px; color: var(--gray-700); line-height: 1.6; margin-bottom: 20px;
}
.quote-router-card .link-arrow {
  color: var(--gold-deep); font-weight: 600; font-size: 15px;
}



/* ============================================================
   QUOTE FORM CARDS
   ============================================================ */
.quote-form-card {
  background: var(--white); border-radius: 6px; padding: 40px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--gray-300);
}
@media (max-width: 600px) {
  .quote-form-card { padding: 28px 20px; }
}
@media (max-width: 900px) {
  .quote-form-layout { grid-template-columns: 1fr !important; }
}

/* ============================================================
   EDIT MODE
   ============================================================ */
.edit-mode-trigger {
  position: fixed; bottom: 20px; right: 20px; z-index: 9000;
  background: var(--navy-deep); color: var(--gold-bright);
  padding: 12px 18px; border-radius: 50px; font-size: 13px;
  font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  box-shadow: var(--shadow-xl); cursor: pointer;
  display: none; align-items: center; gap: 8px;
  transition: all 0.2s;
}
.edit-mode-trigger:hover { background: var(--navy); transform: translateY(-2px); }
.edit-mode-trigger.visible { display: inline-flex; }
@media (max-width: 768px) { .edit-mode-trigger { bottom: 86px; } }

.edit-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9100;
  background: var(--navy-deep); color: var(--cream);
  padding: 12px 24px; display: none;
  align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.edit-bar.visible { display: flex; }
.edit-bar-brand { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 14px; }
.edit-bar-brand::before { content: '✏️'; font-size: 18px; }
.edit-bar-counter {
  background: var(--gold); color: var(--navy-deep);
  padding: 4px 10px; border-radius: 12px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.edit-bar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.edit-bar .btn { padding: 8px 14px; font-size: 12px; }

body.editing { padding-top: 56px; }
body.editing.editing-mobile { padding-bottom: 130px; }

/* Editable elements get a hover indicator */
body.editing [data-editable] {
  position: relative; cursor: text;
  transition: outline 0.15s, background 0.15s;
  outline: 1px dashed transparent;
  outline-offset: 4px;
  border-radius: 2px;
}
body.editing [data-editable]:hover {
  outline-color: var(--gold);
  background: rgba(184,148,90,0.08);
}
body.editing [data-editable]:focus {
  outline: 2px solid var(--gold) !important;
  background: rgba(184,148,90,0.12);
}
body.editing [data-editable].edited {
  background: rgba(16,185,129,0.08);
  outline-color: var(--success);
}

body.editing [data-editable-img] {
  position: relative; cursor: pointer;
}
body.editing [data-editable-img]::after {
  content: '🖼️ Replace';
  position: absolute; top: 12px; right: 12px;
  background: var(--navy-deep); color: var(--gold-bright);
  padding: 6px 12px; border-radius: 4px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0; transition: opacity 0.2s;
  pointer-events: none;
  z-index: 5;
}
body.editing [data-editable-img]:hover::after { opacity: 1; }
body.editing [data-editable-img].edited::after { content: '✓ Replaced'; background: var(--success); color: white; opacity: 1; }

body.editing [data-editable-caption] {
  cursor: text;
  outline: 1px dashed transparent;
  outline-offset: 2px;
}
body.editing [data-editable-caption]:hover { outline-color: var(--gold-bright); }
body.editing [data-editable-caption]:focus { outline: 2px solid var(--gold-bright); }

/* Edit Mode Modal */
.edit-modal-backdrop {
  position: fixed; inset: 0; z-index: 9200;
  background: rgba(15, 29, 43, 0.85); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.edit-modal-backdrop.visible { display: flex; }
.edit-modal {
  background: var(--white); border-radius: 8px;
  max-width: 480px; width: 100%; padding: 32px;
  box-shadow: var(--shadow-xl);
}
.edit-modal h3 { font-size: 22px; margin-bottom: 20px; }
.edit-modal-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 24px; }
.edit-modal .form-input { margin-bottom: 12px; }

.edit-drop-zone {
  border: 2px dashed var(--gray-300); border-radius: 6px;
  padding: 32px; text-align: center; cursor: pointer;
  transition: all 0.2s; margin-bottom: 12px;
}
.edit-drop-zone:hover, .edit-drop-zone.drag-over {
  border-color: var(--gold); background: rgba(184,148,90,0.05);
}
.edit-drop-zone p { color: var(--gray-500); font-size: 14px; }
.edit-drop-zone strong { color: var(--navy); display: block; margin-bottom: 4px; }

.edit-preview {
  max-width: 100%; max-height: 200px; object-fit: contain;
  border-radius: 4px; margin: 12px auto; display: none;
}
.edit-preview.visible { display: block; }

/* Edit Login */
.edit-login {
  position: fixed; inset: 0; z-index: 9300;
  background: rgba(15, 29, 43, 0.95); backdrop-filter: blur(8px);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.edit-login.visible { display: flex; }
.edit-login-box {
  background: var(--white); border-radius: 8px;
  max-width: 380px; width: 100%; padding: 40px;
  box-shadow: var(--shadow-xl);
}
.edit-login-box h3 { font-size: 24px; margin-bottom: 8px; text-align: center; }
.edit-login-box p { text-align: center; color: var(--gray-500); font-size: 14px; margin-bottom: 24px; }

/* Toast */
.toast {
  position: fixed; top: 80px; right: 20px; z-index: 9500;
  background: var(--navy); color: var(--cream);
  padding: 14px 22px; border-radius: 6px;
  box-shadow: var(--shadow-xl); font-weight: 500; font-size: 14px;
  opacity: 0; transform: translateY(-12px); transition: all 0.3s var(--ease);
  pointer-events: none; max-width: 460px; line-height: 1.5;
  white-space: normal;
}
.toast.success { background: var(--success); }
.toast.error { background: var(--danger); pointer-events: auto; cursor: pointer; }
.toast.visible { opacity: 1; transform: translateY(0); }
body.editing .toast { top: 80px; }

/* ============================================================
   ANIMATIONS
   ============================================================ */
.fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.fade-up.visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   BALLPARK TOOL — MOBILE & TOUCH OPTIMIZATIONS
   ============================================================ */

/* Stack the 2-column wizard/sidebar layout below 900px */
@media (max-width: 900px) {
  .ballpark-layout {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .ballpark-sidebar {
    position: static !important;
    top: auto !important;
  }
  /* On mobile, the price panel sits on top so people see it immediately */
  .ballpark-sidebar .price-card-wrap { order: -1; }
  /* Map is shorter on mobile (taller phones, less room) */
  #bp-map { height: 320px !important; }
}

/* Phone-specific: tighten step cards and reduce font sizes */
@media (max-width: 640px) {
  .bp-step {
    padding: 20px 18px !important;
  }
  .bp-step h2 {
    font-size: 19px !important;
  }
  /* Stack height/gates 3-col grid */
  .bp-step-3-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* 2-column find/address row stays 2 columns even on mobile (compact) */
  #bp-map-search-row {
    grid-template-columns: 1fr 80px !important;
  }
  /* Fence-style photo grid: 2 cols on phones, 1 col on the smallest */
  #bp-fence-options {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Compare-materials rows: smaller text, allow wrap */
  .bp-compare-row {
    grid-template-columns: 50px 1fr !important;
    grid-template-rows: auto auto !important;
  }
  .bp-compare-row > :last-child {
    grid-column: 1 / -1;
    text-align: right;
    font-size: 15px !important;
  }
}

@media (max-width: 380px) {
  #bp-fence-options {
    grid-template-columns: 1fr !important;
  }
}

/* Touch-friendly tap targets everywhere (44x44 minimum per Apple HIG) */
@media (hover: none) and (pointer: coarse) {
  .btn-sm { min-height: 44px; padding: 10px 18px; }
  .form-input, .form-select, .form-textarea {
    min-height: 44px;
    font-size: 16px;  /* prevents iOS zoom on focus */
  }
  /* Disable hover-only animations that look broken on touch */
  .btn-primary:hover, .btn-gold:hover, .btn-outline:hover {
    transform: none;
  }
}

/* 3D modal — mobile-friendly */
@media (max-width: 700px) {
  #fence3d-canvas {
    height: 70vh !important;
  }
}

/* Google Places autocomplete dropdown — match site styling */
.pac-container {
  border-radius: 4px;
  border: 1px solid var(--gray-300);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  font-family: var(--sans);
  margin-top: 4px;
  z-index: 10000;
}
.pac-item {
  padding: 10px 14px;
  cursor: pointer;
  border-top: 1px solid var(--gray-100);
  line-height: 1.4;
}
.pac-item:first-child { border-top: none; }
.pac-item:hover { background: var(--cream); }
.pac-item-query { font-weight: 600; color: var(--navy); font-size: 14px; }

/* Edit Mode mobile fixes */
@media (max-width: 720px) {
  .edit-bar {
    flex-wrap: wrap;
    gap: 8px;
  }
  .edit-bar .btn { font-size: 13px; padding: 8px 14px; }
}

/* ============================================================
   MAP DRAWING TOOLBAR — MOBILE / TOUCH
   ============================================================
   The full toolbar (6 labelled buttons) measures ~677px, which wraps
   to 2-3 rows on a phone and covers most of the map. Below 760px we
   drop to icon-only square buttons (~48px each) so the whole toolbar
   fits on one row while keeping 44px+ touch targets.
   ============================================================ */
@media (max-width: 760px) {
  #bp-draw-toolbar {
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    max-width: none !important;
    padding: 6px !important;
    gap: 4px !important;
    justify-content: space-between;
  }
  #bp-draw-toolbar .bp-btn-label { display: none; }
  #bp-draw-toolbar .bp-draw-btn {
    min-width: 46px;
    min-height: 46px;
    justify-content: center;
    padding: 8px !important;
    flex: 1 1 auto;
  }
  /* Dividers waste width when the row is tight */
  #bp-draw-toolbar > span[style*="width:1px"] { display: none; }

  /* Stats card would collide with the toolbar — move it under the toolbar
     and make it a compact single row. */
  #bp-draw-stats {
    top: auto !important;
    bottom: 58px !important;
    right: 10px !important;
    left: 10px !important;
    min-width: 0 !important;
    padding: 8px 12px !important;
    display: flex;
    gap: 14px;
    align-items: baseline;
    justify-content: space-between;
    font-size: 12px !important;
  }
  #bp-draw-stats > div:first-child { display: none; }  /* "DRAWN TOTAL" label */
  #bp-draw-stats > div { gap: 6px; }

  #bp-draw-hint {
    bottom: 10px !important;
    left: 10px !important;
    right: 10px !important;
    font-size: 12px !important;
    padding: 8px 12px !important;
  }
}

/* Very narrow phones — keep icons legible, allow a second row if needed */
@media (max-width: 380px) {
  #bp-draw-toolbar { flex-wrap: wrap !important; }
  #bp-draw-toolbar .bp-draw-btn { min-width: 42px; flex: 1 1 18%; }
}

/* The Finish button should read as the primary action while drawing */
#bp-draw-toolbar .bp-finish-btn { box-shadow: 0 4px 14px rgba(26,122,60,0.35); }

/* ============================================================
   FINANCING CTA — bright green apply button (2026-08-13)
   ============================================================ */
.btn-financing {
  background: #2FBF4F;
  color: #0E1720 !important;
  border: none;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(47, 191, 79, 0.35);
}
.btn-financing:hover {
  background: #27A845;
  color: #0E1720 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(47, 191, 79, 0.45);
}
@media (max-width: 1100px) {
  .nav .btn-financing { display: none; }  /* keep the crowded nav clean; drawer covers mobile */
}

/* Edit Mode v3.1 — visual cue on editable header/footer items */
body.editing .gfs-chrome-editable { outline: 1.5px dashed rgba(184,148,90,0.8); outline-offset: 3px; cursor: pointer; }

/* Edit Mode v3.2 — select/move tool */
body.gfs-selecting main *:hover { outline: 1.5px dotted rgba(30,58,95,0.5); cursor: crosshair; }
.gfs-selected { outline: 3px solid #B8945A !important; outline-offset: 3px; }
.gfs-hidden-edit { opacity: 0.25 !important; filter: grayscale(1); outline: 2px dashed #B3261E !important; }

/* ── v15: Ballpark mobile & map upgrades ─────────────────────── */
#bp-map { height: 560px !important; }
.pac-container { z-index: 100001 !important; font-size: 15px; }
#bp-draw-toolbar button, #bp-draw-toolbar .btn {
  min-height: 46px; min-width: 46px; font-size: 15px;
}
@media (max-width: 760px) {
  #bp-map { height: 62vh !important; min-height: 420px !important; }
  #bp-map-search-row { grid-template-columns: 1fr !important; }
  #bp-map-search-btn { min-height: 50px; font-size: 16px; }
  #bp-map-search { min-height: 50px; font-size: 16px; } /* 16px stops iOS auto-zoom */
  #bp-draw-toolbar { position: sticky; top: 0; z-index: 500; background: var(--cream, #FBFAF7); padding: 8px 0; }
  #bp-draw-toolbar button, #bp-draw-toolbar .btn { min-height: 50px; font-size: 16px; flex: 1; }
  .bp-step .form-input, .bp-step select { min-height: 48px; font-size: 16px; }
  .bp-step .btn { min-height: 52px; font-size: 16px; }
}

/* ── v23: nav dropdown ─────────────────────────────────────── */
.nav-item-menu { position: relative; }
.nav-sub {
  display: none; position: absolute; top: 100%; left: -8px; min-width: 220px;
  background: var(--vellum, #FBFAF7); border: 1px solid var(--vellum-3, #E7E3DA);
  border-radius: 8px; box-shadow: 0 14px 40px rgba(14,23,32,0.16);
  padding: 8px 0; margin: 0; list-style: none; z-index: 900;
}
.nav-item-menu:hover .nav-sub,
.nav-item-menu:focus-within .nav-sub { display: block; }
.nav-sub li a {
  display: block; padding: 10px 18px; font-size: 14px; white-space: nowrap;
}
.nav-sub li a:hover { background: var(--vellum-2, #F2EFE9); }
.nav-sub li:last-child a { border-top: 1px solid var(--vellum-3, #E7E3DA); font-weight: 700; }
@media (max-width: 1099px) { .nav-sub { display: none !important; } }

/* ── v23: mobile polish ────────────────────────────────────── */
@media (max-width: 640px) {
  .display-1 { font-size: clamp(30px, 8.5vw, 42px) !important; line-height: 1.12 !important; }
  .lede { font-size: 16px !important; }
  .mobile-drawer a { padding: 14px 0 !important; font-size: 17px !important; }
  .section { padding-top: 44px; padding-bottom: 44px; }
}
.skip-link:focus { left: 12px !important; }

/* ══ v25: MODERN PASS — photo hero, glass nav, motion ══════════ */

/* — full-bleed photo hero — */
.hero2--photo { position: relative; min-height: 86vh; display: flex; align-items: center; overflow: hidden; padding: 120px 0 90px; }
.hero2--photo .hero2__bg { position: absolute; inset: 0; z-index: 0; }
.hero2--photo .hero2__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); animation: heroDrift 22s ease-in-out infinite alternate; }
.hero2--photo .hero2__scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(14,23,32,0.88) 0%, rgba(14,23,32,0.72) 42%, rgba(14,23,32,0.30) 100%),
              linear-gradient(0deg, rgba(14,23,32,0.55) 0%, transparent 34%); }
.hero2--photo .hero2__grid { position: relative; z-index: 2; grid-template-columns: 1fr; max-width: 760px; margin-right: auto; }
.hero2--photo .hero2__content h1 { color: #FBFAF7; font-size: clamp(38px, 5.2vw, 64px); letter-spacing: -0.02em; }
.hero2--photo .hero2__content h1 em { color: var(--gold, #c9a227); font-style: italic; }
.hero2--photo .hero2__lede { color: rgba(251,250,247,0.88); max-width: 560px; }
.hero2--photo .spec { color: var(--gold, #c9a227); }
.hero2--photo .dot { background: var(--gold, #c9a227); box-shadow: 0 0 12px var(--gold, #c9a227); }
.hero2--photo #hero-quote-alt { color: rgba(251,250,247,0.85) !important; }
.hero2--photo .readout { border-top: 1px solid rgba(251,250,247,0.18); }
.hero2--photo .readout > div {
  background: rgba(251,250,247,0.07); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(251,250,247,0.14); border-radius: 10px; padding: 14px 18px;
}
.hero2--photo .readout__val { color: #FBFAF7; }
.hero2--photo .readout__val sup { color: var(--gold, #c9a227); }
.hero2--photo .readout__key { color: rgba(251,250,247,0.72); }
/* entrance */
.hero2--photo .hero2__content > * { opacity: 0; transform: translateY(22px); animation: riseIn 0.7s cubic-bezier(.2,.7,.2,1) forwards; }
.hero2--photo .hero2__content > *:nth-child(2) { animation-delay: .08s; }
.hero2--photo .hero2__content > *:nth-child(3) { animation-delay: .16s; }
.hero2--photo .hero2__content > *:nth-child(4) { animation-delay: .24s; }
.hero2--photo .hero2__content > *:nth-child(5) { animation-delay: .34s; }
.hero2--photo .hero2__content > *:nth-child(6) { animation-delay: .44s; }
@keyframes riseIn { to { opacity: 1; transform: none; } }
@keyframes heroDrift { from { transform: scale(1.04) translateX(0); } to { transform: scale(1.09) translateX(-1.5%); } }

/* — glass sticky nav — */
.nav { position: sticky; top: 0; z-index: 950;
  background: rgba(251,250,247,0.82); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(14,23,32,0.08); transition: box-shadow .3s ease, background .3s ease; }
.nav.is-scrolled { box-shadow: 0 8px 30px rgba(14,23,32,0.10); }

/* — micro-interactions — */
html { scroll-behavior: smooth; }
.btn, .btn2 { transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s ease, background .18s ease, color .18s ease; }
.btn:hover, .btn2:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(14,23,32,0.16); }
.btn:active, .btn2:active { transform: translateY(0) scale(0.98); }
.fence-card, .card { transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease; }
.fence-card:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(14,23,32,0.14); }
.fence-card-img { overflow: hidden; }
.fence-card-img img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.fence-card:hover .fence-card-img img { transform: scale(1.05); }
:focus-visible { outline: 2.5px solid var(--gold, #c9a227); outline-offset: 3px; border-radius: 3px; }

/* — scroll-reveal (activated by motion.js) — */
.js-motion .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.js-motion .reveal.in-view { opacity: 1; transform: none; }
.js-motion .reveal:nth-child(2) { transition-delay: .06s; }
.js-motion .reveal:nth-child(3) { transition-delay: .12s; }
.js-motion .reveal:nth-child(4) { transition-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  .hero2--photo .hero2__bg img { animation: none; }
  .hero2--photo .hero2__content > * { animation: none; opacity: 1; transform: none; }
  .js-motion .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}
@media (max-width: 640px) {
  .hero2--photo { min-height: 78vh; padding: 96px 0 64px; }
  .hero2--photo .readout > div { padding: 10px 12px; }
}
/* v25.1: ghost button legibility inside the dark photo hero */
.hero2--photo .btn2--ghost { color: #FBFAF7; border-color: rgba(251,250,247,0.55); }
.hero2--photo .btn2--ghost:hover { background: rgba(251,250,247,0.12); border-color: #FBFAF7; }
.hero2--photo .btn2--cedar { box-shadow: 0 10px 30px rgba(164,85,43,0.35); }

/* ══ v27: photo page-headers + brand lockup + nav polish ═══════ */
.page-header--photo { position: relative; min-height: 42vh; display: flex; align-items: flex-end; overflow: hidden; padding: 120px 0 44px; }
.page-header--photo .ph__bg { position: absolute; inset: 0; z-index: 0; }
.page-header--photo .ph__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); animation: heroDrift 26s ease-in-out infinite alternate; }
.page-header--photo .ph__scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(96deg, rgba(14,23,32,0.86) 0%, rgba(14,23,32,0.62) 55%, rgba(14,23,32,0.34) 100%),
              linear-gradient(0deg, rgba(14,23,32,0.5) 0%, transparent 40%); }
.page-header--photo .ph__content { position: relative; z-index: 2; }
.page-header--photo h1, .page-header--photo .display-1 { color: #FBFAF7; }
.page-header--photo .display-1 .italic-accent, .page-header--photo h1 em { color: var(--gold, #c9a227); }
.page-header--photo .lede { color: rgba(251,250,247,0.88); }
.page-header--photo .breadcrumbs, .page-header--photo .breadcrumbs a { color: rgba(251,250,247,0.72); }
.page-header--photo .breadcrumbs a:hover { color: var(--gold, #c9a227); }
.page-header--photo .eyebrow { color: var(--gold, #c9a227); }
.page-header--photo .ph__content > * { opacity: 0; transform: translateY(18px); animation: riseIn .65s cubic-bezier(.2,.7,.2,1) forwards; }
.page-header--photo .ph__content > *:nth-child(2) { animation-delay: .07s; }
.page-header--photo .ph__content > *:nth-child(3) { animation-delay: .14s; }
.page-header--photo .ph__content > *:nth-child(4) { animation-delay: .22s; }
@media (max-width: 640px) { .page-header--photo { min-height: 34vh; padding: 100px 0 32px; } }

/* — brand lockup — */
.logo { display: flex; flex-direction: column; line-height: 1.15; }
.logo__name { font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
.logo__name em { font-style: normal; color: var(--gold-deep, #9a7b1e); }
.logo small.spec { opacity: 0.75; }

/* — nav polish: active page indicator + tighter rhythm — */
.nav-links > li > a { position: relative; padding-bottom: 4px; }
.nav-links > li > a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--gold, #c9a227); transition: right .25s cubic-bezier(.2,.7,.2,1); }
.nav-links > li > a:hover::after, .nav-links > li > a.is-active::after { right: 0; }
.nav-links > li > a.is-active { color: var(--ink, #0E1720); font-weight: 700; }

/* ══ v28: guide components ═════════════════════════════════════ */
.compare-table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14.5px; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 6px 24px rgba(14,23,32,0.07); }
.compare-table th { background: var(--navy, #1e3a5f); color: #FBFAF7; text-align: left; padding: 13px 14px; font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; }
.compare-table td { padding: 13px 14px; border-bottom: 1px solid var(--vellum-3, #E7E3DA); vertical-align: top; }
.compare-table tbody tr:hover { background: var(--vellum-2, #F2EFE9); }
.compare-table tbody tr:last-child td { border-bottom: none; }

.tip-callout { border-left: 4px solid var(--gold, #c9a227); background: linear-gradient(90deg, rgba(201,162,39,0.09), transparent 70%); padding: 16px 20px; margin: 26px 0; border-radius: 0 10px 10px 0; font-size: 15.5px; line-height: 1.7; font-style: italic; }

.process-timeline { list-style: none; counter-reset: step; padding: 0; margin: 0; position: relative; }
.process-timeline::before { content: ''; position: absolute; left: 23px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(var(--gold, #c9a227), var(--vellum-3, #E7E3DA)); }
.process-timeline li { counter-increment: step; position: relative; padding: 0 0 34px 72px; }
.process-timeline li::before { content: counter(step); position: absolute; left: 0; top: -2px; width: 48px; height: 48px; border-radius: 50%; background: var(--navy, #1e3a5f); color: var(--gold, #c9a227); font-weight: 800; font-size: 19px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(14,23,32,0.22); }
.process-timeline h3 { margin: 6px 0 8px; font-size: 20px; }
.process-timeline p { line-height: 1.75; margin: 0; color: var(--ink-3, #2C3E4E); }

.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.guide-grid .fence-card-body { padding: 26px; }
@media (max-width: 640px) {
  .compare-table { font-size: 13px; }
  .compare-table th, .compare-table td { padding: 10px 9px; }
  .process-timeline li { padding-left: 60px; }
  .process-timeline li::before { width: 40px; height: 40px; font-size: 16px; }
  .process-timeline::before { left: 19px; }
}
/* v32: nav responsive slimming — optional links yield before wrapping */
@media (max-width: 1420px) { .nav-links li.nav-opt { display: none; } }
@media (max-width: 1240px) { .nav-cta-group .nav-phone { display: none; } }
.nav-links { flex-wrap: nowrap; }
.nav-inner { gap: 18px; }

/* ── hero secondary path ──────────────────────────────────────────────────
   "Prefer a person? Book a free on-site estimate" — previously carried inline
   styles and sat inside .nav-cta-group, where display:block forced the nav
   button row to wrap and produced a tall band across the top of every page.
   Moved into .hero2__cta and given a class so Edit Mode's Site Colors panel
   can theme it and a future CSP has no inline style to object to. */
.hero2__cta-alt {
  display: inline-block;
  margin-top: 12px;
  font-size: 14.5px;
  color: inherit;
  opacity: .85;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hero2__cta-alt:hover { opacity: 1; }
@media (max-width: 900px) {
  /* Measured at 24px tall; 44px is the minimum comfortable thumb target. */
  .hero2__cta-alt { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   NAV FIT — measured, not guessed
   The homepage scrolled sideways 206px at 390px and 132px at 1280px. The nav
   row is logo + gap + CTA group and none of it could shrink: .logo is a flex
   item at the default min-width:auto, so it refused to compress and pushed
   the button and hamburger past the right edge. The 600px/480px breakpoints
   in this file were empty — these are the rules they were waiting for.
   ══════════════════════════════════════════════════════════════════════════ */
/* SCOPED to small screens. These were unscoped, which let the logo shrink
   on DESKTOP too — at 1280px the brand wrapped onto three lines and
   "Fence Styles" broke across two. min-width:0 is only needed where the
   row actually runs out of space. Caught by screenshotting the footer and
   noticing the header above it. */
/* min-width:0 IS needed at every width — without it the nav row overflows
   132px at 1280px and 226px at 1440px, because .nav-links and the CTA group
   cannot compress. But unscoped it also let the LOGO shrink on desktop,
   wrapping the brand onto three lines.

   So: let the row and the link group shrink everywhere, and let the LOGO
   shrink only on small screens, where wrapping to two lines is the right
   trade. Desktop keeps the brand on one line. */
.nav-inner { min-width: 0; }
.nav-cta-group { flex: 0 0 auto; }
@media (max-width: 900px) {
  .logo { min-width: 0; }
  .nav-cta-group { min-width: 0; }
}

@media (max-width: 700px) {
  .nav-inner { gap: 12px; }
  .logo { font-size: 17px; flex: 1 1 auto; line-height: 1.12; }
  .logo small { font-size: 10px; letter-spacing: 0.14em; }
  .nav-cta-group { gap: 8px; }
  .nav-cta-group .btn-primary { font-size: 13px; padding: 9px 12px; }
}
@media (max-width: 420px) {
  .logo { font-size: 15px; }
  .nav-cta-group .btn-primary { font-size: 12px; padding: 8px 10px; }
}

/* .logo__name carries white-space:nowrap (line ~1067). That is right on a
   desktop nav and wrong on a phone: the name cannot wrap, so it overflows
   its flex box and slides underneath the CTA button — "Ghareeb Fencing
   Solutio". Let it wrap on small screens; the box is 161px and the name
   splits cleanly after "Fencing". */
@media (max-width: 700px) {
  .logo__name { white-space: normal; overflow-wrap: break-word; }
}

/* ══════════════════════════════════════════════════════════════════════════
   NO SIDEWAYS SCROLL, ANYWHERE
   Measured across all 57 pages at 390px: 56 of them scrolled horizontally.
   Fixing the nav cleared 21. The rest come from the off-screen mobile
   drawer, which is position:fixed translated 390px to the right.

   `overflow-x: hidden` was already set on BODY — but not on HTML, and that
   combination does not stop the document reporting the extra width.

   `clip` rather than `hidden` on purpose: `hidden` makes the element a
   scroll container, which breaks position:sticky on the nav. `clip` does
   not, so the sticky header keeps working. Verified below, not assumed.
   ══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   COLLAPSE HARD-CODED GRIDS ON SMALL SCREENS
   ══════════════════════════════════════════════════════════════════════════
   THE ACTUAL CAUSE of the sideways scroll, and of things being cut off at
   the sides. 30 pages carry grids written as INLINE styles:

     style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;"

   33 three-column and 24 two-column declarations. None of them collapse on
   a phone, so three 165px cards plus gaps come to 550px inside a 350px
   column and the row runs off the screen.

   An earlier attempt of mine used `overflow-x: clip` on html/body. That
   removed the scrollbar and made the numbers look perfect while HIDING the
   content instead of fixing it — and at 2.5x zoom you could no longer pan
   right to reach it. That was worse than the bug. It has been removed.

   !important is necessary, not lazy: an inline style attribute beats any
   selector, so a normal rule cannot override it. The long-term fix is to
   replace the inline styles with a class in build.py; this makes the site
   usable on a phone today without touching 30 pages of markup.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  [style*="repeat(3, 1fr)"],
  [style*="repeat(3,1fr)"],
  [style*="repeat(2, 1fr)"],
  [style*="repeat(2,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 620px) {
  [style*="repeat(3, 1fr)"],
  [style*="repeat(3,1fr)"],
  [style*="repeat(2, 1fr)"],
  [style*="repeat(2,1fr)"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns: 1fr 1.4fr"],
  [style*="grid-template-columns: 1fr 380px"] { grid-template-columns: 1fr !important; }
}
/* Anything still too wide inside a grid cell — a long unbroken word, a
   pasted URL — wraps rather than pushing the row out. */
@media (max-width: 620px) {
  [style*="display: grid"] > * { min-width: 0; overflow-wrap: break-word; }
}

/* ── .table-scroll ────────────────────────────────────────────────────────
   Present in the markup on /guides/choosing-a-fence/ and /why-us/, with NO
   rule anywhere in this stylesheet — the wrapper was added and the style
   never written. So the comparison tables (559px wide) simply ran off the
   screen instead of scrolling inside their box.

   This is the ONE place horizontal scrolling is correct: a spec table has
   to keep its columns aligned, so it scrolls within its own container
   rather than dragging the whole page sideways.

   tabindex/role are set on the element in build.py if you want keyboard
   users to reach it; the CSS below is what makes it scroll at all. */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;   /* don't chain the swipe to the page */
}
.table-scroll > table { min-width: 34rem; }
.table-scroll:focus-visible { outline: 2px solid var(--gold, #C8A44D); outline-offset: 2px; }

/* ── long button labels wrap on small screens ─────────────────────────────
   .btn sets white-space:nowrap (line ~108). Correct for "Free Estimate";
   wrong for a sentence-length CTA. Isolated by elimination on
   /guides/choosing-a-fence/: the culprit was

     "See what your yard costs — trace it in a minute →"

   which rendered as a single 448px line inside a 350px column and pushed
   the page 78px sideways. Same cause on /why-us/.

   Only below 700px, so desktop buttons keep their single-line shape. */
@media (max-width: 700px) {
  .btn, .btn2 {
    white-space: normal;
    overflow-wrap: break-word;
    text-align: center;
    max-width: 100%;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   MOBILE TAP TARGETS  —  measured across 57 pages at 390px
   170 targets came in under 40px. The worst are the ones people actually
   reach for:
       phone link      350 x 35
       email link      350 x 22
       "Measure my fence"  125 x 35
   44px is the size Apple and Google both publish. A 22px email link is a
   coin toss with a thumb.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .btn, .btn2, .btn-sm {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Contact links sit in plain <a> tags with no class, so target them by
     what they point at rather than inventing a class in 57 pages. */
  a[href^="tel:"],
  a[href^="mailto:"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Footer and nav list links: 17px text needs padding, not a bigger font. */
  .footer li a,
  .mobile-drawer ul li a { min-height: 44px; display: flex; align-items: center; }
}

/* ── gallery caption legibility ───────────────────────────────────────────
   system.css:613 groups .gallery-item-tag with .fence-card-tagline and sets
   color: var(--galv) — a slate grey that is right for a tagline on a light
   card and wrong for a pill sitting on a dark navy scrim over a photo.
   system.css loads AFTER site.css, so it wins, and site.css's own
   `color: var(--cream)` on line 275 never applies.

   Measured: rgb(92,104,115) on the composited pill gives 1.73–2.37:1.
   WCAG AA needs 4.5:1 for 12px text. Every caption in your gallery is
   hard to read.

   Cream on the same pill measures about 11:1.

   Scoped tightly so .fence-card-tagline keeps its intended grey. */
.gallery-item-tag { color: var(--cream) !important; }

/* ── footer heading level ─────────────────────────────────────────────────
   The footer brand heading was an <h4> under the page's <h2> sections, so
   every one of your 56 content pages skipped a heading level. Screen
   readers announce that as a missing section, and it is a standing SEO
   nit.

   Now an <h3>. These rules carry the existing styling across, because
   .footer-brand h4 (site.css:369) and .footer h4 (system.css:686) both
   target the TAG — without this the footer brand would silently lose its
   serif face and cream colour. */
.footer-brand h2.footer-brand-h {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--cream);
  margin-bottom: 16px;
  font-weight: 500;
}
.footer h2.footer-brand-h { color: var(--vellum); font-family: var(--serif); }

/* Footer column headings were <h5> under the brand <h4> — a second level
   skip that was hidden behind the first one until it was fixed. Now <h4>
   under the brand <h3>. site.css:371 styled them by tag, so the styling is
   carried across here explicitly. */
.footer h3.footer-col-h {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 20px;
  font-weight: 700;
  font-family: var(--sans);
}

/* ── the desktop nav needs more room than most screens have ───────────────
   Measured at 1920px with everything visible:
       logo 281 + nav-links 689 + cta-group 548  = 1518px of content
       plus gaps and the container gutter        = 1646px needed

   The existing collapse breakpoint is 1100px. So between 1100px and 1646px
   — which is most laptops, including 1280 and 1440 — the full nav is shown
   in a space it cannot fit. That is the 132px and 226px overflow measured
   at those widths.

   Two ways to fix it. Compressing the row was tried and is worse: the links
   overlap the buttons rather than overflowing, so "Fence Styles" wrapped
   and the financing button landed on top of "Gallery".

   So instead: shed the lowest-value items first, in the order you would
   choose yourself, and fall back to the hamburger before anything breaks.
   Everything removed here is still in the drawer and the footer. */

/* 1650px — the full nav needs 1646px, so shedding must start above that,
   not at 1400. Drop the secondary text links; keep the two buttons. */
@media (max-width: 2000px) {
  .nav-cta-group .btn-ghost,
  .nav-cta-group a[href^="tel:"] { display: none; }
  .nav-links { gap: 20px; }
  .nav-links a { font-size: 14px; }
}
/* 1300px — drop the financing pill; keep Measure my fence. */
@media (max-width: 1300px) {
  .nav-cta-group .btn-financing,
  .nav-cta-group .nav-fin { display: none; }
  .nav-links { gap: 16px; }
}
/* Below 1100px your existing rule already hides .nav-links and shows the
   hamburger — unchanged. */
.nav-links a { white-space: nowrap; }

/* ── minimum readable text on a phone ─────────────────────────────────────
   Measured at 390px: the announce strip renders at 12px, the logo tagline
   at 10px, bylines at 13px. 10px is a squint, and the announce strip is
   the first thing a visitor reads.

   13.5px is the floor used here. It is also where iOS stops offering to
   zoom the page for you, which is a decent proxy for "legible".

   Mobile only — desktop keeps the fine small-caps look. */
@media (max-width: 700px) {
  /* system.css sets .spec from the --t-spec token (0.75rem = 12px) and
     loads AFTER this file, so a plain `.spec { font-size }` here loses.
     Raise the TOKEN instead — every mono label follows automatically and
     nothing needs !important. Same override order that made the gallery
     captions unreadable. */
  :root { --t-spec: 0.79rem !important; }   /* system.css loads later and
     redeclares the token at the same specificity; a media query adds none,
     so the later file wins without this. */
  .spec, .spec--paper { letter-spacing: 0.04em; }
  .logo small, .logo small.spec { font-size: 11.5px; letter-spacing: 0.10em; }
  small, .byline, figcaption { font-size: 13.5px; }
  /* Wide tracking is what made this wrap once the size went up. The star
     rating must never split across lines — "★★★★ / ★" reads as four. */
  .announce, .announce-inner { font-size: 12.5px; letter-spacing: 0.02em; }
  /* The class is .announce-stars, not .stars — my first guess matched
     nothing and the row kept breaking as 4 stars then 1, which reads as a
     4-star rating. The five stars are separated by literal spaces, so
     nowrap on that span is what holds them together.
     Scoped to the span only: nowrap on the whole row pushed the strip 32px
     off screen. */
  .announce-stars { white-space: nowrap; }
}

/* The guides hub cards became <h2> (they are the page's main items and sat
   as h3 directly under the h1). Carry the card heading size across so the
   hub looks unchanged. */
.guides-grid h2, .card-grid h2[data-editable^="guides.c"] {
  font-size: 20px; margin: 0 0 8px; font-weight: 600;
}

/* ── "MOST POPULAR" badge legibility ──────────────────────────────────────
   Measured from the rendered pixels, not from the cascade: near-black
   rgb(7,14,20) on cedar rgb(164,85,43) is 3.62:1. WCAG AA needs 4.5:1 for
   12px bold. Cream on the same cedar measures 5.14:1.

   Note darkening the cedar would make it WORSE, not better — dark text and
   a dark background converge. Lightening the text is the only direction
   that helps here. */
.fence-card-badge { color: var(--cream) !important; }

/* The six install-process steps were <h3> sitting directly under the page
   <h1> with no <h2> between — the last heading-level skip on the site. They
   are the page's main content, so they are now <h2>.
   site.css:1090 styles them as `.process-timeline h3`, by TAG, so without
   this they would jump to the browser default h2 size. My first attempt
   targeted `.process-step h2` — the wrong container; the steps live in an
   <ol class="process-timeline">, and the selector silently matched nothing. */
.process-timeline h2 { margin: 6px 0 8px; font-size: 20px; }

/* ── reading measure ──────────────────────────────────────────────────────
   Loose paragraphs sitting directly in a .container inherit its full width
   — measured 896px at 17px, which is 96–116 characters per line. Comfortable
   reading tops out around 85; past that the eye loses its place returning to
   the start of the next line.

   Scoped to DIRECT children only, so cards, tables, grids, spec sheets and
   anything inside a layout wrapper keep their full width. */
.section > .container > p,
.section > .container > ul,
.section > .container > ol { max-width: 68ch; }

/* ── cross-section on a phone ─────────────────────────────────────────────
   The diagram is 820 units wide. Scaled to fit a 390px screen that is a
   0.47 factor, which turns 13.5px annotation text into about 6px — present
   but unreadable.

   Rather than draw a second mobile diagram (two sources of truth, one of
   which will drift), let it keep its real size and scroll inside its own
   box — the same behaviour the spec tables already use on this site, so it
   is a gesture the page has already taught. Everything stays legible and
   nothing is cut off.

   I first tried restacking the panels with a CSS transform on nth-of-type
   SVG children. It silently matched nothing. Not worth the fragility. */
@media (max-width: 700px) {
  figure.diagram-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  figure.diagram-scroll svg { min-width: 660px; }
  figure.diagram-scroll figcaption { position: sticky; left: 0; }
}
}

/* The proof links under the four homepage reasons. On a phone a one-line
   link measured 27px tall — under the 44px thumb target. */
.diff-link {
  display: inline-flex; align-items: center; min-height: 44px;
  margin-top: 12px; font-weight: 600; color: var(--cedar, #A4552B); text-decoration: none;
}
.diff-link:hover { text-decoration: underline; }