/* ============================================================
   GPG · Editorial Page Design System
   Extracted from homepage hero + founder dossier + Plano page.
   Shared by all standalone content pages (about, privacy, terms,
   sell/* sub-pages, buy hub, free-home-valuation).
   ============================================================ */

:root {
  --navy:       #0A1F3C;
  --navy-soft:  #142B4D;
  --navy-deep:  #061429;
  --steel:      #2E6DA4;
  --steel-dim:  #1F5685;
  --steel-soft: #6993BB;
  --white:      #FFFFFF;
  --cream:      #F5F2EC;
  --tint:       #EBF2FA;
  --tint-deep:  #DCE7F2;
  --charcoal:   #2C3E50;
  --muted:      #6B7785;
  --serif:      'Playfair Display', Georgia, serif;
  --sans:       'Onest', system-ui, -apple-system, sans-serif;
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
}

.gpg { font-family: var(--sans); color: var(--charcoal); line-height: 1.6; background: var(--white); }
.gpg *, .gpg *::before, .gpg *::after { box-sizing: border-box; }
.gpg img { max-width: 100%; height: auto; display: block; }
.gpg a { color: var(--steel); text-decoration: underline; text-underline-offset: 2px; }
.gpg a:hover { color: var(--navy); }

/* ============================================================
   BREADCRUMBS — small italic Playfair trail at very top of each page
============================================================ */
.gpg-crumbs {
  background: var(--white);
  border-bottom: 1px solid var(--tint-deep);
  padding: 14px 24px;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.gpg-crumbs__inner { max-width: 1200px; margin: 0 auto; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.gpg-crumbs__sep { color: var(--steel-soft); opacity: .6; }
.gpg-crumbs__current { color: var(--navy); }
.gpg-crumbs a { color: var(--muted); text-decoration: none; }
.gpg-crumbs a:hover { color: var(--steel); }

/* ============================================================
   HERO — editorial light variant (default for content pages)
============================================================ */
.gpg-hero {
  position: relative;
  background: var(--white);
  padding: clamp(80px, 10vh, 128px) 24px clamp(56px, 7vh, 80px);
  overflow: hidden;
  isolation: isolate;
}
.gpg-hero--dark {
  background: var(--navy-deep);
  color: var(--white);
}
.gpg-hero--dark::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(46,109,164,.22) 0%, transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  pointer-events: none;
}
.gpg-hero__numeral {
  position: absolute;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20rem, 38vw, 38rem);
  line-height: .85;
  color: var(--navy);
  opacity: .025;
  letter-spacing: -.04em;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  top: 48%; right: -2%;
  transform: translateY(-50%);
}
.gpg-hero--dark .gpg-hero__numeral { color: var(--steel-soft); opacity: .08; }

.gpg-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: 0 auto;
}
.gpg-hero__eyebrow {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0 0 22px;
}
.gpg-hero--dark .gpg-hero__eyebrow { color: var(--steel-soft); }

.gpg-hero__headline {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -.022em;
  color: var(--navy);
  margin: 0 0 24px;
  max-width: 22ch;
  text-wrap: balance;
}
.gpg-hero--dark .gpg-hero__headline { color: var(--white); }
.gpg-hero__headline em {
  font-style: italic;
  color: var(--steel);
}
.gpg-hero--dark .gpg-hero__headline em { color: var(--steel-soft); }

.gpg-hero__rule {
  width: 48px;
  height: 2px;
  background: var(--steel);
  border: none;
  margin: 0 0 28px;
}

.gpg-hero__lede {
  font-family: var(--sans);
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  line-height: 1.55;
  color: var(--charcoal);
  margin: 0 0 32px;
  max-width: 56ch;
}
.gpg-hero--dark .gpg-hero__lede { color: rgba(255,255,255,.85); }

.gpg-hero__credentials {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 22px;
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.gpg-hero--dark .gpg-hero__credentials { color: rgba(255,255,255,.55); }
.gpg-hero__credential {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.gpg-hero__credential:not(:first-child)::before {
  content: '';
  width: 5px; height: 5px;
  background: var(--steel);
  border-radius: 50%;
  opacity: .6;
}

/* ============================================================
   SECTION wrapper — editorial section with optional numeral watermark
============================================================ */
.gpg-section {
  position: relative;
  background: var(--white);
  padding: clamp(72px, 9vh, 112px) 24px;
  overflow: hidden;
  isolation: isolate;
}
.gpg-section--cream { background: var(--cream); }
.gpg-section--tint  { background: var(--tint); }
.gpg-section--navy  {
  background: var(--navy-deep);
  color: var(--white);
}
.gpg-section--navy .gpg-section-h,
.gpg-section--navy .gpg-section-body,
.gpg-section--navy .gpg-section-body strong { color: var(--white); }

.gpg-section__numeral {
  position: absolute;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20rem, 36vw, 36rem);
  line-height: .85;
  color: var(--navy);
  opacity: .025;
  letter-spacing: -.04em;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.gpg-section--navy .gpg-section__numeral { color: var(--steel-soft); opacity: .07; }
.gpg-section__numeral--tl { top: -4%;  left: -2%; }
.gpg-section__numeral--tr { top: -4%;  right: -2%; }
.gpg-section__numeral--bl { bottom: -4%; left: -2%; }
.gpg-section__numeral--br { bottom: -8%; right: -2%; }
.gpg-section__numeral--c  { top: 48%; right: -2%; transform: translateY(-50%); }

.gpg-section__inner {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: 0 auto;
}
.gpg-section__inner--wide { max-width: 1080px; }

.gpg-eyebrow {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0 0 18px;
}
.gpg-section--navy .gpg-eyebrow { color: var(--steel-soft); }

.gpg-section-h {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.875rem, 3.8vw, 2.625rem);
  line-height: 1.08;
  letter-spacing: -.018em;
  color: var(--navy);
  margin: 0 0 22px;
  max-width: 26ch;
  text-wrap: balance;
}
.gpg-section-h em {
  font-style: italic;
  color: var(--steel);
}

.gpg-rule {
  width: 48px;
  height: 2px;
  background: var(--steel);
  border: none;
  margin: 0 0 32px;
}

.gpg-section-body {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--charcoal);
  max-width: 58ch;
}
.gpg-section-body p { margin: 0 0 18px; }
.gpg-section-body p:last-child { margin-bottom: 0; }
.gpg-section-body strong {
  font-weight: 600;
  color: var(--navy);
}
.gpg-section-body em {
  font-style: italic;
}

.gpg-h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--navy);
  margin: 32px 0 12px;
}

/* ============================================================
   DOSSIER ROWS — fact table (used on /about/ + portrait blocks)
============================================================ */
.gpg-rows {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--tint-deep);
  margin: 0 0 32px;
}
.gpg-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--tint-deep);
  align-items: baseline;
}
.gpg-row__label {
  font-family: var(--sans);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.gpg-row__value {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.0625rem;
  color: var(--navy);
  letter-spacing: -.005em;
  line-height: 1.4;
}
.gpg-row__value strong {
  font-style: normal;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  color: var(--navy);
  letter-spacing: -.005em;
  display: inline-block;
  margin-right: 8px;
}

/* ============================================================
   COMPARE TABLE — used on vs-traditional / cash-offer comparison
============================================================ */
.gpg-compare {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--tint-deep);
  border-radius: 8px;
  overflow: hidden;
  margin: 24px 0;
}
.gpg-compare thead th {
  background: var(--navy);
  color: var(--white);
  font-family: var(--sans);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 18px 22px;
  text-align: left;
}
.gpg-compare tbody th {
  background: var(--cream);
  font-family: var(--sans);
  font-size: .92rem;
  font-weight: 600;
  color: var(--navy);
  padding: 18px 22px;
  text-align: left;
  border-bottom: 1px solid var(--tint-deep);
  width: 34%;
}
.gpg-compare tbody td {
  padding: 18px 22px;
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--charcoal);
  border-bottom: 1px solid var(--tint-deep);
  border-left: 1px solid var(--tint-deep);
}
.gpg-compare .col-us {
  background: rgba(46,109,164,.06);
  color: var(--navy);
  font-weight: 500;
}
.gpg-compare tr:last-child th,
.gpg-compare tr:last-child td { border-bottom: none; }
@media (max-width: 640px) {
  .gpg-compare thead th,
  .gpg-compare tbody th,
  .gpg-compare tbody td { padding: 12px 14px; font-size: .85rem; }
}

/* ============================================================
   STEPS — vertical timeline (used on /sell/process/)
============================================================ */
.gpg-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: gpgstep;
}
.gpg-step {
  position: relative;
  counter-increment: gpgstep;
  padding: 0 0 36px 64px;
  border-left: 2px solid var(--tint-deep);
  margin-left: 20px;
}
.gpg-step:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}
.gpg-step::before {
  content: counter(gpgstep, decimal-leading-zero);
  position: absolute;
  left: -26px;
  top: -6px;
  width: 48px; height: 48px;
  background: var(--navy);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .02em;
  border: 4px solid var(--white);
  box-shadow: 0 0 0 2px var(--tint-deep);
}
.gpg-section--cream .gpg-step::before { border-color: var(--cream); }
.gpg-step__meta {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0 0 6px;
}
.gpg-step__h {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--navy);
  margin: 0 0 8px;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.gpg-step__p {
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--charcoal);
  line-height: 1.65;
  margin: 0;
}

