/* ==========================================================================
   Monssieur Premium Turnover
   Client-facing design system
   --------------------------------------------------------------------------
   Navy + champagne gold. Fraunces (display) / Inter (text).
   Shared by the WordPress block theme and the static preview.
   ========================================================================== */

:root {
  /* Brand */
  --navy: #254760;
  --navy-900: #16293a;
  --navy-800: #1a3347;
  --navy-700: #2b5370;
  --navy-600: #37678a;
  --gold: #c2a05a;
  --gold-600: #a9863f;
  --gold-400: #d9bd80;
  --gold-100: #f1e7d2;

  /* Neutrals */
  --white: #ffffff;
  --cream: #f8f5ef;
  --sand: #efe9dd;
  --ink: #1b2733;
  --ink-soft: #3d4a57;
  --muted: #6c7885;
  --line: rgba(37, 71, 96, 0.12);
  --line-strong: rgba(37, 71, 96, 0.22);

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Handwriting, used only for the signed motto. */
  --font-hand: "Caveat", "Bradley Hand", "Segoe Script", cursive;

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  /* The shell grows with the window instead of locking to a 1200px design;
     below 1440 it is byte for byte what it was. */
  --container: clamp(1200px, 84vw, 1560px);
  --container-narrow: 820px;

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Elevation, whispers only */
  --shadow-sm: 0 1px 2px rgba(22, 41, 58, 0.06), 0 2px 8px rgba(22, 41, 58, 0.05);
  --shadow-md: 0 8px 30px rgba(22, 41, 58, 0.09);
  --shadow-lg: 0 24px 70px rgba(22, 41, 58, 0.16);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 150ms;
  --t-med: 280ms;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--navy);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease);
}

a:hover {
  color: var(--gold-600);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--navy-800);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-4);
  font-optical-sizing: auto;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 560;
  letter-spacing: -0.025em;
}

h2 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 560;
}

h3,
h2.is-style-h3 {
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

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

strong {
  font-weight: 600;
  color: var(--navy-800);
}

::selection {
  background: var(--gold-100);
  color: var(--navy-900);
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

/* The hidden attribute must win over component display rules (.field is
   flex), or toggled form fields stay visible. */
[hidden] {
  display: none !important;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.container--narrow {
  max-width: var(--container-narrow);
}

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

.section--tight {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.section--cream {
  background: var(--cream);
}

.section--sand {
  background: var(--sand);
}

.section--navy {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.86);
}

.section--navy h1,
.section--navy h2,
.section--navy h3 {
  color: var(--white);
}

/* Cards keep their light surfaces on a navy band, so their headings have to
   stay dark — the white heading colour above would render them invisible. */
.section--navy .card h1,
.section--navy .card h2,
.section--navy .card h3,
.section--navy .card h4 {
  color: var(--ink);
}

.stack > * + * {
  margin-top: var(--space-4);
}

.grid {
  display: grid;
  gap: var(--space-6);
}

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

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

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

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

@media (max-width: 620px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Typography helpers
   -------------------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin: 0 0 var(--space-5);
}

.eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: var(--gold);
}

.eyebrow--center {
  justify-content: center;
}

.eyebrow--center::after {
  content: "";
  width: 2rem;
  height: 1px;
  background: var(--gold);
}

.section--navy .eyebrow {
  color: var(--gold-400);
}

/* .lede sets its own colour, so a navy band has to override it or the
   supporting line ends up dark-on-navy. Scoped to .lede only: card
   paragraphs sit on light backgrounds and must keep their dark text. */
.section--navy .lede {
  color: rgba(255, 255, 255, 0.72);
}

.lede {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 46ch;
}

.muted {
  color: var(--muted);
}

.text-center {
  text-align: center;
}

.measure {
  max-width: 62ch;
}

.measure--center {
  margin-inline: auto;
}

.gold-rule {
  width: 3rem;
  height: 2px;
  background: var(--gold);
  border: 0;
  margin: var(--space-5) 0;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--navy);
  --btn-fg: var(--white);
  --btn-bd: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 1.7rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}

.btn:hover {
  color: var(--btn-fg);
  background: var(--navy-800);
  border-color: var(--navy-800);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn:active {
  transform: translateY(0);
}

.btn--gold {
  --btn-bg: var(--gold);
  --btn-fg: var(--white);
  --btn-bd: var(--gold);
}

.btn--gold:hover {
  background: var(--gold-600);
  border-color: var(--gold-600);
  color: var(--white);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--navy);
  --btn-bd: var(--line-strong);
}

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

.btn--light {
  --btn-bg: var(--white);
  --btn-fg: var(--navy);
  --btn-bd: var(--white);
}

.btn--light:hover {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--navy);
}

.btn--onDark {
  --btn-bg: transparent;
  --btn-fg: var(--white);
  --btn-bd: rgba(255, 255, 255, 0.4);
}

.btn--onDark:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--white);
}

.btn--sm {
  padding: 0.7rem 1.25rem;
  font-size: 0.88rem;
}

.btn--lg {
  padding: 1.1rem 2.1rem;
  font-size: 1rem;
}

.btn--block {
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

.btn-row--center {
  justify-content: center;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: gap var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.link-arrow::after {
  content: "\2192";
  transition: transform var(--t-fast) var(--ease);
}

.link-arrow:hover {
  border-color: var(--gold);
}

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

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}

/* Optional transparent header over a hero (body.has-transparent-header) */
.site-header--over {
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-header--over:not(.site-header--solid) .brand__name,
.site-header--over:not(.site-header--solid) .site-nav a,
.site-header--over:not(.site-header--solid) .header-phone {
  color: var(--white);
}

.site-header--over:not(.site-header--solid) .site-nav a::after {
  background: var(--gold-400);
}

.site-header--over:not(.site-header--solid) .nav-toggle {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
}

.site-header--over:not(.site-header--solid) .nav-toggle span,
.site-header--over:not(.site-header--solid) .nav-toggle span::before,
.site-header--over:not(.site-header--solid) .nav-toggle span::after {
  background: var(--white);
}

.site-header--over:not(.site-header--solid) .brand__mark--dark {
  display: none;
}

.site-header--over:not(.site-header--solid) .brand__mark--light {
  display: block;
}

.brand__mark--light {
  display: none;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 78px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  flex-shrink: 0;
}

.brand__mark {
  height: 40px;
  width: auto;
}

/* Logo rendered as a CSS background so it works inside static block
   templates without a hard-coded URL. Paths resolve against this stylesheet. */
.brand-logo {
  display: block;
  width: 188px;
  height: 44px;
  background: url("../images/logo-navy.png") no-repeat left center;
  background-size: contain;
}

.brand-logo--light {
  background-image: url("../images/logo-white.png");
}

.brand__stack {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.brand__tag {
  font-size: 0.6rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-top: 3px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
}

.site-nav a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  position: relative;
  padding-block: 0.4rem;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  transition: right var(--t-med) var(--ease);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--navy);
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
  right: 0;
}

.header-actions {
  display: flex;
  flex-wrap: nowrap;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-4);
}

.header-actions > * {
  flex-shrink: 0;
}

.header-phone {
  white-space: nowrap;
}

.header-phone {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: var(--navy);
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}

.nav-toggle span {
  position: relative;
}

.nav-toggle span::before {
  position: absolute;
  top: -6px;
}

.nav-toggle span::after {
  position: absolute;
  top: 6px;
}

.site-nav a,
.header-phone,
.header-cta {
  white-space: nowrap;
}

/* The phone is in the CTA band and footer too; drop it from the header
   before the nav runs out of room. */
