/* ==========================================================================
   Green Glove Heroes — site styles
   Design tokens carried over from the Elementor global kit.
   ========================================================================== */

/* --------------------------------------------------------------- Fonts -- */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/roboto-400.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/roboto-500.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/roboto-600.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/roboto-700.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/roboto-800.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/roboto-900.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/noto-sans-jp-400.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/noto-sans-jp-500.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/noto-sans-jp-700.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/noto-sans-jp-800.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/noto-sans-jp-900.woff2") format("woff2");
}

/* -------------------------------------------------------------- Tokens -- */
:root {
  --green: #00a800;
  --green-dark: #007b00;
  /* Forms use their own accent in the Elementor kit — the divider and the
     field focus ring are #21C063, not --green. */
  --green-accent: #21c063;
  --field-border: #c7c7c7;
  --field-ink: #0c5a23;
  --navy: #08485e;
  --ink: #000000;
  --gray: #54595f;
  --gray-muted: #777777;
  --gray-bg: #eeeeee;
  --white: #ffffff;
  --star: #f5a623;

  --font-head: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Noto Sans JP", "Roboto", system-ui, -apple-system, sans-serif;

  /* Content column is 1200px; the gutter sits outside it, matching Elementor. */
  --wrap: 1248px;
  --gutter: 24px;
  --radius: 0px;
  /* The form column on the live site measures 652px. */
  --form-w: 652px;
  --section-y: 48px;
  --shadow: 0 2px 12px rgb(0 0 0 / 8%);
  --transition: 0.2s ease;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--green-dark);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--green);
}

/* Section headings: Roboto 800 at 35px with a 1em line-height, per the kit. */
h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1;
  margin: 0 0 0.5em;
  color: var(--ink);
}

h2 {
  font-size: 35px;
}

h3 {
  font-size: 22px;
}

p {
  margin: 0 0 1.25em;
}

p:last-child {
  margin-bottom: 0;
}

ul,
ol {
  margin: 0 0 1.25em;
  padding-left: 1.4em;
}

li {
  margin-bottom: 0.4em;
}

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}

/* ------------------------------------------------------------- Helpers -- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--wide {
  max-width: 1400px;
}

/* Centred column for a standalone form (contact, quote, employment). */
.wrap--form {
  max-width: calc(var(--form-w) + (var(--gutter) * 2));
}

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

/* This band runs taller than the default rhythm. */
.guarantees {
  padding-block: 80px 47px;
}

.section--gray {
  background: var(--gray-bg);
}

.section--navy {
  background: var(--navy);
  color: var(--white);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--green-dark);
  color: var(--white);
  padding: 12px 20px;
}

.skip-link:focus {
  left: 0;
  color: var(--white);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ------------------------------------------------------------- Eyebrow -- */
.eyebrow {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: capitalize;
  color: var(--navy);
  margin: 0 0 0.5em;
}

.eyebrow .arrow {
  color: var(--green);
  font-weight: 600;
}

/* Green underline rule used under a number of headings */
.rule {
  border: 0;
  border-top: 1px solid #d8dde0;
  margin: 1.25em 0 1.5em;
  position: relative;
}

.rule::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 46px;
  border-top: 4px solid var(--green);
}

/* ------------------------------------------------------------ Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.1;
  letter-spacing: 0.5px;
  padding: 15px 30px;
  border-radius: var(--radius);
  border: 0;
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
    border-color var(--transition);
}

.btn--primary {
  background: var(--green-dark);
  color: var(--white);
}

.btn--primary:hover {
  background: var(--green);
  color: var(--white);
}

/* Outlined button carries a 2px border, so the padding is 1px tighter. */
.btn--outline {
  border: 2px solid var(--navy);
  padding: 14px 29px;
  color: var(--navy);
  background: var(--white);
}

.btn--outline:hover {
  background: var(--navy);
  color: var(--white);
}

.btn--white {
  background: var(--white);
  color: var(--navy);
}

.btn--white:hover {
  background: var(--gray-bg);
  color: var(--navy);
}

/* The contact list and pitch are shared by the footer and the contact hero —
   both sit on navy, so the styling carries over unchanged. */
.page-hero--navy .footer__tagline,
.page-hero--navy .footer__pitch {
  color: var(--white);
}

.page-hero--navy .footer__tagline {
  margin-top: 1.5em;
}

.page-hero--navy .footer__contact {
  margin-bottom: 0;
}

/* The contact hero mirrors the footer: 50/50, copy left, links bottom-right. */
.page-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 64px;
  align-items: end;
}

@media (max-width: 767px) {
  .page-hero__grid {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

/* The white link colour was scoped to .site-footer; on navy anywhere else the
   default dark green fails contrast badly. Applied to every link on the band,
   not just the contact list. */
.page-hero--navy a,
.page-hero--navy .linklike {
  color: var(--white);
}

.page-hero--navy a:hover,
.page-hero--navy .linklike:hover {
  color: var(--green);
}

/* A button that has to look like a link: the map opens a dialog, so it is a
   <button>, not an <a> — it goes nowhere. */
.linklike {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--green-dark);
  cursor: pointer;
  text-align: left;
  transition: color var(--transition);
}

/* -------------------------------------------------------------- Topbar -- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--gray-bg);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 11px;
  line-height: 15px;
  text-transform: uppercase;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 35px;
}

.topbar__links {
  display: flex;
  align-items: center;
  gap: 40px;
}

.topbar a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--navy);
}

.topbar__links a {
  letter-spacing: 0.5px;
  line-height: 18px;
}

.topbar a:hover {
  color: var(--green-dark);
}

/* The guarantee badge is a raster image and runs larger than the line icons. */
.topbar__badge {
  width: 35px;
  height: 35px;
  flex: none;
}

/*
 * The two topbar glyphs are the brand's own artwork (lifted verbatim from the
 * WordPress build). Masking them lets the colour follow `currentColor`.
 */
.topbar__icon {
  flex: none;
  width: 19px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.topbar__icon--quote {
  height: 17px;
  --icon: url("../img/icons/free-quote.svg");
}

.topbar__icon--contact {
  height: 13px;
  --icon: url("../img/icons/contact.svg");
}

/* -------------------------------------------------------------- Header -- */
.site-header {
  background: var(--white);
  box-shadow: 0 1px 0 rgb(0 0 0 / 6%);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 40px;
  height: 61px;
}

.site-header__logo img {
  width: 210px;
  height: 40px;
}

/* ----------------------------------------------------------------- Nav -- */
.nav {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.1;
  letter-spacing: 0.5px;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__list a {
  color: var(--navy);
  font-size: 15px;
}

.nav__list a:hover,
.nav__list a[aria-current="page"] {
  color: var(--green-dark);
}

/* Mobile burger — three bars that fold into an X when the menu is open. */
.nav__burger {
  display: none;
  margin-left: auto;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--navy);
  transition: color var(--transition);
}

.nav__burger:hover,
.nav__burger:focus-visible {
  color: var(--green);
}

.nav__burger:active {
  color: var(--green-dark);
}

.nav__burger-box {
  position: relative;
  display: block;
  width: 28px;
  height: 20px;
}

.nav__burger-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
  transition: top var(--transition), transform var(--transition),
    opacity 0.15s ease;
}

.nav__burger-bar:nth-child(1) {
  top: 0;
}

.nav__burger-bar:nth-child(2) {
  top: 8.5px;
}

.nav__burger-bar:nth-child(3) {
  top: 17px;
}

/* Open: outer bars meet in the middle and cross, middle bar fades out. */
.nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(1) {
  top: 8.5px;
  transform: rotate(45deg);
}

.nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(2) {
  opacity: 0;
}

.nav__burger[aria-expanded="true"] .nav__burger-bar:nth-child(3) {
  top: 8.5px;
  transform: rotate(-45deg);
}

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

/* --------------------------------------------------------------- Hero --- */
.hero {
  position: relative;
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: center;
  min-height: 600px;
}

/* The Elementor column carries a 14px inset inside the 1200px container. */
.hero__body {
  max-width: 582px;
  padding-left: 14px;
}

.hero__body .eyebrow {
  margin-bottom: 0;
}

/* The visual headline. Body face, not the heading face. */
.hero__title {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.6px;
  color: var(--ink);
  margin: 0 0 26px;
}

/*
 * Two columns sized to their content, filled top-down then across.
 * Scoped past `.checklist`, which zeroes the padding later in this file.
 */
.hero .hero__benefits {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  gap: 1px 132px;
  list-style: none;
  margin: 0 0 9px;
  padding: 0 0 0 20px;
}

/* Declared after `.checklist li` below would lose on source order, so scope it. */
.hero .hero__benefits li {
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
  text-transform: capitalize;
  margin: 0;
  padding-bottom: 1px;
}

.hero__kicker {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: -0.6px;
  color: var(--ink);
  margin: 0 0 20px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/*
 * Right-hand photo. Elementor masks this with its `parallelogram-right`
 * shape (assets/mask-shapes/parallelogram-right.svg):
 *   viewBox 0 0 100 100 — path M25,0 L100,0 L75,100 L0,100
 * which is the polygon below.
 */
.hero__media {
  width: 600px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  justify-self: end;
  clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%);
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------- Check list -- */
.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.checklist li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 0;
  font-family: var(--font-head);
  font-weight: 500;
  color: var(--navy);
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  width: 20px;
  height: 20px;
  background: var(--green);
  -webkit-mask: var(--check-icon) 0 50% / 20px 20px no-repeat;
  mask: var(--check-icon) 0 50% / 20px 20px no-repeat;
}

.checklist--bold li {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-transform: capitalize;
  color: var(--ink);
  margin-bottom: 1px;
}

/*
 * Font Awesome `fa-check` — the exact glyph the WordPress build renders
 * (svg.e-font-icon-svg.e-fas-check, viewBox 0 0 512 512).
 */
:root {
  --check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------- Client logos --- */
/* Band is 120px tall: an 80px carousel with 40px of air beneath it. */
.logos {
  max-width: 1140px;
  margin-inline: auto;
  overflow: hidden;
  padding-bottom: 40px;
}

.logos__track {
  display: flex;
  align-items: center;
  gap: 17px;
  height: 80px;
  width: max-content;
  animation: logo-scroll 45s linear infinite;
}

.logos__track img {
  width: 173px;
  height: 75px;
  object-fit: contain;
  flex: none;
}

@keyframes logo-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logos__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
  }
}

/* ---------------------------------------------------------- Guarantees -- */
.guarantees__grid {
  display: grid;
  grid-template-columns: 260px 622px;
  column-gap: 60px;
  justify-content: center;
  align-items: start;
}

.guarantees__title {
  font-size: 35px;
  font-weight: 800;
  line-height: 1;
  text-transform: capitalize;
  color: var(--green);
  margin: 0;
}

.guarantees__only {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-transform: capitalize;
  color: var(--navy);
  margin: 0 0 0.75em;
}

/* --------------------------------------------------------------- Stats -- */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  text-align: center;
}

.stat__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: 80px;
  font-weight: 900;
  line-height: 120px;
  letter-spacing: -4px;
  color: var(--green-dark);
  margin: 0;
}

.stat__label {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.7px;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0.6em 0 0;
}

/* --------------------------------------------------------- Testimonial -- */
.testimonial {
  background: var(--green-dark);
  color: var(--white);
  padding-block: 48px;
}

.testimonial__inner {
  max-width: 666px;
  margin-inline: auto;
}

.testimonial blockquote {
  margin: 0;
  font-style: italic;
  font-weight: 700;
  font-size: 14px;
  line-height: 21px;
}

.testimonial blockquote p {
  margin-bottom: 14px;
}

.testimonial blockquote p:last-child {
  margin-bottom: 0;
}

.testimonial__cite {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  font-family: var(--font-head);
  font-weight: 500;
  font-style: normal;
}

.stars {
  color: var(--star);
  letter-spacing: 2px;
  font-size: 1.1rem;
}

