/*
Theme Name: Spivey's Heating & Air
Theme URI: https://www.spiveyshvac.com/
Author: Spivey's Heating & Air
Description: Lightweight WordPress theme converted from the Spivey's Heating & Air static HTML template. Design, layout, typography and interactions are unchanged.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: spiveys
*/
/* =========================================================================
   Spivey's Heating & Air — Lead generation homepage
   Principles: white page, calm palette, square images and tiles,
   generous spacing, one clear action in every section, nothing moves.
   ========================================================================= */

:root {
  /* Brand (from the logo) */
  --navy: #001A3D;
  --blue: #0657B8;          /* primary action color */
  --blue-dark: #004494;
  --sun: #F99A0E;           /* used only inside the logo artwork */

  /* Neutrals */
  --white: #FFFFFF;
  --text: #2E3A52;
  --muted: #5A6680;
  --line: #E3E8EF;
  --line-strong: #CBD3DF;
  --tint: #F4F7FB;          /* hover and placeholder only */

  /* Type */
  --font-head: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-h1: clamp(2.4rem, 1.5rem + 3vw, 4rem);
  --fs-h2: clamp(1.95rem, 1.45rem + 1.6vw, 2.85rem);
  --fs-h3: clamp(1.15rem, 1.08rem + 0.25vw, 1.3rem);
  --fs-lede: clamp(1.08rem, 1.02rem + 0.22vw, 1.2rem);
  --fs-body: 1.0625rem;

  /* Space */
  --container: 1240px;
  --gutter: clamp(20px, 5vw, 56px);
  --section: clamp(96px, 10vw, 152px);
  --gap: clamp(24px, 2.8vw, 40px);
  --radius: 8px;
  --header-h: 88px;
}

/* ---------------------------------------------------------------- Base */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;               /* smooth scrolling is switched on in the Motion section */
  scroll-padding-top: calc(var(--header-h) + 24px);
  background: var(--white);
  color-scheme: light;
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
[hidden] { display: none !important; }

/* Base interaction: color changes only. Lifts, fades and reveals live in the Motion section at the end. */
:root { --ease-out: cubic-bezier(.22, .61, .36, 1); --ease-soft: cubic-bezier(.2, .7, .2, 1); }
a, button, summary, .btn { transition: color .2s var(--ease-out), background-color .2s var(--ease-out), border-color .2s var(--ease-out); }

:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 4px; }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--rule { border-top: 1px solid var(--line); }

.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;
}
.skip-link { position: absolute; left: 16px; top: -80px; z-index: 300; background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 6px; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 16px; }

/* ---------------------------------------------------------------- Type */
.kicker { font-weight: 600; font-size: 0.95rem; color: var(--blue); margin-bottom: 16px; }
.section-title, .hero__title, .modal__title {
  font-family: var(--font-head); font-weight: 700; color: var(--navy);
  letter-spacing: -0.015em; text-wrap: balance;
}
.section-title { font-size: var(--fs-h2); line-height: 1.12; }
.section-lede { font-size: var(--fs-lede); color: var(--muted); line-height: 1.7; max-width: 58ch; margin-top: 20px; text-wrap: pretty; }
.section-head { max-width: 760px; margin-bottom: clamp(56px, 5.5vw, 80px); }
.mini-title { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--navy); margin: 36px 0 16px; }
.note { margin-top: 28px; color: var(--muted); }
.caption { margin-top: 16px; font-size: 0.88rem; color: var(--muted); }

