/* ===========================
   CSS Variables & Reset
   =========================== */
:root {
  --tgp-inner-container-size: 1400px;
  /* ONE readable body-text measure, site-wide. Every page's running prose
     (post-content paragraphs, lists, FAQs, section sub-headers) caps here so
     body content width is identical across about / service / location /
     membership / blog / utility pages. Replaces the old drift of inline
     820px contentSize, scattered 52rem, and 75ch (~600px) measures. Cards,
     grids, and images still break out to the wide 1400px container. */
  --tgp-measure: 60rem; /* 960px — readable centered body measure (wider than
     the old 52rem so centered intros read as full, intentional blocks rather
     than narrow floating text, while staying within a comfortable line length). */
  /* Fluid vertical rhythm for full-width content sections. Replaces the old
     fixed spacing|60 (96px) / spacing|70 (160px) inline padding that did not
     scale down on mobile and made section seams 192-256px tall. One knob now
     controls section rhythm site-wide. */
  --tgp-section-y: clamp(2.5rem, 4vw + 1rem, 4.5rem); /* 40px mobile -> 72px desktop */
  --tgp-section-x: clamp(1rem, 4vw, 2rem); /* 16px mobile -> 32px desktop (side gutters) */
  --tgp-meta-muted: #5E7290; /* de-emphasized post-meta text; ~4.9:1 on white cards (passes AA). Single tunable source; not a palette slug. */
  /* Spacing rhythm tokens — one level of intent above the theme.json presets.
     Card padding, card grid gaps, and panel padding were scattered across
     20+ classes at different values; these make the intent visible and let
     the whole site retune from one knob. */
  --tgp-card-padding: var(--wp--preset--spacing--40);    /* 32px — content cards, proof panels */
  --tgp-card-padding-sm: var(--wp--preset--spacing--30); /* 16px — icon cards, compact cards */
  --tgp-card-gap: var(--wp--preset--spacing--30);        /* 16px — standard card-grid spacing */
  --tgp-panel-padding: var(--wp--preset--spacing--50);   /* 64px — CTA sections, form panels */
  /* Corner-radius scale. Three intents only, so the system reads as one
     deliberate language instead of a drift of 8/10/12/16/18/24px literals. */
  --tgp-radius-sm: 8px; /* utility: inputs, chips, inline bands, sidebar boxes */
  --tgp-card-radius: 12px; /* one corner radius for all card-family components */

  /* Cards on the dyed homepage bands (band-gator) sit over bright tie-dye
     blobs. The old card fill was a ~4% WHITE overlay, which LIGHTENS the blob
     behind the text — the wrong direction — so gold and 65%-white copy lost
     contrast wherever an orange/blue blob fell behind it (worst measured
     ~1.6:1). A navy veil instead of a white one darkens the blob under the
     text (median contrast 5.1 -> 6.8) while the dye still reads full-strength
     in the gaps between cards and at the band margins. One token so the three
     card families stay in step. */
  --tgp-dyed-card: rgb(0 21 101 / 0.62);
  --tgp-dyed-card-hover: rgb(0 21 101 / 0.5);
  --tgp-radius-lg: 18px; /* large panels: CTAs, form-cards, feature panels */
  /* Dark-plum panel gradient stops (proof/routing/locations bands). Defined
     once so the look stops drifting into near-identical #241037/#251139 and
     #13091f/#14091f/#140a20 copies. */
  --tgp-plum-mid: #241037;
  --tgp-plum-deep: #13091f;
  /* Brand-blue RGB channels — the single source for the bright-blue accent.
     Every derived tint/glow/border writes rgb(var(--tgp-brand-blue-rgb) / a)
     instead of pasting the channels, so the brand colour tunes from one knob.
     Keep in sync with theme.json primary/accent-1/purple-overlay (those need
     literal hex for the editor palette and can't reference this var). */
  --tgp-brand-blue-rgb: 26 115 255;
  /* Palette-navy RGB channels, same one-source pattern as the brand blue. The
     Dark Navy (#0E2E54) and Almost Black (#06203F) palette colours were pasted
     as raw rgb() channels across shadows, scrims, and panel gradients; route
     them through these so the navies match theme.json and tune from one place.
     Keep in sync with theme.json contrast-2/contrast-3 and contrast/main. */
  --tgp-navy-rgb: 0 33 165; /* = #0021A5 True Gator Blue */
  --tgp-ink-rgb: 0 21 101; /* = #001565 Deep Gator Anchor */
  --tgp-card-shadow: 0 12px 32px rgb(var(--tgp-navy-rgb) / 0.08); /* resting elevation, light cards */
  --tgp-card-shadow-hover: 0 20px 52px rgb(var(--tgp-navy-rgb) / 0.13); /* hover elevation, light cards */
  /* Elevation scale for the black-shadow card families (the recurring values
     that had been pasted literally across many cards). NOTE: this black scale
     coexists with the navy --tgp-card-shadow above; unifying the two shadow
     colour systems is a separate, visual-review pass. */
  --tgp-elev-1: 0 2px 12px rgb(0 0 0 / 0.06); /* resting card */
  --tgp-elev-2: 0 18px 48px rgb(0 0 0 / 0.14); /* raised card */
  --tgp-elev-3: 0 24px 60px rgb(0 0 0 / 0.22); /* high: featured cards */
  --tgp-elev-4: 0 24px 70px rgb(0 0 0 / 0.24); /* cover heroes, form-cards */
  --tgp-elev-panel: 0 18px 54px rgb(var(--tgp-navy-rgb) / 0.1); /* light navy feature panel */
  --tgp-elev-cta: 0 14px 44px rgb(var(--tgp-navy-rgb) / 0.09); /* navy CTA inner */
  /* Primary-button glow (resting + hover) and the rainbow accent bar -- each
     was duplicated verbatim; tokenized so the brand glow tunes from one place. */
  --tgp-btn-glow: 0 4px 20px rgb(var(--tgp-brand-blue-rgb) / 0.3), 0 0 0 2px rgb(255 255 255 / 0.15);
  --tgp-btn-glow-hover: 0 8px 28px var(--wp--preset--color--purple-overlay), 0 0 0 2px rgb(255 255 255 / 0.25);
  /* CTA legibility veil (owner decision, milestone 4): tie-dye button
     surfaces run through light stops where white text dropped to ~2:1.
     An inset navy wash deepens every stop uniformly without touching the
     tie-dye presets; pairs with --tgp-cta-text-shadow on the labels.

     2026-08-22: raised 0.16 -> 0.48. At 0.16 the wash was not actually doing
     its job -- white on the #FFCC00 stop still measured 2.10:1, and the sweep
     parks that stop under the label on the widest buttons. Contrast of white
     against each stop composited over #001565, by veil alpha:

         alpha   #F97A1F  #FFCC00  #22C35D   worst
          0.16      3.62     2.10     3.12    2.10
          0.42      6.18     3.94     5.27    3.94   large-text only
          0.48      7.03     4.63     6.05    4.63   passes 4.5:1

     0.48 is the lowest step that clears 4.5:1. The labels are 16px/800, which
     is NOT WCAG "large text" (that needs 18.66px bold), so 3:1 does not apply
     and 0.42 is insufficient. :focus-visible shares these selectors, so the
     old value failed keyboard users too. Re-measure all consumers if changed:
     lines ~891, ~3270, ~3542 (Gravity Forms submit) and ~8360 (interrupt CTA). */
  --tgp-cta-veil: inset 0 0 0 999px rgb(var(--tgp-ink-rgb) / 0.48);
  --tgp-cta-text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
  --tgp-bar-shadow: 0 2px 12px rgb(0 0 0 / 0.15); /* rainbow accent bars */
  --gradient-rainbow: var(--wp--preset--gradient--tie-dye-flow);
  --gradient-rainbow-h: var(--wp--preset--gradient--tie-dye-flow-h);
  /* Text-clip variant: tie-dye-flow-h opens and closes on #fff, which makes the
     first/last glyphs of background-clip:text invisible on light cards. Same
     hues, no white stops -- use THIS for any gradient-clipped text. */
  --gradient-rainbow-text: linear-gradient(90deg, #0D65F2 0%, #7A3CDD 20%, #EE2B8C 40%, #F97A1F 60%, #FFCC00 78%, #22C35D 100%);
  /* Bar variant, same no-white-stop reasoning as above but for solid fills:
     tie-dye-flow-h opens on #fff and closes on #fff, so a bar drawn on a white
     or cream surface dissolves for the first 10% and last 14% of its length --
     about a quarter of the bar reads as empty page. Use the -h preset on dyed
     or photographic bands where those white stops land as highlights, and use
     THIS on light surfaces (article bodies, cream cards) where they don't. */
  --gradient-rainbow-bar: linear-gradient(90deg, #0D65F2 0%, #7A3CDD 20%, #EE2B8C 40%, #F97A1F 60%, #FFCC00 78%, #22C35D 100%);
  /* WCAG AA text-safe azure. Brand accent-1 #1A73FF measures 4.25:1 on white
     and 3.75:1 on cream -- under the 4.5:1 floor for normal text. Use THIS for
     small text, pill borders, and any solid background under white text;
     accent-1 itself stays for fills, large display text, and decoration. */
  --tgp-azure-text: #0B5ED7;
  /* Motion tokens. Interaction timing had drifted across ~9 hardcoded values
     (160ms-0.6s, mixed ms/s units) with default `ease` everywhere. All
     interactive transitions route through these three durations + two curves;
     similar components must share the same pair. --ease-lift carries a slight
     overshoot for card/button lifts; --ease-out is the standard decel for
     color/opacity/reveal moves. */
  --dur-fast: 160ms; /* color shifts, underlines, small icon nudges */
  --dur-base: 240ms; /* card lifts, image zooms, bg/shadow swaps */
  --dur-slow: 480ms; /* scroll reveals, large surface moves */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-lift: cubic-bezier(0.34, 1.3, 0.64, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  --wp--style--global--wide-size: var(--tgp-inner-container-size);
  -webkit-font-smoothing: antialiased;
}

/* ── "Less blue" re-anchor ──────────────────────────────────────────────────
   The main blue (#0021A5 "True Gator") was over-saturated and over-used (~97
   headings/accents), competing with the tie-dye brand identity. Re-anchor it to
   the deeper "Gator Anchor" navy (#001565) so headings recede and the tie-dye
   leads. ONE token override propagates to every contrast-3 usage + navy tint.
   Scoped to every page EXCEPT the homepage, whose tie-dye identity is left
   intentionally untouched (body.home is excluded).

   NOTE: contrast-3 is theme.json's global body-text colour, so this value is
   READING INK, not a band ground. It used to point at `contrast` only because
   the two happened to share #001565. Now that `contrast` has been brightened to
   the True Gator band blue, the reference is pinned to the literal deep navy —
   brightening the band must not brighten 40 pages of body copy with it. */
body:not(.home) {
  --wp--preset--color--contrast-3: #001565;
  --tgp-navy-rgb: 0 21 101;
}

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

a {
  color: inherit;
}

/* ── Global interaction baseline ────────────────────────────────────────────
   One focus ring for every interactive element (WCAG 2.4.7); component rules
   may add backgrounds on focus but must not remove this ring. Azure on light
   surfaces; elements inside the navy footer/header chrome flip to a white
   ring for contrast. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--tgp-azure-text);
  outline-offset: 2px;
}

:where(.site-footer, .tgp-site-header__navigation, .tgp-mega-card, .tgp-dropdown-menu__links, .tgp-mobile-menu) :where(a, button):focus-visible {
  outline-color: var(--wp--preset--color--base);
}

/* Prose links: colored underline that fills in on hover. Scoped to running
   text (paragraphs, list items, FAQ answers) so cards, pills, buttons, and
   arrow-links keep their own treatments. */
/* The class-based ancestors keep specificity at 0,1,1 so these beat the
   global-styles element link color (#1A73FF accent-1 — 4.25:1 on white,
   fails AA), which WP prints AFTER this stylesheet at 0,0,1. The nav class
   is doubled to 0,2,1 because core's post-navigation-link global style is
   itself 0,1,1 and would win the tie. */
.wp-block-post-content :where(p, li) a:where(:not(.wp-element-button):not(.wp-block-button__link)),
:is(.tgp-faq__item, .tgp-faq-item) a:where(:not(.wp-element-button):not(.wp-block-button__link)),
.tgp-single-post__nav.tgp-single-post__nav a:where(:not(.wp-element-button):not(.wp-block-button__link)) {
  color: var(--tgp-azure-text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgb(var(--tgp-brand-blue-rgb) / 0.35);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.wp-block-post-content :where(p, li) a:where(:not(.wp-element-button):not(.wp-block-button__link)):hover,
:is(.tgp-faq__item, .tgp-faq-item) a:where(:not(.wp-element-button):not(.wp-block-button__link)):hover,
.tgp-single-post__nav.tgp-single-post__nav a:where(:not(.wp-element-button):not(.wp-block-button__link)):hover {
  text-decoration-color: currentColor;
}

@keyframes hero-rotate {
  to { transform: rotate(360deg); }
}

@keyframes hero-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,255,255,0.5); }
  50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(255,255,255,0); }
}

@keyframes hero-fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hero-scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes hero-gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Scroll reveals. Base state is visible (no-JS safe); the .js class from
   js-class.js gates the hidden-at-rest state. The stagger is JS-assigned
   per observer batch via --reveal-delay (the old nth-child ladder capped
   at 8 siblings and broke with mixed non-animated siblings). */
.animate-on-scroll {
  opacity: 1;
  transform: translateY(0);
}

.js .animate-on-scroll:not(.is-visible) {
  opacity: 0;
  transform: translateY(16px);
}

.js .animate-on-scroll {
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}

.js .animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Two classes (.wp-block-separator.rainbow-divider) so this beats core's
   single-class separator rules at equal specificity regardless of source
   order. Core renders the line via a 1px border and caps the width, which
   collapsed the intended bar to a 1px line — override both. */
.wp-block-separator.rainbow-divider {
  height: 5px;
  min-height: 5px;
  border: 0;
  max-width: none;
  width: 100%;
  opacity: 1; /* override the deprecated has-css-opacity dimming */
  background: var(--gradient-rainbow-h);
  box-shadow: var(--tgp-bar-shadow);
}

.section-eyebrow {
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tgp-azure-text);
  margin-bottom: var(--wp--preset--spacing--20);
  text-align: center;
}

/* Eyebrows placed with the block editor carry has-accent-1-color, whose WP
   utility rule is !important -- re-assert the AA-safe azure over it. */
.section-eyebrow.has-accent-1-color {
  color: var(--tgp-azure-text) !important;
}

.section-eyebrow--light {
  color: var(--wp--preset--color--white-overlay-85);
}

.section-headline {
  font-family: var(--wp--preset--font-family--righteous);
  font-size: var(--wp--preset--font-size--xxx-large);
  color: var(--wp--preset--color--contrast-3);
  text-align: center;
  margin-bottom: var(--wp--preset--spacing--30);
  line-height: 1.15;
}

.section-headline--light {
  /* The --light modifier is only ever used on dark/dyed bands, where white is
     the sole legible choice. It must beat the base .section-headline color,
     which body:not(.home) re-anchors to the deep navy #001565 (contrast) — that
     navy was winning here and rendering "light" headings dark-on-dark (e.g. the
     commercial "Get a Commercial Quote" CTA). !important guarantees the override
     wherever the modifier is intentionally applied. */
  color: var(--wp--preset--color--base) !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.section-sub {
  font-size: var(--wp--preset--font-size--lg);
  color: var(--wp--preset--color--contrast-4);
  text-align: center;
  max-width: var(--tgp-measure);
  margin: 0 auto;
  line-height: 1.7;
}

/* Core block defaults
   -------------------------------------------------------------------------- */
body .is-vertical > * {
  width: 100%;
}

body .is-layout-constrained > .alignwide,
body .is-layout-constrained > .wp-block-group.alignwide,
body .wp-site-blocks > .alignwide {
  max-width: var(--tgp-inner-container-size);
  width: min(100%, var(--tgp-inner-container-size));
}

:where(.wp-element-button, .wp-block-button__link) {
  background-size: 300% 300%;
  isolation: isolate;
  overflow: hidden;
  position: relative;
  transition: transform var(--dur-base) var(--ease-lift), box-shadow var(--dur-base) var(--ease-out);
}

:where(.wp-element-button, .wp-block-button__link)::before {
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.2), transparent);
  content: "";
  height: 100%;
  left: -100%;
  pointer-events: none;
  position: absolute;
  top: 0;
  transition: left var(--dur-slow) var(--ease-out);
  width: 100%;
}

:where(.wp-element-button, .wp-block-button__link):hover {
  transform: translateY(-2px) scale(1.02);
}

/* Filled default buttons ride the theme.json gradient (deepened stops,
   milestone 4); the soft shadow lifts the white label on its warmest
   zones. Outline-style buttons carry dark text — no shadow. */
.wp-block-button:not(.is-style-outline) .wp-block-button__link,
.wp-element-button:not(.wp-block-button__link) {
  text-shadow: var(--tgp-cta-text-shadow);
}

.is-style-outline .wp-block-button__link {
  text-shadow: none;
}

:where(.wp-element-button, .wp-block-button__link):hover::before {
  left: 100%;
}

.wp-block-quote.is-style-plain,
.wp-block-quote.is-style-plain p {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.wp-block-code {
  overflow-x: auto;
}

/* De-emphasis for post dates comes from the theme.json color (#5E7290,
   AA on white) — NOT opacity: fading the color out re-broke contrast
   (0.75 over white blends to ~3:1). */

.wp-block-post-author {
  opacity: 0.8;
}

.wp-block-post-excerpt {
  opacity: 0.85;
}

.wp-block-comment-content {
  opacity: 0.9;
}

.wp-block-separator {
  opacity: 1;
}

.wp-block-search__inside-wrapper {
  display: flex;
  gap: 0.5rem;
}

.wp-block-search__input {
  background: var(--wp--preset--color--base);
  border: 2px solid var(--wp--preset--color--contrast-4);
  border-radius: 100px;
  color: var(--wp--preset--color--contrast-3);
  flex: 1;
  font-family: var(--wp--preset--font-family--lexend-deca);
  font-size: var(--wp--preset--font-size--small);
  padding: 0.75rem 1.25rem;
}

.wp-block-search__input:focus {
  border-color: var(--wp--preset--color--accent-1);
  outline: none;
  /* outline:none alone left no focus indicator for keyboard users; add a ring
     like the form-card inputs (WCAG 2.4.7). */
  box-shadow: 0 0 0 3px rgb(var(--tgp-brand-blue-rgb) / 0.25);
}

.wp-block-search__button {
  border-radius: 100px;
}

.wp-block-query-pagination,
.wp-block-comments-pagination {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.wp-block-query-pagination-numbers .page-numbers,
.wp-block-comments-pagination-numbers .page-numbers {
  align-items: center;
  background: var(--wp--preset--color--base);
  border: 2px solid var(--wp--preset--color--contrast-4);
  border-radius: 100px;
  color: var(--wp--preset--color--contrast-3);
  display: inline-flex;
  font-family: var(--wp--preset--font-family--lexend-deca);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  height: 2.5rem;
  justify-content: center;
  min-width: 2.5rem;
  padding: 0 0.75rem;
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease-out);
}

.wp-block-query-pagination-numbers .page-numbers:hover,
.wp-block-query-pagination-numbers .page-numbers.current,
.wp-block-comments-pagination-numbers .page-numbers:hover,
.wp-block-comments-pagination-numbers .page-numbers.current {
  background: var(--tgp-azure-text);
  border-color: var(--tgp-azure-text);
  color: var(--wp--preset--color--base);
}

.wp-block-query-pagination-next,
.wp-block-query-pagination-previous,
.wp-block-comments-pagination-next,
.wp-block-comments-pagination-previous {
  align-items: center;
  background: var(--tgp-azure-text);
  border-radius: 100px;
  color: var(--wp--preset--color--base);
  display: inline-flex;
  font-family: var(--wp--preset--font-family--lexend-deca);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  padding: 0.5rem 1.25rem;
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease-out);
}

.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-comments-pagination-next:hover,
.wp-block-comments-pagination-previous:hover {
  background: var(--wp--preset--color--contrast-2);
}

/* About team
   -------------------------------------------------------------------------- */
.about-team {
  background: var(--wp--preset--color--base-2);
}

.about-team .about-team-inner {
  margin: 0 auto;
  max-width: var(--wp--style--global--wide-size);
}

.about-team .about-team-founder {
  align-items: center;
  display: grid;
  gap: var(--wp--preset--spacing--60);
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  margin-bottom: var(--wp--preset--spacing--70);
}

.about-team .about-team-founder-photo {
  background: var(--wp--preset--color--contrast-2);
  border-radius: var(--tgp-radius-lg);
  box-shadow: var(--wp--preset--shadow--layered-4);
  overflow: hidden;
  position: relative;
}

.about-team .about-team-founder-photo::after,
.about-team .about-team-card::after {
  background: var(--gradient-rainbow-h);
  bottom: 0;
  content: "";
  height: 4px;
  left: 0;
  position: absolute;
  right: 0;
}

.about-team .about-team-founder-photo .wp-block-image,
.about-team .about-team-card-img {
  height: 100%;
  margin: 0;
  width: 100%;
}

.about-team .about-team-founder-photo img,
.about-team .about-team-card-img img {
  aspect-ratio: 4 / 5;
  height: 100% !important;
  object-fit: cover;
  width: 100% !important;
}

.about-team .about-team-founder-copy .section-eyebrow,
.about-team .about-team-founder-copy .section-headline {
  text-align: left;
}

.about-team .about-team-header {
  margin-bottom: var(--wp--preset--spacing--50);
}

/* Team grid: center an incomplete final row (5 members -> 3 + 2 centered). */
.about-team .about-team-grid {
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--wp--preset--spacing--40);
}

.about-team .about-team-grid,
.about-team .about-team-grid.is-layout-grid {
  display: flex;
}

.about-team .about-team-grid > * {
  flex: 0 1 calc((100% - 2 * var(--wp--preset--spacing--40)) / 3);
  max-width: calc((100% - 2 * var(--wp--preset--spacing--40)) / 3);
}

.about-team .about-team-card {
  background: var(--wp--preset--color--base);
  border-radius: var(--tgp-card-radius);
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.08);
  overflow: hidden;
  position: relative;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-lift);
}

.about-team .about-team-card:hover {
  box-shadow: var(--wp--preset--shadow--layered-4);
  transform: translateY(-4px);
}

.about-team .about-team-card-info {
  padding: var(--tgp-card-padding-sm);
}

.about-team .about-team-card-name {
  font-family: var(--wp--preset--font-family--righteous);
  font-size: var(--wp--preset--font-size--xx-large);
  line-height: 1.2;
  margin: 0;
}

.about-team .about-team-card-role,
.about-team .about-team-card-bio {
  margin: 0;
}

@media (max-width: 1024px) {
  .about-team .about-team-founder {
    grid-template-columns: 1fr;
  }

  .about-team .about-team-founder-photo {
    margin: 0 auto;
    max-width: 440px;
    width: 100%;
  }

  .about-team .about-team-founder-copy,
  .about-team .about-team-founder-copy .section-eyebrow,
  .about-team .about-team-founder-copy .section-headline {
    text-align: center;
  }

  .about-team .about-team-grid > * {
    flex-basis: calc((100% - var(--wp--preset--spacing--40)) / 2);
    max-width: calc((100% - var(--wp--preset--spacing--40)) / 2);
  }
}

@media (max-width: 720px) {

  .about-team .about-team-grid {
    margin: 0 auto;
    max-width: 420px;
  }
  .about-team .about-team-grid > * {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* Hero
   -------------------------------------------------------------------------- */
.hero{
display: grid;
grid-template-rows: auto 1fr auto;
gap: var(--tgp-card-gap);
min-height: 75vh;
padding-top: var(--wp--preset--spacing--50);
/* Fallback only since the skyline photo landed: .hero-bg paints the photo plus
   its own copy of this gradient on top. Kept so removing the image block in the
   editor leaves the original solid tie-dye hero intact. */
background: var(--gradient-rainbow);
font-family: var(--wp--preset--font-family--lexend-deca);
overflow: hidden;
position: relative;
}

.hero::before{
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 20% 80%, rgb(var(--tgp-brand-blue-rgb) / 0.3) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(74, 144, 217, 0.25) 0%, transparent 55%),
    /* Soft dark scrim centered behind the headline so white text holds contrast
       over the bright middle of the gradient; fades out so the tie-dye stays
       vibrant toward the edges (replaces the old white center tint that
       brightened exactly where the text sits). */
    radial-gradient(ellipse 75% 60% at 50% 48%, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.12) 45%, transparent 72%);
  z-index: 1;
  pointer-events: none;
}

.hero::after{
  content: '';
  position: absolute;
  inset: -50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255,255,255,0.04) 0deg 5deg,
    transparent 5deg 10deg
  );
  z-index: 1;
  pointer-events: none;
  animation: hero-rotate 120s linear infinite;
}

/* Jacksonville skyline photo layer.
   Sits at the very bottom of the hero stack (z-index 0) with the tie-dye
   painted back over it at partial opacity, so the city reads as a ghosted
   silhouette *under* the dye rather than a photo the eye has to parse. The
   image block is editor-swappable — delete it and the section's own
   --gradient-rainbow background takes over exactly as before. Everything
   above stays put: ::before scrim and ::after sunburst are z-index 1, grain
   is 2, content and trust bar are 3. */
.hero .hero-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* The hero is a constrained-layout section, so WP caps and centres every
     non-alignfull child. Release the cap or the photo gets boxed to content
     width while the gradient behind it stays full-bleed. Same fix as
     .tgp-page-hero--cover .tgp-page-hero__bg. */
  margin: 0;
  max-width: none;
}

.hero .hero-bg .wp-block-image{
  height: 100%;
  margin: 0;
  width: 100%;
}

.hero .hero-bg img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  /* Anchor the skyline band to the bottom edge so the headline sits over open
     sky and the city grounds the trust bar instead of colliding with copy. */
  object-position: center bottom;
  /* Source is a deliberately dark blue-hour frame; lift it so the bridge and
     the lit windows still carry through the dye layer above. */
  filter: brightness(1.45) contrast(1.12) saturate(0.8);
}

/* The tie-dye, repainted over the photo. This opacity is the dial: lower it to
   show more city, push it toward 1 to go back to a solid gradient.
   The mask eases the dye back over the bottom third only (0.90 down to ~0.76
   effective), which is where the skyline actually sits. Holding full strength
   across the top matters twice over: it keeps the dye vibrant behind the
   headline, and the photo is what earns the white text its contrast up there —
   thinning the dye at the top would hand that back. */
.hero .hero-bg::after{
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-rainbow);
  opacity: 0.90;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,0.85) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
}

.hero .hero-rainbow-bar{
  position: relative;
  z-index: 3;
  height: 5px;
  background: var(--gradient-rainbow-h);
  box-shadow: var(--tgp-bar-shadow);
}

.hero .hero-grain{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20256%20256%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.9%27%20numOctaves%3D%274%27%20stitchTiles%3D%27stitch%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E");
  z-index: 2;
}

.hero .hero-content{
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
  text-align: center;
}

.hero .hero-content-inner{
  max-width: 950px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero .hero-divider{
  display: flex;
  align-items: center;
  gap: var(--tgp-card-gap);
  width: 100%;
  max-width: 420px;
  margin-bottom: var(--wp--preset--spacing--40);
}

.hero .hero-divider-line{
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
}

.hero .hero-divider-star{
line-height: 1;
text-shadow: 0 0 12px rgba(255,255,255,0.5);
}

.hero .hero-eyebrow{
margin-bottom: var(--wp--preset--spacing--30);
text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.hero .hero-eyebrow-separator{
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--wp--preset--color--base);
  vertical-align: middle;
  margin: 0 var(--wp--preset--spacing--20);
}

.hero .hero-headline{
font-weight: 400;
margin: 0 0 var(--wp--preset--spacing--30) 0;
/* Stronger layered shadow so the white headline holds contrast across the
   whole tie-dye gradient — the old 0.15 shadow let "Priced Before We Start."
   wash out over the bright yellow/orange band. */
text-shadow: 0 2px 20px rgba(0,0,0,0.38), 0 1px 3px rgba(0,0,0,0.45);
}

.hero .hero-line-1{
  display: block;
  color: var(--wp--preset--color--base);
}

.hero .hero-line-2{
  display: block;
  color: var(--wp--preset--color--base);
}

.hero .hero-sub{
font-weight: 400;
margin: 0 0 var(--wp--preset--spacing--30) 0;
color: var(--wp--preset--color--base);
text-shadow: 0 2px 12px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.4);
}

.hero .hero-emergency{
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  margin-bottom: var(--wp--preset--spacing--40);
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 100px;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wp--preset--color--base);
  backdrop-filter: blur(4px);
}

.hero .hero-emergency-dot{
  width: 8px;
  height: 8px;
  background: var(--wp--preset--color--base);
  border-radius: 50%;
  animation: hero-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

.hero .hero-cta-group{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tgp-card-gap);
}