@media (max-width: 1240px) {
  .header-phone {
    display: none;
  }
}

@media (max-width: 1040px) {
  .site-nav,
  .header-phone {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }
}

@media (max-width: 520px) {
  .site-header__inner {
    min-height: 66px;
    gap: var(--space-3);
  }

  .brand-logo {
    width: 150px;
    height: 36px;
  }

  .header-actions .btn--sm {
    padding: 0.62rem 1rem;
    font-size: 0.82rem;
  }

  .header-cta__long {
    display: none;
  }
}

.header-cta__short {
  display: none;
}

@media (max-width: 520px) {
  .header-cta__short {
    display: inline;
  }
}

/* Too narrow for the logo, a button and the menu: the menu and the hero
   both carry the estimate CTA. */
@media (max-width: 359px) {
  .header-cta {
    display: none;
  }
}

/* Mobile drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--navy-900);
  color: var(--white);
  display: flex;
  flex-direction: column;
  padding: 1.25rem clamp(1.25rem, 6vw, 2.5rem) 2.5rem;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--t-med) var(--ease), visibility var(--t-med);
  overflow-y: auto;
}

.mobile-nav.is-open {
  transform: translateX(0);
  visibility: visible;
}

.mobile-nav__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-8);
}

.mobile-nav__close {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--white);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
}

.mobile-nav a.mobile-nav__link {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--white);
  text-decoration: none;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-nav .btn {
  margin-top: var(--space-6);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  color: var(--white);
  overflow: hidden;
  background: var(--navy-900);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: var(--navy-800);
  background-image: var(--hero-image, none);
  background-size: cover;
  background-position: center;
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(22, 41, 58, 0.55) 0%,
    rgba(22, 41, 58, 0.7) 55%,
    rgba(22, 41, 58, 0.92) 100%
  );
}

.hero__inner {
  position: relative;
  padding-block: clamp(6rem, 13vw, 11rem);
  /* Fluid measure: unchanged up to 1600 wide, then the column grows with the
     photo instead of staying a narrow strip on a large display. */
  max-width: clamp(44rem, 44vw, 55rem);
}

.hero__inner--center {
  margin-inline: auto;
  text-align: center;
}

.hero h1 {
  color: var(--white);
  margin-bottom: var(--space-5);
}

.hero p {
  color: rgba(255, 255, 255, 0.82);
}

.hero__lede {
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  line-height: 1.6;
  max-width: 38ch;
  margin-bottom: var(--space-6);
}

.hero__inner--center .hero__lede {
  margin-inline: auto;
}

.hero--short .hero__inner {
  padding-block: clamp(4.5rem, 9vw, 7rem);
}

.hero__trust {
  /* Three columns, never two and never one: the numbers are the proof, and
     they only read as proof side by side. */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5) var(--space-6);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.hero__trust-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.hero__trust-num {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--gold-400);
  line-height: 1;
}

.hero__trust-label {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
}

/* Page hero (interior pages) */
.page-hero {
  background: var(--navy);
  color: var(--white);
  padding-block: clamp(4rem, 8vw, 6.5rem);
}

.page-hero h1 {
  color: var(--white);
  margin-bottom: var(--space-4);
}

.page-hero .lede {
  color: rgba(255, 255, 255, 0.8);
}

.breadcrumb {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--space-5);
}

.breadcrumb a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Cards & features
   -------------------------------------------------------------------------- */

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease);
}

.card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}

.card--flat {
  background: var(--cream);
  border-color: transparent;
}

.card__icon {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--gold-100);
  color: var(--gold-600);
  margin-bottom: var(--space-4);
}

.card__icon svg {
  width: 22px;
  height: 22px;
}

.card h3 {
  margin-bottom: var(--space-2);
}

/* Cards in a row share one height, whatever their copy length. */
.wp-block-column:has(> .card, > .quote-card) {
  display: flex;
  flex-direction: column;
}

.wp-block-column > .card,
.wp-block-column > .quote-card {
  flex: 1;
}

/* Four-up card rows: a grid, two-up below desktop widths, with headings
   sized so short titles don't break mid-word. */
.wp-block-columns.grid--4 {
  display: grid;
  gap: var(--space-5);
}

.wp-block-columns.grid--4 .card {
  padding: var(--space-5);
}

.wp-block-columns.grid--4 .card h3 {
  font-size: clamp(1.1rem, 1.35vw, 1.25rem);
  text-wrap: pretty;
}

@media (max-width: 1100px) {
  .wp-block-columns.grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .wp-block-columns.grid--4 {
    grid-template-columns: 1fr;
  }
}

.card p {
  color: var(--muted);
  font-size: 0.98rem;
}

.card__index {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--gold-600);
  margin-bottom: var(--space-3);
}

/* Feature: image + text split */
.split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

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

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

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

.split__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 360px;
}

/* --------------------------------------------------------------------------
   Photo placeholders (replace with real photography)
   -------------------------------------------------------------------------- */

/* WordPress also puts `photo` on avatars (admin bar, comments); leave those be.
   :where() keeps this at single-class specificity so the modifiers still win. */
.photo:where(:not(.avatar)) {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--navy-700);
  background-image: var(--photo, none);
  background-size: cover;
  background-position: center;
  min-height: 260px;
}

.photo--tall {
  min-height: 460px;
}

.photo--wide {
  min-height: 320px;
}

.photo::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  pointer-events: none;
}

.photo--plain::after {
  content: none;
}

/* Bundled placeholder art. Paths are relative to THIS stylesheet, so set the
   variable from CSS, not from an inline style on the page. Real photography
   should use an absolute media URL in the same variable. */
.hero--dusk {
  --hero-image: url("../images/hero-dusk.svg");
}

.photo--interior {
  --photo: url("../images/photo-interior.svg");
}

.photo--detail {
  --photo: url("../images/photo-detail.svg");
}

.photo--linen {
  --photo: url("../images/photo-linen.svg");
}

/* --------------------------------------------------------------------------
   Steps (how it works)
   -------------------------------------------------------------------------- */

.steps {
  counter-reset: step;
  display: grid;
  gap: 0;
}

.step {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: var(--space-5);
  padding-block: var(--space-6);
  border-top: 1px solid var(--line);
}

.step:last-child {
  border-bottom: 1px solid var(--line);
}

.step__num {
  counter-increment: step;
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: var(--gold);
  line-height: 1;
}

.step__num::before {
  content: counter(step, decimal-leading-zero);
}

.step h3 {
  margin-bottom: var(--space-2);
}

.step p {
  color: var(--muted);
  font-size: 0.98rem;
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
   Stats band
   -------------------------------------------------------------------------- */

.stat-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

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

.stat {
  text-align: center;
  padding: var(--space-4);
}

.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  color: var(--gold-400);
  line-height: 1;
  display: block;
}

.stat__label {
  display: block;
  margin-top: var(--space-3);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.section:not(.section--navy) .stat__num {
  color: var(--navy);
}

.section:not(.section--navy) .stat__label {
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */

.quote-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
}

.quote-card__stars {
  color: var(--gold);
  letter-spacing: 0.15em;
  font-size: 0.95rem;
}

.quote-card blockquote,
.quote-card .wp-block-quote {
  margin: 0;
  padding: 0;
  border: 0;
  font-style: normal;
}

.quote-card blockquote p,
.quote-card .wp-block-quote p {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--navy-800);
  font-style: normal;
}

.quote-card cite,
.quote-card .wp-block-quote cite {
  display: none;
}

.quote-card__author {
  margin-top: auto;
  font-size: 0.9rem;
  color: var(--muted);
}