/* ---------------------------------------------------------------- Buttons & links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 54px; padding: 0 26px;
  background: var(--blue); color: #fff; border: 2px solid var(--blue); border-radius: 6px;
  font-family: var(--font-body); font-weight: 700; font-size: 1rem; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.btn--outline { background: #fff; color: var(--navy); border-color: var(--line-strong); }
.btn--outline:hover { background: var(--tint); border-color: var(--navy); }
.btn--lg { min-height: 60px; padding: 0 30px; font-size: 1.05rem; }
.btn--sm { min-height: 48px; padding: 0 20px; font-size: 0.98rem; }
.btn--block { display: flex; width: 100%; white-space: normal; }

.link { color: var(--blue); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.link:hover { color: var(--navy); }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 40px; }
.cta-row--spaced { margin-top: clamp(48px, 5vw, 64px); gap: 16px 28px; }

/* Check list (static marks) */
.checks { display: grid; gap: 14px; }
.checks li { position: relative; padding-left: 34px; line-height: 1.55; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 0.18em; width: 20px; height: 20px; border-radius: 4px;
  background: var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.2l3 3 6-6.4' fill='none' stroke='%230657B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.checks--sm { gap: 10px; font-size: 0.98rem; }

/* Square frame */
.sq { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius); background: var(--tint); }
.sq img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- Announcement banner */
.announce { background: var(--navy); color: #fff; font-size: 0.95rem; }
.announce__inner { position: relative; display: flex; align-items: center; justify-content: center; min-height: 48px; padding-block: 10px; padding-right: calc(var(--gutter) + 40px); }
.announce__text { text-align: center; line-height: 1.45; }
.announce__text a { color: #fff; font-weight: 700; text-underline-offset: 3px; margin-left: 6px; }
.announce__close { position: absolute; right: var(--gutter); top: 50%; margin-top: -20px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: none; color: #fff; border-radius: 6px; }
.announce__close:hover { background: rgba(255,255,255,.12); }
.announce__close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.announce :focus-visible { outline-color: #fff; }

/* ---------------------------------------------------------------- Header */
.site-header { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; align-items: center; gap: 32px; height: var(--header-h); }
.brand { flex: none; display: block; }
.brand__logo { height: 64px; width: auto; }

.primary-nav { margin-left: auto; }
.primary-nav__list { display: flex; align-items: center; gap: 4px; }
.primary-nav__link {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; border: 0; background: none; border-radius: 6px;
  font-weight: 600; font-size: 0.98rem; color: var(--navy); text-decoration: none;
}
.primary-nav__link:hover { color: var(--blue); }
.chev { width: 11px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.has-menu { position: relative; }
.menu {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 260px; padding: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 16px 40px -20px rgba(0, 26, 61, .35);
}
.menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.has-menu.is-open .menu { display: block; }
.menu a { display: block; padding: 12px 14px; border-radius: 6px; text-decoration: none; font-weight: 600; color: var(--navy); }
.menu a:hover { background: var(--tint); }

.site-header__actions { display: flex; align-items: center; gap: 20px; flex: none; }
.call-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--navy); text-decoration: none; padding: 10px 4px; }
.call-link svg { width: 18px; height: 18px; fill: var(--blue); }
.call-link:hover span { text-decoration: underline; text-underline-offset: 4px; }

.menu-toggle { display: none; width: 48px; height: 48px; border: 1px solid var(--line-strong); background: #fff; border-radius: 6px; align-items: center; justify-content: center; }
.menu-toggle__bars { position: relative; width: 20px; height: 12px; }
.menu-toggle__bars span { position: absolute; left: 0; width: 100%; height: 2px; background: var(--navy); }
.menu-toggle__bars span:first-child { top: 1px; }
.menu-toggle__bars span:last-child { top: 9px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:first-child { top: 5px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:last-child { top: 5px; transform: rotate(-45deg); }

.mobile-menu { position: absolute; left: 0; right: 0; top: 100%; height: calc(100dvh - var(--header-h)); overflow-y: auto; background: #fff; border-top: 1px solid var(--line); padding: 16px 0 140px; }
.mobile-menu__links a { display: block; padding: 16px 0; border-bottom: 1px solid var(--line); font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; color: var(--navy); text-decoration: none; }
.mobile-menu__ctas { display: grid; gap: 12px; margin-top: 32px; }
.mobile-menu__meta { margin-top: 28px; color: var(--muted); font-size: 0.95rem; }

/* ---------------------------------------------------------------- Hero */
.hero { padding-block: clamp(28px, 3vw, 48px) clamp(72px, 7vw, 112px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 112px); align-items: start; }
.hero__title { font-size: var(--fs-h1); line-height: 1.08; max-width: 14ch; }
.hero__lede { font-size: var(--fs-lede); color: var(--muted); margin-top: 28px; max-width: 52ch; }
.hero__call { margin-top: 24px; color: var(--muted); }
.hero__checks { grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: 40px; margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--line); }
.hero__media { width: 100%; max-width: 580px; justify-self: end; }

/* ---------------------------------------------------------------- Trust strip */
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.trust__item { display: flex; align-items: center; gap: 16px; padding: 40px 28px; font-size: 0.95rem; line-height: 1.45; color: var(--muted); }
.trust__item + .trust__item { border-left: 1px solid var(--line); }
.trust__item:first-child { padding-left: 0; }
.trust__item img { width: 64px; height: 64px; flex: none; object-fit: contain; }
.trust__item img.trust__carrier { width: 84px; height: auto; }
.trust__item b { display: block; color: var(--navy); font-weight: 700; margin-bottom: 2px; }

/* ---------------------------------------------------------------- Tiles */
.tiles {
  --cols: 1; --tile-gap: var(--gap);
  container-type: inline-size;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--tile-gap); row-gap: var(--tile-gap);
}
.tiles--4 { --cols: 4; }
.tiles--3 { --cols: 3; }
/* Text cards size to their content; cards in a row share one height. */
.tiles > li { min-width: 0; }

.svc { display: flex; flex-direction: column; }
.svc__title { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-h3); color: var(--navy); margin-top: 28px; line-height: 1.25; }
.svc__text { margin-top: 12px; color: var(--muted); font-size: 1rem; flex: 1; }
.svc__ctas { display: grid; justify-items: start; gap: 18px; margin-top: 28px; }


.problem-list { margin-top: 36px; border-top: 1px solid var(--line-strong); }
.problem-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px 32px; padding: 20px 0; border-bottom: 1px solid var(--line-strong); }
.problem-list p { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem); line-height: 1.35; color: var(--navy); }
.problem-list .link { flex-shrink: 0; white-space: nowrap; }

.help-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px;
  margin-top: clamp(56px, 5.5vw, 80px); padding: clamp(28px, 3vw, 40px); border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.help-strip p { font-size: 1.1rem; color: var(--text); }
.help-strip b { color: var(--navy); }
.help-strip .cta-row { margin-top: 0; }

.offer {
  display: flex; flex-direction: column; gap: 28px;
  padding: clamp(28px, 3vw, 36px); border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.offer > .btn { margin-top: auto; }
.offer__title { font-family: var(--font-body); font-weight: 600; font-size: 1rem; color: var(--muted); }
.offer__value { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.5rem, 1.25rem + 0.7vw, 2rem); line-height: 1.12; color: var(--navy); margin-top: 12px; letter-spacing: -0.02em; }
.offer__text { margin-top: 12px; color: var(--muted); font-size: 0.98rem; line-height: 1.55; }

.review {
  display: flex; flex-direction: column; gap: 24px;
  padding: clamp(28px, 3vw, 40px); border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.review blockquote p { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.7rem); line-height: 1.3; color: var(--navy); }
.review__name { color: var(--muted); }
.review__name b { color: var(--navy); margin-right: 8px; }

/* ---------------------------------------------------------------- Split (square image + copy) */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(56px, 8vw, 128px); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media.sq { width: 100%; }
.split__copy > p:not(.kicker):not(.section-lede):not(.note):not(.statement) { margin-top: 20px; }

.seasons { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 36px; }
.seasons > div { padding-top: 18px; border-top: 1px solid var(--line-strong); }
.seasons dt { font-family: var(--font-head); font-weight: 700; color: var(--navy); }
.seasons dd { color: var(--muted); font-size: 0.98rem; margin-top: 4px; }

.pull { margin-top: 32px; padding-left: 24px; border-left: 3px solid var(--line-strong); }
.pull p { font-family: var(--font-head); font-weight: 600; font-size: 1.2rem; line-height: 1.5; color: var(--navy); }

.values__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.75rem); color: var(--navy); margin-top: clamp(88px, 9vw, 136px); margin-bottom: 40px; }
.values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.values li { padding-top: 24px; border-top: 1px solid var(--line-strong); }
.values h4, .values h3, .reasons h3, .steps h4, .steps h3 { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; line-height: 1.3; color: var(--navy); }
.values p, .reasons p, .steps p { margin-top: 12px; color: var(--muted); font-size: 1rem; }