/* --------------------------------------------------------- Split media -- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.split--reverse .split__media {
  order: 2;
}

.split__media {
  height: 100%;
  min-height: 420px;
}

.split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split__body {
  padding: clamp(32px, 5vw, 72px);
  max-width: 700px;
}

.split__title {
  color: var(--green);
  font-size: 35px;
  font-weight: 800;
  line-height: 1;
  margin: 0;
}

/* Accordion */
.accordion {
  border-top: 1px solid #d5d8dc;
}

.accordion__item {
  border-bottom: 1px solid #d5d8dc;
}

/* The heading only exists for semantics; the button owns the spacing. */
.accordion__item h3 {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 11px 4px;
  background: none;
  border: 0;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 22px;
  line-height: 33px;
  color: var(--green);
  text-align: left;
  cursor: pointer;
}

.accordion__trigger:hover {
  color: var(--green);
}

.accordion__icon {
  flex: none;
  width: 16px;
  height: 16px;
  position: relative;
}

.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  border-top: 2px solid var(--green);
  transition: transform var(--transition);
}

.accordion__icon::after {
  transform: rotate(90deg);
}

.accordion__trigger[aria-expanded="true"] .accordion__icon::after {
  transform: rotate(0deg);
}

.accordion__panel {
  display: none;
  padding: 0 4px 20px;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
}

.accordion__panel[data-open] {
  display: block;
}

/* The FAQs page uses navy triggers rather than green. */
.accordion--light .accordion__trigger {
  color: var(--navy);
}

.accordion--light .accordion__trigger:hover {
  color: var(--green-dark);
}

/* ----------------------------------------------------------- Guarantee -- */
.guarantee__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.guarantee__title {
  color: var(--green);
  font-size: 35px;
  font-weight: 800;
  line-height: 1;
  margin: 0;
}

/* --------------------------------------------------------------- Forms -- */
.field {
  margin-bottom: 14px;
}

.field label {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 6px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  /* 22px content + 8px padding + 1px border, top and bottom = 40px tall. */
  line-height: 22px;
  padding: 8px 16px;
  border: 1px solid var(--field-border);
  /* The Elementor kit adds `box-shadow: inset 0 0 10px rgba(0,0,0,.1)` here.
     Deliberately dropped — everything else about the field is matched. */
  border-radius: 5px;
  background: var(--white);
  color: var(--field-ink);
  transition: border-color var(--transition);
}

.field textarea {
  min-height: 130px;
  resize: vertical;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}

.form-grid .field--full {
  grid-column: 1 / -1;
}

/* ----------------------------------------------------------- Form rule -- */
/*
 * Elementor's divider widget, carried over. The whole thing is 2px tall: a
 * hairline the width of the form, tinted 11% green, with a 50px solid rule
 * centred on it. Measured off the export — band 652x2, rule 50x2 #21C063.
 *
 *   <div class="form-rule"><span></span></div>
 *
 * matches
 *
 *   .elementor-widget-container > .elementor-divider > .elementor-divider-separator
 */
.form-rule {
  display: flex;
  justify-content: center;
  max-width: var(--form-w);
  height: 2px;
  margin: 0 auto 40px;
  background: rgb(33 192 99 / 11%);
}

.form-rule span {
  display: block;
  width: 50px;
  border-top: 2px solid var(--green-accent);
}

/* ---------------------------------------------------------- Form fields -- */
.field--full {
  grid-column: 1 / -1;
}

.field label .req {
  color: #c02626;
  margin-left: 2px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--green-accent);
  outline: 2px solid var(--green-accent);
  outline-offset: -2px;
  background: var(--white);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--gray-muted);
  opacity: 1;
}

/* Server-side per-field errors from the `fields` object. */
.field__error {
  display: none;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  color: #c02626;
  margin: 6px 0 0;
}

.field.is-invalid .field__error {
  display: block;
}

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
  border-color: #c02626;
  background: #fff6f6;
}

/* Acknowledgement checkbox — posts the literal string the schema expects. */
.field--check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.field--check input {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px;
  accent-color: var(--green-dark);
}

.field--check label {
  margin: 0;
  font-weight: 400;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 22px;
}

/* File upload */
.field__file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.field__filename {
  font-size: 14px;
  color: var(--gray);
}

.field__filename.is-error {
  color: #c02626;
  font-weight: 700;
}

.field__hint {
  font-size: 13px;
  line-height: 18px;
  color: var(--gray-muted);
  margin: 6px 0 0;
}

/* Section headings mirror the section breaks in the notification email. */
.form__section {
  margin: 40px 0 20px;
  padding-top: 24px;
  border-top: 1px solid #d5d8dc;
}

.form__section:first-of-type {
  margin-top: 24px;
}

.form__section h2 {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  color: var(--green);
  margin: 0;
}

/* Honeypot: off-screen wrapper, never display:none on the input itself. */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/*
 * The form is a grid item on /contact-us/, so its min-width:auto resolves to
 * min-content — and Turnstile's widget has a hard 300px floor. On a 320px
 * screen that pushed the whole column past the viewport. min-width:0 lets the
 * track shrink; the widget itself drops to Turnstile's compact size below 300
 * (see initForms in site.js).
 */
.form {
  min-width: 0;
  max-width: var(--form-w);
  margin-inline: auto;
}

.form__turnstile {
  margin: 24px 0;
  max-width: 100%;
}

.form__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.form__btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Replaces the whole form card once a submission succeeds. */
.contact-form-card {
  scroll-margin-top: calc(var(--sticky-h, 80px) + 20px);
}

.contact-form-card.is-sent > :not(.form__done) {
  display: none;
}

.form__done:focus {
  outline: none;
}

.form__done .t-h3 {
  margin-bottom: 12px;
}

/* aria-live region for sending and failure, right above the submit button. */
.form__status {
  display: none;
  margin: 0 0 20px;
  padding: 14px 18px;
  border-left: 4px solid;
  font-size: 15px;
  line-height: 22px;
}

.form__status.is-error {
  display: block;
  border-color: #c02626;
  background: #fff1f1;
  color: #8a1616;
}

.form__status.is-sending {
  display: block;
  border-color: var(--gray-muted);
  background: var(--gray-bg);
  color: var(--gray);
}

/* ------------------------------------------------- Form on a navy panel -- */
.form--onnavy label,
.form--onnavy .field--check label {
  color: var(--white);
}

.form--onnavy .field__hint {
  color: rgb(255 255 255 / 70%);
}

.form--onnavy .form__section {
  border-top-color: rgb(255 255 255 / 25%);
}

.form--onnavy .field__error {
  color: #ffc4c4;
}

.form--onnavy .field.is-invalid input,
.form--onnavy .field.is-invalid select,
.form--onnavy .field.is-invalid textarea {
  border-color: #ffc4c4;
}

@media (max-width: 640px) {
  .field-row,
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------- Footer -- */
.site-footer {
  background: var(--navy);
  color: var(--white);
  padding-block: var(--section-y) 0;
}

.site-footer a {
  color: var(--white);
}

.site-footer a:hover {
  color: var(--green);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1.6fr 1fr;
  gap: 40px 64px;
  align-items: start;
}

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

  .footer__about {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }
}

.footer__heading {
  font-size: 16px;
  font-weight: 800;
  color: var(--white);
  margin: 0 0 1em;
}

.footer__sitemap ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
}

.footer__sitemap li {
  margin-bottom: 8px;
}

.footer__logo {
  width: 270px;
  margin-bottom: 12px;
}

.footer__tagline {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  margin: 0 0 1.75em;
}

.footer__pitch {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 1.5em;
  max-width: 26em;
}

.footer__contact {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
}

.footer__contact li {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}

.footer__contact svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: currentColor;
}

.footer__bottom {
  margin-top: var(--section-y);
  border-top: 1px solid rgb(255 255 255 / 20%);
  padding-block: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.85rem;
}

.footer__copy {
  margin: 0;
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__legal li {
  margin: 0;
}

@media (max-width: 600px) {
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------------------------------------------------------- Page hero --- */
.page-hero {
  padding-block: clamp(48px, 6vw, 88px) 0;
}

.page-hero__title {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 700;
  color: var(--green);
  margin: 0;
}

/* Navy banner used on the form pages (free quote, employment, contact). */
.page-hero--navy {
  background: var(--navy);
  color: var(--white);
  padding-block: clamp(56px, 8vw, 110px);
}

.page-hero--navy .page-hero__title {
  color: var(--white);
  font-size: clamp(1.5rem, 2.2vw, 1.8rem);
}

.page-hero--navy .eyebrow {
  color: var(--white);
  font-size: 1rem;
}

/* Centred display title, used for the blog index. */
.page-hero--center {
  text-align: center;
  padding-block: clamp(48px, 6vw, 96px);
}

.page-hero__display {
  font-family: var(--font-head);
  font-size: clamp(2.5rem, 5vw, 5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 1.5px;
  color: var(--navy);
  margin: 0;
}

/* --------------------------------------------------------- FAQs page ---- */
.faq__layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.faq__toc {
  position: sticky;
  top: 55px;
}

.faq__toc h2 {
  font-size: 1.1rem;
  margin-bottom: 0.75em;
}

.faq__toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-head);
  font-size: 0.95rem;
}

.faq__toc li {
  margin-bottom: 0.5em;
}

.faq__toc a {
  color: var(--navy);
}

.faq__group {
  margin-bottom: 56px;
}

.faq__group h2 {
  color: var(--green);
  font-size: 1.5rem;
  scroll-margin-top: 55px;
}

/* -------------------------------------------------------- Blog listing -- */
.post-grid {
  display: grid;
  /* min() keeps the track from exceeding the viewport on narrow phones. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 32px;
}

.post-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e3e7ea;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  transition: box-shadow var(--transition), transform var(--transition);
}

.post-card__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.post-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.post-card__title {
  font-size: 1.3rem;
  margin-bottom: 0.5em;
}

.post-card__title a {
  color: var(--green);
}

.post-card__title a:hover {
  color: var(--green-dark);
}

.post-card__excerpt {
  font-size: 0.95rem;
  color: var(--gray);
  flex: 1;
}

.post-card__more {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.9rem;
  margin-top: 1.25em;
}

/* ------------------------------------------------------- Single post ---- */

/* Full-bleed featured image with the title laid over it. */
.post-header {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 420px;
  padding-block: 64px;
  background: var(--navy) center / cover no-repeat;
  color: var(--white);
  isolation: isolate;
}

.post-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgb(4 24 32 / 72%) 0%,
    rgb(4 24 32 / 45%) 55%,
    rgb(4 24 32 / 25%) 100%
  );
}

.post-header__title {
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  font-weight: 700;
  color: var(--white);
  margin: 0;
  max-width: 14em;
}

.post-meta {
  font-family: var(--font-head);
  font-size: 0.9rem;
  color: rgb(255 255 255 / 80%);
  margin-top: 1em;
}

/* Body + sticky table of contents. */
.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
  padding-block: var(--section-y);
}

.post-toc {
  position: sticky;
  top: 55px;
  border-left: 1px solid #dfe3e6;
  padding-left: 24px;
}

.post-toc h2 {
  font-size: 1.05rem;
  color: var(--navy);
  margin-bottom: 0.75em;
}

.post-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-head);
  font-size: 0.95rem;
  line-height: 1.4;
}

.post-toc li {
  margin-bottom: 0.75em;
}

.post-toc a {
  color: var(--ink);
}

.post-toc a:hover {
  color: var(--green);
}

.prose {
  max-width: 780px;
}

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

.prose h2 {
  color: var(--green);
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  margin-top: 1.75em;
  scroll-margin-top: 55px;
}

.prose h3 {
  color: var(--navy);
  margin-top: 1.5em;
}

.prose ul {
  padding-left: 1.2em;
}

.prose figure {
  margin: 2.5em 0;
}