.quote-card__author strong {
  color: var(--navy);
  display: block;
}

/* --------------------------------------------------------------------------
   Lists
   -------------------------------------------------------------------------- */

/* A checklist right under its intro paragraph needs breathing room. */
p + .check-list,
.wp-block-paragraph + .wp-block-list.check-list {
  margin-top: var(--space-5);
}

.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.check-list li {
  position: relative;
  padding-left: 2rem;
  color: var(--ink-soft);
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--gold-100);
  box-shadow: inset 0 0 0 1px var(--gold-400);
}

.check-list li::after {
  content: "";
  position: absolute;
  /* Centred on the ::before circle. The circle is 1.05rem tall from 0.45em,
     so its centre is 1.05rem / 2 in from each of those edges. box-sizing is
     border-box for all pseudo-elements, so this box is exactly 0.32rem x
     0.18rem including its borders, and the rotation is about the box centre —
     the two centres therefore meet exactly, at any font size. */
  left: calc((1.05rem - 0.32rem) / 2);
  top: calc(0.45em + (1.05rem - 0.18rem) / 2);
  width: 0.32rem;
  height: 0.18rem;
  border-left: 2px solid var(--gold-600);
  border-bottom: 2px solid var(--gold-600);
  transform: rotate(-45deg);
}

.section--navy .check-list li {
  color: rgba(255, 255, 255, 0.85);
}

/* Checklists sitting on the navy estimate panel need the same inverted
   treatment, the panel is not a .section--navy. */
.calc__result .check-list li {
  color: rgba(255, 255, 255, 0.85);
}

.calc__result .check-list li::before {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.calc__result .check-list li::after {
  border-color: var(--gold-400);
}

/* --------------------------------------------------------------------------
   FAQ accordion
   -------------------------------------------------------------------------- */

.faq {
  border-top: 1px solid var(--line);
}

.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__q {
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  padding: var(--space-5) 3rem var(--space-5) 0;
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 550;
  color: var(--navy-800);
  cursor: pointer;
  line-height: 1.35;
}

.faq__q::after {
  content: "";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  width: 0.7rem;
  height: 0.7rem;
  border-right: 2px solid var(--gold-600);
  border-bottom: 2px solid var(--gold-600);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--t-fast) var(--ease);
}

.faq__item.is-open .faq__q::after {
  transform: translateY(-30%) rotate(-135deg);
}

.faq__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--t-med) var(--ease);
}

.faq__a-inner {
  padding-bottom: var(--space-5);
  color: var(--muted);
  max-width: 70ch;
}

/* Native <details> accordion (core/details) styled as the DS FAQ. */
.faq--details .wp-block-details {
  border-bottom: 1px solid var(--line);
}

.faq--details .wp-block-details summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: var(--space-5) 3rem var(--space-5) 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 550;
  color: var(--navy-800);
  line-height: 1.35;
}

.faq--details .wp-block-details summary::-webkit-details-marker {
  display: none;
}

.faq--details .wp-block-details summary::after {
  content: "";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  width: 0.7rem;
  height: 0.7rem;
  border-right: 2px solid var(--gold-600);
  border-bottom: 2px solid var(--gold-600);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--t-fast) var(--ease);
}

.faq--details .wp-block-details[open] summary::after {
  transform: translateY(-30%) rotate(-135deg);
}

.faq--details .wp-block-details > p {
  padding-bottom: var(--space-5);
  margin: 0;
  color: var(--muted);
  max-width: 70ch;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: var(--space-4);
}

.field--row {
  flex-direction: row;
  gap: var(--space-4);
}

.field--row > .field {
  flex: 1;
  margin-bottom: 0;
}

label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--navy-800);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
select,
textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.95rem;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

input::placeholder,
textarea::placeholder {
  color: #9aa5af;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(37, 71, 96, 0.12);
}

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

.field.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.check-inline {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--ink-soft);
  cursor: pointer;
}

.check-inline input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--navy);
  flex: none;
}

.field__hint {
  font-size: 0.8rem;
  color: var(--muted);
}

.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-md);
}

@media (max-width: 560px) {
  .field--row {
    flex-direction: column;
    gap: 0;
  }

  .field--row > .field {
    margin-bottom: var(--space-4);
  }
}

/* --------------------------------------------------------------------------
   Quote calculator
   -------------------------------------------------------------------------- */

.calc {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

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

.calc__form label {
  display: block;
  margin-bottom: 0.4rem;
}

.calc__steps {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.calc__step-pill {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}

.calc__step-pill.is-active {
  color: var(--navy);
  border-color: var(--gold);
  background: var(--gold-100);
}

.calc__result {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  position: sticky;
  top: 100px;
}

.calc__result h3 {
  color: var(--white);
  margin-bottom: var(--space-2);
}

.calc__result .muted {
  color: rgba(255, 255, 255, 0.6);
}

.calc__estimate {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  color: var(--gold-400);
  line-height: 1;
  margin: var(--space-4) 0 var(--space-2);
}

.calc__estimate small {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-body);
  display: block;
  margin-top: var(--space-3);
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.calc__attrs-title {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.calc__attrs {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-4);
  font-size: 0.9rem;
}

.calc__attrs--wide {
  grid-template-columns: 1fr;
}

/* Number-of-properties counter */
.counter {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--white);
}

.counter button {
  width: 2.7rem;
  height: 2.7rem;
  border: 0;
  background: transparent;
  color: var(--navy);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}

.counter button:hover {
  background: var(--cream);
}

.counter button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.counter input {
  width: 3.4rem;
  text-align: center;
  border: 0;
  border-radius: 0;
  padding: 0.4rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  background: transparent;
  box-shadow: none;
}

.counter input:focus {
  box-shadow: none;
  border: 0;
}

.counter input::-webkit-outer-spin-button,
.counter input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.counter input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.calc__attrs dt {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.calc__attrs dd {
  margin: 0.15rem 0 0;
  color: var(--white);
  font-weight: 600;
}

.calc__placeholder {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.95rem;
  margin-top: var(--space-5);
}

.calc__error {
  color: #ffb4ad;
  font-size: 0.9rem;
  margin-top: var(--space-3);
}

.calc__fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 1rem;
}

.calc__fieldset legend {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy-800);
  margin-bottom: 0.75rem;
  padding: 0;
}

/* Contact Form 7 / WPForms adopt the design system automatically. */
.wpcf7-form p,
.wpcf7 form p {
  margin: 0 0 var(--space-4);
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form select,
.wpcf7-form textarea,
.wpforms-container input,
.wpforms-container textarea,
.wpforms-container select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.95rem;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(37, 71, 96, 0.12);
}

.wpcf7-form input[type="submit"],
.wpcf7-form button,
.wpforms-container button,
.wpforms-container input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: var(--radius-pill);
  padding: 1.05rem 2rem;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form button:hover {
  background: var(--navy-800);
  transform: translateY(-1px);
}

.wpcf7-not-valid-tip {
  color: #c0392b;
  font-size: 0.85rem;
}

.wpcf7-response-output {
  border-radius: var(--radius-sm);
  border-color: var(--line-strong) !important;
  font-size: 0.9rem;
}

.calc__spinner {
  width: 1.6rem;
  height: 1.6rem;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--gold-400);
  border-radius: 50%;
  animation: mspin 0.8s linear infinite;
  margin-top: var(--space-5);
}

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