/* ---------------------------------------------------------------- Carrier */
.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cobrand { display: flex; align-items: center; gap: 20px; margin-bottom: 36px; }
.cobrand img:first-child { height: 44px; width: auto; }
.cobrand img:last-child { height: 60px; width: auto; }
.cobrand__plus { font-size: 1.4rem; color: var(--muted); }
#carrier .checks { margin-top: 32px; }
.statement { margin-top: 36px; padding-left: 20px; border-left: 3px solid var(--blue); font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; line-height: 1.4; color: var(--navy); }

/* ---------------------------------------------------------------- Why + steps */
.reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px var(--gap); }
.reasons li { padding-top: 24px; border-top: 1px solid var(--line-strong); }
.steps-wrap { margin-top: 0; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.steps__num {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 24px;
  border: 1px solid var(--line-strong); border-radius: 6px;
  font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; color: var(--navy);
}

/* ---------------------------------------------------------------- FAQ */
.faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 7vw, 112px); align-items: start; }
.faq__more { margin-top: 28px; }
.faq__list { border-top: 1px solid var(--line-strong); }
.faq__list details { border-bottom: 1px solid var(--line-strong); }
.faq__list summary {
  position: relative; list-style: none; cursor: pointer; padding: 26px 56px 26px 0;
  font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; line-height: 1.4; color: var(--navy);
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; margin-top: -18px; width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: 6px; font-family: var(--font-body); font-weight: 500; font-size: 1.3rem; line-height: 1; color: var(--navy);
}
.faq__list details[open] summary::after { content: "\2212"; }
.faq__list summary:hover { color: var(--blue); }
.faq__list details p { padding: 0 56px 28px 0; color: var(--muted); }