.hero .hero-cta{
  /* Full width of .hero-content-inner (max 950px). Was inline-flex, which
     sized the pill to its content; combined with the leaked 340px cap from
     critical-home.css that produced the squat blob. Mobile re-clamps to
     340px in the max-width:768px block below. */
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: var(--wp--preset--color--base);
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
  border-radius: 100px;
  background: var(--gradient-rainbow);
  background-size: 300% 300%;
  /* Visible at rest. The 0.85s scaleIn left this pill at opacity 0 on first
     paint, and the 0.48 sitewide CTA veil reads as a dark plum against the
     hero. Local 0.30 veil + 1.2rem/800 label (WCAG large text, 3:1) lets the
     tie-dye show without dropping yellow-stop contrast under 3:1. */
  animation: hero-gradientShift 8s ease infinite;
  opacity: 1;
  text-shadow: var(--tgp-cta-text-shadow);
  box-shadow:
    inset 0 0 0 999px rgb(var(--tgp-ink-rgb) / 0.30),
    0 8px 32px rgb(var(--tgp-brand-blue-rgb) / 0.35),
    0 0 0 3px rgba(255,255,255,0.45),
    inset 0 1px 0 rgba(255,255,255,0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.hero .hero-cta::before{
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.6s ease;
}

.hero .hero-cta:hover{
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.3),
    0 0 0 3px rgba(255,255,255,0.45),
    inset 0 1px 0 rgba(255,255,255,0.4);
}

.hero .hero-cta:hover::before{
  left: 100%;
}

.hero .hero-cta-label{
font-size: 1.2rem;
font-weight: 800;
text-shadow: 0 2px 6px rgba(0,0,0,0.55);
/* "Call Now. No-Obligation Quote." fits one line on desktop but needs two in
   the mobile pill, where the default break orphans "QUOTE." on its own line.
   Balancing splits it at the sentence instead — Call Now. / No-Obligation
   Quote. Needs display:block, since the class sits on the inline <a> and
   text-wrap only applies to block containers. The markup pairs this with a
   non-breaking hyphen (&#8209;) in "No-Obligation": with a plain hyphen,
   balance happily breaks mid-word there, which is worse than the orphan. */
display: block;
text-wrap: balance;
/* Deliberately NOT position:relative — the stretched ::after below has to
   anchor to .hero-cta, and a positioned label would capture it instead. The
   trade is that the pill's hover shine now sweeps over this text rather than
   under it, which is what a shine should do anyway. */
}

/* Stretched link: makes the ENTIRE pill tappable through this one anchor.
   Before this, the number was plain text and only the small label carried the
   tel: link — so the biggest, most button-shaped element in the hero was dead
   to the touch except for its caption. One link rather than two keeps a single
   tel: target in the accessibility tree. */
.hero .hero-cta,
.hero .hero-cta-link {
  opacity: 1;
}

.hero .hero-cta-link,
.hero .hero-cta-label {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.hero .hero-cta-link::after{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hero .hero-cta-number{
letter-spacing: 0.03em;
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
position: relative;
z-index: 1;
}

.hero .hero-availability{
letter-spacing: 0.03em;
margin: 0;
text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.hero .hero-avail-sep{
  display: inline-block;
  margin: 0 var(--wp--preset--spacing--20);
  color: var(--wp--preset--color--white-overlay-65);
}

.hero .hero-trust{
  position: relative;
  z-index: 3;
  background: rgba(0,0,0,0.15);
  border-top: 1px solid rgba(255,255,255,0.2);
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
  backdrop-filter: blur(6px);
  animation: hero-fadeUp 0.8s ease-out 1.1s both;
}

.hero .hero-trust-inner{
  max-width: var(--wp--style--global--wide-size);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--40);
  flex-wrap: wrap;
}

.hero .hero-trust-item{
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  white-space: nowrap;
}

.hero .hero-trust-divider{
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.25);
  flex-shrink: 0;
}

.hero .hero-trust-label{
font-weight: 400;
letter-spacing: 0.02em;
}

.hero .hero-trust-highlight{
  color: var(--wp--preset--color--base);
  font-weight: 700;
}

.hero .hero-trust-icon{
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.hero .hero-trust-icon--star{
  background-color: var(--wp--preset--color--base);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27currentColor%27%3E%3Cpath%20d%3D%27M12%202l3.09%206.26L22%209.27l-5%204.87%201.18%206.88L12%2017.77l-6.18%203.25L7%2014.14%202%209.27l6.91-1.01L12%202z%27%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27currentColor%27%3E%3Cpath%20d%3D%27M12%202l3.09%206.26L22%209.27l-5%204.87%201.18%206.88L12%2017.77l-6.18%203.25L7%2014.14%202%209.27l6.91-1.01L12%202z%27%2F%3E%3C%2Fsvg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
}

.hero .hero-trust-icon--shield{
  background-color: var(--wp--preset--color--base);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27currentColor%27%3E%3Cpath%20d%3D%27M12%201L3%205v6c0%205.55%203.84%2010.74%209%2012%205.16-1.26%209-6.45%209-12V5l-9-4zm-2%2016l-4-4%201.41-1.41L10%2014.17l6.59-6.59L18%209l-8%208z%27%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27currentColor%27%3E%3Cpath%20d%3D%27M12%201L3%205v6c0%205.55%203.84%2010.74%209%2012%205.16-1.26%209-6.45%209-12V5l-9-4zm-2%2016l-4-4%201.41-1.41L10%2014.17l6.59-6.59L18%209l-8%208z%27%2F%3E%3C%2Fsvg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
}

.hero .hero-trust-icon--tag{
  background-color: var(--wp--preset--color--base);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27currentColor%27%3E%3Cpath%20d%3D%27M21.41%2011.58l-9-9C12.05%202.22%2011.55%202%2011%202H4c-1.1%200-2%20.9-2%202v7c0%20.55.22%201.05.59%201.42l9%209c.36.36.86.58%201.41.58.55%200%201.05-.22%201.41-.59l7-7c.37-.36.59-.86.59-1.41%200-.55-.23-1.06-.59-1.42zM5.5%207C4.67%207%204%206.33%204%205.5S4.67%204%205.5%204%207%204.67%207%205.5%206.33%207%205.5%207z%27%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27currentColor%27%3E%3Cpath%20d%3D%27M21.41%2011.58l-9-9C12.05%202.22%2011.55%202%2011%202H4c-1.1%200-2%20.9-2%202v7c0%20.55.22%201.05.59%201.42l9%209c.36.36.86.58%201.41.58.55%200%201.05-.22%201.41-.59l7-7c.37-.36.59-.86.59-1.41%200-.55-.23-1.06-.59-1.42zM5.5%207C4.67%207%204%206.33%204%205.5S4.67%204%205.5%204%207%204.67%207%205.5%206.33%207%205.5%207z%27%2F%3E%3C%2Fsvg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
}

.hero .hero-trust-icon--clock{
  background-color: var(--wp--preset--color--base);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27currentColor%27%3E%3Cpath%20d%3D%27M12%202C6.5%202%202%206.5%202%2012s4.5%2010%2010%2010%2010-4.5%2010-10S17.5%202%2012%202zm0%2018c-4.41%200-8-3.59-8-8s3.59-8%208-8%208%203.59%208%208-3.59%208-8%208zm.5-13H11v6l5.25%203.15.75-1.23-4.5-2.67V7z%27%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27currentColor%27%3E%3Cpath%20d%3D%27M12%202C6.5%202%202%206.5%202%2012s4.5%2010%2010%2010%2010-4.5%2010-10S17.5%202%2012%202zm0%2018c-4.41%200-8-3.59-8-8s3.59-8%208-8%208%203.59%208%208-3.59%208-8%208zm.5-13H11v6l5.25%203.15.75-1.23-4.5-2.67V7z%27%2F%3E%3C%2Fsvg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
}

@media (max-width: 1024px){
  .hero{
    --font-size-display: clamp(2.5rem, 7vw, 5rem);
  }

  .hero .hero-content{
    padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
  }
}

@media (max-width: 768px){
  .hero{
    --font-size-display: clamp(2.2rem, 9vw, 3.5rem);
    --font-size-2xl: clamp(1.1rem, 2.5vw, 1.5rem);
    min-height: 75vh;
    padding-top: var(--wp--preset--spacing--60);
  }

  .hero .hero-content{
    padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
  }

  .hero .hero-headline{
margin-bottom: var(--wp--preset--spacing--20);
}

  .hero .hero-sub{
font-size: var(--wp--preset--font-size--lg);
margin-bottom: var(--wp--preset--spacing--20);
}

  .hero .hero-divider{
    max-width: 260px;
    margin-bottom: var(--wp--preset--spacing--30);
  }

  .hero .hero-cta{
    padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
    width: 100%;
    max-width: 340px;
  }

  .hero .hero-trust-inner{
    gap: var(--tgp-card-gap);
    justify-content: center;
  }

  .hero .hero-trust-divider{
    display: none;
  }

  .hero .hero-availability{
display: flex;
flex-direction: column;
gap: 2px;
align-items: center;
}

  .hero .hero-avail-sep{
    display: none;
  }

  .hero .hero-emergency{
    font-size: var(--wp--preset--font-size--small);
  }
}

@media (max-width: 480px){
  .hero{
    --font-size-display: clamp(2rem, 10vw, 3rem);
  }

  .hero .hero-eyebrow{
letter-spacing: 0.08em;
}

  .hero .hero-trust-inner{
    flex-direction: column;
    gap: var(--wp--preset--spacing--20);
  }
}

.hero .hero-cta a {
  text-decoration: none;
}

/* Trust pillars
   -------------------------------------------------------------------------- */
.trust-pillars {
  background: var(--wp--preset--gradient--band-gator);
  position: relative;
}

.trust-pillars-inner {
  display: grid;
  gap: var(--wp--preset--spacing--40);
  grid-template-columns: repeat(4, 1fr);
  margin: 0 auto;
  max-width: var(--wp--style--global--wide-size);
  padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
}

.trust-pillar {
  background: var(--tgp-dyed-card);
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: var(--tgp-card-radius);
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
  text-align: center;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.trust-pillar:hover {
  background: var(--tgp-dyed-card-hover);
  border-color: rgb(255 255 255 / 0.22);
}

.trust-pillar-icon {
  background: var(--gradient-rainbow);
  border-radius: 50%;
  display: block;
  height: 48px;
  margin: 0 auto var(--wp--preset--spacing--30);
  position: relative;
  width: 48px;
}

.trust-pillar-icon::after {
  background-color: var(--wp--preset--color--base);
  content: "";
  height: 24px;
  left: 50%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
}

.trust-pillar-icon--pricing::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27currentColor%27%3E%3Cpath%20d%3D%27M11.8%2010.9c-2.27-.59-3-1.2-3-2.15%200-1.09%201.01-1.85%202.7-1.85%201.78%200%202.44.85%202.5%202.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5%201.68-3.5%203.61%200%202.31%201.91%203.46%204.7%204.13%202.5.6%203%201.48%203%202.41%200%20.69-.49%201.79-2.7%201.79-2.06%200-2.87-.92-2.98-2.1h-2.2c.12%202.19%201.76%203.42%203.68%203.83V21h3v-2.15c1.95-.37%203.5-1.5%203.5-3.55%200-2.84-2.43-3.81-4.7-4.4z%27%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27currentColor%27%3E%3Cpath%20d%3D%27M11.8%2010.9c-2.27-.59-3-1.2-3-2.15%200-1.09%201.01-1.85%202.7-1.85%201.78%200%202.44.85%202.5%202.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5%201.68-3.5%203.61%200%202.31%201.91%203.46%204.7%204.13%202.5.6%203%201.48%203%202.41%200%20.69-.49%201.79-2.7%201.79-2.06%200-2.87-.92-2.98-2.1h-2.2c.12%202.19%201.76%203.42%203.68%203.83V21h3v-2.15c1.95-.37%203.5-1.5%203.5-3.55%200-2.84-2.43-3.81-4.7-4.4z%27%2F%3E%3C%2Fsvg%3E");
}

.trust-pillar-icon--clock::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27currentColor%27%3E%3Cpath%20d%3D%27M12%202C6.5%202%202%206.5%202%2012s4.5%2010%2010%2010%2010-4.5%2010-10S17.5%202%2012%202zm0%2018c-4.41%200-8-3.59-8-8s3.59-8%208-8%208%203.59%208%208-3.59%208-8%208zm.5-13H11v6l5.25%203.15.75-1.23-4.5-2.67V7z%27%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27currentColor%27%3E%3Cpath%20d%3D%27M12%202C6.5%202%202%206.5%202%2012s4.5%2010%2010%2010%2010-4.5%2010-10S17.5%202%2012%202zm0%2018c-4.41%200-8-3.59-8-8s3.59-8%208-8%208%203.59%208%208-3.59%208-8%208zm.5-13H11v6l5.25%203.15.75-1.23-4.5-2.67V7z%27%2F%3E%3C%2Fsvg%3E");
}

.trust-pillar-icon--shield::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27currentColor%27%3E%3Cpath%20d%3D%27M12%201L3%205v6c0%205.55%203.84%2010.74%209%2012%205.16-1.26%209-6.45%209-12V5l-9-4zm-2%2016l-4-4%201.41-1.41L10%2014.17l6.59-6.59L18%209l-8%208z%27%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27currentColor%27%3E%3Cpath%20d%3D%27M12%201L3%205v6c0%205.55%203.84%2010.74%209%2012%205.16-1.26%209-6.45%209-12V5l-9-4zm-2%2016l-4-4%201.41-1.41L10%2014.17l6.59-6.59L18%209l-8%208z%27%2F%3E%3C%2Fsvg%3E");
}

.trust-pillar-icon--guarantee::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27currentColor%27%3E%3Cpath%20d%3D%27M12%202C6.48%202%202%206.48%202%2012s4.48%2010%2010%2010%2010-4.48%2010-10S17.52%202%2012%202zm-2%2015l-5-5%201.41-1.41L10%2014.17l7.59-7.59L19%208l-9%209z%27%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27currentColor%27%3E%3Cpath%20d%3D%27M12%202C6.48%202%202%206.48%202%2012s4.48%2010%2010%2010%2010-4.48%2010-10S17.52%202%2012%202zm-2%2015l-5-5%201.41-1.41L10%2014.17l7.59-7.59L19%208l-9%209z%27%2F%3E%3C%2Fsvg%3E");
}

.trust-pillar-title {
  margin-bottom: var(--wp--preset--spacing--20);
}

@media (max-width: 1024px) {
  .trust-pillars-inner {
    grid-template-columns: repeat(2, 1fr);
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
  }
}

@media (max-width: 480px) {
  .trust-pillars-inner {
    gap: var(--tgp-card-gap);
    grid-template-columns: 1fr;
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
  }

  .trust-pillar {
    padding: var(--tgp-card-padding-sm);
  }
}

/* Process section
   -------------------------------------------------------------------------- */
.process {
  overflow: hidden;
  position: relative;
}

.process::before {
  background:
    radial-gradient(ellipse 60% 60% at 30% 70%, rgb(0 0 0 / 0.2) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 70% 30%, rgb(0 0 0 / 0.15) 0%, transparent 50%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.process-inner {
  margin: 0 auto;
  max-width: 800px;
  position: relative;
  z-index: 2;
}

.process-header {
  margin-bottom: var(--wp--preset--spacing--50);
  text-align: center;
}

.process-steps {
  align-items: stretch;
  display: flex;
  flex-direction: column;
}

.process-step {
  align-items: center;
  background: rgb(255 255 255 / 0.12);
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: var(--tgp-card-radius);
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
  text-align: center;
  padding: var(--tgp-card-padding);
  transition: background var(--dur-base) var(--ease-out);
}

@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
  .process-step {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

.process-step:hover {
  background: rgb(255 255 255 / 0.2);
}

.process-number {
  flex-shrink: 0;
  min-width: 60px;
  opacity: 0.5;
  text-align: center;
}

.process-step-title {
  margin-bottom: var(--wp--preset--spacing--20);
}

.process-step-text {
  font-size: var(--wp--preset--font-size--medium);
}

.process-connector {
  background: rgb(255 255 255 / 0.25);
  flex-shrink: 0;
  height: 32px;
  margin: 0 auto;
  width: 2px;
}

@media (max-width: 768px) {
  .process {
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30) !important;
  }

  .process-step {
    flex-direction: column;
    gap: var(--tgp-card-gap);
    padding: var(--tgp-card-padding-sm);
  }

  .process-number {
    min-width: auto;
    text-align: left;
  }
}

/* Guarantee section
   -------------------------------------------------------------------------- */
.guarantee {
  background: var(--wp--preset--color--base-2);
}

.guarantee-inner {
  margin: 0 auto;
  max-width: 800px;
  padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
  text-align: center;
}

.guarantee-shield {
  background: var(--gradient-rainbow);
  border-radius: 50%;
  display: block;
  height: 64px;
  margin: 0 auto var(--wp--preset--spacing--40);
  position: relative;
  width: 64px;
}

.guarantee-shield::after {
  background-color: var(--wp--preset--color--base);
  content: "";
  height: 32px;
  left: 50%;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27currentColor%27%3E%3Cpath%20d%3D%27M12%201L3%205v6c0%205.55%203.84%2010.74%209%2012%205.16-1.26%209-6.45%209-12V5l-9-4zm-2%2016l-4-4%201.41-1.41L10%2014.17l6.59-6.59L18%209l-8%208z%27%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27currentColor%27%3E%3Cpath%20d%3D%27M12%201L3%205v6c0%205.55%203.84%2010.74%209%2012%205.16-1.26%209-6.45%209-12V5l-9-4zm-2%2016l-4-4%201.41-1.41L10%2014.17l6.59-6.59L18%209l-8%208z%27%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
}

.guarantee-headline {
  margin-bottom: var(--wp--preset--spacing--30);
}

.guarantee-text {
  margin-bottom: var(--wp--preset--spacing--40);
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
}

.guarantee-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tgp-card-gap);
  justify-content: center;
}

.guarantee-badge {
  border: 1px solid rgb(var(--tgp-brand-blue-rgb) / 0.25);
  border-radius: 100px;
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

@media (max-width: 480px) {
  .guarantee-inner {
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
  }
}

/* About values and guarantees
   -------------------------------------------------------------------------- */
.tgp-about-values {
  color: var(--wp--preset--color--base);
  overflow: hidden;
  position: relative;
}

.tgp-about-values::after {
  background: repeating-conic-gradient(rgb(255 255 255 / 0.04) 0deg 5deg, transparent 5deg 10deg);
  content: "";
  inset: -50%;
  pointer-events: none;
  position: absolute;
}

.tgp-about-values__inner,
.tgp-about-guarantees__inner {
  margin: 0 auto;
  max-width: var(--wp--style--global--wide-size);
  position: relative;
  z-index: 1;
}

.tgp-about-values__header,
.tgp-about-guarantees__header {
  margin-bottom: var(--wp--preset--spacing--50);
}

.tgp-about-values__intro {
  color: var(--wp--preset--color--white-overlay-85);
  margin-left: auto;
  margin-right: auto;
  max-width: 680px;
}

.tgp-about-guarantees__grid {
  display: grid;
  gap: var(--tgp-card-gap);
}

.tgp-about-values__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tgp-card-gap);
}

.tgp-about-value-card {
  background: rgb(255 255 255 / 0.07);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: var(--tgp-card-radius);
  box-shadow: 0 18px 45px rgb(0 0 0 / 0.16);
  /* 4-up at desktop (7 values land 4 + 3 centered) instead of a cramped 7-up
     row of ~150px cards. Steps down to 3-up <=1180px and 1-up <=720px below. */
  flex: 1 1 calc((100% - 3 * var(--tgp-card-gap)) / 4);
  max-width: calc((100% - 3 * var(--tgp-card-gap)) / 4);
  min-height: 100%;
  padding: var(--tgp-card-padding);
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-lift);
}

.tgp-about-value-card:hover {
  background: rgb(255 255 255 / 0.11);
  border-color: rgb(255 255 255 / 0.24);
  transform: translateY(-4px);
}

.tgp-about-value-card__mark,
.tgp-about-guarantee-card__mark {
  align-items: center;
  background: var(--gradient-rainbow);
  border-radius: 999px;
  color: var(--wp--preset--color--base);
  display: inline-flex;
  font-family: var(--wp--preset--font-family--lexend-deca);
  font-weight: 800;
  height: 44px;
  justify-content: center;
  line-height: 1;
  margin: 0;
  width: 44px;
}

.tgp-about-value-card__title,
.tgp-about-value-card__text,
.tgp-about-guarantee-card__title,
.tgp-about-guarantee-card__text {
  margin: 0;
}

.tgp-about-value-card__title,
.tgp-about-guarantee-card__title {
  font-family: var(--wp--preset--font-family--righteous);
}

.tgp-about-value-card__text {
  color: var(--wp--preset--color--white-overlay-85);
}

.tgp-about-guarantees__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tgp-about-guarantee-card {
  border: 2px solid rgb(var(--tgp-brand-blue-rgb) / 0.12);
  border-radius: var(--tgp-card-radius);
  box-shadow: var(--tgp-elev-1);
  min-height: 100%;
  padding: var(--tgp-card-padding);
  text-align: center;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-lift);
}

.tgp-about-guarantee-card:hover {
  border-color: var(--wp--preset--color--accent-1);
  box-shadow: var(--wp--preset--shadow--layered-4);
  transform: translateY(-4px);
}

.tgp-about-guarantee-card__mark {
  margin: 0 auto var(--wp--preset--spacing--20);
}

.tgp-about-guarantees__buttons {
  margin-top: var(--wp--preset--spacing--50);
}

@media (max-width: 1180px) {
  .tgp-about-value-card {
    flex-basis: calc((100% - 2 * var(--wp--preset--spacing--30)) / 3);
    max-width: calc((100% - 2 * var(--wp--preset--spacing--30)) / 3);
  }
}

@media (max-width: 900px) {
  .tgp-about-guarantees__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {

  .tgp-about-guarantees__grid {
    grid-template-columns: 1fr;
    margin-left: auto;
    margin-right: auto;
    max-width: 440px;
  }

  .tgp-about-values__grid {
    margin-left: auto;
    margin-right: auto;
    max-width: 440px;
  }

  .tgp-about-value-card {
    flex-basis: 100%;
    max-width: none;
  }
}

/* Specialty service/location sections
   -------------------------------------------------------------------------- */
.tgp-specialty-section__inner {
  margin: 0 auto;
  max-width: var(--wp--style--global--wide-size);
}

.tgp-specialty-section__header {
  margin-bottom: var(--wp--preset--spacing--50);
}

.tgp-specialty-grid {
  display: grid;
  gap: var(--tgp-card-gap);
  margin-bottom: var(--wp--preset--spacing--50);
}

.tgp-specialty-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tgp-specialty-card {
  background: var(--wp--preset--color--base);
  border: 1px solid rgb(var(--tgp-brand-blue-rgb) / 0.1);
  border-radius: var(--tgp-card-radius);
  box-shadow: var(--tgp-elev-1);
  min-height: 100%;
  padding: var(--tgp-card-padding);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-lift);
}

.tgp-specialty-card:hover {
  border-color: rgb(var(--tgp-brand-blue-rgb) / 0.22);
  box-shadow: var(--wp--preset--shadow--layered-4);
  transform: translateY(-4px);
}

.tgp-specialty-card :where(h3, p),
.tgp-specialty-process :where(h3, p, ul),
.tgp-specialty-offer :where(h3, p) {
  margin: 0;
}

.tgp-specialty-split {
  align-items: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
  margin-bottom: var(--wp--preset--spacing--50);
}

.tgp-specialty-process,
.tgp-specialty-offer {
  border-radius: var(--tgp-radius-lg);
  min-height: 100%;
  padding: var(--wp--preset--spacing--50);
}

.tgp-specialty-process {
  background: var(--wp--preset--color--base);
  border: 1px solid rgb(var(--tgp-brand-blue-rgb) / 0.12);
}

.tgp-specialty-list {
  color: var(--wp--preset--color--contrast-4);
  line-height: 1.8;
  padding-left: 1.25rem;
}

.tgp-specialty-offer {
  background:
    radial-gradient(ellipse 80% 70% at 15% 10%, rgb(255 255 255 / 0.14), transparent 58%),
    var(--gradient-rainbow);
  color: var(--wp--preset--color--base);
  overflow: hidden;
  position: relative;
}

