/* ==========================================================================
   LPI grok-color-consistency.css  (2026-09-30c)
   Additive delta — link AFTER ui-2026.css on every page.
   Does NOT rewrite owner footer-column / #why-us bento / theme-toggle layout.
   --------------------------------------------------------------------------
   DESIGN LOCK
   Palette outside hero: 3 navy steps + amber + sea(decorative only)
     --lpi-navy      #062b58  solid brand fill (footer, CTA bands, navy plates)
     --lpi-navy-deep #041f42  edges / gradient bottom / navy borders
     --lpi-navy-mid  #0a3d7a  gradient tops + button hover lift only
     --lpi-amber     #ffbe01  accent
     --lpi-sea       #19c3c9  water/map washes only — never UI chrome fills

   Navy band fill recipe (CHOICE): SOLID var(--lpi-navy)
     Used for: .footer, .cta-banner, .cta-section, .blog-hero__plate (navy),
               mid-page navy panels / .lpi-cta when treated as navy band.
   Shared gradient (CHOICE) for depth chrome only:
     linear-gradient(180deg, var(--lpi-navy-mid), var(--lpi-navy) 55%, var(--lpi-navy-deep))
     Used for: .hero__dossier, .btn--dark base, icon wells.

   Callbar exception: stays LIGHT surface + navy text (owner post-audit);
   not a second navy band. Amber pill CTA stays.

   Radii: standard cards → --lpi-radius-lg (18px);
          large panels  → --lpi-radius-xl (22px);
          full-bleed CTA banner / nested inner cells → 0 OK;
          pills stay pill.
   ========================================================================== */

:root {
  --lpi-navy-band: var(--lpi-navy);
  --lpi-navy-grad: linear-gradient(
    180deg,
    var(--lpi-navy-mid) 0%,
    var(--lpi-navy) 55%,
    var(--lpi-navy-deep) 100%
  );
  --lpi-card-border: color-mix(in srgb, var(--lpi-hairline, #cdd7e6) 88%, var(--lpi-navy) 12%);
  --lpi-card-pad: clamp(1.15rem, 2.2vw, 1.5rem);
  --lpi-section-gap: clamp(2.5rem, 5vw, 4rem);
  --lpi-grid-gap: clamp(1rem, 2vw, 1.35rem);
}

/* Dark-theme hairline mix: prefer tokenized mid, keep #5b9bd5 only as mix partner */
html[data-theme="dark"] {
  --lpi-hairline: color-mix(in srgb, var(--color-border, #30363d) 70%, var(--lpi-navy-mid) 30%);
}

/* --------------------------------------------------------------------------
   1) NAVY BANDS — solid brand fill (missing base.css offline safety + unify)
   -------------------------------------------------------------------------- */
.footer,
footer.footer,
.cta-banner,
.cta-section,
.blog-hero__plate,
.blog-hero--split .blog-hero__plate,
.blog-hero-inner,
section.cta-banner,
section.cta-section {
  background-color: var(--lpi-navy-band);
  background-image: none;
  color: #fff;
}

/* Optional soft inset highlight — same recipe everywhere, not a new blue */
.footer,
.cta-banner,
.cta-section {
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--lpi-navy-mid) 55%, transparent) 0%,
    transparent 42%
  );
  background-color: var(--lpi-navy-band);
  border-color: var(--lpi-navy-deep);
}

.cta-banner {
  border-radius: 0; /* full-bleed OK */
  position: relative;
  overflow: hidden;
}

.cta-section {
  border-radius: var(--lpi-radius-xl, 22px);
  margin-inline: auto;
  max-width: var(--content-wide, 1120px);
}

/* Mid-page compact CTA block used on areas + suburb shells */
.lpi-cta {
  background: var(--lpi-navy-band);
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--lpi-navy-mid) 50%, transparent) 0%,
    transparent 50%
  );
  color: #fff;
  border: 1px solid var(--lpi-navy-deep);
  border-radius: var(--lpi-radius-lg, 18px);
  padding: var(--lpi-card-pad);
  box-shadow: var(--lpi-lift-dark, 0 14px 36px -16px rgba(0, 0, 0, 0.55));
  margin-block: 1.75rem;
}