/* ---------------------------------------------------------------- Contact + lead form */
.contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 7vw, 112px); align-items: start; }
.contact .checks { margin-top: 36px; }
.details { display: grid; gap: 20px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.details dt { font-weight: 700; color: var(--navy); font-size: 0.95rem; }
.details dd { color: var(--muted); }
.contact__form { container-type: inline-size; padding: 8px; border: 1px solid var(--line-strong); border-radius: var(--radius); }
.lead-frame { display: block; width: 100%; height: 1110px; border: 0; background: #fff; }
@container (min-width: 540px) { .lead-frame { height: 860px; } }
.contact__fallback { padding: 12px 16px 8px; font-size: 0.92rem; color: var(--muted); }

/* ---------------------------------------------------------------- Footer */
.site-footer { border-top: 1px solid var(--line); }
.site-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 48px; padding-block: clamp(72px, 7vw, 104px) 56px; }
.site-footer__brand img { width: 200px; height: auto; }
.site-footer__brand p { margin: 20px 0 28px; max-width: 32ch; color: var(--muted); }
.site-footer__col h2 { font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--navy); margin-bottom: 16px; }
.site-footer__col li a { display: inline-block; padding: 6px 0; color: var(--text); text-decoration: none; }
.site-footer__col li a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
.site-footer__col address, .site-footer__col p { color: var(--muted); font-size: 0.98rem; }
.site-footer__col p { margin-top: 12px; }
.social { display: flex; gap: 10px; margin-top: 20px; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; padding: 0 !important; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--navy); }
.social a:hover { border-color: var(--navy); background: var(--tint); }
.social svg { width: 18px; height: 18px; fill: currentColor; }
.site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-block: 24px 32px; border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--muted); }
.site-footer__base ul { display: flex; gap: 24px; }
.site-footer__base a { display: inline-block; padding: 6px 0; color: var(--muted); }

.action-bar { display: none; }

/* ---------------------------------------------------------------- Popups (native <dialog>) */
.modal {
  padding: 0; border: 0; border-radius: 12px; background: #fff; color: var(--text);
  width: min(600px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto;
  box-shadow: 0 30px 80px -30px rgba(0, 26, 61, .45);
}
.modal::backdrop { background: rgba(0, 26, 61, .55); }
.modal__title { font-size: clamp(1.45rem, 1.3rem + 0.6vw, 1.85rem); line-height: 1.2; }
.modal__title:focus { outline: none; }
.modal__close {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; color: var(--navy);
}
.modal__close:hover { border-color: var(--navy); background: var(--tint); }
.modal__close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }

.modal--lead { width: min(620px, calc(100vw - 32px)); }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 28px 28px 20px; border-bottom: 1px solid var(--line); }
.modal__hint { margin-top: 8px; color: var(--muted); font-size: 0.98rem; line-height: 1.55; }
.modal__body { container-type: inline-size; padding: 8px 12px; }
.modal__foot { padding: 16px 28px 24px; border-top: 1px solid var(--line); font-size: 0.95rem; color: var(--muted); }

.modal--promo, .modal--exit { width: min(880px, calc(100vw - 32px)); }
.modal--promo > .modal__close, .modal--exit > .modal__close { position: absolute; right: 16px; top: 16px; z-index: 1; }
.promo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.promo__media { border-radius: 0; }
.promo__copy { padding: 48px 44px 40px; }
.promo__copy > p:not(.kicker) { margin-top: 16px; color: var(--muted); }
.promo__copy .checks { margin-top: 24px; }
.promo__offer { padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 6px; font-size: 0.95rem; }
.promo__offer b { color: var(--navy); }
.promo__ctas { display: grid; gap: 12px; margin-top: 28px; }
.promo__dismiss { margin-top: 16px; padding: 10px 0; border: 0; background: none; color: var(--muted); font-size: 0.95rem; text-decoration: underline; text-underline-offset: 4px; }
.promo__dismiss:hover { color: var(--navy); }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1180px) {
  .call-link span { display: none; }
  .call-link { width: 48px; height: 48px; justify-content: center; padding: 0; border: 1px solid var(--line-strong); border-radius: 6px; }
}

@media (max-width: 1100px) {
  :root { --header-h: 76px; }
  .primary-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .site-header__actions { margin-left: auto; gap: 10px; }
  .brand__logo { height: 54px; }

  .tiles--4 { --cols: 2; row-gap: 72px; }
  .trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust__item:nth-child(3) { border-left: 0; padding-left: 0; }
  .trust__item:nth-child(n+3) { border-top: 1px solid var(--line); }
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 979px) {
  .tiles--3 { --cols: 2; }
}

@media (max-width: 679px) {
  .offers, .reviews { --cols: 1; }
}