.tgp-specialty-offer__kicker {
  color: var(--wp--preset--color--white-overlay-85);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tgp-specialty-offer__copy {
  color: var(--wp--preset--color--white-overlay-85);
}

.tgp-specialty-related {
  text-align: center;
}

/* Center the wrapped pill rows so a short final row sits centered, not left-aligned. */
.tgp-specialty-links,
.tgp-specialty-links.is-layout-flex {
  justify-content: center;
}

.tgp-specialty-links p {
  margin: 0;
}

.tgp-specialty-links a {
  border: 2px solid rgb(var(--tgp-brand-blue-rgb) / 0.25);
  border-radius: 999px;
  color: var(--tgp-azure-text);
  display: inline-flex;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  padding: 0.65rem 1.1rem;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.tgp-specialty-links a:hover {
  background: var(--tgp-azure-text);
  color: var(--wp--preset--color--base);
  transform: translateY(-2px);
}

@media (max-width: 1040px) {
  .tgp-specialty-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tgp-specialty-split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {

  .tgp-specialty-grid--four {
    grid-template-columns: 1fr;
  }

  .tgp-specialty-process,
  .tgp-specialty-offer,
  .tgp-specialty-card {
    padding: var(--tgp-card-padding-sm);
  }
}

/* Customer reviews
   -------------------------------------------------------------------------- */
.reviews {
  background: var(--wp--preset--color--base);
}

.reviews-inner {
  margin: 0 auto;
  max-width: var(--wp--style--global--wide-size);
}

.reviews-header {
  margin-bottom: var(--wp--preset--spacing--50);
}

.reviews-rating {
  align-items: center;
  display: flex;
  gap: var(--tgp-card-gap);
  justify-content: center;
  margin-top: var(--wp--preset--spacing--20);
}

.reviews-grid {
  display: grid;
  gap: var(--wp--preset--spacing--40);
  grid-template-columns: repeat(3, 1fr);
}

.review-card {
  background: var(--wp--preset--color--base-2);
  border: 1px solid rgb(var(--tgp-brand-blue-rgb) / 0.06);
  border-radius: var(--tgp-card-radius);
  padding: var(--tgp-card-padding);
  position: relative;
  text-align: center;
  transition: transform var(--dur-base) var(--ease-lift);
}

.review-card:hover {
  transform: translateY(-4px);
}

.review-card:nth-child(2) {
  transform: translateY(var(--wp--preset--spacing--40));
}

.review-card:nth-child(2):hover {
  transform: translateY(calc(var(--wp--preset--spacing--40) - 3px));
}

.review-stars {
  display: flex;
  justify-content: center;
  margin-bottom: var(--wp--preset--spacing--30);
}

.review-quote {
  font-size: var(--wp--preset--font-size--base);
  font-style: normal;
  margin-bottom: var(--wp--preset--spacing--30);
}

.review-author {
  align-items: center;
  display: flex;
  gap: var(--tgp-card-gap);
  justify-content: center;
}

.review-name {
  font-size: var(--wp--preset--font-size--base);
}

@media (max-width: 768px) {
  .reviews {
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30) !important;
  }

  .reviews-grid {
    gap: var(--tgp-card-gap);
    grid-template-columns: 1fr;
  }

  .review-card:nth-child(2) {
    transform: none;
  }

  .review-card:nth-child(2):hover {
    transform: translateY(-3px);
  }
}

/* The reviews page's post_content is intentionally empty (the raw review
   wall was cleared 2026-07-03; the styled template cards carry the content),
   but the template's page-body wrapper still pads out a blank white band.
   Collapse it only while it renders no blocks — content added in the editor
   later brings the band back automatically. */
.tgp-reviews-page .tgp-page-body:not(:has(*)) {
  display: none;
}

.tgp-reviews-wall {
  color: var(--wp--preset--color--base);
  overflow: hidden;
  position: relative;
}

.tgp-reviews-wall::before {
  background: var(--gradient-rainbow-h);
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.tgp-reviews-wall__inner {
  position: relative;
  z-index: 1;
}

.tgp-reviews-wall__header {
  margin-inline: auto;
  text-align: center;
}

.tgp-reviews-wall__intro,
.tgp-reviews-wall__count {
  color: var(--wp--preset--color--white-overlay-85);
  line-height: 1.7;
}

.tgp-reviews-wall__rating {
  align-items: center;
}

.tgp-reviews-wall__stars,
.tgp-review-wall-card__stars {
  color: var(--wp--preset--color--accent-4);
  letter-spacing: 0.12em;
  margin: 0;
}

.tgp-reviews-wall__grid {
  display: grid;
  gap: var(--tgp-card-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tgp-review-wall-card {
  backdrop-filter: blur(8px);
  background: rgb(255 255 255 / 0.07);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--tgp-card-radius);
  box-shadow: var(--tgp-elev-2);
  min-height: 100%;
  position: relative;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-lift);
}

.tgp-review-wall-card::before {
  background: var(--gradient-rainbow-h);
  border-radius: var(--tgp-card-radius) var(--tgp-card-radius) 0 0;
  content: "";
  height: 4px;
  left: -1px;
  position: absolute;
  right: -1px;
  top: -1px;
}

.tgp-review-wall-card:hover {
  border-color: rgb(255 255 255 / 0.24);
  transform: translateY(-4px);
}

.tgp-review-wall-card--featured {
  background: rgb(255 255 255 / 0.1);
}

.tgp-review-wall-card__quote {
  color: var(--wp--preset--color--white-overlay-85);
  line-height: 1.75;
  margin: 0;
}

.tgp-review-wall-card__author {
  align-items: baseline;
}

.tgp-review-wall-card__name {
  color: var(--wp--preset--color--base);
  font-weight: 800;
  margin: 0;
}

.tgp-review-wall-card__source {
  color: var(--wp--preset--color--white-overlay-65);
  font-weight: 700;
  margin: 0;
}

/* Coupons strip
   -------------------------------------------------------------------------- */
.coupons {
  background: var(--wp--preset--gradient--band-gator);
  position: relative;
}

.coupons-inner {
  margin: 0 auto;
  max-width: var(--wp--style--global--wide-size);
  padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
  text-align: center;
}

.coupons-headline {
  margin-bottom: var(--wp--preset--spacing--50);
  text-shadow: 0 2px 8px rgb(0 0 0 / 0.2);
}

.coupons-grid {
  display: grid;
  gap: var(--wp--preset--spacing--40);
  grid-template-columns: repeat(3, 1fr);
}

.coupon-card {
  background: var(--tgp-dyed-card);
  border: 2px dashed rgb(255 255 255 / 0.25);
  border-radius: var(--tgp-card-radius);
  padding: var(--tgp-card-padding);
  position: relative;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}

.coupon-card:hover {
  background: var(--tgp-dyed-card-hover);
  border-color: rgb(255 255 255 / 0.5);
}

.coupon-badge {
  animation: hero-gradientShift 8s ease infinite;
  background: var(--gradient-rainbow);
  background-size: 300% 300%;
  border-radius: 100px;
  display: inline-block;
  margin-bottom: var(--wp--preset--spacing--30);
  padding: 4px var(--wp--preset--spacing--30);
}

.coupon-title {
  margin-bottom: var(--wp--preset--spacing--20);
}

.coupon-detail {
  margin-bottom: var(--wp--preset--spacing--20);
}

.coupon-offer {
  margin-bottom: var(--wp--preset--spacing--30);
}

.coupon-cta .wp-block-button__link {
  border: 1px solid rgb(255 255 255 / 0.4);
  border-radius: 100px;
  color: var(--wp--preset--color--base);
  display: inline-block;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
  text-decoration: none;
  text-transform: uppercase;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.coupon-cta:hover .wp-block-button__link {
  background: rgb(255 255 255 / 0.15) !important;
  border-color: rgb(255 255 255 / 0.7);
}

.coupon-fineprint {
  margin: var(--wp--preset--spacing--40) auto 0;
  max-width: 42rem;
  opacity: 0.85;
}

.coupons-grid--1 {
  grid-template-columns: minmax(0, 22rem);
  justify-content: center;
}

.coupons-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-inline: auto;
  max-width: 48rem;
}

@media (max-width: 768px) {
  .coupons-inner {
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
  }

  .coupons-grid {
    gap: var(--tgp-card-gap);
    grid-template-columns: 1fr;
  }
}

/* Why choose us
   -------------------------------------------------------------------------- */
.why-us {
  background: var(--wp--preset--gradient--band-gator);
  position: relative;
}

.why-us::before {
  background: radial-gradient(ellipse 80% 60% at 20% 80%, rgb(var(--tgp-brand-blue-rgb) / 0.15) 0%, transparent 60%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.why-us-inner {
  align-items: start;
  display: grid;
  gap: var(--wp--preset--spacing--60);
  grid-template-columns: 1fr 1fr;
  margin: 0 auto;
  max-width: var(--wp--style--global--wide-size);
  position: relative;
  z-index: 2;
}

.why-us-left .section-eyebrow,
.why-us-left .section-headline {
  text-align: left;
}

.why-us-text {
  margin-bottom: var(--wp--preset--spacing--40);
}

.why-us-values {
  display: flex;
  flex-direction: column;
  gap: var(--tgp-card-gap);
}

.value-item {
  align-items: flex-start;
  background: var(--tgp-dyed-card);
  border: 1px solid rgb(255 255 255 / 0.06);
  border-radius: var(--tgp-card-radius);
  display: flex;
  gap: var(--tgp-card-gap);
  padding: var(--tgp-card-padding-sm);
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.value-item:hover {
  background: var(--tgp-dyed-card-hover);
  border-color: rgb(255 255 255 / 0.22);
}

.value-marker {
  flex-shrink: 0;
}

.value-title {
  margin-bottom: 4px;
}

.service-areas {
  border-top: 1px solid rgb(255 255 255 / 0.1);
  margin: var(--wp--preset--spacing--50) auto 0;
  max-width: var(--wp--style--global--wide-size);
  padding: var(--tgp-card-padding);
  position: relative;
  text-align: center;
  z-index: 2;
}

.service-areas-label {
  margin-bottom: var(--wp--preset--spacing--20);
}

/* Service-area names as chips instead of a dry middot-separated line: reads as
   an at-a-glance coverage map and matches the chip treatment on the area pages.
   Sits on the dark why-us band, so the pills are light-on-dark. */
.service-areas-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: var(--wp--preset--spacing--20);
}

.tgp-area-chip {
  background: rgb(255 255 255 / 0.07);
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 100px;
  color: var(--wp--preset--color--white-overlay-85);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
  line-height: 1.2;
  padding: 0.4rem 0.85rem;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.tgp-area-chip:hover {
  background: rgb(255 255 255 / 0.13);
  border-color: rgb(255 255 255 / 0.3);
}

/* The "All of Duval County" catch-all reads as the emphasis chip. */
.tgp-area-chip--all {
  background: rgb(var(--tgp-brand-blue-rgb) / 0.22);
  border-color: rgb(var(--tgp-brand-blue-rgb) / 0.45);
  color: var(--wp--preset--color--base);
  font-weight: 600;
}

@media (max-width: 1024px) {
  .why-us-inner {
    gap: var(--wp--preset--spacing--50);
    grid-template-columns: 1fr;
  }

  .why-us-left .section-eyebrow,
  .why-us-left .section-headline,
  .why-us-text {
    text-align: center;
  }

  .why-us-left .wp-block-button.btn-primary {
    margin: 0 auto;
    width: fit-content;
  }

  .why-us-left .wp-block-button.btn-primary .wp-block-button__link {
    display: block;
  }
}

@media (max-width: 480px) {
  .why-us {
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30) !important;
  }
}

/* About intro
   -------------------------------------------------------------------------- */
.about-intro {
  background: var(--wp--preset--color--base-2);
}

.about-intro-inner {
  align-items: center;
  display: grid;
  gap: var(--wp--preset--spacing--60);
  grid-template-columns: 1.2fr 0.8fr;
  margin: 0 auto;
  max-width: var(--wp--style--global--wide-size);
}

.about-intro-content .section-eyebrow,
.about-intro-content .section-headline {
  text-align: left;
}

.about-text {
  font-size: var(--wp--preset--font-size--base);
  margin-bottom: var(--wp--preset--spacing--30);
}

.about-intro-visual {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--40);
}

.about-card-stack {
  display: grid;
  gap: var(--tgp-card-gap);
  grid-template-columns: repeat(3, 1fr);
}

.about-stat-card {
  background: var(--wp--preset--color--base);
  border: 1px solid rgb(var(--tgp-brand-blue-rgb) / 0.1);
  border-radius: var(--tgp-card-radius);
  padding: var(--tgp-card-padding-sm);
  text-align: center;
  transition: transform var(--dur-base) var(--ease-lift);
}

.about-stat-card:hover {
  transform: translateY(-3px);
}

.about-stat-number {
  display: block;
  margin-bottom: 4px;
}

.about-bear-container {
  aspect-ratio: 4 / 3;
  background-color: rgb(var(--tgp-brand-blue-rgb) / 0.05);
  border-radius: 20px;
  overflow: hidden;
  width: 100%;
}

@media (max-width: 1024px) {
  .about-intro-inner {
    gap: var(--wp--preset--spacing--50);
    grid-template-columns: 1fr;
  }

  .about-intro-content,
  .about-intro-content .section-eyebrow,
  .about-intro-content .section-headline {
    text-align: center;
  }

  .about-intro-content .wp-block-button.btn-primary {
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .about-intro {
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30) !important;
  }

  .about-card-stack {
    grid-template-columns: 1fr;
  }
}

/* Services grid
   -------------------------------------------------------------------------- */
.services {
  background: var(--wp--preset--color--base-2);
}

.services-inner {
  margin: 0 auto;
  max-width: var(--wp--style--global--wide-size);
}

.services-header {
  margin-bottom: var(--wp--preset--spacing--40);
}

.services-grid {
  display: grid;
  gap: var(--wp--preset--spacing--20);
  grid-template-columns: repeat(4, 1fr);
}

.service-card {
  align-items: center;
  text-align: center;
  background: var(--wp--preset--color--base);
  border: 1px solid rgb(var(--tgp-brand-blue-rgb) / 0.08);
  border-radius: var(--tgp-card-radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--tgp-card-padding-sm);
  position: relative;
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-lift), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.service-card::before {
  background: var(--gradient-rainbow);
  content: "";
  height: 3px;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.service-card:hover {
  border-color: rgb(var(--tgp-brand-blue-rgb) / 0.2);
  box-shadow: 0 12px 40px rgb(var(--tgp-brand-blue-rgb) / 0.12);
  transform: translateY(-4px);
}

.service-card:hover::before {
  opacity: 1;
}

.service-icon {
  background-color: var(--wp--preset--color--accent-1);
  display: block;
  height: 40px;
  margin-bottom: var(--wp--preset--spacing--20);
  -webkit-mask-image: var(--service-icon-mask);
  mask-image: var(--service-icon-mask);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color var(--dur-fast) var(--ease-out);
  width: 40px;
}

.service-card:hover .service-icon {
  background-color: var(--wp--preset--color--accent-2);
}

.service-icon--drain {
  --service-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27currentColor%27%3E%3Cpath%20d%3D%27M12%202C6.48%202%202%206.48%202%2012s4.48%2010%2010%2010%2010-4.48%2010-10S17.52%202%2012%202zm0%2018c-4.42%200-8-3.58-8-8s3.58-8%208-8%208%203.58%208%208-3.58%208-8%208zm-1-13h2v6h-2zm0%208h2v2h-2z%27%2F%3E%3C%2Fsvg%3E");
}

.service-icon--heater {
  --service-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27currentColor%27%3E%3Cpath%20d%3D%27M12%2012.9a9%209%200%200%200-9%209h2c0-3.87%203.13-7%207-7s7%203.13%207%207h2a9%209%200%200%200-9-9zm0-4.7A13.65%2013.65%200%200%200%200%2021.9h2.05A11.66%2011.66%200%200%201%2012%2010.2a11.66%2011.66%200%200%201%209.95%2011.7H24A13.65%2013.65%200%200%200%2012%208.2zm0%209.4a4.5%204.5%200%200%200-4.5%204.5h2a2.5%202.5%200%200%201%205%200h2a4.5%204.5%200%200%200-4.5-4.5zM13%203h-2v7h2V3z%27%2F%3E%3C%2Fsvg%3E");
}

.service-icon--sewer {
  --service-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27currentColor%27%3E%3Cpath%20d%3D%27M19%2012h-2v3h-3v2h5v-5zM7%209h3V7H5v5h2V9zm14-6H3c-1.1%200-2%20.9-2%202v14c0%201.1.9%202%202%202h18c1.1%200%202-.9%202-2V5c0-1.1-.9-2-2-2zm0%2016.01H3V4.99h18v14.02z%27%2F%3E%3C%2Fsvg%3E");
}

.service-icon--leak {
  --service-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27currentColor%27%3E%3Cpath%20d%3D%27M12%202c-5.33%204.55-8%208.48-8%2011.8%200%204.98%203.8%208.2%208%208.2s8-3.22%208-8.2c0-3.32-2.67-7.25-8-11.8zm0%2018c-3.35%200-6-2.57-6-6.2%200-2.34%201.95-5.44%206-9.14%204.05%203.7%206%206.79%206%209.14%200%203.63-2.65%206.2-6%206.2zm-4.17-6c.37%200%20.67.26.74.62.41%202.22%202.28%202.98%203.64%202.87.43-.02.79.32.79.75%200%20.4-.32.73-.72.75-2.13.13-4.62-1.09-5.19-4.12a.75.75%200%2001.74-.87z%27%2F%3E%3C%2Fsvg%3E");
}

.service-icon--waterline {
  --service-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27currentColor%27%3E%3Cpath%20d%3D%27M17%2016.99c-1.35%200-2.2.42-2.95.8-.65.33-1.18.6-2.05.6-.9%200-1.4-.25-2.05-.6-.75-.38-1.57-.8-2.95-.8s-2.2.42-2.95.8c-.65.33-1.18.6-2.05.6v1.95c1.35%200%202.2-.42%202.95-.8.65-.33%201.18-.6%202.05-.6.9%200%201.4.25%202.05.6.75.38%201.57.8%202.95.8s2.2-.42%202.95-.8c.65-.33%201.18-.6%202.05-.6v-1.95c-.9%200-1.4.25-2.05.6-.75.38-1.6.8-2.95.8zm0-4.45c-1.35%200-2.2.43-2.95.8-.65.32-1.18.6-2.05.6-.9%200-1.4-.25-2.05-.6-.75-.38-1.57-.8-2.95-.8s-2.2.43-2.95.8c-.65.32-1.18.6-2.05.6v1.95c1.35%200%202.2-.43%202.95-.8.65-.32%201.18-.6%202.05-.6.9%200%201.4.25%202.05.6.75.38%201.57.8%202.95.8s2.2-.43%202.95-.8c.65-.32%201.18-.6%202.05-.6v-1.95c-.9%200-1.4.25-2.05.6-.75.38-1.6.8-2.95.8zm2.95-8.08c-.75-.38-1.57-.8-2.95-.8s-2.2.42-2.95.8c-.65.32-1.18.6-2.05.6-.9%200-1.4-.25-2.05-.6C7.2%204.04%206.35%203.62%205%203.62s-2.2.42-2.95.8c-.65.32-1.18.6-2.05.6v1.93c1.35%200%202.2-.43%202.95-.8.65-.33%201.18-.6%202.05-.6.9%200%201.4.25%202.05.6.75.38%201.57.8%202.95.8s2.2-.43%202.95-.8c.65-.33%201.18-.6%202.05-.6v-1.93c-.9%200-1.4.25-2.05.6z%27%2F%3E%3C%2Fsvg%3E");
}

.service-icon--residential {
  --service-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27currentColor%27%3E%3Cpath%20d%3D%27M10%2020v-6h4v6h5v-8h3L12%203%202%2012h3v8z%27%2F%3E%3C%2Fsvg%3E");
}

.service-icon--commercial {
  --service-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27currentColor%27%3E%3Cpath%20d%3D%27M12%207V3H2v18h20V7H12zM6%2019H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4%2012H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10%2012h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0%204h-2v2h2v-2z%27%2F%3E%3C%2Fsvg%3E");
}

.service-icon--filter {
  --service-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27currentColor%27%3E%3Cpath%20d%3D%27M4.25%205.61C6.27%208.2%2010%2013%2010%2013v6c0%20.55.45%201%201%201h2c.55%200%201-.45%201-1v-6s3.72-4.8%205.74-7.39A.998.998%200%200018.95%204H5.04c-.83%200-1.3.95-.79%201.61z%27%2F%3E%3C%2Fsvg%3E");
}

.service-name {
  margin-bottom: var(--wp--preset--spacing--20);
}

.service-desc {
  flex: 1;
}

.service-arrow {
  margin-top: var(--wp--preset--spacing--20);
  transition: transform var(--dur-fast) var(--ease-out);
}

.service-card:hover .service-arrow {
  transform: translateX(6px);
}

.services .section-eyebrow {
  margin-block-end: var(--wp--preset--spacing--20);
}

.services .section-headline {
  margin-block-end: var(--wp--preset--spacing--30);
}

.services .section-sub {
  margin-inline: auto;
}

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

@media (max-width: 480px) {
  .services {
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30) !important;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-card {
    align-items: flex-start;
    flex-direction: row;
    gap: var(--tgp-card-gap);
    padding: var(--tgp-card-padding-sm);
  }

  .service-icon {
    flex-shrink: 0;
    margin-bottom: 0;
  }

  .service-arrow {
    display: none;
  }
}

/* Homepage featured proof
   -------------------------------------------------------------------------- */
.tgp-home-featured-proof {
  color: var(--wp--preset--color--base);
  overflow: hidden;
  position: relative;
}

.tgp-home-featured-proof::before {
  background:
    linear-gradient(115deg, transparent 0 42%, rgb(255 255 255 / 0.08) 42% 43%, transparent 43% 100%),
    repeating-linear-gradient(135deg, rgb(255 255 255 / 0.04) 0 1px, transparent 1px 12px);
  content: "";
  inset: 0;
  opacity: 0.72;
  pointer-events: none;
  position: absolute;
}

.tgp-home-featured-proof__grid {
  align-items: stretch;
  position: relative;
  z-index: 1;
}

.tgp-home-featured-proof__primary,
.tgp-home-featured-proof__local {
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: var(--tgp-radius-sm);
  box-shadow: 0 22px 70px rgb(0 0 0 / 0.22);
  min-height: 100%;
  position: relative;
}

.tgp-home-featured-proof__primary::before,
.tgp-home-featured-proof__local::before {
  background: var(--gradient-rainbow-h);
  border-radius: var(--tgp-card-radius) var(--tgp-card-radius) 0 0;
  content: "";
  height: 5px;
  inset: 0 0 auto;
  position: absolute;
}

.tgp-home-featured-proof .section-eyebrow {
  color: var(--wp--preset--color--accent-2);
  text-align: left;
}

.tgp-home-featured-proof :where(h2, h3, p) {
  color: inherit;
}

.tgp-home-featured-proof .is-style-outline .wp-block-button__link {
  background: rgb(255 255 255 / 0.08);
  border-color: rgb(255 255 255 / 0.32);
  color: var(--wp--preset--color--base);
}

/* Old-to-new Jacksonville photo pair inside the proof panel; the figures come
   from the shared area-card renderer, restyled for the dark band. */
.tgp-home-featured-proof__photos .tgp-hub-card__media {
  aspect-ratio: 16 / 11;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: var(--tgp-radius-sm);
}

.tgp-home-featured-proof__stats {
  margin-top: var(--wp--preset--spacing--30);
}

.tgp-home-featured-proof__stat {
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: var(--tgp-card-radius);
}

.tgp-home-featured-proof__stat-value {
  color: var(--wp--preset--color--accent-2);
  font-family: var(--wp--preset--font-family--righteous);
  margin: 0;
}

.tgp-home-featured-proof__stat-label {
  color: var(--wp--preset--color--white-overlay-65);
  margin: 0;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .tgp-home-featured-proof__grid,
  .tgp-home-featured-proof__stats {
    grid-template-columns: 1fr;
  }
}

/* Backstage Pass membership
   -------------------------------------------------------------------------- */
.tgp-backstage-pass {
  overflow: hidden;
  position: relative;
}

.tgp-backstage-pass::before {
  background:
    radial-gradient(circle at 14% 20%, rgb(255 255 255 / 0.22), transparent 28%),
    radial-gradient(circle at 82% 78%, rgb(var(--tgp-ink-rgb) / 0.36), transparent 34%),
    repeating-linear-gradient(135deg, rgb(255 255 255 / 0.08) 0 1px, transparent 1px 13px);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.tgp-backstage-pass__inner {
  /* Panel padding via the shared token (fluid 40px mobile -> 64px desktop).
     Replaces the inline spacing|60 (56px mobile) that cramped the VIP band to
     ~229px of content on a 390px screen, and adopts the previously-unused
     --tgp-panel-padding so the panel rhythm has one source. */
  padding: var(--tgp-panel-padding);
  background: rgb(var(--tgp-ink-rgb) / 0.88);
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: var(--tgp-radius-sm);
  box-shadow: 0 28px 80px rgb(0 0 0 / 0.28);
  color: var(--wp--preset--color--base);
  position: relative;
  z-index: 1;
}

.tgp-backstage-pass .section-eyebrow {
  color: var(--wp--preset--color--accent-4);
  text-align: left;
}

.tgp-backstage-pass :where(h2, h3, p) {
  color: inherit;
}

.tgp-backstage-pass .is-style-outline .wp-block-button__link {
  background: rgb(255 255 255 / 0.08);
  border-color: rgb(255 255 255 / 0.32);
  color: var(--wp--preset--color--base);
}

.tgp-backstage-pass__benefits {
  align-content: start;
}

.tgp-backstage-pass__benefit {
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: var(--tgp-card-radius);
  min-height: 100%;
  transition: background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-lift);
}

.tgp-backstage-pass__benefit:hover {
  background: rgb(255 255 255 / 0.12);
  transform: translateY(-3px);
}

.tgp-backstage-pass__benefit h3 {
  color: var(--wp--preset--color--accent-4);
}

.tgp-membership-comparison__header {
  margin-inline: auto;
}

.tgp-membership-comparison__grid {
  display: grid;
  gap: var(--tgp-card-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tgp-membership-comparison__card {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--tgp-card-radius);
  box-shadow: var(--tgp-card-shadow);
  min-height: 100%;
}

.tgp-membership-comparison__card--featured {
  background:
    linear-gradient(135deg, rgb(var(--tgp-brand-blue-rgb) / 0.12), rgb(232 98 42 / 0.12)),
    var(--wp--preset--color--base);
}

.tgp-membership-comparison__card h3 {
  color: var(--wp--preset--color--contrast-3);
  font-family: var(--wp--preset--font-family--righteous);
  line-height: 1.15;
}

.tgp-membership-comparison__card p {
  color: var(--wp--preset--color--body-text);
  line-height: 1.65;
}

.tgp-membership-comparison__metric {
  background: var(--gradient-rainbow-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  line-height: 1;
  margin: 0;
}

.tgp-membership-comparison__note {
  background: rgb(255 255 255 / 0.74);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--tgp-radius-sm);
  margin-inline: auto;
}

.tgp-membership-comparison__note p {
  color: var(--wp--preset--color--body-text);
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 900px) {
  .tgp-backstage-pass__inner,
  .tgp-backstage-pass__benefits,
  .tgp-membership-comparison__grid {
    grid-template-columns: 1fr;
  }
}

/* Global emergency CTA
   -------------------------------------------------------------------------- */
.tgp-emergency-cta {
  position: relative;
}

.tgp-emergency-cta__inner {
  background:
    radial-gradient(circle at 12% 18%, rgb(245 166 35 / 0.22), transparent 28%),
    radial-gradient(circle at 86% 88%, rgb(74 144 217 / 0.18), transparent 30%),
    linear-gradient(135deg, var(--wp--preset--color--contrast) 0%, var(--wp--preset--color--contrast-2) 100%);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--tgp-radius-sm);
  box-shadow: 0 22px 60px rgb(var(--tgp-ink-rgb) / 0.18);
  color: var(--wp--preset--color--base);
  overflow: hidden;
  position: relative;
}

.tgp-emergency-cta__inner::before {
  background: var(--gradient-rainbow-h);
  content: "";
  height: 5px;
  inset: 0 0 auto;
  position: absolute;
}

.tgp-emergency-cta__kicker {
  color: var(--wp--preset--color--accent-4);
  font-weight: 800;
  letter-spacing: 0.12em;
  margin: 0;
  text-transform: uppercase;
}

.tgp-emergency-cta :where(h2, p) {
  color: inherit;
}

.tgp-emergency-cta .is-style-outline .wp-block-button__link {
  background: rgb(255 255 255 / 0.08);
  border-color: rgb(255 255 255 / 0.34);
  color: var(--wp--preset--color--base);
}

@media (max-width: 760px) {
  .tgp-emergency-cta__inner {
    padding: var(--tgp-card-padding) !important;
  }

  .tgp-emergency-cta__buttons {
    justify-content: flex-start !important;
  }
}

.phone-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M6.62 10.79a15.053 15.053 0 006.59 6.59l2.2-2.2a1.003 1.003 0 011.01-.24c1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.1.31.03.66-.25 1.01l-2.2 2.21z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M6.62 10.79a15.053 15.053 0 006.59 6.59l2.2-2.2a1.003 1.003 0 011.01-.24c1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.1.31.03.66-.25 1.01l-2.2 2.21z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.phone-icon--lg {
  width: 24px;
  height: 24px;
}

/* Header
   -------------------------------------------------------------------------- */
html {
  scroll-padding-top: var(--site-header-height, 0px);
}

.tgp-site-header {
  --site-header-color: var(--wp--preset--color--base);
  --site-header-scrolled-background: var(--wp--preset--color--header-scrolled-background);
  --site-header-scrolled-color: var(--wp--preset--color--base);
  box-sizing: border-box;
  color: var(--site-header-color);
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  width: 100%;
  z-index: 1000;
}

body.admin-bar .tgp-site-header {
  top: var(--wp-admin--admin-bar--height, 32px);
}

.tgp-site-header,
.tgp-site-header:not(.is-scrolled) > * {
  background: transparent;
  background-color: transparent;
}

.tgp-site-header.is-scrolled,
body.has-solid-header-start .tgp-site-header {
  background: var(--site-header-scrolled-background);
  background-color: var(--site-header-scrolled-background);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.12), 0 10px 35px rgb(0 0 0 / 0.18);
  color: var(--site-header-scrolled-color);
}

body.has-solid-header-start .tgp-site-header {
  position: sticky;
}

.tgp-site-header :where(a:not(.wp-block-button__link), .wp-block-navigation-item__content) {
  color: inherit;
}

.tgp-site-header__inner {
  min-height: 80px;
}

.tgp-site-header__brand,
.tgp-site-header__logo {
  flex-shrink: 0;
}

.tgp-site-header__brand {
  flex-basis: 264px;
  width: 264px;
}

.tgp-site-header__logo {
  margin: 0;
  width: 100%;
}

.tgp-site-header__logo img {
  display: block;
  filter: drop-shadow(0 2px 8px rgb(0 0 0 / 0.22));
  height: auto;
  max-height: 64px;
  object-fit: contain;
  object-position: left center;
  width: 100%;
}

.tgp-site-header__actions {
  flex: 1 1 auto;
  gap: clamp(1rem, 1.8vw, var(--wp--preset--spacing--40)) !important;
  min-width: 0;
}

.tgp-site-header__navigation {
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tgp-site-header__navigation .wp-block-navigation__container {
  gap: clamp(1rem, 1.8vw, var(--wp--preset--spacing--40)) !important;
}

.tgp-site-header__navigation .wp-block-navigation-item__content {
  text-decoration: none;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
  transition: color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}

.tgp-site-header__navigation .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--base);
}

.tgp-site-header__navigation .has-child .wp-block-navigation__submenu-container {
  backdrop-filter: blur(18px);
  background:
    radial-gradient(circle at 12% 18%, rgb(245 166 35 / 0.12), transparent 12rem),
    radial-gradient(circle at 88% 82%, rgb(var(--tgp-brand-blue-rgb) / 0.16), transparent 14rem),
    rgb(var(--tgp-ink-rgb) / 0.96);
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--tgp-radius-sm);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.28);
  color: var(--wp--preset--color--base);
  gap: 0;
  min-width: 260px;
  overflow: hidden;
  padding: var(--wp--preset--spacing--20);
}

.tgp-site-header__navigation .has-child .wp-block-navigation__submenu-container::before {
  background: var(--gradient-rainbow-h);
  content: "";
  height: 4px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.tgp-site-header__navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  border-radius: 6px;
  color: var(--wp--preset--color--white-overlay-85);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  letter-spacing: 0;
  padding: 0.72rem 0.85rem;
  text-shadow: none;
  text-transform: none;
}

.tgp-site-header__navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: rgb(255 255 255 / 0.09);
  color: var(--wp--preset--color--base);
}

.tgp-site-header__submenu-link--all .wp-block-navigation-item__content {
  color: var(--wp--preset--color--accent-4) !important;
  font-weight: 900 !important;
}

/* -------------------------------------------------------------------------
   Ollie Menu Designer dropdowns + Locations mega menu (TGP brand treatment)
   ------------------------------------------------------------------------- */

/* Desktop dropdown/mega-menu panel: matches the dark-plum glass submenu look. */
@media (min-width: 600px) {
  .tgp-site-header__navigation .wp-block-ollie-mega-menu__menu-container {
    backdrop-filter: blur(18px);
    background:
      radial-gradient(circle at 12% 18%, rgb(245 166 35 / 0.12), transparent 14rem),
      radial-gradient(circle at 88% 82%, rgb(var(--tgp-brand-blue-rgb) / 0.16), transparent 16rem),
      rgb(var(--tgp-ink-rgb) / 0.97);
    border: 1px solid rgb(255 255 255 / 0.16);
    border-radius: var(--tgp-card-radius);
    box-shadow: 0 28px 70px rgb(0 0 0 / 0.34);
    color: var(--wp--preset--color--base);
    overflow: hidden;
  }

  .tgp-site-header__navigation .wp-block-ollie-mega-menu__menu-container::before {
    background: var(--gradient-rainbow-h);
    content: "";
    height: 4px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
  }
}


/* Desktop hover: keep megas inside the viewport, columns on one row, no clip. */
@media (min-width: 1025px) {
  .tgp-site-header__navigation .wp-block-ollie-mega-menu__menu-container {
    left: 0;
    margin-top: 0.5rem;
    max-width: calc(100vw - 2rem);
    top: 100%;
  }

  .tgp-mega-menu__columns,
  .tgp-dropdown-menu__columns {
    flex-wrap: nowrap;
  }

  .tgp-mega-menu__columns > .wp-block-column,
  .tgp-dropdown-menu__columns > .wp-block-column {
    flex: 1 1 0;
    min-width: 0;
  }

  .tgp-dropdown-menu,
  .tgp-mega-menu,
  .tgp-dropdown-menu__columns,
  .tgp-mega-menu__columns {
    box-sizing: border-box;
    max-width: 100%;
  }

  .tgp-dropdown-menu__links a,
  .tgp-mega-card__links a,
  .tgp-mega-card__title {
    overflow-wrap: break-word;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
    white-space: normal;
  }
}


@media (min-width: 1025px) {
  .tgp-site-header__inner {
    position: relative;
  }

  .tgp-site-header__megamenu--locations {
    position: static;
  }

  .tgp-site-header__megamenu--locations .wp-block-ollie-mega-menu__menu-container {
    left: 50% !important;
    max-width: min(1100px, calc(100vw - 3rem)) !important;
    right: auto;
    top: 100% !important;
    transform: translateX(-50%);
    width: min(1100px, calc(100vw - 3rem)) !important;
  }
}

@media (max-width: 1024px) {
  .tgp-mega-card__media {
    display: none;
  }
}

/* Shared inner typography for dropdown + mega menu content. */
.tgp-mega-menu,
.tgp-dropdown-menu {
  color: var(--wp--preset--color--base);
  text-transform: none;
  letter-spacing: 0;
}

.tgp-mega-menu__eyebrow {
  color: var(--wp--preset--color--accent-4);
  margin: 0 0 0.4rem;
}

/* Residential / Commercial column headers inside the services dropdown --
   quieter than the top-level eyebrow so they don't compete with it. */
.tgp-dropdown-menu__col-label {
  color: var(--wp--preset--color--white-overlay-85);
  margin: 0 0 0.35rem;
  opacity: 0.75;
}

.tgp-mega-menu__columns,
.tgp-dropdown-menu__columns {
  margin: 0;
}

.tgp-mega-menu__columns {
  gap: var(--tgp-card-gap);
}

/* Mega-menu area cards. */
.tgp-mega-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.tgp-mega-card__media {
  margin: 0;
}

.tgp-mega-card__media img {
  aspect-ratio: 16 / 10;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 10px;
  display: block;
  height: auto;
  object-fit: cover;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  width: 100%;
}

.tgp-mega-card__media a:hover img {
  box-shadow: 0 12px 28px rgb(0 0 0 / 0.35);
  transform: translateY(-2px);
}

.tgp-mega-card__title {
  /* Titles are paragraphs, not headings -- header chrome must stay out of the
     document outline (WCAG 1.3.1). Carry the heading font on the class. */
  font-family: var(--wp--preset--font-family--righteous);
  margin: 0;
}

.tgp-mega-card__title a {
  color: var(--wp--preset--color--base);
  font-weight: 800;
  text-decoration: none;
}

.tgp-mega-card__title a:hover {
  color: var(--wp--preset--color--accent-4);
}

/* Link lists shared by mega menu, dropdown, and mobile menu. */
.tgp-mega-card__links,
.tgp-dropdown-menu__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tgp-mega-card__links li,
.tgp-dropdown-menu__links li {
  margin: 0;
}

.tgp-mega-card__links a,
.tgp-dropdown-menu__links a {
  border-radius: 6px;
  color: var(--wp--preset--color--white-overlay-85);
  display: block;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  padding: 0.4rem 0.5rem;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.tgp-mega-card__links a:hover,
.tgp-mega-card__links a:focus-visible,
.tgp-dropdown-menu__links a:hover,
.tgp-dropdown-menu__links a:focus-visible {
  background: rgb(255 255 255 / 0.09);
  color: var(--wp--preset--color--base);
}

/* Keyboard focus indicator for the custom menus (WCAG 2.4.7 -- hover-only
   styling left keyboard users with no visible focus). */
.tgp-mega-card__links a:focus-visible,
.tgp-dropdown-menu__links a:focus-visible,
.tgp-mobile-menu__links a:focus-visible {
  outline: 2px solid var(--wp--preset--color--base);
  outline-offset: 2px;
  border-radius: 4px;
}

.tgp-dropdown-menu__link--all,
.tgp-mega-menu__footer-link a {
  color: var(--wp--preset--color--accent-4) !important;
  font-weight: 900 !important;
}

/* Emergency gets a priority treatment in both menus: bold + an urgency dot. */
.tgp-dropdown-menu__link--urgent,
.tgp-mobile-menu__link--urgent {
  color: var(--wp--preset--color--accent-2) !important;
  font-weight: 800 !important;
}

.tgp-dropdown-menu__link--urgent::before,
.tgp-mobile-menu__link--urgent::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: var(--wp--preset--color--accent-2);
  vertical-align: middle;
}

/* Residential / Commercial are the audience hubs — give them a brighter, bolder
   lead treatment so they read as the primary entry points above the individual
   services (replacing the red urgency the emergency link used to carry up top). */
.tgp-dropdown-menu__link--lead,
.tgp-mobile-menu__link--lead {
  color: var(--wp--preset--color--base) !important;
  font-weight: 800 !important;
}

.tgp-mega-menu__footer-link {
  margin: 0.6rem 0 0;
}

.tgp-mega-menu__footer-link a {
  text-decoration: none;
}

.tgp-mega-menu__footer-link a:hover {
  text-decoration: underline;
}

/* Mobile menu (Menu Designer replaces the core overlay content). */
.tgp-mobile-menu {
  color: var(--wp--preset--color--base);
}

.tgp-mobile-menu__title {
  font-family: var(--wp--preset--font-family--righteous);
  margin: 0;
}

.tgp-mobile-menu__title a {
  color: var(--wp--preset--color--base);
  text-decoration: none;
}

.tgp-mobile-menu__title a:hover {
  color: var(--wp--preset--color--accent-4);
}

.tgp-mobile-menu__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.tgp-mobile-menu__links a {
  color: var(--wp--preset--color--white-overlay-85);
  display: block;
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  padding: 0.45rem 0;
  text-decoration: none;
}

.tgp-mobile-menu__links a:hover,
.tgp-mobile-menu__links a:focus-visible {
  color: var(--wp--preset--color--base);
}

.tgp-mobile-menu__links--top a {
  font-size: var(--wp--preset--font-size--large);
  font-weight: 700;
}

.tgp-mobile-menu__link--all {
  color: var(--wp--preset--color--accent-4) !important;
  font-weight: 800 !important;
}

.tgp-mobile-menu__cta {
  margin-top: 0.5rem;
}

.tgp-site-header__phone .wp-block-button__link {
  align-items: center;
  backdrop-filter: blur(4px);
  background: rgb(255 255 255 / 0.2);
  border: 1px solid rgb(255 255 255 / 0.4);
  border-radius: 100px;
  color: var(--wp--preset--color--base);
  display: inline-flex;
  font-size: var(--wp--preset--font-size--base);
  font-weight: 700;
  gap: var(--wp--preset--spacing--20);
  letter-spacing: 0.02em;
  min-height: 44px;
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}

.tgp-site-header__phone .wp-block-button__link:hover {
  background: rgb(255 255 255 / 0.35);
  border-color: rgb(255 255 255 / 0.6);
}

.tgp-site-header .wp-block-navigation__responsive-container-open {
  align-items: center;
  /* Chip treatment (matches the phone pill): the bare 1.5px white bars are
     invisible over bright hero imagery and the tie-dye homepage sunburst. */
  backdrop-filter: blur(4px);
  background: rgb(255 255 255 / 0.2);
  border: 1px solid rgb(255 255 255 / 0.4);
  border-radius: 100px;
  color: inherit;
  flex-shrink: 0;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 6px;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.tgp-site-header .wp-block-navigation__responsive-container-open:hover {
  background: rgb(255 255 255 / 0.35);
  border-color: rgb(255 255 255 / 0.6);
}

.tgp-site-header__mobile-cta-link {
  display: none;
}

.tgp-site-header .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  font-size: var(--wp--preset--font-size--x-large);
  height: 100dvh;
  inset: 0;
  letter-spacing: 0;
  margin: 0;
  min-height: 100dvh;
  overflow: auto;
  padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
  position: fixed;
  text-transform: none;
  width: 100vw;
  z-index: 100001;
  --navigation-layout-justification-setting: center;
  --navigation-layout-justify: center;
}

.tgp-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
  min-height: 100%;
}

.tgp-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.tgp-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  min-height: 100%;
  width: 100%;
}

.tgp-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  color: var(--wp--preset--color--base);
  right: var(--wp--preset--spacing--40);
  top: var(--wp--preset--spacing--40);
}

.tgp-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  align-items: center;
  flex-direction: column;
  gap: var(--tgp-card-gap);
  justify-content: center;
  margin-inline: auto;
  min-height: calc(100dvh - var(--wp--preset--spacing--60) - var(--wp--preset--spacing--60));
  text-align: center;
}

.tgp-site-header .wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation__submenu-container {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  display: flex;
  gap: var(--wp--preset--spacing--20);
  margin-top: var(--wp--preset--spacing--20);
  min-width: 0;
  overflow: visible;
  padding: 0;
  position: static;
  text-align: center;
}

.tgp-site-header .wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation__submenu-container::before {
  display: none;
}

.tgp-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.tgp-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  color: var(--wp--preset--color--white-overlay-85);
  font-size: var(--wp--preset--font-size--medium);
  padding: 0.18rem 0;
}

.tgp-site-header .wp-block-navigation__responsive-container.is-menu-open .tgp-site-header__mobile-cta-link {
  display: flex;
}

.tgp-site-header .wp-block-navigation__responsive-container.is-menu-open .tgp-site-header__mobile-cta-link .wp-block-navigation-item__content {
  align-items: center;
  border-radius: 100px;
  display: inline-flex;
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 800;
  justify-content: center;
  min-height: 48px;
  min-width: min(280px, calc(100vw - var(--wp--preset--spacing--40) - var(--wp--preset--spacing--40)));
  padding: 12px var(--wp--preset--spacing--40);
}

.tgp-site-header .wp-block-navigation__responsive-container.is-menu-open .tgp-site-header__mobile-cta-link--call .wp-block-navigation-item__content {
  background: var(--gradient-rainbow);
  border: 1px solid rgb(255 255 255 / 0.35);
  box-shadow: var(--tgp-cta-veil), 0 12px 28px rgb(242 12 92 / 0.24);
  color: var(--wp--preset--color--base);
  text-shadow: var(--tgp-cta-text-shadow);
}