.prose figure img {
  width: 100%;
  border-radius: var(--radius);
}

.prose figcaption {
  font-size: 0.85rem;
  color: var(--gray-muted);
  text-align: center;
  margin-top: 0.75em;
}

.prose .callout {
  background: var(--gray-bg);
  border-left: 4px solid var(--green);
  padding: 20px 24px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 2em 0;
}

.flyer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin: 2.5em 0;
}

.flyer-grid img {
  width: 100%;
  border-radius: var(--radius);
}

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

/*
 * The angled mask only reads well beside the text, so from 1024px down the
 * photo becomes a straight-edged, full-bleed banner above the copy.
 * (The WordPress build simply hides it here.)
 */
@media (max-width: 1024px) {
  .hero__grid {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-block: 0 40px;
  }

  /* Reset the desktop-only fixed measurements. */
  .hero__body {
    max-width: none;
    padding-left: 0;
  }

  .hero__media {
    order: -1;
    width: auto;
    /* Bleed past the container gutter to the viewport edge. */
    max-width: none;
    margin-inline: calc(var(--gutter) * -1);
    margin-bottom: 32px;
    aspect-ratio: auto;
    height: clamp(280px, 56vw, 420px);
    justify-self: stretch;
    clip-path: none;
  }

  /* Keeps both faces in frame from 4:3 through to a ~2.4:1 crop. */
  .hero__media img {
    object-position: center 20%;
  }

  /* .footer__grid is deliberately absent: it has its own breakpoints
     (3 col -> 2 col at 1024 -> 1 col at 600) further up the file, and this
     rule is later in source order so it would silently win. */
  .split,
  .guarantees__grid,
  .guarantee__grid,
  .faq__layout,
  .post-layout {
    grid-template-columns: 1fr;
  }

  .guarantees__grid {
    row-gap: 32px;
  }

  .post-toc {
    position: static;
    order: -1;
    border-left: 0;
    border-bottom: 1px solid #dfe3e6;
    padding: 0 0 24px;
  }

  .split--reverse .split__media {
    order: 0;
  }

  .split__media {
    min-height: 280px;
  }

  .faq__toc {
    position: static;
  }
}

@media (max-width: 767px) {
  /* Section headings drop to 22px on phones, matching the Elementor kit. */
  h2,
  .guarantees__title,
  .split__title,
  .case__title {
    font-size: 22px;
  }

  .guarantee__title {
    font-size: 32px;
  }
}

@media (max-width: 768px) {
  .nav__burger {
    display: inline-flex;
  }

  .nav__list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    box-shadow: var(--shadow);
    padding: 8px 0;
    z-index: 20;
  }

  .nav__list[data-open] {
    display: flex;
  }

  .nav__list > li > a {
    display: flex;
    width: 100%;
    padding: 14px var(--gutter);
  }

  .site-header__inner {
    position: relative;
    gap: 16px;
    justify-content: space-between;
  }

  .site-header__logo img {
    width: 170px;
    height: auto;
  }

  .topbar__inner {
    flex-direction: column;
    gap: 6px;
    height: auto;
    padding-block: 8px;
  }

  .topbar__links {
    gap: 20px;
  }

  /* Beats `.hero .hero__benefits`, which sets two content-sized columns. */
  .hero .hero__benefits {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
    gap: 4px;
    padding-left: 10px;
  }

  .stats,
  .field-row,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .stats {
    gap: 40px;
  }

  .hero__actions .btn {
    flex: 1 1 auto;
  }

  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }
}

@media print {
  .site-header,
  .topbar,
  .site-footer,
  .logos {
    display: none;
  }
}

/* ==========================================================================
   Case studies (/results/) — page + index
   ========================================================================== */

/* ------------------------------------------------- Review flag (staging) -- */
/*
 * Marks a figure that still needs client sign-off. Deliberately loud so it
 * cannot ship by accident — grep for "review-flag" to find every instance.
 */
.review-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  margin-left: 0.3em;
  border-radius: 50%;
  background: #b54708;
  color: #fff;
  font-family: var(--font-head);
  font-size: 0.62em;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  vertical-align: super;
  cursor: help;
}

.review-note {
  display: block;
  max-width: 780px;
  margin: 32px auto 0;
  padding: 16px 20px;
  border-left: 4px solid #b54708;
  background: #fff7ed;
  color: #7a3208;
  font-size: 14px;
  line-height: 21px;
}

.review-note strong {
  font-family: var(--font-head);
  font-weight: 800;
}

/* ------------------------------------------------------ Case study hero -- */
.cs-hero {
  background: var(--navy);
  color: var(--white);
  padding-block: clamp(48px, 6vw, 80px);
}

.cs-hero__label {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-transform: capitalize;
  color: var(--white);
  margin: 0 0 1em;
}

.cs-hero__title {
  color: var(--white);
  font-size: 35px;
  font-weight: 800;
  line-height: 1.1;
  margin: 0;
  max-width: 20em;
}

.cs-hero__meta {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--green);
  margin: 1.25em 0 0;
}

/* ----------------------------------------------------- Case study stats -- */
.cs-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.cs-stat__value {
  font-family: var(--font-body);
  font-size: clamp(2rem, 3.2vw, 44px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -2px;
  color: var(--green-dark);
  margin: 0;
}

.cs-stat__label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0.5em 0 0;
}

/* -------------------------------------------------- Opportunity + split -- */
.cs-lede {
  max-width: 900px;
}

.cs-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.cs-col__title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--green);
  margin: 0 0 1em;
}

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

.cs-col li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 0.85em;
  font-size: 16px;
  line-height: 24px;
}

.cs-col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

/* ----------------------------------------------------- Financial impact -- */
.cs-table-wrap {
  overflow-x: auto;
}

.cs-table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 16px;
}

.cs-table-wrap caption {
  position: sticky;
  left: 0;
}

.cs-table caption {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--green);
  text-align: left;
  margin-bottom: 1em;
}

.cs-table th,
.cs-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid #d5d8dc;
}

.cs-table thead th {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--navy);
  border-bottom-width: 2px;
}

.cs-table tbody th {
  font-family: var(--font-body);
  font-weight: 400;
}

.cs-table td + td,
.cs-table th + th {
  text-align: right;
}

.cs-table tbody tr:last-child th,
.cs-table tbody tr:last-child td {
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--navy);
  border-bottom: 0;
}

/* --------------------------------------------------- Operational results -- */
.cs-results {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.cs-callouts {
  display: grid;
  gap: 32px;
  text-align: center;
}

.cs-callout__value {
  font-family: var(--font-body);
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--green-dark);
  margin: 0;
}

.cs-callout__label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: -0.3px;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0.6em 0 0;
}

/*
 * The shared checklist is styled for the homepage guarantees (single-line,
 * title-case). Case study results are sentence-case prose that wraps, so the
 * transform is dropped and the tick aligns to the first line, not the middle.
 */
.cs-results .checklist--bold li {
  text-transform: none;
  font-weight: 400;
  margin-bottom: 0.85em;
}

.cs-results .checklist--bold li::before {
  top: 12px;
}

.cs-note {
  font-size: 12px;
  line-height: 18px;
  color: var(--gray-muted);
  margin: 32px 0 0;
}

/* --------------------------------------------------------- Tagline band -- */
.cs-tagline {
  background: var(--green-dark);
  color: var(--white);
  padding-block: 40px;
  text-align: center;
}

.cs-tagline p {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.3;
  margin: 0;
}

.cs-tagline .cs-tagline__sub {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  margin-top: 0.75em;
  opacity: 0.9;
}

/* ------------------------------------------------------- Results index --- */
/* ------------------------------------------------------------- CTA band -- */
.cs-cta {
  background: var(--gray-bg);
  padding-block: var(--section-y);
  text-align: center;
}

.cs-cta__title {
  color: var(--green);
  font-size: 35px;
  font-weight: 800;
  line-height: 1;
  margin: 0 0 0.5em;
}

.cs-cta__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 1.5em;
}

/* ------------------------------------------------- Case study responsive -- */
@media (max-width: 1024px) {
  .cs-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
  }

  .cs-cols,
  .cs-results {
    grid-template-columns: 1fr;
  }

  .cs-cols > *,
  .cs-results > * {
    min-width: 0;
  }

  .cs-callouts {
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  }
}

@media (max-width: 767px) {
  .cs-hero__title,
  .cs-cta__title {
    font-size: 22px;
  }

  .cs-tagline p {
    font-size: 18px;
  }

  .cs-table th,
  .cs-table td {
    padding: 12px 10px;
  }
}

/* ==========================================================================
   Results — case study rows + homepage featured band
   ========================================================================== */

/* ------------------------------------------------------- Result rows ---- */
.result-rows {
  display: grid;
  gap: 32px;
}

/*
 * Constrained card: 8rem of white space either side, 4rem of air top and
 * bottom, 3rem inset to the text. The side margin collapses as the viewport
 * narrows so the card never gets squeezed.
 */
.result-row {
  background: var(--navy);
  color: var(--white);
  margin-inline: 8rem;
  padding: 4rem 3rem;
}

.result-row__inner {
  max-width: 46em;
}

.result-row__meta {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 1.25em;
}

/* Lead reads plain; the payoff carries the number and the weight. */
.result-row__title {
  font-family: var(--font-head);
  font-size: clamp(1.35rem, 2.3vw, 30px);
  font-weight: 500;
  line-height: 1.25;
  color: var(--white);
  margin: 0 0 0.7em;
}

.result-row__title strong {
  font-weight: 800;
  color: var(--green);
}

.result-row__summary {
  font-size: 15px;
  line-height: 23px;
  color: rgb(255 255 255 / 85%);
  max-width: 58ch;
  margin: 0 0 1.75em;
}

.result-row__more a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--white);
}

.result-row__more a:hover {
  color: var(--green);
}

.result-row__more a::after {
  content: "\2192";
  font-size: 1.2em;
  transition: transform var(--transition);
}

.result-row__more a:hover::after {
  transform: translateX(4px);
}

/* Homepage: same idea, smaller and tighter. */
.result-row--compact {
  margin-inline: 4rem;
  padding: 2.5rem 2.5rem;
}

.result-row--compact .result-row__title {
  font-size: clamp(1.2rem, 1.9vw, 25px);
  margin-bottom: 0.6em;
}

.result-row--compact .result-row__meta {
  margin-bottom: 0.9em;
}

/* ------------------------------------------- Homepage featured results -- */
/* Tracks the compact box inset so the head starts and ends with the boxes. */
.featured-results__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 4rem 32px;
}

.featured-results__title {
  color: var(--green);
  font-size: 35px;
  font-weight: 800;
  line-height: 1;
  margin: 0;
}

.featured-results__all {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  .result-row {
    margin-inline: 3rem;
  }

  .result-row--compact,
  .featured-results__head {
    margin-inline: 2rem;
  }
}

@media (max-width: 767px) {
  .featured-results__title {
    font-size: 22px;
  }

  .result-row__title {
    font-size: 20px;
  }

  /* No room for the inset on a phone. */
  .result-row,
  .result-row--compact {
    margin-inline: 0;
    padding: 2rem 1.5rem;
  }

  .featured-results__head {
    margin-inline: 0;
  }
}

/* ---------------------------------------------- Paired testimonials ----- */
/* Two quotes in one green band, rather than two bands stacking. */
.testimonial__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  max-width: 1060px;
  margin-inline: auto;
}

.testimonial__pair figure {
  margin: 0;
}