/* ============================================================
   CARDS GRID — used on /buy/ and tier explainers
============================================================ */
.gpg-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.gpg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--tint-deep);
  border-radius: 10px;
  padding: 32px 28px;
  text-decoration: none;
  color: inherit;
  transition: border-color .25s var(--ease-out),
              transform .25s var(--ease-out),
              box-shadow .25s var(--ease-out);
  box-shadow: 0 1px 3px rgba(10,31,60,.04);
}
.gpg-card:hover {
  border-color: var(--steel);
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -8px rgba(10,31,60,.14);
  color: inherit;
}
.gpg-card__ord {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.0625rem;
  color: var(--steel);
  margin: 0 0 10px;
  letter-spacing: .01em;
}
.gpg-card__h {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.3125rem;
  color: var(--navy);
  margin: 0 0 10px;
  letter-spacing: -.012em;
  line-height: 1.2;
}
.gpg-card__p {
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--charcoal);
  line-height: 1.6;
  margin: 0 0 18px;
  flex: 1;
}
.gpg-card__link {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .005em;
  color: var(--steel);
  text-decoration: none;
}
.gpg-card__link::after {
  content: ' →';
}

/* ============================================================
   AUTHOR CARD — EEA-T byline (bottom of every content page)
============================================================ */
.gpg-author {
  background: var(--cream);
  border: 1px solid var(--tint-deep);
  border-radius: 10px;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 22px;
  align-items: start;
  margin: 0;
}
.gpg-author__portrait {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--tint);
  overflow: hidden;
  position: relative;
}
.gpg-author__portrait img { width: 100%; height: 100%; object-fit: cover; }
.gpg-author__label {
  font-family: var(--sans);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
}
.gpg-author__name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--navy);
  margin: 0 0 4px;
  letter-spacing: -.005em;
}
.gpg-author__role {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: .9375rem;
  color: var(--charcoal);
  margin: 0 0 12px;
  letter-spacing: -.003em;
}
.gpg-author__credentials {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.gpg-author__credentials a { color: var(--muted); text-decoration: none; }
.gpg-author__credentials a:hover { color: var(--steel); text-decoration: underline; }
@media (max-width: 540px) {
  .gpg-author { grid-template-columns: 1fr; text-align: left; padding: 22px 24px; }
  .gpg-author__portrait { margin: 0 0 14px; }
}

/* ============================================================
   CTA BAND — bottom-of-page conversion strip
============================================================ */
.gpg-cta {
  background: var(--navy-deep);
  color: var(--white);
  padding: clamp(56px, 7vh, 88px) 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.gpg-cta::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse at 70% 30%, rgba(46,109,164,.22) 0%, transparent 60%);
}
.gpg-cta__inner { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; }
.gpg-cta__eyebrow {
  font-family: var(--sans);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--steel-soft);
  margin: 0 0 14px;
}
.gpg-cta__h {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.75rem, 3.2vw, 2.25rem);
  line-height: 1.1;
  color: var(--white);
  margin: 0 0 14px;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.gpg-cta__p {
  font-family: var(--sans);
  font-size: 1rem;
  color: rgba(255,255,255,.78);
  margin: 0 0 28px;
  line-height: 1.55;
}
.gpg-cta__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.gpg-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 6px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out);
  cursor: pointer;
}
.gpg-btn--primary { background: var(--white); color: var(--navy); }
.gpg-btn--primary:hover { background: var(--cream); color: var(--navy); }
.gpg-btn--ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.4); }
.gpg-btn--ghost:hover { border-color: var(--white); color: var(--white); }
.gpg-btn--navy { background: var(--navy); color: var(--white); }
.gpg-btn--navy:hover { background: var(--navy-soft); color: var(--white); }
.gpg-btn--ghost-light { background: transparent; color: var(--navy); border-color: var(--tint-deep); }
.gpg-btn--ghost-light:hover { border-color: var(--steel); }

/* ============================================================
   FAQ — editorial Q&A
============================================================ */
.gpg-faq__item {
  padding: 22px 0;
  border-bottom: 1px solid var(--tint-deep);
}
.gpg-faq__item:first-child { border-top: 1px solid var(--tint-deep); }
.gpg-faq__q {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.1875rem;
  color: var(--navy);
  margin: 0 0 10px;
  letter-spacing: -.01em;
  line-height: 1.25;
}
.gpg-faq__a {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--charcoal);
  line-height: 1.65;
  margin: 0;
}
.gpg-faq__a strong { font-weight: 600; color: var(--navy); }

/* ============================================================
   PILL ROW — caption strip / supporting facts
============================================================ */
.gpg-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
}
.gpg-pill {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--steel);
  background: var(--tint);
  padding: 6px 12px;
  border-radius: 100px;
}

/* ============================================================
   FORM — used on /free-home-valuation/ + /contact/
============================================================ */
.gpg-form {
  background: var(--white);
  border: 1px solid var(--tint-deep);
  border-radius: 10px;
  padding: clamp(32px, 5vw, 48px);
  box-shadow: 0 16px 48px rgba(10,31,60,.06);
}
.gpg-form__label {
  display: block;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
}
.gpg-form__field { margin: 0 0 16px; }
.gpg-form__input,
.gpg-form__textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1.5px solid var(--tint-deep);
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--navy);
  background: var(--white);
  outline: none;
  transition: border-color .18s var(--ease-out);
}
.gpg-form__input:focus,
.gpg-form__textarea:focus { border-color: var(--navy); }
.gpg-form__textarea { min-height: 90px; resize: vertical; }
.gpg-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .gpg-form__row { grid-template-columns: 1fr; } }
.gpg-form__cta {
  width: 100%;
  background: var(--navy);
  color: var(--white);
  border: none;
  padding: 16px 28px;
  border-radius: 6px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background .18s var(--ease-out);
  margin-top: 8px;
}
.gpg-form__cta:hover { background: var(--navy-soft); }
.gpg-form__consent {
  font-family: var(--sans);
  font-size: .78rem;
  color: var(--muted);
  text-align: center;
  margin: 14px 0 0;
  line-height: 1.5;
}

/* ============================================================
   MOBILE
============================================================ */
@media (max-width: 640px) {
  .gpg-hero { padding: 64px 20px 48px; }
  .gpg-section { padding: 56px 20px; }
  .gpg-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
  .gpg-row__label { margin-bottom: 0; }
  .gpg-step { padding-left: 48px; }
  .gpg-step::before { width: 38px; height: 38px; font-size: .78rem; left: -18px; }
}


/* ============================================================
   SITEWIDE TYPOGRAPHY POLISH (appended)
   - Editorial text-wrap rules: balance for short H1/H2, pretty for body
   - Dark-background headlines: weight 800 + smoothing + lift shadow
   - Brighter italic em color on dark surfaces
   - Applied to all .gpg-* design system classes site-wide
============================================================ */