.tgp-site-header .wp-block-navigation__responsive-container.is-menu-open .tgp-site-header__mobile-cta-link--request .wp-block-navigation-item__content {
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.32);
  color: var(--wp--preset--color--base);
}

.tgp-mobile-cta {
  display: none;
}

/* Hamburger at tablet + phone. Core overlayMenu:"mobile" only flips at 600px,
   and its min-width:600px rules (.open:not(.always-shown){display:none} and
   .container:not(.hidden-by-default):not(.is-menu-open){display:block}) tie
   TGP's older 1024px selectors on specificity, so the desktop bar stayed up
   on tablet. These beat core.

   Raised 1024 -> 1320 (desktop half 1025 -> 1321). Measured, not guessed: the
   gap between the logo's right edge and the first nav item is -50px at 1201,
   +19px at 1280 and +54px at 1320, so the bar physically overlaps the logo
   until roughly 1258 and is still cramped at 1280. 1200 would have left the
   overlap in place across a common laptop range.

   1320 also clears the locations mega, a 1100px four-column panel the note
   below flags as clipping between 1100 and 1280. Both problems shared the same
   width range, and both now fall on the overlay side. */
@media (max-width: 1320px) {
  .tgp-site-header .tgp-site-header__navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open),
  .tgp-site-header .tgp-site-header__navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }

  .tgp-site-header .wp-block-navigation__responsive-container-open:not(.always-shown),
  .tgp-site-header .wp-block-navigation__responsive-container-open {
    display: inline-flex !important;
  }
}

@media (min-width: 1321px) {
  .tgp-site-header .wp-block-navigation__responsive-container-open:not(.always-shown),
  .tgp-site-header .wp-block-navigation__responsive-container-open {
    display: none !important;
  }

  .tgp-site-header .tgp-site-header__navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open),
  .tgp-site-header .tgp-site-header__navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
    background-color: inherit;
    display: block !important;
    position: relative;
    width: 100%;
    z-index: auto;
  }

  /* Locations mega is position:static so it can center on the header inner.
     The nav responsive container is position:relative above; that containing
     block is only as wide as the links, which clips a 1100px 4-col panel at
     1100–1280. Flatten ancestors and keep Services relative to its item. */
  .tgp-site-header__actions,
  .tgp-site-header .tgp-site-header__navigation,
  .tgp-site-header .tgp-site-header__navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open),
  .tgp-site-header .tgp-site-header__navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
    position: static;
  }

  .tgp-site-header__megamenu--services {
    position: relative;
  }

  /* WP core sets .wp-block-navigation-item { position: relative } and
     .wp-block-navigation__responsive-dialog { position: relative }. Those
     beat a single-class static rule, so the 1100px Areas panel stayed
     anchored to the Service Areas label and clipped the first column. */
  .tgp-site-header .wp-block-navigation__responsive-close,
  .tgp-site-header .wp-block-navigation__responsive-dialog,
  .tgp-site-header .wp-block-navigation__responsive-container-content,
  .tgp-site-header .wp-block-navigation__container {
    position: static;
  }

  .tgp-site-header .wp-block-navigation .tgp-site-header__megamenu--locations {
    position: static !important;
  }
}

@media (max-width: 768px) {
  .tgp-site-header__inner {
    min-height: 64px;
    padding-left: var(--wp--preset--spacing--30) !important;
    padding-right: var(--wp--preset--spacing--30) !important;
  }

  .tgp-site-header__brand {
    flex-basis: 176px;
    width: 176px;
  }

  .tgp-site-header__logo img {
    max-height: 52px;
  }

  .tgp-site-header__phone .wp-block-button__link {
    font-size: var(--wp--preset--font-size--small);
    min-height: 44px;
    padding: 8px var(--wp--preset--spacing--20);
  }

  body:not(.wp-admin) {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }

  .tgp-mobile-cta {
    background: rgb(var(--tgp-navy-rgb) / 0.92);
    border-top: 1px solid rgb(255 255 255 / 0.16);
    bottom: 0;
    box-shadow: 0 -16px 36px rgb(0 0 0 / 0.22);
    display: block;
    left: 0;
    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) calc(var(--wp--preset--spacing--20) + env(safe-area-inset-bottom, 0px));
    position: fixed;
    right: 0;
    z-index: 999;
  }

  .call-now-button,
  .tgp-service-cta,
  .tgp-spf {
    display: none !important;
  }

  body:has(.wp-block-navigation__responsive-container.is-menu-open) .tgp-mobile-cta {
    display: none;
  }

  .tgp-mobile-cta__buttons {
    gap: var(--wp--preset--spacing--20);
    margin-inline: auto;
    max-width: 420px;
  }

  /* Even 50/50 split. The block markup declares dimensions.width 50% on each
     button, but that lands on the inner .wp-block-button__link, which the rule
     below sets to width:100% -- so the halves have to be enforced on the flex
     children instead. min-width:0 stops the longer label from pushing its half
     wider than the other. */
  .tgp-mobile-cta__buttons > .wp-block-button {
    flex: 1 1 50%;
    min-width: 0;
  }

  .tgp-mobile-cta .wp-block-button__link {
    align-items: center;
    border-radius: 100px;
    display: inline-flex;
    font-size: var(--wp--preset--font-size--small);
    font-weight: 800;
    gap: var(--wp--preset--spacing--20);
    justify-content: center;
    min-height: 44px;
    padding: 10px var(--wp--preset--spacing--20);
    width: 100%;
  }

  /* Call is the action the business actually wants, so Request is deliberately
     quieter: no fill, a softer border and less weight. It stays a full 44px
     target and keeps white text on navy, so it is still comfortably legible --
     the de-emphasis is in weight and border, not in contrast, which is the part
     that would hurt accessibility. */
  .tgp-mobile-cta .is-style-outline .wp-block-button__link {
    background: transparent;
    border: 1px solid rgb(255 255 255 / 0.22);
    color: rgb(255 255 255 / 0.82);
    font-weight: 600;
  }
}

@media (max-width: 480px) {
  /* Phone-width header: the 176px brand box + hamburger + phone pill add up to
     ~440px, so the actions group slid UNDER the logo and the hamburger sat
     invisibly on top of the wordmark. Shrink all three until the row fits. */
  .tgp-site-header__inner {
    padding-left: var(--wp--preset--spacing--20) !important;
    padding-right: var(--wp--preset--spacing--20) !important;
  }

  .tgp-site-header__brand {
    flex-basis: 120px;
    width: 120px;
  }

  .tgp-site-header__logo img {
    max-height: 40px;
  }

  .tgp-site-header__actions {
    gap: 0.5rem !important;
  }

  .tgp-site-header__phone .wp-block-button__link {
    font-size: 0.8rem;
    gap: 6px;
    padding: 8px 12px;
  }
}

/* Contact section
   -------------------------------------------------------------------------- */
.tgp-contact-section {
  overflow: hidden;
  position: relative;
}

/* Van photo behind the contact CTA.
   It rides on this pseudo-element rather than the section's own background
   because the block carries .has-tie-dye-flow-gradient-background, and
   WordPress emits preset background classes with !important -- no selector
   specificity beats that, so a rule on the element itself never paints.
   __inner is position:relative, so content still stacks above this layer.

   The navy scrim is not decoration: white text over a bright tie-dye van wrap
   fails contrast badly. 0.82 keeps the copy legible while the van reads
   clearly underneath. */
.tgp-contact-section::before {
  background:
    radial-gradient(ellipse 60% 50% at 80% 80%, rgb(0 0 0 / 0.2) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 20% 20%, rgb(0 0 0 / 0.15) 0%, transparent 50%),
    linear-gradient(rgb(0 21 101 / 0.82), rgb(0 21 101 / 0.82)),
    url("../images/real/van-banner-bg.webp") center / cover no-repeat;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

@media (max-width: 768px) {
  /* The van sits right-of-centre in frame; a centred crop on a narrow
     viewport loses the wrap and the logo entirely. */
  .tgp-contact-section::before {
    background-position: center, center, center, 32% center;
  }
}

.tgp-contact-section__inner {
  display: grid;
  gap: var(--wp--preset--spacing--60);
  grid-template-columns: minmax(0, 1fr) minmax(320px, 1.2fr);
  margin-inline: auto;
  max-width: 1140px;
  position: relative;
  z-index: 1;
}

.tgp-contact-section__info .section-eyebrow,
.tgp-contact-section__info .section-headline {
  text-align: left;
}

.tgp-contact-section__phone .wp-block-button__link {
  align-items: center;
  backdrop-filter: blur(4px);
  background: rgb(255 255 255 / 0.15);
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: 16px;
  color: var(--wp--preset--color--base);
  display: inline-flex;
  font-family: var(--wp--preset--font-family--righteous);
  font-size: var(--wp--preset--font-size--xx-large);
  gap: var(--tgp-card-gap);
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.tgp-contact-section__phone .wp-block-button__link:hover {
  background: rgb(255 255 255 / 0.25);
}

.tgp-contact-section__form-card {
  border-radius: var(--tgp-radius-lg);
  box-shadow: 0 20px 60px rgb(0 0 0 / 0.2);
}

.tgp-contact-section__form-card .gform_wrapper,
.tgp-service-quote__form-card .gform_wrapper,
.tgp-single-post__newsletter-form .gform_wrapper,
.tgp-blog-sidebar-capture .gform_wrapper {
  margin-block-start: var(--wp--preset--spacing--30);
}

.tgp-contact-section__form-card .gform_fields,
.tgp-service-quote__form-card .gform_fields,
.tgp-single-post__newsletter-form .gform_fields,
.tgp-blog-sidebar-capture .gform_fields {
  row-gap: var(--tgp-card-gap);
}

/* Gravity Forms overrides.
   These were written as `:is(card) :where(target)`. :where() contributes zero
   specificity, so the whole selector scored 0,1,0 and lost outright to GF 3.0's
   own framework CSS -- every one of these rules was dead. Measured on /contact/
   at 390px before the fix: submit button 156.98x38px with a 3px radius, against
   the 100%-wide, 52px, 100px-radius, uppercase treatment asked for below. 38px
   is under the 44px minimum touch target, on the primary lead-capture control.
   :is() on the target raises it to 0,2,0 which reaches. Do not put :where() back. */
:is(.tgp-contact-section__form-card, .tgp-service-quote__form-card, .tgp-hiring-application__form-card, .tgp-single-post__newsletter-form, .tgp-blog-sidebar-capture) :is(.gfield_label, .gform-field-label) {
  color: var(--wp--preset--color--contrast-3);
  font-family: var(--wp--preset--font-family--lexend-deca);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 800;
  letter-spacing: 0.03em;
}

:is(.tgp-contact-section__form-card, .tgp-service-quote__form-card, .tgp-hiring-application__form-card, .tgp-single-post__newsletter-form, .tgp-blog-sidebar-capture) :is(.gfield_required, .gfield_required_text) {
  color: var(--wp--preset--color--accent-2);
}

:is(.tgp-contact-section__form-card, .tgp-service-quote__form-card, .tgp-hiring-application__form-card, .tgp-single-post__newsletter-form, .tgp-blog-sidebar-capture) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select, textarea) {
  background: var(--wp--preset--color--base-2);
  border: 1px solid rgb(var(--tgp-brand-blue-rgb) / 0.15);
  border-radius: var(--tgp-card-radius);
  box-shadow: none;
  color: var(--wp--preset--color--contrast-3);
  font-family: var(--wp--preset--font-family--lexend-deca);
  font-size: var(--wp--preset--font-size--base);
  min-height: 48px;
  padding: var(--tgp-card-padding-sm);
}

:is(.tgp-contact-section__form-card, .tgp-service-quote__form-card, .tgp-hiring-application__form-card, .tgp-single-post__newsletter-form, .tgp-blog-sidebar-capture) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select, textarea):focus {
  border-color: var(--wp--preset--color--accent-1);
  box-shadow: 0 0 0 3px rgb(var(--tgp-brand-blue-rgb) / 0.1);
  outline: none;
}

:is(.tgp-contact-section__form-card, .tgp-service-quote__form-card, .tgp-hiring-application__form-card, .tgp-single-post__newsletter-form, .tgp-blog-sidebar-capture) textarea {
  min-height: 120px;
}

/* Selects need their own rule for two reasons.
   1. Gravity Forms sets appearance:none, which removes the native dropdown
      arrow. Nothing replaced it, so the control had no affordance at all --
      it read as one more text field sitting between Phone Number and Message.
   2. GF's framework also sets line-height:38px and overflow:clip. Added to the
      16px padding above inside a 48px box that is 70px of content in 48px, so
      the placeholder was clipped to a sliver of its ascenders.
   Normalising line-height and letting the box grow fixes the clipping; the
   inline chevron restores the affordance. */
:is(.tgp-contact-section__form-card, .tgp-service-quote__form-card, .tgp-hiring-application__form-card, .tgp-single-post__newsletter-form, .tgp-blog-sidebar-capture) .gform-theme.gform-theme--framework.gform_wrapper select, :is(.tgp-contact-section__form-card, .tgp-service-quote__form-card, .tgp-hiring-application__form-card, .tgp-single-post__newsletter-form, .tgp-blog-sidebar-capture) select {
  appearance: none;
  -webkit-appearance: none;
  line-height: normal;
  height: auto;
  overflow: visible;
  cursor: pointer;
  padding-right: calc(var(--tgp-card-padding-sm) + 1.5rem);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23001565' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--tgp-card-padding-sm) center;
  background-size: 0.75rem auto;
}

:is(.tgp-contact-section__form-card, .tgp-service-quote__form-card, .tgp-hiring-application__form-card, .tgp-single-post__newsletter-form, .tgp-blog-sidebar-capture) :is(.gform_validation_errors, .validation_message) {
  background: var(--wp--preset--color--highlight);
  border: 1px solid rgb(192 57 90 / 0.24);
  border-radius: var(--tgp-card-radius);
  color: var(--wp--preset--color--accent-2);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

:is(.tgp-contact-section__form-card, .tgp-service-quote__form-card, .tgp-hiring-application__form-card, .tgp-single-post__newsletter-form, .tgp-blog-sidebar-capture) :is(.gfield_error input, .gfield_error select, .gfield_error textarea) {
  border-color: var(--wp--preset--color--accent-2);
  box-shadow: 0 0 0 3px rgb(192 57 90 / 0.08);
}

:is(.tgp-contact-section__form-card, .tgp-service-quote__form-card, .tgp-hiring-application__form-card, .tgp-single-post__newsletter-form, .tgp-blog-sidebar-capture) :is(.gform_confirmation_message) {
  background: rgb(141 198 63 / 0.12);
  border: 1px solid rgb(141 198 63 / 0.28);
  border-radius: var(--tgp-card-radius);
  color: var(--wp--preset--color--contrast-3);
  font-weight: 800;
  padding: var(--tgp-card-padding-sm);
}

:is(.tgp-contact-section__form-card, .tgp-service-quote__form-card, .tgp-hiring-application__form-card, .tgp-single-post__newsletter-form, .tgp-blog-sidebar-capture) .gform-theme.gform-theme--framework.gform_wrapper :is(.gform_button, input[type="submit"], button[type="submit"]) {
  background: var(--gradient-rainbow);
  background-size: 300% 300%;
  border: 0;
  border-radius: 100px;
  box-shadow: var(--tgp-cta-veil), var(--tgp-btn-glow);
  text-shadow: var(--tgp-cta-text-shadow);
  color: var(--wp--preset--color--base);
  cursor: pointer;
  font-family: var(--wp--preset--font-family--lexend-deca);
  font-weight: 800;
  min-height: 52px;
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
  text-transform: uppercase;
  transition: box-shadow var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-lift);
  width: 100%;
}

:is(.tgp-contact-section__form-card, .tgp-service-quote__form-card, .tgp-hiring-application__form-card, .tgp-single-post__newsletter-form, .tgp-blog-sidebar-capture) .gform-theme.gform-theme--framework.gform_wrapper :is(.gform_button, input[type="submit"], button[type="submit"]):hover {
  box-shadow: var(--tgp-cta-veil), var(--tgp-btn-glow-hover);
  transform: translateY(-1px);
}

:is(.tgp-contact-section__form-card, .tgp-service-quote__form-card, .tgp-hiring-application__form-card, .tgp-single-post__newsletter-form, .tgp-blog-sidebar-capture) .gform-theme.gform-theme--framework.gform_wrapper :is(.gform_button, input[type="submit"], button[type="submit"]):disabled {
  cursor: wait;
  opacity: 0.65;
  transform: none;
}

.tgp-contact-routing__header {
  margin-inline: auto;
}

.tgp-contact-routing__grid {
  display: grid;
  gap: var(--wp--preset--spacing--25);
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.tgp-contact-routing__card {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--tgp-card-radius);
  box-shadow: var(--tgp-card-shadow);
  min-height: 100%;
  position: relative;
}

.tgp-contact-routing__card::before {
  background: var(--gradient-rainbow-h);
  border-radius: var(--tgp-card-radius) var(--tgp-card-radius) 0 0;
  content: "";
  height: 4px;
  inset: -1px -1px auto;
  position: absolute;
}

.tgp-contact-routing__card h3 {
  color: var(--wp--preset--color--contrast-3);
  font-family: var(--wp--preset--font-family--righteous);
  line-height: 1.15;
}

.tgp-contact-routing__card p {
  color: var(--wp--preset--color--body-text);
  line-height: 1.6;
}

.tgp-contact-routing__band {
  background:
    radial-gradient(circle at 12% 12%, rgb(255 255 255 / 0.18), transparent 28%),
    linear-gradient(135deg, var(--wp--preset--color--contrast-3), var(--tgp-plum-mid) 70%, var(--tgp-plum-deep));
  border-radius: var(--tgp-radius-sm);
  color: var(--wp--preset--color--base);
}

.tgp-contact-routing__band h3 {
  color: var(--wp--preset--color--base);
  font-family: var(--wp--preset--font-family--righteous);
}

.tgp-contact-routing__band p {
  color: rgb(255 255 255 / 0.78);
  line-height: 1.7;
}

/* .tgp-standard-page__content: prose treatment for the standard content
   wrapper. NOTE (2026-06-20): page.html + page-griffin.html migrated OFF this
   class to the .tgp-page-body centered system (they were left-aligned while
   their editor preview centered — the one real editor/FE mismatch). This class
   is STILL used by page-community / page-hiring / page-extended-service-areas,
   which are centered via the :is(...) group rule below and rely on this for
   prose color/typography — so it stays. */
.tgp-standard-page__content {
  background:
    radial-gradient(circle at 8% 18%, rgb(var(--tgp-brand-blue-rgb) / 0.07), transparent 26rem),
    radial-gradient(circle at 92% 70%, rgb(232 98 42 / 0.07), transparent 24rem),
    var(--wp--preset--color--base);
}

.tgp-standard-page__content .wp-block-post-content {
  color: var(--wp--preset--color--body-text);
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.75;
}

.tgp-standard-page__content .wp-block-post-content > * + * {
  margin-block-start: var(--wp--preset--spacing--30);
}

.tgp-standard-page__content .wp-block-post-content :where(h2, h3, h4) {
  color: var(--wp--preset--color--contrast-3);
  font-family: var(--wp--preset--font-family--righteous);
  line-height: 1.15;
  margin-block-start: var(--wp--preset--spacing--50);
}

.tgp-standard-page__content .wp-block-post-content :where(a) {
  color: var(--wp--preset--color--primary);
  font-weight: 800;
}

.tgp-griffin-credit {
  position: relative;
}

.tgp-griffin-credit::before {
  background: var(--gradient-rainbow-h);
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.tgp-griffin-credit__inner {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--tgp-radius-lg);
  box-shadow: var(--tgp-elev-panel);
}

.tgp-griffin-credit__copy h2,
.tgp-griffin-credit__card h3 {
  color: var(--wp--preset--color--contrast-3);
  font-family: var(--wp--preset--font-family--righteous);
  margin: 0;
}

.tgp-griffin-credit__copy p {
  color: var(--wp--preset--color--body-text);
}

.tgp-griffin-credit__card {
  background:
    linear-gradient(135deg, rgb(var(--tgp-brand-blue-rgb) / 0.12), rgb(232 98 42 / 0.12)),
    var(--wp--preset--color--base-2);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--tgp-card-radius);
}