@media (max-width: 900px) {
  .testimonial__pair {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------- Results hero --- */
/*
 * White top like the FAQs page: green title, dark body copy. Text is held to
 * half the container on desktop, with the same 14px left inset the homepage
 * hero uses.
 */
.results-hero {
  padding-block: clamp(48px, 6vw, 88px);
}

.results-hero__body {
  max-width: 50%;
  padding-left: 14px;
}

.results-hero__body .eyebrow {
  color: var(--navy);
}

.results-hero__body p {
  color: var(--ink);
}

@media (max-width: 1024px) {
  .results-hero__body {
    max-width: none;
    padding-left: 0;
  }
}


/* -------------------------------------------------------------- Legal --- */
/* Long-form prose: a single measured column, not the site's wide grid. */
.legal {
  max-width: 768px;
}

.legal__updated {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--gray-muted);
  margin-bottom: 2em;
}

.legal h2 {
  font-size: 26px;
  color: var(--green);
  margin: 1.8em 0 0.6em;
}

.legal h3 {
  font-size: 18px;
  margin: 1.4em 0 0.5em;
}

.legal p,
.legal li {
  color: var(--gray);
}

.legal li {
  margin-bottom: 0.5em;
}

.legal strong {
  color: var(--ink);
}


/* ==========================================================================
   Motion
   --------------------------------------------------------------------------
   FOUC rule: nothing here hides anything on its own. `.reveal` is only ever
   applied by site.js, and only to elements it has decided to animate. If the
   JS never runs — no IntersectionObserver, a parse error, scripts blocked —
   the page renders fully visible. Never add `.reveal` in the HTML.

   Everything is wrapped in `prefers-reduced-motion: no-preference`, so the
   reduced-motion path is the *absence* of these rules rather than an override
   fighting them. site.js checks the same query and skips adding the classes.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* ------------------------------------------------------ Scroll reveal -- */
  .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  .reveal.in {
    opacity: 1;
    transform: none;
  }

  /* --------------------------------------------------- Hero entrance ----- */
  /*
   * The hero is above the fold, so it cannot use the reveal path: a deferred
   * script runs after first paint, and adding a hidden class then makes the
   * hero blink (measured: painted at 33ms, hidden, faded back). Worse than no
   * animation.
   *
   * So the start state is keyed to `.motion`, which a ~5-line inline script in
   * <head> sets *before* first paint. The no-JS guarantee holds: no script, no
   * `.motion`, nothing hidden. That script also removes `.motion` after 1.5s if
   * site.js never reports in, so a failed JS load shows the hero rather than
   * leaving a blank band forever.
   */
  .motion .hero__body > *,
  .motion .page-hero .wrap > *,
  .motion .cs-hero .wrap > * {
    opacity: 0;
    transform: translateY(26px);
  }

  .motion .hero-in > *,
  .motion .hero-in.wrap > * {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  .motion .hero-in > *:nth-child(1) { transition-delay: 0.05s; }
  .motion .hero-in > *:nth-child(2) { transition-delay: 0.14s; }
  .motion .hero-in > *:nth-child(3) { transition-delay: 0.23s; }
  .motion .hero-in > *:nth-child(4) { transition-delay: 0.32s; }
  .motion .hero-in > *:nth-child(5) { transition-delay: 0.41s; }
  .motion .hero-in > *:nth-child(6) { transition-delay: 0.50s; }

  /* --------------------------------------------- Hover: logos + marks ---- */
  /*
   * No hover effect on the client logo strip and no zoom on any image — the
   * strip just keeps sliding, untouched by the cursor, and photographs stay
   * still. Deliberate, per the client. Do not reintroduce.
   *
   * The header/footer logo dim below is opacity only: nothing moves.
   */
  .site-header__logo img,
  .footer__logo {
    transition: opacity 0.3s ease;
  }

  .site-header__logo:hover img,
  .footer__logo:hover {
    opacity: 0.75;
  }

  /* Buttons already transition colour; add a touch of lift. */
  .btn {
    transition: background var(--transition), color var(--transition),
      border-color var(--transition), transform 0.2s ease, box-shadow 0.2s ease;
  }

  .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgb(0 0 0 / 16%);
  }

  .btn:active {
    transform: none;
  }
}


/* ==========================================================================
   AEO build (2026-10): nav, sticky bar, slide-in menu, footer, page parts
   --------------------------------------------------------------------------
   Rule for this section: nothing in the page body runs wider than the nav.
   The nav sits in .wrap, so its content edge is --content-max (1200px). Every
   body component here is capped to that width or narrower.
   ========================================================================== */
:root {
  --content-max: 1200px;
  --measure: 780px;
  --header-h: 72px;
  --sticky-h: 60px;
}

[id] {
  scroll-margin-top: calc(var(--sticky-h) + 20px);
}

/* The topbar scrolls away now; the sticky bar takes over on scroll. */
.topbar {
  position: relative;
}

/* Full-bleed photo splits used to run edge to edge. Held to the nav width. */
.split {
  width: min(calc(100% - (var(--gutter) * 2)), var(--content-max));
  max-width: var(--content-max);
  margin-inline: auto;
}

/* ------------------------------------------------------------ Main nav -- */
.site-header {
  position: relative;
  z-index: 60;
}

.site-header__inner {
  position: relative;
  height: var(--header-h);
  gap: 24px;
}

.mainnav {
  display: flex;
  align-items: stretch;
  gap: 26px;
  margin-left: auto;
  height: 100%;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.5px;
}

.navcell {
  display: flex;
  align-items: center;
}

.navcell__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--navy);
  white-space: nowrap;
}

a.navcell {
  color: var(--navy);
}

.navcell__label:hover,
.navcell__label[aria-current="page"],
.has-dd:hover > .navcell__label,
.has-dd:focus-within > .navcell__label {
  color: var(--green-dark);
}

.caret {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--transition);
}

.has-dd:hover .caret,
.has-dd:focus-within .caret {
  transform: rotate(225deg) translate(-2px, 0);
}

.navcell__cta {
  align-self: center;
  padding: 12px 20px;
  font-size: 14px;
  white-space: nowrap;
}

/* ----------------------------------------------------------- Dropdowns -- */
.has-dd {
  position: relative;
}

.dd {
  position: absolute;
  top: 100%;
  left: -18px;
  z-index: 70;
  background: var(--white);
  border-top: 3px solid var(--green);
  box-shadow: 0 18px 40px rgb(8 72 94 / 18%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.has-dd:hover > .dd,
.has-dd:focus-within > .dd {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}

.dd--list {
  display: flex;
  flex-direction: column;
  min-width: 290px;
  padding: 10px 0;
}

.dd--list a,
.dd-col a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--ink);
}

.dd--list a {
  padding: 9px 22px;
}

.dd--list a:hover,
.dd-col a:hover,
.dd a[aria-current="page"] {
  color: var(--green-dark);
  background: #f4f7f5;
}

/* Services: a mega panel the width of the nav, anchored to the header. */
.has-dd--mega,
.mainnav > .has-dd:first-child {
  position: static;
}

.dd--mega {
  left: var(--gutter);
  right: var(--gutter);
  max-width: var(--content-max);
  padding: 28px 28px 20px;
}

.dd__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 28px;
}

.dd-col {
  display: flex;
  flex-direction: column;
}

.dd-col a {
  padding: 5px 8px;
  margin-inline: -8px;
}

.dd-col .dd-h {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 15px;
  color: var(--green-dark);
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid #e3e7ea;
}

.dd__all {
  display: inline-block;
  margin-top: 20px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ---------------------------------------------------- Menu button ------ */
.menu-btn {
  display: none;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  padding: 8px 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--navy);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.menu-btn:hover {
  color: var(--green-dark);
}

.burger {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
}

.burger i {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.25s ease;
}

.menu-btn:hover .burger i:nth-child(1) {
  transform: translateY(-1px);
}

.menu-btn:hover .burger i:nth-child(3) {
  transform: translateY(1px);
}

/* ----------------------------------------------------- Menu panel ------ */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgb(8 72 94 / 55%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.menu-overlay.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease, visibility 0s;
}

.menu-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  width: min(360px, 88vw);
  height: 100%;
  overflow-y: auto;
  background: var(--navy);
  color: var(--white);
  box-shadow: -10px 0 34px rgb(0 0 0 / 30%);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.4s;
}

.menu-panel.open {
  transform: none;
  visibility: visible;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s;
}

html.menu-open {
  overflow: hidden;
}

.menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px 14px 26px;
  border-bottom: 1px solid rgb(255 255 255 / 16%);
}

.menu-brand img {
  width: 170px;
  height: auto;
}

.menu-close {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--white);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition), transform 0.3s ease;
}

.menu-close:hover {
  background: rgb(255 255 255 / 12%);
  transform: rotate(90deg);
}

.menu-nav {
  display: grid;
  overflow: hidden;
}

.menu-nav .m-root,
.menu-nav .m-panel {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease, visibility 0s linear 0.38s;
}

.menu-nav .m-panel {
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
}

.menu-nav.sub-open .m-root {
  transform: translateX(-28%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.menu-nav .m-panel.is-active {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease, visibility 0s;
}

.m-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 26px;
  border: 0;
  border-bottom: 1px solid rgb(255 255 255 / 10%);
  background: none;
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease;
}

.menu-panel a {
  color: var(--white);
}

.m-item:hover,
.m-sub a:hover {
  background: var(--green-dark);
  color: var(--white);
}

.m-chev {
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

.m-chev--back {
  transform: rotate(135deg);
  margin: 0 12px 0 0;
}

.m-back {
  display: flex;
  align-items: center;
  padding: 14px 26px;
  border: 0;
  border-bottom: 1px solid rgb(255 255 255 / 16%);
  background: rgb(255 255 255 / 6%);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
}

.m-back:hover {
  background: rgb(255 255 255 / 12%);
}

.m-sub {
  display: flex;
  flex-direction: column;
  padding-bottom: 12px;
}

.m-sub a {
  padding: 9px 26px 9px 40px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.3;
}

.m-sub .m-h {
  margin-top: 8px;
  padding: 12px 26px 6px;
  border-top: 1px solid rgb(255 255 255 / 16%);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
}

.m-sub .m-h:first-child {
  margin-top: 0;
  border-top: 0;
}

.menu-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 26px 32px;
}

.menu-foot .btn {
  width: 100%;
}

.menu-foot__tel {
  text-align: center;
  font-family: var(--font-head);
  font-weight: 700;
}

/* The full nav needs ~874px (with Login). It stays down to 901px. Below that, the header shows logo + Menu. */
@media (max-width: 900px) {
  .mainnav {
    display: none;
  }

  .site-header .menu-btn {
    display: inline-flex;
  }
}

@media (max-width: 768px) {
  :root {
    --header-h: 64px;
  }

  .site-header__logo img {
    width: 170px;
    height: auto;
  }

  .menu-btn__label {
    font-size: 12px;
  }
}

/* ----------------------------------------------------- Page hero (AEO) -- */
.page-hero--aeo {
  padding-block: clamp(40px, 5vw, 72px) clamp(36px, 4vw, 56px);
}

.page-hero--aeo .page-hero__title {
  max-width: 22em;
  line-height: 1.1;
}

.page-hero__lede {
  max-width: var(--measure);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}

.content > .btn-row {
  margin-top: 32px;
}

/* ---------------------------------------------------------- Breadcrumbs -- */
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 500;
  color: var(--gray);
}

.crumbs li {
  margin: 0;
}

.crumbs li + li::before {
  content: "\203A";
  margin: 0 8px;
  color: var(--gray-muted);
}

.crumbs a {
  color: var(--navy);
}

.crumbs a:hover {
  color: var(--green-dark);
}

.crumbs li[aria-current] {
  color: var(--gray);
}

.crumbs--onnavy ol,
.page-hero--navy .crumbs ol,
.crumbs--onnavy li[aria-current],
.page-hero--navy .crumbs li[aria-current] {
  color: rgb(255 255 255 / 75%);
}

.crumbs--onnavy a,
.page-hero--navy .crumbs a {
  color: var(--white);
}

/* --------------------------------------------------------- Content band -- */
.content {
  max-width: var(--content-max);
}