.calc__fallback {
  display: none;
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.calc__fallback.is-visible {
  display: block;
}

.calc__breakdown {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  font-size: 0.92rem;
}

.calc__breakdown li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.calc__breakdown li span:last-child {
  color: var(--white);
  font-weight: 600;
}

.calc__note {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: var(--space-4);
}

/* --------------------------------------------------------------------------
   Scheduler (inside the estimate result panel)
   -------------------------------------------------------------------------- */

.scheduler {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.scheduler h3 {
  color: var(--white);
  margin-bottom: var(--space-4);
  font-size: 1.25rem;
}

.scheduler__lead {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.9rem;
  margin: calc(-1 * var(--space-3)) 0 var(--space-5);
}

.scheduler__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.scheduler__month {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--white);
}

.scheduler__nav {
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast) var(--ease);
}

.scheduler__nav:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
}

.scheduler__nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.scheduler__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.scheduler__dow {
  text-align: center;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  padding-bottom: 0.35rem;
}

.scheduler__day {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}

.scheduler__day:hover:not(:disabled):not(.is-empty) {
  border-color: rgba(255, 255, 255, 0.5);
}

.scheduler__day.is-empty {
  background: transparent;
  cursor: default;
}

.scheduler__day:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}

.scheduler__day.is-today {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.scheduler__day.is-selected {
  background: var(--gold);
  color: var(--navy-900);
  font-weight: 700;
}

.scheduler__times {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-4);
}

.scheduler__time {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-pill);
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  padding: 0.5rem 0.9rem;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}

.scheduler__time:hover {
  border-color: var(--gold);
}

.scheduler__time.is-selected {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy-900);
  font-weight: 600;
}

.scheduler__confirm {
  margin-top: var(--space-5);
}

.scheduler__hint {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  margin-top: var(--space-3);
}

.scheduler__success {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.scheduler__success-icon {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy-900);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.scheduler__success h3 {
  margin-bottom: var(--space-2);
}

/* Partner inquiry form (App page) */
.partner-success {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.partner-success h3 {
  color: var(--navy-800);
  margin-bottom: var(--space-2);
}

.partner-form__title {
  color: var(--navy-800);
  margin-bottom: var(--space-5);
}

/* Form errors and alerts (calculator, contact, quote, partner) */
.field__error {
  color: #b42318;
  font-size: 0.85rem;
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: #b42318;
}

.form-alert {
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  font-size: 0.92rem;
}

.form-alert--error {
  background: #fef3f2;
  color: #912018;
  border: 1px solid #fecdca;
}

/* Messages and panels that receive focus from script (so they are read out
   and scrolled into view) are not controls: no focus ring. */
[data-form-focus]:focus,
.calc__result:focus,
.scheduler__title:focus {
  outline: none;
}

.scheduler__time:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Honeypot: off-screen for people, still filled in by naive bots. */
.mq-hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.scheduler__summary {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  font-size: 0.9rem;
}

.scheduler__summary li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.scheduler__summary li span:last-child {
  color: var(--white);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Pricing table
   -------------------------------------------------------------------------- */

.price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.price-table th,
.price-table td {
  text-align: left;
  padding: 0.95rem 1rem;
  border-bottom: 1px solid var(--line);
}

.price-table thead th {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line-strong);
}

.price-table td:last-child,
.price-table th:last-child {
  text-align: right;
}

.price-table tbody tr:hover {
  background: var(--cream);
}

.price-table .is-featured td {
  background: var(--gold-100);
  font-weight: 600;
  color: var(--navy-800);
}

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

/* --------------------------------------------------------------------------
   Areas / locations
   -------------------------------------------------------------------------- */

.area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-4);
}

.area-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  background: var(--white);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.area-card:hover {
  border-color: var(--gold);
  background: var(--cream);
}

.area-card h2,
.area-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}

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

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

@media (max-width: 560px) {
  .area-grid--3 {
    grid-template-columns: 1fr;
  }
}

.area-card span {
  font-size: 0.85rem;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */

.cta-band {
  background: linear-gradient(135deg, var(--navy-900), var(--navy) 62%, var(--navy-700));
  color: var(--white);
  border-radius: 0;
  position: relative;
  overflow: hidden;
}

.cta-band::before {
  content: "";
  position: absolute;
  right: -6%;
  top: -40%;
  width: 40rem;
  height: 40rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(194, 160, 90, 0.22), transparent 62%);
}

.cta-band h2 {
  color: var(--white);
  margin-bottom: var(--space-4);
}

.cta-band p {
  color: rgba(255, 255, 255, 0.82);
  max-width: 46ch;
}

.cta-band .container {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
  justify-content: space-between;
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.cta-band__copy {
  max-width: 40rem;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--navy-900);
  color: rgba(255, 255, 255, 0.7);
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
  font-size: 0.94rem;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
}

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

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-6);
  padding-bottom: var(--space-8);
}

@media (max-width: 860px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7) var(--space-6);
  }
}

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

.footer-brand .brand__name {
  color: var(--white);
}

.footer-brand p {
  margin-top: var(--space-4);
  max-width: 34ch;
  color: rgba(255, 255, 255, 0.6);
}

.footer-col h4,
.footer-title {
  font-family: var(--font-body);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: var(--space-4);
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.5);
}

.footer-social {
  display: flex;
  gap: var(--space-3);
}

.footer-social a {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.footer-social a:hover {
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.06);
}

.footer-social svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* Privacy and terms: long-form reading, smaller headings than a marketing section. */
.legal h2 {
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  letter-spacing: -0.01em;
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
}

.legal ul {
  padding-left: 1.2em;
  display: grid;
  gap: 0.5rem;
}

.legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

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

/* ==========================================================================
   WordPress block mappings
   Reproduce the design-system classes with core block output.
   ========================================================================== */

/* Full-bleed sections keep their background and get vertical rhythm. */
.wp-site-blocks > .alignfull {
  margin-block: 0;
}

.entry-content > .alignfull:first-child {
  margin-top: 0;
}

/* Inner-page heroes and the CTA band are raw HTML, so the constrained post
   content would box them at the content width; run them edge to edge like an
   alignfull group. */
.entry-content > :is(.page-hero, .cta-band) {
  max-width: none;
  margin-inline: calc(var(--wp--style--root--padding-left, 0px) * -1) calc(var(--wp--style--root--padding-right, 0px) * -1) !important;
}

/* Full-bleed sections carry their own padding; stack them without the block
   gap, which otherwise shows as a white strip between two backgrounds. */
.entry-content > :is(.alignfull, .page-hero, .cta-band) + :is(.alignfull, .page-hero, .cta-band),
.entry-content > :is(.page-hero, .cta-band):first-child {
  margin-top: 0;
}

/* …and sit flush under the header and against the footer. */
main:has(> .hero:first-child),
main:has(> .alignfull:first-child),
main:has(> .entry-content > .page-hero:first-child),
.wp-site-blocks > main + * {
  margin-top: 0;
}

/* Buttons */
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--white);
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: var(--radius-pill);
  padding: 0.95rem 1.7rem;
  text-decoration: none;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.wp-block-button__link:hover {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: var(--white);
  transform: translateY(-1px);
}

.wp-block-button.is-style-gold .wp-block-button__link {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy-900);
}

.wp-block-button.is-style-gold .wp-block-button__link:hover {
  background: var(--gold-600);
  border-color: var(--gold-600);
}

.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-ghost .wp-block-button__link {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--navy);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.wp-block-button.is-style-on-dark .wp-block-button__link {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--white);
}

.wp-block-button.is-style-on-dark .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.7);
}

.wp-block-button.is-style-light .wp-block-button__link {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
}

.wp-block-button.is-style-light .wp-block-button__link:hover {
  background: var(--cream);
  border-color: var(--cream);
}