.lpi-cta a:not(.btn) {
  color: var(--lpi-amber) !important;
  text-decoration-color: color-mix(in srgb, var(--lpi-amber) 55%, transparent);
}
.lpi-cta a:not(.btn):hover {
  color: #fff !important;
}

/* Navy band typography + kill UA link blue */
.footer,
.footer a,
.cta-banner,
.cta-banner a:not(.btn),
.cta-section,
.cta-section a:not(.btn),
.blog-hero__plate,
.blog-hero__plate a:not(.btn),
.blog-hero-inner,
.blog-hero-inner a:not(.btn) {
  color: #fff;
}
.footer a:not(.btn):not(.footer__social-link),
.cta-banner a:not(.btn),
.cta-section a:not(.btn),
.blog-hero__plate a:not(.btn) {
  color: #fff !important;
  text-decoration-color: color-mix(in srgb, var(--lpi-amber) 60%, transparent);
}
.footer a:not(.btn):hover,
.cta-banner a:not(.btn):hover,
.cta-section a:not(.btn):hover {
  color: var(--lpi-amber) !important;
}
.footer__desc,
.footer__copy,
.cta-banner p,
.cta-section p,
.blog-hero .blog-meta-item {
  color: rgba(255, 255, 255, 0.86);
}
.footer__copy a {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* --------------------------------------------------------------------------
   2) HERO DOSSIER — richer gradient ONLY from the 3 tokens + xl radius
   -------------------------------------------------------------------------- */
.hero__dossier {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.06) 0%, transparent 42%),
    var(--lpi-navy-grad) !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--lpi-radius-xl, 22px) !important;
}
@media (max-width: 1023.98px) {
  .hero__dossier {
    border-radius: var(--lpi-radius-xl, 22px) !important;
  }
}

/* --------------------------------------------------------------------------
   3) DARK BUTTONS — shared gradient recipe (tokenized)
   -------------------------------------------------------------------------- */
.btn--dark {
  background: linear-gradient(180deg, var(--lpi-navy-mid) 0%, var(--lpi-navy) 100%);
  border-color: var(--lpi-navy-deep);
  color: #fff;
}
.btn--dark:hover {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--lpi-navy-mid) 72%, #fff 28%) 0%,
    var(--lpi-navy-mid) 100%
  );
  color: #fff;
}

/* --------------------------------------------------------------------------
   4) CORNER RADIUS — standard cards = lg; large panels = xl
   -------------------------------------------------------------------------- */
.prose-panel,
.lpi-tldr,
.answer-block,
.lpi__post-body .answer-block,
.card,
.region-card,
.service-card,
.blog-card,
.review-card,
.location-card,
.feature-card,
.prose-card,
.testimonial-card,
.lpi-why-grid .why-card,
/* why-card: owner #why-us ledger handled below */
.features-grid > .card,
.features-grid > article,
.features-grid > :not(.card):not(article):not(.prose-panel):not(.lpi-figure):not(form):not(.faq-index),
.services__grid .service-card,
.lpi-areablock,
.lpi-region,
.lpi-issue-tiles .features-grid > *,
.lpi-issue-tiles article,
.faq-item,
details.faq-item,
.contact-info__item,
.prose-card-grid > *,
.trust-bar__grid .trust-item,
.trust-item {
  border-radius: var(--lpi-radius-lg, 18px) !important;
}

