/* ==========================================================================
   Pearland Locksmith - global stylesheet
   Self-contained apart from two Google webfonts (BioRhyme + Cabin),
   matched to the DryShield build. Swap to self-hosted woff2 if the
   extra request ever matters more than the brand match.
   ========================================================================== */

:root {
  /* Palette matched to the DryShield build: deep navy + #0078D8.
     --brass* names are kept as aliases so no downstream rule had to change. */
  --navy:        #0C1722;
  --navy-2:      #121D27;
  --navy-3:      #1B2C3C;
  --ink:         #16212B;
  --blue:        #0078D8;
  --blue-lt:     #2E9BF0;
  --blue-dk:     #0057A3;
  --blue-pale:   #E8F3FC;
  /* Blue TEXT on navy: #0078D8 is 4.03:1, under AA. Use this on dark surfaces. */
  --blue-on-dark:#2E9BF0;
  --brass:       var(--blue);
  --brass-2:     var(--blue-lt);
  --brass-dark:  var(--blue-dk);
  --text:        #4A5C6B;
  --text-muted:  #5E6C7A;   /* 5.4:1 on white. #7E8FA0 measured 3.32:1, under AA. */
  --bg:          #ffffff;
  --bg-soft:     #F2F6F9;
  --border:      #DFE7EE;
  --danger:      #d92d20;
  --success:     #0f9d58;
  --max:         1160px;
  --nav-h:       72px;
  --radius:      12px;
  --shadow-sm:   0 1px 2px rgba(15,26,38,.06), 0 2px 8px rgba(15,26,38,.05);
  --shadow-md:   0 4px 12px rgba(15,26,38,.08), 0 12px 32px -8px rgba(15,26,38,.12);
  --shadow-lg:   0 12px 40px -8px rgba(15,26,38,.22);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  /* No top padding: the nav is position:sticky and sits in normal flow beneath
     the .ds-top utility bar. It was fixed + padded before the topbar existed. */
  font-family: 'Cabin', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

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

h1, h2, h3, h4 {
  color: var(--ink);
  font-family: 'BioRhyme', Georgia, 'Times New Roman', serif;
  line-height: 1.18;
  margin: 0 0 .6em;
  letter-spacing: -.02em;
  font-weight: 700;
}

h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.25rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1.1em; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 22px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Skip link
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: var(--navy); color: #fff;
  padding: 12px 20px; font-weight: 700; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.site-nav {
  position: sticky; top: 0; z-index: 1000;
  height: var(--nav-h);
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-nav.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,.28); }

.nav-inner {
  max-width: var(--max); margin: 0 auto; padding: 0 22px;
  height: 100%; display: flex; align-items: center; gap: 20px;
}

.nav-brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; margin-right: auto; flex-shrink: 0;
}
.nav-brand svg { width: 30px; height: 30px; flex-shrink: 0; }
.nav-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.nav-brand-name { color: #fff; font-weight: 800; font-size: 1.06rem; letter-spacing: -.02em; }
.nav-brand-sub { color: var(--blue-on-dark); font-size: .68rem; font-weight: 700;
                 text-transform: uppercase; letter-spacing: .09em; }

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  color: rgba(255,255,255,.82); text-decoration: none;
  font-size: .93rem; font-weight: 600;
  padding: 9px 11px; border-radius: 8px;
  white-space: nowrap;              /* "Service Areas" must not wrap to two lines */
  transition: color .15s, background .15s;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.09); }

.nav-call {
  display: inline-flex; align-items: center; gap: 8px;
  /* White on #0078D8 is 4.49:1 and navy on it is 4.03:1, both under AA for this
     15.5px label. #0066B8 + white clears it at 5.9:1. */
  background: #0066B8; color: #fff !important;
  padding: 11px 18px !important; border-radius: 9px;
  font-weight: 800 !important; font-size: .97rem !important;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 6px 18px -6px rgba(0,120,216,.6);
  transition: transform .12s, background .15s;
}
/* Hover lifts but stays above AA: white on --blue (#0078D8) is only 4.49:1,
   so hover uses #0071C9 (4.99:1) rather than the raw brand blue. */
.nav-call:hover { background: #0071C9 !important; transform: translateY(-1px); }
.nav-call svg { width: 17px; height: 17px; }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  padding: 8px; margin-left: 4px;
}
.nav-toggle span {
  display: block; width: 24px; height: 2px; background: #fff;
  border-radius: 2px; transition: transform .2s, opacity .2s;
}
.nav-toggle span + span { margin-top: 6px; }
.nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav-toggle { display: block; order: 3; }
  .nav-call { order: 2; padding: 10px 14px !important; }
  .nav-call .nav-call-label { display: none; }
  .nav-links {
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    background: var(--navy); flex-direction: column; align-items: stretch;
    gap: 0; padding: 8px 14px 18px;
    border-bottom: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 18px 30px -12px rgba(0,0,0,.5);
    max-height: 0; overflow: hidden; transition: max-height .25s ease;
  }
  .nav-links.open { max-height: 70vh; overflow-y: auto; }
  .nav-links a { padding: 13px 12px; font-size: 1rem; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--navy);
  color: #fff;
  padding: 72px 0 78px;
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(760px 460px at 12% -10%, rgba(244,165,28,.20), transparent 62%),
    radial-gradient(620px 420px at 92% 8%,  rgba(56,132,200,.22), transparent 60%),
    linear-gradient(165deg, #0b1622 0%, #12263a 58%, #163049 100%);
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 100%);
}
/* Two-column hero: copy left, pin-tumbler artwork right. */
.hero-grid {
  display: grid; grid-template-columns: 1.06fr .94fr;
  gap: 48px; align-items: center;
}
.hero-inner { max-width: 620px; min-width: 0; }
.hero h1 { color: #fff; margin-bottom: .35em; }
.hero h1 em { font-style: normal; color: var(--brass); }
.hero-sub {
  font-size: clamp(1.02rem, 2vw, 1.18rem);
  color: rgba(255,255,255,.8); margin-bottom: 1.7em;
}

.hero-art { min-width: 0; display: flex; justify-content: center; }

/* Stage: positioning context for the floating cards. Padding leaves room for the
   cards to hang off the artwork on both sides without being clipped. */
.hero-art-stage {
  position: relative;
  width: 100%; max-width: 430px;
  padding: 0 0 26px;
}
.hero-art-stage > svg,
.hero-art-stage > .hero-photo {
  width: 100%; height: auto; display: block;
  border-radius: 26px;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.72);
}
/* Real photography drop-in uses the exact same slot. */
.hero-art-stage > .hero-photo {
  aspect-ratio: 46 / 44; object-fit: cover;
  border: 1px solid rgba(255,255,255,.14);
}

.hero-card {
  position: absolute; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.97);
  border-radius: 13px; padding: 11px 15px;
  box-shadow: 0 16px 38px -10px rgba(0,0,0,.55);
  font-size: .8rem; line-height: 1.3; color: var(--ink);
  backdrop-filter: blur(6px);
}
.hero-card-review { left: -22px; bottom: 54px; flex-direction: column; align-items: flex-start; gap: 3px; }
.hero-card-review .hc-stars { color: var(--brass); font-size: .82rem; letter-spacing: .06em; }
.hero-card-review .hc-body { color: var(--text-muted); font-size: .78rem; }
.hero-card-review .hc-body strong { color: var(--ink); font-size: .95rem; }

.hero-card-trust { right: -18px; top: 34px; max-width: 172px; }
.hero-card-trust svg { width: 22px; height: 22px; color: var(--success); flex-shrink: 0; }
.hero-card-trust div { font-weight: 700; font-size: .78rem; }
.hero-card-trust span { font-weight: 500; color: var(--text-muted); }

@media (max-width: 1080px) {
  .hero-card-review { left: -8px; }
  .hero-card-trust  { right: -6px; }
}
@media (max-width: 520px) {
  .hero-card { font-size: .72rem; padding: 8px 11px; gap: 8px; }
  .hero-card-review { left: -14px; bottom: 34px; }
  .hero-card-review .hc-body { font-size: .7rem; }
  .hero-card-review .hc-body strong { font-size: .86rem; }
  /* Wide enough that "Licensed, bonded" stays on one line. */
  .hero-card-trust  { right: -14px; top: 18px; max-width: 168px; }
  .hero-card-trust svg { width: 18px; height: 18px; }
  .hero-card-trust div { font-size: .71rem; }
}

/* On narrow screens the message and the phone button come FIRST. The artwork is
   decorative, so it must never push the headline or the call CTA below the fold. */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 38px; }
  .hero-inner { max-width: none; }
  .hero-art-stage { max-width: 320px; }
}
@media (max-width: 560px) {
  .hero { padding: 46px 0 56px; }
  .hero-art-stage { max-width: 250px; padding-bottom: 20px; }
}

.hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(244,165,28,.13);
  border: 1px solid rgba(244,165,28,.34);
  color: var(--brass-2);
  padding: 8px 16px; border-radius: 999px;
  font-size: .82rem; font-weight: 800;
  letter-spacing: .01em;
  margin-bottom: 22px;
}
.hero-badge svg { width: 15px; height: 15px; color: var(--brass); flex-shrink: 0; }