/* Cards: any group with the .card class gets the DS shell. */
.wp-block-group.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

.wp-block-group.card--cream {
  background: var(--cream);
  border-color: transparent;
}

/* Columns (value props, services, testimonials) */
.wp-block-columns {
  gap: clamp(1.25rem, 3vw, 2rem);
}

/* Constrain readable copy */
.wp-block-group.measure > * {
  max-width: 62ch;
}

/* Constrained layouts center every child with !important margins, which would
   float a 62ch measure block mid-page. Let the group span the content width and
   left-align its copy, like the preview, unless it asks to be centered. */
.wp-block-group.measure:not(.measure--center) {
  max-width: var(--wp--style--global--content-size);
}

.wp-block-group.measure:not(.measure--center) > * {
  margin-left: 0 !important;
}

/* Image rounded corners */
.wp-block-image img {
  border-radius: var(--radius-lg);
}

/* The pattern-embedded widget should sit in a card on light backgrounds. */
.monssieur-quote-slot {
  width: 100%;
}

.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-0 { margin-bottom: 0; }
.mb-6 { margin-bottom: var(--space-6); }

/* --------------------------------------------------------------------------
   App page: real screenshots in a phone frame
   -------------------------------------------------------------------------- */
.app-shot {
  margin: 0 auto;
  max-width: 300px;
}

.app-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 38px;
  border: 8px solid var(--navy-900);
  box-shadow: var(--shadow-lg);
  background: var(--navy-900);
}

.app-shot--small {
  max-width: 220px;
  margin: var(--space-7) 0 0;
}

.app-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.app-hero__copy .btn-row {
  margin-top: var(--space-6);
}

.app-hero__platforms {
  margin-top: var(--space-5);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.65);
}

.app-shot--hero {
  max-width: 320px;
  margin-bottom: calc(clamp(4rem, 8vw, 6.5rem) * -1.6);
  position: relative;
  z-index: 1;
}

.page-hero--app + .section {
  padding-top: calc(var(--section-y) + 4rem);
}

.app-row + .app-row {
  margin-top: clamp(4rem, 9vw, 7.5rem);
}

.app-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  max-width: 560px;
  margin-inline: auto;
}

.app-pair .app-shot {
  max-width: none;
}

.app-pair .app-shot:last-child {
  margin-top: var(--space-8);
}

.app-note {
  margin-top: clamp(3rem, 7vw, 5rem);
  font-size: 0.85rem;
  color: var(--muted);
}

.app-features {
  margin-top: var(--space-7);
}

.app-features > .card {
  margin: 0;
}

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

  .app-shot--hero {
    max-width: 260px;
  }
}

@media (max-width: 781px) {
  .app-row > .wp-block-column:has(.app-shot) {
    order: 2;
  }

  .app-shot {
    max-width: 250px;
  }

  .app-pair .app-shot:last-child {
    margin-top: var(--space-6);
  }

  .app-shot--small {
    margin-inline: auto;
  }
}

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

/* App page: Monsy, the assistant */
.monsy__intro {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.monsy__intro .eyebrow {
  margin: 0;
}

.monsy__face {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14);
}

.monsy .check-list li {
  color: rgba(255, 255, 255, 0.82);
}

.monsy .card .check-list li {
  color: var(--ink-soft);
}

.monsy .app-shot img {
  border-color: var(--navy-900);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

.app-shot figcaption {
  margin-top: var(--space-3);
  font-size: 0.82rem;
  text-align: center;
  color: var(--muted);
}

.monsy .app-shot figcaption {
  color: rgba(255, 255, 255, 0.65);
}

.monsy__roles {
  margin-top: clamp(4rem, 8vw, 6rem);
}

.monsy__roles > .card {
  margin: 0;
}

.monsy__who {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: var(--space-2);
}

@media (max-width: 781px) {
  .grid--2.monsy__roles {
    grid-template-columns: 1fr;
  }
}

/* "This is Monsy": points at the floating Monsy button in the hero screen.
   The button sits at about 91% across and 69% down the screenshot. */
.app-shot--hero {
  position: relative;
}

.monsy-hotspot {
  position: absolute;
  left: 85%;
  top: 66%;
  width: 14%;
  aspect-ratio: 1;
  border-radius: 50%;
}

.monsy-hotspot:focus-visible {
  outline: 3px solid var(--gold-400);
  outline-offset: 2px;
}

/* Monsy says hello from the floating button: a speech bubble whose tail
   points down at the button. */
.monsy-bubble {
  position: absolute;
  right: -6%;
  bottom: calc(34% + 14px);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.7rem 1rem 0.75rem;
  border-radius: 18px 18px 6px 18px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 12px 32px rgba(10, 22, 34, 0.28);
  text-decoration: none;
  white-space: nowrap;
  transform-origin: 85% 100%;
  animation: monsy-hello 520ms var(--ease) 600ms both;
  transition: transform var(--t-fast) var(--ease);
}

.monsy-bubble::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 100%;
  border: 9px solid transparent;
  border-top-color: var(--white);
  border-bottom: 0;
}

.monsy-bubble strong {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy);
}

.monsy-bubble span {
  font-size: 0.8rem;
  color: var(--gold-600);
}

.monsy-bubble:hover,
.monsy-bubble:focus-visible {
  transform: translateY(-2px);
}

.monsy-bubble:focus-visible {
  outline: 3px solid var(--gold-400);
  outline-offset: 3px;
}

@keyframes monsy-hello {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.85);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .monsy-bubble {
    animation: none;
  }
}

@media (max-width: 600px) {
  .monsy-bubble {
    right: 0;
  }
}

#monsy {
  scroll-margin-top: 5rem;
}

/* About: the closing line, signed like a motto. */
.signoff {
  margin-top: var(--space-5);
  font-family: var(--font-hand);
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1.1;
  font-style: normal;
  letter-spacing: 0.01em;
  color: var(--gold-600);
  /* A signature, not a caption: it leans a touch, like a hand would. */
  transform: rotate(-1.5deg);
  transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
  .signoff {
    transition: color 160ms ease;
  }
}

@media (max-width: 600px) {
  .signoff {
    font-size: 1.8rem;
  }
}

/* --------------------------------------------------------------------------
   Service-area map and tappable towns
   The blue is the intersection of the served counties with the one hour
   commute circle: the served paths are painted inside a clip path, so the
   highlight stops exactly at the circle. Towns carry [data-mq-area] and
   [data-mq-label]; site.js fills the estimate form. Without JS the href works.
   -------------------------------------------------------------------------- */
.area-card {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

a.area-card:hover,
a.area-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(37, 71, 96, 0.12);
  border-color: var(--gold-400);
  outline: none;
}

a.area-card:focus-visible {
  box-shadow: 0 0 0 3px rgba(194, 160, 90, 0.45);
}

/* Text beside the map on desktop, stacked on phones. */
.map-split {
  display: grid;
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  gap: 3.5rem;
  align-items: center;
}

.map-split__text,
.map-split__map {
  width: auto;
  max-width: none;
  flex-basis: auto;
}

.map-figure {
  margin: 0;
}

.map-figure__frame {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: #f1f4f7;
  box-shadow: 0 18px 40px rgba(37, 71, 96, 0.10);
}

.map-figure figcaption {
  margin-top: 0.75rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
}

.servicemap {
  display: block;
  width: 100%;
  height: auto;
}

/* Two layouts of the same map: cards float in the margin on desktop, and the
   phone version lists the communities as full width rows under the map. */
.servicemap--mobile {
  display: none;
}

