/* ============================================
   DESIGN TOKENS: sampled from the real Howdy logo
   ============================================ */
:root {
  --navy: #0B2136;
  --navy-2: #132C45;
  --navy-3: #1C3A57;
  --gold: #EA9B3B;
  --gold-dark: #C97F26;
  --gold-light: #F7C179;
  --cream: #FBF3E3;
  --cream-2: #F3E6C9;
  --white: #FFFFFF;
  --text: #1C2733;
  --text-muted: #5B6675;
  --green: #2F7D4F;
  --green-bg: rgba(47,125,79,0.08);
  --line: #E6D9BB;
  --line-dark: rgba(255,255,255,0.12);
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 2px 10px rgba(11,33,54,0.08);
  --shadow-md: 0 8px 24px rgba(11,33,54,0.14);
  --shadow-lg: 0 20px 50px rgba(11,33,54,0.22);
  --transition: 0.25s cubic-bezier(0.4,0,0.2,1);
  --font-display: 'Rye', 'Georgia', serif;
  --font-body: 'Libre Franklin', sans-serif;
  --container: 1240px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { font-family: var(--font-body); color: var(--text); line-height: 1.6; background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
/* keep <picture> out of the layout so wrapped imgs sit exactly where they did */
picture { display: contents; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--font-body); background: none; border: none; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.08; font-weight: 400; letter-spacing: 0.01em; color: var(--navy); }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* Buttons: letterpress print blocks. Hard offset shadow instead of a blur:
   the whole site reads "vintage Texas sign shop", and pill buttons were the
   one element still saying "generic SaaS". Press-down on hover. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px; border-radius: 8px;
  font-family: var(--font-body); font-weight: 800; font-size: 0.95rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background var(--transition);
  white-space: nowrap; border: 2px solid var(--navy);
}
.btn:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }
.btn:hover { transform: translate(2px, 2px); }
.btn-gold { background: var(--gold); color: var(--navy); box-shadow: 4px 4px 0 var(--navy); }
.btn-gold:hover { background: var(--gold-light); box-shadow: 1px 1px 0 var(--navy); }
.btn-navy { background: var(--navy); color: var(--white); box-shadow: 4px 4px 0 var(--gold); }
.btn-navy:hover { background: var(--navy-2); box-shadow: 1px 1px 0 var(--gold); }
.btn-white { background: var(--white); color: var(--navy); box-shadow: 4px 4px 0 var(--navy); }
.btn-white:hover { box-shadow: 1px 1px 0 var(--navy); }
.btn-outline { background: var(--white); color: var(--navy); border-color: var(--navy); box-shadow: 4px 4px 0 var(--navy); }
.btn-outline:hover { background: var(--navy); color: var(--white); box-shadow: 1px 1px 0 var(--navy); }
.btn-outline-white { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.7); box-shadow: 4px 4px 0 rgba(234,155,59,0.55); }
.btn-outline-white:hover { background: var(--white); color: var(--navy); border-color: var(--white); box-shadow: 1px 1px 0 rgba(234,155,59,0.55); }
.btn-sm { padding: 10px 20px; font-size: 0.82rem; box-shadow: 3px 3px 0 var(--navy); }
.btn-block { width: 100%; }

/* ============================================
   UTILITY BAR
   ============================================ */
.utility-bar { background: var(--navy); color: rgba(255,255,255,0.88); padding: 9px 0; font-size: 0.82rem; font-weight: 600; }
.utility-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.utility-left { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.utility-left span { color: var(--gold-light); }
.utility-phone { display: flex; align-items: center; gap: 6px; color: var(--white); white-space: nowrap; flex-shrink: 0; }
.utility-phone svg { width: 14px; height: 14px; fill: var(--gold); }

/* ============================================
   HEADER
   ============================================ */
.header { position: sticky; top: 0; z-index: 1000; background: var(--white); box-shadow: var(--shadow); }
/* Vertical-only padding: shorthand "12px 0" wiped .container's horizontal gutter,
   leaving the logo 24px left of every other element's shared edge. */
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 12px; padding-bottom: 12px; }
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo img { height: 52px; width: auto; transition: height var(--transition); }
.header.scrolled .logo img { height: 42px; }

.nav-desktop { display: flex; align-items: center; gap: 4px; }
.nav-desktop > a, .nav-item > button.nav-toggle {
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 0.92rem; font-weight: 700; color: var(--navy);
  padding: 10px 14px; border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}
.nav-desktop > a:hover, .nav-item:hover > button.nav-toggle, .nav-item.open > button.nav-toggle { color: var(--gold-dark); background: var(--cream); }
.nav-item { position: relative; }
.nav-toggle svg { width: 11px; height: 11px; fill: currentColor; transition: transform var(--transition); }
.nav-item:hover .nav-toggle svg, .nav-item.open .nav-toggle svg { transform: rotate(180deg); }
.dropdown {
  position: absolute; top: 100%; left: 0; margin-top: 6px;
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  min-width: 260px; padding: 10px; opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  border: 1px solid var(--line);
}
.nav-item:hover .dropdown, .nav-item.open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a { display: block; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 0.88rem; font-weight: 600; color: var(--text); }
.dropdown a:hover { background: var(--cream); color: var(--gold-dark); }
.dropdown .dropdown-divider { height: 1px; background: var(--line); margin: 6px 4px; }

.header-cta-group { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
/* Phone numbers stay in the body face: Rye renders parentheses as curly braces,
   so "(979)" set in the display font reads as the typo "{979}". */
.header-phone { display: flex; align-items: center; gap: 6px; font-family: var(--font-body); font-weight: 800; font-size: 1.08rem; letter-spacing: 0.01em; color: var(--navy); }
.header-phone svg { width: 16px; height: 16px; fill: var(--gold-dark); }
/* The number already lives in the utility bar; below 1280px it costs nav room */
@media (max-width: 1280px) { .header-phone { display: none; } }

/* Hamburger */
.hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; z-index: 1201; }
.hamburger span { display: block; width: 26px; height: 3px; background: var(--navy); border-radius: 2px; transition: var(--transition); }
.hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ============================================
   MOBILE FLYOUT DRAWER: full-screen, branded
   ============================================ */
