/* AF Inspect Modern: one stylesheet merged from the approved D design (style.css, about.css, services.css,
   resources.css, contact.css, rest/rest.css). Values are the design's. Where two pages reuse one selector with
   different values, the rule is scoped to the page's body class page-slug-<slug> (added in functions.php). */


:root {
  /* #0099dd brand blue: decoration only (service card top edge, current-page bar). 3.18:1 on white. Never text. */
  --c-blue: #0099dd;
  /* #0079b3: the hero and closing band, text links, focus ring. White on it 4.79:1. */
  --c-blue-deep: #0079b3;
  /* #005f8c: hover and press for links. 6.20:1 on --c-blue-soft. */
  --c-blue-ink: #005f8c;
  /* #e6f4fb: hover fill for every nav link. #005f8c on it 6.20:1. */
  --c-blue-soft: #e6f4fb;
  /* #cce7f9 logo light blue: hairlines, pressed fill. #231f20 on it 12.70:1. Never text. */
  --c-mist: #cce7f9;
  /* #f3f9fd: the tint band. #231f20 15.35:1 on it; #666666 5.41:1; #0079b3 4.51:1. */
  --c-tint: #f3f9fd;
  /* #e4edf2: card hairline. Decoration only. */
  --c-line: #e4edf2;
  /* #ffffff: page, cards, header, footer. */
  --c-white: #ffffff;
  /* #231f20 logo charcoal: headings and card text. 16.30:1 on white. */
  --c-ink: #231f20;
  /* #666666 body text. 5.74:1 on white. */
  --c-text: #666666;
  /* #6c737e header grey: footer labels, placeholder, input border. 4.78:1 on white. */
  --c-muted: #6c737e;

  /* Depth: layered, blue-tinted, low opacity. */
  --shadow-card: 0 1px 2px rgba(0, 70, 110, 0.06), 0 10px 20px -10px rgba(0, 70, 110, 0.18), 0 26px 44px -26px rgba(0, 121, 179, 0.38);
  --shadow-card-lift: 0 1px 2px rgba(0, 70, 110, 0.07), 0 16px 28px -12px rgba(0, 70, 110, 0.22), 0 32px 52px -28px rgba(0, 121, 179, 0.45);
  --shadow-btn: 0 1px 2px rgba(0, 40, 70, 0.20), 0 10px 22px -8px rgba(0, 40, 70, 0.45);
  --shadow-btn-lift: 0 2px 4px rgba(0, 40, 70, 0.22), 0 18px 30px -10px rgba(0, 40, 70, 0.55);
  --shadow-header: 0 1px 0 rgba(0, 70, 110, 0.10), 0 10px 22px -18px rgba(0, 70, 110, 0.40);
  --shadow-sheet: 0 1px 2px rgba(0, 70, 110, 0.08), 0 18px 32px -16px rgba(0, 70, 110, 0.34);

  /* Type: Source Serif 4 600 for headings, Source Sans 3 for body and UI. */
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --text-ui: 1rem;
  --text-base: 1.125rem;
  --text-lead: 1.25rem;
  --text-h3: 1.5rem;
  --text-h2: clamp(1.5rem, 1.1rem + 1.55vw, 2.25rem);
  --text-h1: clamp(2rem, 1.2rem + 3.4vw, 3.5rem);

  /* Spacing: 8px scale in rem. */
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2rem;
  --s5: 2.5rem;
  --s6: 3rem;
  --s7: 4rem;
  --s8: 5rem;
  --s9: 6rem;

  --wrap: 70rem;
  --gutter: 1.5rem;
  --radius-card: 0.75rem;   /* 12px */
  --radius: 0.625rem;       /* 10px: nav links, buttons, toggle, search */
  --radius-s: 0.25rem;
  --header-h: 4.5rem;       /* 72px */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--header-h);
  scroll-padding-bottom: 1.5rem;
}

body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--c-ink);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 {
  font-size: var(--text-h1);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

h2 {
  font-size: var(--text-h2);
  line-height: 1.2;
}

h3 {
  font-size: var(--text-h3);
  line-height: 1.25;
}

p {
  margin: 0;
  text-wrap: pretty;
}

address {
  font-style: normal;
}

a {
  color: var(--c-blue-deep);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--c-blue-ink);
  text-decoration-thickness: 2px;
}

a:active {
  color: var(--c-ink);
}

:focus-visible {
  outline: 3px solid var(--c-blue-deep);
  outline-offset: 3px;
}

.wrap {
  width: min(var(--wrap), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* Skip link: hidden until focused. */
.skip-link {
  position: absolute;
  left: var(--s2);
  top: -6rem;
  z-index: 100;
  padding: var(--s1) var(--s2);
  background: var(--c-white);
  color: var(--c-blue-deep);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-sheet);
}

.skip-link:hover {
  color: var(--c-blue-ink);
  text-decoration: underline;
}

.skip-link:active {
  background: var(--c-tint);
}

.skip-link:focus-visible {
  top: var(--s2);
}

/* Header: white, sticky, B's shadow line under it. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--c-white);
  box-shadow: var(--shadow-header);
}

.header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  margin-left: -0.75rem;
  padding: 0.75rem;
  border-radius: var(--radius);
  transition: transform 180ms var(--ease);
}

/* Height sets the size; width follows the 934:174 ratio. */
.brand img {
  height: 2.5rem;
  width: auto;
  max-width: none;
}

@media (hover: hover) {
  .brand:hover {
    transform: translateY(-1px);
  }
}

.brand:active {
  transform: translateY(1px);
}

.brand:focus-visible {
  outline-offset: 0;
}

.menu-toggle {
  display: none;
  align-items: center;
  margin-left: auto;
  margin-block: 0.875rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 var(--s2);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-ui);
  color: var(--c-blue-deep);
  background: var(--c-white);
  border: 1px solid var(--c-blue-deep);
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 180ms var(--ease);
}

.js .menu-toggle {
  display: inline-flex;
}

@media (hover: hover) {
  .menu-toggle:hover {
    color: var(--c-blue-ink);
    background: var(--c-blue-soft);
    border-color: var(--c-blue-ink);
  }
}

.menu-toggle:focus-visible {
  outline-offset: 3px;
}

.menu-toggle:active {
  background: var(--c-mist);
  transform: translateY(1px);
}

.menu-toggle[aria-expanded="true"] {
  color: var(--c-white);
  background: var(--c-blue-deep);
  border-color: var(--c-blue-deep);
}

@media (hover: hover) {
  .menu-toggle[aria-expanded="true"]:hover {
    color: var(--c-white);
    background: var(--c-blue-ink);
    border-color: var(--c-blue-ink);
  }
}