/* Large panels */
.hero__dossier,
.blog-hero__plate,
.blog-hero--split .blog-hero__plate,
.lpi-trust-strip,
.trust-bar,
.region-guides--councils,
.faq-index,
.sa .mapcard,
.sa .finder,
form.lpi-contact-form,
#contact-form.lpi-contact-form,
.contact-form,
.cta-section {
  border-radius: var(--lpi-radius-xl, 22px) !important;
}

/* Areas accordion + map siblings */
.sa .area {
  border-radius: var(--lpi-radius-lg, 18px) !important;
}

.cta-banner {
  border-radius: 0 !important;
}
.lpi-areablock > .lpi-areablock__card {
  border-radius: 0 !important;
}
/* Owner ledger why-us (non-bento) stays square */
#why-us .why__grid .why-card {
  border-radius: 0 !important;
}
/* Bento keeps lg (already set); reinforce */
#why-us .lpi-why-grid .why-card {
  border-radius: var(--lpi-radius-lg, 18px) !important;
}

/* Service card: image follows outer shell top corners */
.service-card {
  overflow: hidden;
}
.service-card__image {
  border-radius: 0 !important;
}

/* Pills stay pill */
.btn,
.btn--primary,
.btn--dark,
.btn--outline,
.btn--accent-outline,
.lpi-callbar__btn,
.lpi-callbar a,
.service-card__price,
.area-tag,
.suburb-chip,
.chips a,
.sa .btn {
  border-radius: var(--lpi-radius-pill, 999px);
}

/* --------------------------------------------------------------------------
   5) PROSE-PANEL / FEATURES / REGION — same bevel + chrome as sibling cards
   -------------------------------------------------------------------------- */