.drawer-overlay {
  position: fixed; inset: 0; background: rgba(11,33,54,0.55); backdrop-filter: blur(2px);
  z-index: 1198; opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition);
}
.drawer-overlay.open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; right: 0; width: 100%; max-width: 420px; height: 100vh; height: 100dvh;
  background: var(--navy); z-index: 1199; visibility: hidden;
  transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), visibility 0.35s;
  display: flex; flex-direction: column; overflow: hidden;
}
.drawer.open { transform: translateX(0); visibility: visible; }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px; border-bottom: 1px solid var(--line-dark); flex-shrink: 0;
}
.drawer-head img { height: 38px; width: auto; }
.drawer-close { width: 40px; height: 40px; border-radius: 999px; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; }
.drawer-close svg { width: 18px; height: 18px; fill: var(--white); }
.drawer-body { flex: 1; overflow-y: auto; padding: 10px 12px 20px; }
.drawer-link { display: block; padding: 15px 12px; font-size: 1.02rem; font-weight: 700; color: var(--white); border-bottom: 1px solid var(--line-dark); }
.drawer-group { border-bottom: 1px solid var(--line-dark); }
.drawer-group-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 15px 12px; font-size: 1.02rem; font-weight: 700; color: var(--white);
}
.drawer-group-toggle svg { width: 13px; height: 13px; fill: var(--gold); transition: transform var(--transition); flex-shrink: 0; }
.drawer-group.open .drawer-group-toggle svg { transform: rotate(180deg); }
.drawer-submenu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; background: rgba(255,255,255,0.04); }
.drawer-group.open .drawer-submenu { max-height: 500px; }
.drawer-submenu a { display: block; padding: 12px 12px 12px 26px; font-size: 0.92rem; font-weight: 600; color: rgba(255,255,255,0.82); }
.drawer-submenu a:hover { color: var(--gold-light); }
.drawer-footer { padding: 18px 22px 26px; border-top: 1px solid var(--line-dark); flex-shrink: 0; }
.drawer-footer .btn { width: 100%; margin-bottom: 10px; }
.drawer-phone { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: 800; font-size: 1.15rem; color: var(--gold-light); padding: 6px 0 14px; }
.drawer-phone svg { width: 16px; height: 16px; fill: var(--gold-light); }
.drawer-meta { text-align: center; font-size: 0.78rem; color: rgba(255,255,255,0.6); line-height: 1.8; }

/* ============================================
   HERO: qualitydoor-directed split, blended photo
   ============================================ */
.hero { position: relative; color: var(--white); overflow: hidden; }
.hero-photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 65%;
}
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--navy) 0%, var(--navy) 30%, rgba(11,33,54,0.88) 42%, rgba(11,33,54,0.55) 58%, rgba(11,33,54,0.28) 100%);
}
.hero-inner { position: relative; z-index: 2; padding-top: 68px; padding-bottom: 60px; }
/* Three grid children (content / card / trust) so mobile can re-order the card
   directly under the headline instead of below every bullet. On desktop the
   trust list sits under the content in the left column; the card spans both rows. */
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; grid-template-areas: "content card" "trust card"; gap: 18px 40px; align-items: center; }
.hero-content { grid-area: content; }
.hero-card { grid-area: card; }
.hero-grid > .hero-trust-list { grid-area: trust; align-self: start; }
.hero-eyebrow { font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold-light); margin-bottom: 16px; }
/* The h1 carries the keyword for SEO, not the visual message -- the eyebrow above and the
   headline below do the actual selling. Kept deliberately quiet (small, muted, lighter
   weight) so it doesn't compete with or blend into the eyebrow's bold gold trust line. */
.hero h1 { font-size: 0.78rem; font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.5); margin-bottom: 12px; }
.hero-headline { font-family: var(--font-display); font-size: 3.1rem; line-height: 1.08; color: var(--white); margin-bottom: 18px; }
.hero-headline span { color: var(--gold); }
.hero-sub { font-size: 1.08rem; color: rgba(255,255,255,0.88); max-width: 500px; margin-bottom: 26px; }

/* Sub-page hero modifiers (repair/installation/broken-spring): replace what used to be
   inline styles so the desktop-only values never leak into the mobile breakpoint. Fixes
   a real bug: the inline grid-template-columns override previously hardcoded the 2-col
   desktop split at 375px too, pushing the hero-card ~149px off-canvas (clipped by
   overflow-x:clip, invisible rather than scrollable). */
.hero-inner-compact { padding-top: 52px; padding-bottom: 48px; }
.hero-grid-wide { grid-template-columns: 1.15fr 0.85fr; }
@media (min-width: 1081px) { .hero-grid-wide { grid-template-columns: 1.3fr 0.7fr; } }
.hero-headline-compact { font-size: 2.5rem; }

.hero-rating { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 22px; }
.hero-rating .stars { color: var(--gold); font-size: 1.1rem; letter-spacing: 2px; }
.hero-rating .rating-text { font-size: 0.88rem; font-weight: 700; color: var(--white); white-space: nowrap; }
.hero-rating a { font-size: 0.82rem; color: rgba(255,255,255,0.7); text-decoration: underline; white-space: nowrap; }

.hero-trust-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.hero-trust-item { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; font-weight: 600; color: var(--white); }
.hero-trust-item svg { width: 19px; height: 19px; fill: var(--gold); flex-shrink: 0; }

/* Hero call-card with above-the-fold lead form */
.hero-card { background: var(--white); border-radius: var(--radius); padding: 28px 28px 24px; box-shadow: var(--shadow-lg); color: var(--text); }
.hero-card h3 { font-family: var(--font-display); font-size: 1.6rem; color: var(--navy); margin-bottom: 6px; line-height: 1.2; }
.hero-card .card-sub { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 18px; }
.hero-card .card-phone-btn { display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-body); font-weight: 800; font-size: 1.2rem; letter-spacing: 0.01em; }
.hero-card .card-phone-btn svg { width: 18px; height: 18px; fill: currentColor; }
.hero-card .btn { width: 100%; }
.card-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0 14px; font-size: 0.72rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }
.card-divider::before, .card-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.hero-form { display: flex; flex-direction: column; gap: 10px; }
.hero-form input, .hero-form select {
  width: 100%; min-width: 0; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1.5px solid #D5DCE4; background: #F7F9FB; color: var(--text);
  font-family: var(--font-body); font-size: 0.92rem;
}
.hero-form select:invalid { color: var(--text-muted); }
.hero-form input:focus, .hero-form select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(234,155,59,0.25); }
.hero-form .btn { margin-top: 2px; }
.card-note { text-align: center; font-size: 0.76rem; color: var(--text-muted); margin-top: 12px; }
.hero-card .form-success h4 { font-family: var(--font-display); color: var(--navy); font-size: 1.3rem; margin-bottom: 6px; }
.hero-card .form-success p { font-size: 0.9rem; color: var(--text-muted); }

/* ============================================
   SOCIAL PROOF STRIP
   ============================================ */
.proof-strip { background: var(--white); border-bottom: 1px solid var(--line); padding: 22px 0; }
.proof-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 30px 44px; }
.proof-item { display: flex; align-items: center; gap: 9px; font-size: 0.85rem; font-weight: 700; color: var(--navy); }
.proof-item svg { width: 22px; height: 22px; fill: var(--gold-dark); flex-shrink: 0; }

/* ============================================
   SPECIAL OFFER BAND
   ============================================ */
.offer-band { background: linear-gradient(120deg, var(--gold) 0%, var(--gold-dark) 100%); color: var(--navy); padding: 26px 0; }
.offer-inner { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; text-align: center; }
.offer-text strong { font-family: var(--font-display); font-size: 1.5rem; display: block; }
.offer-text span { font-size: 0.92rem; font-weight: 600; }