/* Reading measure: text never runs the full nav width. */
.content > :where(p, ul, ol, h2, h3, h4, address, figure, .callout, .cs-lede) {
  max-width: var(--measure);
}

.content > :where(.accordion) {
  max-width: 900px;
}

.content h2 {
  color: var(--green);
  font-size: 32px;
  line-height: 1.1;
}

.content > h2:not(:first-child) {
  margin-top: 1.6em;
}

.content h3 {
  color: var(--navy);
  font-size: 22px;
  line-height: 1.2;
  margin-top: 1.6em;
}

.content h4 {
  color: var(--navy);
  font-size: 18px;
  margin-top: 1.4em;
}

.content > h3:first-child,
.content > h4:first-child {
  margin-top: 0;
}

.content figure {
  margin: 2em 0;
}

.content figure img {
  max-height: 560px;
  width: auto;
}

.content .callout {
  background: var(--white);
  border-left: 4px solid var(--green);
  padding: 20px 24px;
  margin: 2em 0;
}

.section--gray .content .callout {
  background: var(--white);
}

.content .flyer-grid {
  max-width: var(--content-max);
}

.nap {
  font-style: normal;
  line-height: 1.7;
  margin-bottom: 1.25em;
}

/* Title Case benefit lists: two columns, tick aligned to the first line. */
.checklist--cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 40px;
  max-width: 900px;
  margin-bottom: 1.25em;
}

.checklist--cols li::before {
  top: 12px;
}

@media (max-width: 640px) {
  .checklist--cols {
    grid-template-columns: 1fr;
  }
}

/* Testimonial card, for quotes set inside a content band. */
.quote-card {
  max-width: var(--measure);
  margin: 1.5em 0;
  padding: 28px 32px;
  background: var(--green-dark);
  color: var(--white);
}

.quote-card blockquote {
  margin: 0;
  font-style: italic;
  font-weight: 700;
  font-size: 15px;
  line-height: 23px;
}

.quote-card blockquote p {
  margin-bottom: 12px;
}

.quote-card .testimonial__cite {
  justify-content: flex-start;
}

/* --------------------------------------------------------- Link cards ---- */
.link-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
  gap: 18px;
  list-style: none;
  margin: 0 0 1.25em;
  padding: 0;
  max-width: var(--content-max);
}

.link-cards li {
  margin: 0;
}

.link-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 22px 24px;
  background: var(--white);
  border: 1px solid #dfe3e6;
  border-top: 3px solid var(--green);
  color: var(--ink);
}

.link-card__title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.2;
  color: var(--green-dark);
}

.link-card__title::after {
  content: " \2192";
}

.link-card__desc {
  font-size: 15px;
  line-height: 1.5;
}

.link-list {
  list-style: none;
  padding: 0;
}

.link-list a {
  font-family: var(--font-head);
  font-weight: 700;
}

.link-list a::after {
  content: " \2192";
}

/* ------------------------------------------------- Placeholders (review) -- */
/* Loud on purpose. build.py --launch refuses to finish while any remain. */
mark.todo {
  background: #fff1a8;
  color: #5c4400;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 2px;
}

/* ------------------------------------------------------------ Site map -- */
.sitemap-tree,
.sitemap-tree ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sitemap-tree {
  columns: 3 280px;
  column-gap: 48px;
}

.sitemap-tree > li {
  break-inside: avoid;
  margin-bottom: 24px;
}

.sitemap-tree > li > a {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 18px;
}

.sitemap-tree ul {
  margin-top: 8px;
  padding-left: 14px;
  border-left: 2px solid #e3e7ea;
}

.sitemap-tree ul ul {
  margin-bottom: 8px;
}

.sitemap-tree ul a {
  color: var(--ink);
}

.sitemap-tree ul a:hover {
  color: var(--green-dark);
}

.cs-summary {
  padding-bottom: 0;
}

.faq__toc {
  top: calc(var(--sticky-h) + 20px);
}

/* -------------------------------------------------------------- Footer -- */
/* Guarantee first, then a divider, then brand + NAP + the site map. */
.footer__guarantee {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.footer__shield {
  width: 210px;
  height: auto;
}

.footer__guarantee-title {
  color: var(--white);
  font-size: 30px;
  line-height: 1.1;
  margin: 0 0 0.6em;
}

.footer__guarantee-copy {
  max-width: var(--measure);
}

.footer__guarantee-copy p {
  color: rgb(255 255 255 / 88%);
  margin-bottom: 0.8em;
}

.footer__divider {
  border: 0;
  border-top: 1px solid rgb(255 255 255 / 22%);
  margin: clamp(36px, 4vw, 52px) 0;
}

.site-footer .footer__grid {
  display: grid;
  grid-template-columns: minmax(250px, 1.15fr) minmax(0, 3fr);
  gap: 40px clamp(32px, 4vw, 64px);
}

.site-footer .footer__about {
  grid-column: auto;
}

.footer__sitemap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 28px;
}

.footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.35;
}

.footer__col li {
  margin-bottom: 9px;
}

.footer__address {
  line-height: 1.4;
}

.footer__counties {
  margin-top: 1.25em;
  font-size: 14px;
  line-height: 1.5;
  color: rgb(255 255 255 / 80%);
  max-width: 24em;
}

.footer__contact li {
  align-items: flex-start;
}

.footer__contact svg {
  margin-top: 3px;
}

@media (max-width: 1024px) {
  .site-footer .footer__grid {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 640px) {
  .footer__guarantee {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .footer__shield {
    width: 150px;
  }

  .footer__guarantee-title {
    font-size: 24px;
  }
}

@media (max-width: 420px) {
  .footer__sitemap {
    grid-template-columns: 1fr;
  }
}

@media print {
  .menu-panel,
  .menu-overlay {
    display: none;
  }
}

/* Footnote that travels with a qualified number on a result card. */
.result-row__note {
  max-width: 62ch;
  margin: -0.4em 0 1.4em;
  font-size: 12px;
  line-height: 18px;
  color: rgb(255 255 255 / 72%);
}

/* ------------------------------------------- Nav v2 (2026-10-02) ------- */
/* No topbar. The full header stays put at the top while scrolling, at the
   same size, until it no longer fits; then it shows logo + Menu. */
:root {
  --sticky-h: var(--header-h);
}

.site-header {
  position: sticky;
  top: 0;
}

/* Services panel: 2 columns of services + the guarantee, right-aligned to the nav. */
.dd--mega {
  left: auto;
  right: var(--gutter);
  width: min(900px, calc(100% - (var(--gutter) * 2)));
  padding: 26px 28px;
}

.dd__inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 0 32px;
  align-items: start;
}

.dd-col a {
  padding: 9px 8px;
  font-size: 15px;
}

.dd-col .dd-top,
.dd--list .dd-h {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 15px;
  color: var(--green-dark);
}

.dd-col .dd-top {
  margin-bottom: 6px;
  border-bottom: 1px solid #e3e7ea;
}

.dd-guarantee {
  align-items: center;
  text-align: center;
  padding: 18px 20px 20px;
  background: #f4f7f5;
  border-top: 3px solid var(--green);
}

.dd__shield {
  width: 120px;
  height: auto;
  margin: 0 auto 12px;
}

.dd-guarantee p {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--ink);
}

.dd-guarantee strong {
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--navy);
}

.dd-col .dd-guarantee a,
.dd-guarantee a {
  display: inline;
  padding: 0;
  margin: 0;
  font-weight: 700;
  color: var(--green-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
}

.dd-guarantee a:hover {
  color: var(--green);
}

.dd--list .dd-h {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid #e3e7ea;
}

.dd--list .dd-indent {
  padding-left: 36px;
}

/* About opens toward the left edge of the button so it never clips. */
.mainnav > .has-dd:nth-child(3) > .dd {
  left: auto;
  right: -18px;
}

/* Menu button reads exactly like a nav label. */
.menu-btn {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: none;
  gap: 12px;
}

.menu-btn__label,
.menu-btn .menu-btn__label {
  font-size: 15px;
}

/* Burger bars at double weight. */
.burger {
  gap: 4px;
}

.burger i {
  width: 26px;
  height: 4px;
  border-radius: 2px;
}

/* Third tier: each panel slides over the one before it, inside the panel. */
.menu-nav .m-panel.is-under {
  transform: translateX(-28%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease, visibility 0s linear 0.38s;
}

/* Contact button on navy, and a phone link that responds. */
.btn--onnavy {
  background: transparent;
  color: var(--white);
  border: 2px solid var(--white);
  padding: 13px 28px;
}

.btn--onnavy:hover {
  background: var(--white);
  color: var(--navy);
}

.menu-panel .btn--onnavy:hover {
  color: var(--navy);
}

.menu-foot__tel {
  font-size: 17px;
  padding: 6px 0;
  transition: color var(--transition);
}

.menu-panel .menu-foot__tel:hover,
.menu-panel .menu-foot__tel:focus-visible {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 4px;
}


/* ------------------------------------------- Nav v3 (2026-10-02) ------- */
/* All three dropdowns are the full nav width: two link columns + guarantee. */
.mainnav > .has-dd {
  position: static;
}

.mainnav > .has-dd > .dd--mega,
.mainnav > .has-dd:nth-child(3) > .dd--mega {
  left: var(--gutter);
  right: var(--gutter);
  width: auto;
  max-width: var(--content-max);
  padding: 24px 28px 26px;
}

.dd--mega .dd__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
  gap: 0 32px;
  align-items: start;
}

.dd-item {
  position: relative;
}

.dd-col .dd-item > a,
.dd-col > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dd-col .dd-top--blank {
  display: block;
  padding: 9px 8px;
  margin-inline: -8px;
  line-height: 1.3;
  font-size: 15px;
}

.dd-arrow {
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
}

.has-fly:hover > a .dd-arrow,
.has-fly:focus-within > a .dd-arrow {
  opacity: 1;
}

.has-fly:hover > a,
.has-fly:focus-within > a {
  color: var(--green-dark);
  background: #f4f7f5;
}

/* Third tier: sub-services fly out beside their service, inside the panel. */
.dd-fly {
  position: absolute;
  top: -10px;
  left: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 290px;
  padding: 10px 0;
  background: var(--white);
  border-top: 3px solid var(--green);
  box-shadow: 0 14px 34px rgb(8 72 94 / 20%);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}

.has-fly:hover > .dd-fly,
.has-fly:focus-within > .dd-fly {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s;
}

.dd-col .dd-fly a {
  margin: 0;
  padding: 9px 20px;
}

.dd-col .dd-fly .dd-fly__all {
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--green-dark);
  border-bottom: 1px solid #e3e7ea;
  margin-bottom: 4px;
}

/* Guarantee: shield left, copy right, left-aligned. */
.dd--mega .dd-guarantee {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  text-align: left;
  padding: 22px 24px;
}

.dd--mega .dd__shield {
  width: 120px;
  margin: 0;
}

.dd-guarantee__copy p {
  font-size: 15px;
  line-height: 1.55;
}

.dd-guarantee .dd-guarantee__title {
  margin: 0 0 6px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.25;
  color: var(--navy);
}

/* Links read at the same size and weight as the sentence around them. */
.dd-col .dd-guarantee a,
.dd-guarantee a,
.dd-guarantee__copy a {
  font: inherit;
  color: var(--green-dark);
}

/* ------------------------------------------- Mobile menu fit --------- */
/* Head and buttons stay on screen; only the list area scrolls. */
.menu-panel {
  height: 100%;
  height: 100dvh;
  overflow: hidden;
}