.servicemap--desktop {
  display: block;
}

.servicemap .m-ctx {
  fill: #e5eaf0;
  stroke: #fff;
  stroke-width: 2;
}

.servicemap .m-srv {
  fill: rgba(74, 144, 234, 0.42);
  stroke: #3b82f6;
  stroke-width: 2.6;
  stroke-linejoin: round;
}

.servicemap .m-ring {
  fill: none;
  stroke: #a9863f;
  stroke-width: 2.4;
  stroke-dasharray: 11 9;
  opacity: 0.85;
}

.servicemap .m-swatch {
  fill: #4a90ea;
  fill-opacity: 0.45;
  stroke: #3b82f6;
  stroke-width: 2;
}

.servicemap .m-legend-text {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  fill: #557085;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 5;
}

.servicemap .m-city {
  cursor: pointer;
  text-decoration: none;
}

.servicemap .m-hit {
  fill: transparent;
}

.servicemap .m-dot {
  fill: var(--navy);
  stroke: #fff;
  stroke-width: 3;
  transition: fill 140ms ease;
}

.servicemap .m-label {
  font-family: var(--font-body);
  font-weight: 600;
  fill: var(--navy);
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 5.5;
  stroke-linejoin: round;
  transition: fill 140ms ease;
}

.servicemap .m-city--a .m-label {
  font-size: 22px;
}

.servicemap .m-city--b .m-label {
  font-size: 17px;
  fill: #557085;
}

.servicemap .m-city--b .m-dot {
  fill: #607a8e;
}

/* Vacation rental communities: a hollow marker so they read apart from cities. */
.servicemap .m-resort {
  fill: #fff;
  stroke: var(--navy);
  stroke-width: 4;
  transition: stroke 140ms ease;
}

.servicemap .m-city--r .m-label {
  font-size: 17px;
  fill: var(--navy);
}

/* Community cards in the bottom margin, fed by elbow leaders. */
.servicemap .m-route {
  fill: none;
  stroke: #93a3b1;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.servicemap .m-card rect {
  fill: #fff;
  stroke: #c9d3dc;
  stroke-width: 1.6;
  transition: stroke 140ms ease, fill 140ms ease;
}

.servicemap .m-card text {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  fill: var(--navy);
}

.servicemap .m-city--r:hover .m-card rect {
  stroke: var(--gold);
  fill: #fffdf8;
}

.servicemap .m-city--r:hover .m-card text {
  fill: var(--gold-600);
}

/* Below the desktop breakpoint the cards are too small to read, so the same
   six communities are offered as tappable chips under the map instead. */
.servicemap .m-float {
  animation: monssieurFloat 7s ease-in-out infinite;
}

@keyframes monssieurFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .servicemap .m-float {
    animation: none;
  }
}

.servicemap .m-leader {
  stroke: var(--navy);
  stroke-width: 1.5;
  opacity: 0.45;
}

.servicemap .m-city:hover .m-resort {
  stroke: var(--gold-600);
}

.servicemap .m-city:hover .m-label,
.servicemap .m-city:hover .m-dot,
.servicemap .m-city:focus .m-label,
.servicemap .m-city:focus .m-dot {
  fill: var(--gold-600);
}

.servicemap .m-city:focus {
  outline: none;
}

@media (max-width: 980px) {
  .map-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
}

/* Phones: grow the market names to a readable size, drop the minor ones. */
@media (max-width: 640px) {
  .servicemap--desktop {
    display: none;
  }

  .servicemap--mobile {
    display: block;
  }

  .servicemap .m-city--a .m-label {
    font-size: 30px;
  }

  .servicemap .m-card--phone text {
    font-size: 30px;
  }

  .servicemap .m-divider {
    stroke: rgba(37, 71, 96, 0.12);
    stroke-width: 2;
  }

  .servicemap .m-legend-text {
    font-size: 24px;
  }
}

/* The area the visitor tapped, shown above the address field. */
.calc__area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
  padding: 0;
  background: none;
  color: var(--navy);
  font-size: 0.9rem;
  font-weight: 600;
}

.calc__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: var(--gold-100);
}

.calc__area-change {
  border: 0;
  background: none;
  padding: 0;
  color: var(--gold-600);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* The field the visitor was sent to: impossible to miss, gone in a moment. */
.is-preselected {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 4px rgba(194, 160, 90, 0.28);
  background: rgba(241, 231, 210, 0.55);
  transition: box-shadow 200ms ease, border-color 200ms ease, background 200ms ease;
}

.mobile-nav__call {
  display: block;
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: underline;
  text-underline-offset: 4px;
}


/* --------------------------------------------------------------------------
   Before and after slider
   The after photo is the base layer; the before photo sits on top and is
   clipped from the right, so dragging left reveals more of the before.
   The range input covers the whole stage invisibly, so a tap anywhere moves
   the handle and the arrow keys work once it is focused.
   -------------------------------------------------------------------------- */
.compare {
  margin: 0;
}

/* WordPress block layout rules set margin-block on flow children with the same
   specificity, so scope the top gap one level deeper to win. The About row is
   top aligned so the photo starts level with the heading, not floating between
   the eyebrow and the first paragraph. */
.about-split {
  align-items: flex-start;
  margin-block-start: 2.5rem;
}

.wp-block-columns .compare {
  margin-block-start: 0;
}

/* Eyebrow with a leading rule, as in the About layout */
.about-lead .eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.about-lead .eyebrow::before {
  content: "";
  width: 40px;
  height: 1px;
  background: rgba(37, 71, 96, 0.45);
}

.about-lead__intro h2 {
  max-width: none;
}

.compare__stage {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #1b2b38;
  box-shadow: 0 18px 40px rgba(37, 71, 96, 0.14);
  aspect-ratio: 1400 / 788;
  touch-action: pan-y;
}

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

.compare__before {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}

.compare__tag {
  position: absolute;
  top: 0.75rem;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.9);
  color: var(--navy);
  pointer-events: none;
}

.compare__tag--before {
  left: 0.75rem;
}

.compare__tag--after {
  right: 0.75rem;
}

.compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(37, 71, 96, 0.18);
  pointer-events: none;
}

.compare__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(37, 71, 96, 0.28);
}

.compare__grip::before,
.compare__grip::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  margin-top: -5px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.compare__grip::before {
  left: 12px;
  border-right: 6px solid var(--navy);
}

.compare__grip::after {
  right: 12px;
  border-left: 6px solid var(--navy);
}

.compare__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.compare__stage:focus-within .compare__handle {
  box-shadow: 0 0 0 2px var(--gold);
}

@media (max-width: 980px) {
  /* stacked: the copy sits directly above, so keep a clear break */
  .wp-block-columns .compare {
    margin-block-start: 1.75rem;
  }
}

/* Keep anchor jumps clear of the sticky header. */
.section,
.page-hero {
  scroll-margin-top: 6rem;
}

.compare figcaption {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--muted);
}


/* --------------------------------------------------------------------------
   Service cards double as links into the estimator. The whole card is the
   target, so the affordance sits at the bottom as a quiet call to action.
   -------------------------------------------------------------------------- */
a.card--link {
  display: block;
  color: inherit;
  text-decoration: none;
  height: 100%;
}

a.card--link .card__cta {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold-600);
}

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

a.card--link:hover .card__cta,
a.card--link:focus-visible .card__cta {
  color: var(--navy);
}

a.card--link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}