.tgp-griffin-credit__metric {
  background: var(--gradient-rainbow-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  margin: 0;
}

.tgp-griffin-options__header {
  margin-inline: auto;
}

.tgp-griffin-options__grid {
  display: grid;
  gap: var(--tgp-card-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tgp-griffin-options__card {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--tgp-card-radius);
  box-shadow: var(--tgp-card-shadow);
  min-height: 100%;
}

.tgp-griffin-options__card--gold {
  background:
    linear-gradient(135deg, rgb(245 166 35 / 0.14), rgb(232 98 42 / 0.1)),
    var(--wp--preset--color--base);
}

.tgp-griffin-options__card--silver {
  background:
    linear-gradient(135deg, rgb(74 144 217 / 0.12), rgb(var(--tgp-brand-blue-rgb) / 0.1)),
    var(--wp--preset--color--base);
}

.tgp-griffin-options__card h3 {
  color: var(--wp--preset--color--contrast-3);
  font-family: var(--wp--preset--font-family--righteous);
  line-height: 1.14;
}

.tgp-griffin-options__card :where(p, li) {
  color: var(--wp--preset--color--body-text);
  line-height: 1.65;
}

.tgp-griffin-options__price {
  background: var(--gradient-rainbow-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  line-height: 1;
  margin: 0;
}

.tgp-extended-area-intro,
.tgp-community-impact {
  color: var(--wp--preset--color--contrast-3);
  position: relative;
}

.tgp-extended-area-intro::before,
.tgp-community-impact::before {
  background: var(--gradient-rainbow-h);
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.tgp-purpose-panel {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--tgp-radius-lg);
  box-shadow: var(--tgp-elev-panel);
}

.tgp-purpose-panel__copy h2,
.tgp-purpose-card h3,
.tgp-community-impact__intro h2,
.tgp-impact-card h3 {
  color: var(--wp--preset--color--contrast-3);
  font-family: var(--wp--preset--font-family--righteous);
  margin: 0;
}

.tgp-purpose-panel__copy p,
.tgp-purpose-card p,
.tgp-community-impact__intro p,
.tgp-impact-card p {
  color: var(--wp--preset--color--body-text);
}

.tgp-purpose-card,
.tgp-impact-card {
  background:
    linear-gradient(135deg, rgb(var(--tgp-brand-blue-rgb) / 0.1), rgb(232 98 42 / 0.1)),
    var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--tgp-card-radius);
  box-shadow: var(--tgp-card-shadow);
}

.tgp-purpose-card__metric,
.tgp-impact-card__number {
  background: var(--gradient-rainbow-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  margin: 0;
}

.tgp-hiring-application {
  color: var(--wp--preset--color--base);
  position: relative;
}

.tgp-hiring-application::before {
  background: var(--gradient-rainbow-h);
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.tgp-hiring-application__copy h2,
.tgp-hiring-application__proof-item h3 {
  font-family: var(--wp--preset--font-family--righteous);
  margin: 0;
}

.tgp-hiring-application__proof {
  margin-top: var(--wp--preset--spacing--20);
}

.tgp-hiring-application__proof-item {
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: var(--tgp-card-radius);
  backdrop-filter: blur(8px);
}

.tgp-hiring-application__form-card {
  border-radius: var(--tgp-radius-lg);
  box-shadow: var(--tgp-elev-4);
}

.tgp-hiring-application__form-card h3 {
  font-family: var(--wp--preset--font-family--righteous);
  margin: 0;
}

.tgp-hiring-fit__header {
  margin-inline: auto;
}

.tgp-hiring-fit__grid {
  display: grid;
  gap: var(--tgp-card-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tgp-hiring-fit__card {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--tgp-card-radius);
  box-shadow: var(--tgp-card-shadow);
  min-height: 100%;
}

.tgp-hiring-fit__card--featured {
  background:
    linear-gradient(135deg, rgb(var(--tgp-brand-blue-rgb) / 0.12), rgb(232 98 42 / 0.12)),
    var(--wp--preset--color--base);
}

.tgp-hiring-fit__card h3 {
  color: var(--wp--preset--color--contrast-3);
  font-family: var(--wp--preset--font-family--righteous);
  line-height: 1.15;
}

.tgp-hiring-fit__card p {
  color: var(--wp--preset--color--body-text);
  line-height: 1.7;
}

@media (max-width: 1024px) {
  .tgp-contact-section__inner {
    grid-template-columns: 1fr;
  }

  .tgp-contact-routing__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tgp-griffin-credit__inner,
  .tgp-griffin-options__grid,
  .tgp-purpose-panel,
  .tgp-hiring-fit__grid,
  .tgp-hiring-application__inner {
    grid-template-columns: 1fr;
  }

  .tgp-contact-section__info .section-eyebrow,
  .tgp-contact-section__info .section-headline,
  .tgp-contact-section__info > p {
    text-align: center;
  }

  .tgp-contact-section__phone-wrap {
    justify-content: center;
  }

  .tgp-contact-section__details {
    align-items: center;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .tgp-contact-section__inner {
    padding-left: var(--wp--preset--spacing--30) !important;
    padding-right: var(--wp--preset--spacing--30) !important;
  }

  .tgp-contact-section__form-card {
    padding: var(--wp--preset--spacing--30) !important;
  }

  .tgp-griffin-credit__inner,
  .tgp-griffin-credit__card,
  .tgp-griffin-options__card,
  .tgp-purpose-panel,
  .tgp-purpose-card,
  .tgp-contact-routing__band,
  .tgp-membership-comparison__card,
  .tgp-hiring-fit__card,
  .tgp-hiring-application__form-card {
    padding: var(--wp--preset--spacing--30) !important;
  }

  .tgp-contact-routing__grid {
    grid-template-columns: 1fr;
  }

  .tgp-contact-section__phone .wp-block-button__link {
    font-size: var(--wp--preset--font-size--x-large);
    width: 100%;
  }
}

/* Service and location page shells
   -------------------------------------------------------------------------- */
.tgp-page-hero {
  background:
    radial-gradient(circle at 86% 18%, rgb(232 98 42 / 0.26), transparent 28rem),
    radial-gradient(circle at 10% 82%, rgb(74 144 217 / 0.22), transparent 26rem),
    linear-gradient(135deg, var(--wp--preset--color--contrast) 0%, var(--wp--preset--color--contrast-2) 100%);
  color: var(--wp--preset--color--base);
  overflow: hidden;
  position: relative;
}

.tgp-page-hero::after {
  background: var(--gradient-rainbow-h);
  bottom: 0;
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  right: 0;
  z-index: 3;
}

/* -------------------------------------------------------------------------
   Full-bleed cover hero: the page featured image fills the whole hero behind
   the copy, with a dark left-weighted scrim so white text stays legible.
   The image still comes from the editable contextual-image block (featured
   image -> smart fallback), so swapping a page's Featured Image restyles its
   entire hero.
   ------------------------------------------------------------------------- */
.tgp-page-hero--cover {
  isolation: isolate;
}

.tgp-page-hero--cover .tgp-page-hero__bg {
  inset: 0;
  position: absolute;
  z-index: 0;
  /* The hero section is is-layout-constrained, so WP caps every non-alignfull
     child at --wp--style--global--content-size and auto-centers it. On this
     absolutely-positioned bg that cap boxes the image to container width while
     the section's own gradient stays full-bleed. Release the cap so the cover
     image fills the section edge-to-edge like the background color does. */
  margin: 0;
  max-width: none;
}

.tgp-page-hero--cover .tgp-page-hero__bg .tgp-contextual-image,
.tgp-page-hero--cover .tgp-page-hero__bg .tgp-contextual-image a {
  height: 100%;
  width: 100%;
}

/* Heroes without a post context (e.g. the blog index) use a plain, editor-
   swappable image block as the cover photo instead of the contextual-image
   block; size it to fill the bg layer the same way. */
.tgp-page-hero--cover .tgp-page-hero__bg .wp-block-image {
  height: 100%;
  margin: 0;
  width: 100%;
}

/* Strip the boxed card treatment when the contextual image is the background. */
.tgp-page-hero--cover .tgp-page-hero__bg .tgp-contextual-image {
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.tgp-page-hero--cover .tgp-page-hero__bg .tgp-contextual-image::after {
  content: none;
}

.tgp-page-hero--cover .tgp-page-hero__bg img {
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
  /* Knock the photo back a touch so the screen-blend dye layer above has dark
     headroom to colour into. mix-blend screen only LIGHTENS, so on a bright
     featured image the tie-dye washes out -- this keeps the effect robust
     whatever Featured Image an editor swaps in. Saturate nudges the dye richer. */
  filter: brightness(0.85) saturate(1.08);
}

/* Tie-dye DYE layer — blends a saturated, tight-banded spectrum directly INTO
   the photo (mix-blend screen) so the image itself reads as tie-dyed rather
   than just lit from above. Weighted to the right so the left stays photographic
   under the navy scrim. This is the layer that delivers the actual tie-dye vibe;
   the ::before scrim only handles legibility on top. */
.tgp-page-hero--cover .tgp-page-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(42% 46% at 90% 16%, hsl(330 100% 60% / 0.98) 0%, transparent 55%),
    radial-gradient(38% 44% at 68% 6%,  hsl(292 95% 62% / 0.92) 0%, transparent 52%),
    radial-gradient(40% 46% at 97% 58%, hsl(22 100% 56% / 0.96) 0%, transparent 55%),
    radial-gradient(36% 42% at 80% 42%, hsl(48 100% 56% / 0.82) 0%, transparent 50%),
    radial-gradient(42% 48% at 56% 92%, hsl(142 86% 48% / 0.80) 0%, transparent 55%),
    radial-gradient(34% 40% at 40% 70%, hsl(174 90% 48% / 0.70) 0%, transparent 52%),
    radial-gradient(36% 44% at 62% 28%, hsl(263 92% 62% / 0.76) 0%, transparent 52%),
    linear-gradient(118deg,
      transparent 0%, transparent 20%,
      hsl(263 92% 60% / 0.40) 38%, hsl(330 100% 60% / 0.46) 55%,
      hsl(22 100% 56% / 0.44) 72%, hsl(48 100% 56% / 0.40) 88%, hsl(142 82% 50% / 0.38) 100%);
}

/* Brand-personality pages wear MORE of the dye. About / Reviews / Give-Back /
   Hiring / Membership are where the brand personality carries the page, so the
   spectrum gets hotter and reaches further left; service and area pages keep
   the calmer base mix for legibility. Scoped by each template's <main> class,
   so the shared pattern-page-hero needs no per-page markup. The ::before scrim
   below is untouched -- headline contrast is unchanged. */
:is(.tgp-about-page, .tgp-reviews-page, .tgp-community-page, .tgp-hiring-page, .tgp-membership-page) .tgp-page-hero--cover .tgp-page-hero__bg::after {
  background:
    radial-gradient(48% 52% at 90% 16%, hsl(330 100% 60% / 0.98) 0%, transparent 58%),
    radial-gradient(44% 50% at 68% 6%,  hsl(292 95% 62% / 0.90) 0%, transparent 55%),
    radial-gradient(46% 52% at 97% 58%, hsl(22 100% 56% / 0.94) 0%, transparent 58%),
    radial-gradient(42% 48% at 80% 42%, hsl(48 100% 56% / 0.82) 0%, transparent 53%),
    radial-gradient(48% 54% at 56% 92%, hsl(142 86% 48% / 0.80) 0%, transparent 58%),
    radial-gradient(40% 46% at 40% 70%, hsl(174 90% 48% / 0.72) 0%, transparent 55%),
    radial-gradient(42% 50% at 62% 28%, hsl(263 92% 62% / 0.78) 0%, transparent 55%),
    radial-gradient(34% 42% at 18% 88%, hsl(305 95% 62% / 0.50) 0%, transparent 52%),
    linear-gradient(118deg,
      transparent 0%, transparent 12%,
      hsl(263 92% 60% / 0.38) 32%, hsl(330 100% 60% / 0.44) 52%,
      hsl(22 100% 56% / 0.42) 70%, hsl(48 100% 56% / 0.38) 86%, hsl(142 82% 50% / 0.36) 100%);
}

:is(.tgp-about-page, .tgp-reviews-page, .tgp-community-page, .tgp-hiring-page, .tgp-membership-page) .tgp-page-hero--cover .tgp-page-hero__bg img {
  /* A touch more knockback than the base 0.85/1.08 so the hotter dye has dark
     headroom to colour into. */
  filter: brightness(0.78) saturate(1.15);
}

.tgp-page-hero--cover::before {
  background:
    /* Top band: protects the transparent header's white nav links + phone CTA,
       which sit top-RIGHT exactly over the brightest dye where the left wash has
       faded out. Without this they can drop below 4.5:1 (WCAG 1.4.3). */
    linear-gradient(180deg, rgb(0 7 28 / 0.55) 0%, rgb(0 7 28 / 0.22) 10%, transparent 20%),
    /* Deep-navy legibility wash, darker than before, anchored hard on the LEFT
       under the white headline and thinning fast so the tie-dyed photo carries
       the center-right. The dye itself lives on .tgp-page-hero__bg::after; this
       layer only protects the copy. */
    linear-gradient(90deg, rgb(0 7 28 / 0.94) 0%, rgb(0 7 28 / 0.66) 34%, rgb(0 9 38 / 0.22) 64%, transparent 92%),
    /* Soft bottom anchor so the eyebrow + sub-copy hold contrast. */
    linear-gradient(180deg, transparent 40%, rgb(0 7 28 / 0.46) 100%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

/* Narrow viewports: the wash above is anchored on the LEFT and thins to
   transparent by 92%, which works while the copy occupies the left half. Below
   the 900px breakpoint the hero copy spans the full width, so its right-hand end
   sits out past the protection, directly on the brightest dye. Measured on
   /services/drain-cleaning/: the excerpt (white at 0.85 alpha, 18px/430) came
   out at 1.35:1 at 390px and 1.61:1 at 820px, against 4.62-5.71:1 at 1440px --
   effectively invisible on a phone, which is where most of these pages are read.

   Replace the horizontal wash with a uniform overlay at these widths. Keep the
   top band (it protects the header links) and the bottom anchor; only the 90deg
   layer needs to go. */
@media (max-width: 900px) {
  .tgp-page-hero--cover::before {
    background:
      linear-gradient(180deg, rgb(0 7 28 / 0.55) 0%, rgb(0 7 28 / 0.22) 10%, transparent 20%),
      linear-gradient(0deg, rgb(0 7 28 / 0.60), rgb(0 7 28 / 0.60)),
      linear-gradient(180deg, transparent 40%, rgb(0 7 28 / 0.46) 100%);
  }
}

.tgp-page-hero--cover .tgp-page-hero__grid,
.tgp-page-hero--cover .tgp-blog-hero__inner,
.tgp-page-hero--cover .tgp-category-hero__inner {
  position: relative;
  z-index: 2;
}

/* -------------------------------------------------------------------------
   Content cards — turn in-content lists/sections (e.g. service-page
   "what we do / warning signs / why choose us") into responsive card grids.
   These are plain editable blocks (wp:group grid + wp:group cards) styled to
   match the TGP card system, so the same treatment can be reused on any page.
   ------------------------------------------------------------------------- */
.tgp-content-card {
  background: var(--wp--preset--color--base);
  border: 1px solid rgb(var(--tgp-ink-rgb) / 0.1);
  border-radius: var(--tgp-card-radius);
  box-shadow: var(--tgp-card-shadow);
  overflow: hidden;
  padding: var(--tgp-card-padding);
  position: relative;
  transition: transform var(--dur-base) var(--ease-lift), box-shadow var(--dur-base) var(--ease-out);
}

.tgp-content-card::before {
  background: var(--gradient-rainbow);
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  top: 0;
  width: 4px;
}

/* Area-card photo. Bleeds edge-to-edge out of the card's padding box; the card
   already clips to --tgp-card-radius via overflow:hidden, so the top corners
   round for free. The ::before rainbow bar is absolutely positioned and so
   still paints above this in-flow image -- the 4px stripe stays visible down
   the left edge of the photo, which is the brand chrome for this card family
   (no bottom rule here; that's the hub-card device, and two would be noise).
   `>` scoped by habit: __media is new and unique today, but .tgp-content-card
   is reused across five rebuilt pages and this keeps it that way. */
.tgp-content-card > .tgp-content-card__media {
  aspect-ratio: 16 / 10;
  margin: calc(var(--tgp-card-padding) * -1) calc(var(--tgp-card-padding) * -1) var(--wp--preset--spacing--30);
  overflow: hidden;
}

.tgp-content-card > .tgp-content-card__media img {
  display: block;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-base) var(--ease-out);
  width: 100%;
}

.tgp-content-card:hover > .tgp-content-card__media img {
  transform: scale(1.04);
}

.tgp-content-card:hover {
  box-shadow: var(--tgp-card-shadow-hover);
  transform: translateY(-4px);
}

.tgp-content-card__title {
  color: var(--wp--preset--color--contrast);
  font-weight: 800;
  margin: 0 0 0.4rem;
}

.tgp-content-card p {
  margin: 0;
}

/* "Why choose us" benefit cards get a brand checkmark badge above the title
   (icon + text), so the section reads as visual benefits, not plain text. One
   rule covers the --feature cards across all service pages. */
.tgp-content-card--feature {
  padding-top: calc(var(--wp--preset--spacing--40) + 3.25rem);
}

.tgp-content-card--feature::after {
  content: "✓";
  position: absolute;
  top: var(--wp--preset--spacing--40);
  left: var(--wp--preset--spacing--40);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgb(var(--tgp-brand-blue-rgb) / 0.12);
  color: var(--wp--preset--color--accent-1);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
}

/* Team / crew cards — real headshots in the TGP card system. Photo on top
   (3:4 portrait, matching the source images), name + role + one honest line
   below. Reuses the card border/shadow/hover language so "Meet the Crew" reads
   as part of the same family as the content cards. */
.tgp-team {
  align-items: stretch;
}

.tgp-team-card {
  background: var(--wp--preset--color--base);
  border: 1px solid rgb(var(--tgp-ink-rgb) / 0.1);
  border-radius: var(--tgp-card-radius);
  box-shadow: var(--tgp-card-shadow);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-lift), box-shadow var(--dur-base) var(--ease-out);
}

.tgp-team-card:hover {
  box-shadow: var(--tgp-card-shadow-hover);
  transform: translateY(-4px);
}

.tgp-team-card__photo {
  margin: 0;
  overflow: hidden;
}

.tgp-team-card__photo img {
  aspect-ratio: 3 / 4;
  display: block;
  object-fit: cover;
  object-position: center top;
  width: 100%;
  transition: transform var(--dur-base) var(--ease-out);
}

.tgp-team-card:hover .tgp-team-card__photo img {
  transform: scale(1.04);
}

.tgp-team-card__body {
  padding: var(--wp--preset--spacing--30);
}

.tgp-team-card__name {
  color: var(--wp--preset--color--contrast);
  font-weight: 800;
  margin: 0;
}

.tgp-team-card__role {
  color: var(--tgp-azure-text);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0.2rem 0 0.5rem;
  text-transform: uppercase;
}

.tgp-team-card__bio {
  margin: 0;
}

/* In-body commercial CTA band — a tie-dye gradient call-to-action dropped
   inside post-content (the shared bottom CTA patterns use residential "free
   estimate" language, so this gives the commercial page its own B2B ask).
   Gradient + padding come from block attributes; this just centers the
   buttons. WP's default alignfull only negates LOCAL padding, which isn't
   enough to break out of .wp-block-post-content's own 1400px cap (set by
   the page template) — force the classic viewport-relative breakout so this
   band spans edge-to-edge like the site's other full-bleed CTA bands. */
.tgp-commercial-cta.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.tgp-commercial-cta {
  text-align: center;
}

/* Guard against the classic "100vw includes the scrollbar" overflow: the
   commercial CTA (and any future viewport-relative full-bleed) spans 100vw,
   which is wider than the document by the scrollbar width on classic-scrollbar
   desktops (Windows/Linux Chrome, Firefox) and would add a stray horizontal
   scrollbar. overflow-x: clip absorbs that sliver without creating a scroll
   container, so position: sticky keeps working (unlike overflow: hidden). */
html {
  overflow-x: clip;
}

.tgp-commercial-cta .wp-block-buttons {
  justify-content: center;
}

/* Warning-sign cards: amber accent, single short line, vertically centered. */
.tgp-sign-card {
  align-items: center;
  display: flex;
  padding-block: var(--wp--preset--spacing--30);
}

.tgp-sign-card::before {
  background: var(--wp--preset--color--accent-4);
}

.tgp-sign-card__text {
  font-weight: 600;
  margin: 0;
}

/* Lead paragraph — larger intro copy on content pages. */
.tgp-page-body .tgp-lead {
  color: var(--wp--preset--color--contrast);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: 500;
  line-height: 1.6;
  max-width: 70ch;
}

/* Highlight chips — compact at-a-glance reassurances (top of a page). */
.tgp-highlight {
  background: var(--wp--preset--color--base-2);
  border-radius: var(--tgp-card-radius);
  padding: var(--tgp-card-padding-sm);
  transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.tgp-highlight:hover {
  background: var(--wp--preset--color--base);
  box-shadow: var(--tgp-card-shadow);
}

.tgp-highlight__title {
  color: var(--wp--preset--color--primary);
  margin: 0 0 0.25rem;
}

.tgp-highlight__text {
  margin: 0;
}

/* Numbered process steps — rainbow-numbered, connected feel. */
.tgp-step {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--tgp-card-radius);
  padding: var(--tgp-card-padding);
  position: relative;
}

.tgp-step__num {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: var(--gradient-rainbow);
  font-family: var(--wp--preset--font-family--righteous);
  font-size: var(--wp--preset--font-size--xx-large);
  font-weight: 800;
  line-height: 1;
  margin: 0 0 0.5rem;
}

.tgp-step__title {
  color: var(--wp--preset--color--contrast);
  margin: 0 0 0.4rem;
}

.tgp-step p:not(.tgp-step__num) {
  margin: 0;
}

/* FAQ accordion — native <details>, no JS, branded summary.
   Two class names render the same accordion: `tgp-faq__item` (hand-rolled FAQ
   blocks in 27 pages' post_content) and `tgp-faq-item` (the shared
   pattern-service-faq / pattern-location-faq patterns used by the landing
   pages). The markup is identical, so both get one treatment here and only
   `background` is re-specified per context further down. */
:is(.tgp-faq__item, .tgp-faq-item) {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--tgp-card-radius);
  overflow: hidden;
  padding: 0;
}

:is(.tgp-faq__item, .tgp-faq-item) > summary {
  color: var(--wp--preset--color--contrast);
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  /* spacing-35 (20-24px) vertical: at spacing-30 the closed rows read as
     slim full-width bars. */
  padding: var(--wp--preset--spacing--35) var(--wp--preset--spacing--40);
  position: relative;
  padding-right: 3rem;
  transition: color var(--dur-fast) var(--ease-out);
}

:is(.tgp-faq__item, .tgp-faq-item) > summary::-webkit-details-marker {
  display: none;
}

:is(.tgp-faq__item, .tgp-faq-item) > summary::after {
  content: "+";
  color: var(--wp--preset--color--primary);
  font-size: 1.5em;
  line-height: 1;
  position: absolute;
  right: var(--wp--preset--spacing--40);
  top: 50%;
  transform: translateY(-50%);
  transition: transform var(--dur-fast) var(--ease-out);
}

:is(.tgp-faq__item, .tgp-faq-item)[open] > summary::after {
  transform: translateY(-50%) rotate(45deg);
}

:is(.tgp-faq__item, .tgp-faq-item) > summary:hover {
  color: var(--wp--preset--color--primary);
}

:is(.tgp-faq__item, .tgp-faq-item)[open] > summary {
  border-bottom: 1px solid var(--wp--preset--color--border);
}

:is(.tgp-faq__item, .tgp-faq-item) > :not(summary) {
  margin: 0;
  padding: var(--wp--preset--spacing--35) var(--wp--preset--spacing--40);
}

.tgp-page-hero__grid {
  align-items: center;
  display: grid;
  gap: var(--wp--preset--spacing--60);
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, 0.92fr);
  min-height: 500px;
  padding-block: var(--wp--preset--spacing--40);
  padding-top: calc(var(--site-header-height, 80px) + var(--wp--preset--spacing--30));
}

.tgp-page-hero__copy .section-eyebrow,
.tgp-blog-hero__inner .section-eyebrow,
.tgp-category-hero__inner .section-eyebrow {
  text-align: left;
}

.tgp-page-hero__title {
  color: var(--wp--preset--color--base);
  font-family: var(--wp--preset--font-family--righteous);
  line-height: 1.08;
  margin: 0;
  max-width: 18ch;
  text-shadow: 0 2px 12px rgb(0 0 0 / 0.24);
}

.tgp-page-hero__excerpt {
  color: var(--wp--preset--color--white-overlay-85);
  line-height: 1.7;
  max-width: 42rem;
}

.tgp-page-hero__buttons .wp-block-button__link,
.tgp-page-cta__buttons .wp-block-button__link {
  align-items: center;
  display: inline-flex;
  gap: var(--wp--preset--spacing--20);
}

.btn-primary .wp-block-button__link,
.wp-block-button.btn-primary .wp-block-button__link {
  background: var(--gradient-rainbow);
  background-size: 300% 300%;
  border: 0;
  border-radius: 100px;
  box-shadow: var(--tgp-cta-veil), var(--tgp-btn-glow);
  text-shadow: var(--tgp-cta-text-shadow);
  color: var(--wp--preset--color--base);
  font-weight: 800;
  overflow: hidden;
  position: relative;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-lift);
}

.btn-primary .wp-block-button__link::before,
.wp-block-button.btn-primary .wp-block-button__link::before {
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.2), transparent);
  content: "";
  height: 100%;
  left: -100%;
  position: absolute;
  top: 0;
  transition: left var(--dur-slow) var(--ease-out);
  width: 100%;
}

.btn-primary .wp-block-button__link:hover,
.wp-block-button.btn-primary .wp-block-button__link:hover {
  box-shadow: var(--tgp-cta-veil), var(--tgp-btn-glow-hover);
  transform: translateY(-2px) scale(1.02);
}

.btn-primary .wp-block-button__link:hover::before,
.wp-block-button.btn-primary .wp-block-button__link:hover::before {
  left: 100%;
}

.tgp-page-hero .is-style-outline .wp-block-button__link,
.tgp-page-cta .is-style-outline .wp-block-button__link {
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 100px;
  color: currentColor;
  font-weight: 800;
}

.tgp-page-hero__visual {
  display: grid;
  gap: var(--tgp-card-gap);
}

.tgp-contextual-image {
  margin: 0;
  overflow: hidden;
  position: relative;
}

.tgp-contextual-image img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.tgp-contextual-image a {
  display: block;
  height: 100%;
}

.tgp-contextual-image--hero {
  aspect-ratio: 16 / 10;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: var(--tgp-radius-lg);
  box-shadow: var(--tgp-elev-4);
}

.tgp-contextual-image--hero::after {
  background:
    linear-gradient(180deg, transparent 45%, rgb(var(--tgp-ink-rgb) / 0.42)),
    linear-gradient(90deg, rgb(var(--tgp-brand-blue-rgb) / 0.2), transparent 42%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

/* Dark navy glass (was 10% white) so the white proof text stays legible over
   ANY hero image -- the 10% white card washed out over bright photos like the
   hiring brick wall, while the scrim only darkens the left (headline) side. */
.tgp-page-hero__proof {
  backdrop-filter: blur(8px);
  background: rgb(1 14 69 / 0.46);
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: var(--tgp-radius-lg);
  box-shadow: 0 20px 60px rgb(0 0 0 / 0.16);
  color: var(--wp--preset--color--base);
  padding: var(--tgp-card-padding);
}

.tgp-proof-kicker {
  color: var(--wp--preset--color--white-overlay-65);
  font-weight: 800;
  letter-spacing: 0.12em;
  margin: 0;
  text-transform: uppercase;
}

.tgp-proof-list {
  display: grid;
  gap: var(--wp--preset--spacing--20);
  list-style: none;
  margin: 0;
  padding: 0;
}

.tgp-proof-list li {
  align-items: flex-start;
  display: flex;
  gap: var(--wp--preset--spacing--20);
}

.tgp-proof-list li::before {
  background: var(--gradient-rainbow);
  border-radius: 999px;
  content: "";
  flex: 0 0 0.72rem;
  height: 0.72rem;
  margin-top: 0.42em;
  width: 0.72rem;
}

.tgp-page-body {
  background: var(--wp--preset--color--base);
}

/* Wide container (1400px) with readable prose: cap running text to a
   comfortable measure so paragraphs/lists don't stretch edge-to-edge, while
   cards, grids, columns, images, and embeds still fill the full width. */
.tgp-page-body :where(p, ul, ol, blockquote) {
  max-width: var(--tgp-measure);
}

.tgp-page-body :where(.wp-block-group, .wp-block-columns, .wp-block-image, .wp-block-buttons, .wp-block-embed, .tgp-content-cards) :where(p, ul, ol, blockquote),
.tgp-page-body :where(.wp-block-group, .wp-block-columns, .wp-block-image, .wp-block-buttons, .wp-block-embed, .tgp-content-cards) {
  max-width: none;
}

.tgp-page-body :where(h2, h3, h4) {
  color: var(--wp--preset--color--contrast-3);
  font-family: var(--wp--preset--font-family--righteous);
  line-height: 1.18;
}

.tgp-page-body :where(p, li) {
  color: var(--wp--preset--color--body-text);
  line-height: 1.75;
}

.tgp-page-body :where(a) {
  color: var(--wp--preset--color--primary);
  font-weight: 700;
}

.tgp-page-body :where(.wp-block-post-content) > * + * {
  margin-block-start: var(--wp--preset--spacing--30);
}

/* Center body prose + headings so .tgp-page-body pages (contact, reviews,
   service/location/hub bodies) speak the same centered language as the rest
   of the site. margin-inline:auto centers each top-level block at the measure
   inside the wide container; running text stays left-aligned WITHIN the block
   for readability, while section headings/leads center their text. This is the
   single rule that aligns the older left-aligned .tgp-page-body system with
   the location/service treatment — one body language site-wide. */
.tgp-page-body :where(.wp-block-post-content) > :where(p, ul, ol, blockquote) {
  /* Centered body to match the centered section language (a left intro amid
     centered sections read as "weirdly varied"). Capped at the readable
     measure so it stays a full, intentional block rather than narrow floating
     text. Core already centers the block (margin auto); paragraphs also center
     their text below. Lists keep their natural left text inside the centered
     block. */
  margin-inline: auto;
  max-width: var(--tgp-measure);
}

.tgp-page-body :where(.wp-block-post-content) > :where(p, blockquote) {
  text-align: center;
}

.tgp-page-body :where(.wp-block-post-content) > :where(h2, h3, h4) {
  margin-inline: auto;
  max-width: var(--tgp-measure);
  text-align: center;
  text-wrap: balance;
}

.tgp-page-body :where(.wp-block-post-content) > :where(h2, h3) {
  margin-block-start: var(--wp--preset--spacing--50);
}

.tgp-page-body :where(.wp-block-post-content) > :where(h2, h3):first-child {
  margin-block-start: 0;
}

/* The about page wrapper never received the post-content flow rules the
   standard/service pages have, so its top-level blocks (incl. h2s) stacked
   with zero margins. Mirror the same rhythm: 16px between siblings, a larger
   fluid step above section headings. */
.tgp-about-page__content :where(.wp-block-post-content) > * + * {
  margin-block-start: var(--wp--preset--spacing--30);
}

.tgp-about-page__content :where(.wp-block-post-content) > :where(h2, h3) {
  margin-block-start: var(--wp--preset--spacing--50);
}

.tgp-hub-grid-section {
  position: relative;
}

.tgp-hub-grid-section__header {
  margin-inline: auto;
}

/* Centered section headers
   --------------------------------------------------------------------------
   These wrappers introduce centered grids, cards, forms, or proof content below.
   Keep their heading/intro copy centered at the wrapper level so editor-created
   headings cannot drift left while the section body remains centered. */
.tgp-hub-grid-section__header,
.tgp-services-triage__header,
.tgp-locations-proof__header,
.tgp-membership-comparison__header,
.tgp-contact-routing__header,
.tgp-griffin-options__header,
.tgp-hiring-fit__header,
.tgp-related-section__header,
.tgp-faq-section__header,
.tgp-blog-categories__header {
  text-align: center;
}

/* Card grids fill full rows but CENTER an incomplete final row instead of
   left-aligning an orphan card. Flex (not grid) is used so a partial last row
   can center while full rows still span the width. The .is-layout-grid override
   beats WordPress's generated `display:grid` for these block-grid containers. */
.tgp-hub-grid {
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tgp-card-gap);
}

.tgp-hub-grid,
.tgp-hub-grid.is-layout-grid {
  display: flex;
}

.tgp-hub-grid > * {
  flex: 0 1 calc((100% - 2 * var(--wp--preset--spacing--30)) / 3);
  max-width: calc((100% - 2 * var(--wp--preset--spacing--30)) / 3);
}

.tgp-locations-hub-grid .tgp-hub-grid > * {
  flex-basis: calc((100% - 3 * var(--wp--preset--spacing--30)) / 4);
  max-width: calc((100% - 3 * var(--wp--preset--spacing--30)) / 4);
}

/* Content-card grids (e.g. the 13 area cards on the service-areas hub) use WP
   auto-fill columns, which left-align an orphan in the final row. Flexbox keeps
   the column count adaptive to the container width (via flex-wrap) AND centers a
   partial last row. Full rows still fill: cards grow to the row width; a lone
   card is capped (max-width) and centered instead of stranded to the left. */
.tgp-content-cards.is-layout-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tgp-card-gap);
}

.tgp-content-cards.is-layout-grid > * {
  flex: 1 1 17rem;
  /* 18.5rem originally -- too tight at the 1400px wideSize: 4 cards only grew to
     ~296px each, leaving ~300px of unfilled centered white space either side on
     laptop/desktop. 23rem lets flex-grow pull cards up to ~338-350px so 4/7/8-count
     rows actually use the row width instead of clustering narrow-and-centered. */
  max-width: 23rem;
}

/* 2-card rows (e.g. the grease-trap $-price / what's-included pair) can't fill
   1400px at any sane card width, but 23rem still reads sparse for a hero-level
   comparison pair. Let them grow further, same idea as the 5/6 and 13 overrides
   below. 2 x 30rem + 1 gap = 976px -- fuller than 2 x 23rem (752px) without
   making single cards absurdly wide. */
.tgp-content-cards.is-layout-grid:has(> :nth-child(2):last-child) > * {
  flex-basis: 26rem;
  max-width: 30rem;
}

/* 3-card rows (landing-benefits "why choose us" on all 4 offer pages, etc.):
   (1400 - 2 gaps) / 3 = ~456px is the width that exactly fills the row. 29rem
   (464px) sits just above that so flex-grow settles at the fill width instead
   of clipping at the cap. */
.tgp-content-cards.is-layout-grid:has(> :nth-child(3):last-child) > * {
  flex-basis: 26rem;
  max-width: 29rem;
}

/* Balanced wrap for 5- and 6-card grids: at 17rem basis these wrap 4+1 / 4+2,
   leaving a stranded last row. A wider basis forces 3-up so they land 3+2 / 3+3.
   Counts other than 2, 3, 5, 6 keep the default basis (4, 7, 8 all wrap evenly). */
.tgp-content-cards.is-layout-grid:has(> :nth-child(5):last-child) > *,
.tgp-content-cards.is-layout-grid:has(> :nth-child(6):last-child) > * {
  /* 4 x 21.5rem + gaps exceeds the 1400px wideSize cap, so rows top out at 3 */
  flex-basis: 21.5rem;
  max-width: 22rem;
}

/* Service-areas index: the 13 city cards. These used to be text-only, so a
   narrow 15rem basis (5+5+3) packed them tidily. They now carry a 16:10
   neighbourhood photo, and at 15rem the image is too small to read -- owner
   asked for 3-4 across. A 20rem basis lands 4-up at the 1400px wideSize and
   drops to 3-up around 1100px, which is the requested range. 13 is a prime
   number, so the last row holds one card; `justify-content: center` on the
   flex parent centers it rather than stranding it left. Scoped to the
   locations index so service pages keep their tuned 4/5/6 grids.
   Owner picked 3-across (2026-08-02). With --tgp-card-gap at 16px, a 24rem
   basis blocks a 4th column at the 1400px wideSize (4x384+48 = 1584 > 1400)
   while 3 fit comfortably (3x384+32 = 1184), so cards grow to ~456px each.
   13 cards land 3+3+3+3+1. */
.tgp-locations-index-page .tgp-content-cards.is-layout-grid:has(> :nth-child(13):last-child) > * {
  flex-basis: 24rem;
  max-width: 28.5rem;
}

/* A content-cards grid holding a SINGLE card (e.g. the "Outside Our Primary
   Area?" callout) renders as a lonely 17rem card stranded in a full-width band.
   Let the lone card breathe into a centered callout width instead. */
.tgp-locations-index-page .tgp-content-cards.is-layout-grid:has(> :only-child) > * {
  flex-basis: auto;
  max-width: 36rem;
}

/* === SECTION VERTICAL RHYTHM ================================================
   Full-width content sections used to bake fixed vertical padding inline in
   their patterns (spacing|60 = 96px, spacing|70 = 160px), which did not scale on
   mobile and stacked into 192-256px seams. That inline padding was stripped at
   the source from every content-band pattern, which now carries a shared
   `tgp-section` marker class so this single fluid token owns section rhythm
   site-wide. .tgp-page-body keeps inline padding across 20+ templates, so it is
   overridden here with !important (matching the existing override convention in
   this file). Heroes are intentionally excluded — they are full-bleed covers
   with their own spacing. */

/* Quiet SVG watermarks on light content sections (Gazelle-like: repeating grain
   plus a low-opacity corner/bottom wave). Reuses the grain already inlined for
   .hero-grain and the wave already used on dyed bands. Skip trust-pillars /
   coupons / why-us — those already own ::after for their wave. */
.tgp-section.has-base-background-color,
.tgp-section.has-base-2-background-color,
.tgp-page-body {
  isolation: isolate;
  position: relative;
}

.tgp-section.has-base-background-color::before,
.tgp-section.has-base-2-background-color::before,
.tgp-page-body::before {
  background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20256%20256%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.9%27%20numOctaves%3D%274%27%20stitchTiles%3D%27stitch%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  content: "";
  inset: 0;
  opacity: 0.04;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.tgp-section.has-base-background-color::after,
.tgp-section.has-base-2-background-color::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%23001565' fill-opacity='.04' d='M0,192 C180,144 360,240 540,224 C720,208 900,128 1080,160 C1260,192 1350,208 1440,192 L1440,320 L0,320 Z'/%3E%3Cpath fill='%23001565' fill-opacity='.03' d='M0,256 C240,208 480,288 720,272 C960,256 1200,224 1440,256 L1440,320 L0,320 Z'/%3E%3C/svg%3E") bottom right / min(720px, 70%) 140px no-repeat;
  bottom: 0;
  content: "";
  height: 140px;
  pointer-events: none;
  position: absolute;
  right: 0;
  width: min(720px, 70%);
  z-index: 0;
}


/* Cream/navy/gator bands stay distinct vs collapsed gray/white. */
.tgp-section.has-base-2-background-color,
.tgp-page-body.has-base-2-background-color {
  background-color: #F5F0EB !important;
}
.tgp-section.has-contrast-background-color,
.tgp-section.has-contrast-3-background-color {
  background-color: #0021A5 !important;
}
.tgp-section.has-band-gator-gradient-background {
  background-color: #001565;
}

.tgp-section.has-base-background-color > *,
.tgp-section.has-base-2-background-color > *,
.tgp-page-body > * {
  position: relative;
  z-index: 1;
}

.tgp-section {
  padding-block: var(--tgp-section-y);
  /* Side gutters owned by one fluid ramp. The inline spacing|40 (32px) padding
     that used to live on every section root (and forced this to be !important)
     was stripped from all 50 pattern section roots, so no inline rule competes
     and the !important is no longer needed. One knob, --tgp-section-x. */
  padding-inline: var(--tgp-section-x);
}

.tgp-page-body {
  padding-block: var(--tgp-section-y) !important;
  /* Match the section gutter ramp so the body wrapper lines up with the bands
     below it. The inline spacing|40 (fixed 32px) L/R padding was stripped from
     all 22 page templates, so this owns the horizontal gutter with no
     !important — and mobile no longer steps 24px body vs 16px sections. */
  padding-inline: var(--tgp-section-x);
}

/* Roomier section rhythm on the content-heavy service + service-area pages: the
   72px desktop default reads tight on long pages, so bump the inherited token to
   ~96px (still fluid, scaled down on mobile). Scoped to these page wrappers so
   the homepage and other templates keep the standard rhythm. */
.tgp-service-page,
.tgp-services-index-page,
.tgp-locations-index-page,
.tgp-location-page {
  --tgp-section-y: clamp(3rem, 4vw + 2.25rem, 6rem); /* ~51px mobile -> ~94px at 1440 -> 96px cap */
}

/* Blog index + single-post bands missed the rhythm sweep: they bake inline
   spacing|60 (96px) in their templates, fixed at all viewports. They are
   alternating-background bands, so they keep symmetric padding (no seam
   collapse — a colored band needs internal top padding) but adopt the same
   fluid token as the rest of the site. */
.tgp-blog-index__results,
.tgp-single-post__body,
.tgp-single-post__newsletter,
.tgp-single-post__author-band,
.tgp-single-post__related {
  padding-block: var(--tgp-section-y) !important;
}

/* Collapse adjacent section padding so seams are 40-72px (one tgp-section-y)
   instead of 80-144px (two stacked values). The bottom padding of the previous
   section and the top padding of the next section used to stack, creating
   oversized dead zones between content bands.

   Collapsing is only correct when the two sections are visually continuous —
   transparent or painted the same white base. A section that carries its own
   background (cream band, navy band, tie-dye CTA) must keep its top padding:
   the previous section's whitespace sits OUTSIDE the colored band, so a
   zeroed padding-top puts the band's text flush against its top edge.
   Heroes are excluded for the same reason — they are dark full-bleed covers,
   and the first content section after one is always a background change.

   .tgp-feature (the 50/50 image+text bands) is also excluded: even on a
   transparent background it reads as a standalone unit (large image + card),
   not continuous prose, so collapsing its top padding to 0 pushed its copy
   flush against the section above. Keeping its padding lets it sit ~144px
   below the previous section — the SAME rhythm the colored bands already use,
   so features and bands are spaced consistently. */
:is(.tgp-section, .tgp-page-body):is(.has-base-background-color, :not(.has-background))
  + .tgp-section:is(.has-base-background-color, :not(.has-background)):not(.tgp-feature) {
  padding-block-start: 0 !important;
}

/* === CARD-GRID STANDARDIZATION ==============================================
   All TGP card grids share one centered-flex behavior so columns are consistent
   and responsive: they reflow to fewer columns as width shrinks and collapse to
   a single column on phones, regardless of the per-page columnCount the editor
   bakes in. .tgp-content-cards already uses this system (above); .tgp-highlights
   and .tgp-steps now join it. */
.tgp-highlights.is-layout-grid,
.tgp-steps.is-layout-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tgp-card-gap);
}

/* Let highlights/steps cards GROW to fill their row instead of capping at
   18rem and centering with side gaps. A full 4-up trust strip / process row
   then spans the content width, so its left edge lines up with the left-
   aligned intro prose above it (cards no longer float inset). Partial rows
   still grow to fill evenly, so there is no stranded-orphan issue. */
.tgp-highlights.is-layout-grid > * {
  flex: 1 1 12rem;
  max-width: none;
}

.tgp-steps.is-layout-grid > * {
  flex: 1 1 13rem;
  max-width: none;
}

/* Explicit 4 -> 2 -> 1 step-down for the 4-item strips so they never wrap to a
   3 + 1 row with a full-width orphan card. At desktop the basis above lets all
   4 fill one row; below ~900px force two even columns (2 + 2), and one column
   on phones. */
@media (max-width: 900px) {
  .tgp-highlights.is-layout-grid > *,
  .tgp-steps.is-layout-grid > * {
    flex-basis: calc((100% - var(--tgp-card-gap)) / 2);
  }
}

@media (max-width: 560px) {
  .tgp-highlights.is-layout-grid > *,
  .tgp-steps.is-layout-grid > * {
    flex-basis: 100%;
  }
}

/* === SERVICE SECTION HEADINGS ===============================================
   Service-body section headings introduce centered card/grid content, so they
   read best centered. This unifies the previously mixed alignment (some H2s were
   centered in the editor, some left) into one consistent rule, and centers the
   short intro line that follows a heading. Scoped to service pages so prose-led
   pages (contact, reviews, locations) keep their natural left alignment. */
.tgp-service-page .wp-block-post-content > h2 {
  text-align: center;
}

.tgp-service-page .wp-block-post-content > h2 + p {
  margin-inline: auto;
  text-align: center;
}