.nav-panel {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  order: 3;
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s2) 0 var(--s6);
  border-top: 1px solid var(--c-line);
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

/* Every nav link shares one shape: a 10px rounded box. The hover fill is the same on every link, the current page included. */
.nav-list a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: 0 var(--s2);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--c-ink);
  text-decoration: none;
}

.nav-list a:hover {
  background: var(--c-blue-soft);
  color: var(--c-blue-ink);
}

.nav-list a:focus-visible {
  outline-offset: -3px;
}

.nav-list a:active {
  background: var(--c-mist);
  color: var(--c-blue-ink);
}

/* Current page: blue text and a 3px blue bar drawn as a pseudo-element inside the link, so the bar stays put on hover and press. */
.nav-list a[aria-current="page"] {
  color: var(--c-blue-deep);
}

.nav-list a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: var(--s2);
  right: var(--s2);
  bottom: 0.375rem;
  height: 3px;
  border-radius: 2px;
  background: var(--c-blue);
}

.nav-list a[aria-current="page"]:hover,
.nav-list a[aria-current="page"]:active {
  color: var(--c-blue-ink);
}

.search {
  margin: var(--s3) 0 0;
}

.search input {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: 0 var(--s2);
  border: 1px solid var(--c-muted);
  border-radius: var(--radius);
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  appearance: none;
}

.search input::placeholder {
  color: var(--c-muted);
  opacity: 1;
}

@media (hover: hover) {
  .search input:hover {
    border-color: var(--c-blue-deep);
  }
}

.search input:focus-visible {
  outline-offset: 2px;
  border-color: var(--c-blue-deep);
}

.search input:active {
  background: var(--c-tint);
}

/* Button on blue (hero and closing band): white at rest and on hover. Hover lifts 2px, deepens the shadow and nudges the arrow.
   Active returns to rest. Focus ring is white, 3px, 3px out: 4.79:1 against the blue band. */
.button {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 3.25rem;
  padding: 0 var(--s4);
  border-radius: var(--radius);
  background: var(--c-white);
  color: var(--c-blue-deep);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: var(--shadow-btn);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}

@media (hover: hover) {
  .button:hover {
    color: var(--c-blue-deep);
    background: var(--c-white);
    box-shadow: var(--shadow-btn-lift);
    transform: translateY(-2px);
  }
}

.button:active {
  color: var(--c-blue-deep);
  background: var(--c-white);
  box-shadow: var(--shadow-btn);
  transform: none;
}

.button:focus-visible {
  outline: 3px solid var(--c-white);
  outline-offset: 3px;
}

.arrow {
  position: relative;
  display: inline-block;
  width: 1.125rem;
  height: 1px;
  background: currentColor;
  transition: transform 200ms var(--ease);
}

.arrow::after {
  content: "";
  position: absolute;
  top: -3px;
  right: 1px;
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

@media (hover: hover) {
  .button:hover .arrow {
    transform: translateX(3px);
  }
}

/* Hero: the deep-blue band, flat. H1 in white; the cards cross the bottom edge. */
.hero {
  position: relative;
  z-index: 1;
  color: var(--c-white);
  background: var(--c-blue-deep);
  padding: var(--s7) 0;
}

.hero h1 {
  max-width: 17em;
  color: var(--c-white);
}

.hero-action {
  margin-top: var(--s4);
}

/* Checklist: four statements on white, below the band. Plain rows, not cards: a soft blue disc with a check, the lead word in serif,
   a hairline between rows. One column on phone, two on desktop. */
.checklist-section {
  padding-block: var(--s7);
}

.checklist {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--c-line);
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-ink);
  font-size: var(--text-base);
  line-height: 1.6;
  text-wrap: pretty;
}

.check-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-top: 0.125rem;
  border-radius: 50%;
  background: var(--c-blue-soft);
  color: var(--c-blue-deep);
}

.check-mark svg {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
}

.checklist strong {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-lead);
  letter-spacing: -0.01em;
  color: var(--c-ink);
}

/* Cards: white, hairline, radius and layered shadow. The statement cards are not links and have no top edge. */
.card {
  position: relative;
  overflow: hidden;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* Tint band: the company paragraph, as before. */
.intro-band {
  margin-top: 0;
  background: var(--c-tint);
  padding-block: var(--s7);
}

.intro-band p {
  max-width: 62ch;
  font-size: var(--text-lead);
  line-height: 1.7;
  color: var(--c-text);
}

/* Services: three cards, one column below 960px. The title link is stretched over the whole card, so the card is the target. */
.services {
  padding-block: var(--s7);
}

.services h2 {
  margin-bottom: var(--s4);
}

.service-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s3);
}

.service-card {
  padding: var(--s5) var(--s4) var(--s5);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}

/* The blue top edge: service cards only. */
.service-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--c-blue);
}

.service-card h3 {
  margin-bottom: var(--s2);
}

.service-card p {
  padding-right: var(--s5);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--c-text);
}

/* Title: dark ink, no underline. The link is the whole card for mouse and keyboard. */
.card-link {
  color: var(--c-ink);
  text-decoration: none;
}

.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card-link:focus-visible {
  outline: 3px solid var(--c-blue-deep);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}

/* Small arrow at the bottom right: hidden at rest, shown on hover and on keyboard focus. */
.card-arrow {
  position: absolute;
  right: var(--s4);
  bottom: var(--s4);
  color: var(--c-blue-deep);
  opacity: 0;
  transform: translateX(-0.5rem);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}

@media (hover: hover) {
  .service-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-lift);
  }
}

.service-card:hover .card-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Press: the card drops back to rest and takes the pale tint for as long as the press lasts. */
.service-card:active {
  transform: none;
  background: var(--c-tint);
}

/* Keyboard focus: the ring goes round the whole card, where the browser supports :has. Older browsers keep the ring on the title. */
@supports selector(:has(a)) {
  .service-card:has(.card-link:active) {
    transform: none;
    background: var(--c-tint);
  }

  .card-link:focus-visible {
    outline: none;
  }

  .service-card:has(.card-link:focus-visible) {
    outline: 3px solid var(--c-blue-deep);
    outline-offset: 3px;
  }

  .service-card:has(.card-link:focus-visible) .card-arrow {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Closing band: the same blue as the hero, so the page is bookended. */
.closing-band {
  color: var(--c-white);
  background: var(--c-blue-deep);
  padding-block: var(--s7);
}

.closing-band .wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s4);
}

.closing-band p {
  max-width: 20em;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-h2);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--c-white);
}