@media (max-width: 899px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { justify-self: start; max-width: 640px; }
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .split__media { max-width: 640px; }
  .reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq, .contact__grid { grid-template-columns: 1fr; }
  .promo { grid-template-columns: 1fr; }
  .promo__media { display: none; }
  .promo__copy { padding: 56px 28px 32px; }
}

@media (max-width: 767px) {
  .steps { grid-template-columns: 1fr; gap: 40px; }
  .help-strip { flex-direction: column; align-items: stretch; }
  .help-strip .cta-row { flex-direction: column; align-items: stretch; }

  .action-bar {
    position: fixed; z-index: 90; left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid var(--line-strong);
  }
  .action-bar a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border-radius: 6px; font-weight: 700; text-decoration: none; }
  .action-bar svg { width: 18px; height: 18px; fill: currentColor; }
  .action-bar__call { color: var(--navy); border: 1px solid var(--line-strong); }
  .action-bar__schedule { color: #fff; background: var(--blue); }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .menu-open .action-bar { display: none; }
}

@media (max-width: 479px) {
  .site-header__cta { display: none; }
  .site-header__inner { gap: 16px; }
}

@media (max-width: 599px) {
  .hero__checks { grid-template-columns: 1fr; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { width: 100%; }
  .cta-row .link { align-self: flex-start; }
  .tiles--4 { --cols: 1; row-gap: 64px; }
  .offers, .reviews { --cols: 1; }
  .trust__list { grid-template-columns: 1fr; }
  .trust__item, .trust__item:first-child, .trust__item:nth-child(3) { padding: 24px 0; border-left: 0; }
  .trust__item + .trust__item { border-top: 1px solid var(--line); }
  .values, .reasons { grid-template-columns: 1fr; }
  .seasons { grid-template-columns: 1fr; }
  .photo-grid { gap: 10px; }
  .faq__list summary { font-size: 1.05rem; padding-right: 52px; }
  .faq__list details p { padding-right: 0; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__brand img { width: 170px; }
  .modal__head { padding: 22px 20px 16px; }
  .modal__body { padding: 4px 4px; }
  .modal__foot { padding: 14px 20px 20px; }
}

/* Page does not scroll behind an open popup */
html.modal-open { overflow: hidden; }

/* =========================================================================
   Inner pages
   ========================================================================= */
.primary-nav__link[aria-current="page"], .menu a[aria-current="page"] { color: var(--blue); }
.primary-nav__link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--blue); border-radius: 0; }
.mobile-menu__links a[aria-current="page"] { color: var(--blue); }
.mobile-menu__links .sub a { padding-left: 20px; font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; }

/* Breadcrumbs */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px 0; font-size: 0.92rem; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin: 0 10px; color: var(--line-strong); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current="page"] { color: var(--navy); font-weight: 600; }

/* Page hero */
.page-hero { padding-block: clamp(20px, 2.2vw, 32px) clamp(72px, 7vw, 112px); }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 112px); align-items: start; margin-top: clamp(24px, 2.6vw, 40px); }
.page-hero__title { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: clamp(2.2rem, 1.45rem + 2.5vw, 3.5rem); line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; max-width: 18ch; }
.page-hero .hero__lede { max-width: 54ch; }
.page-hero__media { width: 100%; max-width: 540px; justify-self: end; }
.page-hero--text .page-hero__grid { grid-template-columns: 1fr; }
.page-hero--text .page-hero__title { max-width: 22ch; }

/* Generic content blocks */
.prose-block > * + * { margin-top: 20px; }
.prose-block h3 { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; color: var(--navy); margin-top: 36px; }
.split__copy .checks, .split__copy .cols-checks { margin-top: 32px; }

.card { display: flex; flex-direction: column; gap: 14px; padding: clamp(28px, 3vw, 36px); border: 1px solid var(--line-strong); border-radius: var(--radius); }
.card h3 { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-h3); line-height: 1.25; color: var(--navy); }
.card p { color: var(--muted); font-size: 1rem; }
.card .link { margin-top: auto; padding-top: 8px; align-self: flex-start; }

.cols-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px var(--gap); }
.cols-checks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.quote-inline { padding: 28px 32px; border: 1px solid var(--line-strong); border-radius: var(--radius); }
.quote-inline p { font-family: var(--font-head); font-weight: 600; font-size: 1.2rem; line-height: 1.45; color: var(--navy); }
.quote-inline footer { margin-top: 14px; color: var(--muted); font-size: 0.98rem; }
.quote-inline footer b { color: var(--navy); }

.badge-row { display: flex; flex-wrap: wrap; align-items: center; gap: 28px 40px; margin-top: 36px; }
.badge-row img { height: 72px; width: auto; }
.badge-row img.badge-row__carrier { height: 52px; }