.hero-hours {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 20px 0 0; color: rgba(255,255,255,.7);
  font-size: .92rem; font-weight: 600;
}
.hero-hours svg { width: 17px; height: 17px; color: var(--brass); flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; }

/* Trust strip: full-width band under the hero grid, four even cells. */
.hero-trust {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-top: 52px; padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.13);
}
.hero-trust div {
  display: flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,.84); font-size: .92rem; font-weight: 600;
}
.hero-trust svg { width: 19px; height: 19px; color: var(--brass); flex-shrink: 0; }
@media (max-width: 860px) { .hero-trust { grid-template-columns: 1fr 1fr; gap: 16px 20px; } }
@media (max-width: 460px) { .hero-trust { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 27px; border-radius: 10px;
  font-weight: 800; font-size: 1.02rem; text-decoration: none;
  border: 0; cursor: pointer; transition: transform .12s, background .15s, box-shadow .15s;
  line-height: 1.2;
}
.btn svg { width: 19px; height: 19px; }
.btn-primary {
  background: linear-gradient(180deg, var(--brass-2) 0%, var(--brass) 100%);
  color: var(--navy);
  box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 10px 26px -8px rgba(244,165,28,.65);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 14px 30px -8px rgba(244,165,28,.75); }
.btn-ghost {
  background: rgba(255,255,255,.07); color: #fff;
  border: 1px solid rgba(255,255,255,.28);
}
.btn-ghost:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }
.btn-dark { background: var(--navy); color: #fff; }
.btn-dark:hover { background: var(--navy-2); transform: translateY(-2px); }
.btn-block { width: 100%; }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section { padding: 74px 0; }
.section-soft { background: var(--bg-soft); }
.section-head { max-width: 720px; margin: 0 auto 46px; text-align: center; }
.section-head p { color: var(--text-muted); font-size: 1.06rem; margin: 0; }
.eyebrow {
  display: inline-block; color: var(--brass-dark);
  font-size: .76rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .11em; margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   Cards / grids
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }

.card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px 25px;
  box-shadow: var(--shadow-sm);
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.card h3 { margin-bottom: .45em; }
.card p { color: var(--text-muted); font-size: .96rem; margin-bottom: 0; }
.card-link { display: block; text-decoration: none; color: inherit; }
.card-link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(244,165,28,.55);
}
.card-icon {
  width: 50px; height: 50px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, rgba(244,165,28,.17), rgba(244,165,28,.06));
  border: 1px solid rgba(244,165,28,.28);
  margin-bottom: 17px;
}
.card-icon svg { width: 25px; height: 25px; color: var(--brass-dark); }
.card-more {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 15px; color: var(--brass-dark);
  font-weight: 800; font-size: .9rem;
}

/* Numbered process steps */
.step { position: relative; padding-left: 60px; }
.step-num {
  position: absolute; left: 0; top: 0;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--navy); color: var(--blue-on-dark);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.05rem;
}
.step h3 { margin-bottom: .35em; }
.step p { color: var(--text-muted); margin: 0; font-size: .96rem; }

