/*
 * Almighty Bail Bonds: finishing layer for the public site
 *
 * Loaded last on every public page. The older stylesheets keep the layout
 * and component structure; this file settles what they left inconsistent:
 * one palette, one button language, one header and footer, photo-backed
 * page headers on the interior pages, and the spacing and responsive fixes
 * found by checking every page from 360 to 2560 pixels wide.
 *
 * How the selectors are written: component rules start with
 * "html:not(#legacy) body". No element has that id, so the prefix matches
 * every page and simply ranks these rules above the long selectors in the
 * older files. Where an older rule used !important, the rule here does too.
 *
 * Sections
 *   1. Palette and tokens
 *   2. Base (skip link, focus, anchors, headings)
 *   3. Buttons and links
 *   4. Utility bar, header, phone menu
 *   5. Footer and call bar
 *   6. Home page
 *   7. Interior page header
 *   8. Interior shared blocks
 *   9. Interior pages, one by one
 */

/* ========================================================================
   1. Palette and tokens
   Navy frames the site, sandstone marks accents, oxblood is the one colour
   for the primary action. Every older alias resolves to these values.
   ======================================================================== */

:root:root,
html[data-theme] {
  color-scheme: light;

  --navy-deep: #0b1f2b;
  --navy-950: #102b3a;
  --navy-900: #17384b;
  --navy-raised: #1d4257;
  --sandstone: #dcc6a4;
  --sandstone-soft: #eee3d1;
  --sandstone-wash: #f4eee3;
  --snow: #faf8f2;
  --white: #ffffff;
  --oxblood: #8f3440;
  --oxblood-dark: #742936;
  --ink: #102b3a;
  --ink-soft: #46565f;
  --rule: rgba(16, 43, 58, .16);
  --rule-on-dark: rgba(250, 248, 242, .2);
  --text-on-dark: #faf8f2;
  --text-on-dark-muted: #d5dedd;

  /* Older layers named their own blues, greens, reds and off-whites. */
  --navy-850: var(--navy-900);
  --navy-800: var(--navy-900);
  --ponderosa: var(--navy-900);
  --ponderosa-dark: var(--navy-950);
  --ponderosa-soft: var(--sandstone-soft);
  --brick: var(--navy-950);
  --accent: var(--navy-950);
  --premium-midnight: var(--navy-950);
  --premium-midnight-deep: var(--navy-deep);
  --premium-civic: var(--navy-900);
  --premium-civic-strong: var(--navy-900);
  --premium-sky: var(--sandstone);
  --premium-paper: var(--snow);
  --premium-rust: var(--oxblood);
  --premium-rust-dark: var(--oxblood-dark);
  --premium-ink: var(--navy-950);
  --premium-muted: var(--ink-soft);
  --premium-line: var(--rule);
  --court-gray: var(--ink-soft);
  --muted: var(--ink-soft);
  --cta: var(--oxblood);
  --cta-hover: var(--oxblood-dark);

  --polish-gutter: clamp(1rem, 3.2vw, 4.5rem);
  --polish-section: clamp(3.5rem, 6vw, 6.5rem);
  --polish-radius: .75rem;
  --polish-radius-sm: .5rem;
  --polish-shadow: 0 18px 44px rgba(11, 31, 43, .14);
  --polish-header: 5.5rem;
}

html:not(#legacy) body.interior-page {
  --interior-ink: var(--navy-950);
  --interior-navy: var(--navy-950);
  --interior-navy-2: var(--navy-900);
  --interior-red: var(--oxblood);
  --interior-red-dark: var(--oxblood-dark);
  --interior-cream: var(--snow);
  --interior-paper: var(--white);
  --interior-mist: var(--sandstone-wash);
  --interior-rule: #d8d2c4;
  --interior-gold: var(--sandstone);
}

@media (max-width: 74.999rem) {
  :root:root,
  html[data-theme] {
    --polish-header: 4.75rem;
  }
}

/* ========================================================================
   2. Base
   ======================================================================== */

/* Large monitors: type and spacing grow with the window so pages fill a
   wide screen instead of sitting small in the middle of it. The scale is
   percent based, so a reader's own browser text size still applies. */
html {
  font-size: clamp(100%, 52.3% + .4545vw, 125%);
  scroll-padding-top: calc(var(--polish-header) + 1rem);
}

html:not(#legacy) body {
  background: var(--snow);
  color: var(--ink);
}

/* Headings break into even lines so a single word is not left alone. */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

p,
li,
dd,
figcaption {
  text-wrap: pretty;
}

/* The skip link is drawn only while it has keyboard focus. */
.skip-link {
  top: .75rem;
  left: .75rem;
  padding: .8rem 1.1rem;
  color: var(--white);
  background: var(--navy-950);
  border: 2px solid var(--sandstone);
  border-radius: var(--polish-radius-sm);
  font-weight: 700;
}

.skip-link:not(:focus):not(:focus-visible) {
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--oxblood);
  outline-offset: 3px;
}

:where(.band-dark, .footer, .utility-bar, .presentation-hero, .page-head, .mobile-menu) :where(a, button, input, select, textarea, summary):focus-visible {
  outline-color: var(--sandstone);
}

main :where(section[id], [id]) {
  scroll-margin-top: calc(var(--polish-header) + 1rem);
}

/* ========================================================================
   3. Buttons and links
   Red is the primary action. Navy is the second choice on light surfaces,
   an outline is the second choice on navy surfaces.
   ======================================================================== */

html:not(#legacy) body .btn {
  min-height: 3rem;
  padding: .8rem 1.35rem;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--polish-radius-sm);
  font-size: .98rem;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  box-shadow: none;
}

html:not(#legacy) body .btn--lg {
  min-height: 3.4rem;
  padding: .95rem 1.7rem;
  font-size: 1.04rem;
}

html:not(#legacy) body .btn--cta {
  color: var(--white);
  background: var(--oxblood);
  border-color: var(--oxblood);
  box-shadow: 0 8px 20px rgba(116, 41, 54, .22);
}