.menu-nav {
  position: relative;
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.menu-nav .m-root,
.menu-nav .m-panel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menu-foot {
  flex: none;
  margin-top: 0;
  gap: 10px;
  padding: 16px 26px 20px;
  border-top: 1px solid rgb(255 255 255 / 16%);
}

.menu-foot__tel {
  font-size: 16px;
  padding: 4px 0;
}

/* Flyouts sit over the next column, top to bottom, so they stay inside the
   dropdown. The item stays positioned to the column, not the row. */
.dd--mega .dd-col {
  position: relative;
  min-height: 272px;
}

.dd--mega .dd-item {
  position: static;
}

.dd--mega .dd-fly {
  top: -24px;
  bottom: -26px;
  left: calc(100% + 16px);
  width: calc(100% + 26px);
  padding: 22px 0 12px;
  border-top: 0;
  border-left: 3px solid var(--green);
  box-shadow: -10px 0 24px rgb(8 72 94 / 12%);
}

/* Invisible bridge across the column gap so the pointer can travel over. */
.dd--mega .dd-fly::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 22px;
}

/* ------------------------------------------- Nav v4 (2026-10-02) ------- */
/* Quieter dropdowns: no green rules, only the nav's thin line, navy tops,
   a full-column shield, plain links, and a fade-only third tier. */
:root {
  --line: #e3e7ea;
}

.dd,
.mainnav > .has-dd > .dd--mega {
  border-top: 1px solid var(--line);
  box-shadow: 0 14px 30px rgb(8 72 94 / 12%);
}

/* Top items: navy, no underline rule. */
.dd-col .dd-top,
.dd-col .dd-top--blank {
  color: var(--navy);
  border-bottom: 0;
  margin-bottom: 2px;
}

/* Thin rules either side of the middle column. */
.dd--mega .dd__inner > .dd-col:nth-child(2) {
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding-inline: 24px;
}

/* Guarantee: no fill, no rule; the shield gets its own column. */
.dd--mega .dd-guarantee {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  padding: 4px 0 4px 4px;
  background: none;
  border: 0;
}

.dd--mega .dd__shield {
  width: 100%;
  max-width: 230px;
  justify-self: center;
}

.dd-col .dd-guarantee a,
.dd-guarantee a,
.dd-guarantee__copy a {
  text-decoration: none;
}

.dd-guarantee__copy a:hover {
  color: var(--green);
}

/* Third tier: same weight for every item, thin line only, fade in place. */
.dd--mega .dd-fly {
  left: calc(100% + 32px);
  width: 100%;
  border-left: 1px solid var(--line);
  border-top: 0;
  box-shadow: none;
  transform: none;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}

.has-fly:hover > .dd-fly,
.has-fly:focus-within > .dd-fly {
  transform: none;
  transition: opacity 0.18s ease, visibility 0s;
}

.dd--mega .dd-fly::before {
  width: 34px;
}

.dd-col .dd-fly .dd-fly__all {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--navy);
  border-bottom: 0;
  margin-bottom: 0;
}

/* Middle-column flyouts cover the shield half of the guarantee exactly:
   past the 1px rule and the 32px gap, one track minus half the 28px gap. */
.dd--mega .dd__inner > .dd-col:nth-child(2) .dd-fly {
  left: calc(100% + 33px);
  width: calc(100% - 12px);
}

/* ------------------------------------------- Nav v5 (2026-10-02) ------- */
/* Guarantee sits centered in its half of the dropdown. */
.dd--mega .dd-guarantee {
  align-self: stretch;
  align-content: center;
  justify-content: center;
  grid-template-columns: minmax(0, 230px) minmax(0, 260px);
}

/* One weight for every item in the second and third tiers: the heavier
   Roboto the top items used before. */
.dd-col .dd-top,
.dd-col .dd-top--blank,
.dd-col .dd-fly .dd-fly__all,
.dd-col .dd-fly a,
.dd-col .dd-item > a {
  font-family: var(--font-head);
  font-weight: 800;
}

.dd-col .dd-top {
  color: var(--navy);
}

/* Mobile menu: second and third tier items share that same weight. The root
   list keeps its uppercase labels. */
.menu-nav .m-panel .m-item,
.menu-nav .m-panel .m-sub a {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
}

.menu-nav .m-panel .m-sub a {
  padding: 12px 26px 12px 40px;
}

/* Third tier panel uses the same gray as the thin lines. */
.dd--mega .dd-fly {
  background: var(--line);
}

/* Hover = text colour only, everywhere in the menus. No background fills. */
.dd--list a:hover,
.dd-col a:hover,
.dd a[aria-current="page"],
.has-fly:hover > a,
.has-fly:focus-within > a,
.dd--mega .dd-fly a:hover {
  background: none;
  color: var(--green-dark);
}

.m-item:hover,
.m-sub a:hover,
.m-back:hover {
  background: none;
  color: var(--green);
}

.m-back {
  background: none;
}


/* Who We Help group inside the Services dropdown's second column. */
.dd-col .dd-top--group {
  margin-top: 14px;
}

/* ---------------------------------------- Footer guarantee (2026-10-02) - */
/* Shield at its original-site size (470px), text column the same width,
   72px between them, 120px above and below the band. */
.site-footer {
  padding-top: 0;
}

.footer__guarantee {
  grid-template-columns: repeat(2, minmax(0, 470px));
  justify-content: center;
  gap: 72px;
  padding-block: 120px;
}

.footer__shield {
  width: 100%;
  max-width: 470px;
}

.footer__guarantee-copy {
  max-width: 470px;
}

.footer__divider {
  margin-top: 0;
}

@media (max-width: 1024px) {
  .footer__guarantee {
    gap: 48px;
  }
}

@media (max-width: 640px) {
  .footer__guarantee {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding-block: 72px;
  }

  .footer__shield {
    width: min(280px, 100%);
  }
}

/* ------------------------------------------- Footer v3 (2026-10-02) ---- */
/* Three columns with room to breathe: brand + contact, Services, Company. */
.site-footer .footer__grid {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 0.8fr);
  gap: 48px clamp(40px, 6vw, 96px);
  padding: clamp(24px, 4vw, 56px) clamp(0px, 3vw, 48px) clamp(40px, 5vw, 72px);
}

.footer__about {
  max-width: 470px;
}

.footer__col ul {
  font-size: 15px;
}

.footer__col li {
  margin-bottom: 11px;
}

.footer__counties a {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / 35%);
  text-underline-offset: 3px;
}

.footer__counties a:hover {
  color: var(--green);
  text-decoration-color: currentColor;
}

.footer__bottom {
  margin-top: 0;
  padding-inline: clamp(0px, 3vw, 48px);
}

@media (max-width: 1024px) {
  .site-footer .footer__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .site-footer .footer__about {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .site-footer .footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Text is always left-aligned unless asked otherwise. */
.footer__guarantee,
.footer__bottom,
.menu-foot__tel,
.dd-guarantee {
  text-align: left;
}

@media (max-width: 640px) {
  .footer__guarantee {
    justify-items: start;
    text-align: left;
  }
}

@media (max-width: 768px) {
  .footer__bottom {
    align-items: flex-start;
    text-align: left;
  }
}

/* ---------------------------------------- Hovers on navy (2026-10-02) - */
/* Text stays white on navy (~10:1). Brand green shows as a line, which only
   needs 3:1 to read as an indicator. */

/* Mobile menu, every page: a green underline grows under the label. */
.menu-panel .m-label,
.footer__col .f-label,
.site-footer .f-link .f-label {
  background-image: linear-gradient(var(--green), var(--green));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  padding-bottom: 3px;
  transition: background-size 0.25s ease;
}

.menu-panel .m-item:hover,
.menu-panel .m-sub a:hover,
.menu-panel .m-item:focus-visible,
.menu-panel .m-sub a:focus-visible {
  color: var(--white);
}

.menu-panel .m-item:hover .m-label,
.menu-panel .m-sub a:hover .m-label,
.menu-panel .m-item:focus-visible .m-label,
.menu-panel .m-sub a:focus-visible .m-label {
  background-size: 100% 2px;
}

/* Footer, every page: the same growing underline plus the site's chevron
   sliding in after the link. */
.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--white);
}

.footer__col a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.footer__col a::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--green);
  border-top: 2px solid var(--green);
  transform: translateX(-6px) rotate(45deg);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.25s ease;
}

.footer__col a:hover::after,
.footer__col a:focus-visible::after {
  opacity: 1;
  transform: translateX(0) rotate(45deg);
}

.footer__col a:hover .f-label,
.footer__col a:focus-visible .f-label {
  background-size: 100% 2px;
}

/* Contact, county and legal links: underline turns brand green. */
.footer__about a:hover,
.footer__legal a:hover {
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* ---------------------------------------- Main nav hover (2026-10-02) - */
/* The growing brand-green line on the white nav, every page.
   Text keeps its colour; the line grows on hover, stays full while that
   dropdown or flyout is open, and marks the current page. */
.n-label {
  background-image: linear-gradient(var(--green), var(--green));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  padding-bottom: 4px;
  transition: background-size 0.25s ease;
}

.navcell__label:hover,
.navcell__label[aria-current="page"],
.has-dd:hover > .navcell__label,
.has-dd:focus-within > .navcell__label {
  color: var(--navy);
}

.navcell__label:hover .n-label,
.navcell__label:focus-visible .n-label,
.navcell__label[aria-current="page"] .n-label,
.has-dd:hover > .navcell__label .n-label,
.has-dd:focus-within > .navcell__label .n-label {
  background-size: 100% 2px;
}

.dd-col a:hover,
.dd a[aria-current="page"],
.has-fly:hover > a,
.has-fly:focus-within > a,
.dd--mega .dd-fly a:hover {
  color: inherit;
}

.dd-col a {
  color: var(--ink);
}

.dd-col .dd-top {
  color: var(--navy);
}

.dd-col a:hover .n-label,
.dd-col a:focus-visible .n-label,
.dd a[aria-current="page"] .n-label,
.has-fly:hover > a .n-label,
.has-fly:focus-within > a .n-label {
  background-size: 100% 2px;
}

/* Footer contact and legal links use the same hybrid as the link columns. */
.site-footer .f-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.site-footer .f-link::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--green);
  border-top: 2px solid var(--green);
  transform: translateX(-6px) rotate(45deg);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.25s ease;
}

.site-footer .f-link:hover::after,
.site-footer .f-link:focus-visible::after {
  opacity: 1;
  transform: translateX(0) rotate(45deg);
}

.site-footer .f-link:hover .f-label,
.site-footer .f-link:focus-visible .f-label {
  background-size: 100% 2px;
}

.footer__about .f-link:hover,
.footer__legal .f-link:hover {
  text-decoration: none;
}

/* ---------------------------- Compact nav + Mollie-style buttons (test) - */
/* 2026-10-03 trial of mollie.com proportions: 54px nav, 14px nav text,
   25px logo, pill buttons (34px in the nav, 50px on the page, 16px text). */
:root {
  --header-h: 54px;
  --radius-pill: 999px;
}

.site-header__inner {
  height: var(--header-h);
}

.site-header__logo img,
.stickybar__logo img {
  width: auto;
  height: 25px;
}

.mainnav,
.navcell__label,
a.navcell,
.menu-btn,
.menu-btn__label,
.menu-btn .menu-btn__label {
  font-size: 14px;
}

.mainnav {
  gap: 32px;
}

/* Nav CTA: 34px pill. */
.navcell__cta,
.mainnav .navcell__cta,
.mainnav .btn.navcell__cta {
  min-height: 34px;
  height: 34px;
  padding: 0 16px;
  font-size: 14px;
  line-height: 1;
  border-radius: var(--radius-pill);
}

/* Page buttons: 50px pill, 16px text. */
.btn {
  min-height: 50px;
  padding: 16px 24px;
  font-size: 16px;
  line-height: 18px;
  border-radius: var(--radius-pill);
}

.btn--outline,
.btn--onnavy {
  padding: 14px 22px;
}

@media (max-width: 768px) {
  :root {
    --header-h: 54px;
  }

  .site-header__logo img {
    width: auto;
    height: 25px;
  }
}

/* Dropdown guarantee: copy left, shield right (trial). */
.dd--mega .dd-guarantee {
  grid-template-columns: minmax(0, 260px) minmax(0, 230px);
}