/* Footer: white, hairline above. Three columns on desktop, stacked on phone. Every link is at least 44px tall. */
.site-footer {
  background: var(--c-white);
  border-top: 1px solid var(--c-mist);
}

/* Phone: one column in the order company, phone and email, site links (as before). The DOM order is company, site links, contact,
   which is the desktop order, so keyboard order matches the desktop reading order. */
.footer-main {
  display: grid;
  grid-template-areas:
    "company"
    "contact"
    "nav";
  gap: var(--s3);
  padding-block: var(--s4) var(--s3);
}

.footer-company {
  grid-area: company;
}

.footer-nav {
  grid-area: nav;
}

.footer-contact {
  grid-area: contact;
}

.footer-name {
  margin-bottom: var(--s1);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-lead);
  color: var(--c-ink);
}

.footer-col address {
  color: var(--c-text);
}

.footer-col p a,
.footer-nav a,
.footer-bottom a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  text-decoration: none;
}

.footer-col p a:hover,
.footer-nav a:hover,
.footer-bottom a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.footer-nav ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-block: var(--s1) 0.75rem;
  border-top: 1px solid var(--c-line);
}

.footer-bottom p {
  color: var(--c-muted);
  font-size: var(--text-ui);
}

/* Under 1000px the menu is a toggle: with JS the panel shows only when open, as a panel under the bar (it pushes the page down, the bar stays on top). */
@media (max-width: 999px) {
  .js .site-header:not(.is-open) .nav-panel {
    display: none;
  }
}

/* Desktop from 1000px: links and search in one row. */
@media (min-width: 1000px) {
  .header-row {
    flex-wrap: nowrap;
  }

  .js .menu-toggle {
    display: none;
  }

  .nav-panel {
    flex: 1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s4);
    max-height: none;
    overflow: visible;
    margin-left: var(--s5);
    padding: 0;
    border-top: 0;
  }

  .nav-list {
    flex-direction: row;
    gap: var(--s1);
  }

  .nav-list a {
    min-height: 2.75rem;
    padding: 0 var(--s2);
    font-size: var(--text-ui);
  }

  .nav-panel .search {
    margin: 0;
    flex: none;
    width: 15rem;
  }

  .hero {
    padding: var(--s9) 0 var(--s8);
  }

  .checklist-section {
    padding-block: var(--s8);
  }

  .checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s6);
  }

  .checklist li {
    padding: var(--s4) 0;
  }

  .intro-band,
  .services,
  .closing-band {
    padding-block: var(--s8);
  }

  .closing-band .wrap {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--s5);
  }

  /* Desktop: company left, site links in the middle, phone and email right. The side columns share the free width equally
     (1fr each) and the middle column is its own width, so the middle sits at the container's centre. Right column ends flush. */
  .footer-main {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "company nav contact";
    align-items: start;
    gap: var(--s5);
    padding-block: var(--s5) var(--s4);
  }

  .footer-company {
    justify-self: start;
  }

  .footer-nav {
    justify-self: center;
  }

  .footer-contact {
    justify-self: end;
  }

  .footer-col p a,
  .footer-nav a {
    min-height: 2.25rem;
  }

  .footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* Services in three columns from 960px. */
@media (min-width: 960px) {
  .service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Phone header: a smaller logo so it shares the row with the menu button. */
@media (max-width: 440px) {
  .brand img {
    height: 2.125rem;
  }

  .brand {
    margin-left: -0.5rem;
  }
}

@media (max-width: 359px) {
  .brand img {
    height: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand,
  .button,
  .arrow,
  .menu-toggle,
  .service-card,
  .card-arrow {
    transition: none;
  }
}

/* WordPress menu classes get the same current-page look as aria-current="page". */
.nav-list .current-menu-item > a,
.nav-list .current_page_item > a,
.nav-list .current-menu-ancestor > a {
  color: var(--c-blue-deep);
}

.nav-list .current-menu-item > a::after,
.nav-list .current_page_item > a::after,
.nav-list .current-menu-ancestor > a::after {
  content: "";
  position: absolute;
  left: var(--s2);
  right: var(--s2);
  bottom: 0.375rem;
  height: 3px;
  border-radius: 2px;
  background: var(--c-blue);
}

.nav-list .current-menu-item > a:hover,
.nav-list .current_page_item > a:hover,
.nav-list .current-menu-ancestor > a:hover,
.nav-list .current-menu-item > a:active,
.nav-list .current_page_item > a:active,
.nav-list .current-menu-ancestor > a:active {
  color: var(--c-blue-ink);
}

/* Lead line under an H1 on a blue band (values shared by the four pages; page blocks below adjust). */
.hero-lead {
  max-width: 40rem;
  margin-top: var(--s3);
  font-size: var(--text-lead);
  line-height: 1.6;
  color: var(--c-white);
}

/* Screen-reader text: hidden on screen, still read out (WordPress uses it in pagination). */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* About page (body class page-slug-about-all-flooring-inspections). */
.page-slug-about-all-flooring-inspections .hero-lead {
  line-height: 1.7;
}

/* Why: heading on the left, three checklist rows on the right from 1000px; one stacked column below. */
.why {
  padding-block: var(--s7);
}

.why .wrap {
  display: grid;
  gap: var(--s4);
}

.why h2 {
  max-width: 14em;
}

/* The old "Set Up an Inspection Appointment" button, in its old place after the three rows. Solid blue on white (style.css
   only has the white button for blue bands). Same shape, lift and focus as the theme's buttons; copied from services.css. */
.why-action {
  margin-top: var(--s2);
}

.button-solid {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 3.25rem;
  padding: 0 var(--s4);
  border-radius: var(--radius);
  background: var(--c-blue-deep);
  color: var(--c-white);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: var(--shadow-btn);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}

@media (hover: hover) {
  .button-solid:hover {
    background: var(--c-blue-ink);
    color: var(--c-white);
    box-shadow: var(--shadow-btn-lift);
    transform: translateY(-2px);
  }

  .button-solid:hover .arrow {
    transform: translateX(3px);
  }
}

.button-solid:active {
  background: var(--c-ink);
  color: var(--c-white);
  box-shadow: var(--shadow-btn);
  transform: none;
}

.button-solid:focus-visible {
  outline: 3px solid var(--c-blue-deep);
  outline-offset: 3px;
}

.button-solid .arrow {
  transition: transform 200ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .button-solid,
  .button-solid .arrow {
    transition: none;
  }
}

/* Three rows only: one column at every width, so no row is left alone in a second column. */
.why .checklist {
  grid-template-columns: minmax(0, 1fr);
}

/* More: the tint band, with three service-style cards. The cards are not links, so they do not lift on hover. */
.more {
  background: var(--c-tint);
  padding-block: var(--s7);
}

.more h2 {
  margin-bottom: var(--s3);
}

.more-intro {
  max-width: 62ch;
  margin-bottom: var(--s5);
  font-size: var(--text-lead);
  line-height: 1.7;
  color: var(--c-text);
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s3);
}

.about-card {
  padding: var(--s5) var(--s4);
}

/* The blue top edge, as on the home page service cards. */
.about-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--c-blue);
}

