/* ==========================================================================
   Garage Door Pros — Design System
   Faithful port of the Claude Design blueprint (Homepage + shared components).
   Tokens first, then base, then components, then responsive (container queries).
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Brand blues */
  --gdp-blue:        #1B4965; /* primary */
  --gdp-blue-700:    #14384E; /* headings / dark CTA band */
  --gdp-navy:        #0C2330; /* hero bg / stat bar */
  --gdp-teal-900:    #0F2A3A; /* footer / problems section */
  --gdp-teal-800:    #0F2A3A;

  /* Accent / CTA orange */
  --gdp-orange:      #F2810C; /* decorative: eyebrows, icons, accents on light/dark */
  --gdp-orange-cta:  #C2410C; /* action: white text on orange — WCAG AA (≈5:1) */
  --gdp-orange-br:   #FF9E3D;
  --gdp-orange-300:  #FFB85C;
  --gdp-orange-200:  #FFC489;
  --gdp-orange-100:  #FFD9A8;
  --gdp-orange-061:  #FFB061;

  /* Status */
  --gdp-red:         #E23744;
  --gdp-green:       #1F9D55;
  --gdp-green-br:    #34D17F;
  --gdp-green-bg:    #E6F6EC;

  /* Neutrals */
  --gdp-page-bg:     #F6F8FA;
  --gdp-card-bg:     #F8FAFC;
  --gdp-ink:         #1B2B36;
  --gdp-ink-700:     #2C3E4C;
  --gdp-muted:       #546472;
  --gdp-muted-d:     #8FA8B8; /* muted on dark */
  --gdp-muted-d2:    #9DB6C5; /* footer text */
  --gdp-muted-d3:    #B8CCD8;
  --gdp-line:        #E3E9EF;
  --gdp-line-2:      #EEF2F6;
  --gdp-line-3:      #D8E0E8; /* input border */
  --gdp-blue-bg:     #EAF1F5; /* light blue icon chip */

  /* Type */
  --gdp-head: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gdp-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Layout */
  --gdp-wrap: 1200px;
  --gdp-radius: 14px;

  /* Shadows */
  --gdp-shadow-cta:   0 12px 28px rgba(242,129,12,.38);
  --gdp-shadow-card:  0 10px 24px rgba(20,56,78,.10);
  --gdp-shadow-form:  0 24px 60px rgba(20,56,78,.16);
}

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

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

body.gdp {
  margin: 0;
  font-family: var(--gdp-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--gdp-ink);
  background: var(--gdp-page-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--gdp-blue); }

:focus-visible { outline: 3px solid var(--gdp-orange-cta); outline-offset: 2px; } /* AA non-text 1.4.11: darker orange clears 3:1 on light surfaces */

/* Accessible visually-hidden text */
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden;
  position: absolute !important; word-wrap: normal !important;
}
.screen-reader-text:focus {
  background: #fff; color: var(--gdp-blue); clip: auto; clip-path: none;
  height: auto; width: auto; padding: 12px 18px; z-index: 100000;
  border-radius: 8px; left: 8px; top: 8px;
}