.dd--mega .dd__shield {
  order: 2;
}

/* Thinner menu icon for the compact nav (2026-10-03). */
.burger {
  gap: 5px;
}

.burger i {
  width: 22px;
  height: 2px;
  border-radius: 1px;
}

/* Mollie's corners (2026-10-03): a large radius shaped by
   corner-shape: superellipse(1.5), a squircle rather than a full pill.
   Browsers without corner-shape get a plain radius that meets the curve at
   45 degrees: 18px on 50px buttons, 12px on the 34px nav button. */
.btn {
  border-radius: 18px;
}

.mainnav .btn.navcell__cta {
  border-radius: 12px;
}

@supports (corner-shape: superellipse(1.5)) {
  .btn {
    border-radius: 140px;
    corner-shape: superellipse(1.5);
  }

  .mainnav .btn.navcell__cta {
    border-radius: 55px;
    corner-shape: superellipse(1.5);
  }
}

/* ------------------------------ Nav layout + alignment (2026-10-03) ---- */
/* Links start beside the logo (mollie layout); buttons stay right. */
.site-header__inner {
  gap: 56px;
}

.mainnav {
  flex: 1;
  margin-left: 0;
  align-items: center;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.mainnav .btn.navcell__cta--login {
  padding: 0 14px;
  border-width: 2px;
}

/* One text line: labels, carets and button text share the same centre. */
.navcell,
.navcell__label,
a.navcell {
  line-height: 1;
}

.navcell__label {
  height: 100%;
  align-items: center;
}

/* The growing line hangs below the label without pushing the text up. */
.mainnav .n-label {
  position: relative;
  padding-bottom: 0;
  background: none;
}

.mainnav .n-label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  height: 2px;
  width: 0;
  background: var(--green);
  transition: width 0.25s ease;
}

.mainnav .navcell__label:hover .n-label::after,
.mainnav .navcell__label:focus-visible .n-label::after,
.mainnav .navcell__label[aria-current="page"] .n-label::after,
.mainnav .has-dd:hover > .navcell__label .n-label::after,
.mainnav .has-dd:focus-within > .navcell__label .n-label::after {
  width: 100%;
}

/* Dropdown links keep their own growing line; the rules above are scoped to
   the top-level labels only. */
.mainnav .dd .n-label {
  position: static;
  padding-bottom: 3px;
  background-image: linear-gradient(var(--green), var(--green));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 0.25s ease;
}

.mainnav .dd .n-label::after {
  content: none;
}

/* Caret: centred on the text, not dropped below it. */
.caret {
  width: 6px;
  height: 6px;
  margin-top: -3px;
  transform: rotate(45deg);
}

.has-dd:hover .caret,
.has-dd:focus-within .caret {
  margin-top: 3px;
  transform: rotate(225deg);
}

/* ------------------------------------ Nav buttons + spacing (2026-10-03) */
/* Login: white border until hover. Free Quote: navy at rest, green on hover. */
.mainnav .btn.navcell__cta--login {
  border-color: var(--white);
}

.mainnav .btn.navcell__cta--login:hover,
.mainnav .btn.navcell__cta--login:focus-visible {
  border-color: var(--navy);
}

.mainnav .btn.btn--primary.navcell__cta {
  background: var(--navy);
  color: var(--white);
}

.mainnav .btn.btn--primary.navcell__cta:hover,
.mainnav .btn.btn--primary.navcell__cta:focus-visible {
  background: var(--green-dark);
  color: var(--white);
}

/* Dropdown items match the top-level nav: Roboto 800, 14px, navy. */
.dd-col a,
.dd-col .dd-top,
.dd-col .dd-top--blank,
.dd-col .dd-fly a,
.dd-col .dd-fly .dd-fly__all,
.dd-col .dd-item > a {
  font-size: 14px;
  color: var(--navy);
}

/* Letter spacing: -0.1px across the nav, its buttons and the dropdowns;
   -0.2px on page buttons and footer link columns. */
.mainnav,
.navcell__label,
a.navcell,
.mainnav .btn.navcell__cta,
.dd-col a,
.dd-col .dd-top,
.dd-col .dd-fly a,
.menu-btn {
  letter-spacing: -0.1px;
}

.btn {
  letter-spacing: -0.2px;
}

.footer__col a {
  letter-spacing: -0.2px;
}

/* Text stays navy on hover; the growing line is the only change. */
.dd-col a:hover,
.dd-col a:focus-visible,
.dd a[aria-current="page"],
.has-fly:hover > a,
.has-fly:focus-within > a,
.dd--mega .dd-fly a:hover {
  color: var(--navy);
}

/* ===================================================== Hero v2 (2026-10-03)
   Mollie-inspired: eyebrow, H1 and an optional sub-line on the left; an
   optional paragraph and buttons on the right, bottom-aligned with the H1;
   an optional image below with squircle corners. Left-aligned at every width.
   ========================================================================== */
.hero2 {
  padding-block: clamp(56px, 7.5vw, 120px) clamp(48px, 5vw, 72px);
}

.hero2__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 32px clamp(40px, 6vw, 96px);
  align-items: end;
}

.hero2__eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
}

.hero2__title {
  margin: 0;
  max-width: 13em;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(42px, 5.4vw, 82px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--navy);
}

.hero2__sub {
  margin: 14px 0 0;
  max-width: 30em;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: rgb(0 0 0 / 62%);
}

.hero2__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: -0.2px;
  color: rgb(0 0 0 / 70%);
}

.hero2__side .btn-row {
  margin-top: 20px;
  gap: 12px;
}

.hero2__media {
  margin-top: clamp(40px, 4.5vw, 64px);
}

.hero2__media img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 12px;
}

@supports (corner-shape: superellipse(1.5)) {
  .hero2__media img {
    border-radius: 16px;
    corner-shape: superellipse(1.5);
  }
}

/* Smaller screens: stack, stay left-aligned. */
@media (max-width: 900px) {
  .hero2__grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .hero2__side {
    max-width: 34em;
  }

  .hero2__media img {
    aspect-ratio: 4 / 3;
  }
}