.about-card h3 {
  margin-bottom: var(--s3);
}

.about-card ul {
  display: grid;
  gap: var(--s3);
}

.about-card li strong {
  display: block;
  margin-bottom: var(--s1);
  color: var(--c-ink);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.4;
}

.about-card li p {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--c-text);
}

@media (min-width: 960px) {
  .about-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
}

@media (min-width: 1000px) {
  .why,
  .more {
    padding-block: var(--s8);
  }

  .why .wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: var(--s6);
    align-items: start;
  }

  .why h2 {
    margin-top: var(--s2);
  }

  .why-action {
    grid-column: 1 / -1;
  }

  .checklist li {
    padding: var(--s4) 0;
  }
}

/* Services page (body class page-slug-services). */
.page-slug-services .hero-lead {
  max-width: 40em;
}

/* Phone and tablet: one column, the contact card drops below the three sections. */
.services-body {
  display: grid;
  gap: var(--s6);
  padding-block: var(--s7);
}

.services-main {
  min-width: 0;
}

.content-section {
  scroll-margin-top: calc(var(--header-h) + var(--s3));
}

.content-section + .content-section {
  margin-top: var(--s7);
  padding-top: var(--s7);
  border-top: 1px solid var(--c-line);
}

.content-section h2 {
  margin-bottom: var(--s3);
}

.services-main p {
  max-width: 40rem;
}

.services-main p + p {
  margin-top: var(--s2);
}

.services-main .checklist {
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0;
  margin-block: var(--s4);
}

.services-main .checklist li {
  padding: var(--s3) 0;
}

.services-main .checklist + p {
  margin-top: 0;
}

/* Contact card: white, hairline, layered shadow (the .card class). Phone and email are tap targets of at least 44px. */
.contact-card {
  align-self: start;
  padding: var(--s4);
}

.contact-card h2 {
  margin-bottom: var(--s2);
  font-size: var(--text-h3);
}

.contact-card > p {
  color: var(--c-text);
}

/* Services card paragraph keeps the body size (rest pages set a smaller size on .contact-card p). */
.services-body .contact-card > p {
  font-size: var(--text-base);
  line-height: 1.7;
}

/* The services contact card's button: its top margin. The button rules are the about block above. */
.contact-card .button-solid {
  margin-top: var(--s3);
}


.contact-card address {
  margin-top: var(--s3);
  color: var(--c-ink);
}

.contact-lines {
  display: flex;
  flex-direction: column;
  margin-top: var(--s2);
}

.contact-lines a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

/* Desktop from 960px: the sections on the left, the contact card on the right and sticky under the header. */
@media (min-width: 960px) {
  .services-body {
    grid-template-columns: minmax(0, 1fr) 18rem;
    column-gap: var(--s7);
    align-items: start;
  }

  .services-body .contact-card {
    position: sticky;
    top: calc(var(--header-h) + var(--s4));
  }
}



/* Hero: the same deep-blue band as home. The lead sits under the H1 in white at the page's reading size. */
.page-slug-resources .hero h1 {
  max-width: 20em;
}

/* Sections: every band keeps at least 48px of air above and below. */
.resource-section {
  padding-block: var(--s7);
}

.resource-section-tint {
  background: var(--c-tint);
}

.resource-section h2 {
  margin-bottom: var(--s3);
}

.section-lead {
  max-width: 62ch;
  margin-bottom: var(--s4);
  font-size: var(--text-lead);
  line-height: 1.7;
  color: var(--c-text);
}

/* Service-style cards: the shared .service-card (blue top edge, layered shadow, lift on hover). The grid is one column on phone,
   two from 720px. Cards in one row share a height. */
.resource-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s3);
}

.resource-grid .service-card {
  display: flex;
  flex-direction: column;
  padding: var(--s5) var(--s4) var(--s5);
}

.resource-grid .service-card h3 {
  margin-bottom: var(--s2);
  font-size: var(--text-h3);
}

.resource-grid .service-card p {
  padding-right: var(--s5);
}

/* A card without a link (Claims Advisor) does not lift on hover: it is not a target. */
@media (hover: hover) {
  .resource-grid .service-card:not(:has(.card-link)):hover {
    transform: none;
    box-shadow: var(--shadow-card);
  }
}

/* Handbook rows: plain link rows on white with hairlines, the same family as the home checklist. The row link covers the whole row. */
.link-rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--c-line);
}

.link-rows li {
  border-bottom: 1px solid var(--c-line);
}

.link-rows a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 3.5rem;
  padding: var(--s3) var(--s2) var(--s3) 0;
  color: var(--c-ink);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-lead);
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}

.link-rows a .arrow {
  flex: none;
  color: var(--c-blue-deep);
}

.link-rows a:hover {
  color: var(--c-blue-ink);
  background: var(--c-blue-soft);
}

.link-rows a:active {
  background: var(--c-mist);
  color: var(--c-blue-ink);
}

.link-rows a:focus-visible {
  outline-offset: -3px;
}

.link-rows a:hover .arrow {
  transform: translateX(3px);
}

.handbook-note {
  margin-top: var(--s4);
  max-width: 62ch;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--c-text);
}

.handbook-note a {
  color: var(--c-blue-deep);
}

/* Closing band: the same blue as the hero. Text and button stack on phone, sit side by side from 1000px (the theme's closing band). */
.closing-band .closing-text {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.closing-band .closing-phone {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--c-white);
}

.closing-band .closing-phone a {
  color: var(--c-white);
  text-decoration-thickness: 1px;
}

.closing-band .closing-phone a:hover {
  text-decoration-thickness: 2px;
}

.closing-band .closing-phone a:focus-visible {
  outline: 3px solid var(--c-white);
  outline-offset: 3px;
}