/* ============================================
   SECTION HEADER
   ============================================ */
.section { padding: 84px 0; }
.section-cream { background: var(--cream); }
.section-navy { background: var(--navy); color: var(--white); }
.section-navy h1, .section-navy h2 { color: var(--white); }
.section-header { text-align: center; max-width: 700px; margin: 0 auto 48px; }
.section-label { font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold-dark); margin-bottom: 10px; }
.section-navy .section-label { color: var(--gold-light); }
.section-header h2 { font-size: 2.5rem; margin-bottom: 12px; }
.section-header p { font-size: 1.02rem; color: var(--text-muted); }
.section-navy .section-header p { color: rgba(255,255,255,0.78); }

/* ============================================
   SERVICES GRID
   ============================================ */
/* Photo-topped service cards: real job photos, not icon circles */
.services-primary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 56px; }
.service-primary-card {
  background: var(--white); border-radius: var(--radius); padding: 0; overflow: hidden;
  box-shadow: var(--shadow); border: 1px solid var(--line); transition: transform var(--transition), box-shadow var(--transition);
  display: flex; flex-direction: column;
}
.service-primary-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.service-photo { aspect-ratio: 16 / 10; overflow: hidden; }
.service-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; }
.service-primary-card:hover .service-photo img { transform: scale(1.04); }
.service-card-body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.service-primary-card h3 { font-size: 1.5rem; margin-bottom: 8px; }
.service-primary-card p { font-size: 0.92rem; color: var(--text-muted); margin-bottom: 16px; flex: 1; }
.service-primary-card .card-link { font-weight: 800; font-size: 0.82rem; color: var(--gold-dark); text-transform: uppercase; letter-spacing: 0.04em; }

.issues-header { text-align: center; margin-bottom: 30px; }
.issues-header h3 { font-size: 1.6rem; }
.issues-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.issue-tile {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 20px 18px; text-align: center; font-weight: 700; font-size: 0.9rem; color: var(--navy);
  transition: all var(--transition);
}
.issue-tile:hover { background: var(--navy); color: var(--white); border-color: var(--navy); transform: translateY(-3px); }
.issue-tile.full-width { grid-column: 1 / -1; background: var(--cream-2); }

/* Issue detail grid: replaces a stack of single-paragraph full-width sections
   (previously 3-5 separate .section bands, each 84px/56px top+bottom padding,
   for what amounts to one short paragraph) with one section holding a scannable
   card grid. Cuts repeated identical-band scroll depth and varies the rhythm
   against the photo-paired feature blocks on the same page. */
.issue-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.issue-detail-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; }
.issue-detail-card .section-label { text-align: left; margin-bottom: 8px; }
.issue-detail-card h3 { font-size: 1.25rem; margin-bottom: 8px; }
.issue-detail-card p { font-size: 0.88rem; color: var(--text-muted); }

/* ============================================
   WHY / TRUST MERCHANDISING
   ============================================ */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.why-item { background: var(--white); border-radius: var(--radius); padding: 28px 22px; text-align: center; box-shadow: var(--shadow); }
.why-item .icon-circle { width: 60px; height: 60px; border-radius: 999px; background: var(--navy); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.why-item .icon-circle svg { width: 26px; height: 26px; fill: var(--gold); }
.why-item h3 { font-size: 1.15rem; margin-bottom: 6px; }
.why-item p { font-size: 0.86rem; color: var(--text-muted); }

.badge-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 28px; margin-top: 44px; padding-top: 40px; border-top: 1px solid var(--line); }
.badge-row .badge-label { width: 100%; text-align: center; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 6px; }
/* Real transparent-PNG brand marks. The old grayscale + 0.75 opacity existed to tame
   mismatched JPGs that each carried their own baked white box; not needed now. */
.badge-item { height: 34px; opacity: 0.92; transition: opacity var(--transition); }
.badge-item:hover { opacity: 1; }

/* ============================================
   PRICING TRANSPARENCY
   ============================================ */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pricing-card { background: var(--navy-3); color: var(--white); border-radius: var(--radius); padding: 30px 26px; text-align: center; border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 10px 24px rgba(0,0,0,0.25); }
.pricing-card.featured { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%); color: var(--navy); border-color: transparent; }
.pricing-card .amount { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; margin-bottom: 6px; }
.pricing-card .label { font-size: 0.92rem; font-weight: 700; margin-bottom: 14px; }
.pricing-card p { font-size: 0.84rem; opacity: 0.85; }
.pricing-note { text-align: center; margin-top: 26px; font-size: 0.85rem; color: var(--text-muted); }

/* ============================================
   ABOUT PREVIEW
   ============================================ */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.about-photo { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); }
.about-content .section-label { text-align: left; }
.about-content h2 { font-size: 2.3rem; margin-bottom: 16px; text-align: left; }
.about-content p { font-size: 1rem; color: var(--text-muted); margin-bottom: 16px; }
.about-signoff { display: flex; align-items: center; gap: 14px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.about-signoff .sign-name { font-family: var(--font-display); font-size: 1.3rem; color: var(--navy); }
.about-signoff .sign-title { font-size: 0.82rem; color: var(--text-muted); }

/* Pull-quote (About page): a real, named-technician customer quote in large serif
   type, deliberately NOT another icon-in-a-box card so the page doesn't just repeat
   the homepage's why-grid/services-primary card pattern verbatim. */
.pullquote-wrap { max-width: 720px; margin: 0 auto; text-align: center; }
.pullquote-wrap p { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.35; color: var(--navy); margin-bottom: 14px; }
.pullquote-attr { font-size: 0.85rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }

/* Promise list (About page): a checklist band, distinct from the card-grid
   treatment used everywhere else on the site. */
.promise-list { max-width: 720px; margin: 0 auto; }
.promise-item { display: flex; align-items: flex-start; gap: 18px; padding: 22px 4px; border-bottom: 1px solid var(--line); }
.promise-item:last-child { border-bottom: none; }
.promise-item svg { width: 24px; height: 24px; fill: var(--green); flex-shrink: 0; margin-top: 3px; }
.promise-item h3 { font-size: 1.05rem; margin-bottom: 4px; }
.promise-item p { font-size: 0.9rem; color: var(--text-muted); }

/* ============================================
   REVIEWS
   ============================================ */
.google-badge { background: var(--white); padding: 18px 30px; border-radius: var(--radius); box-shadow: var(--shadow); display: inline-flex; align-items: center; gap: 14px; margin-bottom: 44px; }
.google-badge .rating { font-family: var(--font-display); font-size: 2.4rem; color: var(--navy); }
.google-badge .stars { color: var(--gold); font-size: 1.1rem; letter-spacing: 2px; }
.google-badge .count { font-size: 0.82rem; color: var(--text-muted); }
.reviews-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.review-card { background: var(--white); border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow); position: relative; display: flex; flex-direction: column; }
.review-stars { color: var(--gold); font-size: 0.95rem; letter-spacing: 2px; margin-bottom: 12px; }
.review-text { font-size: 0.87rem; color: var(--text); margin-bottom: 16px; line-height: 1.65; flex: 1; }
.review-author { font-weight: 800; font-size: 0.88rem; color: var(--navy); }
.review-date { font-size: 0.76rem; color: var(--text-muted); }
.review-source { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--text-muted); margin-top: 6px; }
.review-source svg { width: 12px; height: 12px; }
.reviews-cta { text-align: center; margin-top: 36px; }