.map { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--tint); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Closing call-to-action panel (inner pages) */
.cta-panel { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px clamp(40px, 6vw, 96px); align-items: center; padding: clamp(36px, 5vw, 64px); border: 1px solid var(--line-strong); border-radius: 12px; }
.cta-panel .cta-row { margin-top: 0; justify-content: flex-end; }
.cta-panel__meta { margin-top: 16px; color: var(--muted); }

/* Legal pages */
.legal { max-width: 760px; }
.legal h2 { font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; line-height: 1.3; color: var(--navy); margin-top: 56px; }
.legal h3 { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: var(--navy); margin-top: 28px; }
.legal p, .legal ul { margin-top: 16px; }
.legal ul { list-style: disc; padding-left: 22px; }
.legal li + li { margin-top: 6px; }
.legal address { margin-top: 16px; line-height: 1.7; }
.legal__updated { color: var(--muted); }

/* Reviews page */
.review--plain { min-height: 0; }

@media (max-width: 1100px) {
  .cols-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .page-hero__grid { grid-template-columns: 1fr; }
  .page-hero__media { justify-self: start; max-width: 640px; }
  .cta-panel { grid-template-columns: 1fr; }
  .cta-panel .cta-row { justify-content: flex-start; }
}
@media (max-width: 599px) {
  .cols-checks, .cols-checks--2 { grid-template-columns: 1fr; }
  .badge-row img { height: 60px; }
  .quote-inline { padding: 24px; }
}
.trust__title { padding-top: 32px; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--navy); }
.trust__title + .trust__list .trust__item { padding-top: 24px; }

/* Reviews page: featured quote + stacked review rows */
.tiles--2 { --cols: 2; }
.quote-inline + .tiles, .tiles + .tiles { margin-top: var(--gap); }
.quote-inline--feature { padding: clamp(32px, 4vw, 56px); }
.quote-inline--feature p { font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem); line-height: 1.35; max-width: 46ch; }
@media (max-width: 679px) { .tiles--2 { --cols: 1; } }

/* Problem lists stack on phones; text-only card grids go single column. */
@media (max-width: 599px) {
  .problem-list li { flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 0; }
}
@media (max-width: 679px) { .cards { --cols: 1; } }
.section > .container:first-child > .help-strip:first-child { margin-top: 0; }

/* Legal pages: keep the text close to its title */
.page-hero--text { padding-bottom: clamp(40px, 4vw, 56px); }
.page-hero--text + .section { padding-top: clamp(48px, 5vw, 72px); }

/* After the Cool Cash card is removed (Nov 21, 2026), the two remaining offers share the row. */
@media (min-width: 680px) { .offers:not(:has(> li:nth-child(3))) { --cols: 2; } }


/* ================================================================ Motion
   Modern but restrained. Hover and focus changes take 0.2 to 0.3s, one-time reveals about 0.7s.
   Only opacity and transform animate, so the browser can run them on the GPU without layout work.
   No animation library. Nothing loops, nothing autoplays. Everything below is skipped for visitors
   whose device asks for reduced motion. */