@media (min-width: 720px) {
  .resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .resource-section {
    padding-block: var(--s8);
  }

  .page-slug-resources .hero-lead {
    font-size: 1.3125rem;
  }

  .link-rows a {
    min-height: 4rem;
  }

  .closing-band .closing-text {
    gap: var(--s1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .link-rows a,
  .link-rows a .arrow {
    transition: none;
  }
}

/* Contact page (body class page-slug-contact). */

:root {
  /* #b42318: error text, error border. 6.57:1 on white, 6.20:1 on the tint. Used only for errors. */
  --c-error: #b42318;
  /* #004a6e: the submit button when pressed. White on it is above 9:1. */
  --c-blue-press: #004a6e;
}

[hidden] {
  display: none !important;
}

/* Hero: the same blue band as home, a little shorter. The H1 and one lead line. */
.contact-hero {
  padding: var(--s6) 0;
}

.page-slug-contact .hero-lead {
  max-width: 36em;
}


/* Links on the blue band: white, underlined. style.css makes :active ink, which would vanish on blue, so it is overridden here. */
.contact-hero a {
  color: var(--c-white);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  font-weight: 600;
}

@media (hover: hover) {
  .contact-hero a:hover {
    color: var(--c-white);
    text-decoration-thickness: 2px;
  }
}

.contact-hero a:active {
  color: var(--c-white);
}

.contact-hero a:focus-visible {
  outline: 3px solid var(--c-white);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}

/* Main: the form card, with the contact details beside it from 1000px. One column below. */
.contact-main {
  padding-block: var(--s6);
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
}

/* Form card: white, hairline, radius and the layered shadow, as the service cards. Not a card in a card: the form sits directly in it. */
.form-card {
  padding: var(--s4) var(--s3) var(--s5);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.form-card > h2 {
  margin-bottom: var(--s2);
}

.form-intro {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--c-text);
}

.form-note {
  margin-top: var(--s1);
  font-size: 0.9375rem;
  color: var(--c-text);
}

/* Contact details: plain rows with hairlines, the checklist's look. No card. */
.contact-details > h2 {
  margin-bottom: var(--s2);
}

.detail-list {
  margin: 0;
  border-top: 1px solid var(--c-line);
}

.detail-row {
  display: grid;
  gap: 0.25rem;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--c-line);
}

.detail-row dt {
  font-weight: 600;
  font-size: 1rem;
  color: var(--c-ink);
}

.detail-row dd {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--c-text);
}

.detail-row dd a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  overflow-wrap: anywhere;
  font-weight: 600;
}

.detail-row address {
  margin-top: 0;
}

/* Closing band: reuses the home band. The line is longer here, so its measure is a little wider.
   The call button keeps its phone number on one line. */
.page-slug-contact .closing-band p {
  max-width: 24em;
}

.page-slug-contact .closing-band .button {
  white-space: nowrap;
}

@media (min-width: 1000px) {
  .contact-hero {
    padding: var(--s8) 0 var(--s7);
  }

  .contact-main {
    padding-block: var(--s8);
  }

  .contact-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--s6);
  }

  .form-card {
    padding: var(--s5);
  }

  .contact-details {
    padding-top: var(--s5);
  }
}

@media (max-width: 639px) {
  .form-card {
    padding: var(--s4) var(--s3) var(--s4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gform_button,
  .gform_button .arrow {
    transition: none;
  }
}


/* Smaller blue hero band with the H1. The home hero is larger; these pages stay quieter. */
.rest-hero {
  color: var(--c-white);
  background: var(--c-blue-deep);
  padding: var(--s5) 0 var(--s5);
}

.rest-hero h1 {
  max-width: 20em;
  color: var(--c-white);
  font-size: clamp(1.875rem, 1.35rem + 2.2vw, 2.75rem);
}

.rest-hero + .rest-main {
  padding-top: var(--s6);
}

.rest-main {
  padding-bottom: var(--s7);
}

/* Two columns from 960px: readable column (68ch) and a side contact card. Under 960px the card goes under the text. */
.rest-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
}

.rest-content {
  max-width: 68ch;
  min-width: 0;
}

/* Prose: one column, the same rhythm everywhere. */
.prose > * + * {
  margin-top: var(--s2);
}

.prose h2 {
  margin-top: var(--s6);
  font-size: var(--text-h3);
  line-height: 1.25;
  scroll-margin-top: calc(var(--header-h) + var(--s3));
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  margin-top: var(--s4);
  font-size: var(--text-lead);
  line-height: 1.3;
  font-family: var(--font-serif);
}

.prose p,
.prose li {
  font-size: var(--text-ui);
  line-height: 1.7;
  color: var(--c-text);
}

.prose .lead {
  font-size: var(--text-lead);
  line-height: 1.7;
  color: var(--c-ink);
}

.prose ul {
  padding-left: 0;
  list-style: none;
}

.prose ul li {
  position: relative;
  padding-left: var(--s3);
  margin-top: var(--s1);
}

.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--c-blue-deep);
}

.prose ul ul {
  margin-top: var(--s1);
}

.prose ol {
  padding-left: 1.5rem;
}

.prose ol li {
  margin-top: var(--s1);
}

/* The page's own link list (Page Navigation on the laminate page). Same shape as the nav links, without the bar. */
.jump-nav {
  padding-top: var(--s2);
  border-top: 1px solid var(--c-line);
}

.jump-nav p {
  margin-bottom: var(--s1);
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--c-ink);
}

.jump-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}

.jump-nav ul li {
  padding: 0;
  margin: 0;
}

.jump-nav ul li::before {
  display: none;
}

.jump-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--s2);
  border-radius: var(--radius);
  color: var(--c-blue-deep);
  font-weight: 600;
  text-decoration: none;
  background: var(--c-tint);
}

.jump-nav a:hover {
  background: var(--c-blue-soft);
  color: var(--c-blue-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.jump-nav a:focus-visible {
  outline: 3px solid var(--c-blue-deep);
  outline-offset: 3px;
}

.jump-nav a:active {
  background: var(--c-mist);
  color: var(--c-blue-ink);
}

/* Contact card: white, hairline, layered shadow (the card style from the theme). Button is solid blue here, because a white button would vanish on white. */
.contact-card {
  position: relative;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--s4);
}

.contact-card h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-h3);
  line-height: 1.25;
  color: var(--c-ink);
  margin-bottom: var(--s2);
}

.contact-card p {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--c-text);
}

.contact-card dl {
  margin: var(--s3) 0 0;
  display: grid;
  gap: var(--s2);
}

.contact-card dt {
  font-size: var(--text-ui);
  color: var(--c-muted);
}

.contact-card dd {
  margin: 0;
  font-size: var(--text-ui);
  color: var(--c-ink);
  font-weight: 600;
}