html:not(#legacy) body .btn--cta:hover,
html:not(#legacy) body .btn--cta:focus-visible {
  color: var(--white);
  background: var(--oxblood-dark);
  border-color: var(--oxblood-dark);
}

html:not(#legacy) body .btn--primary,
html:not(#legacy) body .btn--ghost {
  color: var(--white);
  background: var(--navy-950);
  border-color: var(--navy-950);
}

html:not(#legacy) body .btn--primary:hover,
html:not(#legacy) body .btn--primary:focus-visible,
html:not(#legacy) body .btn--ghost:hover,
html:not(#legacy) body .btn--ghost:focus-visible {
  color: var(--white);
  background: var(--navy-900);
  border-color: var(--navy-900);
}

html:not(#legacy) body .btn--light {
  color: var(--navy-950);
  background: var(--white);
  border-color: var(--white);
}

html:not(#legacy) body .btn--light:hover,
html:not(#legacy) body .btn--light:focus-visible {
  color: var(--navy-950);
  background: var(--sandstone-soft);
  border-color: var(--sandstone-soft);
}

/* On navy the second button is an outline, never navy on navy. */
html:not(#legacy) body :is(.band-dark, .cta-final.band-dark, .page-head, .mobile-menu, .footer) :is(.btn--primary, .btn--ghost) {
  color: var(--white);
  background: transparent;
  border-color: rgba(250, 248, 242, .55);
}

html:not(#legacy) body :is(.band-dark, .cta-final.band-dark, .page-head, .mobile-menu, .footer) :is(.btn--primary, .btn--ghost):is(:hover, :focus-visible) {
  color: var(--navy-950);
  background: var(--white);
  border-color: var(--white);
}

/* ========================================================================
   4. Utility bar, header, phone menu
   ======================================================================== */

html:not(#legacy) body .utility-bar {
  min-height: 2.75rem;
  color: var(--text-on-dark);
  background: var(--navy-950);
  border-bottom: 0;
}

html:not(#legacy) body .utility-bar__inner {
  min-height: 2.75rem;
  gap: 1rem;
}

html:not(#legacy) body .utility-bar a {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}

html:not(#legacy) body .nav {
  min-height: var(--polish-header);
  gap: clamp(1rem, 2vw, 2.5rem);
  color: var(--navy-950);
  background: rgba(250, 248, 242, .98);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 8px 24px rgba(11, 31, 43, .06);
}

html:not(#legacy) body .nav[data-scrolled] {
  min-height: var(--polish-header);
  background: rgba(250, 248, 242, .99);
  box-shadow: 0 10px 28px rgba(11, 31, 43, .12);
}

html:not(#legacy) body .nav > .brand {
  min-width: 0;
  min-height: 2.75rem;
  align-items: center;
}

html:not(#legacy) body .nav .nav__links a,
html:not(#legacy) body .nav .nav__links a[aria-current="page"] {
  padding-block: 0;
  min-height: var(--polish-header);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

html:not(#legacy) body .nav .nav__links a::after {
  bottom: 1.35rem;
}

html:not(#legacy) body .nav__right {
  gap: .75rem;
}

html:not(#legacy) body .nav .nav__account {
  min-height: 3rem;
  padding: .7rem 1rem;
  color: var(--navy-950);
  background: transparent;
  border: 1px solid rgba(16, 43, 58, .38);
  border-radius: var(--polish-radius-sm);
  font-size: .88rem;
  font-weight: 700;
  white-space: nowrap;
}

html:not(#legacy) body .nav .nav__account:hover,
html:not(#legacy) body .nav .nav__account:focus-visible {
  color: var(--white);
  background: var(--navy-950);
  border-color: var(--navy-950);
}

html:not(#legacy) body .nav .nav__cta {
  min-height: 3rem;
  padding: .7rem 1.15rem;
  font-size: 1rem;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(116, 41, 54, .2);
}

html:not(#legacy) body .hamburger,
html:not(#legacy) body .mobile-menu__close {
  width: 3rem;
  height: 3rem;
  color: var(--navy-950);
  background: transparent;
  border: 1px solid rgba(16, 43, 58, .38);
  border-radius: var(--polish-radius-sm);
}

/* All seven links fit from 1500 pixels; below that the two least used
   links stay in the phone menu and the footer. */
@media (min-width: 75rem) and (max-width: 93.749rem) {
  html:not(#legacy) body .nav .nav__links a[href="/service-area.html"],
  html:not(#legacy) body .nav .nav__links a[href="/about.html"] {
    display: none;
  }
}

@media (min-width: 93.75rem) {
  html:not(#legacy) body .nav .nav__links a[href="/service-area.html"],
  html:not(#legacy) body .nav .nav__links a[href="/about.html"] {
    display: inline-flex;
  }

  html:not(#legacy) body .nav__links {
    gap: clamp(1rem, 1.5vw, 1.9rem);
  }
}

/* Tablets and phones: brand, the call button when there is room, menu button. */
@media (max-width: 74.999rem) {
  html:not(#legacy) body .nav {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-inline: var(--site-content-gutter, 1rem);
  }

  html:not(#legacy) body .nav .nav__links,
  html:not(#legacy) body .nav .nav__account {
    display: none;
  }

  html:not(#legacy) body .hamburger {
    display: grid;
    place-items: center;
  }
}

@media (min-width: 40rem) and (max-width: 74.999rem) {
  html:not(#legacy) body .nav .nav__cta {
    display: inline-flex;
  }
}

@media (max-width: 39.999rem) {
  html:not(#legacy) body .nav .nav__cta {
    display: none;
  }
}

/* Phone menu */
html:not(#legacy) body .mobile-menu {
  color: var(--text-on-dark);
  background: var(--navy-950);
}

html:not(#legacy) body .mobile-menu__top {
  min-height: var(--polish-header);
  border-bottom: 1px solid var(--rule-on-dark);
}

html:not(#legacy) body .mobile-menu .mobile-menu__close {
  color: var(--white);
  border-color: rgba(250, 248, 242, .45);
  font-size: 1.6rem;
  line-height: 1;
}

html:not(#legacy) body .mobile-menu nav a {
  min-height: 3.25rem;
  display: flex;
  align-items: center;
  color: var(--text-on-dark);
  border-bottom: 1px solid var(--rule-on-dark);
}

html:not(#legacy) body .mobile-menu nav a[aria-current="page"] {
  color: var(--sandstone);
}

html:not(#legacy) body .mobile-menu .mobile-menu__account {
  color: var(--sandstone);
  font-weight: 800;
}

html:not(#legacy) body .mobile-menu__actions {
  display: grid;
  gap: .75rem;
}

html:not(#legacy) body .mobile-menu__actions .btn {
  width: 100%;
  min-height: 3.25rem;
}

/* ========================================================================
   5. Footer and call bar
   ======================================================================== */

html:not(#legacy) body[class] .footer {
  padding-top: clamp(3rem, 5vw, 5rem);
  color: var(--text-on-dark-muted);
  background: var(--navy-deep);
  border-top: 4px solid var(--sandstone);
}

html:not(#legacy) body[class] .footer__grid {
  align-items: start;
  gap: clamp(2rem, 4vw, 5rem);
  min-height: 0;
  padding-bottom: clamp(1.75rem, 3vw, 3rem);
}

html:not(#legacy) body[class] .footer__legal nav a,
html:not(#legacy) body[class] .footer__col li a {
  min-width: 2.75rem;
}

html:not(#legacy) body[class] .footer__legal nav a {
  justify-content: center;
}

@media (min-width: 64rem) {
  html:not(#legacy) body[class] .footer__grid {
    grid-template-columns: minmax(16rem, 1fr) repeat(3, max-content);
    column-gap: clamp(2rem, 5vw, 6rem);
  }
}

html:not(#legacy) body[class] .footer a {
  color: var(--text-on-dark);
}

html:not(#legacy) body[class] .footer .footer__heading {
  color: var(--sandstone);
}

html:not(#legacy) body[class] .footer__col li a,
html:not(#legacy) body[class] .footer__phones a,
html:not(#legacy) body[class] .footer__legal nav a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
}

html:not(#legacy) body[class] .footer__col ul {
  display: grid;
  gap: 0;
}

html:not(#legacy) body[class] .footer .disclaimer {
  max-width: none;
  margin-top: 0;
  color: #b9c6c6;
  border-top: 1px solid var(--rule-on-dark);
}

html:not(#legacy) body[class] .footer__legal {
  border-top: 1px solid var(--rule-on-dark);
}

html:not(#legacy) body[class] .footer .site-credit {
  min-height: 2.75rem;
}

html:not(#legacy) body[class] .callbar {
  background: var(--navy-950);
  border-top: 1px solid var(--rule-on-dark);
}

html:not(#legacy) body[class] .callbar .btn {
  min-height: 3rem;
}

/* ========================================================================
   6. Home page
   ======================================================================== */

/* Hero: the Denver photo under one plain navy scrim. */
html:not(#legacy) body.home-page .presentation-hero__veil {
  background: rgba(16, 43, 58, .62);
}

html:not(#legacy) body.home-page .presentation-hero__media::after {
  background: transparent;
}

html:not(#legacy) body.home-page .presentation-hero__preview {
  color: var(--white);
}

html:not(#legacy) body.home-page .presentation-hero :is(.hero-kicker, h1, .lead, .presentation-hero__preview) {
  text-shadow: 0 1px 2px rgba(11, 31, 43, .55);
}

/* The four actions and the fact strip use the hero width on large screens. */
html:not(#legacy) body.home-page .home-actions,
html:not(#legacy) body.home-page .presentation-hero__proof {
  width: min(100%, 86rem);
}

html:not(#legacy) body.home-page .home-actions {
  background: rgba(16, 43, 58, .82);
  border: 1px solid rgba(250, 248, 242, .24);
  border-radius: var(--polish-radius);
  box-shadow: 0 20px 48px rgba(11, 31, 43, .34);
  backdrop-filter: none;
}

html:not(#legacy) body.home-page .home-action,
html:not(#legacy) body.home-page .home-action:nth-child(n) {
  min-height: 6.5rem;
  align-content: center;
  border-radius: var(--polish-radius-sm);
  background: rgba(250, 248, 242, .08);
  box-shadow: inset 0 0 0 1px rgba(250, 248, 242, .16);
}

html:not(#legacy) body.home-page .home-action--urgent,
html:not(#legacy) body.home-page .home-action--urgent:nth-child(n) {
  background: var(--oxblood);
  box-shadow: none;
}

html:not(#legacy) body.home-page .home-action:is(:hover, :focus-visible) {
  background: rgba(250, 248, 242, .16);
}

html:not(#legacy) body.home-page .home-action--urgent:is(:hover, :focus-visible) {
  background: var(--oxblood-dark);
}

html:not(#legacy) body.home-page .home-action > span,
html:not(#legacy) body.home-page .home-action small {
  color: var(--text-on-dark);
}

@media (max-width: 44rem) {
  html:not(#legacy) body.home-page .presentation-hero__veil {
    background: rgba(16, 43, 58, .7);
  }
}

/* A real bondsman: photo and copy share the row height. */
html:not(#legacy) body.home-page .home-trust-stage__frame {
  overflow: hidden;
  border-radius: var(--polish-radius);
}

html:not(#legacy) body.home-page .home-trust-stage figcaption {
  color: var(--ink-soft);
}

@media (min-width: 60rem) and (max-width: 74.999rem) {
  html:not(#legacy) body.home-page .home-trust-stage__grid,
  html:not(#legacy) body.home-page .payment-stage__grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: center;
  }
}

/* Scripture band and the services panel sit on one navy. */
html:not(#legacy) body.home-page .scripture-horizon.band-dark {
  background: var(--navy-900);
  border-top: 4px solid var(--sandstone);
  border-bottom: 1px solid var(--rule-on-dark);
}

@media (max-width: 44.999rem) {
  /* Room for the cross so it never sits on the words. */
  html:not(#legacy) body.home-page .faith-services-scene .scripture-horizon .scripture-horizon__inner {
    padding-inline-end: 5rem;
  }

  html:not(#legacy) body.home-page .scripture-horizon .scripture-horizon__cross {
    right: 1rem;
    width: 3.5rem;
  }
}

html:not(#legacy) body.home-page .service-card::before {
  color: var(--sandstone);
}

html:not(#legacy) body.home-page .service-card,
html:not(#legacy) body.home-page .service-card:nth-child(even) {
  border-radius: var(--polish-radius-sm);
  background: rgba(250, 248, 242, .07);
  box-shadow: inset 0 0 0 1px rgba(250, 248, 242, .14);
}

html:not(#legacy) body.home-page .service-card:is(:hover, :focus-visible) {
  background: rgba(250, 248, 242, .14);
}

/* The courthouse card: the photo fills the card, the words sit on a plain scrim. */
html:not(#legacy) body.home-page .service-showcase__intro {
  min-height: clamp(18rem, 34vw, 38rem);
  justify-content: flex-end;
  padding: clamp(1.5rem, 3vw, 3rem);
  overflow: hidden;
  border-radius: var(--polish-radius);
  box-shadow: 0 20px 48px rgba(11, 31, 43, .3);
}

html:not(#legacy) body.home-page .service-showcase__photo {
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: none;
}

html:not(#legacy) body.home-page .service-showcase__intro::after {
  background: rgba(16, 43, 58, .6);
}

html:not(#legacy) body.home-page .service-showcase__copy .eyebrow {
  color: var(--sandstone);
}

@media (max-width: 44rem) {
  html:not(#legacy) body.home-page .service-showcase__intro {
    min-height: 17rem;
  }
}

html:not(#legacy) body.home-page .service-help {
  border-radius: var(--polish-radius);
  background: rgba(11, 31, 43, .42);
}

/* In-section buttons on the home page follow the shared button language. */
html:not(#legacy) body.home-page :is(.service-help a, .process-feature__actions a, .payment-stage__actions a) {
  min-height: 3.25rem;
  padding: .85rem 1.35rem;
  color: var(--white);
  background: transparent;
  border: 1px solid rgba(250, 248, 242, .55);
  border-radius: var(--polish-radius-sm);
  font-size: .98rem;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: none;
}

html:not(#legacy) body.home-page :is(.service-help a.service-help__call, .process-feature__actions a:first-child, .payment-stage__actions a:first-child) {
  background: var(--oxblood);
  border-color: var(--oxblood);
  box-shadow: 0 8px 20px rgba(11, 31, 43, .28);
}

html:not(#legacy) body.home-page :is(.service-help a.service-help__call, .process-feature__actions a:first-child, .payment-stage__actions a:first-child):is(:hover, :focus-visible) {
  background: var(--oxblood-dark);
  border-color: var(--oxblood-dark);
}

html:not(#legacy) body.home-page :is(.service-help a.service-help__start, .process-feature__actions a:last-child, .payment-stage__actions a:last-child):is(:hover, :focus-visible) {
  color: var(--navy-950);
  background: var(--white);
  border-color: var(--white);
}

html:not(#legacy) body.home-page .service-help__call {
  gap: .35em;
}

html:not(#legacy) body.home-page .service-help__call span {
  white-space: nowrap;
}

/* Three steps: tiles are as tall as their words. */
html:not(#legacy) body.home-page .process-feature {
  overflow: hidden;
  border-radius: var(--polish-radius);
}

html:not(#legacy) body.home-page .release-steps,
html:not(#legacy) body.home-page .terms-row {
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--polish-radius-sm);
}

html:not(#legacy) body.home-page .release-steps li {
  min-height: 0;
  align-items: start;
  padding: 1.35rem 1.5rem;
  border-bottom: 0;
}

html:not(#legacy) body.home-page .release-steps li:last-child,
html:not(#legacy) body.home-page .terms-row > div:last-child {
  border-right: 0;
}

html:not(#legacy) body.home-page .terms-row > div {
  padding: 1rem 1.5rem;
  border-bottom: 0;
}

@media (min-width: 40rem) {
  html:not(#legacy) body.home-page .release-steps,
  html:not(#legacy) body.home-page .terms-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  html:not(#legacy) body.home-page .terms-row > div {
    display: block;
    border-right: 1px solid var(--rule);
  }
}

@media (max-width: 39.999rem) {
  html:not(#legacy) body.home-page .release-steps li,
  html:not(#legacy) body.home-page .terms-row > div {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }

  html:not(#legacy) body.home-page .release-steps li:last-child,
  html:not(#legacy) body.home-page .terms-row > div:last-child {
    border-bottom: 0;
  }
}

/* Payment */
html:not(#legacy) body.home-page .payment-stage.band-dark {
  background: var(--navy-950);
}

html:not(#legacy) body.home-page .payment-stage__panel {
  overflow: hidden;
  background: var(--navy-900);
  border: 1px solid var(--rule-on-dark);
  border-radius: var(--polish-radius);
}

html:not(#legacy) body.home-page .payment-stage__panel-head span {
  color: var(--sandstone);
}

/* Why Almighty */
html:not(#legacy) body.home-page .faith-stage__media img {
  filter: none;
  /* Keeps the sun and the cross in view when the frame is tall and narrow. */
  object-position: 72% center;
}

html:not(#legacy) body.home-page .faith-stage__content > p:not(.faith-stage__owner) {
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.6;
}

html:not(#legacy) body.home-page .faith-stage.band-light :is(.eyebrow, .faith-stage__owner span, .text-link) {
  color: var(--navy-950);
}

html:not(#legacy) body.home-page .faith-stage__content > .text-link {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  margin-top: .75rem;
}

/* Tablets keep the photo beside the words instead of a thin strip below. */
@media (min-width: 48rem) and (max-width: 63.999rem) {
  html:not(#legacy) body.home-page .faith-stage {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: stretch;
  }

  html:not(#legacy) body.home-page .faith-stage__media {
    order: 0;
    block-size: auto;
    min-height: 100%;
  }

  html:not(#legacy) body.home-page .faith-stage__media picture,
  html:not(#legacy) body.home-page .faith-stage__media img {
    height: 100%;
  }
}

@media (max-width: 47.999rem) {
  html:not(#legacy) body.home-page .faith-stage__media {
    block-size: clamp(13rem, 56vw, 18rem);
  }
}

/* Statewide help and quick answers */
html:not(#legacy) body.home-page .answers-stage.band-dark {
  --section-bg: var(--navy-900);
  background: var(--navy-900);
}

html:not(#legacy) body.home-page .answers-board .region-index li {
  min-height: 4.75rem;
  padding: 1rem 1.15rem;
}

html:not(#legacy) body.home-page .answers-board .region-index li a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
}

html:not(#legacy) body.home-page .answers-board__link {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
}

/* Text links that stand alone are a full tap target and only as wide as their words. */
html:not(#legacy) body.home-page main .text-link {
  display: inline-flex;
  width: fit-content;
  min-height: 2.75rem;
  align-items: center;
}

/* Final call to action: a clean light block, no ghosted photo behind it. */
html:not(#legacy) body.home-page .final-presentation.band-light {
  min-height: 0;
  padding-block: var(--polish-section);
  background: var(--sandstone-wash);
}

html:not(#legacy) body.home-page .final-presentation__copy h2 {
  max-width: 15ch;
  font-size: clamp(2.6rem, 4.6vw, 5.5rem);
  line-height: .96;
}

html:not(#legacy) body.home-page .final-presentation.band-light::before,
html:not(#legacy) body.home-page .final-presentation.band-light::after {
  display: none;
}

html:not(#legacy) body.home-page .final-presentation__actions {
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--polish-radius);
  box-shadow: var(--polish-shadow);
}

html:not(#legacy) body.home-page .final-presentation__actions a,
html:not(#legacy) body.home-page .final-presentation__actions .final-presentation__primary {
  min-height: 5rem;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
}

html:not(#legacy) body.home-page .final-presentation__actions a:last-child {
  border-bottom: 0;
}

html:not(#legacy) body.home-page .final-presentation__actions .final-presentation__primary {
  color: var(--white);
  background: var(--oxblood);
  border-bottom-color: var(--oxblood);
}

html:not(#legacy) body.home-page .final-presentation.band-light .final-presentation__actions a.final-presentation__primary > :is(span, strong),
html:not(#legacy) body.home-page .final-presentation.band-light .final-presentation__actions a.final-presentation__primary::after {
  color: var(--white);
}

html:not(#legacy) body.home-page .final-presentation__actions .final-presentation__primary::before {
  display: none;
}

html:not(#legacy) body.home-page .final-presentation__actions a:not(.final-presentation__primary):is(:hover, :focus-visible) {
  background: var(--sandstone-wash);
}

html:not(#legacy) body.home-page .final-presentation__actions .final-presentation__primary:is(:hover, :focus-visible) {
  background: var(--oxblood-dark);
}

/* ========================================================================
   7. Interior page header
   Every interior page opens like the home page: a full-width photo under
   one plain navy scrim, white heading, sandstone labels, and a row of four
   facts across the bottom.
   ======================================================================== */

html:not(#legacy) body.interior-page .page-head {
  position: relative;
  isolation: isolate;
  display: block;
  min-height: 0 !important;
  min-block-size: 0 !important;
  padding-block: 0 !important;
  overflow: hidden;
  color: var(--white);
  background: var(--navy-950);
  border: 0;
}

html:not(#legacy) body.interior-page .page-head::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  opacity: 1;
  background-color: var(--navy-950);
  background-image: var(--page-head-image, none);
  background-position: center 40%;
  background-size: cover;
  background-repeat: no-repeat;
  filter: none;
}

html:not(#legacy) body.interior-page .page-head::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgba(16, 43, 58, .8) !important;
}

html:not(#legacy) body.interior-page .page-head > .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: end;
  gap: 0;
  width: var(--site-content-width);
  max-width: none;
  min-height: clamp(21rem, 33vw, 31rem);
  margin-inline: auto;
  padding-block: clamp(3rem, 5vw, 5rem) clamp(2rem, 3.5vw, 3.25rem);
  padding-inline: 0;
}

html:not(#legacy) body.interior-page .page-head > .wrap > * {
  grid-column: 1;
  max-width: none;
}

html:not(#legacy) body.interior-page .page-head .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 .55rem;
  width: auto;
  margin: 0 0 .6rem;
  color: var(--text-on-dark-muted);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

html:not(#legacy) body.interior-page .page-head .breadcrumbs a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  color: var(--sandstone);
  text-decoration-color: rgba(220, 198, 164, .5);
}

html:not(#legacy) body.interior-page .page-head .breadcrumbs span {
  color: var(--white);
}

html:not(#legacy) body.interior-page .page-head h1 {
  max-width: 22ch !important;
  margin: 0;
  color: var(--white) !important;
  font-size: clamp(2.6rem, 5vw, 5.25rem) !important;
  line-height: .96 !important;
  letter-spacing: -.035em;
  text-shadow: none !important;
}

html:not(#legacy) body.interior-page .page-head .lead {
  max-width: 62ch !important;
  margin: 1.25rem 0 0;
  color: var(--text-on-dark) !important;
  font-size: clamp(1.05rem, 1.25vw, 1.3rem) !important;
  line-height: 1.6 !important;
  text-shadow: none !important;
}

html:not(#legacy) body.interior-page .page-head .lead a {
  color: var(--white);
  text-decoration-color: var(--sandstone);
}

/* Four facts in one row; two by two on phones. */
html:not(#legacy) body.interior-page .page-head .page-head__rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  max-width: none;
  margin: clamp(1.75rem, 3vw, 2.75rem) 0 0;
  padding: 0;
  list-style: none;
  border: 0 !important;
  border-top: 1px solid rgba(250, 248, 242, .32) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html:not(#legacy) body.interior-page .page-head .page-head__rail > li,
html:not(#legacy) body.interior-page .page-head .page-head__rail > div {
  min-height: 0;
  margin: 0;
  padding: 1rem 1.25rem 0 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  justify-items: start;
  text-align: left;
}

html:not(#legacy) body.interior-page .page-head .page-head__rail > * > * {
  justify-self: start;
  text-align: left;
}

html:not(#legacy) body.interior-page .page-head .page-head__rail > :nth-child(n + 2) {
  padding-left: 1.25rem;
  border-left: 1px solid rgba(250, 248, 242, .2) !important;
}

html:not(#legacy) body.interior-page .page-head .page-head__rail :is(strong, dt) {
  display: block;
  margin: 0 0 .3rem;
  color: var(--sandstone);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1.3;
  text-transform: uppercase;
}

html:not(#legacy) body.interior-page .page-head .page-head__rail :is(span, dd, a) {
  margin: 0;
  color: var(--white);
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.4;
}

html:not(#legacy) body.interior-page .page-head .page-head__rail a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  text-decoration-color: var(--sandstone);
}

html:not(#legacy) body.interior-page .page-head .page-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.5rem;
  width: auto;
  margin: clamp(1.5rem, 2.5vw, 2.25rem) 0 0;
  padding: 1rem 0 0;
  color: var(--white);
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(250, 248, 242, .32);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
}

html:not(#legacy) body.interior-page .page-head .btns {
  margin-top: 1.75rem;
}

@media (max-width: 47.999rem) {
  html:not(#legacy) body.interior-page .page-head > .wrap {
    min-height: 19rem;
    padding-block: 2.5rem 1.75rem;
  }

  html:not(#legacy) body.interior-page .page-head h1 {
    font-size: clamp(2.2rem, 10vw, 3.1rem) !important;
  }

  html:not(#legacy) body.interior-page .page-head .page-head__rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 0;
  }

  html:not(#legacy) body.interior-page .page-head .page-head__rail > li,
  html:not(#legacy) body.interior-page .page-head .page-head__rail > div {
    padding: .9rem .75rem .9rem 0;
  }

  html:not(#legacy) body.interior-page .page-head .page-head__rail > :nth-child(n + 2) {
    padding-left: 0;
    border-left: 0 !important;
  }

  html:not(#legacy) body.interior-page .page-head .page-head__rail > :nth-child(even) {
    padding-left: .9rem;
    border-left: 1px solid rgba(250, 248, 242, .2) !important;
  }

  html:not(#legacy) body.interior-page .page-head .page-head__rail > :nth-child(n + 3) {
    border-top: 1px solid rgba(250, 248, 242, .2) !important;
  }
}

/* ========================================================================
   8. Interior shared blocks
   ======================================================================== */

html:not(#legacy) body.interior-page main {
  background: var(--snow);
}

html:not(#legacy) body.interior-page main > section.section:not(.page-head),
html:not(#legacy) body.interior-page .section {
  padding-block: var(--polish-section);
}

html:not(#legacy) body.interior-page .eyebrow {
  color: var(--oxblood);
}

html:not(#legacy) body.interior-page main > :is(.band-dark, .band-civic) .eyebrow,
html:not(#legacy) body.interior-page .cta-final.band-dark .eyebrow,
html:not(#legacy) body.interior-page :is(.about-covenant__copy, .service-faith-note__copy, .faq-layout__intro, .location-hub__intro, .payment-entry__copy, .process-reference__contact, .contact-grid > :first-child, .servicearea-split > .infocard) .eyebrow {
  color: var(--sandstone);
}

html:not(#legacy) body.interior-page main > :is(.band-dark, .band-civic),
html:not(#legacy) body.interior-page main > .section--alt.band-dark {
  background: var(--navy-950);
  color: var(--white);
}

html:not(#legacy) body.interior-page main > :is(.band-dark, .band-civic) :is(p, li, dd, .lead) {
  color: var(--text-on-dark-muted);
}

/* Closing call to action: heading and buttons on the left, the supporting
   sentence on the right, all on one left edge. */
html:not(#legacy) body.interior-page main > .cta-final {
  position: relative;
  isolation: isolate;
  display: block;
  min-height: 0;
  min-block-size: 0;
  padding-block: var(--polish-section);
  overflow: hidden;
  border-top: 0;
}

html:not(#legacy) body.interior-page main > .cta-final.band-dark {
  color: var(--white);
  background: var(--navy-950);
}

html:not(#legacy) body.interior-page main > .cta-final.band-dark::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: url("/assets/img/mountains-1920.webp") center 62% / cover no-repeat;
}

html:not(#legacy) body.interior-page main > .cta-final.band-dark::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgba(16, 43, 58, .82);
}

html:not(#legacy) body.interior-page main > .cta-final.band-light {
  color: var(--navy-950);
  background: var(--sandstone-wash);
}

html:not(#legacy) body.interior-page main > .cta-final > .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  grid-template-areas:
    "eyebrow eyebrow"
    "title lead"
    "actions lead";
  align-items: start;
  gap: 0 clamp(2rem, 5vw, 6rem);
  padding-top: 0;
  border-top: 0;
  text-align: left;
}

html:not(#legacy) body.interior-page main > .cta-final .eyebrow {
  grid-area: eyebrow;
  margin-bottom: 1rem;
}

html:not(#legacy) body.interior-page main > .cta-final :is(h1, h2) {
  grid-area: title;
  max-width: 18ch;
  margin: 0;
  font-size: clamp(2.2rem, 4vw, 4.25rem);
  line-height: .98;
  letter-spacing: -.035em;
  text-align: left;
}

html:not(#legacy) body.interior-page main > .cta-final.band-dark :is(h1, h2) {
  color: var(--white);
}

html:not(#legacy) body.interior-page main > .cta-final.band-light :is(h1, h2) {
  color: var(--navy-950);
}

html:not(#legacy) body.interior-page main > .cta-final .lead {
  grid-area: lead;
  align-self: center;
  max-width: 44ch;
  margin: 0;
  font-size: clamp(1.08rem, 1.3vw, 1.3rem);
  line-height: 1.6;
  text-align: left;
}

html:not(#legacy) body.interior-page main > .cta-final.band-dark .lead {
  color: var(--text-on-dark);
}

html:not(#legacy) body.interior-page main > .cta-final.band-light .lead {
  color: var(--ink-soft);
}

html:not(#legacy) body.interior-page main > .cta-final .btns {
  grid-area: actions;
  justify-content: flex-start;
  margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
  padding-top: 0;
  border-top: 0;
}

@media (max-width: 55.999rem) {
  html:not(#legacy) body.interior-page main > .cta-final > .wrap {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "eyebrow"
      "title"
      "lead"
      "actions";
  }

  html:not(#legacy) body.interior-page main > .cta-final .lead {
    margin-top: 1.1rem;
  }
}

@media (max-width: 39.999rem) {
  html:not(#legacy) body.interior-page main > .cta-final .btns {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  html:not(#legacy) body.interior-page main > .cta-final .btns .btn {
    width: 100%;
  }
}

/* Section headings inside interior sections */
html:not(#legacy) body.interior-page .section-head {
  display: block;
  max-width: none;
  margin: 0 0 clamp(1.75rem, 3vw, 2.75rem);
  padding-bottom: 0;
  border-bottom: 0;
  text-align: left;
}

html:not(#legacy) body.interior-page .section-head h2 {
  max-width: 24ch;
}

html:not(#legacy) body.interior-page .section-head .eyebrow {
  justify-self: start;
  margin: 0 0 .85rem;
}

html:not(#legacy) body.interior-page main h2 {
  font-size: clamp(2rem, 3.4vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.035em;
}

/* Tile rows: real gaps between equal tiles instead of hairline grids.
   Three across from tablets and one column on phones, so a row of three
   never becomes two plus one left over. */
html:not(#legacy) body.interior-page .grid.grid-3 {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 48rem) {
  html:not(#legacy) body.interior-page .grid.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

html:not(#legacy) body.interior-page .grid.grid-2 {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 40rem) {
  html:not(#legacy) body.interior-page .grid.grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Tile rows, continued. */
html:not(#legacy) body.interior-page :is(.grid.grid-2, .grid.grid-3) {
  gap: 1rem;
  align-items: stretch;
  background: transparent;
  border: 0;
}

html:not(#legacy) body.interior-page :is(.card, .feature) {
  height: 100%;
  min-height: 0;
  padding: clamp(1.4rem, 2.2vw, 2.1rem);
  color: var(--navy-950);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--polish-radius) !important;
  box-shadow: none;
}

html:not(#legacy) body.interior-page .card::before {
  display: none;
}

html:not(#legacy) body.interior-page :is(.card, .feature) h3 {
  margin: 0 0 .5rem;
  font-size: clamp(1.25rem, 1.5vw, 1.55rem);
  line-height: 1.15;
}

html:not(#legacy) body.interior-page main > :is(.band-dark, .band-civic) :is(.card, .feature) {
  color: var(--white);
  background: rgba(250, 248, 242, .07);
  border-color: rgba(250, 248, 242, .18);
}

html:not(#legacy) body.interior-page main > :is(.band-dark, .band-civic) :is(.card, .feature) h3 {
  color: var(--white);
}

html:not(#legacy) body.interior-page main > :is(.band-dark, .band-civic) :is(.card, .feature) p {
  color: var(--text-on-dark-muted);
}

html:not(#legacy) body.interior-page a.card--link {
  display: flex;
  flex-direction: column;
  min-height: 9.5rem;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease;
}

html:not(#legacy) body.interior-page a.card--link .card__more {
  margin-top: auto;
  padding-top: 1.1rem;
  color: var(--oxblood);
  font-size: .9rem;
  font-weight: 800;
}

html:not(#legacy) body.interior-page main > :is(.band-dark, .band-civic) a.card--link .card__more {
  color: var(--sandstone);
}

html:not(#legacy) body.interior-page main > :is(.band-dark, .band-civic) a.card--link:is(:hover, :focus-visible) {
  background: rgba(250, 248, 242, .14);
  border-color: rgba(250, 248, 242, .4);
}

html:not(#legacy) body.interior-page main > .band-light a.card--link:is(:hover, :focus-visible) {
  border-color: var(--navy-950);
}

html:not(#legacy) body.interior-page :is(.callout, .faith-service-callout) {
  margin-block: 1.25rem 0;
  padding: 1.1rem 1.35rem;
  color: var(--navy-950);
  background: var(--sandstone-wash);
  border: 0;
  border-left: 4px solid var(--sandstone);
  border-radius: 0 var(--polish-radius-sm) var(--polish-radius-sm) 0;
}

html:not(#legacy) body.interior-page :is(.callout, .faith-service-callout) p {
  margin: 0;
  color: var(--navy-950);
}

/* ========================================================================
   9. Interior pages, one by one
   ======================================================================== */

/* ---- Service pages (felony, misdemeanor, DUI, domestic violence,
        immigration, warrants) ---- */

html:not(#legacy) body.service-detail-page .servicearea-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(18rem, 26vw, 25rem);
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  align-items: start;
  max-width: none;
}

html:not(#legacy) body.service-detail-page .servicearea-split > .service-guide {
  display: grid;
  gap: 1rem;
  width: 100%;
  max-width: none;
  background: transparent;
}

html:not(#legacy) body.service-detail-page .service-guide__details {
  display: grid;
  gap: 1rem;
}

html:not(#legacy) body.service-detail-page .service-guide__details[hidden] {
  display: none;
}

html:not(#legacy) body.service-detail-page .service-guide__row {
  display: grid;
  grid-template-columns: minmax(9rem, min(28%, 17rem)) minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--polish-radius);
}

html:not(#legacy) body.service-detail-page .service-guide__heading,
html:not(#legacy) body.service-detail-page .service-guide__content {
  min-width: 0;
  padding: clamp(1.4rem, 2.4vw, 2.4rem);
}

html:not(#legacy) body.service-detail-page .service-guide__heading {
  background: var(--sandstone-wash);
}

html:not(#legacy) body.service-detail-page .service-guide__heading h2 {
  max-width: none;
  margin: 0;
  font-size: clamp(1.45rem, 1.9vw, 2rem);
  line-height: 1.1;
  letter-spacing: -.02em;
}

html:not(#legacy) body.service-detail-page .service-guide__content {
  border-left: 1px solid var(--rule);
}

html:not(#legacy) body.service-detail-page .service-guide__content :is(p, li) {
  color: var(--ink-soft);
}

html:not(#legacy) body.service-detail-page .service-guide__content .service-guide__lede {
  color: var(--navy-950);
  font-size: clamp(1.1rem, 1.25vw, 1.3rem);
  line-height: 1.5;
}

html:not(#legacy) body.service-detail-page .service-guide__content > :last-child {
  margin-bottom: 0;
}

html:not(#legacy) body.service-detail-page .mobile-guide-toggle {
  min-height: 3rem;
  padding: .8rem 1.35rem;
  color: var(--navy-950);
  background: var(--white);
  border: 1px solid var(--navy-950);
  border-radius: var(--polish-radius-sm);
  font: 800 .98rem/1.2 var(--font-body);
  cursor: pointer;
}

/* The call panel stays beside the guide while the guide scrolls. */
html:not(#legacy) body.service-detail-page .servicearea-split > .infocard {
  position: sticky;
  top: calc(var(--polish-header) + 1.25rem);
  display: block;
  padding: clamp(1.5rem, 2.2vw, 2.25rem);
  color: var(--white);
  background: var(--navy-950);
  border: 0;
  border-radius: var(--polish-radius) !important;
  box-shadow: var(--polish-shadow);
}

html:not(#legacy) body.service-detail-page .servicearea-split > .infocard h3 {
  color: var(--white);
  font-size: clamp(1.35rem, 1.7vw, 1.7rem);
  line-height: 1.12;
}

html:not(#legacy) body.service-detail-page .servicearea-split > .infocard > p {
  color: var(--text-on-dark-muted);
}

html:not(#legacy) body.service-detail-page .servicearea-split > .infocard > dl {
  display: grid;
  grid-area: auto;
  margin: 1.1rem 0 1.35rem;
  border-top: 1px solid var(--rule-on-dark);
}

html:not(#legacy) body.service-detail-page .servicearea-split > .infocard > dl > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .1rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--rule-on-dark);
}

html:not(#legacy) body.service-detail-page .servicearea-split > .infocard dt {
  color: var(--sandstone);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

html:not(#legacy) body.service-detail-page .servicearea-split > .infocard dd {
  margin: 0;
  text-align: left;
  color: var(--white);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.4;
}

html:not(#legacy) body.service-detail-page .servicearea-split > .infocard dd a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  color: var(--white);
}

html:not(#legacy) body.service-detail-page .servicearea-split > .infocard > .infocard__actions {
  display: grid;
  grid-area: auto;
  grid-template-columns: minmax(0, 1fr);
  gap: .6rem;
}

html:not(#legacy) body.service-detail-page .servicearea-split > .infocard .btn--primary {
  color: var(--white);
  background: transparent;
  border-color: rgba(250, 248, 242, .55);
}

html:not(#legacy) body.service-detail-page .servicearea-split > .infocard .btn--primary:is(:hover, :focus-visible) {
  color: var(--navy-950);
  background: var(--white);
  border-color: var(--white);
}

@media (max-width: 63.999rem) {
  html:not(#legacy) body.service-detail-page .servicearea-split {
    grid-template-columns: minmax(0, 1fr);
  }

  html:not(#legacy) body.service-detail-page .servicearea-split > .infocard {
    position: static;
  }

  html:not(#legacy) body.service-detail-page .servicearea-split > .infocard > dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
  }

  html:not(#legacy) body.service-detail-page .servicearea-split > .infocard > .infocard__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 47.999rem) {
  html:not(#legacy) body.service-detail-page .service-guide__row {
    grid-template-columns: minmax(0, 1fr);
  }

  html:not(#legacy) body.service-detail-page .service-guide__content {
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
}

@media (max-width: 34.999rem) {
  html:not(#legacy) body.service-detail-page .servicearea-split > .infocard > dl,
  html:not(#legacy) body.service-detail-page .servicearea-split > .infocard > .infocard__actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Service area and the four county pages ---- */

html:not(#legacy) body.service-area-page .location-hub {
  padding: var(--polish-section) 0;
  background: var(--snow);
}

html:not(#legacy) body.service-area-page .location-hub__inner {
  display: grid;
  grid-template-columns: minmax(18rem, .8fr) minmax(0, 1.7fr);
  gap: 0;
  width: var(--site-content-width);
  max-width: none;
  min-height: 0;
  margin-inline: auto;
  padding: 0;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--polish-radius);
  box-shadow: var(--polish-shadow);
}

/* Navy lead panel over the mountain photo, one plain scrim. */
html:not(#legacy) body.service-area-page .location-hub__intro {
  position: relative;
  isolation: isolate;
  justify-content: center;
  padding: clamp(1.75rem, 3.4vw, 3.5rem);
  color: var(--white);
  background: var(--navy-950) url("/assets/img/mountains-1920.webp") center / cover no-repeat;
}

html:not(#legacy) body.service-area-page .location-hub__intro::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgba(16, 43, 58, .84);
}

html:not(#legacy) body.service-area-page .location-hub__intro .eyebrow {
  color: var(--sandstone);
}

html:not(#legacy) body.service-area-page .location-hub__intro h2 {
  max-width: 14ch;
  color: var(--white);
  font-size: clamp(1.9rem, 3vw, 3.1rem);
  line-height: 1;
}

html:not(#legacy) body.service-area-page .location-hub__intro p {
  margin-top: 1rem;
  color: var(--text-on-dark);
}

html:not(#legacy) body.service-area-page .location-hub__intro .btns {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.5rem;
}

html:not(#legacy) body.service-area-page .location-hub__intro .btn--primary {
  color: var(--white);
  background: transparent;
  border-color: rgba(250, 248, 242, .55);
}

html:not(#legacy) body.service-area-page .location-hub__intro .btn--primary:is(:hover, :focus-visible) {
  color: var(--navy-950);
  background: var(--white);
  border-color: var(--white);
}

/* The tiles: dark words on white, equal height, three across. */
html:not(#legacy) body.service-area-page .location-index {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: none;
  grid-auto-rows: 1fr;
  gap: .75rem;
  align-content: start;
  padding: clamp(1rem, 1.8vw, 1.75rem);
  background: var(--white);
}

html:not(#legacy) body.service-area-page.location-page .location-index {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html:not(#legacy) body.service-area-page .location-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .4rem .75rem;
  align-content: start;
  min-height: 7.5rem;
  padding: 1.15rem 1.25rem;
  color: var(--navy-950);
  background: var(--snow);
  border: 1px solid var(--rule);
  border-radius: var(--polish-radius-sm);
  text-decoration: none;
}

html:not(#legacy) body.service-area-page .location-link strong {
  grid-column: 1;
  color: var(--navy-950);
  font-size: 1.08rem;
  line-height: 1.25;
}

html:not(#legacy) body.service-area-page .location-link small {
  grid-column: 1 / -1;
  color: var(--ink-soft);
  font-size: .92rem;
  line-height: 1.45;
}

html:not(#legacy) body.service-area-page .location-link > span {
  grid-column: 2;
  grid-row: 1;
  color: var(--oxblood);
  font-weight: 800;
}

html:not(#legacy) body.service-area-page a.location-link {
  background: var(--white);
  border-color: rgba(16, 43, 58, .3);
  box-shadow: inset 3px 0 0 var(--oxblood);
}

html:not(#legacy) body.service-area-page a.location-link:is(:hover, :focus-visible) {
  background: var(--sandstone-wash);
  border-color: var(--navy-950);
}

@media (min-width: 56rem) {
  html:not(#legacy) body.service-area-page:not(.location-page) .location-index > :last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
    min-height: 0;
  }
}

@media (max-width: 74.999rem) {
  html:not(#legacy) body.service-area-page .location-hub__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  html:not(#legacy) body.service-area-page .location-hub__intro h2 {
    max-width: 22ch;
  }
}

@media (max-width: 55.999rem) {
  html:not(#legacy) body.service-area-page .location-index,
  html:not(#legacy) body.service-area-page.location-page .location-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 34.999rem) {
  html:not(#legacy) body.service-area-page .location-index,
  html:not(#legacy) body.service-area-page.location-page .location-index {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }

  html:not(#legacy) body.service-area-page .location-link {
    min-height: 0;
  }
}

/* The three-fact band used on the service area, county and process pages */
html:not(#legacy) body.interior-page main > .process-essentials:is(.section, .band-dark, .band-civic) {
  color: var(--white);
  background: var(--navy-950);
}

html:not(#legacy) body.interior-page .process-essentials > .wrap {
  display: grid;
  grid-template-columns: minmax(16rem, .75fr) minmax(0, 1.5fr);
  gap: clamp(1.5rem, 4vw, 4.5rem);
  align-items: center;
}

html:not(#legacy) body.interior-page .process-essentials__intro h2 {
  color: var(--white);
  font-size: clamp(1.9rem, 3vw, 3.1rem);
}

html:not(#legacy) body.interior-page .process-essentials__intro p {
  margin-top: .9rem;
  color: var(--text-on-dark-muted);
}

html:not(#legacy) body.interior-page .process-essentials__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  border: 0;
}

html:not(#legacy) body.interior-page .process-essentials__grid > div {
  padding: 1.35rem 1.4rem;
  background: rgba(250, 248, 242, .07);
  border: 1px solid rgba(250, 248, 242, .18);
  border-radius: var(--polish-radius-sm);
}

html:not(#legacy) body.interior-page .process-essentials__grid dt {
  color: var(--sandstone);
  font-size: 1.05rem;
  font-weight: 800;
}

html:not(#legacy) body.interior-page .process-essentials__grid dd {
  margin: .45rem 0 0;
  color: var(--text-on-dark);
  font-size: .95rem;
  line-height: 1.55;
}

@media (max-width: 63.999rem) {
  html:not(#legacy) body.interior-page .process-essentials > .wrap {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 39.999rem) {
  html:not(#legacy) body.interior-page .process-essentials__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* County pages: the lead panel runs across the top so the six tiles below
   are only as tall as their words. */
html:not(#legacy) body.service-area-page.location-page .location-hub__inner {
  grid-template-columns: minmax(0, 1fr);
}

html:not(#legacy) body.service-area-page.location-page .location-hub__intro {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: .25rem clamp(1.5rem, 4vw, 4.5rem);
  align-items: start;
}

html:not(#legacy) body.service-area-page.location-page .location-hub__intro .eyebrow {
  grid-column: 1 / -1;
}

html:not(#legacy) body.service-area-page.location-page .location-hub__intro h2 {
  grid-column: 1;
  grid-row: 2 / span 2;
  max-width: 18ch;
}

html:not(#legacy) body.service-area-page.location-page .location-hub__intro p {
  grid-column: 2;
  margin-top: 0;
}

html:not(#legacy) body.service-area-page.location-page .location-hub__intro .btns {
  grid-column: 2;
  margin-top: 1.1rem;
}

html:not(#legacy) body.service-area-page.location-page .location-index {
  grid-auto-rows: auto;
}

html:not(#legacy) body.service-area-page.location-page .location-link {
  min-height: 6.5rem;
}

@media (max-width: 55.999rem) {
  html:not(#legacy) body.service-area-page.location-page .location-hub__intro {
    grid-template-columns: minmax(0, 1fr);
  }

  html:not(#legacy) body.service-area-page.location-page .location-hub__intro :is(h2, p, .btns) {
    grid-column: 1;
    grid-row: auto;
  }

  html:not(#legacy) body.service-area-page.location-page .location-hub__intro p {
    margin-top: 1rem;
  }
}

/* County pages: the "what to have ready" pair */
html:not(#legacy) body.location-page main > .band-light:not(.location-hub) .section-head {
  padding: 0;
  background: transparent;
  border: 0;
}

html:not(#legacy) body.location-page main > .band-light:not(.location-hub) .section-head .lead {
  max-width: 60ch;
  margin-top: .9rem;
  color: var(--ink-soft);
}

/* ---- Services ---- */

html:not(#legacy) body.services-page .services-directory {
  padding: var(--polish-section) 0 clamp(1.5rem, 2.5vw, 2.5rem);
  color: var(--navy-950);
  background: var(--snow);
}

html:not(#legacy) body.services-page .services-directory__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: .5rem clamp(2rem, 5vw, 6rem);
  align-items: end;
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
  padding: 0;
  color: var(--navy-950);
  background: transparent;
}

html:not(#legacy) body.services-page .services-directory__intro .eyebrow {
  grid-column: 1 / -1;
  grid-row: 1;
  margin-bottom: .5rem;
}

html:not(#legacy) body.services-page .services-directory__intro h2 {
  grid-column: 1;
  grid-row: 2;
  max-width: 18ch;
}

html:not(#legacy) body.services-page .services-directory__intro p {
  grid-column: 2;
  grid-row: 2;
  max-width: 52ch;
  color: var(--ink-soft);
  font-size: clamp(1.02rem, 1.2vw, 1.2rem);
  line-height: 1.6;
}

html:not(#legacy) body.services-page .services-directory__rows {
  display: grid;
  gap: 1rem;
  padding: 0;
}

/* Each row: one photo and two equal links. */
html:not(#legacy) body.services-page .services-directory__row {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  min-height: clamp(16rem, 22vw, 22rem);
  overflow: hidden;
  color: var(--navy-950);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--polish-radius);
  box-shadow: none;
}

html:not(#legacy) body.services-page .services-directory__row--reverse {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
}

html:not(#legacy) body.services-page .services-directory__row--reverse .services-directory__media {
  order: 2;
}

html:not(#legacy) body.services-page .services-directory__media {
  min-height: 13rem;
  margin: 0;
  background: var(--navy-950);
}

html:not(#legacy) body.services-page .services-directory__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
}

html:not(#legacy) body.services-page .services-directory__links {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0;
  min-height: 100%;
  background: transparent;
}

html:not(#legacy) body.services-page .services-directory__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 6.5rem;
  padding: clamp(1.15rem, 2.4vw, 2.4rem);
  color: var(--navy-950);
  background: var(--white);
  border: 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  transition: background-color 160ms ease;
}

html:not(#legacy) body.services-page .services-directory__card:last-child {
  border-bottom: 0;
}

html:not(#legacy) body.services-page .services-directory__card:is(:hover, :focus-visible) {
  background: var(--sandstone-wash);
}

html:not(#legacy) body.services-page .services-directory__card h3 {
  margin: 0;
  color: var(--navy-950);
  font-size: clamp(1.3rem, 1.9vw, 1.95rem);
  line-height: 1.12;
}

html:not(#legacy) body.services-page .services-directory__card p {
  max-width: 46ch;
  margin-top: .4rem;
  color: var(--ink-soft);
  font-size: .98rem;
  line-height: 1.5;
}

html:not(#legacy) body.services-page .services-directory__arrow {
  width: 2.75rem;
  height: 2.75rem;
  color: var(--white);
  background: var(--oxblood);
  font-size: 1.25rem;
}

/* Faith note: navy panel beside the sunrise photo. */
html:not(#legacy) body.services-page .service-faith-note {
  padding: clamp(1rem, 2vw, 2rem) 0 var(--polish-section);
  background: var(--snow);
}

html:not(#legacy) body.services-page .service-faith-note__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--navy-950);
  border-radius: var(--polish-radius);
}

html:not(#legacy) body.services-page .service-faith-note__copy,
html:not(#legacy) body.services-page .service-faith-note__media {
  min-height: clamp(18rem, 26vw, 26rem);
}

html:not(#legacy) body.services-page .service-faith-note__copy {
  padding: clamp(1.75rem, 4vw, 4rem);
}

html:not(#legacy) body.services-page .service-faith-note__copy h2 {
  color: var(--white);
}

html:not(#legacy) body.services-page .service-faith-note__copy p {
  max-width: 54ch;
  margin-top: 1rem;
  color: var(--text-on-dark);
}

html:not(#legacy) body.services-page .service-faith-note__copy .eyebrow,
html:not(#legacy) body.services-page .service-faith-note__welcome span {
  color: var(--sandstone);
}

html:not(#legacy) body.services-page .service-faith-note__media {
  margin: 0;
}

html:not(#legacy) body.services-page .service-faith-note__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
}

@media (max-width: 55.999rem) {
  html:not(#legacy) body.services-page .services-directory__intro,
  html:not(#legacy) body.services-page .services-directory__row,
  html:not(#legacy) body.services-page .services-directory__row--reverse,
  html:not(#legacy) body.services-page .service-faith-note__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  html:not(#legacy) body.services-page .services-directory__intro :is(h2, p) {
    grid-column: 1;
    grid-row: auto;
  }

  html:not(#legacy) body.services-page .services-directory__row--reverse .services-directory__media,
  html:not(#legacy) body.services-page .service-faith-note__media {
    order: -1;
  }

  html:not(#legacy) body.services-page .services-directory__media,
  html:not(#legacy) body.services-page .service-faith-note__media {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  html:not(#legacy) body.services-page .service-faith-note__copy {
    min-height: 0;
  }
}

/* ---- How bail works ---- */

html:not(#legacy) body.process-page .process-presentation {
  padding: var(--polish-section) 0;
  background: var(--snow);
}

html:not(#legacy) body.process-page .process-presentation__inner {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  min-height: 0;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--polish-radius);
  box-shadow: none;
}

html:not(#legacy) body.process-page .process-presentation__media {
  display: block;
  min-height: 18rem;
  margin: 0;
}

html:not(#legacy) body.process-page .process-presentation__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
}

html:not(#legacy) body.process-page .process-presentation__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 3.4vw, 3.5rem);
}

html:not(#legacy) body.process-page .process-presentation__content h2 {
  max-width: 16ch;
}

html:not(#legacy) body.process-page .process-sequence {
  margin: clamp(1.25rem, 2vw, 2rem) 0 0;
  border-top: 1px solid var(--rule);
}

html:not(#legacy) body.process-page .process-step {
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}

html:not(#legacy) body.process-page .process-step > span {
  color: var(--white);
  background: var(--oxblood);
}

html:not(#legacy) body.process-page .process-step h3 {
  font-size: 1.2rem;
}

html:not(#legacy) body.process-page .process-step p {
  color: var(--ink-soft);
}

html:not(#legacy) body.process-page .process-presentation__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: clamp(1.25rem, 2vw, 2rem);
}

/* The full guide: one white sheet, opening photo, eight numbered chapters. */
html:not(#legacy) body.process-page .process-reference-section {
  background: var(--snow);
}

html:not(#legacy) body.process-page .process-reference {
  padding: 0;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--polish-radius);
}

html:not(#legacy) body.process-page .process-reference__guide {
  padding: 0;
}

html:not(#legacy) body.process-page .process-reference__opening {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 0;
  align-items: stretch;
  margin: 0;
  padding: 0;
  background: var(--white);
  border: 0;
  border-bottom: 1px solid var(--rule);
}

html:not(#legacy) body.process-page .process-reference__media {
  position: relative;
  min-height: 20rem;
  margin: 0;
  overflow: hidden;
  background: var(--navy-950);
  border: 0;
  border-radius: 0 !important;
}

html:not(#legacy) body.process-page .process-reference__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: none;
}

html:not(#legacy) body.process-page .process-reference__media figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: .7rem 1.1rem;
  color: var(--white);
  background: rgba(16, 43, 58, .82);
  font-size: .82rem;
  font-weight: 700;
}

html:not(#legacy) body.process-page .process-reference__opening-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 3.4vw, 3.5rem);
}

html:not(#legacy) body.process-page .process-reference__opening-copy h2 {
  max-width: 16ch;
}

html:not(#legacy) body.process-page .process-reference__lede {
  max-width: 58ch;
  margin-top: 1rem;
  color: var(--ink-soft);
  font: 400 clamp(1.02rem, 1.2vw, 1.18rem)/1.65 var(--font-body);
}

html:not(#legacy) body.process-page .process-reference__opening-copy .faith-service-callout {
  display: block;
  margin-top: 1.35rem;
}

html:not(#legacy) body.process-page .process-reference__opening-copy .faith-service-callout > span {
  display: block;
  margin-bottom: .3rem;
  color: var(--navy-950);
  font: 800 .78rem/1.3 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
}

html:not(#legacy) body.process-page .process-reference__opening-copy .faith-service-callout p {
  max-width: none;
}

html:not(#legacy) body.process-page .process-reference__chapters {
  display: block;
  margin: 0;
  padding: 0 clamp(1.25rem, 3.4vw, 3.5rem);
}

html:not(#legacy) body.process-page .process-reference__chapter {
  display: grid;
  grid-template-columns: minmax(10rem, min(30%, 22rem)) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 3.5rem);
  align-items: start;
  margin: 0;
  padding: clamp(1.5rem, 2.6vw, 2.5rem) 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
}

html:not(#legacy) body.process-page .process-reference__chapter:last-child {
  border-bottom: 0;
}

html:not(#legacy) body.process-page .process-reference__chapter-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .9rem;
  align-items: baseline;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

html:not(#legacy) body.process-page .process-reference__chapter-title > span {
  color: var(--oxblood);
  font: 800 1.05rem/1 var(--font-body);
  letter-spacing: .04em;
}

html:not(#legacy) body.process-page .process-reference__chapter-title h2 {
  margin: 0;
  font-size: clamp(1.4rem, 1.9vw, 1.95rem);
  line-height: 1.1;
  letter-spacing: -.02em;
}

html:not(#legacy) body.process-page .process-reference__chapter-copy {
  max-width: 76ch;
  padding: 0;
  border: 0;
}

html:not(#legacy) body.process-page .process-reference__chapter-copy :is(p, li) {
  color: var(--ink-soft);
}

html:not(#legacy) body.process-page .process-reference__chapter-copy > :last-child {
  margin-bottom: 0;
}

/* Closing call panel inside the guide */
html:not(#legacy) body.process-page .process-reference__contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: center;
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.75rem) clamp(1.25rem, 3.4vw, 3.5rem);
  color: var(--white);
  background: var(--navy-950);
  border: 0;
  border-radius: 0;
}

html:not(#legacy) body.process-page .process-reference__contact h3 {
  color: var(--white);
  font-size: clamp(1.35rem, 1.8vw, 1.8rem);
}

html:not(#legacy) body.process-page .process-reference__contact p {
  margin-top: .5rem;
  color: var(--text-on-dark-muted);
}

html:not(#legacy) body.process-page .process-reference__contact dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.5rem;
  margin: 0;
  border-top: 1px solid var(--rule-on-dark);
}

html:not(#legacy) body.process-page .process-reference__contact dl > div {
  display: block;
  padding: .65rem 0;
  border-bottom: 1px solid var(--rule-on-dark);
}

html:not(#legacy) body.process-page .process-reference__contact dt {
  color: var(--sandstone);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

html:not(#legacy) body.process-page .process-reference__contact dd {
  margin: 0;
  color: var(--white);
  font-weight: 700;
  text-align: left;
}

html:not(#legacy) body.process-page .process-reference__contact dd a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  color: var(--white);
}

html:not(#legacy) body.process-page .process-reference__contact-actions {
  display: grid;
  gap: .6rem;
  margin: 0;
}

html:not(#legacy) body.process-page .process-reference__contact .btn--primary {
  color: var(--white);
  background: transparent;
  border-color: rgba(250, 248, 242, .55);
}

html:not(#legacy) body.process-page .process-reference__contact .btn--primary:is(:hover, :focus-visible) {
  color: var(--navy-950);
  background: var(--white);
  border-color: var(--white);
}

@media (max-width: 63.999rem) {
  html:not(#legacy) body.process-page .process-presentation__inner,
  html:not(#legacy) body.process-page .process-reference__opening,
  html:not(#legacy) body.process-page .process-reference__contact {
    grid-template-columns: minmax(0, 1fr);
  }

  html:not(#legacy) body.process-page .process-presentation__media,
  html:not(#legacy) body.process-page .process-reference__media {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  html:not(#legacy) body.process-page .process-reference__contact-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 47.999rem) {
  html:not(#legacy) body.process-page .process-reference__chapter {
    grid-template-columns: minmax(0, 1fr);
    gap: .75rem;
  }
}

@media (max-width: 34.999rem) {
  html:not(#legacy) body.process-page .process-reference__contact dl,
  html:not(#legacy) body.process-page .process-reference__contact-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Frequently asked questions ---- */

html:not(#legacy) body.faq-page .faq-layout {
  grid-template-columns: minmax(17rem, 24rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  align-items: start;
}

html:not(#legacy) body.faq-page .faq-layout__intro {
  position: sticky;
  top: calc(var(--polish-header) + 1.25rem);
  justify-content: flex-start;
  padding: clamp(1.5rem, 2.2vw, 2.25rem);
  color: var(--white);
  background: var(--navy-950);
  border-radius: var(--polish-radius);
  box-shadow: var(--polish-shadow);
}

html:not(#legacy) body.faq-page .faq-layout__intro .eyebrow {
  color: var(--sandstone);
}

html:not(#legacy) body.faq-page .faq-layout__intro h2 {
  color: var(--white);
  font-size: clamp(1.7rem, 2.4vw, 2.5rem);
}

html:not(#legacy) body.faq-page .faq-layout__intro > p {
  max-width: none;
  color: var(--text-on-dark-muted);
}

html:not(#legacy) body.faq-page .faq-layout__intro .btns {
  margin-top: 1.35rem;
}

html:not(#legacy) body.faq-page .faq-layout .faq-answer-grid {
  gap: .75rem;
}

html:not(#legacy) body.faq-page .faq-answer {
  gap: .6rem;
  padding: clamp(1.15rem, 2vw, 1.75rem);
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--oxblood);
  border-radius: var(--polish-radius-sm);
}

html:not(#legacy) body.faq-page .faq-answer h3 {
  font-size: clamp(1.15rem, 1.4vw, 1.4rem);
  line-height: 1.2;
}

html:not(#legacy) body.faq-page .faq-answer__copy {
  max-width: 88ch;
  color: var(--ink-soft);
  line-height: 1.6;
}

@media (max-width: 63.999rem) {
  html:not(#legacy) body.faq-page .faq-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  html:not(#legacy) body.faq-page .faq-layout__intro {
    position: static;
  }

  html:not(#legacy) body.faq-page .faq-layout__intro .btns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- About ---- */

html:not(#legacy) body.interior-page .split,
html:not(#legacy) body.interior-page .about-covenant > .wrap {
  min-height: 0;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--polish-radius);
}

html:not(#legacy) body.interior-page :is(.split__media, .about-covenant__media) {
  min-height: clamp(17rem, 26vw, 27rem);
  margin: 0;
}

html:not(#legacy) body.interior-page :is(.split__media, .about-covenant__media) img {
  filter: none;
}

html:not(#legacy) body.interior-page :is(.split__body, .about-covenant__copy) {
  padding: clamp(1.5rem, 3.6vw, 3.75rem);
}

html:not(#legacy) body.about-page .split__body .checklist svg {
  color: var(--oxblood);
}

html:not(#legacy) body.about-page main > .section--alt.band-dark .section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: .25rem clamp(2rem, 5vw, 6rem);
  align-items: end;
}

html:not(#legacy) body.about-page main > .section--alt.band-dark .section-head .eyebrow {
  grid-column: 1 / -1;
}

html:not(#legacy) body.about-page main > .section--alt.band-dark .section-head .lead {
  max-width: 52ch;
  color: var(--text-on-dark-muted);
  font-size: clamp(1.02rem, 1.2vw, 1.2rem);
}

html:not(#legacy) body.about-page .feature {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

html:not(#legacy) body.about-page .feature__icon {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  color: var(--navy-950);
  background: var(--sandstone);
  border-radius: var(--polish-radius-sm);
}

html:not(#legacy) body.about-page .feature__icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

html:not(#legacy) body.about-page .about-covenant > .wrap {
  background: var(--navy-950);
  border: 0;
}

html:not(#legacy) body.about-page .about-covenant__copy h2 {
  color: var(--white);
  font-size: clamp(1.9rem, 3.2vw, 3.3rem);
}

html:not(#legacy) body.about-page .about-covenant__copy cite {
  display: block;
  margin-top: .75rem;
  color: var(--sandstone);
  font-style: normal;
  font-weight: 800;
  letter-spacing: .06em;
}

html:not(#legacy) body.about-page .about-covenant__copy p {
  margin-top: 1rem;
  color: var(--text-on-dark);
}

html:not(#legacy) body.about-page .about-covenant__welcome span {
  color: var(--sandstone);
}

html:not(#legacy) body.about-page .about-covenant__copy .btn {
  align-self: flex-start;
  margin-top: 1.5rem;
}

@media (max-width: 55.999rem) {
  html:not(#legacy) body.about-page .grid.grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }

  html:not(#legacy) body.interior-page .split,
  html:not(#legacy) body.interior-page .about-covenant > .wrap,
  html:not(#legacy) body.about-page main > .section--alt.band-dark .section-head {
    grid-template-columns: minmax(0, 1fr);
  }

  html:not(#legacy) body.interior-page :is(.split__media, .about-covenant__media) {
    min-height: 0;
    aspect-ratio: 16 / 9;
    order: -1;
  }

  html:not(#legacy) body.about-page .about-covenant__copy .btn {
    align-self: stretch;
  }
}

/* ---- Contact ---- */

html:not(#legacy) body.contact-page .contact-stage {
  padding-block: var(--polish-section);
}

html:not(#legacy) body.contact-page .contact-grid {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  align-items: stretch;
  min-height: 0;
  overflow: visible;
  box-shadow: none;
}

html:not(#legacy) body.contact-page .contact-grid > :first-child {
  justify-content: flex-start;
  padding: 0;
  overflow: hidden;
  color: var(--white);
  background: var(--navy-950);
  border: 0;
  border-radius: var(--polish-radius);
}

html:not(#legacy) body.contact-page .contact-panel__photo {
  width: 100%;
  height: clamp(11rem, 17vw, 17rem);
  object-fit: cover;
}

html:not(#legacy) body.contact-page .contact-panel__body {
  padding: clamp(1.5rem, 3vw, 3rem);
}

html:not(#legacy) body.contact-page .contact-grid > :first-child .eyebrow {
  color: var(--sandstone);
}

html:not(#legacy) body.contact-page .contact-lines a {
  min-height: 3.5rem;
  align-items: center;
  border-color: var(--rule-on-dark);
}

html:not(#legacy) body.contact-page .contact-lines a svg,
html:not(#legacy) body.contact-page .contact-grid > :first-child .checklist svg {
  color: var(--sandstone);
}

html:not(#legacy) body.contact-page .contact-lines .label {
  color: var(--sandstone);
}

html:not(#legacy) body.contact-page .contact-grid > :first-child :is(p, li) {
  color: var(--text-on-dark-muted);
}

html:not(#legacy) body.contact-page .contact-grid > .infocard {
  padding: clamp(1.5rem, 3vw, 3rem);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--polish-radius) !important;
}

html:not(#legacy) body.contact-page .contact-inquiry h2 {
  font-size: clamp(1.9rem, 3vw, 3rem);
}

html:not(#legacy) body.interior-page .contact-inquiry__consent input {
  width: 1.5rem;
  height: 1.5rem;
  min-height: 0;
  margin: .05rem 0 0;
  accent-color: var(--navy-950);
}

html:not(#legacy) body.interior-page .contact-inquiry__consent {
  grid-template-columns: 1.5rem minmax(0, 1fr);
  min-height: 2.75rem;
  background: var(--sandstone-wash);
  border-color: var(--rule);
  border-radius: var(--polish-radius-sm);
}

html:not(#legacy) body.contact-page .contact-inquiry__application a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
}

@media (max-width: 55.999rem) {
  html:not(#legacy) body.contact-page .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Form fields, shared by contact, payment and the application page */
html:not(#legacy) body.interior-page :is(input, select, textarea),
html:not(#legacy) body.interior-page .payment-entry__money {
  border: 1px solid #a9b4b8;
  border-radius: var(--polish-radius-sm);
}

html:not(#legacy) body.interior-page :is(input, select, textarea):focus {
  outline: 3px solid rgba(143, 52, 64, .25);
  border-color: var(--oxblood);
}

/* ---- Payment (local preview; the live site hands this address to the portal) ---- */

html:not(#legacy) body.pay-page .payment-entry {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  align-items: stretch;
}

html:not(#legacy) body.pay-page .payment-entry__copy,
html:not(#legacy) body.pay-page .payment-entry__card {
  border-radius: var(--polish-radius);
}

html:not(#legacy) body.pay-page .payment-entry__copy .eyebrow {
  color: var(--sandstone);
}

/* ---- Privacy, terms, text message terms, photo credits ----
   Headings sit in a left column and the text beside them, so a wide screen
   is used without stretching lines of legal text. */

html:not(#legacy) body.legal-page main > .section > .prose {
  display: grid;
  grid-template-columns: minmax(13rem, 22rem) minmax(0, 1fr);
  gap: 0;
  width: var(--site-content-width);
  max-width: none;
  margin-inline: auto;
  padding: clamp(1.5rem, 3.4vw, 3.5rem);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--polish-radius);
}

html:not(#legacy) body.legal-page main > .section > .prose > * {
  grid-column: 2;
  max-width: 78ch;
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--ink-soft);
}

html:not(#legacy) body.legal-page main > .section > .prose > h2 {
  grid-column: 1;
  align-self: start;
  max-width: none;
  margin: 0;
  padding: 1.75rem clamp(1.25rem, 3vw, 3rem) 0 0;
  color: var(--navy-950);
  font-size: clamp(1.3rem, 1.7vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  border-top: 1px solid var(--rule);
}

html:not(#legacy) body.legal-page main > .section > .prose > h2 + * {
  margin-top: 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
}

html:not(#legacy) body.legal-page main > .section > .prose > h2,
html:not(#legacy) body.legal-page main > .section > .prose > h2 + * {
  margin-top: .75rem;
}

/* The rule above each part runs the full width; the words stay a readable length. */
html:not(#legacy) body.legal-page main > .section > .prose > h2 + * {
  max-width: none;
  padding-right: max(0px, calc(100% - 78ch));
}

/* The opening words, before the first heading, run across both columns. */
html:not(#legacy) body.legal-page main > .section > .prose > :not(h2):not(h2 ~ *) {
  grid-column: 1 / -1;
  max-width: 86ch;
  color: var(--navy-950);
  font-size: clamp(1.02rem, 1.15vw, 1.15rem);
}

html:not(#legacy) body.legal-page main > .section > .prose > .callout,
html:not(#legacy) body.legal-page main > .section > .prose > .callout:not(h2 ~ *) {
  margin-block: .25rem 1rem;
}

html:not(#legacy) body.legal-page main > .section > .prose > :last-child {
  margin-bottom: 0;
}

html:not(#legacy) body.legal-page .prose a {
  color: var(--navy-950);
  text-decoration-color: var(--oxblood);
}

@media (max-width: 55.999rem) {
  html:not(#legacy) body.legal-page main > .section > .prose {
    grid-template-columns: minmax(0, 1fr);
  }

  html:not(#legacy) body.legal-page main > .section > .prose > *,
  html:not(#legacy) body.legal-page main > .section > .prose > h2 {
    grid-column: 1;
  }

  html:not(#legacy) body.legal-page main > .section > .prose > h2 {
    padding-right: 0;
  }

  html:not(#legacy) body.legal-page main > .section > .prose > h2 + * {
    margin-top: 0;
    padding-top: .75rem;
    border-top: 0;
  }
}

/* ---- Application handoff page (the live site sends this address to the portal) ---- */

html:not(#legacy) body.application-page .page-head h1 {
  text-transform: none;
}

/* ---- Page not found ---- */

html:not(#legacy) body.not-found-page main {
  display: block;
  min-height: 0;
  padding: 0;
}

html:not(#legacy) body.not-found-page main > .cta-final {
  display: grid;
  align-content: center;
  min-height: calc(100svh - var(--polish-header) - 2.75rem);
  padding-block: clamp(4rem, 9vw, 9rem);
}

html:not(#legacy) body.not-found-page .not-found-mark {
  display: none;
}

html:not(#legacy) body.not-found-page main > .cta-final > .wrap {
  grid-template-areas:
    "eyebrow eyebrow"
    "title lead"
    "actions actions";
}