/* --------------------------------------------------------------------------
   Sticky header fix
   The header is wrapped in .wp-block-template-part, a box exactly as tall as
   the header itself. A sticky element can only stick inside its parent's box,
   so it scrolled away with the wrapper. Letting the wrapper fall out of the
   box model gives the header the whole page to stick against.
   -------------------------------------------------------------------------- */
.wp-block-template-part:has(> .site-header),
body > .wp-site-blocks > .wp-block-template-part:first-child {
  display: contents;
}

/* The full screen hero slides up under the header so the photo is behind it. */
.hero--compare.is-under-header {
  margin-top: calc(-1 * var(--header-h, 0px));
  padding-top: var(--header-h, 0px);
}

/* Transparent over a dark hero, solid once scrolled past it. */
.site-header--solid {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px rgba(22, 41, 58, 0.08);
}

.site-header--over:not(.site-header--solid) .brand-logo {
  background-image: url("../images/logo-white.png");
}

.site-header--over:not(.site-header--solid) .header-cta {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}

/* --------------------------------------------------------------------------
   Hero as a full screen before/after
   The two photos fill the hero, the scrim keeps the copy readable, and the
   range covers the whole hero. The copy ignores pointer events so a drag
   anywhere moves the handle, while links inside it still work.
   -------------------------------------------------------------------------- */
.hero--compare {
  /* Stop the horizontal rubber-band and the swipe-back gesture starting here. */
  overscroll-behavior-x: contain;
  /* Height follows the content and stops at one screen; nothing is clipped and
     the copy never spills past the fold. */
  min-height: clamp(540px, 100svh, 1080px);
  display: flex;
  align-items: stretch;
  padding-block: clamp(1rem, 2.6vh, 2rem);
}

/* The numbers are the proof, so they sit on the hero's floor while it is on
   screen, and travel with it when it scrolls. Nothing is pinned to the
   viewport. */
.hero--compare > .container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.hero--compare .hero__inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  padding-block: 0;
}

.hero--compare .hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  /* equal auto margins above and below centre the copy in the space the
     numbers leave free */
  margin-block: auto;
  padding-block: clamp(1rem, 3vh, 2.25rem);
}

.hero--compare .hero__trust {
  margin-top: 0;
}



.hero--compare .hero__trust {
  margin-top: clamp(1.25rem, 3vh, 2.5rem);
  padding-top: clamp(1rem, 2.5vh, 1.75rem);
}

.hero__compare {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hero__compare img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__compare .compare__before {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}

.hero--compare .hero__media {
  z-index: 2;
  background-image: none;
  background-color: transparent;
}

.hero--compare .hero__media::after {
  /* The bands live on .hero__shade now, so they can spread from the left with
     the copy band instead of fading in place. */
  background: none;
}



.hero--compare .compare__handle {
  z-index: 3;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(37, 71, 96, 0.12);
}

/* The control lives on the divider under the copy, so it never lands on the
   headline or the buttons. */
.hero--compare .compare__grip {
  top: var(--track-y, 72%);
}

.hero--compare .compare__range {
  z-index: 4;
  /* The drag is handled in JS (see the pointer module in site.js); the range is
     kept for keyboard and screen readers only. */
  pointer-events: none;
}

.hero--compare .hero__compare {
  /* Vertical panning still scrolls, a horizontal drag belongs to the slider. */
  touch-action: pan-y;
}

.hero--compare > .container {
  position: relative;
  z-index: 5;
  pointer-events: none;
}

.hero--compare > .container a,
.hero--compare > .container button {
  pointer-events: auto;
}

@media (max-width: 640px) {
  .hero--compare {
    min-height: clamp(520px, 100svh, 900px);
  }

  .hero--compare .hero__copy {
    padding-block: clamp(1rem, 2.5vh, 1.75rem);
  }

  /* Three trust markers on one row, or they stack into half a screen. */
  .hero--compare .hero__trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .hero--compare .hero__trust-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }

  .hero--compare .hero__trust-label {
    font-size: 0.62rem;
    line-height: 1.3;
  }
}


/* Short screens: the full screen hero has to stay a screen, so the copy steps
   down a size rather than pushing the section past the fold. */
@media (max-height: 820px) {
  .hero--compare .hero__copy {
    padding-block: 0.75rem;
  }

  .hero--compare .hero h1 {
    font-size: clamp(2rem, 3.6vw, 2.85rem);
  }

  .hero--compare .hero__lede {
    font-size: 0.98rem;
    line-height: 1.55;
  }

  .hero--compare .hero__trust {
    margin-top: 1rem;
    padding-top: 0.85rem;
  }
}


/* --------------------------------------------------------------------------
   The slider is the divider above the trust numbers
   The rule that separates the copy from the numbers becomes the track: gold
   up to the handle, faint after it, with BEFORE and AFTER at the ends. The
   grip rides the track and the wipe line follows it, so the control, the
   labels and the reveal are all the same object.
   -------------------------------------------------------------------------- */
.hero--compare .hero__trust {
  border-top-color: transparent;
}

.hero__track {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--track-y, 72%);
  height: 2px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(194, 160, 90, 0.95) 0%,
    rgba(194, 160, 90, 0.95) var(--pos, 62%),
    rgba(255, 255, 255, 0.3) var(--pos, 62%),
    rgba(255, 255, 255, 0.3) 100%
  );
}

.hero__track-label {
  position: absolute;
  /* clear of the grip, which parks at the left edge once the reveal lands */
  bottom: 26px;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

.hero__track-label--before {
  left: clamp(3rem, 6vw, 4rem);
}

.hero__track-label--after {
  right: clamp(2.5rem, 6vw, 4rem);
}

.hero__compare .compare__grip {
  position: absolute;
  left: var(--pos, 62%);
  top: var(--track-y, 72%);
  width: 40px;
  height: 40px;
  margin: -21px 0 0 -20px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  z-index: 4;
  pointer-events: none;
}

/* The wipe line fades out as it climbs into the copy, so it marks the split
   without drawing a hard stroke across the headline. */
.hero--compare .hero__media::after {
  transition: opacity 240ms ease;
}

.hero__compare .compare__handle {
  /* stops at the divider: below it the numbers live, and a line through them
     reads as a defect rather than a split */
  bottom: auto;
  height: var(--track-y, 72%);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.14) 38%,
    rgba(255, 255, 255, 0.42) 74%,
    rgba(255, 255, 255, 0.58) 100%
  );
  box-shadow: none;
}

@media (max-width: 640px) {
  .hero__track-label {
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    bottom: 22px;
  }

  .hero__track-label--before {
    left: 2.75rem;
  }

  .hero__track-label--after {
    right: 1.25rem;
  }

  .hero__compare .compare__grip {
    width: 36px;
    height: 36px;
    margin: -19px 0 0 -18px;
  }
}


/* Holding the slider clears the way: the header and the whole hero copy fade
   out so the split is unobstructed, then return on release. !important is
   deliberate: the intro leaves inline opacity on these nodes and a plain rule
   loses to it. */
.site-header {
  transition:
    opacity 220ms ease,
    background var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease);
}

.hero--compare .hero__copy > .eyebrow,
.hero--compare .hero__copy > h1,
.hero--compare .hero__copy > .hero__lede,
.hero--compare .hero__copy > .btn-row,
.hero--compare .hero__trust {
  transition: opacity 260ms ease;
}

html.is-slider-drag .site-header,
html.is-slider-drag .hero--compare .hero__copy > .eyebrow,
html.is-slider-drag .hero--compare .hero__copy > h1,
html.is-slider-drag .hero--compare .hero__copy > .hero__lede,
html.is-slider-drag .hero--compare .hero__copy > .btn-row,
html.is-slider-drag .hero--compare .hero__trust {
  opacity: 0 !important;
}