.contact-card dd a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--c-blue-deep);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.contact-card dd a:hover {
  color: var(--c-blue-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.contact-card dd a:active {
  color: var(--c-ink);
}

.contact-card .btn-solid {
  margin-top: var(--s3);
}

.btn-solid {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 3rem;
  padding: 0 var(--s3);
  border-radius: var(--radius);
  background: var(--c-blue-deep);
  color: var(--c-white);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-ui);
  line-height: 1.2;
  text-decoration: none;
  box-shadow: var(--shadow-btn);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), background-color 200ms var(--ease);
}

@media (hover: hover) {
  .btn-solid:hover {
    color: var(--c-white);
    background: var(--c-blue-ink);
    box-shadow: var(--shadow-btn-lift);
    transform: translateY(-2px);
  }
}

.btn-solid:focus-visible {
  outline: 3px solid var(--c-blue-deep);
  outline-offset: 3px;
}

.btn-solid:active {
  color: var(--c-white);
  background: var(--c-ink);
  box-shadow: var(--shadow-btn);
  transform: none;
}

/* Data table (species page): calm. Hairlines between rows, a tint header, no zebra, no hover fill. */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  background: var(--c-white);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-ui);
  line-height: 1.6;
}

.data-table caption {
  caption-side: top;
  text-align: left;
  padding: var(--s2) var(--s3);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-lead);
  color: var(--c-ink);
}

.data-table th,
.data-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--s2) var(--s3);
  border-top: 1px solid var(--c-line);
}

.data-table thead th {
  background: var(--c-tint);
  border-top: 0;
  border-bottom: 1px solid var(--c-mist);
  color: var(--c-ink);
  font-weight: 600;
}

.data-table tbody th {
  width: 12rem;
  color: var(--c-ink);
  font-weight: 600;
}

.data-table td {
  color: var(--c-text);
}

/* Phone: each row becomes a stacked block (label above text), so the text column keeps its width. */
@media (max-width: 599px) {
  .data-table thead {
    display: none;
  }

  .data-table tr {
    display: block;
    padding: var(--s2) var(--s3);
    border-top: 1px solid var(--c-line);
  }

  .data-table th,
  .data-table td {
    display: block;
    padding: 0;
    border-top: 0;
  }

  .data-table tbody th {
    width: auto;
    margin-bottom: var(--s1);
  }
}

/* Glossary: A-Z index sticks under the header; entries are scannable (term in serif, definition under it). */
.gloss-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
}

.az {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: var(--c-white);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--c-line);
  box-shadow: var(--shadow-header);
}

.az ul {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--s1);
  overflow-x: auto;
  padding-bottom: 2px;
}

.az li {
  flex: none;
}

.az a,
.az span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 var(--s1);
  border-radius: var(--radius);
  font-weight: 600;
  color: var(--c-blue-deep);
  text-decoration: none;
}

.az a:hover {
  background: var(--c-blue-soft);
  color: var(--c-blue-ink);
}

.az a:focus-visible {
  outline-offset: -3px;
}

.az a:active {
  background: var(--c-mist);
  color: var(--c-blue-ink);
}

.az span {
  color: var(--c-muted);
  font-weight: 400;
}

.gloss-group {
  scroll-margin-top: calc(var(--header-h) + 4.5rem);
  padding-top: var(--s4);
}

.gloss-group > h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-h2);
  line-height: 1.2;
  color: var(--c-ink);
  margin-bottom: var(--s2);
}

.gloss dt {
  margin-top: var(--s3);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-lead);
  line-height: 1.3;
  color: var(--c-ink);
}

.gloss dd {
  margin: var(--s1) 0 0;
  font-size: var(--text-ui);
  line-height: 1.7;
  color: var(--c-text);
  max-width: 68ch;
}

.gloss-note {
  margin-bottom: var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--text-ui);
  color: var(--c-text);
}

/* Legal: body text in the column, headings in serif, the policy date at the bottom. */
.legal address {
  margin-top: var(--s2);
  padding-left: var(--s3);
  border-left: 3px solid var(--c-mist);
  color: var(--c-ink);
}

.legal-updated {
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--c-line);
  font-size: var(--text-ui);
  color: var(--c-muted);
}

/* Thanks: a short message, then the contact card. */
.prose .thanks-message {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-h2);
  line-height: 1.25;
  color: var(--c-ink);
  letter-spacing: -0.02em;
}

/* Bottom contact card on pages that stack. */
.rest-bottom-card {
  margin-top: var(--s6);
  max-width: 68ch;
}

/* From 960px: content left, contact card right, with the card top aligned to the first heading. */
@media (min-width: 960px) {
  .rest-layout {
    grid-template-columns: minmax(0, 68ch) minmax(0, 18.5rem);
    justify-content: space-between;
    gap: var(--s6);
  }

  .rest-hero {
    padding: var(--s7) 0 var(--s6);
  }

  .rest-hero + .rest-main {
    padding-top: var(--s7);
  }

  .contact-card {
    position: sticky;
    top: calc(var(--header-h) + var(--s3));
  }

  .gloss-layout {
    grid-template-columns: 14rem minmax(0, 68ch);
    justify-content: space-between;
    gap: var(--s6);
  }

  .az {
    position: sticky;
    top: calc(var(--header-h) + var(--s3));
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  .az ul {
    display: grid;
    grid-template-columns: repeat(5, 2.75rem);
    gap: var(--s1);
    overflow: visible;
    padding-bottom: 0;
  }

  .az a,
  .az span {
    min-width: 2.75rem;
  }

  .gloss-group {
    padding-top: 0;
    margin-top: var(--s5);
  }

  .gloss-group:first-child {
    margin-top: 0;
  }
}

/* The contact card does not pin on the phone. */
@media (max-width: 959px) {
  .rest-bottom-card {
    margin-top: var(--s5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-solid {
    transition: none;
  }
}

/* Gravity Forms 3.x LEGACY markup (what the site prints): .gform_legacy_markup_wrapper, ul.gform_fields > li.gfield,
   .ginput_complex.gf_name_has_2 with span.name_first / span.name_last. Every rule starts with body .form-card so it
   beats the plugin's own CSS (the plugin sets the name spans to 50% width). */
body .form-card .gform_legacy_markup_wrapper {
  margin-top: var(--s3);
}

body .form-card .gform_legacy_markup_wrapper .gform_body {
  margin: 0;
}

body .form-card .gform_legacy_markup_wrapper ul.gform_fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s3) var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

body .form-card .gform_legacy_markup_wrapper li.gfield {
  min-width: 0;
  margin: 0;
  padding: 0;
}

/* Honeypot and hidden fields stay out of sight and out of the grid. */
body .form-card .gform_legacy_markup_wrapper .gform_validation_container,
body .form-card .gform_legacy_markup_wrapper .gfield--type-honeypot,
body .form-card .gform_legacy_markup_wrapper .gfield--type-hidden,
body .form-card .gform_legacy_markup_wrapper .gform_hidden {
  display: none;
}

/* Labels above the field. */
body .form-card .gform_legacy_markup_wrapper .gfield_label {
  display: block;
  margin: 0 0 var(--s1);
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-ink);
}

body .form-card .gform_legacy_markup_wrapper .gfield_required,
body .form-card .gform_legacy_markup_wrapper .gfield_required_asterisk {
  margin-left: 0.125rem;
  color: var(--c-blue-deep);
  font-weight: 600;
}

/* Containers: no extra top margin from the plugin. */
body .form-card .gform_legacy_markup_wrapper .ginput_container,
body .form-card .gform_legacy_markup_wrapper .ginput_complex {
  margin: 0;
}

/* First and Last: one row, filling the width, 16px apart. The plugin's 50% span width is overridden. */
body .form-card .gform_legacy_markup_wrapper .ginput_complex.gf_name_has_2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: flex-start;
  column-gap: var(--s4);
  width: 100%;
}