.site-header.is-scrolled { box-shadow: 0 10px 24px -20px rgba(0, 26, 61, .5); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  @keyframes sp-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes sp-settle { from { transform: scale(1.045); } to { transform: none; } }
  @keyframes sp-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes sp-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  @keyframes sp-pop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
  @keyframes sp-bar { from { transform: translateY(100%); } to { transform: none; } }

  /* Header: soft shadow fades in once the page scrolls */
  .site-header { transition: box-shadow .3s var(--ease-out); }

  /* Hero: copy settles in once on load (pure CSS, no waiting on scripts).
     The hero photo is never hidden; it only eases from a slight zoom, so page speed is unaffected. */
  .hero__copy > *,
  .page-hero .crumbs,
  .page-hero__grid > div > *,
  .page-hero .contact__copy > * { animation: sp-rise .7s var(--ease-soft) both; }
  .hero__copy > :nth-child(2), .page-hero__grid > div > :nth-child(1), .page-hero .contact__copy > :nth-child(1) { animation-delay: .06s; }
  .hero__copy > :nth-child(3), .page-hero__grid > div > :nth-child(2), .page-hero .contact__copy > :nth-child(2) { animation-delay: .12s; }
  .hero__copy > :nth-child(4), .page-hero__grid > div > :nth-child(3), .page-hero .contact__copy > :nth-child(3) { animation-delay: .18s; }
  .hero__copy > :nth-child(5), .page-hero__grid > div > :nth-child(4), .page-hero .contact__copy > :nth-child(4) { animation-delay: .24s; }
  .hero__copy > :nth-child(n+6), .page-hero__grid > div > :nth-child(n+5), .page-hero .contact__copy > :nth-child(n+5) { animation-delay: .3s; }
  .hero__media img, .page-hero__media img { animation: sp-settle 1.2s var(--ease-soft) both; }

  /* Scroll reveals: added by script.js only when motion is allowed, removed once each block is shown */
  .reveal-ready .rv { opacity: 0; transform: translateY(24px); }
  .reveal-ready .rv.rv-in { opacity: 1; transform: none; transition: opacity .6s var(--ease-soft), transform .7s var(--ease-soft); transition-delay: var(--rv-delay, 0s); }

  /* Buttons: a 1px lift with a soft shadow, pressed state settles back */
  .btn { transition: color .2s var(--ease-out), background-color .2s var(--ease-out), border-color .2s var(--ease-out), box-shadow .25s var(--ease-out), transform .25s var(--ease-out); }
  .btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(0, 26, 61, .5); }
  .btn--outline:hover { box-shadow: 0 10px 22px -14px rgba(0, 26, 61, .3); }
  .btn:active { transform: none; box-shadow: none; transition-duration: .08s; }

  /* Text links: the underline eases away from the text */
  .link, .call-link span { transition: color .2s var(--ease-out), text-underline-offset .2s var(--ease-out); }
  .link:hover { text-underline-offset: 6px; }

  /* Main navigation: underline grows from the left; dropdown and mobile menu fade in */
  .primary-nav__link { position: relative; }
  .primary-nav__link::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px;
    background: var(--blue); transform: scaleX(0); transform-origin: left center; transition: transform .25s var(--ease-out);
  }
  .primary-nav__link:hover::after, .primary-nav__toggle[aria-expanded="true"]::after { transform: scaleX(1); }
  .primary-nav__link[aria-current="page"]::after { display: none; }
  .chev { transition: transform .25s var(--ease-out); }
  .has-menu.is-open .chev { transform: rotate(180deg); }
  .has-menu.is-open .menu { animation: sp-drop .22s var(--ease-out) both; }
  .menu a { transition: background-color .2s var(--ease-out), color .2s var(--ease-out); }
  .mobile-menu:not([hidden]) { animation: sp-drop .28s var(--ease-out) both; }
  .menu-toggle__bars span { transition: transform .25s var(--ease-out), top .25s var(--ease-out); }

  /* Service tiles and photo grids: the photo eases in slightly inside its square frame */
  .svc .sq img, .photo-grid img { transition: transform .8s var(--ease-soft); }
  .svc:hover .sq img, .photo-grid li:hover img { transform: scale(1.045); }
  .svc__title { transition: color .2s var(--ease-out); }
  .svc:hover .svc__title { color: var(--blue); }

  /* Offer and info cards: border darkens with a gentle lift */
  .offer, .card { transition: border-color .25s var(--ease-out), box-shadow .3s var(--ease-out), transform .3s var(--ease-out); }
  .offer:hover, .card:hover { border-color: var(--navy); transform: translateY(-3px); box-shadow: 0 18px 36px -26px rgba(0, 26, 61, .5); }

  /* Problem list: the line nudges toward its button */
  .problem-list p { transition: transform .3s var(--ease-out), color .2s var(--ease-out); }
  .problem-list li:hover p { transform: translateX(6px); color: var(--blue); }

  /* FAQ: the +/- turns, and the answer fades in (and slides open where the browser supports it) */
  .faq__list summary::after { transition: transform .3s var(--ease-out), border-color .2s var(--ease-out), background-color .2s var(--ease-out); }
  .faq__list details[open] summary::after { transform: rotate(180deg); }
  .faq__list summary:hover::after { border-color: var(--navy); background: var(--tint); }
  .faq__list details[open] p { animation: sp-fade .35s var(--ease-out) both; }
  @supports selector(::details-content) {
    :root { interpolate-size: allow-keywords; }
    .faq__list details::details-content { height: 0; overflow: clip; transition: height .35s var(--ease-out), content-visibility .35s allow-discrete; }
    .faq__list details[open]::details-content { height: auto; }
  }

  /* Popups: fade and settle into place over a fading backdrop */
  .modal[open] { animation: sp-pop .3s var(--ease-out) both; }
  .modal[open]::backdrop { animation: sp-fade .3s ease both; }

  /* Mobile call bar slides up once, just after the page loads */
  .action-bar { animation: sp-bar .5s var(--ease-soft) .35s both; }
}