/* Checklist */
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li {
  position: relative; padding-left: 31px; margin-bottom: 13px;
  color: var(--text); font-size: 1rem;
}
.checklist li::before {
  content: ''; position: absolute; left: 0; top: .42em;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(15,157,88,.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f9d58' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 12px 12px; background-repeat: no-repeat; background-position: center;
}

/* --------------------------------------------------------------------------
   Service-area list
   -------------------------------------------------------------------------- */
.area-list {
  display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0;
}
.area-list li {
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  padding: 9px 17px; font-size: .93rem; font-weight: 600; color: var(--text);
  box-shadow: var(--shadow-sm);
}
.area-list li strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   Callout / alert
   -------------------------------------------------------------------------- */
.callout {
  border-left: 4px solid var(--brass);
  background: #fffaf0; border-radius: 0 var(--radius) var(--radius) 0;
  padding: 22px 24px; margin: 30px 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   Pricing table
   -------------------------------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 26px 0 8px; }
table.price {
  width: 100%; min-width: 480px; border-collapse: collapse;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; font-size: .96rem;
}
table.price th, table.price td {
  padding: 13px 17px; text-align: left; border-bottom: 1px solid var(--border);
}
table.price th {
  background: var(--navy); color: #fff;
  font-weight: 700; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .05em;
  white-space: nowrap;
}
table.price tr:last-child td { border-bottom: 0; }
table.price tbody tr:nth-child(even) { background: #fafbfc; }
table.price td:first-child { font-weight: 700; color: var(--ink); }
table.price td:not(:last-child) { white-space: nowrap; }
table.price td.td-wrap, table.price th.td-wrap { white-space: normal; }
/* Two-column tables sitting in a narrow column do not need the wide min-width. */
.table-scroll-narrow table.price { min-width: 0; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { max-width: 800px; margin: 0 auto; }
.faq details {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 12px;
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.faq summary {
  cursor: pointer; padding: 19px 52px 19px 22px;
  font-weight: 700; color: var(--ink); font-size: 1.03rem;
  position: relative; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 22px; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 2.5px solid var(--brass-dark);
  border-bottom: 2.5px solid var(--brass-dark);
  transform: rotate(45deg); transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq .faq-body { padding: 0 22px 20px; color: var(--text-muted); }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Bottom CTA
   -------------------------------------------------------------------------- */
.cta {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--navy); color: #fff;
  padding: 78px 0; text-align: center;
}
.cta::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(660px 400px at 50% -20%, rgba(244,165,28,.24), transparent 62%),
    linear-gradient(160deg, #0b1622 0%, #14293f 100%);
}
.cta h2 { color: #fff !important; max-width: 720px; margin: 0 auto .5em; }
.cta h2 em { font-style: normal; color: var(--brass); }
.cta p { color: rgba(255,255,255,.76); max-width: 580px; margin: 0 auto 1.8em; font-size: 1.06rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; }

/* --------------------------------------------------------------------------
   Contact form
   -------------------------------------------------------------------------- */
.form-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 30px 28px; box-shadow: var(--shadow-md);
}
.field { margin-bottom: 17px; }
.field label {
  display: block; font-weight: 700; font-size: .89rem;
  color: var(--ink); margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: .98rem;
  color: var(--text); background: #fff;
  border: 1px solid var(--border); border-radius: 9px;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(244,165,28,.18);
}
.field textarea { resize: vertical; min-height: 118px; }
.field-hint { font-size: .82rem; color: var(--text-muted); margin-top: 5px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy); color: rgba(255,255,255,.68); padding: 58px 0 0; font-size: .94rem; }
.footer-grid {
  display: grid; gap: 34px;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  padding-bottom: 42px;
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 {
  color: #fff; font-size: .8rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: 15px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer a { color: rgba(255,255,255,.68); text-decoration: none; }
.site-footer a:hover { color: var(--blue-on-dark); }
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.footer-brand svg { width: 30px; height: 30px; }
.footer-brand span { color: #fff; font-weight: 800; font-size: 1.1rem; }
.footer-phone {
  display: block; color: var(--blue-on-dark) !important;
  font-size: 1.32rem; font-weight: 800; letter-spacing: -.02em;
  text-decoration: none; margin-bottom: 6px;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 20px 0 26px;
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  justify-content: space-between; align-items: center;
  font-size: .85rem; color: rgba(255,255,255,.5);
}
.footer-bottom a { color: rgba(255,255,255,.5); }
.footer-license { color: rgba(255,255,255,.5); }

/* --------------------------------------------------------------------------
   Sticky mobile call bar
   -------------------------------------------------------------------------- */
.call-bar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1200;
  background: var(--navy);
  border-top: 1px solid rgba(255,255,255,.14);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 22px rgba(0,0,0,.28);
}
.call-bar a {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(180deg, var(--brass-2) 0%, var(--brass) 100%);
  color: var(--navy); text-decoration: none;
  padding: 14px; border-radius: 10px;
  font-weight: 800; font-size: 1.08rem;
}
.call-bar svg { width: 20px; height: 20px; }
@media (max-width: 940px) {
  .call-bar { display: block; }
  body { padding-bottom: 78px; }
}

/* --------------------------------------------------------------------------
   Page header (interior pages)
   -------------------------------------------------------------------------- */
.page-head {
  background: var(--navy); color: #fff;
  padding: 56px 0 52px; position: relative; overflow: hidden; isolation: isolate;
}
.page-head::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(620px 340px at 18% -30%, rgba(244,165,28,.18), transparent 62%),
    linear-gradient(160deg, #0b1622 0%, #14293f 100%);
}
.page-head h1 { color: #fff; margin-bottom: .3em; max-width: 800px; }
.page-head p { color: rgba(255,255,255,.78); max-width: 660px; font-size: 1.06rem; margin: 0; }

.crumbs { font-size: .84rem; color: rgba(255,255,255,.55); margin-bottom: 16px; }
.crumbs a { color: rgba(255,255,255,.72); text-decoration: none; }
.crumbs a:hover { color: var(--brass); }
.crumbs span { margin: 0 7px; }

/* --------------------------------------------------------------------------
   Prose (interior body copy)
   -------------------------------------------------------------------------- */
.prose { max-width: 780px; }
.prose h2 { margin-top: 1.8em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 1.2em; }
.prose li { margin-bottom: .55em; }
.prose a { color: var(--brass-dark); font-weight: 600; }
.prose-lead-img {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius); margin: 0 0 30px;
  box-shadow: var(--shadow-md);
}

.layout-sidebar { display: grid; grid-template-columns: 1fr 320px; gap: 46px; align-items: start; }
/* Grid items default to min-width:auto, which refuses to shrink below the
   min-content width of a wide table. That defeats .table-scroll and pushes the
   whole page sideways on mobile. Let the columns shrink so the table scrolls. */
.layout-sidebar > * { min-width: 0; }
.prose { min-width: 0; }
@media (max-width: 940px) { .layout-sidebar { grid-template-columns: 1fr; gap: 34px; } }

.sidebar-card {
  background: var(--navy); color: #fff; border-radius: var(--radius);
  padding: 26px 24px; position: sticky; top: calc(var(--nav-h) + 20px);
  box-shadow: var(--shadow-lg);
}
.sidebar-card h3 { color: #fff; font-size: 1.12rem; margin-bottom: .5em; }
.sidebar-card p { color: rgba(255,255,255,.74); font-size: .94rem; }
.sidebar-phone {
  display: block; color: var(--blue-on-dark); font-size: 1.5rem; font-weight: 800;
  text-decoration: none; letter-spacing: -.02em; margin: 4px 0 14px;
}
@media (max-width: 940px) { .sidebar-card { position: static; } }

/* ===== DRYSHIELD DESIGN LAYER ===== */
/* Shell restyled to match dryshield-preview.netlify.app. Additive: the prose,
   faq, callout and card rules above are untouched and still style page bodies. */

/* topbar */
.ds-top{background:var(--navy);color:#A9BDCE;font-size:.82rem;border-bottom:1px solid rgba(255,255,255,.07)}
.ds-top .container{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding-top:9px;padding-bottom:9px;flex-wrap:wrap}
.ds-top .l,.ds-top .r{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.ds-top span{display:inline-flex;align-items:center;gap:7px}
.ds-top svg{width:14px;height:14px;color:var(--blue-lt);flex:none}
.ds-top a{color:#fff;font-weight:600;text-decoration:none}
@media(max-width:900px){.ds-top .l span:not(:first-child){display:none}}
@media(max-width:640px){.ds-top .r{display:none}}

/* nav gets the blue underline accent.
   This block is appended after the base .site-nav rule, so it must restate
   position:sticky. Declaring plain `relative` here silently unpinned the nav. */
.site-nav{position:sticky;top:0;z-index:1000}
.site-nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,transparent,var(--blue) 25%,var(--blue) 75%,transparent)}

/* full-bleed photo hero */
.ds-hero{position:relative;overflow:hidden;background:var(--navy);
  min-height:min(78vh,640px);display:flex;align-items:center;padding:58px 0}
.ds-hero.sm{min-height:0;padding:60px 0}
.ds-hero-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center 45%}
.ds-hero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(10,20,30,.94) 0%,rgba(10,20,30,.82) 46%,rgba(10,20,30,.52) 74%,rgba(10,20,30,.44) 100%),
  linear-gradient(180deg,rgba(10,20,30,.55),transparent 36%,rgba(10,20,30,.74))}
.ds-hero .container{position:relative;z-index:2}
.ds-hero-in{max-width:660px}
.ds-hero h1{color:#fff;font-size:clamp(2.05rem,4.6vw,3.3rem);margin:16px 0 18px;line-height:1.1}
.ds-hero h1 em{font-style:normal;color:var(--blue-lt)}
.ds-hero p.sub{color:#C6D5E2;font-size:1.08rem;margin:0 0 26px;max-width:56ch}
.ds-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:'Cabin',sans-serif;
  font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-lt)}
.ds-eyebrow::before{content:"";width:26px;height:2px;background:var(--blue-lt);flex:none}
.ds-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.ds-hero-tr{display:flex;flex-wrap:wrap;gap:10px 24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.18)}
.ds-hero-tr span{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;color:#C6D5E2}
.ds-hero-tr svg{width:16px;height:16px;color:var(--blue-lt);flex:none}
@media(max-width:640px){.ds-hero{min-height:0;padding:42px 0 44px}
  .ds-hero-cta .btn{width:100%;max-width:340px}}

/* blue stat strip. #0070CE not --blue: white on #0078D8 is 4.49:1, under AA. */
.ds-stats{background:#0070CE;color:#fff}
.ds-stats .container{display:grid;grid-template-columns:repeat(3,1fr);padding-top:0;padding-bottom:0}
.ds-stat{padding:32px 24px;text-align:center;border-right:1px solid rgba(255,255,255,.22)}
.ds-stat:last-child{border-right:0}
.ds-stat b{display:block;font-family:'BioRhyme',Georgia,serif;font-size:2.4rem;line-height:1;margin-bottom:6px}
.ds-stat span{font-size:.92rem;font-weight:600}
@media(max-width:760px){.ds-stats .container{grid-template-columns:1fr}
  .ds-stat{border-right:0;border-bottom:1px solid rgba(255,255,255,.22);padding:22px}}

/* service cards */
.ds-svc{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:46px}
.ds-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:30px 24px;
  display:flex;flex-direction:column;position:relative;overflow:hidden;text-decoration:none;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.ds-card::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--blue);
  transform:scaleX(0);transform-origin:left;transition:transform .28s}
.ds-card:hover::after{transform:scaleX(1)}
.ds-card:hover{transform:translateY(-6px);box-shadow:0 24px 48px -26px rgba(12,23,34,.45);border-color:var(--blue)}
.ds-card .ic{width:50px;height:50px;border-radius:12px;background:var(--blue-pale);color:var(--blue);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.ds-card .ic svg{width:25px;height:25px}
.ds-card h3{font-size:1.18rem;margin:0 0 9px}
.ds-card p{font-size:.94rem;color:var(--text);margin:0 0 16px}
/* --blue (#0078D8) on white is 4.49:1, just under AA for this 14px link.
   --blue-dk (#0057A3) clears it at 7.3:1. */
.ds-card .go{margin-top:auto;font-family:'Cabin',sans-serif;font-weight:700;font-size:.9rem;
  color:var(--blue-dk);display:inline-flex;align-items:center;gap:7px}
.ds-card:hover .go{gap:11px}
@media(max-width:1000px){.ds-svc{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.ds-svc{grid-template-columns:1fr}}

/* split */
.ds-split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.ds-split.rev .im{order:2}
.ds-split .im{border-radius:14px;overflow:hidden;box-shadow:0 28px 60px -30px rgba(12,23,34,.5)}
.ds-split .im img{width:100%;object-fit:cover;aspect-ratio:4/3}
.ds-split ul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.ds-split li{display:flex;gap:12px;align-items:flex-start;font-size:1rem}
.ds-split li svg{width:20px;height:20px;flex:none;color:var(--success);margin-top:5px}
@media(max-width:900px){.ds-split{grid-template-columns:1fr;gap:34px}.ds-split.rev .im{order:0}}

/* CTA band */
.ds-cta{background:linear-gradient(115deg,var(--navy) 0%,var(--navy-3) 62%,var(--blue-dk) 168%);
  color:#fff;position:relative;overflow:hidden}
.ds-cta::before{content:"";position:absolute;top:-180px;right:-120px;width:540px;height:540px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,120,216,.38),transparent 66%)}
.ds-cta .container{position:relative;z-index:1;text-align:center;padding:78px 26px}
.ds-cta h2{color:#fff;font-size:clamp(1.85rem,3.9vw,2.8rem);margin:14px 0 14px}
.ds-cta h2 em{font-style:normal;color:var(--blue-lt)}
.ds-cta p{color:#C6D5E2;max-width:58ch;margin:0 auto 28px;font-size:1.04rem}
.ds-bignum{display:inline-flex;align-items:center;gap:15px;font-family:'BioRhyme',Georgia,serif;
  font-size:clamp(1.8rem,4.4vw,2.8rem);font-weight:700;color:#fff;line-height:1;text-decoration:none;
  padding:15px 30px;border-radius:12px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.24);transition:.18s}
.ds-bignum:hover{background:rgba(0,120,216,.24);border-color:var(--blue-lt);transform:translateY(-2px)}
.ds-bignum svg{width:.58em;height:.58em;color:var(--blue-lt);flex:none}
.ds-cta .row2{margin-top:18px}

/* footer */
.ds-footer{background:var(--navy);color:#8FA3B5;font-size:.93rem}
.ds-fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:38px;padding:60px 0 42px}
.ds-fgrid h5{font-family:'Cabin',sans-serif;font-size:.75rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:#fff;margin:0 0 15px}
.ds-fgrid a{display:block;padding:5px 0;color:#8FA3B5;text-decoration:none;transition:.15s}
.ds-fgrid a:hover{color:var(--blue-lt)}
.ds-fbrand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ds-fbrand svg{width:26px;height:26px;color:var(--blue-lt)}
.ds-fbrand b{font-family:'BioRhyme',Georgia,serif;color:#fff;font-size:1.1rem}
.ds-fbot{border-top:1px solid rgba(255,255,255,.1);padding:18px 0;display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.85rem}
.ds-fbot b{color:#fff}
@media(max-width:900px){.ds-fgrid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:560px){.ds-fgrid{grid-template-columns:1fr}}
@media(max-width:780px){.ds-footer{padding-bottom:74px}}

/* mobile call bar */
.ds-mbar{position:fixed;left:0;right:0;bottom:0;z-index:1200;display:none;background:#fff;
  border-top:1px solid var(--border);box-shadow:0 -8px 26px -14px rgba(12,23,34,.45);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:10px}
.ds-mbar a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;font-size:.93rem;padding:14px 8px;border-radius:9px;text-decoration:none}
.ds-mbar .c{flex:1.4;background:#0066B8;color:#fff}
.ds-mbar .q{background:var(--navy);color:#fff}
.ds-mbar svg{width:17px;height:17px}
@media(max-width:780px){.ds-mbar{display:flex}}

/* section rhythm helpers */
.ds-sec{padding:82px 0}
.ds-sec.soft{background:var(--bg-soft)}
.ds-head{text-align:center;max-width:70ch;margin:0 auto}
.ds-head h2{font-size:clamp(1.85rem,3.8vw,2.6rem);margin:14px 0 12px}
.ds-head h2 em{font-style:normal;color:var(--blue)}
.ds-head p{color:var(--text);font-size:1.05rem;margin:0}
.ds-head .ds-eyebrow{color:var(--blue)}
.ds-head .ds-eyebrow::before{background:var(--blue)}
.ds-head .ds-eyebrow::after{content:"";width:26px;height:2px;background:var(--blue);flex:none}

/* area chips */
.ds-areas{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:38px}
.ds-areas span{background:#fff;border:1px solid var(--border);border-radius:999px;padding:9px 18px;
  font-size:.9rem;font-weight:600;color:var(--text)}

/* ==========================================================================
   PREMIUM POLISH LAYER
   Appended deliberately so it overrides by source order and can be lifted out
   in one block. Structure and palette are unchanged; this refines the things
   that separate a template from considered design: typographic scale and
   tracking, vertical rhythm, shadow quality, and restraint in colour.
   ========================================================================== */

:root{
  /* Cheap shadows are dark, tight and grey. Expensive ones are large, very low
     opacity, and tinted toward the surface colour. */
  --shadow-sm: 0 1px 2px rgba(12,23,34,.04), 0 1px 3px rgba(12,23,34,.05);
  --shadow-md: 0 2px 4px rgba(12,23,34,.03), 0 8px 20px -6px rgba(12,23,34,.10);
  --shadow-lg: 0 4px 8px rgba(12,23,34,.04), 0 24px 56px -20px rgba(12,23,34,.20);
  --shadow-xl: 0 8px 16px rgba(12,23,34,.05), 0 40px 80px -28px rgba(12,23,34,.28);
  --ring: 0 0 0 3px rgba(0,120,216,.28);
}

/* --- Typography -----------------------------------------------------------
   BioRhyme is a heavy slab. At display sizes it reads as editorial rather than
   shouty only if the tracking is pulled in and the leading is tight. */
h1,h2,h3,h4,.ds-stat b{ letter-spacing:-.022em; }
.ds-hero h1{
  font-size:clamp(2.3rem,5vw,3.75rem);
  line-height:1.04;
  letter-spacing:-.03em;
  margin:18px 0 20px;
}
.ds-hero p.sub{ font-size:1.13rem; line-height:1.65; color:#CFDCE7; max-width:54ch; }
.ds-cta h2{ letter-spacing:-.028em; line-height:1.08; }

body{ line-height:1.7; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.prose p{ line-height:1.75; }
.prose h2{ font-size:clamp(1.5rem,2.6vw,2rem); letter-spacing:-.022em; }

.ds-eyebrow,.eyebrow{ font-size:.72rem; letter-spacing:.19em; font-weight:700; }

/* --- Vertical rhythm ------------------------------------------------------ */
.ds-sec{ padding:96px 0; }
.ds-head{ max-width:680px; margin:0 auto 8px; text-align:center; }
.ds-head h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); margin:12px 0 14px; }
.ds-head p{ font-size:1.06rem; color:var(--text-muted); }
.ds-svc{ margin-top:52px; gap:22px; }

/* --- Hero -----------------------------------------------------------------
   A directional scrim keeps the photo readable and avoids the flat
   "image with a grey box over it" look. Vignette pulls focus to the copy. */
.ds-hero-bg::after{
  background:
    linear-gradient(100deg, rgba(12,23,34,.96) 0%, rgba(12,23,34,.88) 38%,
                             rgba(12,23,34,.62) 66%, rgba(12,23,34,.48) 100%),
    radial-gradient(120% 90% at 12% 50%, rgba(0,120,216,.20) 0%, transparent 62%),
    radial-gradient(100% 100% at 50% 100%, rgba(12,23,34,.55) 0%, transparent 60%);
}
/* Top padding kept well under the bottom: the eyebrow should sit close to the
   nav so the headline is the first thing the eye lands on. 104px left a dead
   band roughly the height of the nav itself. */
.ds-hero{ padding:44px 0 84px; }
.ds-hero-tr{ gap:14px 30px; padding-top:26px; border-top-color:rgba(255,255,255,.14); }

/* --- Buttons --------------------------------------------------------------
   An inset top highlight plus a tight contact shadow reads as a physical,
   pressable object rather than a coloured rectangle. */
.btn,.ds-bignum{ border-radius:10px; }
.btn-primary{
  background:linear-gradient(180deg,#1a8ae8 0%,var(--blue) 55%,#0069c0 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 1px 2px rgba(12,23,34,.16),
             0 10px 24px -10px rgba(0,120,216,.65);
}
.btn-primary:hover{
  background:linear-gradient(180deg,#2E9BF0 0%,#0f81dd 55%,var(--blue) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 2px 4px rgba(12,23,34,.16),
             0 16px 30px -12px rgba(0,120,216,.72);
}
.btn:active{ transform:translateY(1px); }

/* Visible keyboard focus. Templates routinely omit this. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:none; box-shadow:var(--ring); border-radius:8px;
}

/* --- Stat strip -----------------------------------------------------------
   Was a full-bleed saturated blue band, the loudest element on the page and the
   clearest "template" tell. Navy with a hairline blue rule keeps the emphasis
   while letting the numbers, not the fill, carry it. */
.ds-stats{ background:var(--navy-2); border-top:1px solid rgba(255,255,255,.07); }
.ds-stats .container{ border-bottom:1px solid rgba(255,255,255,.07); }
.ds-stat{ padding:38px 24px; border-right-color:rgba(255,255,255,.09); position:relative; }
.ds-stat b{ font-size:2.7rem; color:#fff; letter-spacing:-.03em; }
.ds-stat span{ color:#9DB2C4; font-weight:600; font-size:.88rem;
               letter-spacing:.08em; text-transform:uppercase; }
.ds-stat::after{
  content:""; position:absolute; left:50%; bottom:-1px; width:44px; height:2px;
  transform:translateX(-50%); background:var(--blue-lt); opacity:.85;
}

/* --- Service cards -------------------------------------------------------- */
.ds-card{
  border-radius:16px; padding:34px 28px;
  box-shadow:var(--shadow-sm);
  transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s, border-color .28s;
}
.ds-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.ds-card .ic{
  width:54px; height:54px; border-radius:14px;
  background:linear-gradient(160deg,#F0F7FE 0%,var(--blue-pale) 100%);
  border:1px solid rgba(0,120,216,.14);
  transition:background .28s, border-color .28s;
}
.ds-card:hover .ic{
  background:linear-gradient(160deg,var(--blue-pale) 0%,#D7EAFB 100%);
  border-color:rgba(0,120,216,.3);
}
.ds-card h3{ font-size:1.22rem; margin-bottom:11px; }
.ds-card p{ color:var(--text-muted); line-height:1.65; }

/* --- Section surfaces -----------------------------------------------------
   A hairline and a soft gradient instead of a hard white-to-tint step. */
.section-soft,.ds-sec.soft{
  background:linear-gradient(180deg,#F7FAFC 0%,var(--bg-soft) 100%);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}

/* --- CTA band ------------------------------------------------------------- */
.ds-cta .container{ padding:96px 26px; }
.ds-bignum{
  border-radius:14px; padding:.62em .95em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 20px 44px -22px rgba(0,0,0,.6);
}

/* --- Footer --------------------------------------------------------------- */
.ds-fgrid{ padding:72px 0 48px; gap:44px; }
.ds-fgrid h5{ color:#fff; margin-bottom:18px; }
.ds-fgrid a:hover{ color:#fff; }

/* --- Prose and components -------------------------------------------------- */
table.price{ border-radius:14px; box-shadow:var(--shadow-sm); }
table.price th{ letter-spacing:.09em; font-size:.76rem; }
.callout{ border-radius:0 14px 14px 0; box-shadow:var(--shadow-sm); }
.faq details{ border-radius:14px; box-shadow:var(--shadow-sm); }
.faq summary{ font-size:1.05rem; padding:21px 54px 21px 24px; }

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

/* --- Responsive tightening ------------------------------------------------- */
@media (max-width:900px){
  .ds-sec{ padding:68px 0; }
  .ds-hero{ padding:32px 0 56px; }
  .ds-cta .container{ padding:68px 22px; }
  .ds-stat b{ font-size:2.15rem; }
  .ds-stat{ padding:28px 14px; }
}
@media (max-width:560px){
  .ds-stats .container{ grid-template-columns:1fr; }
  .ds-stat{ border-right:0; border-bottom:1px solid rgba(255,255,255,.09); }
  .ds-stat:last-child{ border-bottom:0; }
  .ds-stat::after{ display:none; }
  .ds-card{ padding:28px 22px; }
}

/* ==========================================================================
   CENTERED HERO
   Applies to every page: home uses .ds-hero, all interior pages use
   .ds-hero.sm, so one rule set covers all ten.
   ========================================================================== */

.ds-hero-in{
  max-width:840px;
  margin-left:auto; margin-right:auto;
  text-align:center;
}
/* The sub-paragraph carries its own max-width, so it needs centring too or it
   sits left inside a centred parent. */
.ds-hero p.sub{ margin-left:auto; margin-right:auto; }

/* Rows inside the hero were packed to the start. */
.ds-hero-cta{ justify-content:center; }
.ds-hero-tr{ justify-content:center; }

/* The eyebrow is inline-flex with a leading rule; balance it with a matching
   rule on the right so it reads as centred rather than lopsided. */
.ds-hero .ds-eyebrow::after{
  content:""; width:26px; height:2px; background:var(--blue-lt); flex:none;
}

/* The scrim was directional (heavy left, light right) to sit behind
   left-aligned copy. Centred text needs it symmetric, otherwise the right half
   of the headline loses its background and drops contrast. */
/* Scrim lightened so the photograph actually reads. It still darkens most where
   the headline sits (the centre radial) and at the very bottom where the strip
   below begins, so contrast holds while the image stays visible. */
/* Scrim opened up from the original .88 effective alpha to ~.75, so the photo
   reads. It cannot go lighter than this: the image has a near-white highlight
   (rgb 253,245,235) directly behind the headline, and at .64 the blue <em>
   measured 1.95:1 and the sub-paragraph 4.15:1, both below AA. */
.ds-hero-bg::after{
  background:
    linear-gradient(180deg, rgba(12,23,34,.70) 0%, rgba(12,23,34,.58) 45%,
                             rgba(12,23,34,.76) 100%),
    radial-gradient(85% 70% at 50% 45%, rgba(12,23,34,.40) 0%, rgba(12,23,34,.72) 100%),
    radial-gradient(70% 60% at 50% 40%, rgba(0,120,216,.13) 0%, transparent 70%);
}
/* The brand blue (#2E9BF0) still only reaches 2.75:1 over that highlight, so the
   hero <em> uses a lighter tint. Same hue, clears AA at 4.3:1. Body copy keeps
   the standard blue, which sits on solid surfaces. */
.ds-hero h1 em{ color:#7CC4F8; }
/* Soft shadow adds perceived separation over busy areas of the photo. It does
   not count toward the WCAG figures above, which are met on colour alone. */
.ds-hero h1,.ds-hero p.sub{ text-shadow:0 2px 16px rgba(6,12,18,.6); }

/* The first section after a hero does not need a full section's worth of top
   padding; the hero already provides the breathing room above it. */
.ds-hero + .ds-sec{ padding-top:52px; }

/* The home hero is a flex box with min-height:78vh centring its content, so the
   gap under the nav came from distributed slack, not padding. Trimming the
   min-height is what actually closes it. */
.ds-hero{ min-height:min(58vh,470px); }
.ds-hero.sm{ padding:38px 0 44px; }

/* Centred copy reads better with a slightly narrower measure. */
@media (min-width:901px){
  .ds-hero p.sub{ max-width:60ch; }
}

/* ==========================================================================
   BRAND LOCKUP
   The old rule forced every nav svg into a 30x30 box, which would squash the
   new 30x34 padlock. Height-driven sizing keeps its proportions.
   ========================================================================== */

.nav-brand .brand-mark,
.ds-fbrand .brand-mark{ width:auto; flex:none; }
.nav-brand .brand-mark{ height:34px; }
.ds-fbrand .brand-mark{ height:26px; }

.nav-brand{ gap:12px; }

/* Wordmark in the display serif rather than the UI sans. It gives the brand its
   own voice and stops the logo reading as just another nav item, since the
   links beside it are Cabin. */
.nav-brand-name{
  font-family:'BioRhyme', Georgia, serif;
  font-size:.97rem;
  font-weight:700;
  letter-spacing:-.025em;
  line-height:1.15;
}
.nav-brand-sub{
  font-size:.63rem;
  letter-spacing:.13em;
  font-weight:700;
  margin-top:2px;
}
.nav-brand-text{ line-height:1.15; }

.ds-fbrand{ display:flex; align-items:center; gap:11px; }
.ds-fbrand b{
  font-family:'BioRhyme', Georgia, serif;
  font-size:1.02rem; letter-spacing:-.025em; color:#fff;
}

/* Below the desktop breakpoint the wordmark competes with the call button and
   the burger for a narrow bar. Shrink the mark and drop the sub-label rather
   than letting the lockup wrap. */
@media (max-width:940px){
  .nav-brand .brand-mark{ height:29px; }
  .nav-brand-name{ font-size:.9rem; }
}
@media (max-width:380px){
  .nav-brand-sub{ display:none; }
  .nav-brand .brand-mark{ height:26px; }
}

/* ==========================================================================
   NAV FIT
   Two gaps between the existing breakpoints, both found by measuring rather
   than by eye:

   ~1100px - still desktop layout (the mobile breakpoint is 940px), and
             brand + 8 links + call button overflowed by 43px. The serif
             wordmark is wider than the sans it replaced, which used up the
             remaining slack.
   ~320px  - the burger overflowed by 14px on the narrowest phones.
   ========================================================================== */

@media (max-width:1180px) and (min-width:941px){
  .nav-inner{ gap:12px; }
  .nav-links a{ padding:9px 7px; font-size:.88rem; }
  .nav-brand-name{ font-size:.9rem; }
  .nav-brand .brand-mark{ height:30px; }
}

@media (max-width:360px){
  .nav-inner{ gap:10px; padding:0 14px; }
  .nav-brand{ gap:9px; }
  .nav-brand-name{ font-size:.84rem; }
  .nav-brand .brand-mark{ height:24px; }
  .nav-call{ padding:9px 11px !important; }
  .nav-toggle{ padding:8px 2px; }
}

/* ==========================================================================
   NAV FIT, second pass + grid minimums
   ========================================================================== */

/* 941-1080px needed more than the 1180px band gave it: the call button was
   still 21px over at 1000px. */
@media (max-width:1080px) and (min-width:941px){
  .nav-inner{ gap:10px; }
  .nav-links a{ padding:9px 5px; font-size:.85rem; }
  .nav-brand-name{ font-size:.86rem; }
  .nav-brand .brand-mark{ height:28px; }
  .nav-call{ padding:10px 14px !important; font-size:.9rem !important; }
}

/* auto-fit grids declared a fixed track minimum (300/272/232px). Once the
   viewport drops below that minimum plus the container's 44px of padding, the
   track refuses to shrink and pushes the page sideways. min() lets the track
   fall back to the available width instead. Caught at 320px, where a 300px
   minimum had only 276px to live in. */
.grid-2{ grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); }
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(min(272px,100%),1fr)); }
.grid-4{ grid-template-columns:repeat(auto-fit,minmax(min(232px,100%),1fr)); }

/* ==========================================================================
   OFFERS BAND
   Sits directly under the stat strip. Pale blue rather than another dark band
   so it separates the two navy sections above it from the white content below.
   ========================================================================== */

.ds-offers{
  background:linear-gradient(180deg,var(--blue-pale) 0%,#DCEDFB 100%);
  border-bottom:1px solid #C6E0F5;
}
.ds-offers .container{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:14px; padding-top:20px; padding-bottom:20px;
}
.ds-offer{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-weight:700; font-size:.95rem; color:var(--navy);
  letter-spacing:-.01em;
}
.ds-offer svg{ width:20px; height:20px; color:var(--blue-dk); flex:none; }
.ds-offer + .ds-offer{ border-left:1px solid rgba(12,23,34,.10); }

@media (max-width:720px){
  .ds-offers .container{ grid-template-columns:1fr; gap:10px;
                         padding-top:16px; padding-bottom:16px; }
  .ds-offer{ justify-content:flex-start; font-size:.9rem; }
  .ds-offer + .ds-offer{ border-left:0; }
}

/* ==========================================================================
   LOGO-MATCHED PALETTE
   Derived from the client's logo: green #00AC69, blue #0062A8, yellow #FADD3F.

   The token NAMES are historical (--blue*, --navy*) and are kept so that none
   of the ~1000 lines of rules below had to be rewritten. They now carry the
   logo colours. Renaming them across the whole sheet would be a large,
   error-prone diff for no visual gain.

   IMPORTANT: the raw logo green (#00AC69) measures only 2.96:1 on white, so it
   can never carry text on a light surface. --blue-dk (#00754A, 5.76:1) is the
   text/button green; --blue is for large fills only.
   ========================================================================== */
:root{
  --navy:        #06291D;   /* deep green-black, dark sections */
  --navy-2:      #0A3526;
  --navy-3:      #14513A;
  --ink:         #10251C;

  --blue:        #00AC69;   /* logo green. LARGE FILLS ONLY, not text on white */
  --blue-lt:     #35D18F;   /* accent on dark surfaces, 7.95:1 on --navy */
  --blue-dk:     #00754A;   /* text + buttons on light, 5.76:1 on white */
  --blue-pale:   #E6F7F0;
  --blue-on-dark:#35D18F;

  /* Logo secondary + highlight, available for accents. */
  --logo-blue:   #0062A8;   /* 6.34:1 both ways against white */
  --logo-yellow: #FADD3F;   /* 11.53:1 on --navy; decorative only on light */

  --brass:       var(--blue);
  --brass-2:     var(--blue-lt);
  --brass-dark:  var(--blue-dk);

  --text:        #3A4A42;   /* 9.38:1 */
  --text-muted:  #55665C;   /* 6.10:1 */
  --bg-soft:     #F1F8F5;
  --border:      #DCE9E3;
  --ring:        0 0 0 3px rgba(0,172,105,.30);
}

/* --- Hardcoded blues left over from the previous theme -------------------- */

/* Nav call button: white on #00754A is 5.76:1; hover #00693F is 6.79:1. */
.nav-call{ background:#00754A !important;
           box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 6px 18px -6px rgba(0,117,74,.55); }
.nav-call:hover{ background:#00693F !important; }

.btn-primary{
  background:linear-gradient(180deg,#00C77A 0%,#00A263 55%,#00794D 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26), 0 1px 2px rgba(6,41,29,.18),
             0 10px 24px -10px rgba(0,140,86,.6);
}
.btn-primary:hover{
  background:linear-gradient(180deg,#14D98A 0%,#00B571 55%,#008A57 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 2px 4px rgba(6,41,29,.18),
             0 16px 30px -12px rgba(0,140,86,.68);
}

/* Stat strip band + hero accent. */
.ds-stats{ background:var(--navy-2); }
.ds-stat::after{ background:var(--blue-lt); }

/* Hero <em>: the light tint that survives the photo's bright highlight.
   Verified against the worst-case backdrop rather than assumed. */
.ds-hero h1 em{ color:#7FE9BC; }

/* Offers band: pale green wash, logo blue for the icons so the secondary
   brand colour still appears on the page. */
.ds-offers{ background:linear-gradient(180deg,#EDFBF5 0%,var(--blue-pale) 100%);
            border-bottom:1px solid #C9E9DC; }
.ds-offer svg{ color:var(--logo-blue); }

/* Service-card icon tiles. */
.ds-card .ic{ background:linear-gradient(160deg,#F0FBF6 0%,var(--blue-pale) 100%);
              border-color:rgba(0,172,105,.18); color:var(--blue-dk); }
.ds-card:hover .ic{ background:linear-gradient(160deg,var(--blue-pale) 0%,#D6F2E6 100%);
                    border-color:rgba(0,172,105,.34); }
.ds-card::after{ background:var(--blue); }

.section-soft,.ds-sec.soft{
  background:linear-gradient(180deg,#F7FCFA 0%,var(--bg-soft) 100%);
}

/* The CTA band gradient still referenced the old blue directly. */
.ds-cta{ background:linear-gradient(115deg,var(--navy) 0%,var(--navy-3) 62%,#00794D 168%); }

::selection{ background:rgba(0,172,105,.26); }

/* ==========================================================================
   REAL LOGO
   Replaces the drawn padlock mark in the nav and footer. The source is a
   502x443 raster, so it is sized by height and never upscaled past its native
   resolution.
   ========================================================================== */
.brand-logo{ width:auto; height:auto; display:block; flex:none; }
.nav-brand .brand-logo{ height:46px; }
.ds-fbrand .brand-logo{ height:44px; }
.nav-brand{ gap:11px; }

/* The logo already reads "PEARLAND Locksmith", so repeating the wordmark beside
   it is redundant and crowds a bar that was already tight. The name stays in
   the DOM for screen readers and for the accessible link name. */
.nav-brand-text{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.ds-fbrand b{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media (max-width:940px){ .nav-brand .brand-logo{ height:40px; } }
@media (max-width:380px){ .nav-brand .brand-logo{ height:34px; } }

/* DBA / legal entity line in the footer bottom bar. */
.ds-dba{ display:block; margin-top:6px; opacity:.75; font-size:.85em; }

/* ==========================================================================
   GREEN & WHITE REBALANCE
   The previous pass tinted almost every surface green: dark green nav, dark
   green stat strip, green offers band, green CTA, green footer. Too much of the
   page was carrying colour, which flattens contrast and makes the green read as
   muddy rather than fresh.

   Rule applied here: WHITE is the page. Green is the accent, and dark green is
   reserved for the three anchor surfaces (nav, hero, footer/CTA). Everything
   between them is white or near-white.
   ========================================================================== */

:root{
  --text:       #33423A;   /* 10.9:1 on white, was 9.38 */
  --text-muted: #4E5F56;   /* 7.1:1  on white, was 6.10 */
  --border:     #E2ECE7;
  --bg-soft:    #F6FBF9;   /* barely tinted; was noticeably green */
}

/* --- Stat strip: was a full dark-green band. Now white, which removes the
       single largest block of colour and lets the numerals carry it. -------- */
.ds-stats{ background:#fff; border-top:1px solid var(--border);
           border-bottom:1px solid var(--border); }
.ds-stats .container{ border-bottom:0; }
.ds-stat{ border-right:1px solid var(--border); }
.ds-stat b{ color:var(--blue-dk); }          /* 5.76:1 on white */
.ds-stat span{ color:var(--text-muted); }    /* 7.1:1 */
.ds-stat::after{ background:var(--blue); opacity:1; }

/* --- Offers: white with a green hairline, not a green wash. --------------- */
.ds-offers{ background:#fff; border-top:1px solid var(--border);
            border-bottom:2px solid var(--blue); }
.ds-offer{ color:var(--ink); }
.ds-offer svg{ color:var(--blue-dk); }
.ds-offer + .ds-offer{ border-left:1px solid var(--border); }

/* --- Soft sections: almost white, so the white/green rhythm stays clean. --- */
.section-soft,.ds-sec.soft{
  background:var(--bg-soft);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}

/* --- Cards: white with a crisper edge and a green top rule on hover. ------ */
.ds-card{ background:#fff; border:1px solid var(--border); }
.ds-card:hover{ border-color:rgba(0,172,105,.42); }
.ds-card .ic{ background:#F2FBF7; border:1px solid rgba(0,172,105,.22);
              color:var(--blue-dk); }
.ds-card:hover .ic{ background:var(--blue); border-color:var(--blue); color:#fff; }
.ds-card h3{ color:var(--ink); }

/* --- Dark anchors keep their weight but get a cleaner, less saturated base,
       so white type sits crisply rather than glowing against the green. ----- */
.ds-top{ background:#052018; }
.site-nav{ background:#06291D; }
.ds-footer{ background:#06291D; }
.ds-cta{ background:linear-gradient(120deg,#052018 0%,#0A3A2A 58%,#00623E 150%); }

/* Headings a touch darker for separation from body copy. */
h1,h2,h3,h4{ color:var(--ink); }
.ds-head h2{ color:var(--ink); }

/* ==========================================================================
   GOOGLE REVIEW PILL + AVATAR CLUSTER
   ========================================================================== */
.gproof{
  display:flex; align-items:center; justify-content:center;
  gap:16px; flex-wrap:wrap; margin:0 0 24px;
}
.gbubbles{ display:flex; align-items:center; }
.gb{
  width:44px; height:44px; border-radius:50%;
  border:3px solid #fff; margin-left:-13px; flex:none;
  box-shadow:0 2px 8px rgba(6,32,24,.28);
}
.gb:first-child{ margin-left:0; }
/* Abstract gradient discs. Deliberately not photographs of people - see the
   note on reviewPill() in site.js. */
.gb-1{ background:linear-gradient(140deg,#00C77A,#00754A); }
.gb-2{ background:linear-gradient(140deg,#4FC3F7,#0062A8); }
.gb-3{ background:linear-gradient(140deg,#FFD54F,#F0A500); }
.gb-4{ background:linear-gradient(140deg,#7FE9BC,#00A263); }
.gb-5{ background:linear-gradient(140deg,#90A4AE,#48606B); }
.gb-more{
  width:auto; min-width:44px; height:44px; padding:0 11px;
  background:var(--blue-dk); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.86rem; letter-spacing:-.01em;
}
.gpill{
  display:inline-flex; align-items:center; gap:9px;
  background:#fff; border-radius:999px;
  padding:10px 20px 10px 16px;
  box-shadow:0 3px 14px rgba(6,32,24,.20), 0 1px 3px rgba(6,32,24,.12);
  white-space:nowrap;
}
.gpill .g-logo{ flex:none; }
.gstars{ color:#FBBC05; font-size:1rem; letter-spacing:.05em; }
.gpill b{ color:#16241E; font-size:1.06rem; font-weight:800; }
.gcount{ color:#4E5F56; font-size:.92rem; font-weight:600; }

@media (max-width:560px){
  .gproof{ gap:12px; margin-bottom:20px; }
  .gb{ width:36px; height:36px; margin-left:-11px; border-width:2px; }
  .gb-more{ min-width:36px; height:36px; font-size:.78rem; padding:0 9px; }
  .gpill{ padding:8px 15px 8px 12px; gap:7px; }
  .gcount{ font-size:.84rem; }
  .gpill b{ font-size:.98rem; }
}

/* ==========================================================================
   MODERN TYPE + WHITE NAV
   BioRhyme (heavy slab serif) replaced with Plus Jakarta Sans: a geometric
   sans in the same family as the reference, which reads current rather than
   editorial and holds up far better at small sizes and in the nav.
   ========================================================================== */

body,
h1,h2,h3,h4,h5,
.nav-brand-name,.ds-fbrand b,.ds-stat b,.ds-bignum,.gpill b{
  font-family:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI",
              Roboto, "Helvetica Neue", Arial, sans-serif;
}
h1,h2,h3,h4{ font-weight:800; letter-spacing:-.035em; }
.ds-hero h1{ font-weight:800; letter-spacing:-.04em; line-height:1.06; }
.ds-cta h2,.ds-head h2{ font-weight:800; letter-spacing:-.035em; }
.ds-stat b{ font-weight:800; letter-spacing:-.035em; }
body{ font-weight:400; }
.ds-eyebrow,.eyebrow{ font-weight:700; letter-spacing:.16em; }

/* ==========================================================================
   WHITE NAVIGATION
   The dark bar stacked under a dark hero gave the page a heavy top third. A
   white bar separates the chrome from the content, matches the reference, and
   lets the logo sit on the white it was drawn for.
   ========================================================================== */

.site-nav{
  background:#fff;
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 0 rgba(6,41,29,.04);
}
.site-nav.scrolled{ box-shadow:0 4px 18px rgba(6,41,29,.10); }

.nav-links a{ color:#33423A; }                 /* 10.9:1 on white */
.nav-links a:hover,
.nav-links a[aria-current="page"]{
  color:var(--blue-dk); background:#F1FAF5;
}

/* Brand text returns: on white it reads cleanly beside the logo. */
.nav-brand-text{
  position:static; width:auto; height:auto; margin:0; padding:0;
  overflow:visible; clip:auto; white-space:normal;
  display:flex; flex-direction:column; line-height:1.15;
}
.nav-brand-name{ color:#10251C; font-weight:800; font-size:1.02rem; letter-spacing:-.03em; }
.nav-brand-sub{ color:var(--text-muted); font-weight:600; font-size:.64rem;
                letter-spacing:.13em; text-transform:uppercase; margin-top:2px; }

/* Compact review badge in the bar, as in the reference. */
.nav-rev{ display:flex; flex-direction:column; align-items:flex-end;
          line-height:1.15; margin-left:auto; }
.nav-rev .s{ color:#FBBC05; font-size:.82rem; letter-spacing:.04em; }
.nav-rev .t{ color:var(--text-muted); font-size:.78rem; font-weight:600; white-space:nowrap; }
.nav-rev a{ text-decoration:none; }

.nav-phone{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.1; }
.nav-phone .lbl{ color:var(--text-muted); font-size:.64rem; font-weight:700;
                 letter-spacing:.14em; text-transform:uppercase; }
.nav-phone a{ color:#10251C; font-weight:800; font-size:1.12rem;
              letter-spacing:-.03em; text-decoration:none; white-space:nowrap; }
.nav-phone a:hover{ color:var(--blue-dk); }

/* The burger has to flip to dark now that the bar is white. */
.nav-toggle span{ background:#10251C; }

/* The mobile drawer hangs off a white bar, so it is white too. */
@media (max-width:940px){
  .nav-links{ background:#fff; border-bottom:1px solid var(--border);
              box-shadow:0 18px 30px -14px rgba(6,41,29,.22); }
  .nav-rev{ display:none; }
  .nav-phone{ display:none; }
}
@media (min-width:941px){
  .nav-inner{ gap:18px; }
  .nav-brand{ margin-right:14px; }
  .nav-links{ margin-right:auto; }
}
@media (max-width:1180px) and (min-width:941px){ .nav-rev{ display:none; } }

/* The topbar above stays dark, which frames the white bar cleanly. */
.ds-top{ background:#052018; border-bottom:0; }

/* Skip link was navy-on-navy against the new white bar. */
.skip-link{ background:var(--blue-dk); color:#fff; }

/* ==========================================================================
   NAV FIT, third pass
   Measured at 1440px: nav-inner is 1160px but its children totalled 1453px.
   The reference nav fits five elements because it has no menu links; ours has
   eight, so the redundant pieces come out rather than the navigation.
     - .nav-phone removed in the generator: the call button already shows the
       number, so it was 131px of duplication.
     - brand text hidden on desktop: the logo image already reads "PEARLAND
       Locksmith", so the words beside it were 110px of repetition.
     - link padding tightened.
   ========================================================================== */
@media (min-width:941px){
  .nav-brand-text{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  .nav-links a{ padding:9px 8px; font-size:.9rem; }
  .nav-inner{ gap:14px; }
  .nav-rev{ margin-left:0; }
}
/* Below the desktop breakpoint the drawer takes the links, so the brand text
   comes back beside the logo where there is room for it. */
@media (max-width:940px){
  .nav-brand-text{ position:static; width:auto; height:auto; margin:0;
                   clip:auto; overflow:visible; }
}


/* ==========================================================================
   PAID-TRAFFIC LANDING PAGES
   Rebuilt to the reference structure. The previous version left a near-empty
   white nav (small logo far left, phone far right) and squeezed the hero into
   half width because the form sat beside it.
   ========================================================================== */

/* --- Nav: logo + name + rating + phone + quote button -------------------- */
.lp-nav .nav-inner{ gap:18px; }
.lp-nav .nav-brand{ cursor:default; margin-right:auto; }
.lp-nav .brand-logo{ height:52px; }
.lp-brand-text{ display:flex; flex-direction:column; line-height:1.2; }
.lp-brand-name{ color:#10251C; font-weight:800; font-size:1.08rem; letter-spacing:-.03em; }
.lp-brand-sub{ color:var(--text-muted); font-size:.72rem; font-weight:600; margin-top:2px; }
.lp-nav-right{ display:flex; align-items:center; gap:20px; }
.lp-nav-rev{ display:flex; flex-direction:column; align-items:flex-end;
             line-height:1.2; text-decoration:none; }
.lp-nav-rev .s{ color:#FBBC05; font-size:.84rem; letter-spacing:.04em; }
.lp-nav-rev .t{ color:var(--text-muted); font-size:.78rem; font-weight:600; white-space:nowrap; }
.lp-nav-phone{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.15; }
.lp-nav-phone .lbl{ color:var(--text-muted); font-size:.64rem; font-weight:700;
                    letter-spacing:.14em; text-transform:uppercase; }
.lp-nav-phone a{ color:#10251C; font-weight:800; font-size:1.16rem;
                 letter-spacing:-.03em; text-decoration:none; white-space:nowrap; }
.lp-nav-phone a:hover{ color:var(--blue-dk); }
.lp-nav-btn{ padding:12px 20px; font-size:.95rem; white-space:nowrap; }
.lp-nav-btn svg{ width:17px; height:17px; }

/* --- Hero: full width, message first -------------------------------------- */
.lp-hero{ position:relative; overflow:hidden; background:#101614;
          padding:34px 0 46px; isolation:isolate; text-align:center; }
.lp-hero-bg{ position:absolute; inset:0; z-index:0;
             background-size:cover; background-position:center 45%; }
/* Neutral charcoal rather than the green-tinted scrim. The green was doubling
   up with the brand green elsewhere on the page and made the hero read as one
   heavy block of colour. The green accent now comes only from the <em> and the
   buttons. */
.lp-hero-bg::after{ content:""; position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(16,20,18,.76) 0%, rgba(16,20,18,.64) 45%, rgba(16,20,18,.84) 100%),
  radial-gradient(85% 70% at 50% 45%, rgba(16,20,18,.44) 0%, rgba(16,20,18,.78) 100%); }
.lp-hero .container{ position:relative; z-index:2; }
.lp-hero-in{ max-width:880px; margin:0 auto; }
.lp-hero-in .ds-eyebrow{ justify-content:center; }
.lp-hero h1{ color:#fff; font-size:clamp(1.95rem,4vw,3rem); line-height:1.06;
             letter-spacing:-.04em; margin:10px 0 14px;
             text-shadow:0 2px 18px rgba(3,20,14,.6); }
.lp-hero h1 em{ font-style:normal; color:#7FE9BC; }
.lp-hero .sub{ color:#DCE6E1; font-size:1.04rem; line-height:1.58; max-width:58ch;
               margin:0 auto 18px; text-shadow:0 2px 14px rgba(3,20,14,.55); }
.lp-hero .gproof{ justify-content:center; margin-bottom:20px; }
.lp-cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.lp-call{ font-size:1.12rem; padding:15px 26px; letter-spacing:-.02em; }
.lp-call svg{ width:22px; height:22px; }
.lp-quote-btn,.lp-hero .btn-ghost{ padding:15px 24px; font-size:.98rem; }
.lp-hours{ display:inline-flex; align-items:center; gap:9px; flex-wrap:wrap;
           justify-content:center; color:#C3CFC9; font-size:.9rem;
           font-weight:600; margin:16px 0 0; }
.lp-hours svg{ width:17px; height:17px; color:#7FE9BC; }

/* --- Credentials strip ---------------------------------------------------- */
.lp-creds{ background:#fff; border-bottom:1px solid var(--border); }
.lp-creds .container{ display:grid; grid-template-columns:repeat(4,1fr);
                      gap:18px; padding-top:24px; padding-bottom:24px; }
.lp-cred{ display:flex; align-items:center; gap:12px; }
.lp-cred svg{ width:26px; height:26px; color:var(--blue-dk); flex:none; }
.lp-cred span{ display:flex; flex-direction:column; line-height:1.3; }
.lp-cred b{ color:var(--ink); font-size:.95rem; font-weight:800; letter-spacing:-.02em; }
.lp-cred small{ color:var(--text-muted); font-size:.82rem; }

/* --- Service grid --------------------------------------------------------- */
.lp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
.lp-scard{ background:#fff; border:1px solid var(--border); border-radius:14px;
           padding:26px 22px; box-shadow:var(--shadow-sm);
           transition:transform .24s, box-shadow .24s, border-color .24s; }
.lp-scard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg);
                 border-color:rgba(0,172,105,.4); }
.lp-scard h3{ font-size:1.1rem; margin:0 0 8px; }
.lp-scard p{ color:var(--text-muted); font-size:.94rem; margin:0; line-height:1.6; }

/* --- Why us + side card --------------------------------------------------- */
.lp-why{ display:grid; grid-template-columns:1fr 340px; gap:48px; align-items:start; }
.lp-why h2{ margin:10px 0 14px; }
.lp-list li{ margin-bottom:11px; }
.lp-why-card{ background:var(--navy); color:#fff; border-radius:16px; padding:28px 26px;
              box-shadow:0 20px 50px -24px rgba(3,20,14,.6); position:sticky; top:92px; }
.lp-why-card h3{ color:#fff; font-size:1.12rem; margin:0 0 6px; }
.lp-side-num{ display:block; color:#7FE9BC; font-size:1.7rem; font-weight:800;
              letter-spacing:-.03em; text-decoration:none; margin:2px 0 6px; }
.lp-why-card p{ color:#BFD8CC; font-size:.92rem; }
.lp-side-list{ list-style:none; padding:0; margin:18px 0 0; }
.lp-side-list li{ position:relative; padding-left:24px; margin-bottom:9px; font-size:.92rem; }
.lp-side-list li::before{ content:""; position:absolute; left:0; top:.42em;
  width:14px; height:14px; border-radius:50%; background:rgba(0,172,105,.16); }
.lp-why-card .lp-side-list li{ color:#D3E7DD; }
.lp-why-card .lp-side-list li::before{ background:rgba(127,233,188,.24); }
.lp-side-lic{ margin:16px 0 0 !important; font-size:.8rem !important;
              color:rgba(255,255,255,.55) !important; }

/* --- How it works --------------------------------------------------------- */
.lp-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:44px; }
.lp-step{ position:relative; padding-top:8px; }
.lp-step .n{ display:flex; align-items:center; justify-content:center;
             width:42px; height:42px; border-radius:50%;
             background:var(--blue); color:#fff; font-weight:800; font-size:1.05rem;
             margin-bottom:14px; }
.lp-step h3{ font-size:1.06rem; margin:0 0 7px; }
.lp-step p{ color:var(--text-muted); font-size:.93rem; margin:0; line-height:1.6; }

/* --- Quote section -------------------------------------------------------- */
.lp-quote{ background:linear-gradient(140deg,#052018 0%,#0A3A2A 60%,#00623E 165%);
           color:#fff; padding:74px 0; scroll-margin-top:90px; }
.lp-quote-in{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start; }
.lp-quote-copy h2{ color:#fff; font-size:clamp(1.7rem,3.2vw,2.4rem); margin:12px 0 12px; }
.lp-quote-copy p{ color:#C6DDD2; font-size:1.03rem; }
.lp-quote-or{ font-size:.95rem !important; }
.lp-quote-or a{ color:#7FE9BC; font-weight:700; text-decoration:none; }
.lp-quote-copy .lp-side-list li{ color:#D3E7DD; }
.lp-quote-copy .lp-side-list li::before{ background:rgba(127,233,188,.24); }
.lp-quote-form{ background:#fff; border-radius:16px; padding:28px 26px;
                box-shadow:0 26px 64px -24px rgba(3,20,14,.6); }
.lp-f-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.lp-form .field{ margin-bottom:14px; }
.lp-f-note{ font-size:.82rem; color:var(--text-muted); margin:12px 0 0; text-align:center; }

/* --- Final band + footer -------------------------------------------------- */
.lp-final{ background:#fff; text-align:center; padding:78px 0;
           border-top:1px solid var(--border); }
.lp-final h2{ font-size:clamp(1.7rem,3.4vw,2.5rem); margin:0 0 12px; }
.lp-final p{ color:var(--text-muted); max-width:58ch; margin:0 auto 26px; font-size:1.05rem; }
.lp-cta-center{ justify-content:center; }
.lp-final .btn-ghost{ background:#fff; color:var(--ink); border:1px solid var(--border); }
.lp-final .btn-ghost:hover{ background:var(--bg-soft); }
.lp-final-sub{ font-size:.9rem !important; color:var(--text-muted) !important;
               margin:20px auto 0 !important; }
.lp-footer{ background:#052018; color:#9FBFB1; padding:36px 0; font-size:.9rem;
            text-align:center; }
.lp-footer p{ margin:0 0 7px; }
.lpf-name{ color:#fff; font-weight:800; font-size:1.04rem; letter-spacing:-.02em; }
.lp-footer a{ color:#7FE9BC; text-decoration:none; }
.lpf-dba{ color:rgba(255,255,255,.5); font-size:.82rem; margin-top:12px; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width:1080px){
  .lp-nav-rev{ display:none; }
  .lp-brand-sub{ display:none; }
}
@media (max-width:940px){
  .lp-nav .brand-logo{ height:44px; }
  .lp-nav-phone{ display:none; }
  .lp-grid{ grid-template-columns:repeat(2,1fr); }
  .lp-steps{ grid-template-columns:repeat(2,1fr); gap:28px; }
  .lp-why{ grid-template-columns:1fr; gap:34px; }
  .lp-why-card{ position:static; }
  .lp-quote-in{ grid-template-columns:1fr; gap:32px; }
  .lp-creds .container{ grid-template-columns:1fr 1fr; }
}
@media (max-width:620px){
  .lp-hero{ padding:24px 0 36px; }
  .lp-grid{ grid-template-columns:1fr; }
  .lp-steps{ grid-template-columns:1fr; gap:22px; }
  .lp-creds .container{ grid-template-columns:1fr; gap:14px; }
  .lp-f-row{ grid-template-columns:1fr; }
  .lp-call,.lp-hero .btn-ghost,.lp-final .btn-ghost{ width:100%; justify-content:center; }
  .lp-quote-form{ padding:22px 18px; }
  .lp-brand-text{ display:none; }
  .lp-nav-btn{ padding:11px 15px; font-size:.9rem; }
}

/* --- "Text us" nav button -------------------------------------------------
   The full label is long, so it collapses to "Text us" once the bar tightens
   rather than wrapping or pushing the row out of alignment. */
.lp-btn-short{ display:none; }
@media (max-width:1180px){
  .lp-btn-long{ display:none; }
  .lp-btn-short{ display:inline; }
}

/* --- In-content photo on each landing page -------------------------------- */
.lp-photo{
  width:100%; height:auto; aspect-ratio:3/2; object-fit:cover;
  border-radius:14px; margin:0 0 26px;
  box-shadow:var(--shadow-md);
}

/* --- Tighten the run between the credentials strip and the first section ---
   The strip already provides a visual break, so the next section does not need
   a full section's worth of top padding underneath it. Measured 74px before. */
.lp-creds + .ds-sec{ padding-top:44px; }
.lp-creds + .ds-sec .ds-head{ margin-bottom:0; }
.lp-grid{ margin-top:32px; }
.lp-steps{ margin-top:34px; }
@media (max-width:620px){
  .lp-creds + .ds-sec{ padding-top:34px; }
  .lp-grid{ margin-top:24px; }
}