/* ============================================
   SERVICE AREA (3 real pricing zones)
   ============================================ */
/* Service area: the real branded truck next to the three coverage zones.
   The truck shot is the strongest trust asset in the photo set; it was
   previously buried on the About page only. */
.area-wrap { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: center; }
.area-photo { margin: 0; }
.area-photo img { border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 100%; }
.area-photo figcaption { font-size: 0.8rem; color: rgba(255,255,255,0.6); margin-top: 12px; text-align: center; }
.area-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.area-card { background: rgba(255,255,255,0.06); border: 1px solid var(--line-dark); border-radius: var(--radius); padding: 22px 26px; text-align: left; }
.area-card h4 { color: var(--gold-light); font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 6px; }
.area-card p { font-size: 0.86rem; color: rgba(255,255,255,0.78); }

/* ============================================
   FAQ
   ============================================ */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 4px; text-align: left; font-size: 1.05rem; font-weight: 700; color: var(--navy); }
.faq-question svg { width: 16px; height: 16px; fill: var(--gold-dark); flex-shrink: 0; transition: transform var(--transition); }
.faq-item.open .faq-question svg { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-item.open .faq-answer { max-height: 400px; }
.faq-answer p { padding: 0 4px 22px; font-size: 0.94rem; color: var(--text-muted); line-height: 1.7; }

/* ============================================
   BOTTOM CTA
   ============================================ */
.bottom-cta { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%); color: var(--white); padding: 80px 0; text-align: center; position: relative; overflow: hidden; }
.bottom-cta::before { content: ''; position: absolute; top: -30%; right: -10%; width: 50%; height: 160%; background: radial-gradient(ellipse, rgba(234,155,59,0.16) 0%, transparent 70%); }
.bottom-cta-inner { position: relative; z-index: 1; }
.bottom-cta h2 { color: var(--white); font-size: 2.6rem; margin-bottom: 10px; }
.bottom-cta p { font-size: 1.05rem; opacity: 0.85; margin-bottom: 30px; max-width: 560px; margin-left: auto; margin-right: auto; }
.bottom-cta-btns { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* ============================================
   FOOTER
   ============================================ */
.footer { background: var(--navy); color: rgba(255,255,255,0.85); padding: 64px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: 40px; padding-bottom: 40px; }
.footer-brand img { height: 44px; margin-bottom: 14px; }
.footer-brand p { font-size: 0.87rem; opacity: 0.75; line-height: 1.7; margin-bottom: 16px; }
.footer h4 { font-family: var(--font-body); font-weight: 800; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold-light); margin-bottom: 16px; }
.footer-links a { display: block; padding: 4px 0; font-size: 0.87rem; opacity: 0.78; transition: opacity var(--transition); }
.footer-links a:hover { opacity: 1; color: var(--gold-light); }
.footer-contact p { font-size: 0.87rem; opacity: 0.78; margin-bottom: 10px; display: flex; align-items: flex-start; gap: 9px; }
.footer-contact svg { width: 15px; height: 15px; fill: var(--gold); flex-shrink: 0; margin-top: 2px; }
/* White-ink marks sit directly on the navy now, so the white pill plates are gone. */
.footer-badges { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; padding: 28px 0; border-top: 1px solid var(--line-dark); }
.footer-badges .badge-label { width: 100%; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.45); margin-bottom: -8px; }
.footer-badges img { height: 26px; width: auto; opacity: 0.9; transition: opacity var(--transition); }
.footer-badges img:hover { opacity: 1; }
.footer-bottom { border-top: 1px solid var(--line-dark); padding: 22px 0; display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; opacity: 0.6; flex-wrap: wrap; gap: 12px; }
.footer-legal { display: flex; gap: 18px; align-items: center; }
.footer-legal a { text-decoration: underline; }
.back-to-top { display: flex; align-items: center; gap: 6px; font-weight: 700; opacity: 0.85 !important; }
.back-to-top svg { width: 14px; height: 14px; fill: var(--gold); }

/* ============================================
   MOBILE STICKY CTA
   ============================================ */
/* Mobile bottom bar: nav + CTA in one. Navy plate with a stitched gold top
   seam, Menu and Call flanking a raised gold hat button for Schedule. */
.mobile-cta-bar {
  display: none; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 900;
  background: var(--navy);
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 7px);
  border-top: 2px solid var(--gold);
  box-shadow: 0 -10px 30px rgba(11,33,54,0.45);
}
.mobile-cta-bar::before {
  content: ''; position: absolute; top: 2px; left: 0; right: 0; height: 3px;
  background-image: repeating-linear-gradient(90deg, rgba(234,155,59,0.55) 0 6px, transparent 6px 12px);
}
.mobile-bar-inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  justify-items: center; padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
}
.bar-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: rgba(255,255,255,0.9); font-size: 0.66rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.07em;
  padding: 2px 14px; background: none; border: none; font-family: var(--font-body);
}
.bar-item svg { width: 22px; height: 22px; fill: var(--gold); }
.bar-item:active { color: var(--gold-light); }
.bar-fab {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  margin-top: -30px;
}
.bar-fab .fab-circle {
  width: 60px; height: 60px; border-radius: 999px;
  background: var(--gold); border: 2px solid var(--navy);
  box-shadow: 0 0 0 5px var(--navy), 0 0 0 7px rgba(234,155,59,0.35), 0 8px 18px rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.12s ease;
}
.bar-fab:active .fab-circle { transform: translateY(2px); }
/* Real navy hat asset now, instead of faking it with a brightness(0) filter */
.bar-fab .fab-circle img { height: 28px; width: auto; }
.bar-fab span {
  color: var(--gold-light); font-size: 0.66rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.07em;
}

/* Scroll reveal: hidden state only applies once JS has tagged <html class="js">,
   so content is never invisible if scripts fail; reduced-motion users skip it. */