/* About page: Our story. Photo stays in view beside the longer text on desktop. */
.split--story { align-items: start; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split--story .split__media { position: sticky; top: calc(var(--header-h) + 40px); }
.split--story .split__copy > p:not(.kicker):not(.section-lede) { max-width: 64ch; }
@media (max-width: 899px) {
  .split--story { grid-template-columns: minmax(0, 1fr); }
  .split--story .split__media { position: static; }
}

/* ================================================================ About us page */
.page-hero__photo { width: 100%; max-width: 540px; justify-self: end; }
.page-hero__photo .page-hero__media { max-width: none; }
.story { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(48px, 7vw, 112px); align-items: start; }
.story__aside { position: sticky; top: calc(var(--header-h) + 40px); }
.facts { margin-top: 36px; border-top: 1px solid var(--line-strong); }
.facts > div { padding: 18px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; line-height: 1.25; color: var(--navy); }
.facts dd { margin-top: 4px; font-size: 0.95rem; color: var(--muted); }
.story__body .section-lede { margin-top: 0; max-width: 62ch; }
.story__body p:not(.section-lede) { margin-top: 22px; max-width: 66ch; }
.mission { text-align: center; max-width: 920px; }
.mission__text { margin-top: 4px; font-family: var(--font-head); font-weight: 700; font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.9rem); line-height: 1.18; color: var(--navy); text-wrap: balance; }
.mission .section-lede { margin-inline: auto; }
.badge-row--center { justify-content: center; margin-top: clamp(48px, 5vw, 64px); }
@media (max-width: 899px) {
  .page-hero__photo { justify-self: start; max-width: 640px; }
  .story { grid-template-columns: minmax(0, 1fr); }
  .story__aside { position: static; }
  .facts { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
}
@media (prefers-reduced-motion: no-preference) {
  .page-hero__grid > .page-hero__photo > * { animation: none; }   /* hero photo is never hidden */
}

/* Seven nav items: keep labels on one line and tighten spacing on smaller laptops */
.primary-nav__link { white-space: nowrap; }
@media (max-width: 1280px) {
  .primary-nav__list { gap: 0; }
  .primary-nav__link { padding: 10px 9px; font-size: 0.95rem; }
  .primary-nav__link::after { left: 9px; right: 9px; }
  .site-header__actions { gap: 16px; }
}

/* =========================================================================
   WordPress additions (not part of the original design).
   Only used by WordPress-generated markup: blog lists, search, pagination, editor content.
   ========================================================================= */
.screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.card h2 { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-h3); line-height: 1.25; color: var(--navy); }
.card h2 a { color: inherit; text-decoration: none; }
.wp-search { margin-top: 24px; max-width: 520px; }
.wp-search .search-form { display: flex; gap: 12px; flex-wrap: wrap; }
.wp-search label { flex: 1 1 240px; }
.wp-search .search-field { width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--radius); font: inherit; color: var(--text); }
.wp-search .search-submit { min-height: 52px; padding: 0 24px; border: 1px solid var(--blue); border-radius: var(--radius); background: var(--blue); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.wp-search .search-submit:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.navigation.pagination { margin-top: 48px; }
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.navigation.pagination .page-numbers { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--navy); text-decoration: none; }
.navigation.pagination .page-numbers.current { background: var(--navy); border-color: var(--navy); color: #fff; }
.legal img, .legal figure { max-width: 100%; height: auto; }
.legal a { color: var(--blue); }
.legal .alignleft { float: left; margin: 0 24px 16px 0; }
.legal .alignright { float: right; margin: 0 0 16px 24px; }
.legal .aligncenter { margin-left: auto; margin-right: auto; }
/* Fix: footer link rule (.site-footer__col li a) overrode the social icon centering. */
.site-footer__col .social a { display: grid; place-items: center; }

/* Touch targets: footer links were 36-41px tall on phones; raise to 44px+ (spacing only). */
@media (max-width: 900px) {
  .site-footer__col li a, .site-footer__base a { padding-top: 10px; padding-bottom: 10px; }
}

/* =========================================================================
   Contact / service request form (matches the site's field, button and spacing style).
   ========================================================================= */
.sp-form { display: grid; gap: 20px; padding: clamp(20px, 3vw, 32px); }
.sp-form p { margin: 0; }
.sp-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@container (max-width: 540px) { .sp-form__row { grid-template-columns: 1fr; } }
.sp-form label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--navy); }
.sp-form input[type="text"], .sp-form input[type="tel"], .sp-form input[type="email"], .sp-form select, .sp-form textarea {
  display: block; width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: #fff; color: var(--text); font: inherit; line-height: 1.4;
}
.sp-form textarea { min-height: 140px; resize: vertical; }
.sp-form input:focus-visible, .sp-form select:focus-visible, .sp-form textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-color: var(--blue); }
.sp-form [aria-invalid="true"] { border-color: #B42318; }
.sp-form__error { display: block; margin-top: 6px; font-size: 0.92rem; color: #B42318; }
.sp-form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sp-form__submit .btn { width: 100%; }
.sp-form__note { font-size: 0.92rem; color: var(--muted); }
.sp-form__notice { padding: 16px 18px; border: 1px solid var(--line-strong); border-left: 4px solid var(--blue); border-radius: var(--radius); background: var(--tint); color: var(--navy); }
.sp-form__notice--error { border-left-color: #B42318; }
.sp-form__notice strong { display: block; }