/* Short heading lines (H1, H2, CTA H) — balanced 2-line wrap, no orphans */
.gpg-hero__headline,
.gpg-section-h,
.gpg-cta__h,
.gpg-h3 {
  text-wrap: balance;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Body copy + ledes — prevent last-line orphans without aggressive balancing */
.gpg-hero__lede,
.gpg-section-body p,
.gpg-cta__p,
.gpg-faq__a,
.gpg-row__v,
.gpg-step__body {
  text-wrap: pretty;
}

/* DARK HERO HEADLINES — weight up + lift shadow for navy-gradient legibility */
.gpg-hero--dark .gpg-hero__headline,
.gpg-hero--dark .gpg-hero__lede,
.gpg-cta .gpg-cta__h {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.gpg-hero--dark .gpg-hero__headline {
  font-weight: 800;
  letter-spacing: -.012em;
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.gpg-hero--dark .gpg-hero__headline em {
  font-weight: 700;
  color: #A8C5E4;
}

.gpg-cta .gpg-cta__h {
  font-weight: 800;
  letter-spacing: -.012em;
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.gpg-cta .gpg-cta__h em {
  font-weight: 700;
  color: #A8C5E4;
}

/* Defensive: italic ems inside section headings on light bg get steel emphasis */
.gpg-section-h em {
  font-style: italic;
  color: var(--steel, #2E6DA4);
}

/* CTA button defensiveness — kill any theme link bleed (underline/box-shadow) */
.gpg-btn,
.gpg-btn--primary,
.gpg-btn--ghost,
.gpg-cta__actions a {
  text-decoration: none !important;
  box-shadow: none !important;
}

/* Section ledes / supporting copy max-width guard for editorial line length */
.gpg-section-body p,
.gpg-hero__lede,
.gpg-cta__p {
  max-width: 62ch;
}


/* ============================================================
   CANONICAL PRIMARY CTA HOVER — ONE rule, applied sitewide.
   Every primary CTA button on the site uses this exact hover
   transition. If you add a new primary CTA, add its selector
   here OR use the existing .gpg-cta / .gpg-btn--primary classes.
   
   Resting variants:
     • navy on light bg — navy fill, white text
     • inverted on dark bg — white fill, navy text
   
   Hover (SAME for all variants — 2026-05-31 cleanup):
     background: steel-dim #1F5685
     border-color: steel-dim #1F5685
     color: white
     box-shadow: none      (was: blue halo; removed)
     transform: none       (was: translateY(-1px); removed)
============================================================ */
@media (hover: hover) {
  .gpg-cta:hover,
  a.gpg-cta:hover,
  .gpg-btn--primary:hover,
  a.gpg-btn--primary:hover,
  .flex-hero__cta-primary:hover,
  a.flex-hero__cta-primary:hover,
  .flex-close__cta-primary:hover,
  a.flex-close__cta-primary:hover,
  .val-co-address-cta:hover,
  button.val-co-address-cta:hover,
  .val-close__cta:hover,
  a.val-close__cta:hover,
  .val-hero__cta:hover,
  button.val-hero__cta:hover {
    background: #1F5685 !important;
    border-color: #1F5685 !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
  }
}

/* ============================================================
   FAQ ACCORDION — .gpg-faq__item is now a <details> element.
   Mirrors the flex-commissions / valuation accordion styling
   so every FAQ on the site behaves identically. Sitewide.
============================================================ */
details.gpg-faq__item {
  border-bottom: 1px solid var(--tint-deep, #DCE7F2);
}
details.gpg-faq__item:first-of-type {
  border-top: 1px solid var(--tint-deep, #DCE7F2);
}
summary.gpg-faq__q {
  list-style: none;
  cursor: pointer;
  position: relative;
  display: block;
  margin: 0;
  padding: 26px 56px 26px 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.32;
  letter-spacing: -.008em;
  color: var(--navy, #0A1F3C);
  transition: color .22s cubic-bezier(.22,.61,.36,1);
}
summary.gpg-faq__q::-webkit-details-marker { display: none; }
summary.gpg-faq__q::marker { content: ''; }
summary.gpg-faq__q::after {
  content: '';
  position: absolute;
  right: 8px; top: 50%;
  width: 14px; height: 14px;
  border-right: 2px solid var(--steel, #2E6DA4);
  border-bottom: 2px solid var(--steel, #2E6DA4);
  transform: translateY(-70%) rotate(45deg);
  transform-origin: center;
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
details.gpg-faq__item[open] > summary.gpg-faq__q::after {
  transform: translateY(-30%) rotate(-135deg);
}
@media (hover: hover) {
  summary.gpg-faq__q:hover { color: var(--steel, #2E6DA4); }
}
details.gpg-faq__item > .gpg-faq__a {
  margin: 0;
  padding: 0 0 30px;
  font-family: 'Onest', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--charcoal, #2C3E50);
  max-width: 64ch;
  animation: gpgFaqIn .32s cubic-bezier(.22,.61,.36,1);
}
details.gpg-faq__item > .gpg-faq__a strong { font-weight: 600; color: var(--navy, #0A1F3C); }
details.gpg-faq__item > .gpg-faq__a a {
  color: var(--steel, #2E6DA4);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (hover: hover) {
  details.gpg-faq__item > .gpg-faq__a a:hover { color: var(--navy, #0A1F3C); }
}
@keyframes gpgFaqIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   HERO ABOVE-THE-FOLD — buy + sell page heroes fill the first
   screen (below the 72px sticky header + breadcrumb bar) and
   vertically center their content, so the CTA + credentials are
   visible without scrolling. Scoped to buy/sell pages only.
   .flex-hero is unique to the 3 sell service pages; .gpg-hero is
   shared, so it is scoped via the buy/sell page + parent body classes
   (covers the hubs + every child, incl. stubs once they're built).
============================================================ */
.flex-hero,
body.page-id-693 .gpg-hero,
body.page-id-694 .gpg-hero,
body.parent-pageid-693 .gpg-hero,
body.parent-pageid-694 .gpg-hero {
  min-height: calc(100vh - 112px) !important;
  min-height: calc(100svh - 112px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding-top: clamp(32px, 5vh, 64px) !important;
  padding-bottom: clamp(32px, 5vh, 64px) !important;
}
@media (max-width: 640px) {
  .flex-hero,
  body.page-id-693 .gpg-hero,
  body.page-id-694 .gpg-hero,
  body.parent-pageid-693 .gpg-hero,
  body.parent-pageid-694 .gpg-hero {
    min-height: calc(100vh - 92px) !important;
    min-height: calc(100svh - 92px) !important;
    padding-top: clamp(24px, 4vh, 44px) !important;
    padding-bottom: clamp(24px, 4vh, 44px) !important;
  }
}

/* ============================================================
   FLEX-CLOSE (shared) — dark split closing CTA, lifted from the
   spoke template so editorial-gpg pages can reuse it sitewide.
============================================================ */
/* ---------- 6 · CLOSE (homepage-grade final CTA) ---------- */
.flex-close {
  position: relative;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  background: #061429;
  color: #FFFFFF;
  padding: clamp(96px, 13vh, 152px) 24px clamp(72px, 9vh, 112px);
  overflow: hidden;
  isolation: isolate;
}
.flex-close::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(46,109,164,.24) 0%, transparent 60%),
    radial-gradient(ellipse at 90% 80%, rgba(46,109,164,.12) 0%, transparent 55%),
    linear-gradient(180deg, #0A1F3C 0%, #061429 100%);
  pointer-events: none;
}
.flex-close::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.flex-close__numeral {
  position: absolute;
  bottom: -10%; right: -3%;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22rem, 42vw, 42rem);
  line-height: .82;
  letter-spacing: -.04em;
  color: #6993BB;
  opacity: .07;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.flex-close__inner {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: end;
}
@media (max-width: 820px) {
  .flex-close__inner { grid-template-columns: 1fr; gap: 36px; }
}
.flex-close__lead {
  max-width: 44ch;
}
.flex-close__eyebrow {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase;
  color: #6993BB;
  margin: 0 0 24px;
}
.flex-close__h {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800 !important;
  font-size: clamp(2.125rem, 4.6vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -.012em;
  color: #FFFFFF !important;
  opacity: 1 !important;
  margin: 0 0 28px;
  max-width: 22ch;
  text-wrap: balance;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.flex-close__h em { font-style: italic; font-weight: 700; color: #A8C5E4 !important; }
.flex-close__rule {
  width: 48px; height: 2px;
  background: #2E6DA4; border: none; margin: 0 0 26px;
}
.flex-close__p {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.6;
  color: rgba(255,255,255,.78);
  margin: 0;
  max-width: 44ch;
}
.flex-close__action {
  border-left: 1px solid rgba(255,255,255,.16);
  padding-left: clamp(28px, 4vw, 56px);
}
@media (max-width: 820px) {
  .flex-close__action { border-left: none; padding-left: 0; border-top: 1px solid rgba(255,255,255,.16); padding-top: 32px; }
}
.flex-close__action-label {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin: 0 0 20px;
}
.flex-close__cta-primary {
  display: block !important;
  text-align: center;
  background: #FFFFFF !important;
  color: #0A1F3C !important;
  padding: 22px 30px;
  border-radius: 6px;
  font-family: 'Onest', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.04rem;
  letter-spacing: .005em;
  text-decoration: none !important;
  box-shadow: none !important;
  margin: 0 0 14px;
  transition: background .22s cubic-bezier(.22,.61,.36,1), transform .22s cubic-bezier(.22,.61,.36,1);
}
.flex-close__cta-phone {
  display: flex !important;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  padding: 18px 30px;
  border: 1.5px solid rgba(255,255,255,.38);
  border-radius: 6px;
  font-family: 'Onest', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: #FFFFFF !important;
  text-decoration: none !important;
  box-shadow: none !important;
  margin: 0 0 22px;
  transition: border-color .22s cubic-bezier(.22,.61,.36,1), background .22s cubic-bezier(.22,.61,.36,1);
}
.flex-close__cta-phone-label {
  font-weight: 500;
  color: rgba(255,255,255,.6);
  font-size: .9rem;
}
.flex-close__cta-phone-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.125rem;
  color: #FFFFFF;
}
@media (hover: hover) {
  .flex-close__cta-primary:hover { background: #F5F2EC; transform: translateY(-1px); }
  .flex-close__cta-phone:hover { border-color: #FFFFFF; background: rgba(255,255,255,.04); }
}
.flex-close__alt {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.flex-close__alt a {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(255,255,255,.6) !important;
  text-decoration: none !important;
  transition: color .2s ease;
}
.flex-close__alt a::after { content: ' →'; opacity: .6; }
@media (hover: hover) {
  .flex-close__alt a:hover { color: #FFFFFF; }
}
.flex-close__foot {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: clamp(56px, 8vh, 88px) auto 0;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 26px;
  font-family: 'Onest', system-ui, sans-serif;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.flex-close__foot-item { display: inline-flex; align-items: center; gap: 16px; }
.flex-close__foot-item:not(:first-child)::before {
  content: '';
  width: 5px; height: 5px;
  background: #2E6DA4;
  border-radius: 50%;
  opacity: .8;
}


@media (max-width: 640px) { .flex-close { padding: 72px 22px 56px !important; } }


/* ============================================================
   FLEX SYSTEM (shared, extracted from spokes) — the full .flex-* design system, lifted out of the
   per-page inline <style> blocks so it loads once + caches across
   all spoke pages. Per-page mobile compare labels stay inline.
============================================================ */

/* ============================================================
   FLEX COMMISSIONS · scoped redesign
   Extends gpg-* design system with flex-* bespoke patterns.
   All hero/closing sections break out of the WP content column
   with margin-left/right: calc(50% - 50vw); width: 100vw.
============================================================ */

/* ---------- 1 · HERO (full-bleed, dark, homepage-grade) ---------- */
.flex-hero {
  position: relative;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  background: #061429;
  color: #FFFFFF;
  padding: clamp(96px, 14vh, 168px) 24px clamp(72px, 9vh, 112px);
  overflow: hidden;
  isolation: isolate;
}
.flex-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 72% 28%, rgba(46,109,164,.28) 0%, transparent 58%),
    radial-gradient(ellipse at 10% 90%, rgba(46,109,164,.10) 0%, transparent 55%),
    linear-gradient(180deg, #0A1F3C 0%, #061429 100%);
  pointer-events: none;
}
.flex-hero::after {
  /* faint grain */
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.flex-hero__numeral {
  position: absolute;
  top: 50%; right: -3%;
  transform: translateY(-50%);
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22rem, 44vw, 44rem);
  line-height: .82;
  letter-spacing: -.04em;
  color: #6993BB;
  opacity: .07;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.flex-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  margin: 0 auto;
}
.flex-hero__eyebrow {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #6993BB;
  margin: 0 0 26px;
}
.flex-hero__eyebrow span {
  color: rgba(255,255,255,.42);
  margin: 0 10px;
}
.flex-hero__headline {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800 !important;
  font-size: clamp(2.5rem, 6.2vw, 4.5rem);
  line-height: 1.06;
  letter-spacing: -.012em;
  color: #FFFFFF !important;
  opacity: 1 !important;
  margin: 0 0 32px;
  max-width: 18ch;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.flex-hero__headline em {
  font-style: italic;
  font-weight: 700;
  color: #A8C5E4 !important;
}
.flex-hero__rule {
  width: 48px;
  height: 2px;
  background: #2E6DA4;
  border: none;
  margin: 0 0 32px;
}
.flex-hero__lede {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: rgba(255,255,255,.82);
  margin: 0 0 40px;
  max-width: 58ch;
}
.flex-hero__ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 56px;
}
.flex-hero__cta-primary,
.flex-hero__cta-secondary {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  padding: 17px 30px;
  border-radius: 6px;
  font-family: 'Onest', system-ui, sans-serif;
  font-weight: 600;
  font-size: .98rem;
  letter-spacing: .005em;
  text-decoration: none !important;
  box-shadow: none !important;
  border: 1.5px solid transparent;
  transition: background .22s cubic-bezier(.22,.61,.36,1),
              border-color .22s cubic-bezier(.22,.61,.36,1),
              color .22s cubic-bezier(.22,.61,.36,1),
              transform .22s cubic-bezier(.22,.61,.36,1);
}
.flex-hero__cta-primary { background: #FFFFFF !important; color: #0A1F3C !important; }
.flex-hero__cta-secondary { background: transparent !important; color: #FFFFFF !important; border-color: rgba(255,255,255,.38) !important; align-items: baseline; gap: 10px; }
.flex-hero__cta-secondary-label { font-weight: 500; color: rgba(255,255,255,.62); font-size: .92rem; }
.flex-hero__cta-secondary-num { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 600; font-size: 1.125rem; color: #FFFFFF; letter-spacing: -.005em; }
@media (hover: hover) {
  .flex-hero__cta-primary:hover { background: #F5F2EC; color: #0A1F3C; transform: translateY(-1px); }
  .flex-hero__cta-secondary:hover { border-color: #FFFFFF; color: #FFFFFF; transform: translateY(-1px); }
}
.flex-hero__creds {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 26px;
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-family: 'Onest', system-ui, sans-serif;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255,255,255,.58);
}
.flex-hero__cred {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.flex-hero__cred:not(:first-child)::before {
  content: '';
  width: 5px; height: 5px;
  background: #2E6DA4;
  border-radius: 50%;
  opacity: .8;
}

/* ---------- 2 · PREMISE (architectural two-column) ---------- */
.flex-premise {
  position: relative;
  background: #FFFFFF;
  padding: clamp(80px, 10vh, 128px) 24px;
  overflow: hidden;
  isolation: isolate;
}
.flex-premise__numeral {
  position: absolute;
  top: -6%; left: -3%;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20rem, 38vw, 40rem);
  line-height: .85;
  letter-spacing: -.04em;
  color: #0A1F3C;
  opacity: .025;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.flex-premise__inner {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
@media (max-width: 820px) {
  .flex-premise__inner { grid-template-columns: 1fr; gap: 28px; }
}
.flex-premise__left {
  position: relative;
}
.flex-premise__ord {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(4rem, 8vw, 6.5rem);
  line-height: .9;
  color: #2E6DA4;
  margin: 0 0 18px;
  letter-spacing: -.03em;
}
.flex-premise__eyebrow {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #2E6DA4;
  margin: 0 0 18px;
}
.flex-premise__h {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.875rem, 3.6vw, 2.625rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  color: #0A1F3C;
  margin: 0 0 22px;
  text-wrap: balance;
}
.flex-premise__h em { font-style: italic; color: #2E6DA4; }
.flex-premise__rule {
  width: 48px; height: 2px;
  background: #2E6DA4;
  border: none;
  margin: 0;
}
.flex-premise__body {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.72;
  color: #2C3E50;
  max-width: 60ch;
}
.flex-premise__body p { margin: 0 0 18px; }
.flex-premise__body p:last-child { margin-bottom: 0; }
.flex-premise__body strong { font-weight: 600; color: #0A1F3C; }

/* Pull-quote stat callout */
.flex-premise__quote {
  margin: 32px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid #DCE7F2;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.4;
  color: #0A1F3C;
  letter-spacing: -.008em;
  max-width: 32ch;
}
.flex-premise__quote::before {
  content: '“';
  display: block;
  font-size: 2.6em;
  line-height: .4;
  color: #2E6DA4;
  margin: 0 0 14px;
}

/* ---------- 3 · METHOD (three architectural variable-cards) ---------- */
.flex-method {
  position: relative;
  background: #F5F2EC;
  padding: clamp(56px, 7vh, 88px) 24px clamp(80px, 10vh, 128px);
  overflow: hidden;
  isolation: isolate;
}
.flex-method__numeral {
  position: absolute;
  bottom: -8%; right: -3%;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20rem, 36vw, 38rem);
  line-height: .85;
  letter-spacing: -.04em;
  color: #0A1F3C;
  opacity: .025;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.flex-method__inner {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
}
.flex-method__head {
  max-width: 720px;
  margin: 0 0 56px;
}
.flex-method__eyebrow {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: #2E6DA4;
  margin: 0 0 18px;
}
.flex-method__h {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.875rem, 3.8vw, 2.625rem);
  line-height: 1.08;
  letter-spacing: -.018em;
  color: #0A1F3C;
  margin: 0 0 22px;
  max-width: 24ch;
  text-wrap: balance;
}
.flex-method__h em { font-style: italic; color: #2E6DA4; }
.flex-method__rule {
  width: 48px; height: 2px;
  background: #2E6DA4;
  border: none;
  margin: 0;
}
.flex-method__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid #DCE7F2;
  border-bottom: 1px solid #DCE7F2;
}
@media (max-width: 820px) {
  .flex-method__grid { grid-template-columns: 1fr; }
}
.flex-method-card {
  position: relative;
  padding: 40px 32px 36px;
  border-right: 1px solid #DCE7F2;
}
.flex-method-card:last-child { border-right: none; }
@media (max-width: 820px) {
  .flex-method-card { border-right: none; border-bottom: 1px solid #DCE7F2; padding: 32px 4px; }
  .flex-method-card:last-child { border-bottom: none; }
}
.flex-method-card__ord {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 2.6rem;
  line-height: 1;
  color: #2E6DA4;
  margin: 0 0 18px;
  letter-spacing: -.02em;
}
.flex-method-card__h {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -.012em;
  color: #0A1F3C;
  margin: 0 0 14px;
}
.flex-method-card__p {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: .96rem;
  line-height: 1.68;
  color: #2C3E50;
  margin: 0 0 18px;
}
.flex-method-card__caption {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: .92rem;
  line-height: 1.4;
  color: #6B7785;
  letter-spacing: -.003em;
  padding-top: 14px;
  border-top: 1px solid #DCE7F2;
}

/* ---------- 4 · COMPARE (editorial side-by-side, not SaaS) ---------- */
.flex-compare-section {
  position: relative;
  background: #FFFFFF;
  padding: clamp(80px, 10vh, 128px) 24px;
  overflow: hidden;
  isolation: isolate;
}
.flex-compare-section__numeral {
  position: absolute;
  top: -4%; left: -2%;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20rem, 36vw, 38rem);
  line-height: .85;
  letter-spacing: -.04em;
  color: #0A1F3C;
  opacity: .025;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.flex-compare-section__inner {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
}
.flex-compare-section__head {
  max-width: 720px;
  margin: 0 0 48px;
}
.flex-compare-section__eyebrow {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: #2E6DA4;
  margin: 0 0 18px;
}
.flex-compare-section__h {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.875rem, 3.8vw, 2.625rem);
  line-height: 1.08;
  letter-spacing: -.018em;
  color: #0A1F3C;
  margin: 0 0 22px;
  max-width: 26ch;
  text-wrap: balance;
}
.flex-compare-section__h em { font-style: italic; color: #2E6DA4; }
.flex-compare-section__rule {
  width: 48px; height: 2px;
  background: #2E6DA4; border: none; margin: 0;
}
.flex-compare {
  display: grid;
  grid-template-columns: minmax(180px, 1.1fr) 1.6fr 1.6fr;
  border-top: 2px solid #0A1F3C;
  border-bottom: 2px solid #0A1F3C;
}
@media (max-width: 820px) {
  .flex-compare { grid-template-columns: 1fr; border-bottom: none; }
}
.flex-compare__headcell {
  padding: 22px 24px 18px;
  font-family: 'Onest', system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #6B7785;
  border-bottom: 1px solid #DCE7F2;
}
.flex-compare__headcell--us {
  color: #0A1F3C;
  background: rgba(46,109,164,.06);
  border-bottom: 2px solid #2E6DA4;
}
.flex-compare__headcell--them { color: #6B7785; }
@media (max-width: 820px) {
  .flex-compare__headcell { display: none; }
}
.flex-compare__row-label {
  padding: 22px 24px;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
  color: #6B7785;
  letter-spacing: -.005em;
  border-bottom: 1px solid #DCE7F2;
  display: flex;
  align-items: center;
}
.flex-compare__cell {
  padding: 22px 24px;
  font-family: 'Onest', system-ui, sans-serif;
  font-size: .98rem;
  line-height: 1.5;
  color: #2C3E50;
  border-bottom: 1px solid #DCE7F2;
  border-left: 1px solid #DCE7F2;
  display: flex;
  align-items: center;
}
.flex-compare__cell--us {
  background: rgba(46,109,164,.06);
  color: #0A1F3C;
  font-weight: 500;
  border-left: 1px solid #DCE7F2;
}
.flex-compare__cell--them {
  color: #6B7785;
}
.flex-compare__cell strong, .flex-compare__cell--us strong {
  font-weight: 700;
  color: #0A1F3C;
}
.flex-compare__emph {
  font-style: normal;
  font-weight: 700;
  color: #2E6DA4;
  background: linear-gradient(transparent 88%, rgba(46,109,164,.22) 88%);
  padding: 0 3px;
  margin: 0 2px;
}
.flex-compare > :last-child,
.flex-compare > :nth-last-child(2),
.flex-compare > :nth-last-child(3) {
  border-bottom: none;
}
@media (max-width: 820px) {
  .flex-compare > * { border-bottom: 1px solid #DCE7F2 !important; border-left: none !important; }
  .flex-compare__row-label {
    background: #F5F2EC;
    font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
    font-family: 'Onest', system-ui, sans-serif; font-style: normal;
    color: #6B7785; font-weight: 700; padding: 14px 18px;
  }
  .flex-compare__cell { padding: 16px 18px; }
  .flex-compare__cell--us::before { content: 'Flexible · '; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .66rem; color: #2E6DA4; margin-right: 10px; }
  .flex-compare__cell--them::before { content: 'Traditional · '; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .66rem; color: #6B7785; margin-right: 10px; }
}

/* ---------- 4.5 · REALTOR (Adam dossier — portrait + credentials) ---------- */
.flex-realtor {
  position: relative;
  background: #FFFFFF;
  padding: clamp(56px, 7vh, 88px) 24px clamp(80px, 10vh, 128px);
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid #DCE7F2;
}
.flex-realtor__numeral {
  position: absolute;
  bottom: -8%; left: -2%;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20rem, 36vw, 36rem);
  line-height: .85;
  letter-spacing: -.04em;
  color: #0A1F3C;
  opacity: .025;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.flex-realtor__inner {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 820px) {
  .flex-realtor__inner { grid-template-columns: 1fr; gap: 40px; }
}
.flex-realtor__portrait {
  position: relative;
}
.flex-realtor__portrait-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid #DCE7F2;
  background: #F5F2EC;
}
.flex-realtor__portrait-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(8%) contrast(1.02);
}
.flex-realtor__portrait-caption {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: .92rem;
  color: #6B7785;
  letter-spacing: -.003em;
}
.flex-realtor__portrait-caption-rule {
  width: 32px; height: 1px;
  background: #2E6DA4;
  flex-shrink: 0;
}
.flex-realtor__lead {
  padding-top: 4px;
}
.flex-realtor__eyebrow {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: #2E6DA4;
  margin: 0 0 18px;
}
.flex-realtor__name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.875rem, 3.6vw, 2.625rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  color: #0A1F3C;
  margin: 0 0 8px;
}
.flex-realtor__name em { font-style: italic; color: #2E6DA4; }
.flex-realtor__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.0625rem;
  color: #6B7785;
  margin: 0 0 22px;
  letter-spacing: -.005em;
}
.flex-realtor__rule {
  width: 48px; height: 2px;
  background: #2E6DA4; border: none;
  margin: 0 0 26px;
}
.flex-realtor__bio {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.72;
  color: #2C3E50;
  margin: 0 0 32px;
  max-width: 56ch;
}
.flex-realtor__bio p { margin: 0 0 16px; }
.flex-realtor__bio p:last-child { margin-bottom: 0; }
.flex-realtor__bio strong { font-weight: 600; color: #0A1F3C; }
.flex-realtor__rows {
  display: grid;
  gap: 0;
  border-top: 1px solid #DCE7F2;
}
.flex-realtor__row {
  display: grid;
  grid-template-columns: minmax(120px, 0.6fr) 1.4fr;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid #DCE7F2;
  align-items: baseline;
}
.flex-realtor__row-label {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #6B7785;
}
.flex-realtor__row-value {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.4;
  color: #0A1F3C;
  letter-spacing: -.005em;
}

/* ---------- 5 · FAQ (accordion with details/summary) ---------- */
.flex-faq-section {
  position: relative;
  background: #FFFFFF;
  padding: clamp(80px, 10vh, 128px) 24px;
  overflow: hidden;
  isolation: isolate;
}
.flex-faq-section__numeral {
  position: absolute;
  top: 50%; right: -2%;
  transform: translateY(-50%);
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20rem, 36vw, 36rem);
  line-height: .85;
  letter-spacing: -.04em;
  color: #0A1F3C;
  opacity: .025;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.flex-faq-section__inner {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: 0 auto;
}
.flex-faq-section__head {
  margin: 0 0 40px;
}
.flex-faq-section__eyebrow {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: #2E6DA4;
  margin: 0 0 18px;
}
.flex-faq-section__h {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.875rem, 3.8vw, 2.625rem);
  line-height: 1.08;
  letter-spacing: -.018em;
  color: #0A1F3C;
  margin: 0 0 22px;
  text-wrap: balance;
}
.flex-faq-section__h em { font-style: italic; color: #2E6DA4; }
.flex-faq-section__rule {
  width: 48px; height: 2px;
  background: #2E6DA4; border: none; margin: 0;
}
.flex-faq__list {
  border-top: 1px solid #DCE7F2;
}
.flex-faq {
  border-bottom: 1px solid #DCE7F2;
}
.flex-faq__summary {
  list-style: none;
  cursor: pointer;
  padding: 26px 56px 26px 0;
  position: relative;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.32;
  letter-spacing: -.008em;
  color: #0A1F3C;
  transition: color .22s cubic-bezier(.22,.61,.36,1);
}
.flex-faq__summary::-webkit-details-marker { display: none; }
.flex-faq__summary::marker { content: ''; }
.flex-faq__summary::after {
  content: '';
  position: absolute;
  right: 8px; top: 50%;
  width: 14px; height: 14px;
  border-right: 2px solid #2E6DA4;
  border-bottom: 2px solid #2E6DA4;
  transform: translateY(-70%) rotate(45deg);
  transform-origin: center;
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
.flex-faq[open] > .flex-faq__summary::after {
  transform: translateY(-30%) rotate(-135deg);
}
@media (hover: hover) {
  .flex-faq__summary:hover { color: #2E6DA4; }
}
.flex-faq__answer {
  padding: 0 0 30px;
  margin: 0;
  font-family: 'Onest', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: #2C3E50;
  max-width: 64ch;
  animation: flexFaqIn .32s cubic-bezier(.22,.61,.36,1);
}
.flex-faq__answer strong { font-weight: 600; color: #0A1F3C; }
.flex-faq__answer a { color: #2E6DA4; text-decoration: underline; text-underline-offset: 2px; }
.flex-faq__answer a:hover { color: #0A1F3C; }
@keyframes flexFaqIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 6 · CLOSE (homepage-grade final CTA) ---------- */
.flex-close {
  position: relative;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  background: #061429;
  color: #FFFFFF;
  padding: clamp(96px, 13vh, 152px) 24px clamp(72px, 9vh, 112px);
  overflow: hidden;
  isolation: isolate;
}
.flex-close::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(46,109,164,.24) 0%, transparent 60%),
    radial-gradient(ellipse at 90% 80%, rgba(46,109,164,.12) 0%, transparent 55%),
    linear-gradient(180deg, #0A1F3C 0%, #061429 100%);
  pointer-events: none;
}
.flex-close::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.flex-close__numeral {
  position: absolute;
  bottom: -10%; right: -3%;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22rem, 42vw, 42rem);
  line-height: .82;
  letter-spacing: -.04em;
  color: #6993BB;
  opacity: .07;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.flex-close__inner {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: end;
}
@media (max-width: 820px) {
  .flex-close__inner { grid-template-columns: 1fr; gap: 36px; }
}
.flex-close__lead {
  max-width: 44ch;
}
.flex-close__eyebrow {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase;
  color: #6993BB;
  margin: 0 0 24px;
}
.flex-close__h {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800 !important;
  font-size: clamp(2.125rem, 4.6vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -.012em;
  color: #FFFFFF !important;
  opacity: 1 !important;
  margin: 0 0 28px;
  max-width: 22ch;
  text-wrap: balance;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.flex-close__h em { font-style: italic; font-weight: 700; color: #A8C5E4 !important; }
.flex-close__rule {
  width: 48px; height: 2px;
  background: #2E6DA4; border: none; margin: 0 0 26px;
}
.flex-close__p {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.6;
  color: rgba(255,255,255,.78);
  margin: 0;
  max-width: 44ch;
}
.flex-close__action {
  border-left: 1px solid rgba(255,255,255,.16);
  padding-left: clamp(28px, 4vw, 56px);
}
@media (max-width: 820px) {
  .flex-close__action { border-left: none; padding-left: 0; border-top: 1px solid rgba(255,255,255,.16); padding-top: 32px; }
}
.flex-close__action-label {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin: 0 0 20px;
}
.flex-close__cta-primary {
  display: block !important;
  text-align: center;
  background: #FFFFFF !important;
  color: #0A1F3C !important;
  padding: 22px 30px;
  border-radius: 6px;
  font-family: 'Onest', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.04rem;
  letter-spacing: .005em;
  text-decoration: none !important;
  box-shadow: none !important;
  margin: 0 0 14px;
  transition: background .22s cubic-bezier(.22,.61,.36,1), transform .22s cubic-bezier(.22,.61,.36,1);
}
.flex-close__cta-phone {
  display: flex !important;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  padding: 18px 30px;
  border: 1.5px solid rgba(255,255,255,.38);
  border-radius: 6px;
  font-family: 'Onest', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: #FFFFFF !important;
  text-decoration: none !important;
  box-shadow: none !important;
  margin: 0 0 22px;
  transition: border-color .22s cubic-bezier(.22,.61,.36,1), background .22s cubic-bezier(.22,.61,.36,1);
}
.flex-close__cta-phone-label {
  font-weight: 500;
  color: rgba(255,255,255,.6);
  font-size: .9rem;
}
.flex-close__cta-phone-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.125rem;
  color: #FFFFFF;
}
@media (hover: hover) {
  .flex-close__cta-primary:hover { background: #F5F2EC; transform: translateY(-1px); }
  .flex-close__cta-phone:hover { border-color: #FFFFFF; background: rgba(255,255,255,.04); }
}
.flex-close__alt {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.flex-close__alt a {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(255,255,255,.6) !important;
  text-decoration: none !important;
  transition: color .2s ease;
}
.flex-close__alt a::after { content: ' →'; opacity: .6; }
@media (hover: hover) {
  .flex-close__alt a:hover { color: #FFFFFF; }
}
.flex-close__foot {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: clamp(56px, 8vh, 88px) auto 0;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 26px;
  font-family: 'Onest', system-ui, sans-serif;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.flex-close__foot-item { display: inline-flex; align-items: center; gap: 16px; }
.flex-close__foot-item:not(:first-child)::before {
  content: '';
  width: 5px; height: 5px;
  background: #2E6DA4;
  border-radius: 50%;
  opacity: .8;
}

/* ---------- Mobile shared tightenings ---------- */
@media (max-width: 640px) {
  .flex-hero { padding: 72px 22px 56px; }
  .flex-premise, .flex-method, .flex-compare-section, .flex-faq-section { padding: 64px 22px; }
  .flex-close { padding: 72px 22px 56px; }
  .flex-premise__ord { font-size: 3.4rem; }
  .flex-method-card { padding: 28px 4px; }
}



/* ============================================================
   HUB SYSTEM (shared, extracted from hubs) — the full .gpg-hub-* design system, lifted out of the
   per-page inline <style>. Both hubs share these rules; the buy
   hub keeps a tiny inline block for its 2-col compare modifiers.
============================================================ */

/* ============================================================
   GPG · SELL HUB — the ROUTER page
   A decision surface, NOT a service argument. Scoped under
   .gpg-hub-* so the Buy hub can reuse this entire system.
   Brand tokens inherited from the gpg/flex spoke vocabulary:
     navy #0A1F3C · deep #061429 · steel #2E6DA4 · cream #F5F2EC
     tint #EBF2FA · hairline #DCE7F2 · ink #2C3E50 · muted #6B7785
     Playfair Display (display) + Onest (body)
   Hero + close break full-bleed; light decision modules sit in column.
============================================================ */

/* ---------- 0 · shared full-bleed helper ---------- */
.gpg-hub-bleed {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}

/* ---------- 1 · HERO (compact category framing, dark navy) ---------- */
.gpg-hub-hero {
  position: relative;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  /* bake above-the-fold sizing directly in */
  min-height: calc(100vh - 112px);
  min-height: calc(100svh - 112px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #061429;
  color: #FFFFFF;
  padding: clamp(32px, 5vh, 64px) 24px;
  overflow: hidden;
  isolation: isolate;
}
.gpg-hub-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 72% 24%, rgba(46,109,164,.28) 0%, transparent 58%),
    radial-gradient(ellipse at 8% 92%, rgba(46,109,164,.10) 0%, transparent 55%),
    linear-gradient(180deg, #0A1F3C 0%, #061429 100%);
  pointer-events: none;
}
.gpg-hub-hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
  pointer-events: none;
}
/* giant faded background numeral set — signals "three paths" at a glance */
.gpg-hub-hero__numeral {
  position: absolute;
  top: 50%; right: -2%;
  transform: translateY(-50%);
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18rem, 38vw, 40rem);
  line-height: .82;
  letter-spacing: -.02em;
  color: #6993BB;
  opacity: .06;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}
.gpg-hub-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
  width: 100%;
}
.gpg-hub-hero__eyebrow {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #6993BB;
  margin: 0 0 26px;
}
.gpg-hub-hero__headline {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800 !important;
  font-size: clamp(2.5rem, 6.4vw, 4.75rem);
  line-height: 1.04;
  letter-spacing: -.014em;
  color: #FFFFFF !important;
  opacity: 1 !important;
  margin: 0 0 32px;
  max-width: 17ch;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.gpg-hub-hero__headline em {
  font-style: italic;
  font-weight: 700;
  color: #A8C5E4 !important;
}
.gpg-hub-hero__rule {
  width: 48px; height: 2px;
  background: #2E6DA4; border: none;
  margin: 0 0 32px;
}
.gpg-hub-hero__lede {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: rgba(255,255,255,.82);
  margin: 0 0 36px;
  max-width: 60ch;
}
.gpg-hub-hero__lede em { font-style: italic; color: #A8C5E4; }
/* no hard CTA here — instead a quiet "jump to the matrix" cue */
.gpg-hub-hero__cue {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'Onest', system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  text-decoration: none !important;
  box-shadow: none !important;
  transition: color .22s cubic-bezier(.22,.61,.36,1);
}
.gpg-hub-hero__cue-line {
  width: 40px; height: 1px;
  background: #2E6DA4;
  display: inline-block;
  transition: width .22s cubic-bezier(.22,.61,.36,1);
}
@media (hover: hover) {
  .gpg-hub-hero__cue:hover { color: rgba(255,255,255,.85); }
  .gpg-hub-hero__cue:hover .gpg-hub-hero__cue-line { width: 64px; }
}

/* ---------- 2 · COMPARE — THE signature 3-path matrix (neutral) ---------- */
.gpg-hub-compare {
  position: relative;
  background: #FFFFFF;
  padding: clamp(72px, 9vh, 120px) 24px;
  overflow: hidden;
  isolation: isolate;
}
.gpg-hub-compare__inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
}
.gpg-hub-compare__head {
  max-width: 760px;
  margin: 0 0 48px;
}
.gpg-hub-compare__eyebrow {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: #2E6DA4;
  margin: 0 0 18px;
}
.gpg-hub-compare__h {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.875rem, 3.8vw, 2.625rem);
  line-height: 1.08;
  letter-spacing: -.018em;
  color: #0A1F3C;
  margin: 0 0 22px;
  max-width: 24ch;
  text-wrap: balance;
}
.gpg-hub-compare__h em { font-style: italic; color: #2E6DA4; }
.gpg-hub-compare__rule {
  width: 48px; height: 2px;
  background: #2E6DA4; border: none; margin: 0 0 18px;
}
.gpg-hub-compare__note {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: #6B7785;
  letter-spacing: -.005em;
  max-width: 52ch;
  margin: 0;
}

/* The matrix itself. Label column + three neutral path columns.
   Desktop: true CSS grid, hairline dividers, steel column headers.
   No column is styled as "best" — this is self-selection, not a sales table. */
.gpg-hub-matrix {
  display: grid;
  grid-template-columns: minmax(132px, 0.85fr) repeat(3, 1.5fr);
  border-top: 2px solid #0A1F3C;
}

/* --- header row --- */
.gpg-hub-matrix__corner {
  border-bottom: 1px solid #DCE7F2;
}
.gpg-hub-matrix__col-head {
  padding: 28px 24px 24px;
  border-bottom: 2px solid #2E6DA4;
  border-left: 1px solid #DCE7F2;
  background: #FBFCFE;
}
.gpg-hub-matrix__col-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1;
  color: #2E6DA4;
  letter-spacing: -.02em;
  margin: 0 0 14px;
}
.gpg-hub-matrix__col-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 1.9vw, 1.5rem);
  line-height: 1.12;
  letter-spacing: -.014em;
  color: #0A1F3C;
  margin: 0 0 8px;
}
.gpg-hub-matrix__col-tag {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: .9rem;
  line-height: 1.4;
  color: #6B7785;
  margin: 0;
}

/* --- body rows --- */
.gpg-hub-matrix__row-label {
  padding: 24px 24px;
  font-family: 'Onest', system-ui, sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #6B7785;
  border-bottom: 1px solid #DCE7F2;
  display: flex;
  align-items: center;
}
.gpg-hub-matrix__cell {
  padding: 24px 24px;
  font-family: 'Onest', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #2C3E50;
  border-bottom: 1px solid #DCE7F2;
  border-left: 1px solid #DCE7F2;
  display: flex;
  align-items: center;
}
.gpg-hub-matrix__cell strong {
  font-weight: 700;
  color: #0A1F3C;
}
.gpg-hub-matrix__cell em {
  font-style: normal;
  font-weight: 700;
  color: #2E6DA4;
  background: linear-gradient(transparent 88%, rgba(46,109,164,.22) 88%);
  padding: 0 3px;
}

/* --- CTA row (one explore button per column) --- */
.gpg-hub-matrix__cta-spacer {
  border-bottom: none;
}
.gpg-hub-matrix__cta-cell {
  padding: 28px 24px;
  border-left: 1px solid #DCE7F2;
  display: flex;
  align-items: center;
}
.gpg-hub-matrix__cta {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  font-family: 'Onest', system-ui, sans-serif;
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .01em;
  color: #0A1F3C !important;
  text-decoration: none !important;
  box-shadow: none !important;
  padding: 13px 22px;
  border: 1.5px solid #0A1F3C;
  border-radius: 6px;
  transition: background .22s cubic-bezier(.22,.61,.36,1),
              color .22s cubic-bezier(.22,.61,.36,1),
              transform .22s cubic-bezier(.22,.61,.36,1);
}
.gpg-hub-matrix__cta-arrow { transition: transform .22s cubic-bezier(.22,.61,.36,1); }
@media (hover: hover) {
  .gpg-hub-matrix__cta:hover { background: #0A1F3C; color: #FFFFFF !important; transform: translateY(-1px); }
  .gpg-hub-matrix__cta:hover .gpg-hub-matrix__cta-arrow { transform: translateX(3px); }
}

/* --- mobile: collapse matrix into 3 stacked path cards --- */
.gpg-hub-matrix__mcard { display: none; }
@media (max-width: 880px) {
  .gpg-hub-matrix { display: none; }
  .gpg-hub-matrix__mcards { display: grid; gap: 24px; }
  .gpg-hub-matrix__mcard {
    display: block;
    border: 1px solid #DCE7F2;
    border-top: 3px solid #2E6DA4;
    background: #FFFFFF;
  }
  .gpg-hub-matrix__mcard-head {
    padding: 26px 24px 22px;
    border-bottom: 1px solid #DCE7F2;
    background: #FBFCFE;
  }
  .gpg-hub-matrix__mcard-num {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic; font-weight: 500;
    font-size: 1.5rem; line-height: 1;
    color: #2E6DA4; margin: 0 0 12px; letter-spacing: -.02em;
  }
  .gpg-hub-matrix__mcard-name {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700; font-size: 1.4rem; line-height: 1.1;
    letter-spacing: -.014em; color: #0A1F3C; margin: 0 0 8px;
  }
  .gpg-hub-matrix__mcard-tag {
    font-family: 'Onest', system-ui, sans-serif;
    font-size: .9rem; line-height: 1.4; color: #6B7785; margin: 0;
  }
  .gpg-hub-matrix__mrow {
    padding: 16px 24px;
    border-bottom: 1px solid #DCE7F2;
  }
  .gpg-hub-matrix__mrow-label {
    font-family: 'Onest', system-ui, sans-serif;
    font-size: .64rem; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase;
    color: #6B7785; margin: 0 0 6px;
  }
  .gpg-hub-matrix__mrow-val {
    font-family: 'Onest', system-ui, sans-serif;
    font-size: 1rem; line-height: 1.5; color: #2C3E50; margin: 0;
  }
  .gpg-hub-matrix__mrow-val strong { font-weight: 700; color: #0A1F3C; }
  .gpg-hub-matrix__mrow-val em {
    font-style: normal; font-weight: 700; color: #2E6DA4;
    background: linear-gradient(transparent 88%, rgba(46,109,164,.22) 88%);
    padding: 0 3px;
  }
  .gpg-hub-matrix__mcard-cta {
    padding: 22px 24px;
  }
  .gpg-hub-matrix__mcard-cta .gpg-hub-matrix__cta { width: 100%; justify-content: center; }
}

/* ---------- 3 · ROUTER — situation self-select ---------- */
.gpg-hub-router {
  position: relative;
  background: #F5F2EC;
  padding: clamp(72px, 9vh, 120px) 24px;
  overflow: hidden;
  isolation: isolate;
}
.gpg-hub-router__numeral {
  position: absolute;
  bottom: -8%; left: -2%;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic; font-weight: 400;
  font-size: clamp(18rem, 34vw, 34rem);
  line-height: .85; letter-spacing: -.04em;
  color: #0A1F3C; opacity: .025;
  pointer-events: none; user-select: none; z-index: 0;
}
.gpg-hub-router__inner {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  margin: 0 auto;
}
.gpg-hub-router__head {
  max-width: 640px;
  margin: 0 0 44px;
}
.gpg-hub-router__eyebrow {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: #2E6DA4;
  margin: 0 0 18px;
}
.gpg-hub-router__h {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.875rem, 3.8vw, 2.625rem);
  line-height: 1.08;
  letter-spacing: -.018em;
  color: #0A1F3C;
  margin: 0 0 22px;
  text-wrap: balance;
}
.gpg-hub-router__h em { font-style: italic; color: #2E6DA4; }
.gpg-hub-router__rule {
  width: 48px; height: 2px;
  background: #2E6DA4; border: none; margin: 0;
}
.gpg-hub-router__list {
  border-top: 1px solid #DCE7F2;
}
/* each scenario = a full-width tappable row: situation → destination */
.gpg-hub-scenario {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  padding: 28px 8px;
  border-bottom: 1px solid #DCE7F2;
  text-decoration: none !important;
  box-shadow: none !important;
  position: relative;
  transition: padding .24s cubic-bezier(.22,.61,.36,1);
}
.gpg-hub-scenario::before {
  content: '';
  position: absolute;
  left: -24px; right: -24px; top: 0; bottom: -1px;
  background: #FFFFFF;
  opacity: 0;
  z-index: -1;
  transition: opacity .24s cubic-bezier(.22,.61,.36,1);
}
.gpg-hub-scenario__ord {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  line-height: 1;
  color: #C3D3E4;
  letter-spacing: -.02em;
  min-width: 1.4em;
  transition: color .24s cubic-bezier(.22,.61,.36,1);
}
.gpg-hub-scenario__text {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.125rem, 2vw, 1.4375rem);
  line-height: 1.28;
  letter-spacing: -.01em;
  color: #0A1F3C;
  margin: 0;
  text-wrap: balance;
}
.gpg-hub-scenario__text em { font-style: italic; color: #2E6DA4; }
.gpg-hub-scenario__dest {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}
.gpg-hub-scenario__dest-label {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #6B7785;
}
.gpg-hub-scenario__dest-name {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Onest', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #2E6DA4;
  white-space: nowrap;
}
.gpg-hub-scenario__arrow { transition: transform .24s cubic-bezier(.22,.61,.36,1); }
@media (hover: hover) {
  .gpg-hub-scenario:hover { padding-left: 20px; padding-right: 20px; }
  .gpg-hub-scenario:hover::before { opacity: 1; }
  .gpg-hub-scenario:hover .gpg-hub-scenario__ord { color: #2E6DA4; }
  .gpg-hub-scenario:hover .gpg-hub-scenario__arrow { transform: translateX(4px); }
}
@media (max-width: 720px) {
  .gpg-hub-scenario {
    grid-template-columns: auto 1fr;
    gap: 16px 18px;
    padding: 24px 6px;
  }
  .gpg-hub-scenario__ord { grid-row: 1 / 3; align-self: start; padding-top: 2px; }
  .gpg-hub-scenario__dest {
    grid-column: 2;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 10px;
    text-align: left;
  }
  .gpg-hub-scenario__dest-label::after { content: ' ·'; }
}

/* ---------- 4 · TRUST — light category trust strip ---------- */
.gpg-hub-trust {
  position: relative;
  background: #EBF2FA;
  padding: clamp(48px, 6vh, 72px) 24px;
  border-top: 1px solid #DCE7F2;
  border-bottom: 1px solid #DCE7F2;
}
.gpg-hub-trust__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 760px) {
  .gpg-hub-trust__inner { grid-template-columns: 1fr; gap: 28px; }
}
.gpg-hub-trust__statement {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  line-height: 1.34;
  letter-spacing: -.01em;
  color: #0A1F3C;
  margin: 0;
  max-width: 30ch;
  text-wrap: balance;
}
.gpg-hub-trust__statement em { font-style: italic; color: #2E6DA4; }
.gpg-hub-trust__aside {
  border-left: 1px solid #C3D3E4;
  padding-left: clamp(24px, 4vw, 44px);
}
@media (max-width: 760px) {
  .gpg-hub-trust__aside { border-left: none; padding-left: 0; border-top: 1px solid #C3D3E4; padding-top: 24px; }
}
.gpg-hub-trust__cred-label {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: .64rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: #6B7785;
  margin: 0 0 12px;
}
.gpg-hub-trust__cred {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: .98rem;
  line-height: 1.5;
  color: #2C3E50;
  margin: 0 0 16px;
}
.gpg-hub-trust__cred strong { font-weight: 600; color: #0A1F3C; }
.gpg-hub-trust__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Onest', system-ui, sans-serif;
  font-size: .9rem;
  font-weight: 600;
  color: #2E6DA4 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: gap .22s cubic-bezier(.22,.61,.36,1), color .22s ease;
}
@media (hover: hover) {
  .gpg-hub-trust__link:hover { gap: 13px; color: #0A1F3C !important; }
}

/* ---------- 5 · CLOSE — catch-all dark CTA for the undecided ---------- */
.gpg-hub-close {
  position: relative;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  background: #061429;
  color: #FFFFFF;
  padding: clamp(88px, 12vh, 144px) 24px clamp(64px, 8vh, 104px);
  overflow: hidden;
  isolation: isolate;
}
.gpg-hub-close::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(46,109,164,.24) 0%, transparent 60%),
    radial-gradient(ellipse at 90% 80%, rgba(46,109,164,.12) 0%, transparent 55%),
    linear-gradient(180deg, #0A1F3C 0%, #061429 100%);
  pointer-events: none;
}
.gpg-hub-close::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.gpg-hub-close__numeral {
  position: absolute;
  bottom: -10%; right: -3%;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic; font-weight: 400;
  font-size: clamp(20rem, 40vw, 40rem);
  line-height: .82; letter-spacing: -.04em;
  color: #6993BB; opacity: .07;
  pointer-events: none; user-select: none; z-index: 0;
}
.gpg-hub-close__inner {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: end;
}
@media (max-width: 820px) {
  .gpg-hub-close__inner { grid-template-columns: 1fr; gap: 36px; }
}
.gpg-hub-close__lead { max-width: 44ch; }
.gpg-hub-close__eyebrow {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase;
  color: #6993BB;
  margin: 0 0 24px;
}
.gpg-hub-close__h {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800 !important;
  font-size: clamp(2.125rem, 4.6vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -.012em;
  color: #FFFFFF !important;
  opacity: 1 !important;
  margin: 0 0 28px;
  max-width: 20ch;
  text-wrap: balance;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.gpg-hub-close__h em { font-style: italic; font-weight: 700; color: #A8C5E4 !important; }
.gpg-hub-close__rule {
  width: 48px; height: 2px;
  background: #2E6DA4; border: none; margin: 0 0 26px;
}
.gpg-hub-close__p {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.6;
  color: rgba(255,255,255,.78);
  margin: 0;
  max-width: 46ch;
}
.gpg-hub-close__action {
  border-left: 1px solid rgba(255,255,255,.16);
  padding-left: clamp(28px, 4vw, 56px);
}
@media (max-width: 820px) {
  .gpg-hub-close__action { border-left: none; padding-left: 0; border-top: 1px solid rgba(255,255,255,.16); padding-top: 32px; }
}
.gpg-hub-close__action-label {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin: 0 0 20px;
}
.gpg-hub-close__cta-primary {
  display: block !important;
  text-align: center;
  background: #FFFFFF !important;
  color: #0A1F3C !important;
  padding: 22px 30px;
  border-radius: 6px;
  font-family: 'Onest', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.04rem;
  letter-spacing: .005em;
  text-decoration: none !important;
  box-shadow: none !important;
  margin: 0 0 14px;
  transition: background .22s cubic-bezier(.22,.61,.36,1), transform .22s cubic-bezier(.22,.61,.36,1);
}
.gpg-hub-close__cta-phone {
  display: flex !important;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  padding: 18px 30px;
  border: 1.5px solid rgba(255,255,255,.38);
  border-radius: 6px;
  font-family: 'Onest', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: #FFFFFF !important;
  text-decoration: none !important;
  box-shadow: none !important;
  margin: 0 0 22px;
  transition: border-color .22s cubic-bezier(.22,.61,.36,1), background .22s cubic-bezier(.22,.61,.36,1);
}
.gpg-hub-close__cta-phone-label { font-weight: 500; color: rgba(255,255,255,.6); font-size: .9rem; }
.gpg-hub-close__cta-phone-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic; font-weight: 600;
  font-size: 1.125rem; color: #FFFFFF;
}
@media (hover: hover) {
  .gpg-hub-close__cta-phone:hover { border-color: #FFFFFF; background: rgba(255,255,255,.04); }
}
.gpg-hub-close__alt {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.gpg-hub-close__alt a {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(255,255,255,.6) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: color .2s ease;
}
.gpg-hub-close__alt a::after { content: ' →'; opacity: .6; }
@media (hover: hover) {
  .gpg-hub-close__alt a:hover { color: #FFFFFF !important; }
}
.gpg-hub-close__foot {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: clamp(56px, 8vh, 88px) auto 0;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 26px;
  font-family: 'Onest', system-ui, sans-serif;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.gpg-hub-close__foot-item { display: inline-flex; align-items: center; gap: 16px; }
.gpg-hub-close__foot-item:not(:first-child)::before {
  content: '';
  width: 5px; height: 5px;
  background: #2E6DA4;
  border-radius: 50%;
  opacity: .8;
}

/* ---------- mobile shared tightenings ---------- */
@media (max-width: 640px) {
  .gpg-hub-hero { padding: 56px 22px; }
  .gpg-hub-compare, .gpg-hub-router { padding: 60px 22px; }
  .gpg-hub-trust { padding: 44px 22px; }
  .gpg-hub-close { padding: 72px 22px 56px; }
}



/* ============================================================
   HIDE THEME ENTRY-TITLE (sitewide — every page has its own hero)
============================================================ */
.entry-title, .page-title, .elementor-page-title, .elementor-widget-theme-post-title, header.entry-header { display: none !important; }


/* ============================================================
   LEGAL PAGES (shared) — privacy/terms/licensing/trec
============================================================ */
.gpg-legal{background:#FFFFFF;padding:clamp(48px,7vh,88px) 24px clamp(64px,9vh,120px);max-width:880px;margin:0 auto;font-family:'Onest',system-ui,sans-serif;color:#2C3E50;line-height:1.65}
.gpg-legal__eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:#2E6DA4;margin:0 0 18px}
.gpg-legal__h{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:clamp(2rem,4.4vw,3rem);line-height:1.06;letter-spacing:-.018em;color:#0A1F3C;margin:0 0 16px;text-wrap:balance}
.gpg-legal__h em{font-style:italic;color:#2E6DA4}
.gpg-legal__rule{width:48px;height:2px;background:#2E6DA4;border:none;margin:0 0 28px}
.gpg-legal__lede{font-size:1.0625rem;color:#6B7785;margin:0 0 40px;max-width:62ch}
.gpg-legal__updated{font-size:.78rem;letter-spacing:.04em;color:#6B7785;margin:0 0 24px}
.gpg-legal h2{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:1.5rem;color:#0A1F3C;margin:40px 0 14px;line-height:1.18;letter-spacing:-.012em}
.gpg-legal h3{font-family:'Onest',system-ui,sans-serif;font-weight:700;font-size:1.0625rem;color:#0A1F3C;margin:28px 0 10px;letter-spacing:-.005em}
.gpg-legal p{margin:0 0 16px}
.gpg-legal a{color:#2E6DA4;text-decoration:underline;text-underline-offset:2px}
.gpg-legal a:hover{color:#0A1F3C}
.gpg-legal strong{font-weight:600;color:#0A1F3C}
.gpg-legal ul,.gpg-legal ol{margin:0 0 18px;padding-left:24px}
.gpg-legal li{margin:6px 0}
.gpg-legal__card{background:#F5F2EC;border-radius:8px;padding:28px;margin:24px 0;border:1px solid #DCE7F2}
.gpg-legal__card h3{margin-top:0}
.gpg-legal__dossier{display:grid;grid-template-columns:160px 1fr;gap:12px 24px;margin:18px 0;font-size:.96rem}
.gpg-legal__dossier dt{font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#6B7785;padding-top:4px}
.gpg-legal__dossier dd{margin:0;color:#0A1F3C;font-weight:500}
@media(max-width:560px){.gpg-legal__dossier{grid-template-columns:1fr;gap:4px 0}.gpg-legal__dossier dd{margin-bottom:14px}}


/* ============================================================
   A11Y — skip link + reduced motion (spec.website Accessibility)
============================================================ */
/* Skip-to-content link — visually hidden until focused */
.gpg-skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 99999;
  background: #0A1F3C;
  color: #FFFFFF;
  padding: 12px 20px;
  border-radius: 4px;
  text-decoration: none;
  font-family: 'Onest', system-ui, sans-serif;
  font-weight: 600;
  font-size: .95rem;
  transition: top .2s ease;
}
.gpg-skip-link:focus {
  top: 12px;
  outline: 3px solid #2E6DA4;
  outline-offset: 2px;
}

/* Reduced motion preference — honor user setting */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus visibility — ensure keyboard users see focus on interactive elements */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #2E6DA4 !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}


/* ============================================================
 * ELEMENTOR KIT H1 COLOR GUARD — added 2026-05-31
 * ============================================================
 *
 * Elementor Pro's Site Kit defines sitewide:
 *   .elementor-kit-5 h1 { color: #2C3E50; }      (specificity 0,0,1,1)
 *
 * That rule SILENTLY OVERRIDES any page CSS H1 rule with class-only
 * specificity (0,0,1,0), turning dark-hero H1 base text invisible.
 * (The <em> portion still shows because `.x__h em` ties spec at
 * (0,0,1,1) and loads later in the cascade.)
 *
 * GUARD BELOW: tie + beat the kit's specificity for any heading that
 * follows GPG hero naming conventions, and inherit color from the
 * hero parent — so dark heroes with explicit color:#FFFFFF on the
 * wrapper auto-render white H1s.
 *
 * --- RULE FOR FUTURE PAGES ---
 * When building any hero / dark section, the H1 must either:
 *   (a) have a class containing `__h` (e.g. `gpg-XXX__h`, `__h1`, `__heading`)
 *   (b) live inside a wrapper whose class contains `-hero` or `_hero`
 *   (c) live inside a wrapper class enumerated below (.gpg-404, .gpg-cn)
 * AND the wrapper element must set `color: #FFFFFF` (or whatever color).
 * Then NO per-page !important is needed — the guard inherits cleanly.
 */

.elementor-kit-5 :is(h1, h2, h3, h4)[class*="__h"],
.elementor-kit-5 :is(h1, h2, h3, h4)[class*="__heading"],
.elementor-kit-5 [class*="-hero"] :is(h1, h2, h3, h4),
.elementor-kit-5 [class*="_hero"] :is(h1, h2, h3, h4),
.elementor-kit-5 .gpg-404 :is(h1, h2, h3, h4),
.elementor-kit-5 .gpg-cn :is(h1, h2, h3, h4) {
  color: inherit !important;
}

/* ============================================================
 * LPT broker logo in footer — sized to 1/2 the brand door icon (40px → 20px)
 * Per Leigh 2026-06-01: brand consistency — LPT is secondary sponsor, not equal weight
 * ============================================================ */
.masthead__colophon-broker img,
.masthead .masthead__colophon-broker img {
  width: 20px !important;
  height: 20px !important;
}