body .form-card .gform_legacy_markup_wrapper .ginput_complex.gf_name_has_2 > span.name_first,
body .form-card .gform_legacy_markup_wrapper .ginput_complex.gf_name_has_2 > span.name_last {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  margin: 0;
  padding: 0;
}

body .form-card .gform_legacy_markup_wrapper .gf_clear_complex {
  display: none;
}

/* Text-like inputs: 3rem tall, 1px muted border, 10px radius, the design's focus ring. Checkboxes and radios are not styled here. */
body .form-card .gform_legacy_markup_wrapper .ginput_container input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
body .form-card .gform_legacy_markup_wrapper .ginput_container textarea,
body .form-card .gform_legacy_markup_wrapper .ginput_container select {
  display: block;
  width: 100%;
  min-width: 0;
  height: 3rem;
  min-height: 3rem;
  margin: 0;
  padding: 0 var(--s2);
  border: 1px solid var(--c-muted);
  border-radius: var(--radius);
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  line-height: 1.4;
  box-shadow: none;
  appearance: none;
}

body .form-card .gform_legacy_markup_wrapper .ginput_container textarea {
  height: 9rem;
  min-height: 9rem;
  padding: 0.75rem var(--s2);
  line-height: 1.6;
  resize: vertical;
}

body .form-card .gform_legacy_markup_wrapper ::placeholder {
  color: var(--c-muted);
  opacity: 1;
}

@media (hover: hover) {
  body .form-card .gform_legacy_markup_wrapper .ginput_container :is(input, textarea, select):hover {
    border-color: var(--c-blue-deep);
  }
}

body .form-card .gform_legacy_markup_wrapper .ginput_container :is(input, textarea, select):focus-visible {
  outline: 3px solid var(--c-blue-deep);
  outline-offset: 2px;
  border-color: var(--c-blue-deep);
}

/* Sub-labels (First, Last): small muted captions under their input. */
body .form-card .gform_legacy_markup_wrapper .gform-field-label--type-sub {
  display: block;
  margin: var(--s1) 0 0;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--c-muted);
}

/* Description (under Email): "We Promise Not to Send You Spam." in the muted small style. */
body .form-card .gfield_description {
  margin: var(--s1) 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--c-muted);
}

/* Errors: a red border and a message in words, never colour alone. */
body .form-card .gform_legacy_markup_wrapper li.gfield_error .ginput_container :is(input, textarea, select) {
  border-color: var(--c-error);
  box-shadow: inset 0 0 0 1px var(--c-error);
}

body .form-card .gform_legacy_markup_wrapper li.gfield_error .gfield_validation_message,
body .form-card .gform_legacy_markup_wrapper li.gfield_error .validation_message,
body .form-card .gform_legacy_markup_wrapper .validation_error {
  display: block;
  margin-top: var(--s1);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-error);
}

body .form-card .gform_legacy_markup_wrapper .gform_validation_errors {
  margin: 0 0 var(--s3);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--c-error);
  border-radius: var(--radius);
  background: var(--c-white);
  color: var(--c-ink);
  font-size: 1rem;
  font-weight: 600;
}

body .form-card .gform_legacy_markup_wrapper .gform_validation_errors h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-ink);
}

/* Confirmation after sending. */
body .form-card .gform_legacy_markup_wrapper .gform_confirmation_message,
body .form-card .gform_legacy_markup_wrapper .gform_confirmation_wrapper {
  padding: var(--s2) 0;
  font-weight: 600;
  color: var(--c-ink);
}

/* Submit: the blue button of the design (the form also carries .button, which is white on blue bands, so these rules win). */
body .form-card .gform_legacy_markup_wrapper .gform_footer {
  margin: var(--s4) 0 0;
  padding: 0;
}

body .form-card .gform_legacy_markup_wrapper .gform_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  width: 100%;
  min-height: 3rem;
  padding: 0 var(--s4);
  margin: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--c-blue-deep);
  color: var(--c-white);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), background-color 200ms var(--ease);
}

@media (min-width: 640px) {
  body .form-card .gform_legacy_markup_wrapper .gform_button {
    width: auto;
    min-width: 14rem;
  }
}

@media (hover: hover) {
  body .form-card .gform_legacy_markup_wrapper .gform_button:hover {
    background: var(--c-blue-ink);
    color: var(--c-white);
    box-shadow: var(--shadow-btn-lift);
    transform: translateY(-2px);
  }
}

body .form-card .gform_legacy_markup_wrapper .gform_button:active {
  background: var(--c-blue-press);
  color: var(--c-white);
  box-shadow: var(--shadow-btn);
  transform: none;
}

body .form-card .gform_legacy_markup_wrapper .gform_button:focus-visible {
  outline: 3px solid var(--c-blue-deep);
  outline-offset: 3px;
}

/* Two columns from 640px: Phone | Email, City | State; Name, Business Name and Message span both. One column below 640px. */
@media (min-width: 640px) {
  body .form-card .gform_legacy_markup_wrapper ul.gform_fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s4);
  }

  body .form-card .gform_legacy_markup_wrapper li.gfield--type-name,
  body .form-card .gform_legacy_markup_wrapper li.gfield--type-textarea,
  body .form-card .gform_legacy_markup_wrapper li#field_1_15 {
    grid-column: 1 / -1;
  }
}

/* Glossary: entries as paragraphs; each letter's first entry is separated from the one before. */
.gloss-body > p,
.gloss-body > ul > li {
  max-width: 68ch;
  margin-top: var(--s2);
  font-size: var(--text-ui);
  line-height: 1.7;
  color: var(--c-text);
}