.prose-panel,
.lpi-tldr {
  position: relative;
  padding: var(--lpi-card-pad) !important;
  border: 1px solid var(--lpi-card-border) !important;
  border-radius: var(--lpi-radius-lg, 18px) !important;
  background-color: var(--color-surface, #fff);
  background-image: linear-gradient(
    160deg,
    color-mix(in srgb, var(--lpi-amber) 5%, transparent) 0%,
    transparent 42%
  );
  box-shadow: var(--lpi-lift, 0 10px 28px -14px rgba(6, 43, 88, 0.28));
  overflow: hidden;
}
html[data-theme="light"] .prose-panel,
html[data-theme="light"] .lpi-tldr {
  background-color: #fff;
}

/* Kill zero-pad flatten when prose-panel sits in features-grid */
.features-grid > .prose-panel {
  padding: var(--lpi-card-pad) !important;
}

.lpi-region {
  border: 1px solid var(--lpi-card-border);
  background: var(--color-surface, #fff);
  background-image: linear-gradient(
    160deg,
    color-mix(in srgb, var(--lpi-amber) 4%, transparent) 0%,
    transparent 40%
  );
  padding: var(--lpi-card-pad);
  box-shadow: var(--lpi-lift, 0 10px 28px -14px rgba(6, 43, 88, 0.22));
}
html[data-theme="light"] .lpi-region {
  background-color: #fff;
}

/* Region / service / blog / location / review — shared hairline + lift */
.region-card,
.service-card,
.blog-card,
.review-card,
.location-card,
.feature-card,
.testimonial-card,
.card {
  border: 1px solid var(--lpi-card-border);
  box-shadow: var(--lpi-lift, 0 10px 28px -14px rgba(6, 43, 88, 0.22));
  background-color: var(--color-surface, #fff);
}
html[data-theme="light"] .region-card,
html[data-theme="light"] .service-card,
html[data-theme="light"] .blog-card,
html[data-theme="light"] .review-card,
html[data-theme="light"] .location-card,
html[data-theme="light"] .card {
  background-color: #fff;
}

/* --------------------------------------------------------------------------
   6) LAYOUT RHYTHM — sections, grids, gutters
   -------------------------------------------------------------------------- */
.section-header,
.section__header,
.text-center.section-header {
  margin-bottom: clamp(1.25rem, 2.6vw, 1.85rem);
}

.services__grid,
.features-grid,
.prose-card-grid,
.trust-bar__grid,
.locations__grid,
.lpi-why-grid,
.region-guides {
  gap: var(--lpi-grid-gap) !important;
}

/* Container inline rhythm — even gutters */
.container,
.lpi__shell .container {
  padding-inline: clamp(1rem, 4vw, 1.75rem);
}

/* Stack spacing inside post body between major chrome blocks */
.lpi__post-body > .prose-panel,
.lpi__post-body > .lpi-tldr,
.lpi__post-body > .lpi-cta,
.lpi__post-body > .lpi-areablock,
.lpi__post-body > .lpi-region,
.lpi__post-body > section {
  margin-top: 0;
}

.lpi__post-body .section + .section,
.lpi__post-body section.section {
  margin-block: 0;
}

/* Trust bar as large quiet panel */
.trust-bar,
.lpi-trust-strip {
  border: 1px solid var(--lpi-card-border);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--lpi-amber) 4%, transparent), transparent 45%),
    var(--color-surface, #fff);
  padding: clamp(1rem, 2vw, 1.35rem);
  box-shadow: var(--lpi-lift, 0 10px 28px -14px rgba(6, 43, 88, 0.18));
}
html[data-theme="light"] .trust-bar,
html[data-theme="light"] .lpi-trust-strip {
  background-color: #fff;
}

.trust-item {
  border: 1px solid var(--lpi-card-border);
  background: color-mix(in srgb, var(--color-surface, #fff) 92%, var(--lpi-navy) 4%);
  padding: 1rem 1.1rem;
}

/* --------------------------------------------------------------------------
   7) CALLBAR — light chrome exception (aligned tokens, not navy band)
   -------------------------------------------------------------------------- */
.lpi-callbar {
  background: color-mix(in srgb, #fff 94%, var(--lpi-navy) 6%) !important;
  border-top: 1px solid color-mix(in srgb, var(--lpi-amber) 35%, var(--color-border, #cdd7e6));
  color: var(--lpi-navy);
  box-shadow: 0 -8px 28px -18px rgba(6, 43, 88, 0.28);
}
html[data-theme="dark"] .lpi-callbar {
  background: color-mix(in srgb, var(--color-bg, #0d1117) 90%, var(--lpi-navy) 10%) !important;
  color: #fff;
}
.lpi-callbar__btn {
  background: var(--lpi-amber) !important;
  color: var(--lpi-navy) !important;
  border: 1px solid color-mix(in srgb, var(--lpi-navy) 18%, var(--lpi-amber));
  border-radius: var(--lpi-radius-pill) !important;
}

/* --------------------------------------------------------------------------
   8) AREAS MAP / FINDER — token borders, xl shells already set
   -------------------------------------------------------------------------- */
.sa .mapcard,
.sa .finder {
  border-color: color-mix(in srgb, var(--border, #cdd7e6) 80%, var(--lpi-navy) 20%) !important;
}
.sa .area {
  border-color: color-mix(in srgb, var(--border, #cdd7e6) 85%, var(--lpi-navy) 15%);
}
.sa .area[open],
.sa .area.hl {
  border-color: var(--lpi-navy-mid);
  box-shadow: 0 6px 24px -12px rgba(6, 43, 88, 0.35);
}

/* --------------------------------------------------------------------------
   9) BLOG / CONTACT / FAQ shells
   -------------------------------------------------------------------------- */
.blog-card {
  overflow: hidden;
}
.blog-hero__plate {
  overflow: hidden;
  border: 1px solid var(--lpi-navy-deep);
  box-shadow: var(--lpi-lift-dark, 0 14px 36px -16px rgba(0, 0, 0, 0.55));
}

.faq-index {
  border: 1px solid color-mix(in srgb, var(--lpi-hairline, #cdd7e6) 80%, var(--lpi-navy) 20%);
  background-image: linear-gradient(
    160deg,
    color-mix(in srgb, var(--lpi-amber) 5%, transparent),
    transparent 40%
  );
  padding: var(--lpi-card-pad);
}

form.lpi-contact-form,
#contact-form,
.contact-form {
  border: 1px solid var(--lpi-card-border);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--lpi-amber) 5%, transparent), transparent 40%),
    var(--color-surface, #fff);
  padding: var(--lpi-card-pad);
  box-shadow: var(--lpi-lift, 0 10px 28px -14px rgba(6, 43, 88, 0.22));
}

/* --------------------------------------------------------------------------
   10) FOOTER social / links — match navy band language (no layout rewrite)
   -------------------------------------------------------------------------- */
.footer .footer__social-link {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.42);
}
.footer .footer__social-link:hover,
.footer .footer__social-link:focus-visible {
  background: var(--lpi-amber);
  border-color: var(--lpi-amber);
  color: var(--lpi-navy);
}

/* --------------------------------------------------------------------------
   11) Misc chrome one-offs
   -------------------------------------------------------------------------- */
/* Amber outline on navy bands: readable white label */
.cta-banner .btn--accent-outline,
.cta-section .btn--accent-outline {
  color: #fff !important;
  border-color: var(--lpi-amber) !important;
  background: color-mix(in srgb, var(--lpi-navy-deep) 55%, transparent) !important;
}
.cta-banner .btn--accent-outline:hover,
.cta-section .btn--accent-outline:hover {
  background: var(--lpi-amber) !important;
  color: var(--lpi-navy) !important;
}

/* Primary buttons keep amber → navy text */
.btn--primary,
.btn-primary {
  color: var(--lpi-navy) !important;
}

/* Section navy cards (rare explicit) */
.card--navy,
.panel--navy,
.section-card--navy {
  background: var(--lpi-navy-band) !important;
  color: #fff;
  border-color: var(--lpi-navy-deep);
  border-radius: var(--lpi-radius-lg, 18px);
}

/* Checklist / router options share card radius */
.lpi-router__a,
.lpi-router__opt span {
  border-radius: var(--lpi-radius-lg, 18px);
}

/* Avoid sea/teal competing as chrome fills */
.btn--sea,
.chip--sea,
.badge--sea {
  background: color-mix(in srgb, var(--lpi-sea) 12%, var(--color-surface, #fff));
  color: var(--lpi-navy);
  border-color: color-mix(in srgb, var(--lpi-sea) 35%, var(--lpi-navy) 15%);
}


/* ==========================================================================
   LOOP 2 — layout / card system reconciliation (2026-09-30)
   After visual re-scan of home, areas, about, services, council, suburb,
   checklist, contact, NCR, Form23. CSS-only; no content/SEO edits.
   ========================================================================== */

/* Early hardcoded 14/16/20px card radii → token lg/xl (beat earlier ui-2026) */
.nav-mega__panel {
  border-radius: var(--lpi-radius-lg, 18px) !important;
}
.lpi-trust-strip,
.lpi-tldr-band .lpi-trust-strip {
  border-radius: var(--lpi-radius-xl, 22px) !important;
}
.prose-card-grid > *,
.lpi-issue-tiles .features-grid > *,
.lpi-issue-tiles article,
.faq-item,
.faq__list details,
details.faq-item,
.contact-info__item,
.lpi__post-body > .faq-index {
  border-radius: var(--lpi-radius-lg, 18px) !important;
}
.contact-form,
form.contact-form,
#contact-form {
  border-radius: var(--lpi-radius-xl, 22px) !important;
}

/* Equal card padding rhythm */
.region-card,
.service-card__body,
.blog-card,
.review-card,
.location-card,
.feature-card,
.prose-card,
.prose-card-grid > *,
.trust-item,
.faq-item,
.contact-info__item {
  /* don't smash owner-specific internal pads; ensure min comfort */
  box-sizing: border-box;
}

.region-card,
.blog-card,
.review-card,
.location-card,
.feature-card {
  padding: var(--lpi-card-pad);
}
.service-card {
  padding: 0; /* image + body stack */
}
.service-card__body {
  padding: var(--lpi-card-pad);
}

/* Features-grid / services-grid: equal tracks, no uneven gutters */
.features-grid,
.services__grid,
.services-grid,
.prose-card-grid,
.locations__grid {
  display: grid;
  gap: var(--lpi-grid-gap) !important;
  align-items: stretch;
}
.features-grid > *,
.services__grid > *,
.prose-card-grid > *,
.locations__grid > * {
  min-width: 0;
  height: 100%;
}

/* Section band rhythm — gray/alt vs base share comfortable block spacing */
.section.section-gray,
.section.section--alt,
.section.section-light,
.section.section--base,
section.section-padding {
  padding-block: clamp(2.25rem, 5vw, 3.75rem);
}

/* Areas: prose-panel under “Pool compliance by council” — force sibling-card bevel */
.lpi__post-body--areas .prose-panel,
.section .prose-panel,
.container > .prose-panel {
  border-radius: var(--lpi-radius-lg, 18px) !important;
  border: 1px solid var(--lpi-card-border) !important;
  padding: var(--lpi-card-pad) !important;
  box-shadow: var(--lpi-lift, 0 10px 28px -14px rgba(6, 43, 88, 0.28)) !important;
}

/* Region text blocks on areas page: match card language */
.lpi-region,
.lpi-region__text {
  border-radius: var(--lpi-radius-lg, 18px);
}
/* Contact: outer areablock shell rounded; inner cards flat (intentional stack) */
.lpi-areablock {
  border: 1px solid var(--lpi-card-border);
  border-radius: var(--lpi-radius-lg, 18px) !important;
  overflow: hidden;
  background: var(--color-surface, #fff);
  box-shadow: var(--lpi-lift, 0 10px 28px -14px rgba(6, 43, 88, 0.22));
  padding: 0;
}
.lpi-areablock > .lpi-areablock__card {
  border-radius: 0 !important;
  border: 0;
  box-shadow: none;
  background: transparent;
}

/* About #why-us bento: polish chrome only — do not touch grid template */
#why-us .lpi-why-grid .why-card {
  border: 1px solid var(--lpi-card-border) !important;
  border-radius: var(--lpi-radius-lg, 18px) !important;
  background: var(--color-surface, #fff);
  box-shadow: var(--lpi-lift, 0 10px 28px -14px rgba(6, 43, 88, 0.22));
}
html[data-theme="light"] #why-us .lpi-why-grid .why-card {
  background: #fff;
}
#why-us .lpi-why-grid .why-card__icon {
  background: linear-gradient(145deg, var(--lpi-navy-mid), var(--lpi-navy)) !important;
}

/* Home trust strip items: equal height cards in grid */
.trust-bar__grid {
  display: grid;
  gap: var(--lpi-grid-gap);
  align-items: stretch;
}
.trust-bar__grid .trust-item {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* CTA section (about/services/contact): rounded navy card, not full-bleed clash with banner */
.cta-section {
  border: 1px solid var(--lpi-navy-deep);
  box-shadow: var(--lpi-lift-dark, 0 14px 36px -16px rgba(0, 0, 0, 0.55));
}
/* Full-bleed banner stays edge-to-edge */
.cta-banner.section-padding,
section.cta-banner {
  border-radius: 0 !important;
  border: 0;
  box-shadow: none;
  max-width: none;
  margin-inline: 0;
}

/* Sticky callbar vs footer: distinct roles — light bar vs navy footer (documented) */
.footer {
  margin-bottom: 0;
}
/* Suburb / council long prose: consecutive panels share gap */
.prose-panel + .prose-panel,
.lpi-tldr + .prose-panel,
.prose-panel + .lpi-cta {
  margin-top: 1.15rem;
}

/* Checklist / FAQ details: open state hairline uses navy token not rogue blue */
.faq-item[open],
details.faq-item[open] {
  border-color: color-mix(in srgb, var(--lpi-navy-mid) 28%, var(--color-border, #cdd7e6));
}

/* NCR / Form23 feature tiles: amber tally already in ui-2026; lock radius + border */
.lpi-issue-tiles .features-grid > *,
.features-grid > article,
.features-grid > .card {
  border: 1px solid var(--lpi-card-border);
  background: var(--color-surface, #fff);
  box-shadow: var(--lpi-lift, 0 10px 28px -14px rgba(6, 43, 88, 0.2));
}

/* Prevent nested rounded-in-rounded visual fight: inner lists/tables flush */
.prose-panel .lpi-inout,
.prose-panel table,
.lpi-areablock table {
  border-radius: var(--lpi-radius-md, 14px);
}

/* Dark theme: keep navy bands solid brand (not washed teal) */
html[data-theme="dark"] .footer,
html[data-theme="dark"] .cta-banner,
html[data-theme="dark"] .cta-section,
html[data-theme="dark"] .lpi-cta,
html[data-theme="dark"] .blog-hero__plate {
  background-color: var(--lpi-navy);
  color: #fff;
}


/* ==========================================================================
   LOOP 3 — nested-shell + padding de-clash (2026-09-30)
   Contact .lpi-areablock > .card was inheriting card border/radius/shadow and
   fighting the outer rounded shell. Card types already carry owner padding —
   stop re-padding them. Re-scan: home/areas/about/services/council/suburb/
   checklist/contact/NCR/Form23.
   ========================================================================== */

/* Nested cards inside areablock: flat inside rounded shell */
.lpi-areablock > .card,
.lpi-areablock > .lpi-areablock__card,
.lpi-areablock .lpi-areablock__card {
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  height: auto !important;
  margin: 0;
}
.lpi-areablock > .lpi-areablock__card + .lpi-areablock__card,
.lpi-areablock > .card + .card {
  border-top: 1px solid var(--lpi-card-border) !important;
}

/* Restore owner-similar padding after Loop2 blanket pad */
.region-card {
  padding: var(--lpi-pad-card, 1.05rem 1.1rem);
}
.blog-card {
  padding: 1.25rem 1.3rem 1.3rem;
}
.review-card {
  padding: var(--lpi-pad-card, 1.2rem 1.25rem);
}
.trust-item {
  padding: 1.1rem 1.15rem;
}
.service-card {
  padding: 0;
}
.service-card__body {
  padding: 1.35rem 1.35rem 1.45rem;
}

/* Features-grid children: stretch without forcing 100% height quirks on prose */
.features-grid > .prose-panel,
.features-grid > .lpi-figure,
.features-grid > form,
.features-grid > .faq-index {
  height: auto;
}

/* Region guides / council index wrappers when present */
.region-guides,
.region-guides--councils {
  border: 1px solid var(--lpi-card-border);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--lpi-amber) 4%, transparent), transparent 40%),
    var(--color-surface, #fff);
  padding: var(--lpi-card-pad);
  box-shadow: var(--lpi-lift, 0 10px 28px -14px rgba(6, 43, 88, 0.2));
}

/* Ensure mid-page navy .lpi-cta links never fall back to UA blue */
.lpi-cta a,
.cta-banner a,
.cta-section a,
.footer a {
  text-decoration-thickness: from-font;
}
.lpi-cta a:not(.btn) {
  color: var(--lpi-amber) !important;
}

/* About/services cta-section: keep as inset navy card with side gutter on small screens */
@media (max-width: 719.98px) {
  .cta-section {
    margin-inline: clamp(0.75rem, 3vw, 1rem);
    border-radius: var(--lpi-radius-lg, 18px) !important;
  }
}