/* === LOCATION SECTION LAYOUT ================================================
   Location bodies are long-form prose plus the same centered card sections the
   service pages have, but they inherited the full 1400px container: ~140-char
   lines with 16px paragraph gaps read as a squished text wall, and their
   section h2s stayed left while the cards below them center. Match the
   service-page heading treatment and give prose a readable measure. */
:is(.tgp-about-page, .tgp-location-page, .tgp-membership-page, .tgp-hiring-page, .tgp-community-page, .tgp-extended-area-page) .wp-block-post-content > h2 {
  margin-block-start: var(--wp--preset--spacing--50);
  margin-block-end: var(--wp--preset--spacing--35);
  text-align: center;
}

:is(.tgp-about-page, .tgp-location-page, .tgp-membership-page, .tgp-hiring-page, .tgp-community-page, .tgp-extended-area-page) .wp-block-post-content > h2:first-child {
  margin-block-start: 0;
}

:is(.tgp-about-page, .tgp-location-page, .tgp-membership-page, .tgp-hiring-page, .tgp-community-page, .tgp-extended-area-page) .wp-block-post-content > :is(p, ul, ol) {
  margin-inline: auto;
  max-width: var(--tgp-measure);
}

:is(.tgp-about-page, .tgp-location-page, .tgp-membership-page, .tgp-hiring-page, .tgp-community-page, .tgp-extended-area-page) .wp-block-post-content > p {
  text-align: center;
}

:is(.tgp-about-page, .tgp-location-page, .tgp-membership-page, .tgp-hiring-page, .tgp-community-page, .tgp-extended-area-page) .wp-block-post-content > :is(p, ul, ol) + :is(p, ul, ol) {
  margin-block-start: var(--wp--preset--spacing--35);
}

/* FAQ accordions sit in the same 1400px container, so a 40-character question
   floats in a slim full-width bar. Cap the list at the prose measure. */
:is(.tgp-location-page, .tgp-service-page, .tgp-membership-page, .tgp-hiring-page, .tgp-community-page, .tgp-extended-area-page) .wp-block-post-content > .tgp-faq {
  margin-inline: auto;
  max-width: var(--tgp-measure);
}

/* Services hub is an intentional exception to the 1400px interior ceiling:
   widen this section's container so the 3-across cards read larger. */
.tgp-services-hub-grid .tgp-hub-grid-section__inner {
  margin-inline: auto;
  max-width: 1600px;
}

.tgp-hub-card {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--tgp-card-radius);
  box-shadow: var(--tgp-card-shadow);
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  /* Breathing room under the card text (owner, 2026-08-16: the copy sat flush
     against the bottom edge).

     This is padding on the card rather than margin on the paragraph on purpose.
     `.tgp-hub-card p` below does ask for a spacing-30 bottom margin, but core's
     `:root :where(.wp-block-group-is-layout-flow) > :last-child
     { margin-block-end: 0 }` scores 0,2,0 against that rule's 0,1,1 and wins, so
     the margin computes to 0px. Padding here sidesteps the specificity contest
     entirely, and because the media sits flush at the top of a column flex
     container, a bottom-only pad cannot affect the image. Slightly larger than
     the 16px side gutters so the text reads optically centred against a hard
     bottom edge. */
  padding-bottom: var(--wp--preset--spacing--35);
}

.tgp-hub-card__media {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, rgb(var(--tgp-brand-blue-rgb) / 0.14), rgb(232 98 42 / 0.14));
  margin: 0;
  overflow: hidden;
}

/* Tie-dye lives in the chrome, never over the photo: a gradient rule seals the
   media well to the card body. The dye is the brand device on heroes and bands,
   so washing it across 16:10 thumbnails would dilute it AND bury the subject
   these cards exist to make recognisable at a glance.
   Scoped with `>` on purpose: .tgp-hub-card__media is reused standalone by the
   home area tiles and the featured-proof photos, which are not cards and must
   not grow an edge. Same leak the 45% media cap caused (see note below). */
.tgp-hub-card > .tgp-hub-card__media {
  position: relative;
}

.tgp-hub-card > .tgp-hub-card__media::after {
  background: var(--gradient-rainbow);
  bottom: 0;
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  right: 0;
  z-index: 1;
}

.tgp-hub-card__media img {
  display: block;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-base) var(--ease-out);
  width: 100%;
}

.tgp-hub-card:hover .tgp-hub-card__media img {
  transform: scale(1.04);
}

.tgp-hub-card h3 {
  font-family: var(--wp--preset--font-family--righteous);
  line-height: 1.16;
  margin: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) 0;
}

.tgp-hub-card h3 a {
  color: var(--wp--preset--color--contrast-3);
  text-decoration: none;
}

.tgp-hub-card h3 a:hover {
  color: var(--wp--preset--color--primary);
}

.tgp-hub-card p {
  color: var(--wp--preset--color--body-text);
  line-height: 1.65;
  margin: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
}

/* Image cards stay stacked at every width (owner direction 2026-06-12):
   image spans the card edge-to-edge on top, centered text below. The old
   >=768px flex-row variant turned images into side strips and leaked its
   45% media cap onto every reuse of the media class (home tiles, proof
   photos). */
.tgp-hub-card h3,
.tgp-hub-card p {
  text-align: center;
}

.tgp-services-triage {
  color: var(--wp--preset--color--base);
  overflow: hidden;
  position: relative;
}

.tgp-services-triage::before {
  background: var(--gradient-rainbow-h);
  content: "";
  height: 6px;
  inset: 0 0 auto;
  position: absolute;
}

.tgp-services-triage__header {
  color: var(--wp--preset--color--base);
  margin-inline: auto;
}

.tgp-services-triage__header p {
  color: rgb(255 255 255 / 0.82);
}

.tgp-services-triage__grid {
  display: grid;
  gap: var(--tgp-card-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tgp-services-triage__card {
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: var(--tgp-card-radius);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.24);
  color: var(--wp--preset--color--base);
  min-height: 100%;
}

.tgp-services-triage__card--urgent {
  background:
    linear-gradient(145deg, rgb(255 255 255 / 0.18), rgb(255 255 255 / 0.08)),
    linear-gradient(135deg, rgb(232 98 42 / 0.34), rgb(61 139 240 / 0.2));
}

.tgp-services-triage__card h3 {
  color: var(--wp--preset--color--base);
  font-family: var(--wp--preset--font-family--righteous);
  line-height: 1.14;
}

.tgp-services-triage__card :where(p, li) {
  color: rgb(255 255 255 / 0.84);
  line-height: 1.65;
}

.tgp-services-triage__label {
  color: var(--wp--preset--color--accent-4) !important;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tgp-services-triage__card .wp-block-list {
  padding-left: 1.15rem;
}

.tgp-services-triage__quick-links {
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--tgp-radius-sm);
}

.tgp-services-triage__quick-links p {
  color: rgb(255 255 255 / 0.74);
  margin: 0;
}

.tgp-services-triage__quick-links a {
  color: var(--wp--preset--color--base);
  font-weight: 800;
  text-decoration-color: rgb(255 255 255 / 0.35);
  text-underline-offset: 0.2em;
}

.tgp-locations-proof {
  position: relative;
}

.tgp-locations-proof__header {
  margin-inline: auto;
}

.tgp-locations-proof__grid {
  display: grid;
  gap: var(--tgp-card-gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tgp-locations-proof__card {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--tgp-card-radius);
  box-shadow: var(--tgp-card-shadow);
  min-height: 100%;
  position: relative;
}

.tgp-locations-proof__card::before {
  background: var(--gradient-rainbow-h);
  border-radius: var(--tgp-card-radius) var(--tgp-card-radius) 0 0;
  content: "";
  height: 5px;
  inset: -1px -1px auto;
  position: absolute;
}

.tgp-locations-proof__card h3 {
  font-family: var(--wp--preset--font-family--righteous);
  line-height: 1.18;
}

.tgp-locations-proof__card h3 a {
  color: var(--wp--preset--color--contrast-3);
  text-decoration: none;
}

.tgp-locations-proof__card h3 a:hover {
  color: var(--wp--preset--color--primary);
}

.tgp-locations-proof__card p {
  color: var(--wp--preset--color--body-text);
  line-height: 1.65;
}

.tgp-locations-proof__band {
  background:
    radial-gradient(circle at 10% 10%, rgb(255 255 255 / 0.16), transparent 30%),
    linear-gradient(135deg, var(--wp--preset--color--contrast-3), var(--tgp-plum-mid) 68%, var(--tgp-plum-deep));
  border-radius: var(--tgp-radius-sm);
  box-shadow: 0 22px 58px rgb(var(--tgp-navy-rgb) / 0.18);
  color: var(--wp--preset--color--base);
}

.tgp-locations-proof__band h3 {
  color: var(--wp--preset--color--base);
  font-family: var(--wp--preset--font-family--righteous);
}

.tgp-locations-proof__band p {
  color: rgb(255 255 255 / 0.78);
  line-height: 1.7;
}

/* Visually-hidden but screen-reader-available label. Used to give otherwise
   self-evident sections (e.g. the trust-pillars band) a programmatic section
   heading so the document outline has no h1->h3 skip, without altering design. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* Services/areas index grids: flexbox keeps an adaptive column count AND centers
   a partial final row (WP grid left-aligns the orphan). Mirrors .tgp-hub-grid. */
.tgp-index-grid {
  flex-wrap: wrap;
  gap: var(--tgp-card-gap);
  justify-content: center;
  margin-block-start: var(--wp--preset--spacing--50);
}

.tgp-index-grid,
.tgp-index-grid.is-layout-grid {
  display: flex;
}

.tgp-index-grid > * {
  flex: 0 1 calc((100% - 2 * var(--wp--preset--spacing--30)) / 3);
  max-width: calc((100% - 2 * var(--wp--preset--spacing--30)) / 3);
  /* WP's is-layout-flow injects margin-block-start on every child except the
     first. On this flex row that top margin drops cards 2..n below the first
     card (which keeps margin 0), so the first card floats higher and taller.
     Gap owns spacing here, so cancel the stray block margins for clean rows. */
  margin-block: 0;
}

.tgp-index-card {
  --tgp-index-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M22.7%2019.1l-9.1-9.1a6.55%206.55%200%200%200-1.5-7%206.5%206.5%200%200%200-7.4-1.3l4.4%204.4-2.8%202.8-4.4-4.4A6.5%206.5%200%200%200%203.2%2012a6.55%206.55%200%200%200%207%201.5l9.1%209.1a1%201%200%200%200%201.4%200l2-2a1%201%200%200%200%200-1.5z%27%2F%3E%3C%2Fsvg%3E");
  background: var(--wp--preset--color--base-2);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--tgp-card-radius);
  box-shadow: var(--tgp-card-shadow);
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20);
  min-height: 100%;
  padding: var(--tgp-card-padding);
  position: relative;
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-lift);
}

.tgp-index-card::before {
  background: var(--gradient-rainbow-h);
  border-radius: var(--tgp-card-radius) var(--tgp-card-radius) 0 0;
  content: "";
  height: 4px;
  left: -1px;
  position: absolute;
  right: -1px;
  top: -1px;
}

/* The comprehensive services directory should stay quick to scan, not become
   a second photo gallery below the visual hub cards. Compact masked icons add
   category cues beside each CTA without increasing card or mobile page height. */
.tgp-services-index-grid .tgp-index-card::after {
  background: var(--gradient-rainbow-h);
  bottom: var(--tgp-card-padding);
  content: "";
  filter: drop-shadow(0 5px 9px rgb(var(--tgp-brand-blue-rgb) / 0.16));
  height: 2.25rem;
  -webkit-mask-image: var(--tgp-index-icon-mask);
  mask-image: var(--tgp-index-icon-mask);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  pointer-events: none;
  position: absolute;
  right: var(--tgp-card-padding);
  transition: filter var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-lift);
  width: 2.25rem;
}

.tgp-services-index-grid .tgp-index-card:hover,
.tgp-services-index-grid .tgp-index-card:focus-within {
  border-color: rgb(var(--tgp-brand-blue-rgb) / 0.22);
  box-shadow: 0 16px 42px rgb(var(--tgp-brand-blue-rgb) / 0.13);
  transform: translateY(-3px);
}

.tgp-services-index-grid .tgp-index-card:hover::after,
.tgp-services-index-grid .tgp-index-card:focus-within::after {
  filter: drop-shadow(0 7px 12px rgb(var(--tgp-brand-blue-rgb) / 0.24));
  transform: rotate(-5deg) scale(1.08);
}

/* Commercial */
.tgp-services-index-grid .tgp-index-card:has(a[href$="/services/commercial-plumbing/"]) {
  --tgp-index-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%207V3H2v18h20V7H12zM6%2019H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4%2012H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10%2012h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0%204h-2v2h2v-2z%27%2F%3E%3C%2Fsvg%3E");
}

/* Drain and underground line work */
.tgp-services-index-grid .tgp-index-card:has(a[href$="/services/drain-cleaning/"]),
.tgp-services-index-grid .tgp-index-card:has(a[href$="/services/sewer-line-repair-replacement/"]),
.tgp-services-index-grid .tgp-index-card:has(a[href$="/services/trenchless-drain-repair/"]) {
  --tgp-index-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M19%2012h-2v3h-3v2h5v-5zM7%209h3V7H5v5h2V9zm14-6H3c-1.1%200-2%20.9-2%202v14c0%201.1.9%202%202%202h18c1.1%200%202-.9%202-2V5c0-1.1-.9-2-2-2zm0%2016H3V5h18v14z%27%2F%3E%3C%2Fsvg%3E");
}

/* Camera diagnostics */
.tgp-services-index-grid .tgp-index-card:has(a[href$="/services/sewer-camera-inspection/"]) {
  --tgp-index-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M9%202 7.17%204H4c-1.1%200-2%20.9-2%202v12c0%201.1.9%202%202%202h16c1.1%200%202-.9%202-2V6c0-1.1-.9-2-2-2h-3.17L15%202H9zm3%2015a5%205%200%201%201%200-10%205%205%200%200%201%200%2010zm0-8a3%203%200%201%200%200%206%203%203%200%200%200%200-6z%27%2F%3E%3C%2Fsvg%3E");
}

/* Leak detection and supply lines */
.tgp-services-index-grid .tgp-index-card:has(a[href$="/services/water-leak-detection/"]),
.tgp-services-index-grid .tgp-index-card:has(a[href$="/services/water-line-repair-replacement/"]) {
  --tgp-index-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202C6.7%206.55%204%2010.48%204%2013.8%204%2018.78%207.8%2022%2012%2022s8-3.22%208-8.2C20%2010.48%2017.3%206.55%2012%202zm0%2018c-3.35%200-6-2.57-6-6.2%200-2.34%201.95-5.44%206-9.14%204.05%203.7%206%206.8%206%209.14%200%203.63-2.65%206.2-6%206.2zm-4.17-6c.37%200%20.67.26.74.62.41%202.22%202.28%202.98%203.64%202.87.43-.02.79.32.79.75%200%20.4-.32.73-.72.75-2.13.13-4.62-1.09-5.19-4.12a.75.75%200%200%201%20.74-.88z%27%2F%3E%3C%2Fsvg%3E");
}

/* Residential work */
.tgp-services-index-grid .tgp-index-card:has(a[href$="/services/residential-plumbing/"]) {
  --tgp-index-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M10%2020v-6h4v6h5v-8h3L12%203%202%2012h3v8z%27%2F%3E%3C%2Fsvg%3E");
}

/* Water quality */
.tgp-services-index-grid .tgp-index-card:has(a[href$="/services/water-filtration-system/"]) {
  --tgp-index-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M4.25%205.61C6.27%208.2%2010%2013%2010%2013v6c0%20.55.45%201%201%201h2c.55%200%201-.45%201-1v-6s3.72-4.8%205.74-7.39A1%201%200%200%200%2018.95%204H5.04c-.83%200-1.3.95-.79%201.61z%27%2F%3E%3C%2Fsvg%3E");
}

/* Hot water */
.tgp-services-index-grid .tgp-index-card:has(a[href$="/services/water-heater-repair/"]),
.tgp-services-index-grid .tgp-index-card:has(a[href$="/services/whole-house-hot-water/"]) {
  --tgp-index-icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%2023c4.42%200%208-3.58%208-8%200-4.27-3.04-7.79-7-12.67V7L9%203v5.81C6.58%2010.26%204%2012.4%204%2016c0%203.87%203.13%207%207%207h1zm-1.29-9.77L12%2012v4.5a1.5%201.5%200%200%201-3%200c0-1.22.67-2.37%201.71-3.27z%27%2F%3E%3C%2Fsvg%3E");
}

.tgp-index-card h3 {
  font-size: var(--wp--preset--font-size--lg);
  margin: 0;
}

.tgp-index-card p {
  margin: 0;
}

.tgp-index-card__link {
  margin-top: auto !important;
  padding-right: 3rem;
}

.tgp-index-card__link a {
  align-items: center;
  color: var(--wp--preset--color--primary);
  display: inline-flex;
  font-weight: 800;
  gap: var(--wp--preset--spacing--20);
}

.tgp-index-card__link a::after {
  content: "→";
  transition: transform var(--dur-fast) var(--ease-out);
}

.tgp-index-card__link a:hover::after {
  transform: translateX(4px);
}

.tgp-page-cta {
  /* Tie-dye brand band behind the inner CTA card: the flow gradient + soft
     color blooms, matched to the flow.tgplumber.com hero. Pure preset, no
     image asset. */
}

.tgp-page-cta__inner {
  background:
    linear-gradient(135deg, rgb(var(--tgp-brand-blue-rgb) / 0.12), rgb(232 98 42 / 0.12)),
    var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--tgp-radius-lg);
  box-shadow: var(--tgp-elev-cta);
}

.tgp-page-cta__copy h2 {
  color: var(--wp--preset--color--contrast-3);
  font-family: var(--wp--preset--font-family--righteous);
  margin: 0;
}

.tgp-page-cta__copy p {
  color: var(--wp--preset--color--body-text);
}

/* Image + text feature band (breaks up the text-card sections). */
.tgp-feature__inner {
  /* Stretch so the media column matches the copy column height (no floating
     image with dead space beside taller text). */
  align-items: stretch;
  /* One fluid gap for the 50/50 split: ~64px desktop, tightening to ~24px on
     the mobile stack. Replaces the block default 96px (spacing|60) blockGap,
     which read looser than the rest of the rhythm and left the stacked mobile
     image disconnected from its copy. */
  gap: clamp(1.5rem, 4vw, 4rem);
}

.tgp-feature__media {
  min-height: 380px;
  border-radius: var(--tgp-radius-lg);
  box-shadow: var(--tgp-elev-2);
  background-color: var(--wp--preset--color--base-2);
}

/* Photo-backed feature media: holds the contextual-image <figure> (a real
   town/Featured Image) instead of a CSS background. The figure fills the
   media cell and the image covers it, inheriting the cell's rounded corners. */
.tgp-feature__media--photo {
  position: relative;
  overflow: hidden;
}

.tgp-feature__media--photo .tgp-contextual-image {
  position: absolute;
  inset: 0;
  margin: 0;
}

.tgp-feature__media--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

/* The feature copy is a left-aligned column, but the eyebrow/headline use the
   shared .section-eyebrow / .section-headline classes which default to centered
   (built for full-width sections). Left-align them here so the whole column
   (eyebrow, heading, body, checklist) reads as one consistent left block
   instead of a centered header floating over left-aligned body text. */
.tgp-feature__copy .section-eyebrow,
.tgp-feature__copy .section-headline {
  text-align: left;
}

.tgp-feature__checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--wp--preset--spacing--20);
}

.tgp-feature__checks li {
  position: relative;
  padding-left: 2rem;
  color: var(--wp--preset--color--contrast-4);
  font-size: var(--wp--preset--font-size--lg);
}

.tgp-feature__checks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--wp--preset--color--accent-1);
  font-weight: 800;
}

/* Alternating layout: add .tgp-feature--reverse to the section to flip the
   image to the RIGHT. Stacking a normal feature then a --reverse one gives the
   classic zigzag (image left / image right / left ...) that reads as a
   deliberately designed page instead of a stack of identical bands. Editor-
   friendly: drop the class in Advanced > Additional CSS class(es). Mobile
   always stacks image-first (the media query below wins via order:-1). */
.tgp-feature--reverse .tgp-feature__media { order: 1; }
.tgp-feature--reverse .tgp-feature__copy { order: 0; }

@media (max-width: 781px) {
  .tgp-feature__inner {
    grid-template-columns: 1fr;
  }
  .tgp-feature__media {
    min-height: 240px;
    order: -1;
  }
}

/* Pricing guide CTA: branded band that nudges to pricing.tgplumber.com.
   Background/shadow live on the alignfull outer section (.tgp-pricing-cta)
   so the band spans edge-to-edge like its sibling proof bands, instead of
   being boxed inside the alignwide inner wrapper. */
.tgp-pricing-cta {
  background: var(--wp--preset--gradient--cream-wash);
  color: var(--wp--preset--color--contrast-3);
  position: relative;
}