html.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
html.js .reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1080px) {
  .hero-headline { font-size: 2.6rem; }
  .services-primary, .why-grid, .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .area-wrap { gap: 32px; }
  .issues-grid { grid-template-columns: repeat(3, 1fr); }
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-desktop { gap: 0; }
}
@media (max-width: 1080.5px) {
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-photo { order: -1; }
}
@media (max-width: 1080px) {
  .nav-desktop { display: none; }
  .hamburger { display: none; }
  .header-phone { display: none; }
  .header-cta-group { display: none; }
  /* Centered logo, breathing room; nav lives in the bottom bar */
  .header-inner { justify-content: center; padding-top: 18px; padding-bottom: 18px; }
  .logo img { height: 42px; }
  .mobile-cta-bar { display: block; }
  body { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  .reviews-cta .btn { white-space: normal; padding: 14px 20px; text-align: center; max-width: 100%; }
  /* Card re-orders directly under the headline block; trust pills follow it */
  .hero-grid { grid-template-columns: 1fr; grid-template-areas: "content" "card" "trust"; gap: 24px; }
  .hero-photo { background-position: center 70%; }
  .hero-scrim { background: linear-gradient(180deg, rgba(11,33,54,0.5) 0%, var(--navy) 55%, var(--navy) 100%); }
  .hero-headline { font-size: 2.15rem; margin-bottom: 12px; }
  .hero .hero-inner-compact { padding-top: 36px; padding-bottom: 32px; }
  .hero-headline-compact { font-size: 1.9rem; }
  /* Tighten the mobile hero's vertical rhythm -- desktop margins ported straight down
     stacked 7 content blocks (2 eyebrows, headline, review row, paragraph, 3-item trust
     list, then the card) into a hero taller than the viewport before any CTA appeared. */
  /* The keyword h1 is for SEO, not for a mobile visitor to read -- on a narrow screen it
     was just one more line to wade through before the actual headline. Visually hidden,
     still in the DOM and readable by crawlers/screen readers. */
  .hero h1 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  /* Compound selector, not just .hero-inner -- it also carries the .container class, and
     .container's own mobile padding rule (below, same specificity) was silently winning
     the cascade on source order and wiping this out entirely every time. This is why the
     header kept reading as flush against the hero text no matter what padding was set here. */
  .hero .hero-inner { padding-top: 56px; padding-bottom: 40px; }
  .hero-eyebrow { margin-bottom: 16px; font-size: 0.78rem; }
  .hero-rating { margin-bottom: 18px; }
  .hero-sub { margin-bottom: 22px; font-size: 1rem; }
  .hero-trust-list { flex-direction: row; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 4px; }
  .hero-trust-item { font-size: 0.78rem; font-weight: 700; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 7px 12px 7px 8px; gap: 6px; }
  .hero-trust-item svg { width: 14px; height: 14px; }
  .section { padding: 56px 0; }
  .section-header h2, .about-content h2 { font-size: 1.9rem; }
  .services-primary, .why-grid, .pricing-grid, .reviews-grid { grid-template-columns: 1fr; }
  .area-wrap { grid-template-columns: 1fr; gap: 26px; }
  .area-card { text-align: center; }
  .issues-grid { grid-template-columns: repeat(2, 1fr); }
  .issue-tile.full-width { grid-column: 1 / -1; }
  .issue-tile:nth-last-child(2) { grid-column: 1 / -1; }
  .issue-detail-grid { grid-template-columns: 1fr; }
  .offer-inner { flex-direction: column; gap: 14px; }
  .bottom-cta { padding: 56px 0; }
  .bottom-cta-btns { flex-direction: column; width: 100%; }
  .bottom-cta-btns .btn { width: 100%; }
  .proof-row { gap: 18px 26px; }
  .badge-row { gap: 20px; }
  .footer { padding: 48px 0 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .pullquote-row { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 480px) {
  .hero-headline { font-size: 1.85rem; }
  .hero-headline-compact { font-size: 1.6rem; }
  .hero-card { padding: 22px 20px; }
  .utility-left { display: none; }
  .utility-inner { justify-content: center; }
  /* Horizontal-only: the shorthand "0 18px" also set padding-top/bottom to 0,
     and since this rule sits last in the cascade it silently stripped vertical
     padding from every element that carries .container (the mobile header's
     "logo touching both rows" bug). */
  .container { padding-left: 18px; padding-right: 18px; }
  .section-header h2, .about-content h2 { font-size: 1.6rem; }
  .google-badge { padding: 14px 20px; gap: 10px; }
  .google-badge .rating { font-size: 1.9rem; }
}

/* ============================================
   ART DIRECTION LAYER (2026-08-18)
   Vintage Texas sign-shop / letterpress print.
   Everything below layers craft onto the existing structure:
   paper grain, rickrack trim, star ornaments, ticket + coupon
   + hang-tag motifs, stitched dividers, letterpress depth.
   ============================================ */

/* Paper grain over the whole page: one fixed overlay, print-shop feel.
   Sits above every band (incl. photos, like film grain) but below nothing
   interactive; pointer-events none. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 3000; pointer-events: none;
  opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* Navy bands get a faint diagonal hatch, like inked linework */
.section-navy, .bottom-cta, .footer {
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 7px);
}
.bottom-cta { background-color: var(--navy); }

/* Letterpress depth on display headings over navy */
.section-navy h1, .section-navy h2, .bottom-cta h2 { text-shadow: 3px 3px 0 rgba(0,0,0,0.32); }

/* Section labels flanked by Texas stars */
.section-label::before { content: '\2605\00a0\00a0'; color: var(--gold); }
.section-label::after { content: '\00a0\00a0\2605'; color: var(--gold); }

/* Gold rickrack trim: zigzag ribbon where key bands meet */
.proof-strip { position: relative; }
.proof-strip::before,
.section-navy::before,
.bottom-cta::after {
  content: ''; position: absolute; top: 4px; left: 0; right: 0; height: 12px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='12'><path d='M0 10 L6 3 L12 10 L18 3 L24 10' stroke='%23EA9B3B' stroke-width='2.2' fill='none' stroke-linecap='round'/></svg>") repeat-x center;
  opacity: 0.85; pointer-events: none;
}
.section-navy { position: relative; }
.bottom-cta::after { top: 10px; }

/* Stitched (dashed) dividers instead of hairlines: denim-seam detail */
.badge-row { border-top: 2px dashed var(--line); }
.about-signoff { border-top: 2px dashed var(--line); }
.faq-item { border-bottom: 2px dashed var(--line); }
.footer-badges, .footer-bottom { border-top: 2px dashed rgba(255,255,255,0.16); }
.drawer-head { border-bottom: 2px dashed rgba(255,255,255,0.18); }

/* ---- Hero ---- */
/* Warmer, more cinematic scrim + a hint of gold at the horizon */
.hero-scrim {
  background:
    linear-gradient(100deg, var(--navy) 0%, var(--navy) 28%, rgba(11,33,54,0.9) 42%, rgba(11,33,54,0.55) 60%, rgba(19,32,50,0.35) 100%),
    linear-gradient(0deg, rgba(234,155,59,0.14) 0%, transparent 30%);
}
/* Hand-drawn white underline stroke under the closing words only (a span
   background across the whole wrapped headline collides with lower lines) */
.u-stroke {
  white-space: nowrap;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='10' preserveAspectRatio='none' viewBox='0 0 240 10'><path d='M3 7 Q60 2 120 5 T237 4' stroke='%23FBF3E3' stroke-width='4' fill='none' stroke-linecap='round'/></svg>") no-repeat bottom left / 100% 8px;
  padding-bottom: 10px;
}

/* Hero card as a service ticket: navy head with the hat mark, perforated
   divider, white body */
.hero-card { padding: 0; overflow: hidden; }
.card-head {
  background: var(--navy); color: var(--white);
  padding: 16px 26px 14px; display: flex; align-items: center; gap: 12px;
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 7px);
}
.card-head img { height: 30px; width: auto; flex-shrink: 0; }
.hero-card .card-head .card-head-title { color: var(--white); font-family: var(--font-display); font-size: 1.35rem; line-height: 1.2; margin: 0; }
.card-body-inner { padding: 20px 26px 20px; position: relative; }
/* ticket perforation between head and body */
.card-body-inner::before {
  content: ''; position: absolute; top: 0; left: 12px; right: 12px; height: 0;
  border-top: 2px dashed var(--line);
}
.hero-card .card-sub { margin-top: 2px; margin-bottom: 14px; }

/* ---- Proof strip: cream ribbon with stitched borders ---- */
.proof-strip { background: var(--cream); border-top: none; border-bottom: 2px dashed var(--line); padding: 26px 0 20px; }
.proof-item svg { fill: var(--gold-dark); }

/* ---- Offer band: the $79 tune-up as a clip-out coupon ---- */
.offer-band { padding: 34px 0; }
.coupon {
  position: relative; max-width: 860px; margin: 0 auto;
  background: var(--cream); border-radius: 6px;
  padding: 26px 34px;
  display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap;
  box-shadow: 4px 4px 0 rgba(11,33,54,0.35);
}
.coupon::before {
  content: ''; position: absolute; inset: 7px;
  border: 2px dashed var(--gold-dark); border-radius: 4px; pointer-events: none;
}
.coupon-scissors {
  position: absolute; top: -16px; left: 44px;
  background: var(--cream); border: 2px dashed var(--gold-dark); border-radius: 6px;
  padding: 3px 10px; line-height: 0;
}
.coupon-scissors svg { width: 22px; height: 22px; fill: var(--navy); transform: rotate(180deg); }
.coupon .offer-text { text-align: left; }
.coupon .offer-text strong { color: var(--navy); }
.coupon .offer-text span { color: var(--text); display: block; }

/* ---- Pricing: punched hang-tags ---- */
.pricing-card {
  position: relative; border-radius: 10px;
  padding-top: 40px;
  box-shadow: 5px 5px 0 rgba(0,0,0,0.28);
}
.pricing-card::before {
  content: ''; position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 999px;
  background: var(--navy); box-shadow: 0 0 0 4px rgba(255,255,255,0.55);
}
.pricing-card.featured::before { background: var(--navy); box-shadow: 0 0 0 4px rgba(11,33,54,0.35); }
.pricing-card:nth-child(1) { transform: rotate(-1.2deg); }
.pricing-card:nth-child(3) { transform: rotate(1.2deg); }
.pricing-grid { align-items: center; }

/* ---- Reviews: pinned, slightly askew cards with a big printer's quote ---- */
.review-card { overflow: hidden; transition: transform var(--transition); }
.review-card::before {
  content: '\201C'; position: absolute; top: 8px; right: 16px;
  font-family: var(--font-display); font-size: 4.2rem; line-height: 0.8;
  color: var(--cream-2); pointer-events: none;
}
.review-card:nth-child(odd) { transform: rotate(-0.7deg); }
.review-card:nth-child(even) { transform: rotate(0.7deg); }
.review-card:hover { transform: rotate(0deg) translateY(-4px); box-shadow: var(--shadow-md); }
.review-stars, .review-text, .review-author { position: relative; }

/* ---- Why grid: badge rings ---- */
.why-item .icon-circle { border: 2px solid var(--gold); box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--cream-2); }