.gloss-body > p[id^="gloss-"] {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--c-line);
  scroll-margin-top: calc(var(--header-h) + var(--s4));
}

.gloss-body > p:first-child {
  margin-top: 0;
}

.gloss-layout.no-index {
  grid-template-columns: minmax(0, 1fr);
}

/* Species and handbook tables: calm, like .data-table. Tables are wrapped in .table-wrap by functions.php. */
.af-species .prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-ui);
  line-height: 1.6;
}

.af-species .prose caption {
  caption-side: top;
  text-align: left;
  padding: var(--s2) var(--s3);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-lead);
  color: var(--c-ink);
}

.af-species .prose th,
.af-species .prose td {
  text-align: left;
  vertical-align: top;
  padding: var(--s2) var(--s3);
  border-top: 1px solid var(--c-line);
}

.af-species .prose thead th {
  background: var(--c-tint);
  border-top: 0;
  border-bottom: 1px solid var(--c-mist);
  color: var(--c-ink);
  font-weight: 600;
}

.af-species .prose tbody th {
  width: 12rem;
  color: var(--c-ink);
  font-weight: 600;
}

.af-species .prose td {
  color: var(--c-text);
}

@media (max-width: 599px) {
  .af-species .prose thead {
    display: none;
  }

  .af-species .prose tr {
    display: block;
    padding: var(--s2) var(--s3);
    border-top: 1px solid var(--c-line);
  }

  .af-species .prose th,
  .af-species .prose td {
    display: block;
    padding: 0;
    border-top: 0;
  }

  .af-species .prose tbody th {
    width: auto;
    margin-bottom: var(--s1);
  }
}

/* Search results and pagination. */
.search-result {
  padding-top: var(--s3);
  margin-top: var(--s3);
  border-top: 1px solid var(--c-line);
}

.search-result:first-of-type {
  margin-top: var(--s3);
}

.search-result h2 {
  margin: 0 0 var(--s1);
  font-size: var(--text-lead);
  line-height: 1.3;
}

.search-result h2 a {
  color: var(--c-ink);
  text-decoration: none;
}

.search-result h2 a:hover {
  color: var(--c-blue-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.search-result p {
  font-size: var(--text-ui);
  line-height: 1.6;
  color: var(--c-text);
}

.navigation.pagination {
  margin-top: var(--s4);
}

.navigation.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1);
}

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 var(--s2);
  border-radius: var(--radius);
  background: var(--c-tint);
  color: var(--c-blue-deep);
  font-weight: 600;
  text-decoration: none;
}

a.page-numbers:hover {
  background: var(--c-blue-soft);
  color: var(--c-blue-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

a.page-numbers:active {
  background: var(--c-mist);
  color: var(--c-blue-ink);
}

.page-numbers.current {
  background: var(--c-blue-deep);
  color: var(--c-white);
}

.page-numbers.dots {
  background: none;
  color: var(--c-muted);
}

/* WordPress admin bar sits above the sticky header. */
.admin-bar .site-header {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

/* Phone: the A to Z letters wrap onto several lines inside the page (no sideways scroll, no sticky strip over the text).
   Desktop (960px and up) keeps the sticky grid above. */
@media (max-width: 959px) {
  .az {
    position: static;
  }

  .az ul {
    flex-wrap: wrap;
    overflow: visible;
    padding-bottom: 0;
  }
}

/* Under 640px the name row is one column, like every other field. */
@media (max-width: 639px) {
  body .form-card .gform_legacy_markup_wrapper .ginput_complex.gf_name_has_2 {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--s3);
  }
}

/* Name row, measured fix: the name container stays inside the field's content box (the plugin's own width overflowed it by 15px).
   First and Last are two equal columns with the same 32px gap as the Phone and Email row. */
.page-slug-contact .gform_legacy_markup_wrapper li.gfield .ginput_complex.ginput_container--name {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  float: none !important;
}

.page-slug-contact .gform_legacy_markup_wrapper li.gfield .ginput_complex.ginput_container--name > span {
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  box-sizing: border-box;
}

@media (max-width: 639px) {
  .page-slug-contact .gform_legacy_markup_wrapper li.gfield .ginput_complex.ginput_container--name {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--s3);
  }
}

/* Photos with captions in old page content carry a fixed width (for example 510px) in the page itself.
   Keep them inside the screen on phones (QA 6 Nov 2026: laminate delamination and buckled laminate pages). */
.wp-caption {
  max-width: 100%;
  box-sizing: border-box;
}

/* Old laminate pages (page-custom): their content carries a "Page Navigation" jump list from the 2013 layout
   (ul.nav-stacked inside .span3). Show it as a small boxed list, not loose bullets (QA 6 Nov 2026). */
.rest-content .nav-stacked {
  list-style: none;
  margin: 0 0 var(--s4);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  background: var(--c-tint);
}
.rest-content .nav-stacked li {
  margin: 0;
  padding: 0.3rem 0;
}
.rest-content .nav-stacked li::before,
.rest-content .nav-stacked li::marker {
  content: none;
}
.rest-content .nav-stacked .nav-header {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
  padding-bottom: 0.4rem;
}
.rest-content .nav-stacked .label {
  background: none;
  color: inherit;
  padding: 0;
}
.rest-content .row > [class^="span"] > h2:first-child,
.rest-content .row > [class^="span"] > h1:first-child {
  margin-top: 0;
}
.rest-content .row + .row,
.rest-content [class^="span"] h2 {
  margin-top: var(--s5);
}

/* Old laminate pages: photo rows (ul.thumbnails) sit side by side without bullets, and the old
   "More photos" buttons look like the theme's solid button (QA 6 Nov 2026). */
.rest-content ul.thumbnails {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  list-style: none;
  padding: 0;
  margin: var(--s3) 0;
}
.rest-content ul.thumbnails > li {
  flex: 1 1 14rem;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
.rest-content ul.thumbnails > li::before {
  content: none;
}
.rest-content ul.thumbnails .wp-caption {
  width: auto !important;
  margin: 0;
}
.rest-content button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3rem;
  margin: var(--s2) 0 var(--s4);
  padding: 0.5rem var(--s3);
  border: 0;
  border-radius: var(--radius);
  background: var(--c-blue-deep);
  color: var(--c-white);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-ui);
  line-height: 1.3;
  cursor: pointer;
  box-shadow: var(--shadow-btn);
}
.rest-content button.btn [class^="icon-"] {
  display: none;
}
@media (hover: hover) {
  .rest-content a:hover > button.btn {
    background: var(--c-blue-ink);
  }
}