.tgp-pricing-cta::before {
  background: var(--gradient-rainbow-h);
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.tgp-pricing-cta__inner {
  position: relative;
}

.tgp-pricing-cta__eyebrow {
  color: var(--tgp-azure-text);
  font-family: var(--wp--preset--font-family--righteous);
  letter-spacing: 0.12em;
  margin: 0;
  text-transform: uppercase;
}

.tgp-pricing-cta__title {
  color: var(--wp--preset--color--contrast-3);
  font-family: var(--wp--preset--font-family--righteous);
  margin: 0;
}

.tgp-pricing-cta__text {
  color: var(--wp--preset--color--body-text);
}

.tgp-pricing-cta__button-call .wp-block-button__link {
  border-color: rgb(0 33 165 / 0.45);
  color: var(--wp--preset--color--contrast-3);
}

.tgp-service-quote {
  color: var(--wp--preset--color--base);
  overflow: hidden;
  position: relative;
}

.tgp-service-quote::before {
  background: var(--gradient-rainbow-h);
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.tgp-service-quote__inner {
  align-items: center;
  display: grid;
  gap: var(--wp--preset--spacing--60);
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  position: relative;
  z-index: 1;
}

.tgp-service-quote__proof {
  display: grid;
  gap: var(--wp--preset--spacing--20);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tgp-service-quote__proof-item {
  backdrop-filter: blur(8px);
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--tgp-card-radius);
}

.tgp-service-quote__proof-item h3,
.tgp-service-quote__proof-item p {
  margin: 0;
}

.tgp-service-quote__form-card {
  border-radius: var(--tgp-radius-lg);
  box-shadow: 0 22px 70px rgb(0 0 0 / 0.24);
}

.tgp-problem-solution {
  position: relative;
}

.tgp-problem-solution__header {
  margin-inline: auto;
  text-align: center;
}

.tgp-problem-solution__intro {
  color: var(--wp--preset--color--body-text);
  line-height: 1.7;
}

.tgp-problem-solution__grid {
  display: grid;
  gap: var(--tgp-card-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tgp-problem-solution__panel {
  border-radius: var(--tgp-card-radius);
  box-shadow: var(--tgp-card-shadow);
  overflow: hidden;
  position: relative;
}

.tgp-problem-solution__panel::before {
  background: var(--gradient-rainbow-h);
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.tgp-problem-solution__panel--problem {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
}

.tgp-problem-solution__panel--solution {
  background:
    radial-gradient(circle at 88% 12%, rgb(245 166 35 / 0.18), transparent 18rem),
    linear-gradient(135deg, var(--wp--preset--color--contrast) 0%, var(--wp--preset--color--contrast-2) 100%);
  border: 1px solid rgb(255 255 255 / 0.16);
  color: var(--wp--preset--color--base);
}

.tgp-problem-solution__label {
  color: var(--wp--preset--color--contrast-3);
  line-height: 1.05;
  margin: 0;
}

.tgp-problem-solution__panel--solution .tgp-problem-solution__label,
.tgp-problem-solution__panel--solution :where(p, li) {
  color: var(--wp--preset--color--white-overlay-85);
}

.tgp-problem-solution__panel :where(p, li) {
  line-height: 1.7;
}

.tgp-check-list {
  display: grid;
  gap: var(--wp--preset--spacing--20);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Dot via absolute positioning, NOT a grid column: with display:grid every
   child element of the li becomes a separate grid item, so an li containing
   <strong> + <a> pushed the link into the 0.85rem dot column and wrapped it
   one word per line. Padding + absolute dot keeps inline content flowing
   no matter how the li content is structured. */
.tgp-check-list li {
  padding-left: calc(0.85rem + var(--wp--preset--spacing--20));
  position: relative;
}

.tgp-check-list li::before {
  background: var(--gradient-rainbow);
  border-radius: 999px;
  content: "";
  height: 0.85rem;
  left: 0;
  position: absolute;
  top: 0.42em;
  width: 0.85rem;
}

.tgp-service-family-guide__header,
.tgp-service-decision__header {
  margin-inline: auto;
  text-align: center;
}

.tgp-service-family-guide__grid {
  display: grid;
  gap: var(--wp--preset--spacing--25);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tgp-service-family-card {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--tgp-card-radius);
  box-shadow: var(--tgp-card-shadow);
  min-height: 100%;
  position: relative;
}

.tgp-service-family-card::before {
  background: var(--gradient-rainbow-h);
  border-radius: var(--tgp-card-radius) var(--tgp-card-radius) 0 0;
  content: "";
  height: 4px;
  inset: -1px -1px auto;
  position: absolute;
}

.tgp-service-family-card--cta {
  background:
    linear-gradient(135deg, rgb(var(--tgp-brand-blue-rgb) / 0.12), rgb(232 98 42 / 0.12)),
    var(--wp--preset--color--base);
}

.tgp-service-family-card h3 {
  font-family: var(--wp--preset--font-family--righteous);
  line-height: 1.16;
}

.tgp-service-family-card h3 a {
  color: var(--wp--preset--color--contrast-3);
  text-decoration: none;
}

.tgp-service-family-card h3 a:hover {
  color: var(--wp--preset--color--primary);
}

.tgp-service-family-card p {
  color: var(--wp--preset--color--body-text);
  line-height: 1.65;
}

.tgp-service-decision {
  color: var(--wp--preset--color--base);
  overflow: hidden;
  position: relative;
}

.tgp-service-decision::before {
  background: var(--gradient-rainbow-h);
  content: "";
  height: 5px;
  inset: 0 0 auto;
  position: absolute;
}

.tgp-service-decision__header p {
  color: rgb(255 255 255 / 0.82);
}

.tgp-service-decision__grid {
  display: grid;
  gap: var(--tgp-card-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tgp-service-decision__card {
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: var(--tgp-card-radius);
  box-shadow: var(--tgp-elev-3);
  color: var(--wp--preset--color--base);
  min-height: 100%;
}

.tgp-service-decision__card--urgent {
  background:
    linear-gradient(145deg, rgb(255 255 255 / 0.18), rgb(255 255 255 / 0.08)),
    linear-gradient(135deg, rgb(232 98 42 / 0.34), rgb(61 139 240 / 0.2));
}

.tgp-service-decision__card h3 {
  color: var(--wp--preset--color--base);
  font-family: var(--wp--preset--font-family--righteous);
  line-height: 1.14;
}

.tgp-service-decision__card :where(p, li) {
  color: rgb(255 255 255 / 0.84);
  line-height: 1.65;
}

.tgp-service-decision__label {
  color: var(--wp--preset--color--accent-4) !important;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tgp-service-proof {
  color: var(--wp--preset--color--base);
  overflow: hidden;
  position: relative;
}

.tgp-service-proof::before {
  background: var(--gradient-rainbow-h);
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.tgp-service-proof__inner {
  position: relative;
  z-index: 1;
}

.tgp-service-proof__header {
  margin-inline: auto;
  text-align: center;
}

.tgp-service-proof__intro {
  color: var(--wp--preset--color--white-overlay-85);
  line-height: 1.7;
}

.tgp-service-proof__grid {
  display: grid;
  gap: var(--tgp-card-gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tgp-service-proof__card {
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--tgp-card-radius);
  box-shadow: var(--tgp-elev-2);
  min-height: 100%;
  padding: var(--tgp-card-padding);
}

.tgp-service-proof__metric {
  background: var(--gradient-rainbow-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.05;
  margin: 0;
}

.tgp-service-proof__card h3 {
  color: var(--wp--preset--color--base);
  font-family: var(--wp--preset--font-family--righteous);
  margin: 0;
}

.tgp-service-proof__card p {
  color: var(--wp--preset--color--white-overlay-85);
  line-height: 1.7;
  margin: 0;
}

.tgp-neighborhood-proof {
  color: var(--wp--preset--color--base);
  overflow: hidden;
  position: relative;
}

.tgp-neighborhood-proof::before {
  background: var(--gradient-rainbow-h);
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.tgp-neighborhood-proof__inner {
  position: relative;
  z-index: 1;
}

.tgp-neighborhood-proof__intro-row {
  margin-bottom: 0;
}

.tgp-neighborhood-proof__intro {
  color: var(--wp--preset--color--white-overlay-85);
  line-height: 1.7;
}

.tgp-neighborhood-proof__callout,
.tgp-neighborhood-proof__card {
  backdrop-filter: blur(8px);
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--tgp-card-radius);
  box-shadow: var(--tgp-elev-2);
}

.tgp-neighborhood-proof__metric {
  background: var(--gradient-rainbow-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  margin: 0;
}

.tgp-neighborhood-proof__callout h3,
.tgp-neighborhood-proof__card h3 {
  color: var(--wp--preset--color--base);
  font-family: var(--wp--preset--font-family--righteous);
  margin: 0;
}

.tgp-neighborhood-proof__callout p,
.tgp-neighborhood-proof__card p {
  color: var(--wp--preset--color--white-overlay-85);
  line-height: 1.7;
  margin: 0;
}

.tgp-neighborhood-proof__grid {
  display: grid;
  gap: var(--tgp-card-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tgp-location-archetypes__header,
.tgp-location-response__header {
  margin-inline: auto;
  text-align: center;
}

.tgp-location-archetypes__grid {
  display: grid;
  gap: var(--tgp-card-gap);
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.tgp-location-archetype-card {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--tgp-card-radius);
  box-shadow: var(--tgp-card-shadow);
  min-height: 100%;
  position: relative;
}

.tgp-location-archetype-card::before {
  background: var(--gradient-rainbow-h);
  border-radius: var(--tgp-card-radius) var(--tgp-card-radius) 0 0;
  content: "";
  height: 4px;
  inset: -1px -1px auto;
  position: absolute;
}

.tgp-location-archetype-card h3 {
  font-family: var(--wp--preset--font-family--righteous);
  line-height: 1.16;
}

.tgp-location-archetype-card h3 a {
  color: var(--wp--preset--color--contrast-3);
  text-decoration: none;
}

.tgp-location-archetype-card h3 a:hover {
  color: var(--wp--preset--color--primary);
}

.tgp-location-archetype-card p {
  color: var(--wp--preset--color--body-text);
  line-height: 1.65;
}

.tgp-location-response {
  color: var(--wp--preset--color--base);
  overflow: hidden;
  position: relative;
}

.tgp-location-response::before {
  background: var(--gradient-rainbow-h);
  content: "";
  height: 5px;
  inset: 0 0 auto;
  position: absolute;
}

.tgp-location-response__header p {
  color: rgb(255 255 255 / 0.82);
}

.tgp-location-response__grid {
  display: grid;
  gap: var(--tgp-card-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tgp-location-response__card {
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: var(--tgp-card-radius);
  box-shadow: var(--tgp-elev-3);
  color: var(--wp--preset--color--base);
  min-height: 100%;
}

.tgp-location-response__card--urgent {
  background:
    linear-gradient(145deg, rgb(255 255 255 / 0.18), rgb(255 255 255 / 0.08)),
    linear-gradient(135deg, rgb(232 98 42 / 0.34), rgb(61 139 240 / 0.2));
}

.tgp-location-response__card h3 {
  color: var(--wp--preset--color--base);
  font-family: var(--wp--preset--font-family--righteous);
  line-height: 1.14;
}

.tgp-location-response__card p {
  color: rgb(255 255 255 / 0.84);
  line-height: 1.65;
}

.tgp-location-response__label {
  color: var(--wp--preset--color--accent-4) !important;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tgp-location-areas,
.tgp-service-coverage {
  color: var(--wp--preset--color--contrast-3);
  position: relative;
}

.tgp-location-areas::before,
.tgp-service-coverage::before {
  background: var(--gradient-rainbow-h);
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.tgp-location-areas__inner,
.tgp-service-coverage__inner {
  margin-inline: auto;
  text-align: center;
}

.tgp-location-areas__pills,
.tgp-service-coverage__pills {
  margin-top: var(--wp--preset--spacing--20);
}

.tgp-location-areas__pills p,
.tgp-service-coverage__pills p {
  margin: 0;
}

/* Round town thumbnail inside area pills (from each area page's featured
   image); pills without a resolvable photo render text-only. */
.tgp-area-pill__thumb {
  border: 1px solid rgb(var(--tgp-brand-blue-rgb) / 0.35);
  border-radius: 50%;
  height: 1.75rem;
  margin-left: -0.65rem;
  margin-right: 0.55rem;
  object-fit: cover;
  width: 1.75rem;
}

.tgp-location-area-pill,
.tgp-service-area-pill {
  align-items: center;
  border: 2px solid var(--tgp-azure-text);
  border-radius: 999px;
  color: var(--tgp-azure-text);
  display: inline-flex;
  font-family: var(--wp--preset--font-family--lexend-deca);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  min-height: 44px;
  padding: 0.7rem 1.35rem;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.tgp-location-area-pill:hover,
.tgp-location-area-pill:focus-visible,
.tgp-service-area-pill:hover,
.tgp-service-area-pill:focus-visible {
  background: var(--tgp-azure-text);
  color: var(--wp--preset--color--base);
  transform: translateY(-2px);
}

/* Blog index and single posts
   -------------------------------------------------------------------------- */
/* .tgp-blog-hero and .tgp-category-hero are NOT in these flat-band groups:
   both became tgp-page-hero--cover heroes, so the cover system owns their
   background (gradient fallback + rainbow bar come from the .tgp-page-hero
   base). */
.tgp-archive-hero,
.tgp-search-hero,
.tgp-not-found-hero,
.tgp-post-hero {
  background:
    radial-gradient(circle at 90% 20%, rgb(245 166 35 / 0.24), transparent 24rem),
    radial-gradient(circle at 12% 78%, rgb(var(--tgp-brand-blue-rgb) / 0.28), transparent 28rem),
    linear-gradient(135deg, var(--wp--preset--color--contrast) 0%, var(--wp--preset--color--contrast-2) 100%);
  color: var(--wp--preset--color--base);
  overflow: hidden;
  position: relative;
}

.tgp-archive-hero::after,
.tgp-search-hero::after,
.tgp-not-found-hero::after,
.tgp-post-hero::after {
  background: var(--gradient-rainbow-h);
  bottom: 0;
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  right: 0;
}

.tgp-blog-hero__inner,
.tgp-archive-hero__inner,
.tgp-category-hero__inner,
.tgp-search-hero__inner,
.tgp-not-found-hero__inner,
.tgp-post-hero__inner {
  padding-top: var(--site-header-height, 80px);
}

.tgp-post-hero {
  align-items: end;
  display: flex;
  min-height: 560px;
  overflow: hidden;
}

.tgp-post-hero__inner {
  position: relative;
  text-align: center;
  z-index: 2;
}

.tgp-post-hero__copy {
  margin-inline: auto;
}

.tgp-post-hero > .tgp-post-hero__image {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  height: 100%;
  inset: 0;
  margin: 0;
  max-width: none !important;
  position: absolute;
  width: 100% !important;
  z-index: 0;
}

.tgp-post-hero > .tgp-post-hero__image::after {
  background:
    /* Legibility: dark anchored at the very bottom for the title; the upper
       two-thirds stays light so the tie-dye can breathe. Dark layer is on top
       (listed first) so it always protects the title regardless of color. */
    linear-gradient(180deg, rgb(var(--tgp-ink-rgb) / 0.04) 0%, rgb(var(--tgp-ink-rgb) / 0.18) 48%, rgb(var(--tgp-ink-rgb) / 0.62) 76%, rgb(var(--tgp-ink-rgb) / 0.90) 100%),
    /* Pushed-further tie-dye spectrum across the upper field — magenta, purple,
       yellow, orange, green at full punch. Minimal blue (the old muddy wash). */
    radial-gradient(60% 66% at 86% 12%, rgb(238 43 140 / 0.68) 0%, transparent 58%),
    radial-gradient(54% 58% at 10% 22%, rgb(122 60 221 / 0.60) 0%, transparent 58%),
    radial-gradient(58% 52% at 46% 6%,  rgb(255 204 0 / 0.42) 0%, transparent 54%),
    radial-gradient(60% 60% at 84% 54%, rgb(249 122 31 / 0.60) 0%, transparent 60%),
    radial-gradient(54% 56% at 14% 58%, rgb(34 195 93 / 0.40) 0%, transparent 60%);
}

.tgp-post-hero > .tgp-post-hero__image img {
  min-height: 100%;
}

.tgp-post-hero::before {
  background: rgb(0 0 0 / 0.08);
  content: "";
  inset: 0;
  position: absolute;
  z-index: 1;
}

.tgp-blog-hero__title,
.tgp-archive-hero__title,
.tgp-category-hero__title,
.tgp-search-hero__title,
.tgp-not-found-hero__title,
.tgp-post-hero__title {
  color: var(--wp--preset--color--base);
  font-family: var(--wp--preset--font-family--righteous);
  line-height: 1.05;
  margin: 0;
  margin-inline: auto;
  max-width: 15ch;
  text-shadow: 0 2px 12px rgb(0 0 0 / 0.24);
}

.tgp-blog-hero__summary,
.tgp-archive-hero__description,
.tgp-archive-hero__fallback,
.tgp-category-hero__description,
.tgp-category-hero__fallback,
.tgp-search-hero__summary,
.tgp-not-found-hero__summary,
.tgp-post-hero__excerpt {
  color: var(--wp--preset--color--white-overlay-85);
  line-height: 1.7;
}

.tgp-archive-hero__description:empty,
.tgp-category-hero__description:empty {
  display: none;
}

.tgp-blog-hero__buttons .wp-block-button__link,
.tgp-archive-hero__buttons .wp-block-button__link,
.tgp-category-hero__buttons .wp-block-button__link,
.tgp-search-hero__buttons .wp-block-button__link,
.tgp-not-found-hero__buttons .wp-block-button__link {
  align-items: center;
  display: inline-flex;
  gap: var(--wp--preset--spacing--20);
}

.tgp-blog-hero .is-style-outline .wp-block-button__link,
.tgp-archive-hero .is-style-outline .wp-block-button__link,
.tgp-category-hero .is-style-outline .wp-block-button__link,
.tgp-search-hero .is-style-outline .wp-block-button__link,
.tgp-not-found-hero .is-style-outline .wp-block-button__link {
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 100px;
  color: currentColor;
  font-weight: 800;
}



.tgp-blog-categories__header {
  margin-inline: auto;
  text-align: center;
}

.tgp-blog-categories__intro {
  color: var(--wp--preset--color--body-text);
  line-height: 1.7;
}

.tgp-blog-categories__grid {
  display: grid;
  gap: var(--tgp-card-gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tgp-blog-category-card {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--tgp-card-radius);
  box-shadow: var(--tgp-card-shadow);
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  position: relative;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-lift);
}

.tgp-blog-category-card::before {
  background: var(--gradient-rainbow-h);
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.tgp-blog-category-card:hover {
  box-shadow: var(--tgp-card-shadow-hover);
  transform: translateY(-4px);
}

.tgp-blog-category-card__count {
  background: var(--gradient-rainbow-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  margin: 0;
}

.tgp-blog-category-card h3 {
  color: var(--wp--preset--color--contrast-3);
  font-family: var(--wp--preset--font-family--righteous);
  margin: 0;
}

.tgp-blog-category-card p {
  color: var(--wp--preset--color--body-text);
  line-height: 1.7;
}

.tgp-blog-category-card__link {
  margin-top: auto !important;
}

.tgp-blog-category-card__link a {
  align-items: center;
  /* primary (#1A73FF) is 4.25:1 on white -- fails WCAG AA (needs 4.5:1) at this
     weight/size. contrast-3 renders as #001565 off the homepage (the site-wide
     body:not(.home) override), which is 16.2:1 -- reuses an existing heavily-used
     token instead of introducing a new color for one component. */
  color: var(--wp--preset--color--contrast-3);
  display: inline-flex;
  font-weight: 800;
  gap: var(--wp--preset--spacing--20);
}

.tgp-blog-category-card__link a::after {
  content: "→";
  transition: transform var(--dur-fast) var(--ease-out);
}

.tgp-blog-category-card__link a:hover::after {
  transform: translateX(4px);
}

.tgp-post-hero__categories a,
.tgp-post-card__terms a,
.tgp-single-post__terms a {
  color: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}

/* Category/term links navigate to a distinct destination from the card's post
   link, so give them the theme's shared underline-on-hover cue (was the one
   interactive surface with no hover feedback). */
.tgp-post-hero__categories a:hover,
.tgp-post-card__terms a:hover,
.tgp-single-post__terms a:hover,
.tgp-post-hero__categories a:focus-visible,
.tgp-post-card__terms a:focus-visible,
.tgp-single-post__terms a:focus-visible {
  text-decoration-color: currentColor;
}

.tgp-post-hero__categories {
  color: var(--wp--preset--color--accent-4);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tgp-post-hero__meta {
  color: var(--wp--preset--color--white-overlay-65);
  justify-content: center;
}

.tgp-blog-index__results,
.tgp-archive-page__results,
.tgp-category-archive__results,
.tgp-search-page__results,
.tgp-single-post__body {
  background: var(--wp--preset--color--base);
}

.tgp-single-post__share-wrap {
  background: var(--wp--preset--color--base);
}

.tgp-single-post__share {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--20);
  justify-content: center;
  padding-block: var(--wp--preset--spacing--20);
}

.tgp-single-post__share-label {
  color: var(--wp--preset--color--contrast-4);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tgp-single-post__share a {
  background: var(--wp--preset--color--contrast-3);
  border-radius: 999px;
  color: var(--wp--preset--color--base);
  display: inline-flex;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 800;
  line-height: 1;
  min-height: 40px;
  padding-inline: var(--wp--preset--spacing--30);
  place-items: center;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.tgp-single-post__share a:hover {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--base);
  transform: translateY(-2px);
}

.tgp-search-hero__form,
.tgp-not-found-hero__form {
  max-width: 680px;
}

.tgp-search-hero__form .wp-block-search__inside-wrapper,
.tgp-not-found-hero__form .wp-block-search__inside-wrapper {
  background: rgb(255 255 255 / 0.1);
  border-color: rgb(255 255 255 / 0.24);
  box-shadow: 0 18px 48px rgb(0 0 0 / 0.16);
}

.tgp-search-hero__form .wp-block-search__input,
.tgp-not-found-hero__form .wp-block-search__input {
  color: var(--wp--preset--color--base);
}

.tgp-search-hero__form .wp-block-search__input::placeholder,
.tgp-not-found-hero__form .wp-block-search__input::placeholder {
  color: var(--wp--preset--color--white-overlay-65);
}

.tgp-not-found-hero__grid {
  display: grid;
  gap: var(--tgp-card-gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tgp-not-found-card {
  backdrop-filter: blur(8px);
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--tgp-card-radius);
  box-shadow: 0 18px 46px rgb(0 0 0 / 0.16);
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  position: relative;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-lift);
}

.tgp-not-found-card::before {
  background: var(--gradient-rainbow-h);
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.tgp-not-found-card:hover {
  background: rgb(255 255 255 / 0.12);
  border-color: rgb(255 255 255 / 0.24);
  transform: translateY(-4px);
}

.tgp-not-found-card h3 {
  color: var(--wp--preset--color--base);
  font-family: var(--wp--preset--font-family--righteous);
  margin: 0;
}

.tgp-not-found-card p {
  color: var(--wp--preset--color--white-overlay-75);
  line-height: 1.7;
}

.tgp-not-found-card__link {
  margin-top: auto !important;
}

.tgp-not-found-card__link a {
  align-items: center;
  color: var(--wp--preset--color--accent-4);
  display: inline-flex;
  font-weight: 800;
  gap: var(--wp--preset--spacing--20);
}

.tgp-not-found-card__link a::after {
  content: "→";
  transition: transform var(--dur-fast) var(--ease-out);
}

.tgp-not-found-card__link a:hover::after {
  transform: translateX(4px);
}

/* Post grids (blog index, home recent, related posts) center an incomplete final
   row instead of stranding the last card. Flex-wrap keeps columns adaptive
   (3 -> 2 -> 1 by width); a partial row centers, capped so a lone card isn't huge. */
.tgp-post-grid {
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--wp--preset--spacing--40) !important;
}

.tgp-post-grid,
.tgp-post-grid.is-layout-grid {
  display: flex;
}

.tgp-post-grid > * {
  flex: 1 1 22rem; /* basis tuned so 3 cards fit per row (4 won't) in the 1400 wide container; collapses 3->2->1 by width */
  max-width: 30rem; /* let the 3 grow to fill the row; caps a lone trailing card so it isn't huge */
}

.tgp-post-card {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--tgp-card-radius);
  box-shadow: var(--tgp-card-shadow);
  min-height: 100%;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-lift), box-shadow var(--dur-base) var(--ease-out);
}

.tgp-post-card:hover {
  box-shadow: var(--tgp-card-shadow-hover);
  transform: translateY(-3px);
}

.tgp-post-card__image {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, rgb(var(--tgp-brand-blue-rgb) / 0.14), rgb(232 98 42 / 0.14));
  margin: 0;
  overflow: hidden;
}

.tgp-post-card__image img {
  transition: transform var(--dur-base) var(--ease-out);
}

.tgp-post-card:hover .tgp-post-card__image img {
  transform: scale(1.04);
}

.tgp-post-card__body {
  padding: var(--tgp-card-padding);
}

.tgp-post-card__terms {
  /* azure-text, not primary/accent-1: this small text sits on the white
     card and accent-1 fails AA there (4.25:1). */
  color: var(--tgp-azure-text);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tgp-post-card__title {
  font-family: var(--wp--preset--font-family--righteous);
  line-height: 1.18;
  margin: 0;
}

.tgp-post-card__title a {
  color: var(--wp--preset--color--contrast-3);
}

.tgp-post-card__excerpt {
  color: var(--wp--preset--color--body-text);
  line-height: 1.7;
}

.tgp-post-card__meta {
  /* Deliberately de-emphasized meta (~4.9:1 on the white card, passes AA).
     Uses the shared --tgp-meta-muted token so the de-emphasis level is tunable
     without touching the load-bearing palette. (Matches core/post-date, which
     sets the same value in theme.json.) */
  color: var(--tgp-meta-muted);
}

.tgp-post-card__read-more {
  /* azure-text for AA on the white card (see __terms note). */
  color: var(--tgp-azure-text);
  display: inline-flex;
  font-weight: 800;
  gap: var(--wp--preset--spacing--20);
  margin-block-start: var(--wp--preset--spacing--20);
}

.tgp-post-card__read-more::after {
  content: "→";
  transition: transform var(--dur-fast) var(--ease-out);
}

.tgp-post-card__read-more:hover::after {
  transform: translateX(4px);
}

/* Post cards stay stacked at every width: full-bleed image on top, centered
   text below (same owner direction as hub cards). */
.tgp-post-card__body {
  text-align: center;
}

.tgp-query-pagination :where(a, span) {
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 999px;
  display: inline-flex;
  min-height: 2.5rem;
  min-width: 2.5rem;
  align-items: center;
  justify-content: center;
  padding-inline: var(--wp--preset--spacing--30);
}

/* Load-more enhancement (script.js): once JS takes over, the numbered links
   are hidden but stay in the DOM so crawlers and no-JS visitors keep real
   pagination. The button is a tie-dye pill riding the shared button system
   (.wp-element-button: shine sweep, hover lift, focus ring) with the same
   veil + text-shadow legibility treatment as the CTA gradient buttons. */
.js .tgp-query-pagination.has-load-more {
  display: none;
}

.tgp-load-more {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
  margin-top: var(--wp--preset--spacing--50);
}

.tgp-load-more__button {
  background: var(--gradient-rainbow-h);
  border: 0;
  border-radius: 100px;
  box-shadow: var(--tgp-cta-veil);
  color: var(--wp--preset--color--base);
  cursor: pointer;
  font-weight: 800;
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--60);
  text-shadow: var(--tgp-cta-text-shadow);
}

.tgp-load-more__button[aria-busy='true'] {
  cursor: wait;
  opacity: 0.8;
}

.tgp-load-more__status {
  color: var(--wp--preset--color--body-text);
  margin: 0;
}

.tgp-load-more__status:empty {
  display: none;
}

.tgp-single-post__article {
  color: var(--wp--preset--color--body-text);
  font-size: clamp(1.02rem, 0.24vw + 0.98rem, 1.12rem);
  min-width: 0;
}

.tgp-single-post__article :where(h2, h3, h4) {
  color: var(--wp--preset--color--contrast-3);
  font-family: var(--wp--preset--font-family--righteous);
  line-height: 1.18;
}

/* A heading directly following another heading (e.g. an h2 section title above
   an h3) read as one cramped block on the standard sibling gap. Give the
   second heading air so stacked headings breathe. */
.tgp-single-post__article :where(.wp-block-post-content) > :where(h2, h3, h4) + :where(h2, h3, h4) {
  margin-block-start: var(--wp--preset--spacing--40);
}

.tgp-single-post__article :where(p, li) {
  line-height: 1.8;
}

.tgp-single-post__article :where(.wp-block-quote) {
  background: var(--wp--preset--color--contrast-3);
  border-radius: 0 8px 8px 0;
  color: var(--wp--preset--color--base);
  margin-block: var(--wp--preset--spacing--40);
  padding: var(--tgp-card-padding);
  position: relative;
}

/* Tie-dye edge instead of a flat blue border — navy box, rainbow accent
   (matches the content-card ::before treatment). More tie-dye, less blue. */
.tgp-single-post__article :where(.wp-block-quote)::before {
  background: var(--gradient-rainbow);
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  top: 0;
  width: 5px;
}

.tgp-single-post__article :where(.wp-block-quote p) {
  color: var(--wp--preset--color--base);
}

/* Links inside the navy quote/offer-CTA boxes must stay white — the global
   azure prose-link color is 2.8:1 on this background. Declared after the
   prose-link rule so the equal-specificity tie resolves here. */
.tgp-single-post__article :where(.wp-block-quote) a {
  color: inherit;
  text-decoration-color: rgb(255 255 255 / 0.5);
}

.tgp-single-post__article :where(.wp-block-quote) a:hover {
  text-decoration-color: currentColor;
}

/* The class is doubled (same trick as .tgp-single-post__nav below) to clear
   Ollie's `.wp-block-separator:not(.is-style-dots)` and its .has-background
   twin, which set `border-bottom: 1px solid currentColor; height: 1px`. This
   rule used to be written with :where(), which contributes zero specificity --
   so it scored 0,1,0 against Ollie's 0,2,0 and lost outright: every separator
   in an article body rendered as a 1px currentColor hairline with the gradient
   squeezed inside it, not as a tie-dye bar. Keep the bare classes here. */
.tgp-single-post__article .wp-block-separator.wp-block-separator:not(.is-style-dots) {
  background: var(--gradient-rainbow-bar);
  border: 0;
  border-bottom: 0;
  height: 5px;
  min-height: 5px;
  max-width: none;
  width: 100%;
  opacity: 1;
  border-radius: 999px;
  box-shadow: var(--tgp-bar-shadow);
  /* Separators here act as section breaks before an h2, so they need more room
     than the 1rem the article's flow rhythm gives every other sibling. Margin
     is set on both sides and collapses against the next block's flow margin,
     so the gap is this value, not this value plus 1rem. */
  margin-block: var(--wp--preset--spacing--50);
}

.tgp-single-post__article :where(a) {
  color: var(--wp--preset--color--primary);
  font-weight: 700;
}

.tgp-single-post__article :where(.wp-block-post-content) > * + * {
  margin-block-start: var(--wp--preset--spacing--30);
}

.tgp-blog-sidebar-cta {
  background:
    linear-gradient(135deg, rgb(var(--tgp-brand-blue-rgb) / 0.12), rgb(232 98 42 / 0.12)),
    var(--wp--preset--color--base-2);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--tgp-radius-sm);
  box-shadow: var(--tgp-elev-cta);
}

.tgp-blog-sidebar-cta .tgp-proof-kicker {
  color: var(--wp--preset--color--primary);
}

.tgp-blog-sidebar-cta h2 {
  color: var(--wp--preset--color--contrast-3);
  font-family: var(--wp--preset--font-family--righteous);
  margin: 0;
}

.tgp-blog-sidebar-cta p,
.tgp-blog-sidebar-cta li {
  color: var(--wp--preset--color--body-text);
}

.tgp-blog-sidebar-cta__links {
  display: grid;
  gap: var(--wp--preset--spacing--20);
  margin: 0;
  padding-left: 1.1rem;
}

.tgp-blog-sidebar-cta__links a {
  color: var(--wp--preset--color--primary);
  font-weight: 800;
}

.tgp-blog-sidebar-capture {
  background: rgb(255 255 255 / 0.72);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--tgp-radius-sm);
  padding: var(--tgp-card-padding-sm);
}

.tgp-blog-sidebar-capture:not(:has(.tgp-ghl-capture, .tgp-gravity-form)) {
  display: none;
}

.tgp-blog-sidebar-capture .tgp-ghl-capture {
  font-family: var(--wp--preset--font-family--lexend-deca) !important;
  gap: var(--wp--preset--spacing--20) !important;
}

.tgp-blog-sidebar-capture .tgp-ghl-capture label {
  color: var(--wp--preset--color--contrast-3) !important;
  font-size: var(--wp--preset--font-size--small) !important;
  font-weight: 800 !important;
}

.tgp-blog-sidebar-capture .tgp-ghl-capture input {
  background: var(--wp--preset--color--base) !important;
  border: 1px solid var(--wp--preset--color--border) !important;
  border-radius: var(--tgp-radius-sm) !important;
  color: var(--wp--preset--color--contrast-3) !important;
}

.tgp-blog-sidebar-capture .tgp-ghl-capture input:focus {
  border-color: var(--wp--preset--color--primary) !important;
  outline: 2px solid rgb(var(--tgp-brand-blue-rgb) / 0.18) !important;
}

.tgp-blog-sidebar-capture .tgp-ghl-capture__submit {
  background: var(--gradient-rainbow-h) !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 28px rgb(var(--tgp-navy-rgb) / 0.13) !important;
  color: var(--wp--preset--color--base) !important;
  font-family: var(--wp--preset--font-family--lexend-deca) !important;
  letter-spacing: 0.02em !important;
}

.tgp-blog-sidebar-capture .tgp-ghl-capture__message {
  color: var(--wp--preset--color--body-text) !important;
}

.tgp-blog-sidebar-capture .tgp-ghl-capture__message.is-error {
  color: var(--wp--preset--color--primary) !important;
}

.tgp-blog-sidebar-capture .gform_wrapper {
  margin-block-start: 0;
}

.tgp-blog-sidebar-capture :where(.gform_fields) {
  row-gap: var(--wp--preset--spacing--20);
}

.tgp-single-post__footer {
  border-top: 1px solid var(--wp--preset--color--border);
}

.tgp-single-post__nav a {
  color: var(--wp--preset--color--primary);
  font-weight: 800;
}

.tgp-single-post__newsletter {
  background:
    radial-gradient(circle at 12% 18%, rgb(0 174 239 / 0.1), transparent 22rem),
    radial-gradient(circle at 92% 78%, rgb(232 98 42 / 0.12), transparent 20rem),
    var(--wp--preset--color--base-2);
}

.tgp-single-post__newsletter-card {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--tgp-card-radius);
  box-shadow: var(--tgp-card-shadow-hover);
  display: grid;
  gap: var(--wp--preset--spacing--50);
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  overflow: hidden;
  position: relative;
}

.tgp-single-post__newsletter-card::before {
  background: var(--gradient-rainbow-h);
  content: "";
  height: 6px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.tgp-single-post__newsletter-copy h2 {
  color: var(--wp--preset--color--contrast-3);
  font-family: var(--wp--preset--font-family--righteous);
  line-height: 1.12;
  margin: 0;
  max-width: 16ch;
}

.tgp-single-post__newsletter-copy p {
  color: var(--wp--preset--color--body-text);
  line-height: 1.7;
}

.tgp-single-post__newsletter-form {
  align-self: center;
  background:
    linear-gradient(135deg, rgb(var(--tgp-brand-blue-rgb) / 0.1), rgb(232 98 42 / 0.1)),
    var(--wp--preset--color--base-2);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--tgp-radius-sm);
  padding: var(--tgp-card-padding);
}

.tgp-single-post__newsletter-form .gform_wrapper {
  margin-block-start: 0;
}

.tgp-single-post__newsletter-form :where(.gform_fields) {
  row-gap: var(--wp--preset--spacing--20);
}

.tgp-single-post__newsletter-form .tgp-ghl-capture {
  font-family: var(--wp--preset--font-family--lexend-deca) !important;
  gap: var(--wp--preset--spacing--20) !important;
}

.tgp-single-post__newsletter-form .tgp-ghl-capture label {
  color: var(--wp--preset--color--contrast-3) !important;
  font-size: var(--wp--preset--font-size--small) !important;
  font-weight: 800 !important;
}

.tgp-single-post__newsletter-form .tgp-ghl-capture input {
  background: var(--wp--preset--color--base) !important;
  border: 1px solid var(--wp--preset--color--border) !important;
  border-radius: var(--tgp-radius-sm) !important;
  color: var(--wp--preset--color--contrast-3) !important;
}

.tgp-single-post__newsletter-form .tgp-ghl-capture__submit {
  background: var(--gradient-rainbow-h) !important;
  border-radius: 999px !important;
  color: var(--wp--preset--color--base) !important;
  font-family: var(--wp--preset--font-family--lexend-deca) !important;
  letter-spacing: 0.02em !important;
}

.tgp-single-post__newsletter-form .tgp-ghl-capture__message {
  color: var(--wp--preset--color--body-text) !important;
}

.tgp-single-post__author-band {
  background:
    radial-gradient(circle at 14% 12%, rgb(0 174 239 / 0.16), transparent 22rem),
    radial-gradient(circle at 88% 80%, rgb(232 98 42 / 0.18), transparent 24rem),
    var(--wp--preset--color--contrast-3);
  color: var(--wp--preset--color--base);
}

.tgp-single-post__author-card,
.tgp-single-post__cta {
  backdrop-filter: blur(8px);
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: var(--tgp-card-radius);
  box-shadow: 0 22px 64px rgb(0 0 0 / 0.22);
}

.tgp-single-post__author-card {
  margin-bottom: var(--wp--preset--spacing--40);
}

.tgp-single-post__author-card .tgp-proof-kicker,
.tgp-single-post__cta .tgp-proof-kicker {
  color: var(--wp--preset--color--accent-4);
}

.tgp-single-post__author-card,
.tgp-single-post__author-card a,
.tgp-single-post__author-card p,
.tgp-single-post__cta,
.tgp-single-post__cta p {
  color: var(--wp--preset--color--white-overlay-85);
}

.tgp-single-post__author-card .wp-block-post-author-name,
.tgp-single-post__author-card .wp-block-post-author-name a,
.tgp-single-post__cta h2 {
  color: var(--wp--preset--color--base);
}

.tgp-single-post__author-card .wp-block-avatar img {
  border: 2px solid rgb(255 255 255 / 0.24);
}

.tgp-single-post__cta h2,
.tgp-single-post__related h2 {
  font-family: var(--wp--preset--font-family--righteous);
  margin-inline: auto;
  max-width: 16ch;
}

.tgp-single-post__cta .is-style-outline .wp-block-button__link {
  background: transparent;
  border-color: rgb(255 255 255 / 0.55);
  color: var(--wp--preset--color--base);
}

.tgp-single-post__related {
  background: var(--wp--preset--color--base-2);
}/* Homepage support sections
   -------------------------------------------------------------------------- */
.tgp-front-page {
  overflow: clip;
}

.tgp-front-page > * {
  margin-block-start: 0 !important;
}

.tgp-blog-index > *,
.tgp-archive-page > *,
.tgp-category-archive > *,
.tgp-search-page > *,
.tgp-service-page > *,
.tgp-services-index-page > *,
.tgp-location-page > *,
.tgp-locations-index-page > *,
.tgp-about-page > *,
.tgp-contact-page > *,
.tgp-reviews-page > *,
.tgp-membership-page > *,
.tgp-hiring-page > *,
.tgp-community-page > *,
.tgp-extended-area-page > * {
  margin-block-start: 0 !important;
}

.tgp-home-section-header h2 {
  color: var(--wp--preset--color--contrast-3);
  font-family: var(--wp--preset--font-family--righteous);
  line-height: 1.12;
  margin: 0;
}

.tgp-home-areas__inner,
.tgp-home-guides__inner {
  display: grid;
  gap: var(--wp--preset--spacing--50);
}

.tgp-home-areas__grid {
  display: grid;
  gap: var(--tgp-card-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Homepage area tiles: featured-image photo + neighborhood name. The image
   reuses .tgp-hub-card__media (same renderer as the locations hub), the name
   bar keeps the rainbow-border brand accent the old text pills had. */
.tgp-home-area-card {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--tgp-card-radius);
  box-shadow: var(--tgp-card-shadow);
  overflow: hidden;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tgp-home-area-card:hover {
  box-shadow: var(--tgp-card-shadow-hover);
  transform: translateY(-2px);
}

.tgp-home-area-card:hover .tgp-hub-card__media img {
  transform: scale(1.04);
}

.tgp-home-area-card__name {
  border-top: 3px solid transparent;
  border-image: var(--gradient-rainbow-h) 1;
  font-family: var(--wp--preset--font-family--righteous);
  margin: 0;
  padding: var(--wp--preset--spacing--25) var(--wp--preset--spacing--30);
  text-align: center;
}

.tgp-home-area-card__name a {
  color: var(--wp--preset--color--contrast-3);
  text-decoration: none;
}

/* Stretch the name link over the whole tile so the photo is clickable too. */
.tgp-home-area-card__name a::after {
  content: "";
  inset: 0;
  position: absolute;
}

.tgp-related-section__inner,
.tgp-faq-section__inner {
  display: grid;
  gap: var(--wp--preset--spacing--50);
}

.tgp-related-section__header h2,
.tgp-faq-section__header h2 {
  color: var(--wp--preset--color--contrast-3);
  font-family: var(--wp--preset--font-family--righteous);
  line-height: 1.12;
  margin: 0;
}

/* Related-links grid: same trailing-row centering as the other card grids. */
/* Auto-fit grid: cards fill each row evenly for ANY count, so a 4th/5th card
   never orphans as a lone centered card below a row of 3 (the old flex + center
   behavior). Trailing cards extend the row instead of floating. */
.tgp-related-grid,
.tgp-related-grid.is-layout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--tgp-card-gap);
  align-items: stretch;
}

.tgp-related-card {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--tgp-card-radius);
  box-shadow: var(--tgp-card-shadow);
  /* height:100% fills the grid cell so cards in a row share an equal height,
     sized to the row's content. (The old min-height:100% resolved against a
     tall container and stretched every card far past its content.) */
  height: 100%;
  padding: var(--tgp-card-padding);
  position: relative;
}

.tgp-related-card::before {
  background: var(--gradient-rainbow-h);
  content: "";
  height: 4px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.tgp-related-card h3 {
  font-size: var(--wp--preset--font-size--lg);
  margin: 0 0 var(--wp--preset--spacing--20);
}

.tgp-related-card h3 a {
  color: var(--wp--preset--color--contrast-3);
}

.tgp-related-card p {
  color: var(--wp--preset--color--body-text);
  line-height: 1.7;
  margin: 0;
}

.tgp-faq-list {
  display: grid;
  gap: var(--wp--preset--spacing--20);
  margin-inline: auto;
  max-width: 900px;
}

/* Accordion chrome (border, radius, summary indicator, open state) is shared
   with .tgp-faq__item above — only the background differs, because these items
   sit on a white `base` section while the interior-page FAQ sits on cream. */
.tgp-faq-item {
  background: var(--wp--preset--color--base-2);
}

.tgp-faq-item > :not(summary) {
  color: var(--wp--preset--color--body-text);
  line-height: 1.75;
}

.tgp-post-grid--home {
  gap: var(--wp--preset--spacing--40) !important;
}

@media (max-width: 900px) {
  .tgp-page-hero__grid {
    gap: var(--wp--preset--spacing--40);
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .tgp-page-hero__title {
    max-width: 14ch;
  }

  .tgp-page-cta__buttons {
    justify-content: left;
  }

  .tgp-index-grid > * {
    flex-basis: calc((100% - var(--wp--preset--spacing--30)) / 2);
    max-width: calc((100% - var(--wp--preset--spacing--30)) / 2);
  }

  .tgp-hub-grid > *,
  .tgp-locations-hub-grid .tgp-hub-grid > * {
    flex-basis: calc((100% - var(--wp--preset--spacing--30)) / 2);
    max-width: calc((100% - var(--wp--preset--spacing--30)) / 2);
  }

  .tgp-services-triage__grid,
  .tgp-locations-proof__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tgp-single-post__layout {
    grid-template-columns: 1fr;
  }

  .tgp-post-hero {
    min-height: 520px;
  }

  .tgp-post-hero > .tgp-post-hero__image {
    aspect-ratio: auto;
    min-height: 100%;
  }

  .tgp-single-post__sidebar {
    position: static;
  }

  .tgp-single-post__author-card {
    align-items: center !important;
    flex-direction: column !important;
    text-align: center;
  }

  .tgp-single-post__newsletter-card {
    grid-template-columns: 1fr;
  }  .tgp-service-quote__inner {
    grid-template-columns: 1fr;
  }

  .tgp-community-impact__grid {
    grid-template-columns: 1fr;
  }

  .tgp-home-areas__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tgp-blog-categories__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tgp-reviews-wall__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Explicit 2-up at tablet so 4 cards read as a balanced 2x2 instead of an
     auto-fit 3+1 with a stretched trailing card. */
  .tgp-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tgp-problem-solution__grid {
    grid-template-columns: 1fr;
  }

  .tgp-service-family-guide__grid,
  .tgp-service-decision__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tgp-service-proof__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tgp-location-archetypes__grid,
  .tgp-location-response__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tgp-neighborhood-proof__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .tgp-page-hero {
    padding-bottom: var(--wp--preset--spacing--50) !important;
    padding-left: var(--wp--preset--spacing--30) !important;
    padding-right: var(--wp--preset--spacing--30) !important;
    padding-top: var(--wp--preset--spacing--50) !important;
  }

  .tgp-page-hero__grid {
    gap: var(--tgp-card-gap);
    padding-top: calc(var(--site-header-height, 80px) - var(--wp--preset--spacing--20));
  }

  .tgp-contextual-image--hero {
    aspect-ratio: 16 / 11;
    border-radius: var(--tgp-card-radius);
  }

  .tgp-post-hero > .tgp-contextual-image--hero {
    aspect-ratio: auto;
    border-radius: 0;
  }

  .tgp-single-post__share {
    justify-content: flex-start;
  }

  .tgp-single-post__share a {
    min-height: 38px;
    padding-inline: var(--wp--preset--spacing--20);
  }

  .tgp-page-hero__proof,
  .tgp-page-cta__inner,
  .tgp-service-quote__form-card,
  .tgp-hiring-application__form-card {
    padding: var(--wp--preset--spacing--30) !important;
  }

  .tgp-index-grid > * {
    flex-basis: 100%;
    max-width: 100%;
  }

  .tgp-hub-grid > *,
  .tgp-locations-hub-grid .tgp-hub-grid > * {
    flex-basis: 100%;
    max-width: 100%;
  }

  .tgp-services-triage__grid,
  .tgp-locations-proof__grid {
    grid-template-columns: 1fr;
  }

  .tgp-services-triage__quick-links,
  .tgp-locations-proof__band {
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--wp--preset--spacing--30) !important;
  }

  .tgp-index-card {
    padding: var(--tgp-card-padding-sm);
  }

  .tgp-services-index-grid .tgp-index-card::after {
    bottom: var(--tgp-card-padding-sm);
    height: 2rem;
    right: var(--tgp-card-padding-sm);
    width: 2rem;
  }

  .tgp-blog-hero,
  .tgp-archive-hero,
  .tgp-category-hero,
  .tgp-search-hero,
  .tgp-not-found-hero,
  .tgp-post-hero{
    padding-left: var(--wp--preset--spacing--30) !important;
    padding-right: var(--wp--preset--spacing--30) !important;
  }

  .tgp-post-card__body,
  .tgp-blog-category-card,
  .tgp-blog-sidebar-cta {
    padding: var(--wp--preset--spacing--30) !important;
  }

  .tgp-home-areas__grid {
    grid-template-columns: 1fr;
  }

  .tgp-blog-categories__grid {
    grid-template-columns: 1fr;
  }

  .tgp-not-found-hero__grid {
    grid-template-columns: 1fr;
  }

  .tgp-reviews-wall__grid {
    grid-template-columns: 1fr;
  }

  .tgp-review-wall-card {
    padding: var(--wp--preset--spacing--30) !important;
  }

  .tgp-related-grid {
    grid-template-columns: 1fr;
  }

  .tgp-location-archetypes__grid,
  .tgp-location-response__grid {
    grid-template-columns: 1fr;
  }

  .tgp-service-family-guide__grid,
  .tgp-service-decision__grid {
    grid-template-columns: 1fr;
  }

  .tgp-service-proof__grid {
    grid-template-columns: 1fr;
  }

  .tgp-service-quote__proof {
    grid-template-columns: 1fr;
  }

  .tgp-related-card,
  .tgp-problem-solution__panel,
  .tgp-service-family-card,
  .tgp-service-decision__card,
  .tgp-location-archetype-card,
  .tgp-location-response__card,
  .tgp-service-proof__card,
  .tgp-neighborhood-proof__callout,
  .tgp-neighborhood-proof__card,
  .tgp-impact-card,
  .tgp-hiring-application__proof-item {
    padding: var(--tgp-card-padding-sm);
  }

  .tgp-hiring-application__proof {
    grid-template-columns: 1fr;
  }}

/* Navigation — Parent-level rules (can't scope to nav block)
   -------------------------------------------------------------------------- */
.wp-block-template-part:has(.wp-block-navigation .is-menu-open),
header:has(.wp-block-navigation .is-menu-open) {
  z-index: 100001;
  position: relative;
}

footer.wp-block-template-part,
footer.wp-block-template-part > .wp-block-group {
  position: relative;
  z-index: 1;
}

[class*="site-footer"],
[class*="footer-section"] {
  margin-block-start: 0 !important;
}

/* Footer
   -------------------------------------------------------------------------- */
/* Persistent call pill, desktop only.
   tgp-service-cta.php positions itself bottom-LEFT, which is where this theme
   puts the .tgp-spf article flyout -- the two would sit on top of each other on
   a single post (the flyout wins on z-index, so the pill would simply never be
   seen). Move the pill to the bottom right. Under 768px both are already
   display:none in the mobile block above, where .tgp-mobile-cta takes over, so
   this only ever applies on desktop.

   The class is doubled because tgp-service-cta.php prints its own style block
   from wp_footer, i.e. AFTER this stylesheet -- at equal specificity the plugin
   wins on source order, and a single-class override left `left:18px` in place
   alongside `right:18px`, stretching the pill across the whole viewport. */
@media (min-width: 768px) {
  .tgp-service-cta.tgp-service-cta {
    right: 18px;
    left: auto;
  }

  .tgp-service-cta.tgp-service-cta .tgp-service-cta__panel {
    right: 0;
    left: auto;
  }
}

/* The footer is the largest flat surface on the site -- a ~520px slab of
   full-saturation band blue on every page, which read as "very blue" (owner,
   2026-08-15). Rather than change the brand colour, give the slab depth:
   a vertical wash that sinks toward the deep navy at the bottom edge, and two
   soft waves rising out of it. Both are paint-only layers on an element that
   already exists -- no markup change, no request (the SVG is inlined), and
   nothing animates, so this costs nothing at runtime.

   The waves are white at 4-6%, well under any contrast threshold, so the white
   footer text and the white-overlay-65 links are unaffected. The rainbow
   divider at the top seam is a separator block in parts/footer.html and still
   uses the -h preset, whose white end-stops read as highlights against blue --
   which is exactly the case that preset is for. */
.site-footer {
  background-color: var(--wp--preset--color--contrast);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' fill-opacity='.055' d='M0,192 C180,144 360,240 540,224 C720,208 900,128 1080,160 C1260,192 1350,208 1440,192 L1440,320 L0,320 Z'/%3E%3Cpath fill='%23ffffff' fill-opacity='.04' d='M0,256 C240,208 480,288 720,272 C960,256 1200,224 1440,256 L1440,320 L0,320 Z'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgb(0 21 101 / 0) 0%, rgb(0 21 101 / 0.55) 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: bottom center, center;
  /* Height is capped in absolute terms, NOT as a percentage of the footer.
     The footer is ~520px on desktop but ~1210px on mobile once the columns
     stack, so a percentage stretched the 1440x320 viewBox (preserveAspectRatio
     is none) into a tall steep arc on phones -- the opposite of subtle. A
     clamped height keeps the same shallow band at every width. */
  background-size: 100% clamp(140px, 20vw, 320px), cover;
}

.site-footer-inner {
  display: grid;
  gap: var(--wp--preset--spacing--50);
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  margin: 0 auto;
  max-width: var(--wp--style--global--wide-size);
  padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

.footer-logo {
  filter: drop-shadow(0 2px 8px rgb(0 0 0 / 0.3));
  height: 54px;
  margin-bottom: var(--wp--preset--spacing--30);
  object-fit: contain;
  width: auto;
}

.footer-logo img {
  display: block;
  height: 54px;
  object-fit: contain;
  width: 192px;
}

.footer-heading {
  font-family: var(--wp--preset--font-family--righteous);
  margin-bottom: var(--wp--preset--spacing--30);
}

/* Linked column headings (Services, Contact) keep the full-white heading look
   rather than the dimmer body-link color; underline appears on hover/focus to
   signal they're clickable. */
.site-footer .footer-heading a {
  color: var(--wp--preset--color--base);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}

.site-footer .footer-heading a:hover,
.site-footer .footer-heading a:focus-visible {
  text-decoration-color: var(--wp--preset--color--base);
}

.footer-link {
  color: var(--wp--preset--color--white-overlay-65);
  display: block;
  font-size: var(--wp--preset--font-size--small);
  margin-bottom: var(--wp--preset--spacing--20);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
}

/* Core navigation adds a flex gap while .footer-link adds its own bottom
   margin, making the two link columns read much looser than the rest of the
   footer. Let the navigation container own one compact rhythm instead. */
.site-footer :is(.footer-links-nav, .footer-services-nav) .wp-block-navigation__container {
  row-gap: 0.4rem;
}

.site-footer :is(.footer-links-nav, .footer-services-nav) .wp-block-navigation-item.footer-link {
  margin-bottom: 0;
}

.site-footer :is(.footer-links-nav, .footer-services-nav) .wp-block-navigation-item__content {
  align-items: center;
  display: inline-flex;
  min-block-size: 2rem;
}

.footer-link:hover {
  color: var(--wp--preset--color--base);
  text-decoration-color: var(--wp--preset--color--white-overlay-65);
}

.footer-link-text {
  margin-bottom: var(--wp--preset--spacing--20);
}

.footer-social-links {
  gap: var(--wp--preset--spacing--20) !important;
  margin-top: var(--wp--preset--spacing--30);
}

.footer-social-links .wp-social-link {
  background: rgb(255 255 255 / 0.1) !important;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 999px;
  color: var(--wp--preset--color--base) !important;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-lift);
}

.footer-social-links .wp-social-link:hover {
  background: rgb(255 255 255 / 0.18) !important;
  border-color: rgb(255 255 255 / 0.32);
  transform: translateY(-2px);
}

.footer-bottom {
  border-top: 1px solid rgb(255 255 255 / 0.08);
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
  text-align: center;
}

@media (max-width: 1024px) {
  .site-footer-inner {
    gap: var(--wp--preset--spacing--40);
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .site-footer {
    padding-bottom: var(--wp--preset--spacing--65);
  }
}

@media (max-width: 480px) {
  .site-footer-inner {
    grid-template-columns: 1fr;
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
  }
}

@media (prefers-reduced-motion: reduce) {
html {
 scroll-behavior: auto !important;
}
/* Blanket kill-switch: the old rule only stopped smooth scroll, leaving the
   infinite keyframes running (e.g. .coupon-badge, which reaches interior pages).
   Near-zero out every animation/transition for users who opted out of motion. */
*,
*::before,
*::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}
/* The View Transitions API animates a pseudo-tree the * selector above cannot
   reach; the active view-transitions plugin does not gate on reduced motion. */
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
  animation: none !important;
}
}

/* The editor canvas must stay static — reveals are a front-end-only
   behavior; hidden-at-rest content in the editor would read as missing.
   (The old site-wide "static conversion" guard was removed 2026-07-11
   when the scroll reveals were revived — owner decision, milestone 2.) */
.editor-styles-wrapper .animate-on-scroll:not(.is-visible) {
  opacity: 1 !important;
  transform: none !important;
}

/* === M3 ENRICHMENT PATTERNS =================================================
   New reusable bands added in milestone 3 to break up the stacked white
   card-grids on long content pages (audit finding #6). Both carry the shared
   .tgp-section rhythm marker so they inherit the site's fluid vertical/side
   padding. */

/* Proof stat strip — a light cream band of four big proof numbers, used to
   punctuate content between card sections. Deliberately lighter than the dyed
   .tgp-service-proof band so it reads as a quick fact row, not a full section. */
.tgp-stat-strip__inner.is-layout-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--wp--preset--spacing--40);
}

.tgp-stat-strip__inner.is-layout-grid > .tgp-stat {
  flex: 1 1 10rem;
  max-width: none;
  text-align: center;
  position: relative;
}

/* Thin dividers between stats on wide rows; drop the leading one and hide all
   when the row wraps to a single column. */
.tgp-stat-strip__inner.is-layout-grid > .tgp-stat + .tgp-stat::before {
  content: "";
  position: absolute;
  inset-block: 10%;
  inset-inline-start: calc(var(--wp--preset--spacing--40) / -2);
  width: 1px;
  background: color-mix(in srgb, var(--tgp-azure-text) 22%, transparent);
}

.tgp-stat__value {
  color: var(--wp--preset--color--contrast-3);
  line-height: 1.05;
}

.tgp-stat__label {
  color: var(--wp--preset--color--body-text);
  margin-block-start: 0;
}

@media (max-width: 700px) {
  .tgp-stat-strip__inner.is-layout-grid > .tgp-stat {
    flex-basis: calc((100% - var(--wp--preset--spacing--40)) / 2);
  }
  /* With two per row the vertical dividers land inconsistently; drop them. */
  .tgp-stat-strip__inner.is-layout-grid > .tgp-stat + .tgp-stat::before {
    display: none;
  }
}

@media (max-width: 460px) {
  .tgp-stat-strip__inner.is-layout-grid > .tgp-stat {
    flex-basis: 100%;
  }
}

/* Testimonial pull quote — one large quote on a dyed band. Light text on the
   band-gator gradient (same treatment as .tgp-service-proof--light headings). */
.tgp-pull__mark {
  color: var(--wp--preset--color--accent-3);
  font-size: clamp(3.5rem, 6vw, 5.5rem);
  line-height: 0.6;
  margin-block-end: calc(var(--wp--preset--spacing--20) * -1);
  opacity: 0.9;
}

.tgp-pull__quote {
  color: var(--wp--preset--color--base);
  font-weight: 500;
  text-wrap: balance;
}

.tgp-pull__cite {
  color: var(--wp--preset--color--white-overlay-65);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Transparency band (#7): the no-surprises promise row under the pricing CTA
   copy + buttons. Spans the full inner width so it reads as its own line of
   guarantees, with a check glyph before each. Dark text on the cream band. */
.tgp-pricing-cta__promises {
  flex-basis: 100%;
  margin-block-start: var(--wp--preset--spacing--20);
  padding-block-start: var(--wp--preset--spacing--30);
  border-block-start: 1px solid color-mix(in srgb, var(--tgp-azure-text) 20%, transparent);
  row-gap: var(--wp--preset--spacing--20);
}

.tgp-pricing-cta__promise {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--wp--preset--color--contrast-3);
  font-weight: 600;
}

.tgp-pricing-cta__promise::before {
  content: "\2713"; /* check mark */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  background: var(--wp--preset--gradient--tie-dye-flow, var(--tgp-azure-text));
  color: var(--wp--preset--color--base);
  font-size: 0.8em;
  font-weight: 700;
}

/* Contact info cards (#8): the bare contact <ul> rebuilt as a designed card
   grid. Reuses .tgp-content-card for the frame; these rules style the label /
   value / sub stack inside each card. */
.tgp-contact-info__card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.tgp-contact-info__label {
  margin: 0;
  color: var(--tgp-azure-text);
}

.tgp-contact-info__value {
  margin: 0;
  font-weight: 700;
  color: var(--wp--preset--color--contrast-3);
  line-height: 1.3;
}

.tgp-contact-info__value a {
  color: inherit;
  text-decoration: none;
}

.tgp-contact-info__value a:hover,
.tgp-contact-info__value a:focus-visible {
  text-decoration: underline;
}

.tgp-contact-info__sub {
  margin: 0;
  color: var(--wp--preset--color--body-text);
}

/* Emergency call band (#11): a can't-miss call band at the top of the emergency
   page so the fastest path is the phone, not a scroll. The call button runs a
   touch larger than a standard primary button to read as the urgent action. */
.tgp-emergency-call__button .wp-block-button__link {
  font-size: 1.15em;
  padding-inline: 1.6em;
}

/* === M4 LANDING TEMPLATE PATTERNS ==========================================
   Reusable offer-landing set (finding #17): landing-hero (split offer hero),
   landing-benefits (reuses .tgp-content-cards), landing-cta (phone-first close).
   Assembled by templates/page-landing.html. */

/* Offer hero: copy left, supporting image right; stacks on mobile. Light text
   on the dyed band. */
.tgp-landing-hero__inner.is-layout-grid {
  align-items: center;
}

.tgp-landing-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--tgp-radius-sm, 14px);
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.35);
}

.tgp-landing-hero__trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.tgp-landing-hero__trust li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--wp--preset--color--white-overlay-85);
}

.tgp-landing-hero__trust li::before {
  content: "\2713";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  background: var(--wp--preset--color--accent-3);
  color: var(--wp--preset--color--base);
  font-size: 0.75em;
  font-weight: 700;
}

@media (max-width: 782px) {
  .tgp-landing-hero__inner.is-layout-grid {
    grid-template-columns: 1fr;
  }
  /* Image first would push the offer copy below the fold; keep copy first. */
  .tgp-landing-hero__media {
    order: 2;
  }
}

/* Landing offer hero sits on the dark band-gator band, so its outline (secondary)
   button must flip to white like the other dark heroes (.tgp-page-hero) — the
   default is navy and was invisible on the navy band. */
.tgp-landing-hero .is-style-outline .wp-block-button__link {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 100px;
  color: var(--wp--preset--color--base);
  font-weight: 800;
}

/* === M4 INTERIOR BODY FIGURE (finding #15) ================================
   Service bodies run 2,600-4,450px with no imagery at all — measured across
   all 14 pages, and the run always starts right below the hero because it is
   the whole `.entry-content` region. `.tgp-body-figure` is the one treatment
   for breaking that up: a single wide image dropped between two top-level
   sections of the body, styled to the existing card language rather than a
   new one.

   Placement convention: insert before the first top-level heading at or past
   the midpoint of the body's top-level blocks, so it lands in the middle
   third without splitting a heading from the copy it introduces. */
/* Cap to the prose measure. Unconstrained, this filled the full 1400px container
   while the copy around it sits at 960px, so a supporting figure rendered wider
   than the text it supports and read as a second hero: 1376x917 on a 1440
   viewport, 92% of the viewport height. Matching the measure aligns it with the
   column and, with the 16/9 crop below, roughly halves its height. */
.tgp-body-figure {
  margin-block: var(--wp--preset--spacing--50);
  margin-inline: auto;
  max-width: var(--tgp-measure);
}

.tgp-body-figure__media {
  border-radius: var(--tgp-card-radius);
  box-shadow: var(--tgp-card-shadow);
  margin: 0;
  overflow: hidden;
  position: relative;
}

/* 16/9 rather than 3/2: `object-fit: cover` re-crops instead of squashing, so
   this trims the dead headroom these stock frames carry without regenerating
   any files. */
.tgp-body-figure__media img {
  aspect-ratio: 16 / 9;
  display: block;
  inline-size: 100%;
  object-fit: cover;
}

/* Tie-dye hairline along the top edge — the same accent the cards and bands
   use, so the figure reads as part of the family and not a dropped-in photo. */
.tgp-body-figure__media::before {
  background: var(--wp--preset--gradient--tie-dye-flow-h);
  content: "";
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 4px;
  position: absolute;
  z-index: 1;
}

/* Specificity note: Ollie's parent theme ships
   `div[class*="wp-block-"] figcaption` — one attribute selector plus two
   elements, so (0,1,2). A plain `.tgp-body-figure__media figcaption` is only
   (0,1,1) and silently loses, which is how the first pass ended up with a
   centred caption in the parent's colour. Repeating the wrapper class takes
   this to (0,2,1) and wins on merit rather than with !important.

   Worth knowing: the parent rule's colour is
   `var(--wp--preset--color--secondary)`, a slug this palette does not define,
   so it resolves to nothing and the caption inherits body ink. Any figcaption
   colour has to be set here or it will look "fine but wrong". */
.tgp-body-figure .tgp-body-figure__media figcaption {
  color: var(--wp--preset--color--contrast-4);
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.5;
  margin-block-start: var(--wp--preset--spacing--25);
  padding-inline: var(--wp--preset--spacing--30);
  padding-block-end: var(--wp--preset--spacing--30);
  text-align: left;
}

@media (max-width: 599px) {
  .tgp-body-figure {
    margin-block: var(--wp--preset--spacing--40);
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   Motion & tie-dye polish (2026-08-16)

   Interaction-only by rule: nothing here animates at rest. Every effect is
   driven by hover, focus, or scroll position, so idle CPU cost is zero.
   Everything routes through the existing --dur-* / --ease-* tokens; no new
   durations, no new libraries, no new network requests (the one SVG is
   inlined). The blanket prefers-reduced-motion kill-switch earlier in this
   file already neutralises transitions and keyframes, but scroll-driven
   animations ignore animation-duration, so the drift below carries its own
   explicit no-preference guard.
   ────────────────────────────────────────────────────────────────────────── */

/* 1. Tie-dye sweep on filled buttons.
   The gradient buttons were already built for this and never used it: they
   carry background-size: 300% 300% with overflow:hidden and a white shine
   ::before, but nothing ever moved the gradient, so the oversized background
   just sat still. Give it a rest position and slide it on hover/focus.

   The label stays white and legible throughout because --tgp-cta-veil is an
   inset box-shadow on the element -- it does not move with the gradient, so it
   keeps covering the light stops (white on the #FFCC00 stop alone is ~1.5:1).
   NEVER animate the veil or reimplement this sweep as an opacity fade on an
   overlay: that would fade the veil with it and drop the label mid-hover. */
.btn-primary .wp-block-button__link,
.wp-block-button.btn-primary .wp-block-button__link,
.wp-block-button:not(.is-style-outline) .wp-block-button__link,
.wp-element-button:not(.wp-block-button__link) {
  background-position: 0% 50%;
  transition:
    background-position var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-lift);
}

.btn-primary .wp-block-button__link:hover,
.btn-primary .wp-block-button__link:focus-visible,
.wp-block-button.btn-primary .wp-block-button__link:hover,
.wp-block-button.btn-primary .wp-block-button__link:focus-visible,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible,
.wp-element-button:not(.wp-block-button__link):hover,
.wp-element-button:not(.wp-block-button__link):focus-visible {
  background-position: 100% 50%;
}

/* 2. Tie-dye underline wipe on prose links.
   At rest the link keeps its ordinary underline, so the affordance never
   depends on colour or on hover. On hover the plain underline goes
   transparent and a tie-dye bar wipes in from the left to replace it -- the
   underline is present in both states, it just changes material. Uses the
   no-white-stop bar gradient, since prose sits on light surfaces. */
.wp-block-post-content :where(p, li) a:where(:not(.wp-element-button):not(.wp-block-button__link)),
:is(.tgp-faq__item, .tgp-faq-item) a:where(:not(.wp-element-button):not(.wp-block-button__link)) {
  background-image: var(--gradient-rainbow-bar);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition:
    background-size var(--dur-base) var(--ease-out),
    text-decoration-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.wp-block-post-content :where(p, li) a:where(:not(.wp-element-button):not(.wp-block-button__link)):hover,
.wp-block-post-content :where(p, li) a:where(:not(.wp-element-button):not(.wp-block-button__link)):focus-visible,
:is(.tgp-faq__item, .tgp-faq-item) a:where(:not(.wp-element-button):not(.wp-block-button__link)):hover,
:is(.tgp-faq__item, .tgp-faq-item) a:where(:not(.wp-element-button):not(.wp-block-button__link)):focus-visible {
  background-size: 100% 2px;
  text-decoration-color: transparent;
}

/* 3. Wave texture inside the dyed bands.
   Same move as the footer: these bands are large flat washes of the band-gator
   gradient, and a shallow wave at the bottom edge gives them depth without
   changing the brand colour. Drawn on ::after (::before is taken on .why-us by
   its bloom overlay) as an inlined data: SVG, so no extra request.
   Height is clamped in absolute terms, not as a percentage -- these bands grow
   tall when their grids stack on mobile, and a percentage would stretch the
   1440x320 viewBox into a steep arc there. */
.trust-pillars::after,
.coupons::after,
.why-us::after {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' fill-opacity='.05' d='M0,192 C180,144 360,240 540,224 C720,208 900,128 1080,160 C1260,192 1350,208 1440,192 L1440,320 L0,320 Z'/%3E%3Cpath fill='%23ffffff' fill-opacity='.035' d='M0,256 C240,208 480,288 720,272 C960,256 1200,224 1440,256 L1440,320 L0,320 Z'/%3E%3C/svg%3E")
    bottom center / 100% 100% no-repeat;
  bottom: 0;
  content: "";
  height: clamp(80px, 12vw, 190px);
  inset-inline: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

/* Keep each band's own content above the wave. These inner wrappers had no
   stacking context of their own, so without this the wave would paint over the
   bottom row of cards. */
.trust-pillars-inner,
.coupons-inner,
.why-us-inner {
  position: relative;
  z-index: 1;
}

/* 4. Scroll-driven dye drift.
   The dye shifts only while the band is travelling through the viewport and is
   frozen whenever the page is still, which is what makes this compatible with
   the interaction-only rule -- there is no idle animation to pause. It runs on
   the compositor via a view() timeline with no JS at all, and browsers without
   scroll-driven animation support simply get the static gradient.
   Kept deliberately small: a screenshot at the start and end of the range
   should look almost identical. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .trust-pillars,
    .coupons,
    .why-us {
      animation: tgp-dye-drift linear both;
      animation-range: entry 0% exit 100%;
      animation-timeline: view();
      background-size: 118% 118%;
    }
  }
}

@keyframes tgp-dye-drift {
  from {
    background-position: 42% 42%;
  }

  to {
    background-position: 58% 58%;
  }
}

/* 5. Tie-dye edge glow on the dyed cards.
   These already swap background and border-colour on hover; add a brand-tinted
   lift so the card reads as raised rather than just lighter. Expressed as
   box-shadow rather than a pseudo-element because several of these cards
   already use ::before/::after for icons. */
.trust-pillar,
.coupon-card,
.value-item,
.tgp-service-proof__card {
  transition:
    background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-lift);
}

.trust-pillar:hover,
.coupon-card:hover,
.value-item:hover,
.tgp-service-proof__card:hover {
  box-shadow:
    0 14px 34px rgb(0 0 0 / 0.24),
    0 0 0 1px rgb(238 43 140 / 0.30),
    0 0 26px -8px rgb(13 101 242 / 0.55);
  transform: translateY(-3px);
}

/* 6. Signature: the bear.
   One place, one effect. Hovering the bear washes a soft tie-dye bloom across
   it and lets it breathe up a couple of pixels. screen blending keeps the
   bloom as light on light rather than a flat film over the artwork, so the
   bear stays readable. This is the only decorative flourish that gets to be
   this obvious -- everything above is deliberately quieter so this one lands.
   The homepage hero bear is intentionally left alone: that hero already runs
   its own load-in sequence, and stacking another effect there would cost this
   moment its distinctiveness. */
.about-bear-container {
  position: relative;
  transition: transform var(--dur-slow) var(--ease-lift);
}

.about-bear-container::after {
  background: var(--wp--preset--gradient--tie-dye-flow-soft);
  content: "";
  inset: -12%;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: scale(0.88);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-lift);
}

.about-bear-container:hover {
  transform: translateY(-2px);
}

.about-bear-container:hover::after {
  opacity: 0.85;
  transform: scale(1);
}

/* ──────────────────────────────────────────────────────────────────────────
   In-post interrupt callout (mu-plugins/tgp-post-interrupt-cta.php)

   Injected before the second H2 of a long post. This is the in-body tie-dye
   moment: the dye rides the top edge and the border, while the interior stays
   a calm cream so the copy never has to compete with a gradient. Contrast is
   ordinary dark-on-cream, which keeps it at the same accessibility bar as the
   surrounding prose rather than relying on a veil like the buttons do.
   ────────────────────────────────────────────────────────────────────────── */
.tgp-interrupt-cta {
  background: var(--wp--preset--color--base-2, #f7f4ee);
  border: 1px solid rgb(var(--tgp-navy-rgb, 0 21 101) / 0.12);
  border-radius: var(--tgp-card-radius, 14px);
  box-shadow: var(--tgp-elev-2, 0 10px 30px rgb(0 0 0 / 0.08));
  margin-block: var(--wp--preset--spacing--50);
  overflow: hidden;
  padding: var(--wp--preset--spacing--45) var(--wp--preset--spacing--40);
  position: relative;
}

/* The dye. Sits on the top edge as a bar rather than washing the whole card,
   so body copy keeps a plain background. Uses the no-white-stop bar gradient
   because this card sits on light surfaces, where the -h preset's white ends
   would dissolve into the page. */
.tgp-interrupt-cta::before {
  background: var(--gradient-rainbow-bar);
  content: "";
  height: 5px;
  inset-inline: 0;
  position: absolute;
  top: 0;
}

.tgp-interrupt-cta__eyebrow {
  color: var(--tgp-azure-text, #0b5ed7);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 800;
  letter-spacing: 0.12em;
  margin: 0 0 0.5rem;
  text-transform: uppercase;
}

.tgp-interrupt-cta__title {
  font-size: var(--wp--preset--font-size--x-large, 1.5rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
}

.tgp-interrupt-cta__copy {
  margin: 0.6rem 0 0;
}

.tgp-interrupt-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--25);
  margin-top: var(--wp--preset--spacing--35);
}

/* The call action reuses the primary button's recipe deliberately, veil and
   all: white label on the tie-dye gradient, swept on hover. Same rule as
   everywhere else -- the veil is an inset shadow so it never travels with the
   gradient, and it is what keeps white legible over the yellow stop. */
.tgp-interrupt-cta__call,
.tgp-interrupt-cta__book {
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  min-height: 46px;
  padding-inline: var(--wp--preset--spacing--40);
  text-decoration: none;
  transition:
    background-position var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-lift);
}

.tgp-interrupt-cta__call {
  background: var(--gradient-rainbow);
  background-position: 0% 50%;
  background-size: 300% 300%;
  box-shadow: var(--tgp-cta-veil), var(--tgp-btn-glow);
  color: var(--wp--preset--color--base, #fff);
  text-shadow: var(--tgp-cta-text-shadow);
}

.tgp-interrupt-cta__call:hover,
.tgp-interrupt-cta__call:focus-visible {
  background-position: 100% 50%;
  box-shadow: var(--tgp-cta-veil), var(--tgp-btn-glow-hover);
  transform: translateY(-2px);
}

.tgp-interrupt-cta__book {
  border: 1px solid rgb(var(--tgp-navy-rgb, 0 21 101) / 0.35);
  color: var(--wp--preset--color--contrast-3, #001565);
}

.tgp-interrupt-cta__book:hover,
.tgp-interrupt-cta__book:focus-visible {
  border-color: rgb(var(--tgp-navy-rgb, 0 21 101) / 0.65);
  transform: translateY(-2px);
}

@media (max-width: 600px) {
  .tgp-interrupt-cta__actions > * {
    flex: 1 1 100%;
  }
}

/* When the callout lands directly after a section separator, the separator's
   tie-dye bar and the callout's own top bar stack about 60px apart and read as
   a doubled-up divider. The callout already announces the break, so drop the
   separator in that one case. :has() is doing previous-sibling selection here,
   which is why this is a single rule rather than markup surgery. */
.tgp-single-post__article .wp-block-separator:has(+ .tgp-interrupt-cta) {
  display: none;
}

/* GF honeypot must never paint. Live leftover used a visible "Instagram" label. */
.gform_validation_container,
.gfield--type-honeypot {
  display: none !important;
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

/* Reviews page hero: real TGP van, keep wrap on the right. */
.tgp-reviews-page .tgp-page-hero--cover .tgp-page-hero__bg img {
  object-position: 72% 42%;
  filter: brightness(0.82) saturate(1.18);
}

.tgp-reviews-wall__honest {
  color: var(--wp--preset--color--base);
  font-weight: 600;
  line-height: 1.55;
  margin: 0;
}