/* ---- Issue tiles: star bullets + letterpress hover ---- */
.issue-tile::before { content: '\2605\00a0\00a0'; color: var(--gold); font-size: 0.8em; }
.issue-tile { border: 1.5px solid var(--line); }
.issue-tile:hover { box-shadow: 3px 3px 0 var(--gold); }

/* ---- Bottom CTA: hat ornament ---- */
.cta-hat { height: 44px; width: auto; margin: 0 auto 14px; filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.3)); }

@media (max-width: 1080px) {
  .coupon { padding: 24px 22px; gap: 16px; }
  .coupon .offer-text { text-align: center; }
  .pricing-card:nth-child(1), .pricing-card:nth-child(3) { transform: none; }
  .review-card:nth-child(odd), .review-card:nth-child(even) { transform: none; }
  .card-head { padding: 14px 20px 12px; }
  .card-body-inner { padding: 18px 20px 18px; }
}

/* ============================================
   LONG-TAIL SERVICE PAGE COMPONENTS (2026-08-18)
   ============================================ */

/* When the sub-page h1 IS the eyebrow, restore eyebrow styling. The generic
   `.hero h1` rule (specificity 0,1,1) was beating `.hero-eyebrow` (0,1,0),
   so the keyword line rendered muted grey instead of the gold accent. */
.hero h1.hero-eyebrow {
  font-size: 0.82rem; font-weight: 800; letter-spacing: 0.1em;
  color: var(--gold-light); margin-bottom: 14px;
}

/* Numbered process steps: gold letterpress numerals on a stitched rail */
.step-list { display: grid; gap: 0; max-width: 780px; }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: 20px;
  padding: 22px 0; border-bottom: 2px dashed var(--line);
}
.step:last-child { border-bottom: none; }
.step-num {
  width: 46px; height: 46px; border-radius: 999px;
  background: var(--gold); color: var(--navy);
  border: 2px solid var(--navy); box-shadow: 3px 3px 0 var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.25rem; line-height: 1;
}
.step h3 { font-size: 1.15rem; margin-bottom: 5px; }
.step p { font-size: 0.93rem; color: var(--text-muted); }

/* Checklist: green ticks, two columns */
.check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px; }
.check-item { display: flex; align-items: flex-start; gap: 11px; font-size: 0.94rem; }
.check-item svg { width: 21px; height: 21px; fill: var(--green); flex-shrink: 0; margin-top: 2px; }
.check-item strong { display: block; color: var(--navy); font-weight: 800; font-size: 0.94rem; }
.check-item span { color: var(--text-muted); font-size: 0.88rem; }