/* The hero animates in like the old one did. */
@media (prefers-reduced-motion: no-preference) {
  .motion .hero2__grid > * > * {
    opacity: 0;
    transform: translateY(26px);
  }

  .motion .hero-in > * > * {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
}

/* --------------------------------- Hero v2: home content (2026-10-03) -- */
/* No max widths on the left column; it uses the full column. */
.hero2__title,
.hero2__sub {
  max-width: none;
}

/* Eyebrow carries the brand line and the live site's colours: navy text,
   green arrow. It is the page's H1. */
.hero2__eyebrow {
  font-size: 15px;
  letter-spacing: 0.04em;
}

.hero2__eyebrow .arrow {
  color: var(--green);
}

/* "Your answer for" + a rotating benefit, in the large display size. */
.hero2__display {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(38px, 4.6vw, 68px);
  line-height: 1.04;
  color: var(--navy);
}

/* Room for two lines so the layout never jumps as the phrase changes. */
.hero2__rot {
  display: block;
  min-height: 2.08em;
  color: var(--green);
}

/* Defocus morph (RHR mockup, effect 3): blur out, swap, resolve. */
.defocus {
  display: inline-block;
  transition: filter 0.36s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.36s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.defocus.blur {
  filter: blur(12px);
  opacity: 0.35;
}

.hero2__side .hero2__text + .hero2__text {
  margin-top: 12px;
}

/* Hero display line ("Your answer for…") at regular weight. */
.hero2__display {
  font-weight: 400;
}

/* ------------------------------------------ Hero v2 refinements (10-03) - */
/* H1 brand line: capitalised words, not uppercase; tight tracking. */
.hero2__eyebrow {
  text-transform: capitalize;
  letter-spacing: -0.2px;
}

/* The rotating phrase is the same navy as the rest of the sentence. */
.hero2__rot {
  min-height: 0;
  color: inherit;
}

/* Mollie insets its hero text 40px from the image edge on each side. */
@media (min-width: 901px) {
  .hero2__grid {
    padding-inline: calc(var(--gutter) + clamp(0px, 2.5vw, 40px));
  }
}

/* Stacked: full width (less the side padding), tighter gap under the line. */
@media (max-width: 900px) {
  .hero2__side {
    max-width: none;
  }

  .hero2__grid {
    row-gap: 20px;
  }
}

/* Word rotator: a clipped slot sized by JS to the tallest phrase. */
.rotator {
  position: relative;
  display: block;
  overflow: hidden;
}

.rot-item {
  display: block;
}

.rot-probe {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  visibility: hidden;
}

.rotator[data-effect="slide"] .rot-item {
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}

.rotator[data-effect="slide"] .rot-item.is-enter,
.rotator[data-effect="slide"] .rot-item.is-leave {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

.rotator[data-effect="slide"] .rot-item.is-enter {
  transform: translateY(100%);
  opacity: 0;
}

.rotator[data-effect="slide"] .rot-item.is-leave {
  transform: translateY(-100%);
  opacity: 0;
}

.rotator[data-effect="defocus"] .rot-item {
  transition: filter 0.36s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.36s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.rotator[data-effect="defocus"] .rot-item.is-blur {
  filter: blur(12px);
  opacity: 0.35;
}

/* ======================================== Fixed sizes per breakpoint (10-03)
   The hero and footer used viewport-scaled sizes (clamp + vw), which grow and
   shrink continuously. The rest of the site steps at breakpoints, so these do
   too. Desktop (1200+) first, then 901-1199, 641-900, 640 and below.
   ========================================================================== */
.hero2 {
  padding-block: 120px 72px;
}

.hero2__grid {
  column-gap: 96px;
}

.hero2__title {
  font-size: 82px;
}

.hero2__display {
  font-size: 80px;
  letter-spacing: -5.5px;
}

.hero2__sub {
  font-size: 28px;
}

.hero2__media {
  margin-top: 64px;
}

.page-hero--aeo {
  padding-block: 72px 56px;
}

.footer__divider {
  margin-bottom: 52px;
}

.site-footer .footer__grid {
  column-gap: 96px;
  padding: 56px 48px 72px;
}

.footer__bottom {
  padding-inline: 48px;
}

@media (min-width: 901px) {
  .hero2__grid {
    padding-inline: calc(var(--gutter) + 40px);
  }
}

@media (max-width: 1199px) {
  .hero2 {
    padding-block: 96px 64px;
  }

  .hero2__grid {
    column-gap: 64px;
  }

  .hero2__title {
    font-size: 64px;
  }

  .hero2__display {
    font-size: 58px;
    letter-spacing: -4px;
  }

  .hero2__sub {
    font-size: 24px;
  }

  .hero2__media {
    margin-top: 56px;
  }

  .page-hero--aeo {
    padding-block: 64px 48px;
  }

  .footer__divider {
    margin-bottom: 44px;
  }

  .site-footer .footer__grid {
    column-gap: 64px;
    padding: 48px 24px 56px;
  }

  .footer__bottom {
    padding-inline: 24px;
  }
}

@media (min-width: 901px) and (max-width: 1199px) {
  .hero2__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 290px);
    column-gap: 48px;
    padding-inline: calc(var(--gutter) + 24px);
  }
}

@media (max-width: 900px) {
  .hero2 {
    padding-block: 72px 56px;
  }

  .hero2__title {
    font-size: 52px;
  }

  .hero2__display {
    font-size: 52px;
    letter-spacing: -3.6px;
  }

  .hero2__sub {
    font-size: 22px;
  }

  .hero2__media {
    margin-top: 48px;
  }

  .page-hero--aeo {
    padding-block: 56px 40px;
  }
}

@media (max-width: 640px) {
  .hero2 {
    padding-block: 56px 48px;
  }

  .hero2__title {
    font-size: 42px;
  }

  .hero2__display {
    font-size: 40px;
    letter-spacing: -2.8px;
  }

  .hero2__sub {
    font-size: 20px;
  }

  .hero2__media {
    margin-top: 40px;
  }

  .page-hero--aeo {
    padding-block: 48px 36px;
  }

  .footer__divider {
    margin-bottom: 36px;
  }

  .site-footer .footer__grid {
    column-gap: 32px;
    padding: 36px 0 48px;
  }

  .footer__bottom {
    padding-inline: 0;
  }
}

/* Hero text in the site black (--ink, pure black); the arrow stays green. */
.hero2__title,
.hero2__display {
  color: var(--ink);
}

/* v87: eyebrows back to navy site-wide (white on dark bands). */
.hero2__eyebrow {
  color: var(--navy);
}

/* ============================================= Logo strip (2026-10-03) ===
   Mollie's pattern with our colour logos: a slow marquee with faded edges.
   The whole band is one link to Results; on hover the logos blur and dim
   and "See our results" appears in the middle.
   ========================================================================== */
.logo-strip-band {
  padding-block: 48px;
}

.logo-strip {
  position: relative;
  display: block;
  color: var(--ink);
}

.logo-strip__viewport {
  display: block;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12.5%, #000 87.5%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 12.5%, #000 87.5%, transparent 100%);
}

.logo-strip .logos__track {
  display: flex;
  align-items: center;
  gap: 80px;
  width: max-content;
  height: 64px;
  animation: logo-scroll 60s linear infinite;
  transition: filter 0.35s ease, opacity 0.35s ease;
}

.logo-strip .logos__track img {
  flex: none;
  width: auto;
  height: 48px;
  object-fit: contain;
}

.logo-strip__cta {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.2px;
  color: var(--ink);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.logo-strip__chev {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
}

.logo-strip:hover .logos__track,
.logo-strip:focus-visible .logos__track {
  filter: blur(10px);
  opacity: 0.4;
}

.logo-strip:hover .logo-strip__cta,
.logo-strip:focus-visible .logo-strip__cta {
  opacity: 1;
}

.logo-strip:focus-visible {
  outline-offset: 6px;
}

@media (max-width: 640px) {
  .logo-strip .logos__track {
    gap: 48px;
    height: 52px;
  }

  .logo-strip .logos__track img {
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-strip .logos__track {
    animation: none;
  }
}

/* Logo strip sizing: our logo files carry built-in margins, so they run a
   little taller than Mollie's to read at the same visual size. The band sits
   closer to the hero image above it. */
.logo-strip-band {
  padding-block: 8px 48px;
}

.logo-strip .logos__track {
  height: 72px;
}

.logo-strip .logos__track img {
  height: 60px;
}

/* ===================================== Dropdown motion (2026-10-03) =====
   Mollie-smooth: the panel expands down from the nav line (clip reveal, no
   slide, so no gap ever opens under the cursor). An invisible bridge covers
   the seam, and closing waits 180ms so a cursor passing over the edge never
   makes the panel blink shut and reopen.
   ========================================================================== */
.dd {
  transform: none;
  clip-path: inset(0 -60px 100% -60px);
  opacity: 0;
  visibility: hidden;
  transition: clip-path 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0.18s,
    opacity 0.2s ease 0.18s,
    visibility 0s linear 0.46s;
}

.has-dd:hover > .dd,
.has-dd:focus-within > .dd {
  transform: none;
  clip-path: inset(0 -60px -80px -60px);
  opacity: 1;
  visibility: visible;
  transition: clip-path 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.18s ease,
    visibility 0s;
}

/* Bridge: extends each nav item's hover area down over the seam. */
.has-dd > .navcell__label {
  position: relative;
}

.has-dd > .navcell__label::before {
  content: "";
  position: absolute;
  left: -12px;
  right: -12px;
  top: 100%;
  height: 12px;
}

.dd::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .dd,
  .has-dd:hover > .dd,
  .has-dd:focus-within > .dd {
    transition: none;
  }
}

/* Logo strip: a third less space between logos (80 -> 53px; 48 -> 32px). */
.logo-strip .logos__track {
  gap: 53px;
}

@media (max-width: 640px) {
  .logo-strip .logos__track {
    gap: 32px;
  }
}

/* ---------------------------------- Dropdown motion v2 (2026-10-03) ----
   clip-path also clips hover, so while the panel unrolled its lower part
   could not be hovered and a fast move down landed in dead space. Now the
   panel box itself is never clipped: it is fully hoverable the moment it
   opens. Only the white backing (::after) and the contents unroll. */
.dd,
.has-dd:hover > .dd,
.has-dd:focus-within > .dd {
  clip-path: none;
  background: transparent;
  border-top: 0;
  box-shadow: none;
}

.dd {
  transition: opacity 0.2s ease 0.18s, visibility 0s linear 0.46s;
}

.has-dd:hover > .dd,
.has-dd:focus-within > .dd {
  transition: opacity 0.15s ease, visibility 0s;
}

.dd::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 14px 30px rgb(8 72 94 / 12%);
  clip-path: inset(0 -60px 100% -60px);
  transition: clip-path 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0.18s;
}

.dd > * {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0.18s;
}

.has-dd:hover > .dd::after,
.has-dd:focus-within > .dd::after {
  clip-path: inset(0 -60px -80px -60px);
  transition: clip-path 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.has-dd:hover > .dd > *,
.has-dd:focus-within > .dd > * {
  clip-path: inset(0 -400px -400px -400px);
  transition: clip-path 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .dd::after,
  .dd > * {
    transition: none;
  }
}

/* Hover rule (2026-10-04): hover effects only on links, buttons, the nav,
   the footer and the logo band. Cards, result rows and other blocks stay
   still under the cursor. */

/* ====================================== Type scale tokens (PROPOSAL) =====
   2026-10-04. Mollie proportions in our fonts (Roboto headings, Noto Sans
   body), fixed sizes per breakpoint. Defined as classes so the scale can be
   reviewed on /styleguide/ before it is applied to real headings.
   Desktop 1200+ / 901-1199 / 641-900 / 640 and below.
   ========================================================================== */
.t-display,
.t-h2,
.t-h3,
.t-h4 {
  font-family: var(--font-head);
  color: var(--ink);
  margin: 0;
}

.t-display { font-size: 80px; line-height: 1.04; letter-spacing: -5.5px; font-weight: 400; }
.t-h2      { font-size: 56px; line-height: 1.08; letter-spacing: -2.2px; font-weight: 400; }
.t-h3      { font-size: 32px; line-height: 1.2;  letter-spacing: -1px;   font-weight: 400; }
.t-h4      { font-size: 22px; line-height: 1.25; letter-spacing: -0.4px; font-weight: 500; }
.t-eyebrow { font-family: var(--font-head); font-size: 15px; line-height: 1.3; letter-spacing: -0.2px; font-weight: 700; text-transform: capitalize; color: var(--navy); margin: 0; }
.t-lede    { font-size: 20px; line-height: 1.4;  letter-spacing: -0.4px; color: rgb(0 0 0 / 72%); margin: 0; }
.t-body    { font-size: 18px; line-height: 1.55; letter-spacing: -0.2px; color: var(--ink); margin: 0; }
.t-small   { font-size: 14px; line-height: 1.45; letter-spacing: -0.1px; color: rgb(0 0 0 / 65%); margin: 0; }

@media (max-width: 1199px) {
  .t-display { font-size: 58px; letter-spacing: -4px; }
  .t-h2      { font-size: 48px; letter-spacing: -1.9px; }
  .t-h3      { font-size: 28px; letter-spacing: -0.9px; }
}

@media (max-width: 900px) {
  .t-display { font-size: 52px; letter-spacing: -3.6px; }
  .t-h2      { font-size: 40px; letter-spacing: -1.6px; }
  .t-h3      { font-size: 26px; letter-spacing: -0.8px; }
  .t-h4      { font-size: 20px; }
  .t-lede    { font-size: 18px; }
  .t-body    { font-size: 17px; }
}

@media (max-width: 640px) {
  .t-body    { font-size: 16px; }
  .t-display { font-size: 40px; letter-spacing: -2.8px; }
  .t-h2      { font-size: 32px; letter-spacing: -1.3px; }
  .t-h3      { font-size: 24px; letter-spacing: -0.7px; }
}

/* v75: guarantee moves to a white band above the navy footer, color shield, no divider. */
.footer__guarantee-band { background: var(--white); color: var(--ink); }
.footer__guarantee-band .footer__guarantee-title { color: var(--ink); }
.footer__guarantee-band .footer__guarantee-copy p { color: var(--muted); }
.site-footer .footer__grid { padding-top: 96px; }
@media (max-width: 900px) { .site-footer .footer__grid { padding-top: 72px; } }
@media (max-width: 640px) { .site-footer .footer__grid { padding-top: 56px; } }

/* v80: header logo inlined, site green (#007B00), lighter logo green (#08A84B) on hover. Replaces the opacity dim. */
.site-header__logo { color: var(--green-dark); }
.site-header__logo-svg { display: block; width: auto; height: 25px; }
.site-header__logo:hover, .site-header__logo:focus-visible { color: #08a84b; }
@media (prefers-reduced-motion: no-preference) { .site-header__logo { transition: color 0.3s ease; } }

/* v140: below the full nav (900px) the Login and Free Quote buttons stay on
   the bar beside Menu; the rest of the nav moves into the menu panel. */
@media (max-width: 900px) {
  .site-header__inner {
    position: relative;
    gap: 16px;
  }

  .mainnav {
    display: flex;
    flex: 1;
    justify-content: flex-end;
    gap: 0;
  }

  .mainnav > :not(.nav-actions) {
    display: none;
  }

  .nav-actions {
    gap: 8px;
  }

  /* The sign-in panel hangs from the header's right gutter, never off screen. */
  .site-header .login-dd {
    position: static;
  }

  .site-header .login-panel {
    right: var(--gutter, 24px);
    width: min(380px, calc(100vw - 2 * var(--gutter, 24px)));
    top: calc(100% + 4px);
  }
}

/* Phones (under 460px): both buttons plus "Menu" don't fit. Free Quote stays,
   Login moves off the bar (the portal isn't live yet), and Menu shows as the
   icon only; its label stays for screen readers. */
@media (max-width: 459px) {
  .nav-actions .login-dd {
    display: none;
  }

  .site-header .menu-btn {
    min-width: 40px;
    min-height: 40px;
    justify-content: flex-end;
  }

  .site-header .menu-btn__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (max-width: 359px) {
  .site-header__inner {
    gap: 10px;
  }

  .site-header__logo-svg {
    height: 21px;
    width: auto;
  }
}

/* v154: announcement banner above the header, every page. Left-aligned; the
   label gets the site's growing underline and the chevron slides on hover. */
.announce {
  background: var(--green-dark, #007B00);
  color: var(--white);
}

.announce .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  text-align: center;
}

.announce__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--white);
  text-decoration: none;
  font: 700 14px/1.3 var(--font-head);
  letter-spacing: -0.1px;
}

.announce__label {
  background-image: linear-gradient(var(--white), var(--white));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  padding-bottom: 2px;
  transition: background-size 0.25s ease;
}

.announce__chev {
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--white);
  border-top: 2px solid var(--white);
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}

.announce__link:hover,
.announce__link:focus-visible {
  color: var(--white);
}

.announce__link:hover .announce__label,
.announce__link:focus-visible .announce__label {
  background-size: 100% 1px;
}

.announce__link:hover .announce__chev,
.announce__link:focus-visible .announce__chev {
  transform: translateX(3px) rotate(45deg);
}

/* v156: Contact replaces Login on the bar. Contact is wider than Login was, so under
   480px only Free Quote stays (measured: the logo starts to shrink at 460px). */
@media (max-width: 479px) {
  .nav-actions .navcell__cta--contact {
    display: none;
  }
}

.site-header__logo {
  flex-shrink: 0;
}