/* Material Symbols icon font */
.msym {
  font-family: 'Material Symbols Rounded';
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* Programmatic skip-link target — no focus ring on the container itself */
#main:focus { outline: none; }

/* Page container — establishes the container-query context */
.gdp-app {
  width: 100%;
  container-type: inline-size;
  container-name: page;
}

/* ---------- Layout primitives ---------- */
.gdp-wrap { max-width: var(--gdp-wrap); margin: 0 auto; width: 100%; }
.gdp-section { padding: 54px 20px; }

.gdp-hero     { display: grid; grid-template-columns: 1fr; gap: 30px; }
.gdp-services { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gdp-3        { display: grid; grid-template-columns: 1fr; gap: 18px; }
.gdp-4        { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gdp-trust    { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; }
.gdp-areas    { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.gdp-footer   { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 22px; }
.gdp-cta-band { display: grid; grid-template-columns: 1fr; gap: 22px; }

/* Responsive helpers (driven by container width) */
.hide-sm { display: none !important; }
.only-sm { display: flex; }

/* ---------- Typography ---------- */
.gdp-h1 {
  font-family: var(--gdp-head);
  font-weight: 800;
  font-size: 35px;
  line-height: 1.08;
  letter-spacing: -1.4px;
  margin: 0 0 18px;
}
.gdp-h2 {
  font-family: var(--gdp-head);
  font-weight: 800;
  font-size: 29px;
  line-height: 1.12;
  letter-spacing: -.5px;
  margin: 0;
}
.gdp-eyebrow {
  font-family: var(--gdp-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gdp-orange-cta); /* AA: was #F2810C (2.65:1) — small label text needs 4.5:1 */
  margin-bottom: 10px;
}
.gdp-section-head { text-align: center; max-width: 660px; margin: 0 auto 38px; }
.gdp-lead { font-size: 17px; color: var(--gdp-muted); margin: 0; }

.gdp-tabnum { font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */
.gdp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--gdp-head);
  font-weight: 700;
  font-size: 17px;
  padding: 15px 24px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.1;
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.gdp-btn:active { transform: translateY(1px); }
.gdp-btn--cta   { background: var(--gdp-orange-cta); color: #fff; box-shadow: var(--gdp-shadow-cta); }
.gdp-btn--cta:hover { background: #A8380A; box-shadow: 0 16px 34px rgba(242,129,12,.46); }
.gdp-btn--navy  { background: var(--gdp-blue); color: #fff; }
.gdp-btn--ghost { background: rgba(255,255,255,.07); color: #fff; border: 1.5px solid rgba(255,255,255,.22); }
.gdp-btn--ghost:hover { background: rgba(255,255,255,.12); }
.gdp-btn--block { width: 100%; }
.gdp-btn--sm    { font-size: 15px; padding: 11px 18px; border-radius: 10px; }
.gdp-btn--pulse { animation: gdpPulse 2.2s infinite; }

@keyframes gdpPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(226,55,68,.5); }
  50%      { box-shadow: 0 0 0 7px rgba(226,55,68,0); }
}

/* ---------- Pills / chips ---------- */
.gdp-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 7px 14px;
  font-family: var(--gdp-head);
  font-weight: 700;
  font-size: 13px;
}
.gdp-pill--hero {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: var(--gdp-orange-100);
}
.gdp-pill--orange { background: rgba(242,129,12,.18); color: var(--gdp-orange-200); }
.gdp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gdp-green-br); box-shadow: 0 0 0 3px rgba(52,209,127,.25); }

.gdp-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 9px 13px;
  font-family: var(--gdp-head);
  font-weight: 700;
  font-size: 13.5px;
  color: #DCE8EF;
}

/* ---------- Icon box ---------- */
.gdp-icon-box {
  width: 46px; height: 46px;
  border-radius: 11px;
  background: var(--gdp-blue-bg);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.gdp-icon-box .msym { font-size: 26px; color: var(--gdp-blue); }
.gdp-icon-box--red { background: #FCE9EA; }
.gdp-icon-box--red .msym { color: var(--gdp-red); }

/* ==========================================================================
   Emergency banner
   ========================================================================== */
.gdp-emergency {
  background: #D32030; /* AA: was --gdp-red #E23744 (4.32:1) */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 9px 44px 9px 16px;
  position: relative;
  font-family: var(--gdp-body);
}
.gdp-emergency__text { font-weight: 600; font-size: 15px; line-height: 1.3; text-align: center; }
.gdp-emergency a { color: #fff; text-decoration: underline; font-weight: 700; white-space: nowrap; }
.gdp-emergency__close {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.18); border: none; color: #fff;
  width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.gdp-emergency[hidden] { display: none; }

/* ==========================================================================
   Header
   ========================================================================== */
.gdp-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gdp-line);
}
.gdp-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 20px;
}
.gdp-logo { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.gdp-logo__mark {
  width: 42px; height: 42px; border-radius: 11px; background: var(--gdp-blue);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(27,73,101,.25);
}
.gdp-logo__mark .msym { font-size: 25px; color: #fff; }
.gdp-logo__name { display: flex; flex-direction: column; line-height: 1.05; }
.gdp-logo__title { font-family: var(--gdp-head); font-weight: 800; font-size: 19px; color: var(--gdp-blue-700); letter-spacing: -.3px; }
.gdp-logo__sub { font-size: 11.5px; font-weight: 600; color: #157A41; letter-spacing: .3px; text-transform: uppercase; } /* AA: was --gdp-green #1F9D55 (3.49:1) */

.gdp-nav { align-items: center; gap: 26px; font-family: var(--gdp-head); font-weight: 600; font-size: 15px; }
.gdp-nav a { color: #33485A; text-decoration: none; }
.gdp-nav a:hover { color: var(--gdp-blue); }

.gdp-header__actions { display: flex; align-items: center; gap: 10px; }
.gdp-header__call { flex-direction: column; align-items: flex-end; text-decoration: none; line-height: 1.05; }
.gdp-header__call .lbl { font-size: 11px; font-weight: 600; color: var(--gdp-muted); text-transform: uppercase; letter-spacing: .5px; }
.gdp-header__call .num { font-family: var(--gdp-head); font-weight: 800; font-size: 19px; color: var(--gdp-blue); }
.gdp-iconbtn {
  width: 42px; height: 42px; border-radius: 10px; background: var(--gdp-blue);
  display: flex; align-items: center; justify-content: center; text-decoration: none; border: none; cursor: pointer;
}
.gdp-iconbtn .msym { font-size: 22px; color: #fff; }
.gdp-iconbtn--soft { background: var(--gdp-blue-bg); }
.gdp-iconbtn--soft .msym { font-size: 24px; color: var(--gdp-blue); }

/* Mobile menu */
.gdp-menu { border-top: 1px solid var(--gdp-line); background: #fff; padding: 10px 20px 16px; }
.gdp-menu[hidden] { display: none; }
.gdp-menu__nav { display: flex; flex-direction: column; font-family: var(--gdp-head); font-weight: 600; font-size: 17px; }
.gdp-menu__nav a { color: #33485A; text-decoration: none; padding: 11px 0; border-bottom: 1px solid var(--gdp-line-2); }
.gdp-menu__nav a:last-child { border-bottom: none; }
.gdp-menu__cta { display: block; text-align: center; margin-top: 12px; background: var(--gdp-orange-cta); color: #fff; font-family: var(--gdp-head); font-weight: 700; font-size: 16px; padding: 13px; border-radius: 10px; text-decoration: none; }

/* ==========================================================================
   Hero
   ========================================================================== */
.gdp-hero-section {
  position: relative; overflow: hidden;
  background: var(--gdp-navy);
  padding: 52px 20px 58px;
}
.gdp-hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(820px 460px at 82% -8%, rgba(242,129,12,.20), transparent 58%),
    radial-gradient(700px 520px at 8% 110%, rgba(31,157,85,.14), transparent 60%);
}
.gdp-hero-grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  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: 48px 48px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
          mask-image: linear-gradient(180deg, #000, transparent 85%);
}
.gdp-hero .gdp-h1 { color: #fff; }
.gdp-hero .gdp-h1 .hl { color: var(--gdp-orange-br); }
.gdp-hero__sub { font-size: 18px; color: #A9C2D0; margin: 0 0 26px; max-width: 512px; }
.gdp-hero__rating { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; flex-wrap: wrap; }
.gdp-stars { color: var(--gdp-orange-300); font-size: 18px; letter-spacing: 2px; }
.gdp-hero__rating .meta { font-family: var(--gdp-head); font-weight: 700; font-size: 15px; color: #fff; }
.gdp-hero__rating .meta span { color: var(--gdp-muted-d); font-weight: 600; }
.gdp-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.gdp-hero__badges { display: flex; flex-wrap: wrap; gap: 9px; }
.gdp-bbb { font-family: var(--gdp-head); font-weight: 800; font-size: 12px; color: var(--gdp-navy); background: #fff; border-radius: 4px; padding: 2px 5px; letter-spacing: -.5px; }

/* Hero forms (lead + call variants) */
.gdp-quote-card {
  background: #fff; border-radius: 18px; padding: 26px;
  box-shadow: var(--gdp-shadow-form); border: 1px solid var(--gdp-line);
}
.gdp-quote-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.gdp-quote-card__head .msym { font-size: 26px; color: var(--gdp-orange); }
.gdp-quote-card__head h2 { font-family: var(--gdp-head); font-weight: 800; font-size: 22px; color: var(--gdp-blue-700); margin: 0; }
.gdp-quote-card__note { font-size: 14.5px; color: var(--gdp-muted); margin: 0 0 18px; }

.gdp-form { display: flex; flex-direction: column; gap: 12px; }
.gdp-form__row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.gdp-input, .gdp-select {
  width: 100%; font-family: var(--gdp-body); font-size: 16px;
  padding: 13px 14px; border: 1px solid var(--gdp-line-3); border-radius: 10px;
  background: #fff; color: var(--gdp-ink); outline: none;
}
.gdp-input:focus, .gdp-select:focus { border-color: var(--gdp-blue); box-shadow: 0 0 0 3px rgba(27,73,101,.12); }
.gdp-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23546472' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.gdp-form__fine { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: var(--gdp-muted); }
.gdp-form__fine a { color: var(--gdp-blue); font-weight: 700; text-decoration: none; }

.gdp-quote-success { text-align: center; padding: 18px 6px; }
.gdp-quote-success__ring { width: 64px; height: 64px; border-radius: 50%; background: var(--gdp-green-bg); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.gdp-quote-success__ring .msym { font-size: 36px; color: var(--gdp-green); }
.gdp-quote-success h2 { font-family: var(--gdp-head); font-weight: 800; font-size: 23px; color: var(--gdp-blue-700); margin: 0 0 8px; }
.gdp-quote-success p { font-size: 16px; color: var(--gdp-muted); margin: 0 0 18px; }
[hidden] { display: none !important; }

/* Call-first hero variant */
.gdp-callcard {
  background: var(--gdp-blue-700); border-radius: 18px; padding: 32px 26px;
  box-shadow: 0 24px 60px rgba(20,56,78,.22); text-align: center; color: #fff;
}
.gdp-callcard__num { font-family: var(--gdp-head); font-weight: 800; font-size: 38px; color: #fff; text-decoration: none; letter-spacing: -1px; display: block; margin-bottom: 18px; }

/* ==========================================================================
   Social proof + trust stat bar
   ========================================================================== */
.gdp-proof { background: #fff; border-bottom: 1px solid #E8ECF0; }
.gdp-proof__label { text-align: center; font-family: var(--gdp-head); font-weight: 700; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: #9AA8B4; margin-bottom: 18px; }
.gdp-proof__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 26px; font-family: var(--gdp-head); font-weight: 700; }

.gdp-statbar { background: var(--gdp-navy); color: #fff; }
.gdp-stat { text-align: center; padding: 24px 16px; border-right: 1px solid rgba(255,255,255,.08); }
.gdp-stat:last-child { border-right: none; }
.gdp-stat__num { font-family: var(--gdp-head); font-weight: 800; font-size: 30px; color: #fff; font-variant-numeric: tabular-nums; }
.gdp-stat__label { font-size: 14px; color: var(--gdp-muted-d); font-weight: 600; }

/* ==========================================================================
   Service cards / problem chips
   ========================================================================== */
.gdp-service {
  background: #fff; border: 1px solid var(--gdp-line); border-radius: var(--gdp-radius);
  padding: 20px; text-decoration: none; display: block;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.gdp-service:hover { border-color: var(--gdp-blue); box-shadow: var(--gdp-shadow-card); }
.gdp-service--em { border-color: #F4C7CB; }
.gdp-service--em:hover { border-color: var(--gdp-red); box-shadow: 0 10px 24px rgba(226,55,68,.12); }
.gdp-service__title { font-family: var(--gdp-head); font-weight: 700; font-size: 17px; color: var(--gdp-blue-700); margin-bottom: 5px; }
.gdp-service__desc { font-size: 14.5px; color: var(--gdp-muted); line-height: 1.45; }

.gdp-problem {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; padding: 15px 16px; text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.gdp-problem:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); }
.gdp-problem .msym { font-size: 24px; color: var(--gdp-orange-061); }
.gdp-problem span:last-child { font-family: var(--gdp-head); font-weight: 700; font-size: 15px; color: #fff; }

/* ==========================================================================
   Sections on dark
   ========================================================================== */
.gdp-section--white { background: #fff; border-top: 1px solid var(--gdp-line); border-bottom: 1px solid var(--gdp-line); }
.gdp-section--navy { background: var(--gdp-navy); }
.gdp-section--teal { background: var(--gdp-teal-900); }
.gdp-section--problems { background: var(--gdp-teal-900); }
.gdp-eyebrow--light { color: var(--gdp-orange-061); }
.gdp-eyebrow--white { color: var(--gdp-orange-200); }
.gdp-h2--white { color: #fff; }
.gdp-lead--dark { color: #9DB6C5; }

/* How it works steps */
.gdp-step { text-align: center; }
.gdp-step__icon { position: relative; width: 72px; height: 72px; margin: 0 auto 16px; }
.gdp-step__icon > span:first-child { width: 72px; height: 72px; border-radius: 18px; background: var(--gdp-blue-bg); display: flex; align-items: center; justify-content: center; }
.gdp-step__icon .msym { font-size: 36px; color: var(--gdp-blue); }
.gdp-step__icon--green > span:first-child { background: var(--gdp-green-bg); }
.gdp-step__icon--green .msym { color: var(--gdp-green); }
.gdp-step__badge { position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; border-radius: 50%; background: var(--gdp-orange-cta); color: #fff; font-family: var(--gdp-head); font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.gdp-step__badge--green { background: var(--gdp-green); }
.gdp-step h3 { font-family: var(--gdp-head); font-weight: 700; font-size: 19px; color: var(--gdp-blue-700); margin: 0 0 8px; }
.gdp-step p { font-size: 15.5px; color: var(--gdp-muted); margin: 0; }

/* Why-us cards */
.gdp-feature { background: #fff; border: 1px solid var(--gdp-line); border-radius: var(--gdp-radius); padding: 22px; }
.gdp-feature > .msym { font-size: 30px; color: var(--gdp-blue); }
.gdp-feature h3 { font-family: var(--gdp-head); font-weight: 700; font-size: 17px; color: var(--gdp-blue-700); margin: 12px 0 6px; }
.gdp-feature p { font-size: 14.5px; color: var(--gdp-muted); margin: 0; line-height: 1.45; }

/* Recent work cards */
.gdp-work { border-radius: var(--gdp-radius); overflow: hidden; border: 1px solid var(--gdp-line); background: #fff; }
.gdp-work__img { aspect-ratio: 4 / 3; background: repeating-linear-gradient(135deg, #E7EDF2, #E7EDF2 10px, #EFF3F7 10px, #EFF3F7 20px); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; }
.gdp-work__img .msym { font-size: 34px; color: #9DB1C0; }
.gdp-work__img .cap { font-family: ui-monospace, monospace; font-size: 12px; color: #54616C; } /* AA: was #7E94A4 */
.gdp-work__body { padding: 14px 16px; }
.gdp-work__title { font-family: var(--gdp-head); font-weight: 700; font-size: 15px; color: var(--gdp-blue-700); }
.gdp-work__meta { font-size: 13.5px; color: var(--gdp-muted); }

/* Cost calculator CTA band */
.gdp-costband { background: var(--gdp-blue-700); border-radius: 22px; padding: 40px 34px; overflow: hidden; }
.gdp-costband__box { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 22px; text-align: center; }
.gdp-costband__label { font-size: 13px; color: #9DB6C5; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.gdp-costband__price { font-family: var(--gdp-head); font-weight: 800; font-size: 34px; color: #fff; font-variant-numeric: tabular-nums; }

/* Reviews */
.gdp-review { background: var(--gdp-card-bg); border: 1px solid var(--gdp-line); border-radius: var(--gdp-radius); padding: 24px; }
.gdp-review__stars { color: var(--gdp-orange-cta); font-size: 16px; letter-spacing: 2px; margin-bottom: 12px; } /* AA: rating glyphs need 3:1 on light */
.gdp-review p { font-size: 16px; color: var(--gdp-ink-700); margin: 0 0 18px; line-height: 1.55; }
.gdp-review__author { display: flex; align-items: center; gap: 11px; }
.gdp-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--gdp-blue); color: #fff; font-family: var(--gdp-head); font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gdp-review__name { font-family: var(--gdp-head); font-weight: 700; font-size: 15px; color: var(--gdp-blue-700); }
.gdp-review__city { font-size: 13px; color: var(--gdp-muted); }

/* Service areas */
.gdp-area {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border: 1px solid var(--gdp-line); border-radius: 10px;
  padding: 13px 15px; text-decoration: none; color: var(--gdp-blue-700);
  font-family: var(--gdp-head); font-weight: 600; font-size: 15px;
  transition: border-color .15s ease;
}
.gdp-area:hover { border-color: var(--gdp-blue); }
.gdp-area .msym { font-size: 18px; color: #9DB1C0; }

/* Brands strip */
.gdp-brands { background: #fff; border-top: 1px solid var(--gdp-line); border-bottom: 1px solid var(--gdp-line); padding: 36px 20px; }
.gdp-brands__label { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #5F7080; margin-bottom: 20px; text-align: center; } /* AA: was #8095A4 (3.11:1) */
.gdp-brands__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 34px; }
.gdp-brands__row span { font-family: var(--gdp-head); font-weight: 800; font-size: 20px; color: #6E7E8C; } /* AA large-text: was #9FB0BD (2.23:1) */

/* ==========================================================================
   FAQ accordion (native details)
   ========================================================================== */
.gdp-faqs { display: flex; flex-direction: column; gap: 12px; }
.gdp-faq { background: #fff; border: 1px solid var(--gdp-line); border-radius: 12px; padding: 4px 20px; }
.gdp-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  cursor: pointer; list-style: none; padding: 16px 0;
  font-family: var(--gdp-head); font-weight: 700; font-size: 17px; color: var(--gdp-blue-700);
}
.gdp-faq summary::-webkit-details-marker { display: none; }
.gdp-faq__chev { font-size: 24px; color: var(--gdp-blue); transition: transform .2s; }
.gdp-faq[open] .gdp-faq__chev { transform: rotate(180deg); }
.gdp-faq p { margin: 0 0 16px; font-size: 16px; color: var(--gdp-muted); line-height: 1.55; }

/* ==========================================================================
   Final CTA + footer
   ========================================================================== */
.gdp-finalcta { background: var(--gdp-blue); padding: 56px 20px; text-align: center; }
.gdp-finalcta .gdp-h2 { color: #fff; margin: 0 0 14px; }
.gdp-finalcta p { font-size: 18px; color: #C2D5E0; margin: 0 0 28px; }
.gdp-finalcta__btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

.gdp-site-footer { background: var(--gdp-teal-900); color: var(--gdp-muted-d2); padding: 52px 20px 30px; }
.gdp-footer__brand-row { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.gdp-footer__brand-row .mark { width: 40px; height: 40px; border-radius: 10px; background: var(--gdp-blue); display: flex; align-items: center; justify-content: center; }
.gdp-footer__brand-row .mark .msym { font-size: 23px; color: #fff; }
.gdp-footer__brand-row .name { font-family: var(--gdp-head); font-weight: 800; font-size: 18px; color: #fff; }
.gdp-footer__desc { font-size: 14.5px; line-height: 1.55; margin: 0 0 16px; max-width: 320px; }
.gdp-footer__phone { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-family: var(--gdp-head); font-weight: 800; font-size: 20px; text-decoration: none; margin-bottom: 14px; }
.gdp-footer__phone .msym { font-size: 22px; color: var(--gdp-orange); }
.gdp-footer__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.gdp-footer__badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: #C2D5E0; background: rgba(255,255,255,.07); border-radius: 7px; padding: 6px 10px; }
.gdp-footer__col-title { font-family: var(--gdp-head); font-weight: 700; font-size: 14px; color: #fff; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 14px; }
.gdp-footer__links { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
.gdp-footer__links a { color: var(--gdp-muted-d2); text-decoration: none; }
.gdp-footer__links a:hover { color: #fff; }
.gdp-footer__bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 34px; padding-top: 20px; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; font-size: 13px; }
.gdp-footer__bottom a { color: var(--gdp-muted-d2); text-decoration: none; }

/* Sticky mobile bottom bar */
.gdp-mobilebar {
  position: sticky; bottom: 0; z-index: 45;
  background: #fff; border-top: 1px solid var(--gdp-line);
  padding: 10px 14px; gap: 10px; box-shadow: 0 -6px 20px rgba(20,56,78,.08);
}
.gdp-mobilebar a { flex: 1; }

/* ==========================================================================
   Inner-page components (service / hub templates)
   ========================================================================== */

/* Two- and check-grids (mobile-first; cols added in the responsive block) */
.gdp-2      { display: grid; grid-template-columns: 1fr; gap: 20px; }
.gdp-checks { display: grid; grid-template-columns: 1fr; gap: 12px; }

/* Breadcrumb bar */
.gdp-breadcrumb { background: #fff; border-bottom: 1px solid var(--gdp-line); }
.gdp-breadcrumb__inner { padding: 11px 20px; font-size: 13.5px; color: #54616C; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gdp-breadcrumb a { color: #54616C; text-decoration: none; } /* AA: was #7E94A4 (3.64:1) */
.gdp-breadcrumb a:hover { color: var(--gdp-blue); }
.gdp-breadcrumb .msym { font-size: 16px; }
.gdp-breadcrumb__current { color: var(--gdp-blue); font-weight: 600; }

/* Hub hero (centered dark hero) */
.gdp-hub-hero { padding-top: 44px; padding-bottom: 46px; }
.gdp-hub-hero .gdp-wrap { max-width: 780px; }
.gdp-hub-hero .gdp-h1 { color: #fff; }
.gdp-hub-hero .gdp-h1 .hl { color: var(--gdp-orange-br); }
.gdp-hub-hero__sub { font-size: 18px; color: #A9C2D0; margin: 0 0 24px; max-width: 560px; }

/* Service Hub grid — caps at 3 columns per the hub blueprint (1 → 2 → 3),
   distinct from the homepage .gdp-services which intentionally goes to 4. */
.gdp-hubgrid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@container page (min-width: 560px)  { .gdp-hubgrid { grid-template-columns: 1fr 1fr; } }
@container page (min-width: 1000px) { .gdp-hubgrid { grid-template-columns: repeat(3, 1fr); } }

/* Service card with "Learn more" (hub) */
.gdp-service__more { display: inline-flex; align-items: center; gap: 5px; font-family: var(--gdp-head); font-weight: 700; font-size: 14px; color: var(--gdp-blue); margin-top: 12px; }
.gdp-service--em .gdp-service__more { color: var(--gdp-red); }

/* Warning-signs / checklist cards */
.gdp-check { display: flex; gap: 13px; background: #fff; border: 1px solid var(--gdp-line); border-radius: 13px; padding: 18px; }
.gdp-check > .msym { font-size: 24px; color: var(--gdp-red); flex-shrink: 0; }
.gdp-check__title { font-family: var(--gdp-head); font-weight: 700; font-size: 16px; color: var(--gdp-blue-700); }
.gdp-check__desc { font-size: 14.5px; color: var(--gdp-muted); }

/* Comparison cards (e.g. torsion vs extension) */
.gdp-compare { background: #fff; border: 1px solid var(--gdp-line); border-radius: 16px; padding: 26px; }
.gdp-compare__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.gdp-compare__head .gdp-icon-box { margin-bottom: 0; }
.gdp-compare__head h3 { font-family: var(--gdp-head); font-weight: 800; font-size: 19px; color: var(--gdp-blue-700); margin: 0; }
.gdp-compare p { font-size: 15.5px; color: var(--gdp-muted); margin: 0 0 14px; line-height: 1.5; }
.gdp-compare__foot { font-size: 14px; color: #5F7080; font-weight: 600; } /* AA: was #7E94A4 (3.64:1) */

/* Price table */
.gdp-pricetable { background: var(--gdp-card-bg); border: 1px solid var(--gdp-line); border-radius: 16px; overflow: hidden; }
.gdp-pricetable__head { display: flex; justify-content: space-between; padding: 13px 18px; background: var(--gdp-blue-700); color: #fff; font-family: var(--gdp-head); font-weight: 700; font-size: 14px; }
.gdp-pricetable__row { display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--gdp-line-2); font-size: 15px; }
.gdp-pricetable__row:nth-child(odd) { background: #fff; }
.gdp-pricetable__row:last-child { border-bottom: none; }
.gdp-pricetable__row .lbl { color: var(--gdp-ink-700); font-weight: 600; }
.gdp-pricetable__row .val { font-family: var(--gdp-head); font-weight: 700; color: var(--gdp-blue); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* DIY warning callout */
.gdp-warning { display: flex; gap: 15px; align-items: flex-start; background: #FCF1EC; border: 1px solid #F4C7CB; border-radius: 16px; padding: 24px; }
.gdp-warning > .msym { font-size: 32px; color: var(--gdp-red); flex-shrink: 0; }
.gdp-warning h2 { font-family: var(--gdp-head); font-weight: 800; font-size: 21px; color: var(--gdp-blue-700); margin: 0 0 8px; }
.gdp-warning p { font-size: 16px; color: #5A4244; margin: 0 0 10px; line-height: 1.55; }
.gdp-warning p:last-child { margin-bottom: 0; }

/* Related-service cards */
.gdp-relcard { background: var(--gdp-card-bg); border: 1px solid var(--gdp-line); border-radius: 13px; padding: 20px; text-decoration: none; display: block; transition: border-color .15s ease; }
.gdp-relcard:hover { border-color: var(--gdp-blue); }
.gdp-relcard > .msym { font-size: 26px; color: var(--gdp-blue); }
.gdp-relcard__title { font-family: var(--gdp-head); font-weight: 700; font-size: 16px; color: var(--gdp-blue-700); margin: 10px 0 4px; }
.gdp-relcard__desc { font-size: 14px; color: var(--gdp-muted); }

/* Process step (compact, inner pages) — reuses .gdp-step but slightly smaller icon */
.gdp-step--sm .gdp-step__icon { width: 66px; height: 66px; }
.gdp-step--sm .gdp-step__icon > span:first-child { width: 66px; height: 66px; border-radius: 16px; }
.gdp-step--sm .gdp-step__icon .msym { font-size: 32px; }
.gdp-step--sm .gdp-step__badge { width: 26px; height: 26px; top: -7px; right: -7px; font-size: 13px; }
.gdp-step--sm h3 { font-size: 18px; }

/* Before/after slider */
.gdp-ba { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; border: 1px solid var(--gdp-line); box-shadow: 0 12px 40px rgba(20,56,78,.12); user-select: none; }
.gdp-ba__layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; }
.gdp-ba__before { background: repeating-linear-gradient(135deg,#E8D9D6,#E8D9D6 14px,#F0E5E3 14px,#F0E5E3 28px); }
.gdp-ba__before .msym { font-size: 40px; color: #C49A93; }
.gdp-ba__before .cap { font-family: ui-monospace, monospace; font-size: 12.5px; color: #7A5249; } /* AA: was #A87E76 */
.gdp-ba__after { background: repeating-linear-gradient(135deg,#D6E8DD,#D6E8DD 14px,#E4F0EA 14px,#E4F0EA 28px); clip-path: inset(0 var(--gdp-ba-clip, 50%) 0 0); }
.gdp-ba__after .msym { font-size: 40px; color: #7FB093; }
.gdp-ba__after .cap { font-family: ui-monospace, monospace; font-size: 12.5px; color: #3F6B52; } /* AA: was #5E9072 */
.gdp-ba__tag { position: absolute; top: 14px; color: #fff; font-family: var(--gdp-head); font-weight: 700; font-size: 12px; padding: 5px 11px; border-radius: 99px; }
.gdp-ba__tag--before { left: 14px; background: rgba(20,56,78,.8); }
.gdp-ba__tag--after { right: 14px; background: rgba(31,157,85,.9); }
.gdp-ba__divider { position: absolute; top: 0; bottom: 0; width: 3px; background: #fff; left: var(--gdp-ba-pos, 50%); transform: translateX(-50%); box-shadow: 0 0 0 1px rgba(20,56,78,.15); pointer-events: none; }
.gdp-ba__handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 42px; height: 42px; border-radius: 50%; background: #fff; box-shadow: 0 4px 12px rgba(20,56,78,.25); display: flex; align-items: center; justify-content: center; }
.gdp-ba__handle .msym { font-size: 24px; color: var(--gdp-blue); }
.gdp-ba__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
/* Visible keyboard focus for the (transparent) range overlay — WCAG 2.4.7 */
.gdp-ba:focus-within .gdp-ba__handle { outline: 3px solid var(--gdp-orange-cta); outline-offset: 3px; }

/* ==========================================================================
   City / programmatic-page components
   ========================================================================== */

/* Local climate-context section */
.gdp-climate__body { max-width: 760px; }
.gdp-climate__body p { font-size: 17px; color: var(--gdp-ink-700); margin: 0 0 16px; line-height: 1.6; }
.gdp-climate-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.gdp-climate-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--gdp-line); border-radius: 11px;
  padding: 10px 14px; font-family: var(--gdp-head); font-weight: 700; font-size: 13.5px; color: var(--gdp-blue-700);
}
.gdp-climate-badge .msym { font-size: 19px; color: var(--gdp-orange); }

/* Neighborhood pills */
.gdp-nbhoods { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; }
.gdp-nb-pill { display: inline-flex; align-items: center; background: var(--gdp-blue-bg); border-radius: 9px; padding: 8px 14px; font-family: var(--gdp-head); font-weight: 600; font-size: 14.5px; color: var(--gdp-blue-700); }
.gdp-zips { font-size: 15px; color: var(--gdp-muted); line-height: 1.55; }

/* Map placeholder */
.gdp-map-ph {
  aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; border: 1px solid var(--gdp-line);
  background: repeating-linear-gradient(135deg, #E7EDF2, #E7EDF2 12px, #EFF3F7 12px, #EFF3F7 24px);
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px;
}
.gdp-map-ph .msym { font-size: 36px; color: #9DB1C0; }
.gdp-map-ph .cap { font-family: ui-monospace, monospace; font-size: 12.5px; color: #54616C; } /* AA: was #7E94A4 */

/* Locations hub — metro cards (city + state, two lines) */
.gdp-metro {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #fff; border: 1px solid var(--gdp-line); border-radius: 12px;
  padding: 16px 18px; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.gdp-metro:hover { border-color: var(--gdp-blue); box-shadow: var(--gdp-shadow-card); }
.gdp-metro__city { font-family: var(--gdp-head); font-weight: 700; font-size: 16px; color: var(--gdp-blue-700); }
.gdp-metro__state { font-size: 13.5px; color: var(--gdp-muted); }
.gdp-metro .msym { font-size: 20px; color: #9DB1C0; }

/* Browse by state */
.gdp-states { display: grid; grid-template-columns: 1fr; gap: 26px 30px; }
.gdp-state-col__head { display: flex; align-items: center; gap: 8px; font-family: var(--gdp-head); font-weight: 800; font-size: 16px; color: var(--gdp-blue-700); margin-bottom: 12px; }
.gdp-state-col__head .msym { font-size: 20px; color: var(--gdp-orange); }
.gdp-state-col__list { display: flex; flex-direction: column; gap: 9px; font-size: 15px; }
.gdp-state-col__list a { color: #33485A; text-decoration: none; }
.gdp-state-col__list a:hover { color: var(--gdp-blue); }
.gdp-state-col__list span { color: var(--gdp-muted); }

/* ==========================================================================
   Standard pages — 404, Thank-You, About, For Contractors
   ========================================================================== */

/* Full-screen centered dark layouts (404 / thank-you) */
.gdp-fullscreen { min-height: 72vh; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 20px; text-align: center; background: var(--gdp-navy); }
.gdp-fullscreen .gdp-fs-inner { position: relative; z-index: 1; max-width: 640px; width: 100%; }
.gdp-fs-glow { position: absolute; inset: 0; pointer-events: none; }
.gdp-fs-grid { position: absolute; inset: 0; pointer-events: none; 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: 48px 48px; -webkit-mask-image: radial-gradient(circle at 50% 40%, #000, transparent 75%); mask-image: radial-gradient(circle at 50% 40%, #000, transparent 75%); }
.gdp-fs-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-bottom: 34px; }
.gdp-fs-logo .mark { width: 40px; height: 40px; border-radius: 10px; background: var(--gdp-blue); display: flex; align-items: center; justify-content: center; }
.gdp-fs-logo .mark .msym { font-size: 23px; color: #fff; }
.gdp-fs-logo .name { font-family: var(--gdp-head); font-weight: 800; font-size: 18px; color: #fff; }
.gdp-fullscreen h1 { font-family: var(--gdp-head); font-weight: 800; color: #fff; letter-spacing: -1px; margin: 0 0 12px; }
.gdp-fullscreen > .gdp-fs-inner > p { font-size: 17.5px; color: #A9C2D0; margin: 0 auto 30px; max-width: 480px; }

.gdp-404__code { font-family: var(--gdp-head); font-weight: 800; font-size: 84px; color: #fff; letter-spacing: -3px; line-height: 1; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.gdp-404__code .door { display: inline-flex; width: 74px; height: 74px; border-radius: 14px; background: var(--gdp-blue); align-items: center; justify-content: center; }
.gdp-404__code .door .msym { font-size: 50px; color: var(--gdp-orange-br); }

.gdp-links { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 28px; text-align: left; }
.gdp-link-card { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 15px 16px; text-decoration: none; transition: background .15s ease; }
.gdp-link-card:hover { background: rgba(255,255,255,.1); }
.gdp-link-card > .msym { font-size: 24px; color: var(--gdp-orange-br); flex-shrink: 0; }
.gdp-link-card .t { font-family: var(--gdp-head); font-weight: 700; font-size: 15px; color: #fff; display: block; }
.gdp-link-card .d { font-size: 13px; color: var(--gdp-muted-d); }

.gdp-mini-footer { background: #0A1C27; color: #7E96A6; padding: 20px; text-align: center; font-size: 13px; }
.gdp-mini-footer a { color: var(--gdp-muted-d2); text-decoration: none; }

/* Thank-you confirmation */
.gdp-thanks-ring { width: 84px; height: 84px; border-radius: 50%; background: rgba(31,157,85,.16); border: 1px solid rgba(52,209,127,.4); display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; }
.gdp-thanks-ring .msym { font-size: 46px; color: var(--gdp-green-br); }
.gdp-thanks h1 { font-size: 38px; line-height: 1.08; }
.gdp-thanks-steps { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 32px; }
.gdp-thanks-step { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 20px; }
.gdp-thanks-step .msym { font-size: 26px; color: var(--gdp-orange-br); }
.gdp-thanks-step .t { font-family: var(--gdp-head); font-weight: 700; font-size: 15px; color: #fff; margin: 8px 0 4px; }
.gdp-thanks-step .d { font-size: 13.5px; color: var(--gdp-muted-d); }
.gdp-thanks-call { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 20px; margin-bottom: 26px; }
.gdp-thanks-call .lbl { font-size: 14px; color: var(--gdp-muted-d); margin-bottom: 6px; }
.gdp-thanks-call .num { font-family: var(--gdp-head); font-weight: 800; font-size: 28px; color: #fff; text-decoration: none; letter-spacing: -.5px; }

/* About */
.gdp-story { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; }
.gdp-story p { font-size: 17px; color: var(--gdp-ink-700); margin: 0 0 14px; }
.gdp-story p:last-child { margin-bottom: 0; }
.gdp-story__img { border-radius: 18px; overflow: hidden; border: 1px solid var(--gdp-line); aspect-ratio: 4 / 3; background: repeating-linear-gradient(135deg, #E7EDF2, #E7EDF2 12px, #EFF3F7 12px, #EFF3F7 24px); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; }
.gdp-story__img .msym { font-size: 40px; color: #9DB1C0; }
.gdp-story__img .cap { font-family: ui-monospace, monospace; font-size: 12.5px; color: #54616C; }
.gdp-cred-card { background: var(--gdp-card-bg); border: 1px solid var(--gdp-line); border-radius: 14px; padding: 24px; text-align: center; }
.gdp-cred-card .ring { width: 54px; height: 54px; border-radius: 14px; background: var(--gdp-green-bg); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.gdp-cred-card .ring .msym { font-size: 30px; color: var(--gdp-green); }
.gdp-cred-card h3 { font-family: var(--gdp-head); font-weight: 700; font-size: 17px; color: var(--gdp-blue-700); margin: 0 0 6px; }
.gdp-cred-card p { font-size: 14.5px; color: var(--gdp-muted); margin: 0; line-height: 1.45; }
.gdp-trustline { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--gdp-line-2); font-family: var(--gdp-head); font-weight: 700; font-size: 15px; color: var(--gdp-muted); }
.gdp-promise { background: var(--gdp-blue-700); border-radius: 20px; padding: 36px; text-align: center; color: #fff; }
.gdp-promise > .msym { font-size: 40px; color: var(--gdp-orange-300); }
.gdp-promise h2 { color: #fff; margin: 12px 0 12px; }
.gdp-promise p { font-size: 17px; color: var(--gdp-muted-d3); margin: 0 auto 22px; max-width: 560px; }
.gdp-promise__badges { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.gdp-promise__badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 9px 14px; font-family: var(--gdp-head); font-weight: 700; font-size: 14px; color: #DCE8EF; }
.gdp-promise__badge .msym { font-size: 18px; color: var(--gdp-green-br); }

/* For Contractors */
.gdp-pricing { display: grid; grid-template-columns: 1fr; gap: 18px; max-width: 760px; margin: 0 auto; }
.gdp-price-card { background: #fff; border: 1px solid var(--gdp-line); border-radius: 16px; padding: 26px; }
.gdp-price-card--feat { background: var(--gdp-navy); border-color: var(--gdp-navy); color: #fff; position: relative; }
.gdp-price-card__tag { position: absolute; top: 16px; right: 16px; background: var(--gdp-orange-cta); color: #fff; font-family: var(--gdp-head); font-weight: 700; font-size: 11px; padding: 4px 10px; border-radius: 99px; }
.gdp-price-card__label { font-family: var(--gdp-head); font-weight: 700; font-size: 14px; color: #5F7080; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.gdp-price-card--feat .gdp-price-card__label { color: var(--gdp-orange-100); }
.gdp-price-card__price { font-family: var(--gdp-head); font-weight: 800; font-size: 34px; color: var(--gdp-blue-700); font-variant-numeric: tabular-nums; line-height: 1.2; }
.gdp-price-card--feat .gdp-price-card__price { color: #fff; }
.gdp-price-card__price span { font-size: 15px; color: #5F7080; font-weight: 600; }
.gdp-price-card__sub { font-size: 14px; color: var(--gdp-muted); margin: 6px 0 18px; }
.gdp-price-card--feat .gdp-price-card__sub { color: var(--gdp-muted-d3); }
.gdp-price-card__list { display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; color: var(--gdp-ink-700); }
.gdp-price-card--feat .gdp-price-card__list { color: #DCE8EF; }
.gdp-price-card__list span { display: flex; gap: 8px; align-items: flex-start; }
.gdp-price-card__list .msym { font-size: 19px; color: var(--gdp-green); }
.gdp-price-card--feat .gdp-price-card__list .msym { color: var(--gdp-green-br); }
.gdp-price-card__cta { display: inline-flex; align-items: center; gap: 8px; background: var(--gdp-blue-bg); color: var(--gdp-blue); font-family: var(--gdp-head); font-weight: 700; font-size: 15px; padding: 12px 18px; border-radius: 10px; text-decoration: none; }
.gdp-bigquote { font-family: var(--gdp-head); font-weight: 700; font-size: 23px; color: var(--gdp-blue-700); line-height: 1.4; letter-spacing: -.3px; margin: 0 0 18px; }

/* ==========================================================================
   Cost calculator widget
   ========================================================================== */
.gdp-calc { display: grid; grid-template-columns: 1fr; background: #fff; border: 1px solid var(--gdp-line); border-radius: 18px; overflow: hidden; box-shadow: 0 18px 50px rgba(20,56,78,.12); }
.gdp-calc__inputs { padding: 28px; }
.gdp-calc__head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.gdp-calc__head .msym { font-size: 26px; color: var(--gdp-orange); }
.gdp-calc__head h2 { font-family: var(--gdp-head); font-weight: 800; font-size: 22px; color: var(--gdp-blue-700); margin: 0; }
.gdp-calc__note { font-size: 14.5px; color: var(--gdp-muted); margin: 0 0 22px; }
.calc-fields { display: grid; grid-template-columns: 1fr; gap: 16px; }
.calc-fields label { display: block; }
.calc-fields .lbl { display: block; font-family: var(--gdp-head); font-weight: 700; font-size: 13px; color: #33485A; margin-bottom: 7px; }
.gdp-sel {
  width: 100%; font-family: var(--gdp-body); font-size: 15.5px; padding: 12px 14px;
  border: 1px solid var(--gdp-line-3); border-radius: 10px; background: #fff; color: var(--gdp-ink); outline: none;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23546472' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px;
}
.gdp-sel:focus { border-color: var(--gdp-blue); box-shadow: 0 0 0 3px rgba(27,73,101,.12); }
.calc-fields__note { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #5F7080; }
.calc-fields__note .msym { font-size: 18px; color: var(--gdp-green); }
.gdp-calc__result { background: var(--gdp-blue-700); padding: 28px; display: flex; flex-direction: column; justify-content: center; color: #fff; }
.gdp-calc__result-label { font-size: 13px; color: var(--gdp-muted-d2); font-weight: 600; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px; }
.gdp-calc__price { font-family: var(--gdp-head); font-weight: 800; font-size: 40px; color: #fff; letter-spacing: -1px; font-variant-numeric: tabular-nums; line-height: 1.05; }
.gdp-calc__bar { margin: 20px 0 8px; height: 8px; background: rgba(255,255,255,.12); border-radius: 99px; position: relative; overflow: hidden; }
.gdp-calc__bar-fill { position: absolute; top: 0; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #F2A24C, #F2810C); transition: left .25s ease, width .25s ease; }
.gdp-calc__scale { display: flex; justify-content: space-between; font-size: 12px; color: #7E97A8; margin-bottom: 18px; }
.gdp-calc__summary { font-size: 14px; color: var(--gdp-muted-d3); margin-bottom: 20px; min-height: 20px; }

/* ==========================================================================
   Learn / article content
   ========================================================================== */
.gdp-answer { background: #EAF1F5; border: 1px solid #CFE0EA; border-left: 4px solid var(--gdp-blue); border-radius: 12px; padding: 22px 24px; }
.gdp-answer__label { display: inline-flex; align-items: center; gap: 7px; font-family: var(--gdp-head); font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--gdp-blue); margin-bottom: 8px; }
.gdp-answer__label .msym { font-size: 18px; color: var(--gdp-orange); }
.gdp-answer p { margin: 0; font-size: 17.5px; line-height: 1.6; color: var(--gdp-ink-700); }

.gdp-steps-list { list-style: none; counter-reset: gdp; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.gdp-steps-list li { display: flex; gap: 16px; align-items: flex-start; }
.gdp-steps-list__num { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--gdp-blue); color: #fff; font-family: var(--gdp-head); font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.gdp-steps-list h3 { font-family: var(--gdp-head); font-weight: 700; font-size: 18px; color: var(--gdp-blue-700); margin: 4px 0 6px; }
.gdp-steps-list p { font-size: 16px; color: var(--gdp-muted); line-height: 1.6; margin: 0; }

.gdp-learn-card { background: #fff; border: 1px solid var(--gdp-line); border-radius: 14px; padding: 22px; text-decoration: none; display: block; transition: border-color .15s ease, box-shadow .15s ease; }
.gdp-learn-card:hover { border-color: var(--gdp-blue); box-shadow: var(--gdp-shadow-card); }
.gdp-section--white .gdp-learn-card { background: var(--gdp-card-bg); }
.gdp-learn-card__title { font-family: var(--gdp-head); font-weight: 700; font-size: 17px; color: var(--gdp-blue-700); margin-bottom: 8px; line-height: 1.3; }
.gdp-learn-card__excerpt { font-size: 14.5px; color: var(--gdp-muted); line-height: 1.5; margin-bottom: 12px; }

/* ==========================================================================
   Responsive — container queries (mobile-first, matches the blueprint)
   ========================================================================== */
@container page (min-width: 560px) {
  .gdp-checks { grid-template-columns: 1fr 1fr; }
  .gdp-states { grid-template-columns: 1fr 1fr; }
  .gdp-links { grid-template-columns: 1fr 1fr; }
  .gdp-thanks-steps { grid-template-columns: repeat(3, 1fr); }
  .calc-fields { grid-template-columns: 1fr 1fr; }
}
@container page (min-width: 820px) {
  .gdp-calc { grid-template-columns: 1.05fr .95fr; }
}
@container page (min-width: 760px) {
  .gdp-story { grid-template-columns: 1fr 1fr; gap: 44px; }
  .gdp-pricing { grid-template-columns: repeat(3, 1fr); }
}
@container page (min-width: 920px) {
  .gdp-states { grid-template-columns: repeat(3, 1fr); }
}
@container page (min-width: 620px) {
  .gdp-services { grid-template-columns: repeat(3, 1fr); }
  .gdp-areas    { grid-template-columns: repeat(3, 1fr); }
}
@container page (min-width: 760px) {
  .gdp-section { padding: 78px 40px; }
  .gdp-2 { grid-template-columns: 1fr 1fr; gap: 26px; }
  .gdp-3 { grid-template-columns: repeat(3, 1fr); }
  .gdp-4 { grid-template-columns: repeat(4, 1fr); }
  .gdp-trust { grid-template-columns: repeat(4, 1fr); }
  .gdp-h2 { font-size: 40px; }
  .gdp-footer { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}
@container page (min-width: 820px) {
  .gdp-cta-band { grid-template-columns: 1.25fr .75fr; align-items: center; }
}
@container page (min-width: 920px) {
  .gdp-hero { grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
  .gdp-form__row { grid-template-columns: 1.4fr 1fr; }
  .hide-sm { display: flex !important; }
  .only-sm { display: none; }
  .gdp-h1 { font-size: 53px; }
}
@container page (min-width: 1024px) {
  .gdp-services { grid-template-columns: repeat(4, 1fr); }
  .gdp-areas    { grid-template-columns: repeat(4, 1fr); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gdp-btn--pulse { animation: none; }
  * { scroll-behavior: auto !important; }
  .gdp-workgal__item img { transition: none; }
}

/* Work gallery */
.gdp-workgal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.gdp-workgal__item {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 14px;
  background: #E6ECF0;
  box-shadow: 0 1px 3px rgba(12, 35, 48, .08);
}
.gdp-workgal__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.gdp-workgal__item:hover img { transform: scale(1.04); }

/* Header logo image */
.gdp-logo__img { height: 46px; width: auto; display: block; }
@media (max-width: 620px) { .gdp-logo__img { height: 38px; } }