/* Spec table: cycle ratings. Letterpress header, stitched rows */
.spec-table-wrap { overflow-x: auto; max-width: 1010px; margin: 0 auto; padding-bottom: 8px; }
.spec-table { width: 100%; min-width: 640px; border-collapse: collapse; background: var(--white); border: 2px solid var(--navy); box-shadow: 5px 5px 0 var(--gold); }
.spec-table th {
  background: var(--navy); color: var(--white); text-align: left;
  font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 13px 14px; white-space: nowrap;
}
.spec-table td { padding: 13px 14px; font-size: 0.92rem; border-bottom: 1px dashed var(--line); }
.spec-table tr:last-child td { border-bottom: none; }
.spec-table td:first-child { font-family: var(--font-display); font-size: 1.05rem; color: var(--navy); white-space: nowrap; }
.spec-note { text-align: center; font-size: 0.82rem; color: var(--text-muted); margin-top: 16px; }

/* Spring type diagrams: framed drawings, not photos */
.diagram-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.diagram-card { background: var(--white); border: 2px solid var(--navy); border-radius: var(--radius); overflow: hidden; box-shadow: 5px 5px 0 rgba(11,33,54,0.18); }
.diagram-card .diagram-figure { background: var(--cream); border-bottom: 2px dashed var(--line); padding: 20px; }
.diagram-card svg { width: 100%; height: auto; display: block; }
.diagram-card .diagram-body { padding: 22px 24px 26px; }
.diagram-card h3 { font-size: 1.3rem; margin-bottom: 4px; }
.diagram-card .diagram-tag { font-size: 0.76rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold-dark); margin-bottom: 10px; }
.diagram-card p { font-size: 0.91rem; color: var(--text-muted); margin-bottom: 10px; }
.diagram-card p:last-child { margin-bottom: 0; }

/* Sign cards: symptom tiles with a gold rule */
.sign-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sign-card { background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 20px 22px; border-left: 5px solid var(--gold); }
.sign-card h3 { font-size: 1.05rem; margin-bottom: 5px; }
.sign-card p { font-size: 0.88rem; color: var(--text-muted); }

/* Photo + prose split that can lead with either side */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.split-photo img { border-radius: var(--radius); box-shadow: var(--shadow-md); width: 100%; }
.split-photo figcaption { font-size: 0.8rem; color: var(--text-muted); margin-top: 10px; }
.section-navy .split-photo figcaption { color: rgba(255,255,255,0.6); }
.split-copy h2 { text-align: left; font-size: 2.1rem; margin-bottom: 14px; }
.split-copy .section-label { text-align: left; }
.split-copy p { color: var(--text-muted); margin-bottom: 14px; }
.section-navy .split-copy p { color: rgba(255,255,255,0.8); }
.split-photo-first .split-photo { order: -1; }

/* Danger callout for the safety section */
.warn-box {
  background: var(--white); border: 2px solid var(--navy); border-left: 6px solid #B3392C;
  border-radius: var(--radius-sm); padding: 18px 22px; box-shadow: 4px 4px 0 rgba(11,33,54,0.18);
}
.warn-box strong { display: block; font-family: var(--font-display); font-size: 1.05rem; color: var(--navy); margin-bottom: 4px; }
.warn-box p { font-size: 0.9rem; color: var(--text-muted); margin: 0; }

@media (max-width: 1080px) {
  .sign-grid { grid-template-columns: repeat(2, 1fr); }
  .diagram-grid, .split { grid-template-columns: 1fr; gap: 28px; }
  .split-copy h2 { font-size: 1.7rem; }
  .split .split-photo { order: -1; }
}
@media (max-width: 640px) {
  .sign-grid { grid-template-columns: 1fr; }
  .check-grid { grid-template-columns: 1fr; }
  .step { grid-template-columns: auto 1fr; gap: 14px; }
}

/* ============================================
   PAGE HERO IMAGES (2026-08-18)
   Landscape master on desktop, portrait master below 1080px. The portrait files
   are independently composed, not crops, so the subject survives the tall frame.
   ============================================ */
.hero-photo.hero-home { background-image: url('../photos/hero-home-wide.jpg');
  background-image: image-set(url('../photos/hero-home-wide.webp') type('image/webp'), url('../photos/hero-home-wide.jpg') type('image/jpeg')); }
.hero-photo.hero-repair { background-image: url('../photos/hero-repair-wide.jpg');
  background-image: image-set(url('../photos/hero-repair-wide.webp') type('image/webp'), url('../photos/hero-repair-wide.jpg') type('image/jpeg')); }
.hero-photo.hero-install { background-image: url('../photos/hero-install-wide.jpg');
  background-image: image-set(url('../photos/hero-install-wide.webp') type('image/webp'), url('../photos/hero-install-wide.jpg') type('image/jpeg')); }
.hero-photo.hero-spring { background-image: url('../photos/hero-spring-wide.jpg');
  background-image: image-set(url('../photos/hero-spring-wide.webp') type('image/webp'), url('../photos/hero-spring-wide.jpg') type('image/jpeg')); }
@media (max-width: 1080px) {
  .hero-photo.hero-home { background-image: url('../photos/hero-home-tall.jpg');
  background-image: image-set(url('../photos/hero-home-tall.webp') type('image/webp'), url('../photos/hero-home-tall.jpg') type('image/jpeg')); }
  .hero-photo.hero-repair { background-image: url('../photos/hero-repair-tall.jpg');
  background-image: image-set(url('../photos/hero-repair-tall.webp') type('image/webp'), url('../photos/hero-repair-tall.jpg') type('image/jpeg')); }
  .hero-photo.hero-install { background-image: url('../photos/hero-install-tall.jpg');
  background-image: image-set(url('../photos/hero-install-tall.webp') type('image/webp'), url('../photos/hero-install-tall.jpg') type('image/jpeg')); }
  .hero-photo.hero-spring { background-image: url('../photos/hero-spring-tall.jpg');
  background-image: image-set(url('../photos/hero-spring-tall.webp') type('image/webp'), url('../photos/hero-spring-tall.jpg') type('image/jpeg')); }
}

/* ============================================
   ISSUE CARDS WITH PHOTOS + STYLE PICKER (2026-08-18)
   ============================================ */

/* Issue cards gain a photo header. The grid was text-only, which made five
   long-tail repair topics read as filler rather than as real services. */
.issue-detail-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.issue-photo { aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 2px dashed var(--line); }
.issue-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; }
.issue-detail-card:hover .issue-photo img { transform: scale(1.04); }
.issue-card-body { padding: 22px 24px 26px; }
.issue-card-body .section-label { text-align: left; margin-bottom: 8px; }

/* Style picker: a visual door chooser. Same facade and camera across the set,
   so the door itself is the only variable the eye has to compare. */
.style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.style-card {
  background: var(--white); border: 2px solid var(--navy); border-radius: var(--radius);
  overflow: hidden; box-shadow: 4px 4px 0 rgba(11,33,54,0.18);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.style-card:hover { transform: translate(2px,2px); box-shadow: 1px 1px 0 rgba(11,33,54,0.18); }
.style-card figure { margin: 0; }
.style-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-bottom: 2px solid var(--navy); }
.style-card figcaption { padding: 16px 18px 18px; }
.style-card h3 { font-size: 1.1rem; margin-bottom: 4px; }
.style-card p { font-size: 0.85rem; color: var(--text-muted); }
.style-note { text-align: center; font-size: 0.82rem; color: var(--text-muted); margin-top: 22px; }