html.is-slider-drag .site-header {
  pointer-events: none;
}

/* ---- 4. the scrim materialises, it does not travel ----
   Fixed, complementary masks and opacity only. The left layer owns the left
   side of all three bands; the right side is split into the vertical bands and
   the copy band so the top and floor can come in a touch ahead of the middle. */
.hero__shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-repeat: no-repeat;
}

/* left: header band, floor band, copy band */
.hero__shade--a {
  background-image:
    linear-gradient(180deg, rgba(9, 21, 31, 0.78) 0%, rgba(9, 21, 31, 0.4) 5%, rgba(9, 21, 31, 0) 13%),
    linear-gradient(0deg, rgba(9, 21, 31, 0.6) 0%, rgba(9, 21, 31, 0.28) 5%, rgba(9, 21, 31, 0) 12%),
    linear-gradient(90deg, rgba(9, 21, 31, 0.72) 0%, rgba(9, 21, 31, 0.66) 20%, rgba(9, 21, 31, 0.5) 38%, rgba(9, 21, 31, 0.27) 54%, rgba(9, 21, 31, 0.09) 66%, rgba(9, 21, 31, 0) 72%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 42%, transparent 54%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 42%, transparent 54%, transparent 100%);
  transition: opacity 700ms cubic-bezier(0.25, 0.08, 0.2, 1) 0ms;
}

/* right, vertical bands: header and floor only, in slightly sooner */
.hero__shade--bt {
  background-image:
    linear-gradient(180deg, rgba(9, 21, 31, 0.78) 0%, rgba(9, 21, 31, 0.4) 5%, rgba(9, 21, 31, 0) 13%),
    linear-gradient(0deg, rgba(9, 21, 31, 0.6) 0%, rgba(9, 21, 31, 0.28) 5%, rgba(9, 21, 31, 0) 12%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 42%, #000 54%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 42%, #000 54%, #000 100%);
  transition: opacity 780ms cubic-bezier(0.25, 0.08, 0.2, 1) 180ms;
}

/* right, copy band */
.hero__shade--bm {
  background-image:
    linear-gradient(90deg, rgba(9, 21, 31, 0.72) 0%, rgba(9, 21, 31, 0.66) 20%, rgba(9, 21, 31, 0.5) 38%, rgba(9, 21, 31, 0.27) 54%, rgba(9, 21, 31, 0.09) 66%, rgba(9, 21, 31, 0) 72%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 42%, #000 54%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 42%, #000 54%, #000 100%);
  transition: opacity 850ms cubic-bezier(0.25, 0.08, 0.2, 1) 330ms;
}

/* A phone has no clear half to protect: the copy spans the width, so the scrim
   covers the frame with a gentler fall. */

/* On a very large display the copy column grows with the photo, so the type
   grows with it instead of looking undersized in a wide measure. */
@media (min-width: 1700px) {
  .hero--compare .hero__inner h1 {
    font-size: clamp(4.8rem, 3.4vw, 5.4rem);
  }

  .hero--compare .hero__lede {
    font-size: 1.2rem;
  }
}


/* While the slider is held, every scrim, wash and text shadow leaves the
   photograph alone: the whole point is comparing the two frames. */
html.is-slider-drag .hero__shade {
  opacity: 0;
  transition-duration: 300ms;
  transition-delay: 0ms;
}

html.is-slider-drag .hero--compare .hero__media::after {
  opacity: 0 !important;
}

html.is-slider-drag .hero--compare h1,
html.is-slider-drag .hero--compare .hero__lede,
html.is-slider-drag .hero--compare .hero__trust {
  text-shadow: none !important;
}

/* The drawer's two calls to action share a row instead of stacking. */
.mobile-nav__actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

/* the drawer's own .mobile-nav .btn margin would drop the gold button out of
   line with the call pill */
.mobile-nav__actions .btn,
.mobile-nav__actions .btn--gold {
  margin-top: 0;
  min-height: 46px;
  flex: 1 1 auto;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

.mobile-nav__actions .mn-short {
  display: none;
}

@media (max-width: 430px) {
  .mobile-nav__actions .mn-long {
    display: none;
  }

  .mobile-nav__actions .mn-short {
    display: inline;
  }
}

.mobile-nav__actions .mobile-nav__call {
  min-height: 46px;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  padding-inline: 0.9rem;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  text-decoration: none;
}

/* Very narrow phones: tighten both pills rather than let the row spill past
   the drawer padding. */
@media (max-width: 400px) {
  .mobile-nav__actions {
    gap: 0.45rem;
  }

  .mobile-nav__actions .btn--gold {
    padding-inline: 0.7rem;
    font-size: 0.9rem;
  }

  .mobile-nav__actions .mobile-nav__call {
    padding-inline: 0.6rem;
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}


/* Narrow screens: the panel tucks in closer, since the copy fills the column. */


/* The three numbers read as a set: same number height, labels starting on the
   same line however many lines they need. */
.hero--compare .hero__trust-item {
  align-content: start;
}

.hero--compare .hero__trust-num {
  line-height: 1.1;
}

@media (max-width: 640px) {
  .hero--compare .hero__trust-label {
    min-height: 2.5em;
  }
}

/* The copy keeps its own shadow so it holds while the scrim is still on its
   way in; the drag state removes it so the photograph is clean under a thumb. */
.hero--compare h1,
.hero--compare .hero__lede,
.hero--compare .hero__trust {
  text-shadow: 0 1px 2px rgba(5, 12, 20, 0.55), 0 12px 34px rgba(5, 12, 20, 0.45);
}


/* A phone has no clear half to protect: the copy runs almost the full width, so
   the middle band reaches further right and the layers cross further out. The
   vertical bands stay tighter because the frame is narrow. */
@media (max-width: 900px) {
  .hero__shade--a {
    background-image:
      linear-gradient(180deg, rgba(9, 21, 31, 0.7) 0%, rgba(9, 21, 31, 0.32) 5%, rgba(9, 21, 31, 0) 11%),
      linear-gradient(0deg, rgba(9, 21, 31, 0.56) 0%, rgba(9, 21, 31, 0.24) 5%, rgba(9, 21, 31, 0) 10%),
      linear-gradient(90deg, rgba(9, 21, 31, 0.7) 0%, rgba(9, 21, 31, 0.62) 34%, rgba(9, 21, 31, 0.48) 58%, rgba(9, 21, 31, 0.3) 76%, rgba(9, 21, 31, 0.12) 90%, rgba(9, 21, 31, 0) 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 52%, transparent 76%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 52%, transparent 76%, transparent 100%);
  }

  .hero__shade--bt {
    background-image:
      linear-gradient(180deg, rgba(9, 21, 31, 0.7) 0%, rgba(9, 21, 31, 0.32) 5%, rgba(9, 21, 31, 0) 11%),
      linear-gradient(0deg, rgba(9, 21, 31, 0.56) 0%, rgba(9, 21, 31, 0.24) 5%, rgba(9, 21, 31, 0) 10%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 52%, #000 76%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, transparent 52%, #000 76%, #000 100%);
  }

  .hero__shade--bm {
    background-image:
      linear-gradient(90deg, rgba(9, 21, 31, 0.7) 0%, rgba(9, 21, 31, 0.62) 34%, rgba(9, 21, 31, 0.48) 58%, rgba(9, 21, 31, 0.3) 76%, rgba(9, 21, 31, 0.12) 90%, rgba(9, 21, 31, 0) 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 52%, #000 76%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, transparent 52%, #000 76%, #000 100%);
  }
}