@media (max-width: 1080px) {
  .style-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .style-grid { grid-template-columns: 1fr; }
}

/* ============================================
   ARTICLE / BLOG (2026-08-18)
   ============================================ */
.article-body { max-width: 760px; margin: 0 auto; }
.article-body h2 { font-size: 1.9rem; margin: 44px 0 14px; }
.article-body h2:first-child { margin-top: 0; }
.article-body p { font-size: 1.04rem; line-height: 1.75; color: var(--text); margin-bottom: 18px; }
.article-body ul, .article-body ol { margin: 0 0 20px 22px; }
.article-body li { font-size: 1.02rem; line-height: 1.7; color: var(--text); margin-bottom: 9px; }
.article-body li strong { color: var(--navy); }
.article-body .article-figure { margin: 30px 0; }
.article-body .article-figure img { border-radius: var(--radius); box-shadow: var(--shadow-md); width: 100%; }
.article-body .article-figure figcaption { font-size: 0.82rem; color: var(--text-muted); margin-top: 10px; text-align: center; }

.post-meta {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  font-size: 0.84rem; color: var(--text-muted);
  padding-bottom: 26px; margin-bottom: 34px; border-bottom: 2px dashed var(--line);
}
.post-meta .byline { font-weight: 800; color: var(--navy); }
.post-meta .dot { color: var(--gold); }

/* Blog index cards */
.post-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.post-card {
  background: var(--white); border: 2px solid var(--navy); border-radius: var(--radius);
  overflow: hidden; box-shadow: 4px 4px 0 rgba(11,33,54,0.18);
  transition: transform 0.12s ease, box-shadow 0.12s ease; display: flex; flex-direction: column;
}
.post-card:hover { transform: translate(2px,2px); box-shadow: 1px 1px 0 rgba(11,33,54,0.18); }
.post-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-bottom: 2px solid var(--navy); }
.post-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.post-card .post-cat { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold-dark); margin-bottom: 8px; }
.post-card h3 { font-size: 1.25rem; margin-bottom: 8px; line-height: 1.15; }
.post-card p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 14px; flex: 1; }
.post-card .card-link { font-weight: 800; font-size: 0.8rem; color: var(--gold-dark); text-transform: uppercase; letter-spacing: 0.04em; }

@media (max-width: 860px) {
  .post-grid { grid-template-columns: 1fr; }
  .article-body h2 { font-size: 1.6rem; }
}

/* ============================================
   ACCESSIBILITY (2026-08-18)
   ============================================ */
/* Text-safe gold. --gold-dark measures 2.91:1 on cream, which fails AA for normal text,
   so anything that is *type* uses this instead. Borders, icons and hover keep --gold-dark. */
:root { --gold-text: #965910; }

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 3001;
  background: var(--navy); color: var(--white);
  padding: 12px 20px; border-radius: 0 0 8px 8px;
  font-weight: 800; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.04em;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; outline: 3px solid var(--gold-light); outline-offset: 2px; }

/* One visible focus treatment for everything interactive, not just buttons */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 3px;
}
.section-navy a:focus-visible, .footer a:focus-visible, .drawer a:focus-visible,
.drawer button:focus-visible, .mobile-cta-bar a:focus-visible,
.mobile-cta-bar button:focus-visible, .bottom-cta a:focus-visible {
  outline-color: var(--gold-light);
}

/* Active page marker in the nav */
.nav-desktop a[aria-current="page"], .drawer-link[aria-current="page"] {
  color: var(--gold-text); text-decoration: underline; text-underline-offset: 5px;
}
.drawer-link[aria-current="page"] { color: var(--gold-light); }

/* Type that was using --gold-dark now uses the AA-safe token */
.section-label { color: var(--gold-text); }
.service-primary-card .card-link, .issue-detail-card .section-label,
.post-card .card-link, .post-card .post-cat, .diagram-card .diagram-tag,
.split-copy .section-label, .about-content .section-label { color: var(--gold-text); }
.nav-desktop > a:hover, .nav-item:hover > button.nav-toggle,
.nav-item.open > button.nav-toggle, .dropdown a:hover { color: var(--gold-text); }

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

/* The drawer transitioned `visibility` over 0.35s, which left it computed-hidden for the
   whole animation. Hidden elements cannot take focus, so focus() silently failed and fell
   to <body>: the drawer was unusable by keyboard and screen reader. Switch visibility
   immediately on open, and delay it to the end of the transition on close so the slide-out
   still animates. */
.drawer { transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), visibility 0s linear 0.35s; }
.drawer.open { transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), visibility 0s linear 0s; }

/* ============================================
   CONTRAST + TAP TARGET FIXES (2026-08-18)
   Found by the theme-route a11y crawl, not by my own palette audit: I checked the
   pairs I knew about and never checked gold-on-white, which is what star ratings
   actually render as.
   ============================================ */

/* Star ratings measured 2.27:1 on white and 2.06:1 on cream, against 4.5:1 for text
   and 3:1 even if you argue they are graphics. Both fail. Stars on NAVY keep the
   bright gold, which already passes at 7.20:1 and is the brand moment. */
:root { --star-gold: #9F6116; }
.review-stars, .google-badge .stars { color: var(--star-gold); }
.section-navy .stars, .hero-rating .stars, .bottom-cta .stars { color: var(--gold); }

/* One straggler the earlier a11y pass missed: a --gold-dark link on cream, 2.91:1 */
.contact-map-link, a.card-link, .split-copy a:not(.btn) { color: var(--gold-text); }

/* Tap targets. WCAG 2.2 AA (2.5.8) wants 24x24 CSS px for anything that is not an
   inline link inside a sentence. These are standalone nav and utility controls, so
   the exemption does not apply to them. */
.utility-phone, .back-to-top, .footer-legal a, .footer-links a {
  min-height: 24px; display: inline-flex; align-items: center;
}
.footer-links a { padding: 5px 0; }
.footer-legal { gap: 18px; row-gap: 6px; flex-wrap: wrap; }

/* Second a11y round, from the crawl's remaining findings */
/* Byline separators: purely decorative stars at 13px, 2.27:1. Darkened rather than
   argued about, and marked aria-hidden since they carry no information. */
.post-meta .dot { color: var(--gold-text); }
/* Utility-bar links and card links are standalone controls, not inline-in-sentence,
   so WCAG 2.2 2.5.8's inline exemption does not cover them. */
.utility-left a, .card-link, .drawer-phone, .footer-contact a {
  min-height: 24px; display: inline-flex; align-items: center;
}
.utility-inner { row-gap: 4px; }

/* Last tap finding: the hero rating's 'Read them' link at 21px */
.hero-rating a { min-height: 24px; display: inline-flex; align-items: center; }