/*!
 * Holistic Home Zone — shared stylesheet
 * Single style.css per noyo-html-css skill
 */

/* ============================================================================
   TOKENS
   ============================================================================ */
:root {
  --bg:            #F5F1E8;
  --surface-0:     #FBF8F0;
  --surface-1:     #EFEADD;
  --surface-2:     #E6E0D0;

  --anchor:        #2C2A28;
  --anchor-soft:   #3D3936;
  --anchor-deep:   #1F1E1C;

  --ink:           #1A1A1A;
  --ink-2:         #2E2E2E;
  --muted:         #6B6B6B;
  --dim:           #8A847B;
  --line:          #C9C2B4;
  --mist:          #E6E0D0;

  --blue:          #3D5A80;
  --blue-soft:     #5A7BA6;
  --blue-wash:     #E6ECF3;
  --blue-glow:     rgba(61,90,128,0.10);

  --cta:           #F66C07;
  --cta-hover:     #E05C00;
  --cta-ink:       #FFFFFF;        /* Text color on orange CTA buttons */

  --ok:            #3E7C5E;
  --caution:       #C9922E;
  --action:        #B84A2B;

  /* Semantic colors (3-tone) */
  --success:       #3E7C5E;
  --success-dark:  #2D5C45;
  --success-soft:  rgba(62,124,94,0.10);
  --warning:       #C9922E;
  --warning-dark:  #9B7021;
  --warning-soft:  rgba(201,146,46,0.10);
  --danger:        #B84A2B;
  --danger-dark:   #8B361E;
  --danger-soft:   rgba(184,74,43,0.10);
  --info:          #3D5A80;
  --info-dark:     #2D4460;
  --info-soft:     rgba(61,90,128,0.10);

  /* Border tokens */
  --border-0:      rgba(44,42,40,0.14);
  --border-1:      rgba(26,26,26,0.08);
  --border-2:      rgba(26,26,26,0.12);
  --dash:          rgba(26,26,26,0.08);

  /* Weight tokens */
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-black:      800;

  /* Z-index tokens */
  --z-base:        1;
  --z-above:       10;
  --z-sticky:      50;
  --z-drawer:      100;
  --z-modal:       200;
  --z-toast:       300;
  --z-tooltip:     400;

  --ff-display: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ff-body:    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ff-mono:    "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --text-xs:  13px;  --text-sm:  15px;  --text-md:  17px;
  --text-lg:  19px;  --text-xl:  21px;  --text-2xl: 25px;
  --text-3xl: 32px;  --text-4xl: 40px;  --text-5xl: 48px;
  --text-6xl: 64px;  --text-7xl: 84px;

  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-7: 32px;  --s-8: 40px;
  --s-9: 48px;  --s-10: 64px; --s-11: 80px; --s-12: 96px;

  --r-sm: 6px;  --r-md: 10px; --r-lg: 14px; --r-xl: 22px; --r-pill: 999px;

  --shadow-sm: 0 2px 6px rgba(26,26,26,0.08);
  --shadow-md: 0 6px 18px rgba(26,26,26,0.10);
  --shadow-lg: 0 14px 32px rgba(26,26,26,0.14);

  --t-fast: 150ms;  --t-mid: 250ms;  --t-slow: 400ms;
  --ease:   cubic-bezier(.2, .8, .2, 1);

  --max-w:  1280px;
}

/* ============================================================================
   BASE
   ============================================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: var(--text-lg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--anchor); }
button { font-family: inherit; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--ff-display); font-weight: var(--fw-black); color: var(--ink); }
p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Container */
.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--s-7);
}

/* Section */
section { scroll-margin-top: 96px; }

/* Kicker · reusable uppercase mono label */
.kicker {
  font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: var(--fw-bold);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--blue);
  margin-bottom: var(--s-3);
}

/* Headings reusable */
.h-xl {
  font-size: var(--text-6xl); line-height: 1.08; letter-spacing: -0.035em;
}
.h-lg {
  font-size: var(--text-5xl); line-height: 1.0; letter-spacing: -0.03em;
}
.h-md {
  font-size: var(--text-4xl); line-height: 1.06; letter-spacing: -0.03em;
}
.h-sm {
  font-size: var(--text-3xl); line-height: 1.1; letter-spacing: -0.025em;
}

/* Period orphan prevention · sitewide
   text-wrap: balance distributes lines so trailing punctuation never orphans
   on narrow viewports. .endcap-period is a normal-styled inline that sits
   INSIDE the em so the period can never wrap away from the last word. */
h1, h2, h3, h4 {
  text-wrap: balance;
}
h1 em .endcap-period,
h2 em .endcap-period,
h3 em .endcap-period,
h4 em .endcap-period,
em .endcap-period {
  display: inline-block;          /* breaks parent text-decoration propagation */
  font-style: normal !important;
  font-family: var(--ff-display) !important;
  font-weight: inherit;
  color: inherit;
  text-decoration: none !important;
  letter-spacing: 0 !important;
  vertical-align: baseline;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  padding: 14px 28px;
  min-height: 48px;
  font-family: var(--ff-display); font-weight: var(--fw-bold);
  font-size: var(--text-md); letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
/* Default primary button = anchor (warm graphite). Orange is reserved for the booking-form submit only.
   Override blocks below force orange ONLY on the booking-modal submit + topbar Book button. */
.btn-primary { background: var(--anchor); color: var(--bg); }
.btn-primary:hover { background: var(--anchor-deep); color: var(--bg); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(1px); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); background: var(--surface-1); transform: translateY(-1px); }
.btn-lg { padding: 18px 36px; min-height: 56px; font-size: var(--text-lg); border-radius: 12px; }
.btn-lg:hover { transform: translateY(-1px); }
.btn-sm { padding: 9px 16px; min-height: 36px; font-size: var(--text-sm); border-radius: 8px; }
.btn-sm:hover { transform: translateY(-1px); }

/* ============================================================================
   BOOKING ORANGE · ONE TREATMENT FOR EVERY BOOK INSPECTION CTA
   Targets: every .js-open-book trigger anywhere on the site, the booking
   modal submit, the mobile-menu CTA, the consult-band button if it triggers
   booking. All share identical fill, identical hover (cta-hover + lift).
   ============================================================================ */
html body .js-open-book,
html body .mobile-menu-cta,
html body .book-modal .btn-primary,
html body .book-modal button[type="submit"],
html body .book-modal .gform_button,
html body .book-modal .gform_footer .gform_button,
html body .book-modal-footer .btn-primary {
  background: var(--cta) !important;
  color: var(--cta-ink) !important;
  border-color: var(--cta) !important;
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast) !important;
}

/* Orange CTA arrow · → icon nudges right on hover, matches existing CTA arrows */
html body .js-open-book::after,
html body .mobile-menu-cta::after,
html body .book-modal .btn-primary::after,
html body .book-modal button[type="submit"]::after,
html body .book-modal .gform_button::after,
html body .book-modal-footer .btn-primary::after {
  content: "\2192";
  display: inline-block;
  margin-left: 10px;
  font-weight: var(--fw-bold);
  transition: transform 200ms ease;
  flex-shrink: 0;
}
html body .js-open-book:hover::after,
html body .mobile-menu-cta:hover::after,
html body .book-modal .btn-primary:hover::after,
html body .book-modal button[type="submit"]:hover::after,
html body .book-modal .gform_button:hover::after,
html body .book-modal-footer .btn-primary:hover::after {
  transform: translateX(4px);
}

/* Modal submit · matches the topbar Book Inspection button exactly */
html body .book-modal .gform_footer .gform_button,
html body .book-modal button[type="submit"],
html body .book-modal-footer .btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px 36px !important;
  min-height: 56px !important;
  font-family: var(--ff-display) !important;
  font-size: 16px !important;
  font-weight: var(--fw-bold) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: 12px !important;
  border: 0 !important;
  white-space: nowrap !important;
  width: auto !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12) !important;
}
html body .book-modal .gform_footer { display: flex; justify-content: flex-start; }
html body .js-open-book:hover,
html body .mobile-menu-cta:hover,
html body .book-modal .btn-primary:hover,
html body .book-modal button[type="submit"]:hover,
html body .book-modal .gform_button:hover,
html body .book-modal .gform_footer .gform_button:hover,
html body .book-modal-footer .btn-primary:hover {
  background: var(--cta-hover) !important;
  color: var(--cta-ink) !important;
  border-color: var(--cta-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12) !important;
}

/* Topbar lockup hover · subtle wordmark color shift */
.topbar-lockup:hover .topbar-wordmark { color: var(--blue); }
.topbar-lockup:hover .mark { color: var(--cta-hover); }

/* Archive card hover · matches sibling card patterns */
.archive-card { transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); }
.archive-card:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(26,26,26,0.06); }
.archive-card:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; }

/* ============================================================================
   UTILITY BAR · slim band above topbar with FL state license numbers
   ============================================================================ */
.utility-bar {
  background: var(--surface-1);
  color: var(--ink-2);
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  display: block;
}
.utility-bar-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--s-5);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.utility-bar-item {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-2);
}
.utility-bar-item strong {
  color: var(--ink);
  font-weight: var(--fw-bold);
}
.utility-bar .ub-full { display: inline; }
.utility-bar .ub-short { display: none; }
@media (max-width: 700px) {
  .utility-bar .ub-full { display: none; }
  .utility-bar .ub-short { display: inline; }
}
.utility-bar-sep {
  color: var(--cta);
  font-weight: var(--fw-bold);
  opacity: 0.85;
}
@media (max-width: 700px) {
  .utility-bar { padding: 6px 0; }
  .utility-bar-inner {
    gap: 8px;
    padding: 0 var(--s-3);
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .utility-bar-inner::-webkit-scrollbar { display: none; }
  .utility-bar-item { font-size: 9.5px; letter-spacing: 0.08em; }
  .utility-bar-sep { display: inline; }
}

/* ============================================================================
   TOPBAR
   ============================================================================ */
.topbar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: rgba(245,241,232,0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: var(--s-4) var(--s-6);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
}
.topbar-lockup {
  display: flex; align-items: center; gap: var(--s-2);
  color: var(--anchor);
  text-decoration: none;
  flex-shrink: 0;
}
.topbar-lockup .mark { width: 44px; color: var(--cta); flex-shrink: 0; }
.topbar-lockup .mark svg { width: 100%; height: auto; display: block; }
.topbar-wordmark {
  font-family: var(--ff-display); font-weight: var(--fw-black);
  font-size: var(--text-sm); letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--anchor);
  white-space: nowrap;
}
.topbar-wordmark em {
  font-family: var(--ff-body); font-style: italic; font-weight: var(--fw-bold);
  color: var(--blue);
  letter-spacing: 0.04em;
}
.topbar-nav {
  display: flex; gap: 0;
  flex: 1; justify-content: center;
}
.topbar-nav a {
  display: inline-block;
  padding: 8px 12px;
  font-family: var(--ff-display); font-size: var(--text-md); font-weight: var(--fw-bold);
  letter-spacing: 0;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: var(--r-md);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  white-space: nowrap;
}
.topbar-nav .menu { flex-wrap: nowrap; }
.topbar-nav .menu-item { white-space: nowrap; flex-shrink: 0; }
.topbar-nav a:hover { color: var(--ink); background: transparent; }
.topbar-nav a.active { color: var(--ink); background: transparent; box-shadow: inset 0 -2px 0 0 var(--anchor); border-radius: 0; }
/* Services dropdown (nav) */
.topbar-nav .nav-item { position: relative; }
.topbar-nav .nav-item.has-dropdown > .nav-trigger { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.topbar-nav .nav-trigger .chev { width: 10px; height: 10px; transition: transform 200ms ease; flex-shrink: 0; }
.topbar-nav .nav-item.is-open > .nav-trigger .chev,
.topbar-nav .nav-item:hover > .nav-trigger .chev { transform: rotate(180deg); }
/* Services dropdown · simple, bold, single column.
   Edge-to-edge items with overflow:hidden on the wrapper so the wrapper's
   outer rounded corners clip any hover state that touches the top or bottom. */
.topbar-nav .nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  transform: translateY(8px);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 56px rgba(26,26,26,0.16);
  padding: 0;
  margin-top: 10px;
  width: 320px;
  display: block;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 200ms cubic-bezier(0.2,0.8,0.2,1), transform 200ms cubic-bezier(0.2,0.8,0.2,1), visibility 200ms;
  z-index: var(--z-drawer);
}
.topbar-nav .nav-dropdown::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 16px; background: transparent; }
.topbar-nav .nav-item.has-dropdown::after { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 18px; display: block; pointer-events: auto; }
.topbar-nav .nav-item.is-open > .nav-dropdown,
.topbar-nav .nav-item:hover > .nav-dropdown,
.topbar-nav .nav-item:focus-within > .nav-dropdown { opacity: 1; pointer-events: auto; visibility: visible; transform: translateY(0); }

/* Each service link · clean row, bold title leads, edge-to-edge for clean clip */
.topbar-nav .nav-dropdown > li > a:not(.nav-dd-all) {
  display: block;
  padding: 16px 20px;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.topbar-nav .nav-dropdown > li > a:not(.nav-dd-all):hover {
  background: var(--surface-1);
}
/* Inner spans inherit pointer too · prevents I-beam over title/subtitle text */
.topbar-nav .nav-dropdown a,
.topbar-nav .nav-dropdown a *,
.topbar-nav .nav-dd-title,
.topbar-nav .nav-dd-sub,
.topbar-nav .nav-dd-all,
.topbar-nav .nav-dd-all * {
  cursor: pointer;
}
.topbar-nav .nav-dropdown > li > a:not(.nav-dd-all):hover .nav-dd-title { color: var(--blue); }

.topbar-nav .nav-dd-title {
  display: block;
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-lg);
  color: var(--anchor);
  letter-spacing: -0.01em;
  text-transform: none;
  line-height: 1.2;
  transition: color var(--t-fast);
}
.topbar-nav .nav-dd-sub {
  display: block;
  font-family: var(--ff-body);
  font-size: var(--text-xs);
  color: var(--muted);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  text-transform: none;
  margin-top: 3px;
  line-height: 1.4;
}

/* "See all services" · slim footer with subtle divider */
.topbar-nav .nav-dropdown > li:last-child {
  border-top: 1px solid var(--line);
}
.topbar-nav .nav-dd-all {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px !important;
  margin: 0 !important;
  border-radius: 0;
  color: var(--blue) !important;
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: transparent;
  transition: background var(--t-fast), color var(--t-fast);
}
.topbar-nav .nav-dd-all:hover { background: var(--blue-wash); }
.topbar-nav .nav-dd-all .arr { transition: transform 200ms ease; font-size: 14px; letter-spacing: 0; }
.topbar-nav .nav-dd-all:hover .arr { transform: translateX(4px); }

.topbar-actions { display: flex; align-items: center; gap: var(--s-2); flex-shrink: 0; }
.topbar-hamburger {
  display: none;
  width: 40px; height: 40px;
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  padding: 0;
  position: relative;
}
.topbar-hamburger span {
  position: absolute; left: 10px; right: 10px;
  height: 2px; background: var(--ink);
  border-radius: 2px;
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease), top var(--t-fast) var(--ease);
}
.topbar-hamburger span:nth-child(1) { top: 12px; }
.topbar-hamburger span:nth-child(2) { top: 19px; }
.topbar-hamburger span:nth-child(3) { top: 26px; }
.topbar-hamburger.is-open span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.topbar-hamburger.is-open span:nth-child(2) { opacity: 0; }
.topbar-hamburger.is-open span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

/* ============================================================================
   HERO
   ============================================================================ */
.hero {
  background: var(--anchor);
  color: var(--bg);
  padding: var(--s-10) 0 var(--s-9);
  position: relative;
  overflow: hidden;
}

/* Credential strip · bone band sits between hero and start-here */
.cred-strip {
  background: var(--bone, #F5F1E8);
  padding: var(--s-7) 0;
  border-bottom: 1px solid var(--line);
}
.cred-strip .wrap {
  display: flex;
  align-items: center;
  gap: var(--s-7);
}
.cred-strip-lead {
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1.6;
  padding: 8px 4px;
}
.cred-strip .cred-marquee {
  flex: 1;
  -webkit-mask-image: none;
          mask-image: none;
}
.cred-strip .cred-logo,
.cred-strip-inline .cred-logo {
  width: clamp(120px, 11vw, 168px) !important;
  height: clamp(120px, 11vw, 168px) !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
}
.cred-strip-inline { width: 100%; }
.cred-strip-inline .cred-marquee {
  -webkit-mask-image: none;
          mask-image: none;
}
.cred-strip-inline .cred::after { display: none; }
.cred-strip-inline .cred-track { gap: clamp(60px, 6vw, 100px) !important; }
.cred-strip .cred::after { display: none; }
.cred-strip .cred-track { gap: clamp(60px, 6vw, 100px) !important; }
@media (max-width: 700px) {
  .cred-strip { padding: var(--s-5) 0 var(--s-5); }
  .cred-strip .wrap {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none;
  }
  .cred-strip-lead {
    padding: 8px 0;
    text-align: center;
    width: 100%;
    margin: 0;
    line-height: 1.5;
  }
  .cred-strip .cred-marquee {
    padding: 0 !important;
    margin: 0 !important;
  }
  .cred-strip .cred-logo,
  .cred-strip-inline .cred-logo { width: 130px; height: 130px; }
  .cred-strip .cred-track { gap: 32px; padding-left: var(--s-4); }
  .cred-strip-inline .cred-track { gap: 32px; padding-left: var(--s-4); }
  .cred-strip .cred-marquee,
  .cred-strip-inline .cred-marquee {
    -webkit-mask-image: none;
            mask-image: none;
    width: 100%;
  }
}
.hero::before {
  content: "";
  position: absolute;
  top: -120px; right: -120px;
  width: 600px; height: 600px;
  background: radial-gradient(circle at center, rgba(61,90,128,0.18) 0%, transparent 65%);
  pointer-events: none;
}
.hero-eye {
  font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: var(--fw-bold);
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--blue-soft);
  margin-bottom: var(--s-5);
}
.hero h1 {
  font-family: var(--ff-display); font-weight: var(--fw-black);
  font-size: var(--text-7xl); line-height: 1.06; letter-spacing: -0.03em;
  color: var(--bg);
  margin: 0 0 var(--s-6);
  max-width: 14ch;
}
.hero h1 em {
  font-family: var(--ff-body); font-style: italic; font-weight: var(--fw-bold);
  color: var(--blue-soft);
  letter-spacing: 0.005em;
  word-spacing: 0.04em;
}
.hero-dek {
  font-size: var(--text-xl); line-height: 1.55;
  color: rgba(245,241,232,0.82);
  max-width: 56ch;
  margin: 0 0 var(--s-8);
}

.hero-proof {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(245,241,232,0.2);
  max-width: 48ch;
  position: relative;
  min-height: 180px;
}
.hero-proof-item {
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 280ms var(--ease), transform 280ms var(--ease), visibility 0s linear 280ms;
  position: absolute;
  left: 0; right: 0;
  top: var(--s-5);
  pointer-events: none;
  z-index: 1;
}
.hero-proof-item.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  z-index: 2;
  transition: opacity 280ms var(--ease), transform 280ms var(--ease), visibility 0s;
}
.hero-proof-stars {
  color: var(--cta);
  font-size: var(--text-sm);
  letter-spacing: 0.18em;
  margin-bottom: var(--s-2);
}
.hero-proof-body {
  font-family: var(--ff-display); font-weight: var(--fw-semibold);
  font-size: var(--text-md); line-height: 1.45; letter-spacing: -0.005em;
  color: var(--bg);
  margin: 0 0 var(--s-2);
}
.hero-proof-body em {
  font-family: var(--ff-body); font-style: italic; font-weight: var(--fw-semibold);
  color: var(--blue-soft);
}
.hero-proof-attr {
  font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: var(--fw-bold);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(245,241,232,0.55);
}
.hero-proof-attr strong { color: var(--bg); font-weight: var(--fw-bold); }
/* Hero · two-column layout + lead form + accreditation strip */
.hero-inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--s-10);
  align-items: start;
}
.hero-text h1 {
  font-size: var(--text-6xl); line-height: 1.08; letter-spacing: -0.04em;
  max-width: 13ch;
}
.hero-text .hero-dek { font-size: var(--text-lg); }

/* Homepage hero placeholder · roughly square, sits flush with hero copy.
   Was 3/4 portrait, dropped too far below the testimonial. */
.hero .page-hero-photo-frame { aspect-ratio: 1 / 1; max-height: 560px; }

/* ============================================================================
   CURSOR · POINTER ON EVERY INTERACTIVE ELEMENT
   Browser defaults are inconsistent — buttons render with arrow on Safari,
   summary defaults to default cursor, custom roles get nothing. This rule
   forces hand cursor on every clickable element across the site. Disabled
   states get the not-allowed cursor.
   ============================================================================ */
html body button:not([disabled]):not([aria-disabled="true"]),
html body a[href],
html body a[href] *,
html body summary,
html body details > summary,
html body [role="button"]:not([aria-disabled="true"]),
html body [role="tab"],
html body [role="menuitem"],
html body [role="link"],
html body [role="option"],
html body [role="switch"],
html body [role="checkbox"],
html body [role="radio"],
html body [tabindex]:not([tabindex="-1"]):not(input):not(textarea):not(select),
html body label[for],
html body select:not([disabled]),
html body input[type="submit"]:not([disabled]),
html body input[type="button"]:not([disabled]),
html body input[type="reset"]:not([disabled]),
html body input[type="checkbox"]:not([disabled]),
html body input[type="radio"]:not([disabled]),
html body input[type="image"]:not([disabled]),
html body input[type="file"]:not([disabled]),
html body [onclick],
html body [data-book],
html body [data-close],
html body [data-share],
html body [data-filter],
html body [data-eq],
html body [data-count],
html body [data-toggle],
html body [data-action],
html body [class*="js-"],
html body .archive-pill,
html body .archive-card,
html body .archive-card *,
html body .nav-trigger,
html body .nav-trigger *,
html body .topbar-hamburger,
html body .topbar-lockup,
html body .topbar-lockup *,
html body .mobile-menu-close,
html body .mobile-menu-cta,
html body .mobile-menu-cta *,
html body .mobile-menu-logo,
html body .mobile-menu-logo *,
html body .mm-group summary,
html body .a11y-toggle,
html body .a11y-pill,
html body .accordion-toggle,
html body .accordion summary,
html body .scroller-arrow,
html body .scroller-prev,
html body .scroller-next,
html body .back-to-top,
html body .book-modal-close,
html body .eq-modal-close,
html body .footer-book-btn,
html body .footer-book-btn *,
html body .topbar-actions .btn,
html body .article-card,
html body .article-card *,
html body .feature-link,
html body .resource-card,
html body .resource-card *,
html body .related-card,
html body .related-card *,
html body .equipment-grid > *,
html body .feature-grid > *,
html body .eq-card,
html body .eq-card *,
html body .gform_button,
html body .gfield--type-radio label,
html body .gfield--type-checkbox label,
html body .gform_wrapper input[type="checkbox"] + label,
html body .gform_wrapper input[type="radio"] + label,
html body .select2-selection,
html body .select2-selection__rendered,
html body .select2-selection__arrow,
html body .select2-results__option,
html body .select2-search__field,
html body .skip-link,
html body .breadcrumb a,
html body .breadcrumb a *,
html body .topbar a,
html body .topbar a *,
html body footer a,
html body footer a *,
html body .menu a,
html body .menu a *,
html body .sub-menu a,
html body .sub-menu a *,
html body .mobile-menu a,
html body .mobile-menu a *,
html body .archive-search button,
html body .share-copy,
html body .share-buttons a,
html body .share-buttons button,
html body .a11y-pill,
html body .a11y-pill *,
html body .a11y-row label,
html body .lang-toggle,
html body .menu-item-has-children > a {
  cursor: pointer !important;
}

html body button:disabled,
html body button[disabled],
html body [aria-disabled="true"],
html body [disabled],
html body input:disabled,
html body select:disabled,
html body textarea:disabled {
  cursor: not-allowed !important;
}

html body input[type="text"]:not([disabled]),
html body input[type="email"]:not([disabled]),
html body input[type="tel"]:not([disabled]),
html body input[type="number"]:not([disabled]),
html body input[type="search"]:not([disabled]),
html body input[type="url"]:not([disabled]),
html body input[type="password"]:not([disabled]),
html body textarea:not([disabled]) {
  cursor: text !important;
}


.hero-form {
  background: var(--bg);
  color: var(--ink);
  padding: var(--s-7) var(--s-7) var(--s-6);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  position: relative;
}
.hero-form::before {
  content: "";
  position: absolute; top: -3px; left: -3px; right: -3px; bottom: -3px;
  border: 1.5px solid var(--blue-soft);
  border-radius: 13px;
  opacity: 0.45;
  pointer-events: none;
}
.hero-form-kicker {
  font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: var(--fw-bold);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--blue);
  margin-bottom: var(--s-2);
}
.hero-form h3 {
  font-family: var(--ff-display); font-weight: var(--fw-black);
  font-size: var(--text-3xl); line-height: 1.08; letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 var(--s-5);
  max-width: 14ch;
}
.hero-form h3 em {
  font-family: var(--ff-body); font-style: italic; font-weight: var(--fw-black);
  color: var(--blue);
}
.hf-field {
  display: flex; flex-direction: column; gap: var(--s-2);
  margin-bottom: var(--s-3);
}

.hf-input, .hf-textarea {
  padding: 11px 14px;
  font-family: var(--ff-body); font-size: var(--text-md);
  color: var(--ink);
  background: var(--surface-0);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  min-height: 44px;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.hf-input:hover, .hf-textarea:hover { border-color: var(--dim); }
.hf-input:focus, .hf-textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-glow);
}
.hf-row .hf-field { margin-bottom: 0; }
.hf-submit { margin-top: var(--s-3); width: 100%; }
.hf-foot {
  margin-top: var(--s-3);
  font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  color: var(--muted);
  text-align: center;
}

.hf-intro {
  font-size: var(--text-md); line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 var(--s-5);
}
.hf-success-mark {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--ok);
  color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: var(--fw-black);
  margin: 0 auto var(--s-4);
}
.hf-success {
  padding: var(--s-7);
  background: var(--blue-wash);
  border: 1.5px solid var(--blue);
  border-radius: var(--r-md);
  text-align: center;
}
.hf-success h4 {
  font-family: var(--ff-display); font-weight: var(--fw-black);
  font-size: var(--text-xl); letter-spacing: -0.02em;
  color: var(--blue);
  margin: 0 0 var(--s-2);
}
.hf-success p {
  font-size: var(--text-md);
  color: var(--ink-2);
  margin: 0;
}

/* Certified badge wrapper — see .hero-form-badge.hero-form-badge-h block
   in the next section for the canonical horizontal-rectangle layout. */
.hero-form-wrap { position: relative; }

/* Accreditation strip */
.hero-creds {
  margin-top: var(--s-7);
  padding-top: 0;
  border-top: none;
}
.cred-marquee {
  overflow: hidden;
  position: relative;
  padding: var(--s-2) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.cred-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 56px;
  width: max-content;
  will-change: transform;
}
.cred-track > .cred { flex-shrink: 0; white-space: nowrap; }
.cred {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  flex-shrink: 0;
}
.cred-logo {
  width: clamp(120px, 11vw, 168px);
  height: clamp(120px, 11vw, 168px);
  object-fit: contain;
  background: rgba(245, 241, 232, 0.98);
  border-radius: 18px;
  padding: 14px;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.cred-logo-only { padding: 0; }
.cred::after {
  content: "·";
  color: var(--cta);
  font-size: 26px;
  margin-left: 56px;
  opacity: 0.9;
}
.cred-mark {
  font-family: var(--ff-display); font-weight: var(--fw-black);
  font-size: var(--text-3xl); letter-spacing: 0.02em;
  color: var(--bg);
  line-height: 1;
}
.cred-sub {
  font-family: var(--ff-mono); font-size: 11px; font-weight: var(--fw-bold);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(245,241,232,0.62);
  line-height: 1;
}
/* Marquee is JS-driven so it scrolls regardless of motion preference */

/* ============================================================================
   START HERE
   ============================================================================ */
.start-here {
  padding: var(--s-12) 0;
}
/* Stacked section head · kicker → h2 → dek/lead, all in one column.
   Mirrors the .section-row-head pattern from the master page template
   so homepage and subpages share the same rhythm. */
.section-head {
  display: block;
  margin-bottom: var(--s-9);
}
.section-head-left { display: block; }
.section-head h2 {
  font-size: var(--text-5xl); line-height: 1.1; letter-spacing: -0.03em;
  margin: 0;
}
.section-head h2 em {
  font-family: var(--ff-body); font-style: italic; font-weight: var(--fw-black);
  color: var(--blue);
}
/* Both lead variants now stack below the headline with matching rhythm */
.section-head-aside,
.section-head-lead {
  font-size: var(--text-lg); line-height: 1.55;
  color: var(--ink-2);
  margin: var(--s-4) 0 0;
}

.start-grid {
  display: grid; grid-template-columns: 1.35fr 1fr;
  gap: var(--s-9);
  align-items: start;
}
.start-left { display: flex; flex-direction: column; gap: var(--s-7); }
.start-left .section-head { margin-bottom: 0; }
.start-left .section-head h2 { max-width: 18ch; }
.start-form-wrap {
  position: relative;
  align-self: start;
  margin-top: 0;
}
.start-form-wrap .hero-form {
  width: 100%;
  margin-top: 0;
}

.paths {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
}
.path {
  display: flex;
  flex-direction: column;
  padding: var(--s-7) var(--s-6);
  background: var(--surface-0);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.path:hover {
  border-color: var(--blue);
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(26,26,26,0.06);
}
.path-num {
  font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: var(--fw-bold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: var(--s-3);
}
.path h3 {
  font-size: var(--text-2xl); line-height: 1.2; letter-spacing: -0.02em;
  margin: 0 0 var(--s-2);
  transition: color var(--t-fast);
}
.path:hover h3 { color: var(--blue); }
.path p {
  font-size: var(--text-md); line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 var(--s-5); flex-grow: 1;
}
.path-cta {
  font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: var(--fw-bold);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--blue);
  transition: color var(--t-fast);
}
.path:hover .path-cta { color: var(--cta); }

/* ============================================================================
   METHOD
   ============================================================================ */
.method {
  padding: var(--s-12) 0;
  background: var(--blue);
  color: var(--bg);
  text-align: center;
}
.method-kicker {
  font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: var(--fw-bold);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(245,241,232,0.62);
  margin-bottom: var(--s-4);
}
.method h2 {
  font-size: var(--text-6xl); line-height: 1.08; letter-spacing: -0.035em;
  color: var(--bg);
  margin: 0 0 var(--s-4);
}
.method h2 em {
  font-family: var(--ff-body); font-style: italic; font-weight: var(--fw-black);
  color: var(--bg);
  text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 7px;
}
.method-dek {
  font-size: var(--text-xl); line-height: 1.55;
  color: rgba(245,241,232,0.82);
  max-width: 54ch;
  margin: 0 auto var(--s-10);
}
.method-layers {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-7);
  max-width: 820px;
  margin: 0 auto;
}
.method-layer {
  display: flex; flex-direction: column; align-items: center;
}
.method-disc {
  width: 132px; height: 132px;
  border-radius: 50%;
  border: 1.5px solid rgba(245,241,232,0.45);
  background: rgba(255,255,255,0.05);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-display); font-weight: var(--fw-black);
  font-size: var(--text-4xl); letter-spacing: -0.03em;
  color: var(--bg);
  margin-bottom: var(--s-5);
}
.method-layer-num {
  font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: var(--fw-bold);
  letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(245,241,232,0.6);
  margin-bottom: var(--s-1);
}
.method-layer-name {
  font-family: var(--ff-display); font-weight: var(--fw-black);
  font-size: var(--text-2xl); letter-spacing: -0.02em;
  color: var(--bg);
  margin: 0 0 var(--s-1);
}
.method-layer-sub {
  font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: var(--fw-semibold);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(245,241,232,0.72);
}

/* ============================================================================
   SERVICES
   ============================================================================ */
.services { padding: var(--s-12) 0; }
.services-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
}
/* .svc family removed 2026-04-28 · was unused on every page (forensic audit) */

/* ============================================================================
   FOUR WAYS · merged Method + Services on a blue panel
   ============================================================================ */
.four-ways {
  padding: var(--s-12) 0;
  background: var(--blue);
  color: var(--bg);
}
/* Four-ways head · matches .section-head rhythm but on the blue band */
.four-ways-head {
  text-align: left;
  margin: 0 0 var(--s-9);
}
.four-ways-head .kicker {
  font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: var(--fw-bold);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(245,241,232,0.62);
  margin-bottom: var(--s-4);
}
.four-ways-head h2 {
  font-size: var(--text-5xl); line-height: 1.1; letter-spacing: -0.03em;
  color: var(--bg);
  margin: 0 0 var(--s-4);
  white-space: nowrap;
  text-wrap: nowrap;
}
@media (max-width: 600px) {
  .four-ways-head h2 {
    white-space: normal;
    text-wrap: balance;
    font-size: var(--text-3xl);
  }
}
.four-ways-head h2 em {
  font-family: var(--ff-body); font-style: italic; font-weight: var(--fw-black);
  color: var(--bg);
  text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 7px;
}
.four-ways-dek {
  font-size: var(--text-lg); line-height: 1.55;
  color: rgba(245,241,232,0.85);
  margin: 0;
  max-width: 60ch;
}
.four-ways-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
  align-items: stretch;
}
.four-way {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: var(--s-7) var(--s-6);
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(245,241,232,0.22);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.four-way:hover {
  border-color: rgba(245,241,232,0.55);
  background: rgba(255,255,255,0.08);
  transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.18); }
.four-way-disc {
  width: 88px; height: 88px;
  border-radius: 50%;
  border: 1.5px solid rgba(245,241,232,0.55);
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-5);
}
.four-way-num {
  font-family: var(--ff-display); font-weight: var(--fw-black);
  font-size: var(--text-3xl); letter-spacing: -0.03em;
  color: var(--bg);
  line-height: 1;
}
.four-way h3 {
  font-family: var(--ff-display); font-weight: var(--fw-black);
  font-size: var(--text-2xl); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--bg);
  margin: 0 0 var(--s-3);
  max-width: 18ch;
}
.four-way p {
  font-size: var(--text-md); line-height: 1.55;
  color: rgba(245,241,232,0.86);
  margin: 0 0 var(--s-5);
  flex: 1;
}
/* On the blue four-ways panel, buttons use bone fill / blue text (the
   primary brand contrast on blue surfaces). Orange is reserved for the
   booking-form CTA only. */
.four-way .btn-primary {
  margin-top: auto;
  background: var(--bg);
  color: var(--blue);
  border-color: var(--bg);
}
.four-way .btn-primary:hover {
  background: var(--anchor);
  color: var(--bg);
  border-color: var(--anchor);
}

/* ============================================================================
   WHY US
   ============================================================================ */
.why-us {
  padding: var(--s-12) 0;
  background: var(--surface-0);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.why-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: var(--s-4);
}
.why-tile {
  padding: var(--s-7) var(--s-5);
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  display: flex; flex-direction: column;
}
.why-tile-num {
  font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: var(--fw-bold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: var(--s-3);
}
.why-tile h3 {
  font-size: var(--text-lg); line-height: 1.2; letter-spacing: -0.015em;
  margin: 0 0 var(--s-2);
}
.why-tile p {
  font-size: var(--text-sm); line-height: 1.5;
  color: var(--muted);
  margin: 0;
}

/* ============================================================================
   CASE STUDY
   ============================================================================ */
.case {
  padding: var(--s-12) 0;
}
.case-frame {
  display: grid; grid-template-columns: 1fr 1.3fr;
  gap: var(--s-8);
  background: var(--anchor);
  color: var(--bg);
  border-radius: var(--r-md);
  overflow: hidden;
}
.case-left {
  padding: var(--s-10) var(--s-9);
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 480px;
}
.case-kicker {
  font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: var(--fw-bold);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--blue-soft);
  margin-bottom: var(--s-4);
}
.case-left h2 {
  font-size: var(--text-4xl); line-height: 1.05; letter-spacing: -0.03em;
  color: var(--bg);
  margin: 0 0 var(--s-5);
  max-width: 14ch;
}
.case-left h2 em {
  font-family: var(--ff-body); font-style: italic; font-weight: var(--fw-black);
  color: var(--blue-soft);
}
.case-left p {
  font-size: var(--text-md); line-height: 1.6;
  color: rgba(245,241,232,0.82);
  margin: 0 0 var(--s-3);
  max-width: 40ch;
}
.case-meta {
  margin-top: var(--s-6);
  font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: var(--fw-bold);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(245,241,232,0.55);
}
.case-right {
  padding: var(--s-9);
  background: var(--anchor-soft);
  display: flex; flex-direction: column; gap: var(--s-5);
}
.case-step {
  display: grid; grid-template-columns: 80px 1fr;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  border-bottom: 1px solid rgba(245,241,232,0.12);
  align-items: baseline;
}
.case-step:last-child { border-bottom: none; }
.case-step-num {
  font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: var(--fw-bold);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--blue-soft);
}
.case-step h4 {
  font-size: var(--text-lg); letter-spacing: -0.015em;
  color: var(--bg);
  margin: 0 0 var(--s-2);
}
.case-step p {
  font-size: var(--text-sm); line-height: 1.55;
  color: rgba(245,241,232,0.75);
  margin: 0;
}

/* ============================================================================
   REVIEWS
   ============================================================================ */
.reviews {
  padding: var(--s-12) 0;
  background: var(--surface-0);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.reviews-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
.review {
  padding: var(--s-7);
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  display: flex; flex-direction: column;
}
.review-stars {
  color: var(--cta);
  font-size: var(--text-md);
  letter-spacing: 0.18em;
  margin-bottom: var(--s-4);
}
.review-body {
  font-family: var(--ff-display); font-weight: var(--fw-medium);
  font-size: var(--text-xl); line-height: 1.4; letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 var(--s-5);
}
.review-body em {
  font-family: var(--ff-body); font-style: italic; font-weight: var(--fw-medium);
  color: var(--blue);
}
.review-attr {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px dashed var(--line);
  font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: var(--fw-bold);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
}
.review-attr strong { color: var(--ink); }

/* ============================================================================
   ABOUT KIT
   ============================================================================ */
.about {
  padding: var(--s-12) 0;
}
.about-grid {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: var(--s-10);
  align-items: center;
}
/* About portrait · matches .page-hero-photo-frame visual language · matte flat */
.about-portrait {
  aspect-ratio: 3 / 4;
  background:
    linear-gradient(135deg, rgba(245,241,232,0.06) 0%, rgba(61,90,128,0.08) 50%, rgba(245,241,232,0.04) 100%),
    var(--anchor);
  border: 1px solid rgba(245,241,232,0.16);
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
  display: flex; align-items: flex-end; justify-content: flex-start;
  box-shadow: none;
}
.about-portrait::before,
.about-portrait::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border-color: rgba(245,241,232,0.32);
  border-style: solid;
  pointer-events: none;
  z-index: 1;
}
.about-portrait::before {
  top: 14px; left: 14px;
  border-width: 1.5px 0 0 1.5px;
}
.about-portrait::after {
  bottom: 14px; right: 14px;
  border-width: 0 1.5px 1.5px 0;
}
.about-portrait img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.about-portrait-label {
  position: relative; z-index: var(--z-base);
  font-family: var(--ff-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(245,241,232,0.45);
}
.about-body h2 {
  font-size: var(--text-5xl); line-height: 1.1; letter-spacing: -0.03em;
  margin: 0 0 var(--s-5);
}
.about-body h2 em {
  font-family: var(--ff-body); font-style: italic; font-weight: var(--fw-black);
  color: var(--blue);
}
.about-body p {
  font-size: var(--text-lg); line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 var(--s-5);
}
.about-creds {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin: var(--s-6) 0;
}
.about-cred {
  padding: 6px 12px;
  background: var(--blue-wash);
  border: 1px solid rgba(61,90,128,0.28);
  border-radius: var(--r-pill);
  font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: var(--fw-bold);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blue);
}

/* ============================================================================
   RESOURCES
   ============================================================================ */
.resources {
  padding: var(--s-12) 0;
  background: var(--surface-0);
  border-top: 1px solid var(--line);
}
.resources-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--s-5);
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--s-2);
  padding: var(--s-2) var(--s-2) var(--s-5);
  margin-left: calc(var(--s-2) * -1);
  margin-right: calc(var(--s-2) * -1);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.resources-grid::-webkit-scrollbar { height: 8px; }
.resources-grid::-webkit-scrollbar-track { background: transparent; }
.resources-grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.resources-grid::-webkit-scrollbar-thumb:hover { background: var(--blue); }
.resources-grid > .article { flex: 0 0 360px; min-width: 360px; scroll-snap-align: start; }
.article {
  display: flex; flex-direction: column;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.article:hover {
  border-color: var(--blue);
  transform: translateY(-2px); box-shadow: 0 12px 28px rgba(26,26,26,0.06);
  color: var(--ink);
}
/* Article thumb · same visual language as page-hero-photo-frame, scaled.
   Three color variants (default blue-wash, graphite, mist) share the gradient,
   border, corner brackets, and minimal mono label. */
.article-thumb {
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(135deg, rgba(245,241,232,0.06) 0%, rgba(61,90,128,0.10) 50%, rgba(245,241,232,0.04) 100%),
    var(--blue-wash);
  border: 1px solid rgba(26,26,26,0.10);
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: var(--s-4);
  position: relative;
  overflow: hidden;
}
.article-thumb.graphite {
  background:
    linear-gradient(135deg, rgba(245,241,232,0.06) 0%, rgba(61,90,128,0.08) 50%, rgba(245,241,232,0.04) 100%),
    var(--anchor);
  border-color: rgba(245,241,232,0.16);
}
.article-thumb.mist {
  background:
    linear-gradient(135deg, rgba(26,26,26,0.04) 0%, rgba(61,90,128,0.10) 50%, rgba(26,26,26,0.02) 100%),
    var(--surface-2);
  border-color: rgba(26,26,26,0.10);
}
.article-thumb::before,
.article-thumb::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: rgba(26,26,26,0.28);
  border-style: solid;
  pointer-events: none;
}
.article-thumb::before { top: 10px; left: 10px; border-width: 1.5px 0 0 1.5px; }
.article-thumb::after { bottom: 10px; right: 10px; border-width: 0 1.5px 1.5px 0; }
.article-thumb.graphite::before,
.article-thumb.graphite::after { border-color: rgba(245,241,232,0.32); }

.article-thumb-label {
  font-family: var(--ff-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--blue);
  position: relative; z-index: 1;
}
.article-thumb.graphite .article-thumb-label { color: rgba(245,241,232,0.55); }
.article-thumb.mist .article-thumb-label { color: var(--muted); }
.article-body { padding: var(--s-6); flex-grow: 1; display: flex; flex-direction: column; }
.article-meta {
  display: flex; gap: var(--s-3);
  font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: var(--fw-bold);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-3);
}
.article-meta strong { color: var(--blue); }
.article h3 {
  font-size: var(--text-2xl); line-height: 1.22; letter-spacing: -0.022em;
  margin: 0 0 var(--s-3);
  transition: color var(--t-fast);
}
.article:hover h3 { color: var(--blue); }
.article p {
  font-size: var(--text-md); line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  flex-grow: 1;
}

.resources-foot,
.faq-foot {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  display: flex; justify-content: flex-end;
}
.resources-view-all {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 10px 18px;
  font-family: var(--ff-display); font-weight: var(--fw-bold);
  font-size: var(--text-md); letter-spacing: -0.005em;
  color: var(--blue);
  text-decoration: none;
  border: 1.5px solid var(--blue);
  border-radius: var(--r-md);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.resources-view-all:hover {
  background: var(--blue);
  color: var(--bg);
}

/* ============================================================================
   LEAD MAGNET
   ============================================================================ */
.lead-magnet {
  padding: var(--s-12) 0;
}
.lead-frame {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 0;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.lead-left {
  padding: var(--s-10) var(--s-9);
  background: var(--bg);
}
.lead-left h2 {
  font-size: var(--text-4xl); line-height: 1.06; letter-spacing: -0.03em;
  margin: 0 0 var(--s-4);
  max-width: 16ch;
}
.lead-left h2 em {
  font-family: var(--ff-body); font-style: italic; font-weight: var(--fw-black);
  color: var(--blue);
}
.lead-left p {
  font-size: var(--text-md); line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 var(--s-5);
}
.lead-list {
  list-style: none; padding: 0; margin: var(--s-5) 0 0;
}
.lead-list li {
  position: relative;
  padding: 6px 0 6px 24px;
  font-size: var(--text-md);
  color: var(--ink-2);
}
.lead-list li::before {
  content: "";
  position: absolute; left: 0;
  /* Vertically center dash on first text line — works for single + multi-line items */
  top: 18px;
  top: calc(6px + 0.5lh);
  transform: translateY(-50%);
  width: 12px; height: 2px; background: var(--blue);
}
.lead-right {
  padding: var(--s-10) var(--s-9);
  background: var(--blue);
  color: var(--bg);
  display: flex; flex-direction: column; justify-content: center;
}
.lead-right .kicker {
  color: rgba(245,241,232,0.62);
}
.lead-right h3 {
  font-size: var(--text-2xl); letter-spacing: -0.02em;
  color: var(--bg);
  margin: 0 0 var(--s-5);
}
.lead-form { display: flex; flex-direction: column; gap: var(--s-3); }
.lead-foot {
  margin-top: var(--s-4);
  font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: var(--fw-bold);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(245,241,232,0.55);
}
.lead-right .gform_validation_errors {
  background: #fff;
}
.lead-right .gform_wrapper .gfield_validation_message {
  color: #ffffff;
}
.lead-success-mark {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--cta);
  color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: var(--fw-black);
  margin: 0 auto var(--s-4);
}
.lead-success {
  padding: var(--s-7);
  text-align: center;
}
.lead-success h4 {
  font-family: var(--ff-display); font-weight: var(--fw-black);
  font-size: var(--text-xl); letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 var(--s-2);
}
.lead-success p {
  font-size: var(--text-md);
  color: rgba(245,241,232,0.55);
  margin: 0;
}

/* Gravity Forms inside the lead-magnet blue panel · the global GF style is
   tuned for the bone booking modal, so override colors + spacing here so the
   email field reads as a transparent ghost input on slate, with the submit
   button as a full-width orange CTA underneath. */
html body .lead-right .gform_wrapper,
html body .lead-right form#gform_2 {
  width: 100%;
}
html body .lead-right .gform_wrapper .gform_fields {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--s-3) !important;
}
html body .lead-right .gform_wrapper .gfield_label,
html body .lead-right .gfield_label,
html body .lead-right label.gfield_label,
html body .lead-right .gfield .gfield_label,
html body #gform_wrapper_2 .gfield_label {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Specificity-bumped overrides · the global GF input rule at the bottom of
   style.css uses [type="email"] which gives it equal specificity to our
   panel-scoped rule but later source order. Add the type attribute selector
   so this rule beats the global on specificity, not just position. */
html body .lead-right .gform_wrapper .ginput_container input[type="email"],
html body .lead-right .gform_wrapper .ginput_container input[type="text"],
html body .lead-right .gform_wrapper .ginput_container input[type="tel"],
html body #gform_wrapper_2 .ginput_container input[type="email"],
html body #gform_wrapper_2 .ginput_container input[type="text"] {
  background: rgba(245,241,232,0.08) !important;
  color: var(--bg) !important;
  border: 1.5px solid rgba(245,241,232,0.35) !important;
  border-radius: var(--r-md) !important;
  padding: 14px 16px !important;
  min-height: 52px !important;
  font-family: var(--ff-body) !important;
  font-size: var(--text-md) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease !important;
  -webkit-text-fill-color: var(--bg) !important;
}
html body .lead-right .gform_wrapper .ginput_container input[type="email"]::placeholder,
html body .lead-right .gform_wrapper .ginput_container input[type="text"]::placeholder,
html body .lead-right .gform_wrapper .ginput_container input[type="tel"]::placeholder,
html body #gform_wrapper_2 .ginput_container input[type="email"]::placeholder,
html body #gform_wrapper_2 .ginput_container input[type="text"]::placeholder {
  color: rgba(245,241,232,0.60) !important;
  opacity: 1 !important;
}
html body .lead-right .gform_wrapper .ginput_container input[type="email"]:focus,
html body .lead-right .gform_wrapper .ginput_container input[type="text"]:focus,
html body .lead-right .gform_wrapper .ginput_container input[type="tel"]:focus,
html body #gform_wrapper_2 .ginput_container input[type="email"]:focus,
html body #gform_wrapper_2 .ginput_container input[type="text"]:focus {
  outline: none !important;
  border-color: var(--bg) !important;
  background: rgba(245,241,232,0.16) !important;
  box-shadow: 0 0 0 3px rgba(245,241,232,0.18) !important;
  -webkit-text-fill-color: var(--bg) !important;
}
html body .lead-right .gform_wrapper .ginput_container input {
  background: rgba(245,241,232,0.08) !important;
  color: var(--bg) !important;
  border: 1.5px solid rgba(245,241,232,0.3) !important;
  border-radius: var(--r-md) !important;
  padding: 14px 16px !important;
  min-height: 52px !important;
  font-family: var(--ff-body) !important;
  font-size: var(--text-md) !important;
  width: 100% !important;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease) !important;
}
html body .lead-right .gform_wrapper .ginput_container input::placeholder {
  color: rgba(245,241,232,0.55) !important;
}
html body .lead-right .gform_wrapper .ginput_container input:focus {
  outline: none !important;
  border-color: var(--bg) !important;
  background: rgba(245,241,232,0.14) !important;
  box-shadow: 0 0 0 3px rgba(245,241,232,0.12) !important;
}
html body .lead-right .gform_footer {
  margin-top: var(--s-3) !important;
  padding: 0 !important;
}
html body .lead-right .gform_footer .gform_button {
  width: 100% !important;
  background: var(--cta) !important;
  color: var(--cta-ink) !important;
  border: 0 !important;
  border-radius: var(--r-md) !important;
  padding: 16px 28px !important;
  min-height: 52px !important;
  font-family: var(--ff-display) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease) !important;
}
html body .lead-right .gform_footer .gform_button:hover {
  background: var(--cta-hover) !important;
  transform: translateY(-1px) !important;
}

/* Gravity Forms inside the homepage hero lead card · bone background card
   with the HHZ Certified badge floating top-right. Different from the
   booking modal because the inputs need to sit on bone (not blue) and the
   submit is a full-width orange CTA. Form ID 3. */
html body .hero-form .hero-form-gf,
html body #gform_wrapper_1 {
  width: 100%;
}
html body .hero-form .gform_fields,
html body #gform_wrapper_1 .gform_fields {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--s-3) !important;
}
html body .hero-form .gfield_label,
html body #gform_wrapper_1 .gfield_label {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}
html body .hero-form .ginput_container input,
html body #gform_wrapper_1 .ginput_container input {
  display: block !important;
  width: 100% !important;
  background: var(--surface-0) !important;
  color: var(--ink) !important;
  border: 1.5px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  padding: 14px 16px !important;
  min-height: 52px !important;
  font-family: var(--ff-body) !important;
  font-size: var(--text-md) !important;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease) !important;
}
html body .hero-form .ginput_container input::placeholder,
html body #gform_wrapper_1 .ginput_container input::placeholder {
  color: var(--muted) !important;
}
html body .hero-form .ginput_container input:focus,
html body #gform_wrapper_1 .ginput_container input:focus {
  outline: none !important;
  border-color: var(--cta) !important;
  box-shadow: 0 0 0 3px rgba(246,108,7,0.18) !important;
}
html body .hero-form .gform_footer,
html body #gform_wrapper_1 .gform_footer {
  margin-top: var(--s-3) !important;
  padding: 0 !important;
}
html body .hero-form .gform_footer .gform_button,
html body #gform_wrapper_1 .gform_footer .gform_button {
  width: 100% !important;
  background: var(--cta) !important;
  color: var(--cta-ink) !important;
  border: 0 !important;
  border-radius: var(--r-md) !important;
  padding: 16px 28px !important;
  min-height: 52px !important;
  font-family: var(--ff-display) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease) !important;
}
html body .hero-form .gform_footer .gform_button:hover,
html body #gform_wrapper_1 .gform_footer .gform_button:hover {
  background: var(--cta-hover) !important;
  transform: translateY(-1px) !important;
}

/* ============================================================================
   FAQ
   ============================================================================ */
.faq { padding: var(--s-12) 0; }
.faq-grid {
  display: block;
}
.faq-head {
  margin: 0 0 var(--s-8);
  max-width: 60ch;
}
.faq-head h2 {
  font-size: var(--text-5xl); line-height: 1.1; letter-spacing: -0.03em;
  margin: 0 0 var(--s-4);
}
.faq-head h2 em {
  font-family: var(--ff-body); font-style: italic; font-weight: var(--fw-black);
  color: var(--blue);
}
.faq-head p {
  font-size: var(--text-md); line-height: 1.6;
  color: var(--muted);
  margin: 0 0 var(--s-4);
}
/* .faq-view-all + .faq-view-all-cta removed 2026-04-28 · FAQ section now reuses
   .faq-foot + .resources-view-all so every "view all" CTA is one component */
/* .faq-item base styles consolidated in REFACTOR ADDITIONS block below */
.faq-summary {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-6) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--ff-display); font-weight: var(--fw-bold);
  font-size: var(--text-2xl); line-height: 1.25; letter-spacing: -0.02em;
  color: var(--ink);
  transition: color var(--t-fast) var(--ease);
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary:hover { color: var(--blue); }
.faq-summary:hover .faq-icon { border-color: var(--blue); color: var(--blue); }
.faq-icon {
  width: 24px; height: 24px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-mono); font-size: 14px; font-weight: var(--fw-regular);
  color: var(--muted);
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  margin-top: 4px;
}
.faq-item[open] .faq-icon {
  transform: rotate(45deg);
  border-color: var(--blue);
  color: var(--blue);
}
.faq-answer {
  padding: 0 0 var(--s-6);
  font-size: var(--text-lg); line-height: 1.65;
  color: var(--ink-2);
  max-width: 62ch;
}
.faq-answer p { margin: 0 0 var(--s-3); }
.faq-answer p:last-child { margin-bottom: 0; }

/* ============================================================================
   CONSULT BAND
   ============================================================================ */
.consult {
  padding: var(--s-10) 0 var(--s-12);
}
.consult-band {
  background: var(--blue);
  color: var(--bg);
  padding: var(--s-10) var(--s-10);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-7);
  flex-wrap: wrap;
}
.consult-left h3 {
  font-size: var(--text-4xl); line-height: 1.06; letter-spacing: -0.03em;
  color: var(--bg);
  margin: 0 0 var(--s-2);
  max-width: 18ch;
}
.consult-left h3 em {
  font-family: var(--ff-body); font-style: italic; font-weight: var(--fw-black);
  color: var(--bg);
  text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px;
}
.consult-left p {
  font-size: var(--text-md); line-height: 1.6;
  color: rgba(245,241,232,0.82);
  max-width: 52ch;
  margin: 0;
}
.consult-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* ============================================================================
   FOOTER
   ============================================================================ */
footer {
  background: var(--anchor);
  color: rgba(245,241,232,0.72);
  padding: var(--s-11) 0 var(--s-7);
  font-size: var(--text-md);
}
.foot-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--s-8);
  padding-bottom: var(--s-8);
  border-bottom: 1px solid rgba(245,241,232,0.15);
}
.foot-brand-lockup {
  display: flex; align-items: center; gap: var(--s-3);
  color: var(--bg);
  margin-bottom: var(--s-5);
}
.foot-brand-lockup .mark {
  width: 56px;
  color: var(--bg);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  line-height: 1;
}
.foot-brand-lockup .mark svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
html body .foot-brand-lockup,
html body .foot-brand-lockup .mark,
html body .foot-brand-lockup .mark svg {
  overflow: visible !important;
}
.foot-brand-lockup span {
  font-family: var(--ff-display); font-weight: var(--fw-black);
  font-size: var(--text-md); letter-spacing: 0.08em; text-transform: uppercase;
}
.foot-brand p {
  font-size: var(--text-md); line-height: 1.55;
  color: rgba(245,241,232,0.72);
  max-width: 36ch;
  margin: 0 0 var(--s-4);
}
.foot-geo {
  font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: var(--fw-bold);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(245,241,232,0.5);
}
.foot-col h4 {
  font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: var(--fw-bold);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(245,241,232,0.5);
  margin: 0 0 var(--s-4);
}
.foot-col ul { list-style: none; padding: 0; margin: 0; }
.foot-col li { margin-bottom: var(--s-3); }
.foot-col a {
  font-size: var(--text-md);
  color: rgba(245,241,232,0.82);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.foot-col a:hover { color: var(--bg); }
.foot-bottom {
  padding-top: var(--s-6);
  display: flex; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap;
  font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: var(--fw-bold);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(245,241,232,0.45);
}

/* ============================================================================
   ANIMATIONS · load pulse + scroll reveal
   ============================================================================ */
@keyframes hhz-ground-pulse {
  0%   { stroke-dashoffset: 400; transform: translateY(0); }
  55%  { stroke-dashoffset: 0; }
  62%  { transform: translateY(-2px); }
  70%  { transform: translateY(2px); }
  78%  { transform: translateY(-1px); }
  86%  { transform: translateY(1px); }
  100% { transform: translateY(0); }
}

.foot-brand-lockup .mark .ground {
  stroke-dasharray: 400;
  stroke-dashoffset: 0;
}

/* Scroll reveal · applied via JS adding .is-visible */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal.d-1 { transition-delay: 80ms; }
.reveal.d-2 { transition-delay: 160ms; }
.reveal.d-3 { transition-delay: 240ms; }
.reveal.d-4 { transition-delay: 320ms; }
/* Disable reveal animations on mobile · slower devices feel laggy
   when blocks fade in below the fold. Show everything immediately. */
@media (max-width: 700px) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0 !important;
  }
}

/* Hide back-to-top button sitewide · removed per design direction */
html body .back-to-top,
html body #backToTop {
  display: none !important;
}

/* ============================================================================
   HERO FORM BADGE · horizontal rounded rectangle · house icon + HHZ Certified
   Replaces the rotated circle. Sits top-right of the lead form.
   ============================================================================ */
html body .hero-form-badge.hero-form-badge-h {
  position: absolute !important;
  top: -22px !important;
  right: 14px !important;
  width: auto !important;
  height: auto !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 9px 14px !important;
  background: var(--anchor) !important;
  border: 1.5px solid rgba(245, 241, 232, 0.22) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-lg) !important;
  transform: rotate(-2deg) !important;
  z-index: var(--z-above) !important;
  transition: transform var(--t-mid) var(--ease) !important;
}
/* Stitched inner border · dashed bone outline inset from edge */
html body .hero-form-badge.hero-form-badge-h::before {
  content: "" !important;
  position: absolute !important;
  inset: 3px !important;
  border-radius: 9px !important;
  border: 1px dashed rgba(245, 241, 232, 0.34) !important;
  pointer-events: none !important;
  display: block !important;
}
html body .hero-form-badge.hero-form-badge-h:hover { transform: rotate(0deg) scale(1.04) !important; }
html body .hero-form-badge.hero-form-badge-h .hero-form-badge-mark {
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  color: var(--bg) !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  font-size: inherit !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
html body .hero-form-badge.hero-form-badge-h .hero-form-badge-mark svg {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}
html body .hero-form-badge.hero-form-badge-h .hero-form-badge-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  font-size: inherit !important;
  font-family: inherit !important;
  letter-spacing: 0 !important;
  color: inherit !important;
  text-align: left !important;
}
html body .hero-form-badge.hero-form-badge-h .hb-eye {
  font-family: var(--ff-mono) !important;
  font-size: 9px !important;
  font-weight: var(--fw-bold) !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(245, 241, 232, 0.6) !important;
  line-height: 1 !important;
}
html body .hero-form-badge.hero-form-badge-h .hb-name {
  font-family: var(--ff-display) !important;
  font-weight: var(--fw-black) !important;
  font-size: 22px !important;
  letter-spacing: -0.015em !important;
  color: var(--bg) !important;
  line-height: 0.95 !important;
  text-transform: none !important;
}
/* Mobile · scale the badge down to fit the narrower form */
@media (max-width: 700px) {
  html body .hero-form-badge.hero-form-badge-h {
    top: -22px !important;
    right: 10px !important;
    padding: 9px 14px !important;
    gap: 9px !important;
    border-radius: 11px !important;
    border-width: 1.5px !important;
    width: auto !important;
    height: auto !important;
    flex-direction: row !important;
    background: var(--anchor) !important;
    border-color: rgba(245, 241, 232, 0.22) !important;
  }
  html body .hero-form-badge.hero-form-badge-h::before {
    inset: 3px !important;
    border-radius: 8px !important;
    border: 1px dashed rgba(245, 241, 232, 0.34) !important;
  }
  html body .hero-form-badge.hero-form-badge-h .hero-form-badge-mark {
    width: 38px !important;
    height: 38px !important;
    font-size: inherit !important;
  }
  html body .hero-form-badge.hero-form-badge-h .hb-eye {
    font-size: 9px !important;
    letter-spacing: 0.18em !important;
  }
  html body .hero-form-badge.hero-form-badge-h .hb-name {
    font-size: 18px !important;
    letter-spacing: -0.02em !important;
  }
}
@media (max-width: 430px) {
  html body .hero-form-badge.hero-form-badge-h {
    top: -20px !important;
    right: 9px !important;
    padding: 8px 12px !important;
    gap: 8px !important;
    border-radius: 10px !important;
  }
  html body .hero-form-badge.hero-form-badge-h .hero-form-badge-mark {
    width: 33px !important;
    height: 33px !important;
  }
  html body .hero-form-badge.hero-form-badge-h .hb-eye {
    font-size: 8.5px !important;
  }
  html body .hero-form-badge.hero-form-badge-h .hb-name {
    font-size: 16px !important;
  }
}
@media (max-width: 375px) {
  html body .hero-form-badge.hero-form-badge-h {
    top: -18px !important;
    right: 7px !important;
    padding: 7px 11px !important;
    gap: 7px !important;
  }
  html body .hero-form-badge.hero-form-badge-h .hero-form-badge-mark {
    width: 29px !important;
    height: 29px !important;
  }
  html body .hero-form-badge.hero-form-badge-h .hb-eye {
    font-size: 8px !important;
  }
  html body .hero-form-badge.hero-form-badge-h .hb-name {
    font-size: 15px !important;
  }
}

/* ============================================================================
   FOUND MOLD form headline · stack "Here's what to do" on its own row mobile
   ============================================================================ */
@media (max-width: 700px) {
  .start-form-wrap .hero-form h3 br.mb-br,
  .start-form-wrap .hero-form h3 em {
    display: inline;
  }
}
.start-form-wrap .hero-form h3 .row-2 {
  display: inline;
}
@media (max-width: 700px) {
  .start-form-wrap .hero-form h3 .row-2 {
    display: block;
  }
}

/* ============================================================================
   ACCESSIBILITY · font size modes + widget
   ============================================================================ */
html.a11y-large {
  --text-xs:  15px;
  --text-sm:  17px;
  --text-md:  19px;
  --text-lg:  21px;
  --text-xl:  23px;
  --text-2xl: 27px;
  --text-3xl: 34px;
  --text-4xl: 42px;
}
html.a11y-xl {
  --text-xs:  17px;
  --text-sm:  19px;
  --text-md:  21px;
  --text-lg:  24px;
  --text-xl:  26px;
  --text-2xl: 30px;
  --text-3xl: 36px;
  --text-4xl: 44px;
}
html.a11y-motion :not(.cred-track):not(.hero-proof-item) {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
}
html.a11y-contrast {
  --muted: #3E3E3E;
  --dim: #555555;
  --ink-2: #0A0A0A;
  --line: #6F6A5E;
}
html.a11y-contrast body,
html.a11y-contrast p,
html.a11y-contrast li,
html.a11y-contrast h1,
html.a11y-contrast h2,
html.a11y-contrast h3,
html.a11y-contrast h4,
html.a11y-contrast h5,
html.a11y-contrast h6 { color: #0A0A0A !important; }
html.a11y-contrast .btn-primary { background: #C04800 !important; color: #FFF !important; }

/* Reading font — applies to all prose across every page type */
html.a11y-reading body,
html.a11y-reading p,
html.a11y-reading li,
html.a11y-reading a,
html.a11y-reading span,
html.a11y-reading div,
html.a11y-reading .hero-dek,
html.a11y-reading .page-hero-dek,
html.a11y-reading .section-row-body,
html.a11y-reading .blog-body,
html.a11y-reading .feature,
html.a11y-reading details,
html.a11y-reading summary,
html.a11y-reading .callout,
html.a11y-reading .consult-band {
  font-family: "Lexend", "Inter", ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing: 0.005em !important;
}

/* Line spacing — applies to all prose */
html.a11y-spacing body,
html.a11y-spacing p,
html.a11y-spacing li,
html.a11y-spacing .hero-dek,
html.a11y-spacing .page-hero-dek,
html.a11y-spacing .section-row-body,
html.a11y-spacing .blog-body,
html.a11y-spacing .feature p,
html.a11y-spacing details p,
html.a11y-spacing summary,
html.a11y-spacing .callout p,
html.a11y-spacing .consult-band p {
  line-height: 1.95 !important;
  letter-spacing: 0.015em !important;
}

/* Underline every text link except buttons and navigation */
html.a11y-underline main a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-ghost):not(.btn-lg):not(.btn-sm):not(.topbar-lockup):not(.nav-trigger):not(.feature h4 a):not(.related-card):not(.archive-card):not(.path):not(.article):not(.lk-link):not(.cta-link),
html.a11y-underline footer a,
html.a11y-underline .breadcrumb a {
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

.a11y-widget {
  position: fixed; right: 20px; bottom: 20px;
  z-index: var(--z-tooltip);
  font-family: var(--ff-body);
}
.a11y-toggle {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--anchor);
  color: var(--bg);
  border: 2px solid var(--blue-soft);
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.a11y-toggle:hover { transform: scale(1.05); background: var(--anchor-deep); }
.a11y-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.a11y-toggle svg {
  width: 28px; height: 28px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.a11y-panel {
  position: absolute; right: 0; bottom: 72px;
  width: 300px;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5, 20px);
  transform: translateY(10px) scale(0.96);
  opacity: 0; pointer-events: none;
  transition: transform var(--t-mid) var(--ease), opacity var(--t-mid) var(--ease);
}
.a11y-panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.a11y-panel h4 {
  font-family: var(--ff-display); font-weight: var(--fw-black);
  font-size: var(--text-lg); letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.a11y-close {
  background: transparent; border: none; cursor: pointer;
  color: var(--muted); font-size: 22px; line-height: 1;
  padding: 4px 8px;
  border-radius: var(--r-sm);
}
.a11y-close:hover { color: var(--ink); background: var(--surface-1); }
.a11y-group {
  padding: 10px 0;
  border-top: 1px dashed var(--line);
}
.a11y-group:first-of-type { border-top: none; padding-top: 0; }
.a11y-group-label {
  font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: var(--fw-bold);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.a11y-buttons {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.a11y-btn {
  padding: 10px 8px;
  background: var(--surface-0);
  color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: var(--ff-display); font-weight: var(--fw-bold);
  font-size: var(--text-sm);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.a11y-btn:hover { border-color: var(--blue); }
.a11y-btn.active {
  background: var(--blue);
  color: var(--bg);
  border-color: var(--blue);
}
.a11y-btn.text-a { font-size: 14px; }
.a11y-btn.text-ap { font-size: 17px; }
.a11y-btn.text-app { font-size: 20px; }
.a11y-toggle-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0;
}
.a11y-toggle-label {
  font-family: var(--ff-body); font-size: var(--text-md);
  color: var(--ink);
}
.a11y-switch {
  width: 44px; height: 24px;
  border-radius: 999px;
  background: var(--surface-2);
  border: none;
  position: relative;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.a11y-switch::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast) var(--ease);
}
.a11y-switch.active { background: var(--blue); }
.a11y-switch.active::after { transform: translateX(20px); }
.a11y-reset {
  width: 100%; margin-top: 12px;
  padding: 10px;
  background: transparent;
  color: var(--muted);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: var(--fw-bold);
  letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.a11y-reset:hover { color: var(--ink); border-color: var(--ink); }

/* ============================================================================
   BOOKING MODAL · pop-up form triggered by .js-open-book
   ============================================================================ */
.book-modal {
  position: fixed; inset: 0;
  z-index: var(--z-tooltip);
  display: none;
  align-items: center; justify-content: center;
  padding: var(--s-5);
}
.book-modal.is-open { display: flex; }
.book-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(28,26,24,0.72);
  backdrop-filter: blur(8px);
  animation: bm-fade-in 250ms ease-out;
}
.book-modal-card {
  position: relative;
  background: var(--bg);
  border-radius: var(--r-lg);
  width: 100%;
  max-width: 620px;
  max-height: calc(100vh - var(--s-8));
  overflow-y: auto;
  padding: var(--s-9) var(--s-8) var(--s-8);
  box-shadow: var(--shadow-lg);
  animation: bm-scale-in 250ms var(--ease);
}
@keyframes bm-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bm-scale-in {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.book-modal-close {
  position: absolute; top: var(--s-4); right: var(--s-4);
  width: 40px; height: 40px;
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 22px;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.book-modal-close:hover { color: var(--ink); border-color: var(--ink); }
.book-modal-kicker {
  font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: var(--fw-bold);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--blue);
  margin-bottom: var(--s-3);
}
.book-modal-card h2 {
  font-family: var(--ff-display); font-weight: var(--fw-black);
  font-size: clamp(22px, 6.5vw, 36px); line-height: 1.04; letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 var(--s-3);
  max-width: none;
}
.book-modal-card h2 em {
  font-family: var(--ff-body); font-style: italic; font-weight: var(--fw-black);
  color: var(--blue);
}
.book-modal-intro {
  font-size: var(--text-md); line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 var(--s-6);
}

/* Extra-small phones (430px and below) */

/* Mobile refinements: image scaling and spacing */

/* Dark-background link hover — prevent invisible black-on-black */
.page-hero a:not(.btn):hover,
.hero a:not(.btn):hover,
.hero-left a:not(.btn):hover,
.consult-band a:not(.btn):hover,
.archive-featured a:not(.btn):hover,
.blog-inline-cta a:not(.btn):hover,
.callout a:not(.btn):hover,
.topbar a:not(.btn):hover,
footer a:hover { color: var(--cta) !important; }

.page-hero a:not(.btn),
.hero-left a:not(.btn),
.archive-featured a:not(.btn),
.blog-inline-cta a:not(.btn) { color: var(--blue-soft); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Consult band sits on solid blue — links need warm contrast, not blue-on-blue */
.consult-band a:not(.btn) {
  color: var(--cta);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 700;
}
.consult-band a:not(.btn):hover {
  color: var(--bg);
  text-decoration-color: var(--cta);
}

/* ============================================================================
   MOBILE POLISH & ACCESSIBILITY ENHANCEMENTS
   ============================================================================ */

/* Safe-area insets for notched phones */
.topbar-inner {
  padding-left: max(var(--s-7), env(safe-area-inset-left));
  padding-right: max(var(--s-7), env(safe-area-inset-right));
}

footer {
  padding-bottom: max(var(--s-7), env(safe-area-inset-bottom));
}
.book-modal-card {
  padding-top: max(var(--s-9), env(safe-area-inset-top));
  padding-bottom: max(var(--s-8), env(safe-area-inset-bottom));
}

/* Sticky mobile CTA bar */
.mobile-cta-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 20px rgba(26,26,26,0.08);
  transform: translateY(100%);
  transition: transform 220ms ease;
}
.mobile-cta-bar.is-visible {
  transform: translateY(0);
}
.mobile-cta-bar .btn {
  width: 100%;
}

/* Touch targets to 44x44 minimum */

/* iOS input zoom prevention: Safari zooms if font-size < 16px */
input,
textarea,
select {
  font-size: max(16px, var(--text-md));
}

/* iOS tap highlight color */
button,
a,
[role="button"] {
  -webkit-tap-highlight-color: rgba(246,108,7,0.15);
}

/* Momentum scrolling on horizontal containers */
.archive-filters {
  -webkit-overflow-scrolling: touch;
}

/* Bottom-sheet style modals on mobile */

/* Hero eye (kicker) font-size on very small screens */

/* Color scheme preference */

.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 88px;
  width: 48px;
  height: 48px;
  background: var(--anchor);
  color: var(--bg);
  border: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: var(--z-above);
}
.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--anchor-deep);
}
.back-to-top svg {
  width: 18px;
  height: 18px;
}

/* RESPONSIVE PERFECTION PASS - Mobile + iOS fixes */

/* FIX: 100vh → 100dvh (iOS Safari URL bar issue) */
/* All elements using full viewport height now use dynamic viewport height */
/* Fallback to 100vh for older browsers */
:root {
  --viewport-height: 100dvh;
}

/* FIX: Add 360px breakpoint (Android narrow baseline) */

/* FIX: iOS sticky element GPU layer fix */
.topbar {
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* FIX: Add 768px iPad portrait breakpoint */

/* FIX: Add 1024px iPad landscape / small laptop breakpoint */

/* FIX: Input zoom prevention - verify 16px+ font-size on all inputs */
.hf-input,
.hf-textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea,
select {
  font-size: 16px !important;
  line-height: 1.5;
}

/* FIX: Hero atmospheric decoration - explicit mobile hide */

/* FIX: Body scroll lock safe pattern for modals/nav · locks html + body so
   neither container can wheel or touchmove while a modal/drawer is open.
   The .book-modal-card itself remains internally scrollable via overflow-y: auto. */
html.modal-open,
html.nav-open {
  overflow: hidden !important;
  height: 100% !important;
}
body.nav-open,
body.modal-open {
  position: fixed !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  overscroll-behavior: none;
}
.book-modal,
.eq-modal,
.modal {
  overscroll-behavior: contain;
}

/* FIX: Ensure form inputs don't trigger iOS zoom on focus */
@supports not (font-size: 16px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  textarea,
  select {
    font-size: 16px;
  }
}

/* FIX: Ensure 1280px max-width cap is enforced */

/* FIX: Prevent horizontal scroll at all widths.
   Use overflow-x: clip (not hidden) so position: sticky on the topbar isn't
   broken on iOS Safari — overflow:hidden on html/body creates a scroll
   container that disables sticky descendants. clip prevents overflow without
   creating a containing block. */
html, body {
  overflow-x: clip;
  width: 100%;
}

/* FIX: Consolidate narrow breakpoints - ensure 600px handles 500-600px range */

/* FIX: Responsive button layout - stack on mobile */

/* FIX: Tap target size - minimum 44×44px for all interactive elements
   NOTE: `label` intentionally excluded. Form labels are text, not tap targets,
   and forcing inline-flex + 44px min-height creates giant empty gaps above inputs. */
button,
a[class*="btn"],
[role="button"],
input[type="checkbox"],
input[type="radio"] {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* FIX: Touch feedback for active states (mobile device feedback) */

/* FIX: Text selection on mobile - reasonable contrast */
::selection {
  background: var(--blue);
  color: var(--bg);
}

:-webkit-selection {
  background: var(--blue);
  color: var(--bg);
}

/* ===== Mobile polish v2 — tighter spacing, hidden placeholders, fixed skip link ===== */

/* ===== end Mobile polish v2 ===== */

/* ===== Footer fill-to-bottom fix ===== */

/* ===== end ===== */

/* ===== Elite mobile hero (homepage) ===== */

/* ===== end Elite mobile hero ===== */

/* ===== Topbar BOOK button — always visible between logo and hamburger on mobile ===== */

/* ===== end Topbar BOOK fix ===== */

/* ===== Topbar actions — BOOK left of hamburger on mobile, same row ===== */

/* ===== end ===== */

/* Hero kicker — single row on mobile */

/* ===== Mobile Services dropdown — inline under trigger, full width ===== */

/* ===== end ===== */

/* ===== Logo bigger on mobile, topbar height preserved ===== */

/* ===== end ===== */

/* ===== Mobile hero form — final layout ===== */

/* ===== end ===== */

/* ===== Topbar BOOK button — tap/click must work on mobile ===== */
.topbar { z-index: 60 !important; }
.topbar-actions { position: relative; z-index: 61 !important; }
.topbar-actions .js-open-book,
.topbar-actions button.js-open-book {
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(246,108,7,0.18) !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  position: relative;
  z-index: 62;
}
/* Topbar Book Inspection · large CTA matching modal submit (desktop) */
html body .topbar-actions .js-open-book,
html body .topbar-actions button.js-open-book,
html body .topbar-actions .btn.btn-sm.js-open-book {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--cta) !important;
  color: var(--cta-ink) !important;
  padding: 18px 36px !important;
  font-family: var(--ff-display) !important;
  font-size: 16px !important;
  font-weight: var(--fw-bold) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  min-height: 56px !important;
  border-radius: 12px !important;
  border: 0 !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12) !important;
}
/* ===== end ===== */

/* ============================================================
   MOBILE ELITE — final consolidated mobile polish layer
   Loaded last so it wins every cascade.
   ============================================================ */

/* ===== SKIP LINK — fully hidden always, visible only on focus ===== */
html body .skip-link {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
html body .skip-link:focus,
html body .skip-link:focus-visible {
  position: fixed !important;
  left: 50% !important;
  top: 8px !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  z-index: 99999 !important;
  background: var(--anchor) !important;
  color: var(--bg) !important;
  padding: 10px 18px !important;
  border-radius: var(--r-md) !important;
  font-family: var(--ff-display) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18) !important;
}

/* ===== MOBILE BREAKPOINT — everything below 701px ===== */

/* ===== 430px: iPhone Pro Max ===== */

/* ===== 375px: iPhone SE ===== */

/* ===== 360px: Android narrow ===== */

/* Label → Input gap: nuclear override, 4px only */
html body form.hero-form .hf-field,
html body .hero-form-wrap form.hero-form .hf-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  row-gap: 4px !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
}

html body form.hero-form .hf-field .hf-input,
html body form.hero-form > .hf-field > .hf-input {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 13px 14px !important;
  font-size: 16px !important;
  min-height: 48px !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 10px !important;
  background: var(--surface-0) !important;
  box-sizing: border-box !important;
}

/* Pull input physically up toward the label — defeats any cascade gap */
html body form.hero-form .hf-field {
  display: block !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  position: relative !important;
}

html body form.hero-form .hf-field > .hf-input {
  display: block !important;
  width: 100% !important;
  margin: 5px 0 0 0 !important;
  padding: 13px 14px !important;
  font-size: 16px !important;
  min-height: 48px !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 10px !important;
  background: var(--surface-0) !important;
  box-sizing: border-box !important;
}

/* 'Here's what to do.' as em block — negate h3's right padding so it uses FULL card width
   on row 2 (the sticker only covers the kicker + 'Found mold?' area on row 1 vertically) */

/* ============================================================================
   PAGE-SPECIFIC ADDITIONS (preserved from per-subpage inline CSS)
   ============================================================================ */

/* --- page: 404 --- */

html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }

/* Page hero */
.page-hero { background: var(--anchor); color: var(--bg); padding: var(--s-11) 0 var(--s-10); position: relative; overflow: hidden; }

.page-hero::before { content: ""; position: absolute; top: -100px; right: -100px; width: 500px; height: 500px; background: radial-gradient(circle at center, rgba(61,90,128,0.18) 0%, transparent 65%); pointer-events: none; }

.page-hero-eye { font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--blue-soft); margin-bottom: var(--s-4); display: inline-flex; align-items: center; gap: 12px; }

/* Subtle orange accent line after the eyebrow · sits on a flex baseline */
.page-hero-eye::after {
  content: "";
  display: inline-block;
  width: 32px;
  height: 2px;
  background: var(--cta);
  border-radius: 2px;
  vertical-align: middle;
}

.page-hero h1 { font-family: var(--ff-display); font-weight: 800; font-size: var(--text-6xl); line-height: 1.08; letter-spacing: -0.035em; color: var(--bg); margin: 0 0 var(--s-5); }

.page-hero h1 em { font-family: var(--ff-body); font-style: italic; font-weight: 700; color: var(--blue-soft); letter-spacing: 0.005em; }

.page-hero-dek { font-size: var(--text-xl); line-height: 1.55; color: rgba(245,241,232,0.82); max-width: 72ch; margin: 0 0 var(--s-6); }

/* Hero CTA row · primary button + optional secondary.
   Heroes use a dark anchor background so primary buttons need a bone fill
   to read. Secondary buttons get a bone-outline-fills-on-hover treatment. */
.page-hero-cta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}
.page-hero-cta .btn-primary,
.hero .btn-primary {
  background: var(--bg);
  color: var(--anchor);
  border-color: var(--bg);
}
.page-hero-cta .btn-primary:hover,
.hero .btn-primary:hover {
  background: var(--blue);
  color: var(--bg);
  border-color: var(--blue);
}
.page-hero-cta .btn-secondary,
.hero .btn-secondary {
  background: transparent;
  color: var(--bg);
  border: 1.5px solid rgba(245,241,232,0.25);
}
.page-hero-cta .btn-secondary:hover,
.hero .btn-secondary:hover {
  background: rgba(245,241,232,0.10);
  border-color: var(--bg);
  color: var(--bg);
}

/* Feature grid · horizontal side-scroller with snap.
   Bigger cards (340px floor), card edge bleeds to wrap edge for visual rhythm,
   custom scrollbar visible on hover so users know it scrolls.
   Switches to single-column stack at <=700px (mobile rule below). */
.feature-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--s-4);
  margin: var(--s-8) 0;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--s-2);
  padding: var(--s-2) var(--s-2) var(--s-5);
  margin-left: calc(var(--s-2) * -1);
  margin-right: calc(var(--s-2) * -1);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.feature-grid::-webkit-scrollbar { height: 8px; }
.feature-grid::-webkit-scrollbar-track { background: transparent; }
.feature-grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.feature-grid::-webkit-scrollbar-thumb:hover { background: var(--blue); }

.feature { padding: var(--s-7) var(--s-6); background: var(--surface-0); border: 1.5px solid var(--line); border-radius: var(--r-md); transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); text-decoration: none; color: var(--ink); display: flex; flex-direction: column; flex: 0 0 340px; min-width: 340px; scroll-snap-align: start; }

.feature:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(26,26,26,0.06); }

.feature-num { font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--blue); margin-bottom: var(--s-3); }

.feature h4 { font-size: var(--text-2xl); line-height: 1.2; letter-spacing: -0.018em; margin: 0 0 var(--s-3); }
a.feature h4 { color: var(--blue); }

.feature p { font-size: var(--text-md); line-height: 1.6; color: var(--ink-2); margin: 0; flex-grow: 1; }

.feature-cta { font-family: var(--ff-display); font-weight: 700; font-size: var(--text-md); color: var(--blue); margin-top: var(--s-4); display: inline-flex; align-items: center; gap: 4px; transition: color var(--t-fast); }

.feature:hover .feature-cta { color: var(--cta); }

/* Page body sections */
.page-body { padding: var(--s-12) 0; }

.foot-bottom a { color: rgba(245,241,232,0.7); }

.foot-bottom a:hover { color: var(--bg); }

.book-modal[hidden] { display: none; }

.book-modal h2 { font-size: var(--text-3xl); margin: 0 0 var(--s-3); }

.book-modal h2 em { font-family: var(--ff-body); font-style: italic; font-weight: 800; color: var(--blue); }

/* Breadcrumb strip */
.breadcrumb-strip { background: var(--surface-0); border-bottom: 1px solid var(--line); padding: var(--s-3) 0; }

.breadcrumb { font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin: 0; }

.breadcrumb a { color: var(--blue); text-decoration: none; }

.breadcrumb a:hover { color: var(--anchor); }

/* FIX: Input zoom prevention - verify 16px+ font-size on all inputs */
.hf-input, .hf-textarea, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea, select {
  font-size: 16px !important;
}

/* FIX: Mobile nav scroll lock safe pattern */
body.nav-open {
  position: fixed;
  overflow: hidden;
  width: 100%;
}

/* FIX: Ensure form inputs don't trigger iOS zoom on focus */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea,
select {
  font-size: 16px;
  line-height: 1.5;
  padding: 0.5em;
  border: 1px solid var(--line);
  border-radius: 4px;
}

/* Safe-area inset pattern for notched devices (already present, verified) */
/* No changes needed - safe-area-inset is correctly applied */

/* ===== Preserved newer rules from post-backup edits ===== */
.skip-link {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.skip-link:focus,
.skip-link:focus-visible {
  position: fixed !important;
  left: 16px !important;
  top: 16px !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  background: var(--cta);
  color: var(--bg) !important;
  padding: 12px 18px;
  z-index: 99999;
  text-decoration: none;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
  outline: 2px solid var(--bg);
  outline-offset: 2px;
}

html.a11y-contrast body, html.a11y-contrast p, html.a11y-contrast li, html.a11y-contrast h1, html.a11y-contrast h2, html.a11y-contrast h3, html.a11y-contrast h4 { color: #0A0A0A !important; }

html.a11y-reading body, html.a11y-reading p, html.a11y-reading li, html.a11y-reading a, html.a11y-reading span, html.a11y-reading div, html.a11y-reading .page-hero-dek, html.a11y-reading .section-row-body, html.a11y-reading .feature { font-family: "Lexend", "Inter", ui-sans-serif, system-ui, sans-serif !important; letter-spacing: 0.005em !important; }

html.a11y-spacing body, html.a11y-spacing p, html.a11y-spacing li, html.a11y-spacing .page-hero-dek, html.a11y-spacing .section-row-body, html.a11y-spacing .feature p { line-height: 1.95 !important; letter-spacing: 0.015em !important; }

html.a11y-underline main a:not(.btn):not(.topbar-lockup):not(.nav-trigger):not(.related-card):not(.feature h4 a), html.a11y-underline footer a, html.a11y-underline .breadcrumb a { text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }

/* --- page: about --- */

.page-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s-9); align-items: center; }

.page-hero-photo { position: relative; }

/* Refined photo frame · solid hairline border, soft gradient fill,
   inner glow to give the empty placeholder some depth.
   When real image loads, .is-loaded fades it in. */
.page-hero-photo-frame {
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(135deg, rgba(245,241,232,0.06) 0%, rgba(61,90,128,0.08) 50%, rgba(245,241,232,0.04) 100%);
  border: 1px solid rgba(245,241,232,0.16);
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
  padding: var(--s-5);
  display: flex;
  align-items: flex-end;
  /* Matte flat · no drop shadow */
  box-shadow: none;
}

/* Subtle corner brackets · L-shaped accents instead of dashed border */
.page-hero-photo-frame::before,
.page-hero-photo-frame::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border-color: rgba(245,241,232,0.32);
  border-style: solid;
  pointer-events: none;
}
.page-hero-photo-frame::before {
  top: 14px;
  left: 14px;
  border-width: 1.5px 0 0 1.5px;
}
.page-hero-photo-frame::after {
  bottom: 14px;
  right: 14px;
  border-width: 0 1.5px 1.5px 0;
}

/* Image fade-in on load · default opaque, JS adds .is-loaded for transition */
.page-hero-photo-img {
  opacity: 1;
  transition: opacity 320ms cubic-bezier(0.2,0.8,0.2,1);
}
.page-hero-photo-img.is-loading { opacity: 0; }

/* Two-part placeholder caption · "PHOTO" eyebrow + sentence-case description.
   Sits inside the dark frame, anchored bottom-left, reads as an intentional
   shot list note rather than placeholder boilerplate. */
.page-hero-photo-label {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  text-align: left;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  line-height: 1.4;
}
.page-hero-photo-label .ph-eye {
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cta);
  line-height: 1;
}
.page-hero-photo-label .ph-desc {
  font-family: var(--ff-display);
  font-size: 14px;
  font-weight: var(--fw-medium);
  letter-spacing: -0.005em;
  text-transform: none;
  color: rgba(245,241,232,0.78);
  line-height: 1.4;
  max-width: 36ch;
}

/* DEFAULT · stacked. Headline row above, body row below, full content width.
   Block layout (not grid) so children flow naturally and use the full wrap.
   Reading width caps live on the children (h2 22ch, dek 56ch, body 70ch). */
.section-row { display: block; margin-bottom: var(--s-10); }

/* Headline + dek block sits above the body with a generous gap */
.section-row-head { margin-bottom: var(--s-6); }

/* Layout variants — declare via data-layout on the .section-row */
.section-row[data-layout="split"] {
  /* Old 2-col marketing layout: head on left, body on right */
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--s-10);
  align-items: start;
}
.section-row[data-layout="split"] .section-row-head { margin-bottom: 0; }
.section-row[data-layout="split"] .section-row-body { padding-top: 34px; }
.section-row[data-layout="split"] .section-row-head h2 { font-size: var(--text-4xl); }
.section-row[data-layout="prose"] {
  max-width: 70ch;
}
.section-row[data-layout="prose"] .section-row-head { margin-bottom: var(--s-5); }
.section-row[data-layout="prose"] .section-row-head h2 { font-size: var(--text-4xl); }
.section-row[data-layout="equal"] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-9);
  align-items: start;
}
.section-row[data-layout="equal"] .section-row-head { margin-bottom: 0; }

/* Body paragraphs use full row width by default. The "prose" data-layout
   variant still caps prose at 70ch for blog-style reading flow. */
.section-row-body p { max-width: none; }

.section-row:last-child { margin-bottom: 0; }

/* ============================================================================
   HORIZONTAL SCROLLER · arrow controls + click-drag
   Wraps any .feature-grid / .equipment-grid / .related-grid / .resources-grid
   in a .h-scroll-shell with prev/next buttons (injected by page.js).
   Desktop users also get click-and-drag scrolling — cursor signals it's draggable.
   ============================================================================ */
.h-scroll-shell { position: relative; }

/* Draggable scroller cursors · desktop only (touch devices ignore cursor) */
@media (hover: hover) and (pointer: fine) {
  .h-scroll-shell .feature-grid,
  .h-scroll-shell .equipment-grid,
  .h-scroll-shell .related-grid,
  .h-scroll-shell .resources-grid {
    cursor: grab;
  }
  .h-scroll-shell .feature-grid.is-dragging,
  .h-scroll-shell .equipment-grid.is-dragging,
  .h-scroll-shell .related-grid.is-dragging,
  .h-scroll-shell .resources-grid.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none; /* drag feels stuttery with snap engaged */
    user-select: none;
  }
  /* Suspend pointer-events on cards while dragging so hover/active styles
     don't flicker as the cursor crosses card boundaries during a drag. */
  .h-scroll-shell .feature-grid.is-dragging > *,
  .h-scroll-shell .equipment-grid.is-dragging > *,
  .h-scroll-shell .related-grid.is-dragging > *,
  .h-scroll-shell .resources-grid.is-dragging > * {
    pointer-events: none;
  }
}

.h-scroll-btn {
  position: absolute;
  top: calc(50% - 12px); /* offset for scrollbar padding-bottom */
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  z-index: 5;
  display: none; /* shown only when shell is scrollable */
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(26,26,26,0.10);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), opacity var(--t-fast), transform var(--t-fast);
  padding: 0;
}
.h-scroll-shell.is-scrollable .h-scroll-btn { display: flex; }
.h-scroll-btn:hover {
  background: var(--blue);
  color: var(--bg);
  border-color: var(--blue);
  transform: translateY(-50%) scale(1.05);
}
.h-scroll-btn:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 3px;
}
.h-scroll-btn[disabled] {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
  transform: translateY(-50%);
}
.h-scroll-prev { left: -22px; }
.h-scroll-next { right: -22px; }
.h-scroll-btn svg { width: 20px; height: 20px; display: block; }

/* Keep the arrows on mobile — they're a clearer affordance than swipe-only.
   Shrink the button, pull both arrows inward so they sit over the card edges
   instead of off the viewport, and add a stronger shadow so they read above
   card content. */
@media (max-width: 700px) {
  .h-scroll-btn {
    width: 40px;
    height: 40px;
    box-shadow: 0 6px 18px rgba(26,26,26,0.18);
  }
  .h-scroll-prev { left: 6px; }
  .h-scroll-next { right: 6px; }
  .h-scroll-btn svg { width: 16px; height: 16px; }
}

/* Stacked default · h2 leads the row, full row width */
.section-row-head h2 { font-size: var(--text-5xl); line-height: 1.1; letter-spacing: -0.035em; margin: 0 0 var(--s-3); }

.section-row-head h2 em { font-family: var(--ff-body); font-style: italic; font-weight: 800; color: var(--blue); }

.section-row-head p { font-size: var(--text-lg); line-height: 1.5; color: var(--ink-2); margin: 0; }

.section-row-body { font-size: var(--text-lg); line-height: 1.7; color: var(--ink-2); }

.section-row-head > *:first-child { margin-top: 0; }

.section-row-body > *:first-child { margin-top: 0; }

.section-row-body p { margin: 0 0 var(--s-5); }

.section-row-body p:last-child { margin-bottom: 0; }

.section-row-body ul { list-style: none; padding: 0; margin: 0 0 var(--s-5); }

.section-row-body ul li,
.section-row-body li { position: relative; padding: var(--s-2) 0 var(--s-2) var(--s-6); font-size: var(--text-lg); line-height: 1.55; border-bottom: 1px dashed var(--line); }

.section-row-body li:last-child { border-bottom: none; }

.section-row-body ul li::before { content: ""; position: absolute; left: 0; top: 18px; width: 12px; height: 2px; background: var(--blue); }
/* Ordered lists keep native numbering · don't add the dash bullet */
.section-row-body ol {
  list-style: decimal;
  padding-left: var(--s-6);
  margin: 0 0 var(--s-5);
}
.section-row-body ol li {
  position: static;
  padding: var(--s-2) 0;
  border-bottom: 1px dashed var(--line);
  list-style: decimal;
}
.section-row-body ol li::before { content: none; display: none; }
.section-row-body ol li:last-child { border-bottom: none; }
.section-row-body ol ol { list-style: lower-alpha; padding-left: var(--s-5); margin-top: var(--s-2); }
.section-row-body ol ol li { font-size: var(--text-md); }

/* Callout band */
.callout { background: var(--blue); color: var(--bg); padding: var(--s-10) var(--s-9); border-radius: var(--r-md); margin: var(--s-10) 0; }

.callout h3 { font-family: var(--ff-display); font-weight: 800; font-size: var(--text-3xl); line-height: 1.06; letter-spacing: -0.025em; color: var(--bg); margin: 0 0 var(--s-3); }

.callout h3 em { font-family: var(--ff-body); font-style: italic; font-weight: 800; color: var(--bg); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }

.callout p { font-size: var(--text-md); line-height: 1.6; color: rgba(245,241,232,0.82); max-width: 58ch; margin: 0 0 var(--s-5); }

.consult-band h3 { font-family: var(--ff-display); font-weight: 800; font-size: var(--text-4xl); line-height: 1.06; letter-spacing: -0.03em; color: var(--bg); margin: 0 0 var(--s-2); max-width: 18ch; }

.consult-band h3 em { font-family: var(--ff-body); font-style: italic; font-weight: 800; color: var(--bg); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

.consult-band p { font-size: var(--text-md); line-height: 1.6; color: var(--bg); max-width: 52ch; margin: 0; }

/* Related pages */
.related { background: var(--surface-0); border-top: 1px solid var(--line); padding: var(--s-10) 0; }

.related-head { margin-bottom: var(--s-7); }

.related-head .kicker { margin-bottom: var(--s-3); }

.related-head h3 { font-size: var(--text-3xl); letter-spacing: -0.025em; margin: 0; }

.related-head h3 em { font-family: var(--ff-body); font-style: italic; font-weight: 800; color: var(--blue); }

.related-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--s-4);
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--s-2);
  padding: var(--s-2) var(--s-2) var(--s-5);
  margin-left: calc(var(--s-2) * -1);
  margin-right: calc(var(--s-2) * -1);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.related-grid::-webkit-scrollbar { height: 8px; }
.related-grid::-webkit-scrollbar-track { background: transparent; }
.related-grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.related-grid::-webkit-scrollbar-thumb:hover { background: var(--blue); }

.related-card { display: flex; flex-direction: column; padding: var(--s-7) var(--s-6); background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--r-md); text-decoration: none; color: var(--ink); transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); flex: 0 0 320px; min-width: 320px; scroll-snap-align: start; }

.related-card:hover { border-color: var(--blue); transform: translateY(-2px); color: var(--ink); box-shadow: 0 12px 28px rgba(26,26,26,0.06); }

.related-card .kicker { margin-bottom: var(--s-3); }

.related-card h4 { font-size: var(--text-2xl); line-height: 1.2; letter-spacing: -0.018em; margin: 0 0 var(--s-2); transition: color var(--t-fast); }

.related-card:hover h4 { color: var(--blue); }

.related-card p { font-size: var(--text-md); line-height: 1.55; color: var(--ink-2); margin: 0 0 var(--s-3); flex-grow: 1; }

.related-card .cta-link { font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue); transition: color var(--t-fast); }

.related-card:hover .cta-link { color: var(--cta); }

html.a11y-reading body, html.a11y-reading p, html.a11y-reading li { font-family: "Lexend", "Inter", sans-serif !important; letter-spacing: 0.005em; }

html.a11y-spacing body, html.a11y-spacing p, html.a11y-spacing li { line-height: 1.85 !important; letter-spacing: 0.01em; }

html.a11y-underline main a:not(.btn):not(.related-card) { text-decoration: underline !important; text-underline-offset: 3px; }

.breadcrumb-strip .breadcrumb {
  display: flex; align-items: center;
  gap: 10px; margin: 0;
  font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}

.breadcrumb-strip .breadcrumb a {
  color: var(--blue); text-decoration: none;
  transition: color var(--t-fast);
}

.breadcrumb-strip .breadcrumb a:hover { color: var(--anchor); }

.breadcrumb-strip .breadcrumb .sep { color: var(--dim); }

.breadcrumb-strip .breadcrumb .current { color: var(--anchor); }

.callout.callout-split {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-8); flex-wrap: wrap;
}

.callout.callout-split > div:first-child { flex: 1; min-width: 280px; }

.callout.callout-split .callout-right { flex-shrink: 0; }

.callout.callout-split h3 { margin-bottom: var(--s-2); }

.callout.callout-split p { margin: 0; }

/* --- About credentials · Swiper carousel of feature-style cards --- */
.section-row-body .cert-grid,
.cert-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--s-4);
  margin: var(--s-5) 0 0;
  padding: var(--s-2) var(--s-2) var(--s-5);
  list-style: none;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.cert-grid::-webkit-scrollbar { height: 8px; }
.cert-grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }

.section-row-body .cert-card,
.cert-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: var(--s-4) !important;
  padding: var(--s-7) var(--s-6) !important;
  background: var(--surface-0) !important;
  border: 1.5px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  text-decoration: none !important;
  color: var(--ink) !important;
  flex: 0 0 300px !important;
  min-width: 300px !important;
  width: 300px !important;
  scroll-snap-align: start;
  box-sizing: border-box;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
a.cert-card:hover {
  border-color: var(--blue) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(26,26,26,0.06);
}
.cert-card .cert-badge {
  width: 200px !important;
  height: 200px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  margin: 0 auto !important;
  background: transparent !important;
  flex-shrink: 0;
}
.cert-card .cert-badge-tbd {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-family: var(--ff-display) !important;
  font-size: 13px !important;
  font-weight: var(--fw-bold) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--ink-3, #8a857a) !important;
  background: var(--surface-1) !important;
  border: 1.5px dashed var(--line) !important;
  border-radius: var(--r-sm) !important;
  line-height: 1.2 !important;
}
.cert-card .cert-name {
  font-family: var(--ff-display) !important;
  font-weight: var(--fw-black) !important;
  font-size: var(--text-xl) !important;
  color: var(--ink) !important;
  letter-spacing: -0.01em !important;
  display: block;
  line-height: 1.15;
  margin: 0;
}
.cert-card .cert-desc {
  font-family: var(--ff-body) !important;
  font-size: var(--text-md) !important;
  color: var(--ink-2) !important;
  line-height: 1.4;
  display: block;
  margin: 0;
}

/* --- page: method --- */

.equipment-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--s-4);
  margin: var(--s-5) 0 var(--s-8);
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--s-2);
  padding: var(--s-2) var(--s-2) var(--s-5);
  margin-left: calc(var(--s-2) * -1);
  margin-right: calc(var(--s-2) * -1);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.equipment-grid::-webkit-scrollbar { height: 8px; }
.equipment-grid::-webkit-scrollbar-track { background: transparent; }
.equipment-grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.equipment-grid::-webkit-scrollbar-thumb:hover { background: var(--blue); }

.eq-card {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  background: var(--surface-0);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  border-top: 3px solid var(--blue);
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  flex: 0 0 320px;
  min-width: 320px;
  scroll-snap-align: start;
  display: block;
  position: relative;
}

.eq-card:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(26,26,26,0.06); }

.eq-card:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; }

.eq-card::after {
  content: "Learn more →";
  position: absolute; right: var(--s-4); bottom: var(--s-3);
  font-family: var(--ff-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--blue); opacity: 0.7;
  transition: opacity var(--t-fast), color var(--t-fast);
}

.eq-card:hover::after { opacity: 1; color: var(--blue); }

.eq-layer {
  font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--blue);
  margin-bottom: var(--s-2);
}

.eq-card h4 {
  font-family: var(--ff-display); font-weight: 800;
  font-size: var(--text-2xl); line-height: 1.2; letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 var(--s-1);
  transition: color var(--t-fast);
}

.eq-card:hover h4 { color: var(--ink); }

.eq-sub {
  font-size: var(--text-md); line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}

/* The Kit headline + layer sub-headings */
.kit-headline-block {
  margin: var(--s-11) 0 var(--s-4);
  padding-top: var(--s-8);
  border-top: 1px solid var(--line);
}

.kit-headline-eye {
  font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--cta);
  margin-bottom: var(--s-3);
}

.kit-headline {
  font-family: var(--ff-display); font-weight: 800;
  font-size: var(--text-5xl); line-height: 1.04; letter-spacing: -0.032em;
  color: var(--ink);
  margin: 0 0 var(--s-3);
}

.kit-headline em { font-family: var(--ff-body); font-style: italic; font-weight: 700; color: var(--blue); letter-spacing: 0.005em; }

.kit-headline-dek {
  font-size: var(--text-lg); line-height: 1.55;
  color: var(--muted);
  max-width: 64ch;
  margin: 0;
}

.kit-layer-head {
  display: flex; align-items: baseline; gap: var(--s-4);
  margin: var(--s-8) 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1.5px solid var(--line);
}

.kit-layer-num {
  font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--blue);
}

.kit-layer-title {
  font-family: var(--ff-display); font-weight: 800;
  font-size: var(--text-2xl); line-height: 1.1; letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
}

/* Equipment detail modal */
.eq-modal { position: fixed; inset: 0; z-index: 220; display: none; align-items: center; justify-content: center; padding: var(--s-5); }

.eq-modal.is-open { display: flex; }

.eq-modal-backdrop { position: absolute; inset: 0; background: rgba(26,26,26,0.72); backdrop-filter: blur(6px); animation: eqFadeIn 180ms ease; }

.eq-modal-panel { position: relative; background: var(--bg); border-radius: 18px; max-width: 640px; width: 100%; max-height: 90vh; overflow-y: auto; padding: var(--s-8) var(--s-8) var(--s-7); box-shadow: 0 40px 90px rgba(26,26,26,0.35); animation: eqSlideUp 220ms cubic-bezier(0.2,0.8,0.2,1); }

.eq-modal-close { position: absolute; top: var(--s-4); right: var(--s-4); width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; transition: background var(--t-fast), color var(--t-fast); }

.eq-modal-close:hover { background: var(--anchor); color: var(--bg); border-color: var(--anchor); }

.eq-modal-layer { font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cta); margin-bottom: var(--s-3); }

.eq-modal-panel h3 { font-family: var(--ff-display); font-weight: 800; font-size: var(--text-3xl); line-height: 1.05; letter-spacing: -0.025em; color: var(--ink); margin: 0 0 var(--s-2); }

.eq-modal-tag { font-family: var(--ff-body); font-size: var(--text-sm); font-weight: 600; color: var(--blue); letter-spacing: 0; margin-bottom: var(--s-5); }

.eq-modal-section { margin-bottom: var(--s-5); }

.eq-modal-section:last-child { margin-bottom: 0; }

.eq-modal-section h4 { font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--blue); margin: 0 0 var(--s-2); padding-bottom: 6px; border-bottom: 1px solid var(--line); }

.eq-modal-section p { font-size: var(--text-md); line-height: 1.6; color: var(--ink-2); margin: 0; }

.eq-modal-illness-list { list-style: none; padding: 0; margin: var(--s-2) 0 0; display: flex; flex-wrap: wrap; gap: 6px; }

.eq-modal-illness-list li { font-family: var(--ff-body); font-size: var(--text-sm); font-weight: 500; color: var(--ink); background: var(--surface-1); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; letter-spacing: 0; }

@keyframes eqFadeIn { from { opacity: 0; } to { opacity: 1; } }

@keyframes eqSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* --- page: resources-5g-bedroom-safe-home --- */

/* Blog content — full wrap width, matches other subpages */
.blog-body p { max-width: none; margin: 0 0 var(--s-5); }
.blog-body p:last-child { margin-bottom: 0; }

.blog-body ul, .blog-body ol { max-width: none; list-style: none; padding-left: 0; }

.blog-body h2 { max-width: none; }

.blog-pullquote,
blockquote {
  margin: var(--s-8) 0;
  padding: var(--s-6) var(--s-7);
  background: var(--surface-0);
  border-left: 6px solid var(--cta);
  border-radius: var(--r-md);
}

.blog-pullquote p,
blockquote p {
  font-family: var(--ff-display); font-weight: 600;
  font-size: var(--text-2xl); line-height: 1.3; letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}

.blog-pullquote p em,
blockquote p em {
  font-family: var(--ff-body); font-style: italic; font-weight: 600;
  color: var(--blue);
}

.blog-fieldnote {
  margin: var(--s-7) 0;
  padding: var(--s-5) var(--s-6);
  background: var(--blue-wash);
  border-radius: var(--r-md);
  border-left: 4px solid var(--blue);
}

.blog-fieldnote .fn-label {
  font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--blue);
  margin-bottom: var(--s-2);
}

.blog-fieldnote p {
  font-size: var(--text-md); line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}

.blog-inline-cta {
  margin: var(--s-9) 0;
  padding: var(--s-7) var(--s-8);
  background: var(--anchor);
  color: var(--bg);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-6); flex-wrap: wrap;
}

.blog-inline-cta > div { flex: 1 1 320px; min-width: 0; }

.blog-inline-cta > .btn { flex-shrink: 0; margin-left: auto; }

.blog-body .blog-inline-cta h4 {
  font-family: var(--ff-display); font-weight: 800;
  font-size: var(--text-2xl); letter-spacing: -0.02em;
  color: var(--bg);
  margin: 0 0 var(--s-1);
}

.blog-body .blog-inline-cta h4 em {
  font-family: var(--ff-body); font-style: italic; font-weight: 800;
  color: var(--blue-soft);
}

.blog-body .blog-inline-cta p {
  font-size: var(--text-md); line-height: 1.5;
  color: rgba(245,241,232,0.88);
  margin: 0; max-width: 52ch;
}

.blog-author {
  margin: var(--s-10) 0 0;
  padding: var(--s-7);
  background: var(--surface-0);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  display: grid; grid-template-columns: 96px 1fr;
  gap: var(--s-6); align-items: start;
}


.blog-author-avatar::before {
  content: "";
  position: absolute; inset: 6px;
  border: 1.25px dashed rgba(245,241,232,0.26);
  border-radius: 50%;
  pointer-events: none;
}

.blog-author-avatar::after {
  content: "Photo · TBD";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-mono); font-weight: 700;
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cta);
  text-align: center;
  padding: 0 10px;
  line-height: 1.3;
}

.blog-author-body .label {
  font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--blue);
  margin-bottom: var(--s-2);
}

.blog-author-body h4 {
  font-family: var(--ff-display); font-weight: 800;
  font-size: var(--text-xl); letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 var(--s-2);
}

.blog-author-body p {
  font-size: var(--text-md); line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}

.blog-author-body .creds {
  margin-top: var(--s-3);
  font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted);
}

.blog-intro p {
  font-family: var(--ff-body); font-weight: 400;
  font-size: var(--text-xl); line-height: 1.55;
  color: var(--ink);
  margin: 0 0 var(--s-6);
}

.blog-body h2 em {
  font-family: var(--ff-body); font-style: italic; font-weight: 800;
  color: var(--blue);
}

.blog-body li {
  position: relative;
  padding: var(--s-2) 0 var(--s-2) var(--s-6);
  font-size: var(--text-md); line-height: 1.6;
  color: var(--ink-2);
  border-bottom: 1px dashed var(--line);
}

.blog-body li:last-child { border-bottom: none; }

.blog-body li::before {
  content: ""; position: absolute; left: 0; top: 19px;
  width: 12px; height: 2px; background: var(--blue);
}

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

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--cta);
  z-index: 55;
  width: 0;
  transition: width 50ms linear;
}

.blog-share {
  margin: var(--s-8) 0;
  padding: var(--s-6) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.blog-share-label {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-bottom: var(--s-4);
  font-weight: 500;
}

.blog-share-buttons {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.share-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--anchor);
  color: var(--bg);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 150ms;
  text-decoration: none;
}

.share-btn:hover {
  background: var(--cta);
}

.share-btn svg {
  width: 20px;
  height: 20px;
}

.share-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--anchor);
  color: var(--bg);
  padding: var(--s-4) var(--s-6);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  z-index: 100;
  animation: slideUp 300ms ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* --- page: resources-archive --- */

/* Archive featured post — matches consult-band dark card language */
.archive-featured { margin: var(--s-6) 0 var(--s-7); padding: var(--s-8); background: var(--anchor); color: var(--bg); border-radius: var(--r-md); }

.archive-featured-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-bottom: var(--s-4); font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; }

.archive-featured-tag { color: var(--blue-soft); }

.archive-featured-cat, .archive-featured-date { color: rgba(245,241,232,0.55); }

.archive-featured-meta > :not(:last-child)::after { content: "·"; margin-left: var(--s-4); color: rgba(245,241,232,0.35); letter-spacing: 0; }

.archive-featured-title { font-family: var(--ff-display); font-weight: 800; font-size: var(--text-4xl); line-height: 1.06; letter-spacing: -0.025em; margin: 0 0 var(--s-3); max-width: 28ch; }

.archive-featured .archive-featured-title a,
.archive-featured-title a { color: var(--bg) !important; text-decoration: none !important; transition: color var(--t-fast); display: inline-block; }
.archive-featured .archive-featured-title a:hover { color: var(--blue-soft) !important; text-decoration: none !important; }

.archive-featured-title em { font-family: var(--ff-body); font-style: italic; font-weight: 800; color: var(--blue-soft); }

.archive-featured-title a:hover { color: var(--blue-soft); }

.archive-featured-title .arr { display: inline-block; transition: transform var(--t-fast); margin-left: 6px; }

.archive-featured-title a:hover .arr { transform: translateX(4px); }

.archive-featured-dek { font-size: var(--text-lg); line-height: 1.55; color: rgba(245,241,232,0.82); max-width: 64ch; margin: 0; }

/* Archive controls — built on the design-system .btn-sm rectangle */
.archive-controls { margin: 0 0 var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; justify-content: space-between; padding: var(--s-4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); position: sticky; top: 68px; background: var(--bg); z-index: 20; }

.archive-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; min-height: 36px;
  font-family: var(--ff-display); font-weight: 700;
  font-size: var(--text-sm); letter-spacing: 0.06em; text-transform: uppercase;
  background: transparent; color: var(--ink-2);
  border: 1.5px solid var(--line); border-radius: 8px;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.archive-pill:hover { border-color: var(--ink); color: var(--anchor); }

.archive-pill.is-active { background: var(--anchor); border-color: var(--anchor); color: var(--bg); }

.archive-pill-count { font-family: var(--ff-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: inherit; opacity: 0.7; }

.archive-pill.is-active .archive-pill-count { opacity: 1; }

.archive-tools { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }

.archive-search {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; min-height: 36px;
  background: var(--surface-0); border: 1.5px solid var(--line); border-radius: 8px;
  transition: border-color var(--t-fast);
}

.archive-search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-glow); }

.archive-search-icon { width: 16px; height: 16px; color: var(--muted); display: inline-block; flex-shrink: 0; }

.archive-search-icon svg { width: 100%; height: 100%; display: block; }

.archive-search input { border: 0; background: transparent; outline: none; font-family: var(--ff-body); font-size: var(--text-sm); color: var(--ink); min-width: 180px; padding: 0; }

.archive-search input::placeholder { color: var(--muted); }

.archive-sort { display: inline-flex; align-items: center; gap: 8px; }

.archive-sort-label { font-family: var(--ff-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }

.archive-sort select {
  appearance: none; -webkit-appearance: none;
  padding: 9px 38px 9px 14px; min-height: 36px;
  font-family: var(--ff-display); font-weight: 700; font-size: var(--text-sm); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink);
  background: var(--surface-0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236B6B6B' stroke-width='2'%3E%3Cpath d='M5 8 L10 13 L15 8'/%3E%3C/svg%3E") no-repeat right 12px center / 14px;
  border: 1.5px solid var(--line); border-radius: 8px;
  cursor: pointer;
}

.archive-sort select:focus { outline: none; border-color: var(--blue); }

/* Archive card filter state · transition lives on the base .archive-card rule
   at line 226; only the filter visibility state belongs here. */
.archive-card.is-hidden { display: none; }

/* Archive grid · the resources blog index uses .feature-grid markup but
   should display as a standard vertical CSS grid (not a horizontal
   side-scroller) so the user can browse every post + use the Load More
   button to paginate naturally. */
html body .archive-grid.feature-grid,
html body .feature-grid.archive-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--s-5) !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
  padding: 0 !important;
  margin: var(--s-8) 0 !important;
}
html body .archive-grid .archive-card,
html body .archive-grid .feature {
  flex: initial !important;
  min-width: 0 !important;
  width: auto !important;
  scroll-snap-align: none !important;
}
@media (max-width: 1180px) {
  html body .archive-grid.feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  html body .archive-grid.feature-grid {
    grid-template-columns: 1fr !important;
  }
}

.archive-empty { padding: var(--s-8) var(--s-6); text-align: center; background: var(--surface-0); border: 1.5px dashed var(--line); border-radius: var(--r-md); margin-bottom: var(--s-6); }

.archive-empty p { font-size: var(--text-md); color: var(--muted); margin: 0 0 var(--s-4); }

.archive-load-more-wrap { display: flex; justify-content: center; margin: var(--s-6) 0 0; }

/* ========================================================================
   REFACTOR ADDITIONS (2026-04-24)
   Added for: FAQ chevron · blog author · X share icon · Select2 theming
   ======================================================================== */

/* --- FAQ accordion with chevron --- */
.faq-item {
  padding: var(--s-5) 0;
  border-top: 1px solid var(--line);
}
.faq-q {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-2xl);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
  transition: color var(--t-fast) var(--ease);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::marker { display: none; content: ''; }
.faq-help-text { font-size: var(--text-md); color: var(--muted); margin: 0 0 var(--s-5); }
.faq-q:hover { color: var(--blue); }
.faq-q:hover .faq-chev { color: var(--blue); }
.faq-q-text { flex: 1; }
.faq-chev {
  flex-shrink: 0;
  color: var(--cta);
  transition: transform 200ms ease, color var(--t-fast);
}
.faq-item[open] .faq-chev { transform: rotate(180deg); }
.faq-a {
  margin-top: var(--s-4);
  font-size: var(--text-lg);
  color: var(--ink-2);
  line-height: 1.65;
}
.faq-a p { margin: 0; }

/* --- Blog author bio --- */
.blog-author,
.author-bio {
  display: flex;
  gap: var(--s-5);
  align-items: flex-start;
  padding: var(--s-6);
  background: var(--surface-1);
  border-radius: var(--r-md);
  margin-top: var(--s-7);
}
.blog-author-avatar,
.author-bio img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  background: linear-gradient(135deg, var(--anchor) 0%, var(--anchor-soft) 100%);
  box-shadow: 0 6px 16px rgba(26,26,26,0.18);
  position: relative;
  overflow: hidden;
}
.blog-author-body,
.author-bio-body {
  flex: 1;
}
.blog-author-body .label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--text-xs);
  color: var(--muted);
  font-weight: var(--fw-bold);
  margin-bottom: var(--s-2);
}
.blog-author-body h4 {
  margin: 0 0 var(--s-2);
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-lg);
}
.blog-author-body p {
  margin: 0 0 var(--s-3);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--ink-2);
}
.blog-author-body .creds {
  font-family: var(--ff-mono);
  font-size: var(--text-xs);
  color: var(--muted);
}

/* --- Social share — X icon + layout --- */
/* X icon · keep bone like the other share icons (was dark, invisible on
   the anchor circle background). Hover shifts to white for emphasis. */
.share-btn.share-x { color: var(--bg); }
.share-btn.share-x:hover { color: var(--bg); filter: brightness(1.1); }
/* Defensive: if legacy Twitter-bird share markup ever leaks through during WP
   migration or CMS content import, hide it. Canonical share is .share-x. */
.share-btn.share-twitter { display: none !important; }

/* --- Select2 brand override --- */
.select2-container--default .select2-selection--single {
  height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-0);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 46px;
  padding-left: 16px;
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: 16px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 46px;
  right: 12px;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--cta);
  outline: 2px solid rgba(246,108,7,0.18);
  outline-offset: 1px;
}
.select2-dropdown {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--cta);
  color: var(--bg);
}

/* --- Gravity Forms HTML baseline (so native forms render cleanly until WP port) --- */
.gform_wrapper { display: block; }
.gform_wrapper .gform_fields {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s-4);
}
.gform_wrapper .gfield {
  display: block;
  margin: 0;
}
.gform_wrapper .gfield--width-full { grid-column: 1 / -1; }

.gform_wrapper .ginput_container input,
.gform_wrapper .ginput_container textarea,
.gform_wrapper .ginput_container select {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-0);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: 16px;
}
.gform_wrapper .ginput_container textarea {
  padding: 12px 16px;
  min-height: 120px;
}
.gform_wrapper .gform_footer {
  margin-top: var(--s-5);
  display: flex;
  justify-content: flex-end;
}
.gform_wrapper .gform_button {
  display: inline-block;
  padding: 14px 28px;
  background: var(--anchor);
  color: var(--bg);
  border: 0;
  border-radius: var(--r-sm);
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t-fast);
}
.gform_wrapper .gform_button:hover { background: var(--cta-hover); }

/* --- WP menu overrides — keep existing .topbar-nav layout working --- */
.topbar-nav .menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--s-5);
}
.topbar-nav .menu-item { display: inline-flex; align-items: center; }
.topbar-nav .sub-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.topbar-nav .sub-menu .menu-item { display: block; }

/* --- Page hero photo img (replaces text-only placeholder) --- */
.page-hero-photo-frame {
  position: relative;
  overflow: hidden;
}
.page-hero-photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-hero-photo-frame .page-hero-photo-label {
  position: relative;
  z-index: 1;
}

/* ========================================================================
   GRAVITY FORMS · Orbital theme overrides (per noyo-gravity-forms skill)
   Brand the form by overriding --gf-* custom properties only.
   ======================================================================== */

.gform_wrapper.gform-theme--orbital {
  /* Colors */
  --gf-color-primary: var(--cta);
  --gf-color-primary-contrast: var(--bg);
  --gf-color-primary-darker: var(--cta-hover);
  --gf-color-secondary: var(--anchor);
  --gf-color-out-ctrl-light: transparent;
  --gf-color-in-ctrl: var(--surface-0);
  --gf-color-in-ctrl-contrast: var(--ink);
  --gf-color-in-ctrl-subtle: var(--line);
  --gf-color-danger: var(--danger);

  /* Typography */
  --gf-ctrl-font-family: var(--ff-body);
  --gf-ctrl-label-font-family: var(--ff-display);
  --gf-ctrl-btn-font-family: var(--ff-display);
  --gf-ctrl-font-size: 16px;
  --gf-ctrl-label-font-size-primary: var(--text-xs);
  --gf-ctrl-btn-font-size: var(--text-sm);

  /* Spacing */
  --gf-form-gap-y: var(--s-4);
  --gf-form-gap-x: var(--s-4);
  --gf-ctrl-padding-x: 16px;
  --gf-ctrl-padding-y: 12px;
  --gf-ctrl-min-h: 48px;
  --gf-ctrl-btn-padding-x: 28px;
  --gf-ctrl-btn-padding-y: 14px;
  --gf-ctrl-btn-min-h: 48px;

  /* Borders & focus */
  --gf-ctrl-radius: var(--r-sm);
  --gf-ctrl-btn-radius: var(--r-sm);
  --gf-ctrl-border-color: var(--line);
  --gf-ctrl-border-color-focus: var(--cta);
  --gf-ctrl-border-color-hover: var(--anchor-soft);
  --gf-ctrl-border-color-error: var(--danger);
  --gf-ctrl-border-width: 1px;
  --gf-ctrl-border-width-focus: 2px;

  /* Labels */
  --gf-ctrl-label-color-primary: var(--muted);
  --gf-ctrl-label-color-required: var(--cta);
  --gf-ctrl-label-text-transform: uppercase;
  --gf-ctrl-label-letter-spacing: 0.08em;
  --gf-ctrl-label-font-weight: 700;
  --gf-ctrl-label-margin-bottom: var(--s-2);
}

/* Native fallback styling for when plugin CSS isn't loaded (static HTML preview) */
.gform_wrapper { display: block; width: 100%; }
.gform_wrapper .gform_fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
  list-style: none;
  padding: 0;
  margin: 0;
}
.gform_wrapper .gfield { margin: 0; }
.gform_wrapper .gfield--width-full { grid-column: 1 / -1; }
.gform_wrapper .gfield--width-half { grid-column: span 1; }
.gform_wrapper .gfield--width-third { grid-column: span 1; }
.gform_wrapper .gfield--width-quarter { grid-column: span 1; }

.gform_wrapper .ginput_container input,
.gform_wrapper .ginput_container textarea,
.gform_wrapper .ginput_container select {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-0);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: 16px;
  box-sizing: border-box;
}
.gform_wrapper .ginput_container textarea {
  padding: 12px 16px;
  min-height: 120px;
  line-height: 1.5;
}
.gform_wrapper .ginput_container input:focus,
.gform_wrapper .ginput_container textarea:focus,
.gform_wrapper .ginput_container select:focus {
  outline: 2px solid rgba(246,108,7,0.24);
  outline-offset: 1px;
  border-color: var(--cta);
}
.gform_wrapper .gfield_description {
  margin-top: var(--s-2);
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.5;
}
.gform_wrapper .gfield_validation_message {
  margin-top: var(--s-2);
  font-size: var(--text-xs);
  color: var(--danger);
  line-height: 1.5;
}
.gform_wrapper .gfield_error .ginput_container input,
.gform_wrapper .gfield_error .ginput_container textarea,
.gform_wrapper .gfield_error .ginput_container select {
  border-color: var(--danger);
}
.gform_wrapper .gform_footer {
  margin-top: var(--s-5);
  display: flex;
  justify-content: flex-start;
  gap: var(--s-3);
}
.gform_wrapper .gform_footer .gform_button {
  display: inline-block;
  padding: 14px 28px;
  background: var(--anchor);
  color: var(--bg);
  border: 0;
  border-radius: var(--r-sm);
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t-fast);
  min-height: 48px;
}
.gform_wrapper .gform_footer .gform_button:hover { background: var(--cta-hover); }

/* Checkbox/radio choices */
.gform_wrapper .gchoice {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 0;
}
.gform_wrapper .gfield-choice-input {
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
}
.gform_wrapper .gform-field-label--type-inline {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 16px;
  color: var(--ink);
  margin: 0;
  cursor: pointer;
}

/* Validation summary at top of form */
.gform_validation_errors {
  margin-bottom: var(--s-5);
  padding: var(--s-4);
  background: var(--danger-soft);
  border-left: 4px solid var(--danger);
  color: var(--danger-dark);
  border-radius: var(--r-sm);
}

/* Mobile */

/* ========================================================================
   FORM LABEL UNIFICATION (2026-04-24)
   Make every form label on the site look identical:
   - hero lead-magnet form (.hf-label)
   - booking modal GF form (.gfield_label, .gform-field-label)
   - footer newsletter form
   - any future form
   One treatment, one type spec, consistent spacing.
   ======================================================================== */

h2.gform_submission_error {
  font-size: var(--text-md);
  line-height: 1.55;
}

.gform_ajax_spinner {
  display: none !important;
}

html body .gform_required_legend {
  display: none !important;
}

html body .hf-label,
html body .hero-form .hf-label,
html body form.hero-form .hf-field .hf-label,
html body .gform_wrapper .gfield_label,
html body .gform_wrapper .gform-field-label,
html body form label:not(.gform-field-label--type-inline):not(.bm-label):not(.choice-label) {
  display: block !important;
  font-family: var(--ff-mono) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  line-height: 1.3 !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  text-align: left !important;
  height: auto !important;
  min-height: 0 !important;
  width: auto !important;
  box-sizing: border-box !important;
}

/* Required asterisk styling — keep visible, tight to label */
html body .gform_wrapper .gfield_required {
  color: var(--cta) !important;
  margin-left: 4px !important;
  display: inline !important;
  font-weight: var(--fw-bold) !important;
}
html body .gform_wrapper .gfield_required_text_asterisk {
  display: inline !important;
}

/* Nuclear hide of the screen-reader "(Required)" text.
   The Orbital framework sometimes un-hides this; override aggressively. */
html body .gform_wrapper .gfield_required_text_screen_reader,
html body .gform_wrapper .gfield_required .gfield_required_text_screen_reader,
html body .screen-reader-text {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  visibility: hidden !important;
  font-size: 0 !important;
  color: transparent !important;
}

/* Input treatment matched across the site — hero and GF inputs look identical */
html body .gform_wrapper .ginput_container input[type="text"],
html body .gform_wrapper .ginput_container input[type="email"],
html body .gform_wrapper .ginput_container input[type="tel"],
html body .gform_wrapper .ginput_container input[type="number"],
html body .gform_wrapper .ginput_container input[type="url"],
html body .gform_wrapper .ginput_container textarea,
html body .gform_wrapper .ginput_container select {
  width: 100% !important;
  min-height: 48px !important;
  padding: 11px 14px;
  border: 1.5px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  background: var(--surface-0) !important;
  color: var(--ink) !important;
  font-family: var(--ff-body) !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
  transition: border-color var(--t-fast), box-shadow var(--t-fast) !important;
}
html body .gform_wrapper .ginput_container textarea {
  padding: 12px 14px !important;
  min-height: 120px !important;
  line-height: 1.5 !important;
  resize: vertical !important;
}
html body .gform_wrapper .ginput_container input:focus,
html body .gform_wrapper .ginput_container textarea:focus,
html body .gform_wrapper .ginput_container select:focus {
  border-color: var(--cta) !important;
  box-shadow: 0 0 0 3px rgba(246,108,7,0.14) !important;
  outline: none !important;
}

/* Tighten field-to-field row gap inside GF forms */
html body .gform_wrapper .gform_fields {
  gap: 14px 16px !important;
}
html body .gform_wrapper .gfield {
  margin: 0 !important;
  padding: 0 !important;
}

/* Select2 match to input height + treatment */
html body .select2-container--default .select2-selection--single {
  height: 48px !important;
  min-height: 48px !important;
  border: 1.5px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  background: var(--surface-0) !important;
}
html body .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 46px !important;
  padding-left: 14px !important;
  padding-right: 36px !important;
  color: var(--ink) !important;
  font-family: var(--ff-body) !important;
  font-size: 16px !important;
}
html body .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 46px !important;
  right: 10px !important;
}

/* Submit button — make consistent across forms */
html body .gform_wrapper .gform_footer {
  margin-top: 18px !important;
  padding: 0 !important;
}
html body .gform_wrapper .gform_footer .gform_button {
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Modal content container — remove legacy .bm-grid styles that may leak */
.book-modal-card #bookModalFormWrap { padding: 0; }
.book-modal-card .gform_wrapper { width: 100%; }



.bm-success-mark {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--ok);
  color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: var(--fw-black);
  margin: 0 auto var(--s-4);
}
.bm-success {
  padding: var(--s-7);
  text-align: center;
}
.bm-success h4 {
  font-family: var(--ff-display); font-weight: var(--fw-black);
  font-size: var(--text-xl); letter-spacing: -0.02em;
  color: var(--blue);
  margin: 0 0 var(--s-2);
}
.bm-success p {
  font-size: var(--text-md);
  color: var(--ink-2);
  margin: 0;
}





/* ========================================================================
   HERO EYEBROW · responsive text swap
   Desktop shows full location blurb; mobile shows the short version.
   ======================================================================== */
.hero-eye-full { display: inline; }
.hero-eye-short { display: none; }

/* ========================================================================
   TOPBAR NAV · single-row enforcement sitewide
   Below 1100px, tighten padding and font so every label fits on one row.
   Mobile nav drawer takes over below 700px (existing rule).
   ======================================================================== */

/* ============================================================================
   CONSOLIDATED MEDIA QUERIES (2026-04-24)
   109 scattered @media blocks merged to one per breakpoint, cascade order preserved.
   Environmental queries first, then ranges, then mobile max-width (largest first).
   ============================================================================ */

@media (hover: none) and (pointer: coarse) {
button:active,
  a:active,
  .btn:active {
  opacity: 0.8;
  transform: scale(0.98);
}
}

@media (prefers-color-scheme: dark) {
:root {
  color-scheme: light;
}
}

@media (prefers-reduced-motion: reduce) {
:not(.cred-track):not(.hero-proof-item) {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
}
.skip-link {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}
.skip-link:focus,
.skip-link:focus-visible {
  position: fixed !important;
  left: 16px !important;
  top: 16px !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  background: var(--cta);
  color: var(--bg) !important;
  padding: 12px 18px;
  z-index: 99999;
  text-decoration: none;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
  outline: 2px solid var(--bg);
  outline-offset: 2px;
}
html {
  scroll-behavior: auto !important;
}
}

@media print {
*, *::before, *::after {
  background: transparent !important;
  color: #000 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  animation: none !important;
  transition: none !important;
}
.topbar, .breadcrumb-strip, footer, .consult, .book-modal, .eq-modal, .a11y-widget, .mobile-cta-bar, .back-to-top, .reading-progress, .blog-toc, .related, .page-hero-actions, .share-row, .archive-controls {
  display: none !important;
}
html, body {
  font-size: 11pt !important;
  line-height: 1.5 !important;
}
h1 {
  font-size: 22pt !important;
  page-break-after: avoid;
}
h2 {
  font-size: 14pt !important;
  page-break-after: avoid;
}
h3 {
  font-size: 12pt !important;
  page-break-after: avoid;
}
p, li {
  orphans: 3;
  widows: 3;
}
.callout, .feature-grid, .section-row, table, figure, .equipment-grid {
  page-break-inside: avoid;
}
a[href^="http"]::after {
  content: " (" attr(href) ")";
  font-size: 9pt;
  color: #666 !important;
}
details {
  display: block !important;
}
details > summary {
  list-style: none;
  font-weight: bold;
  margin-top: 1em;
}
details > *:not(summary) {
  display: block !important;
}
.page-body, .blog-body {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.wrap {
  padding: 0 !important;
}
@page {
  margin: 1in;
}
}

@media (min-width: 1281px) {
.wrap,
  .topbar-inner,
  .container,
  [class*="section"],
  [class*="grid"] {
  max-width: var(--max-w);
}
}

@media (min-width: 701px) {
html body .topbar-nav a,
  html body .topbar-nav .menu-item > a {
  white-space: nowrap !important;
}
html body .topbar-nav .menu {
  flex-wrap: nowrap !important;
}
}

@media (min-width: 701px) and (max-width: 1100px) {
html body .topbar-inner {
  gap: var(--s-3) !important;
}
html body .topbar-nav {
  gap: 0 !important;
}
html body .topbar-nav a {
  padding: 8px 10px !important;
  font-size: var(--text-sm) !important;
}
html body .topbar-nav .nav-trigger {
  padding: 8px 10px !important;
}
}

@media (min-width: 701px) and (max-width: 900px) {
html body .topbar-nav a {
  padding: 8px 7px !important;
  font-size: 14px !important;
}
html body .topbar-wordmark {
  font-size: var(--text-sm) !important;
}
html body .topbar-lockup .mark {
  width: 56px !important;
}
}

@media (max-width: 1180px) {
.why-grid {
  grid-template-columns: repeat(3, 1fr);
}
}

@media (max-width: 1024px) {
.hero {
  padding: var(--s-9) 0 var(--s-8);
}
.hero h1 {
  font-size: clamp(32px, 7vw, 48px);
}
}

@media (max-width: 1180px) {
.topbar-nav .nav-item.has-dropdown {
  display: block;
  width: 100%;
}
.topbar-nav .nav-dropdown {
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 0 8px var(--s-5) !important;
  min-width: 0 !important;
  display: none !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  -webkit-transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
.topbar-nav .nav-item.is-open > .nav-dropdown {
  display: block;
}
.topbar-nav .nav-item.has-dropdown > .nav-trigger {
  width: 100% !important;
  justify-content: space-between !important;
  display: flex !important;
}
.topbar-nav {
  display: none;
}
.topbar-hamburger {
  display: block !important;
  order: 2 !important;
  width: 44px !important;
  height: 44px !important;
  flex-shrink: 0 !important;
}
.topbar-actions .btn {
  display: none;
}
.topbar-nav.is-open {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: var(--s-4);
  gap: 0;
}
.topbar-nav.is-open a {
  padding: var(--s-4);
}
/* Old circular .hero-form-badge tablet rules removed.
   Horizontal rectangle layout lives in .hero-form-badge-h block earlier. */
.hero-inner {
  grid-template-columns: 1fr;
  gap: var(--s-7);
}
.topbar-inner {
  flex-wrap: nowrap !important;
}
.topbar-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  flex-wrap: nowrap !important;
}
/* BOOK button — explicit order 1 (left) */
  .topbar-actions .js-open-book,
  .topbar-actions .btn-primary,
  .topbar-actions .btn.btn-sm {
  order: 1 !important;
  display: inline-flex !important;
  visibility: visible !important;
  background: var(--cta) !important;
  color: var(--cta-ink) !important;
  padding: 9px 14px !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  min-height: 40px !important;
  border-radius: 8px !important;
  border: 0 !important;
  white-space: nowrap !important;
}
.topbar-nav .nav-item,
  .topbar-nav .nav-item.has-dropdown {
  position: static !important;
  width: 100% !important;
  display: block !important;
}
.topbar-nav .nav-item.is-open > .nav-dropdown,
  .topbar-nav .nav-item.is-open .nav-dropdown {
  display: block !important;
}
.topbar-nav .nav-dropdown a {
  display: block !important;
  padding: 12px 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.topbar-nav .nav-dropdown a:hover {
  background: transparent !important;
}
.topbar-nav .nav-dd-title {
  display: block !important;
  font-size: 15px !important;
}
.topbar-nav .nav-dd-sub {
  display: block !important;
  font-size: 12px !important;
  color: var(--muted) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-top: 2px !important;
}
.topbar-nav .nav-dd-all {
  display: flex !important;
  justify-content: flex-start !important;
  border-top: 1px solid var(--line) !important;
  margin-top: 8px !important;
  padding-top: 12px !important;
}
/* Also kill the desktop hover-bridge pseudo on mobile */
  .topbar-nav .nav-item.has-dropdown::after {
  display: none !important;
}
.topbar-nav .nav-dropdown::before {
  display: none !important;
}
}

@media (max-width: 900px) {
.hero {
  padding: var(--s-10) 0 var(--s-9);
}
.hero h1 {
  font-size: var(--text-5xl);
}
.section-head {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
}
.section-head h2 {
  font-size: var(--text-4xl);
}
.start-grid {
  grid-template-columns: 1fr;
  gap: var(--s-7);
}
.start-form-wrap {
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
}
.paths {
  grid-template-columns: repeat(2, 1fr);
}
.method h2 {
  font-size: var(--text-4xl);
}
.method-layers {
  grid-template-columns: 1fr;
  gap: var(--s-8);
}
.services-grid {
  grid-template-columns: 1fr;
}
.four-ways-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
}
.four-ways-head h2 {
  font-size: var(--text-5xl);
}
.case-frame {
  grid-template-columns: 1fr;
}
.case-left {
  padding: var(--s-8) var(--s-6);
  min-height: auto;
}
.case-right {
  padding: var(--s-7) var(--s-6);
}
.reviews-grid {
  grid-template-columns: 1fr;
}
.about-grid {
  grid-template-columns: 1fr;
  gap: var(--s-7);
}
.about-portrait {
  aspect-ratio: 4 / 3;
}
.about-body h2 {
  font-size: var(--text-4xl);
}
.resources-grid {
  grid-template-columns: 1fr;
}
.lead-frame {
  grid-template-columns: 1fr;
}
.lead-left, .lead-right {
  padding: var(--s-8) var(--s-6);
}
.lead-left h2 {
  font-size: var(--text-3xl);
}
.faq-grid {
  grid-template-columns: 1fr;
  gap: var(--s-6);
}
.faq-head h2 {
  font-size: var(--text-4xl);
}
.faq-summary {
  font-size: var(--text-lg);
}
.consult-band {
  padding: var(--s-8) var(--s-6);
}
.consult-left h3 {
  font-size: var(--text-3xl);
}
.foot-grid {
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
}
}

@media (max-width: 768px) {
.hero-inner {
  grid-template-columns: 1fr;
  gap: var(--s-6);
}
.hero-form {
  padding: var(--s-6) var(--s-5) var(--s-5);
}
.hero h1 {
  font-size: clamp(28px, 6vw, 48px);
  max-width: 100%;
}
}

@media (max-width: 700px) {
.wrap {
  padding: 0 var(--s-5);
}
.why-grid {
  grid-template-columns: 1fr;
}
.paths {
  grid-template-columns: 1fr;
}
.four-ways-grid {
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
.four-ways-head h2 {
  font-size: var(--text-4xl);
}
.four-ways-dek {
  font-size: var(--text-md);
}
.four-way {
  padding: var(--s-6) var(--s-5);
}
.four-way-disc {
  width: 72px; height: 72px;
  margin-bottom: var(--s-4);
}
.four-way-num {
  font-size: var(--text-2xl);
}
.four-way h3 {
  font-size: var(--text-xl);
}
.topbar-lockup .mark {
  width: 56px !important;
  flex-shrink: 0;
}
.h-xl {
  font-size: var(--text-5xl);
}
.h-lg {
  font-size: var(--text-4xl);
}
.h-md {
  font-size: var(--text-3xl);
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
.hero-form {
  padding: var(--s-6) var(--s-5) var(--s-5) !important;
  background: var(--bg) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.18) !important;
  position: relative !important;
  overflow: hidden;
}
.hero h1 {
  max-width: 14ch !important;
  font-size: 44px !important;
  letter-spacing: -0.035em !important;
  line-height: 1.08 !important;
  margin: 0 0 var(--s-5) !important;
}
section {
  scroll-margin-top: 70px;
}
.topbar-inner {
  padding-left: max(var(--s-5), env(safe-area-inset-left));
  padding-right: max(var(--s-5), env(safe-area-inset-right));
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}
.mobile-cta-bar {
  display: block;
}
body {
  padding-bottom: 0 !important;
}
.topbar-hamburger {
  width: 44px !important;
  height: 44px !important;
  padding: 2px;
  display: block !important;
  flex-shrink: 0;
}
.topbar-hamburger span {
  left: 8px;
  right: 8px;
}
.topbar-nav.is-open a {
  min-height: 44px;
  padding: var(--s-5) var(--s-4);
}
.archive-pill {
  min-height: 44px;
  padding: 7px 12px !important;
  font-size: 12px !important;
}
.archive-sort select {
  min-height: 44px;
}
.book-modal-close {
  width: 44px;
  height: 44px;
  min-width: 44px;
}
.back-to-top {
  bottom: 92px;
  right: 16px;
}
/* Skip link — absolute lockdown */
  .skip-link,
  body > .skip-link,
  html body .skip-link {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(1px,1px,1px,1px) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
.skip-link:focus,
  .skip-link:focus-visible {
  left: 0 !important;
  top: 0 !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
}
/* Show subpage hero photo placeholder on mobile so the design intent is visible.
   Stacked below copy via the single-column grid below. */
  .page-hero-photo {
  display: block;
  margin-top: var(--s-5);
}
.page-hero-grid {
  grid-template-columns: 1fr !important;
  gap: var(--s-4) !important;
}
/* Tighten hero padding dramatically */
  .page-hero {
  padding: var(--s-7) 0 var(--s-6) !important;
}
.page-hero::before {
  display: none;
}
.hero {
  padding: var(--s-6) 0 var(--s-7) !important;
}
.hero::before {
  display: none;
}
/* Homepage hero grid tightened */
  .hero .wrap {
  gap: var(--s-5);
}
.page-hero h1 {
  font-size: 34px !important;
  letter-spacing: -0.025em !important;
  line-height: 1.08 !important;
}
.hero-dek, .page-hero-dek {
  font-size: var(--text-md) !important;
}
/* Tighten kicker tracking for small screens */
  .page-hero-eye, .hero-kicker {
  letter-spacing: 0.18em !important;
  font-size: 11px !important;
}
/* Review rotator min-height halved on mobile */
  .hero-proof {
  min-height: 140px !important;
  padding-top: var(--s-5) !important;
  margin-top: var(--s-5) !important;
  border-top: 1px solid rgba(245,241,232,0.14) !important;
}
.hero-proof-item {
  top: var(--s-3) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  display: none !important;
}
.hero-proof-body {
  font-size: 15px !important;
  line-height: 1.5 !important;
}
.hero-proof-attr {
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  margin-top: var(--s-3) !important;
}
/* Section rhythm tightened */
  .page-body {
  padding: var(--s-8) 0 !important;
}
.section-row {
  margin-bottom: var(--s-8) !important;
}
section.consult {
  padding: var(--s-8) 0 !important;
}
/* Breadcrumb compact */
  .breadcrumb-strip {
  padding: var(--s-3) 0 !important;
}
.breadcrumb-strip .breadcrumb {
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  flex-wrap: wrap;
  gap: 6px !important;
}
.topbar-wordmark {
  font-size: 14px !important;
  letter-spacing: 0.05em !important;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.topbar-actions {
  gap: 6px !important;
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0;
}
.topbar-actions .btn-sm {
  padding: 8px 14px !important;
  font-size: 12px !important;
  letter-spacing: 0.05em !important;
  min-height: 40px !important;
}
/* Related grid spacing tight */
  .related {
  padding: var(--s-8) 0 !important;
}
.related-grid {
  gap: var(--s-3) !important;
}
/* Feature grid gap tighter */
  .feature-grid {
  gap: var(--s-3) !important;
  margin: var(--s-5) 0 !important;
}
.feature {
  padding: var(--s-5) !important;
}
a.feature h4 {
  color: var(--blue);
}
/* Consult band compact */
  .consult-band {
  padding: var(--s-6) !important;
  gap: var(--s-4) !important;
}
.consult-band h3 {
  font-size: var(--text-3xl) !important;
}
/* Footer tightened */
  footer {
  padding: var(--s-8) 0 var(--s-5) !important;
  padding-bottom: calc(var(--s-8) + 80px + env(safe-area-inset-bottom, 0px)) !important;
}
.foot-grid {
  gap: var(--s-5) !important;
  padding-bottom: var(--s-5) !important;
}
/* Callout split stack with full-width button on mobile */
  .callout.callout-split {
  padding: var(--s-6) !important;
  gap: var(--s-4) !important;
}
.callout.callout-split .callout-right {
  width: 100%;
}
.callout.callout-split .btn {
  width: 100%;
}
/* Blog post specific — reading progress should stay */
  .blog-body h2 {
  font-size: var(--text-2xl) !important;
  margin-top: var(--s-6) !important;
}
.blog-body p {
  font-size: var(--text-md) !important;
}
/* Equipment grid compacted further */
  .equipment-grid {
  gap: var(--s-3) !important;
  margin: var(--s-5) 0 !important;
}
.eq-card {
  padding: var(--s-4) !important;
}
/* Archive controls compact */
  .archive-controls {
  padding: var(--s-3) 0 !important;
}
.archive-filters {
  gap: 4px !important;
}
.archive-featured {
  padding: var(--s-5) !important;
}
.archive-featured-title {
  font-size: var(--text-2xl) !important;
}
/* Author bio card tight */
  .blog-author {
  padding: var(--s-5) !important;
  gap: var(--s-4) !important;
}
.blog-author-avatar {
  width: 72px !important;
  height: 72px !important;
}
html {
  background: var(--anchor) !important;
}
.hero-inner {
  display: block !important;
}
.hero-text {
  padding: 0 !important;
}
/* Kicker simplified visually */
  .hero-eye {
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  color: var(--blue-soft) !important;
  margin-bottom: var(--s-4) !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
}
.hero h1 em {
  letter-spacing: -0.01em !important;
}
/* Dek tighter */
  .hero-dek {
  font-size: var(--text-md) !important;
  line-height: 1.5 !important;
  color: rgba(245,241,232,0.78) !important;
  margin: 0 0 var(--s-6) !important;
  max-width: none !important;
}
.hero-proof-item.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}
.hero-proof-stars {
  font-size: 14px !important;
  letter-spacing: 0.22em !important;
}
/* Form moves BELOW hero text as its own calm section */
  .hero-form-wrap {
  margin-top: var(--s-8) !important;
  position: relative !important;
  padding: 0 !important;
}
.hero-form-kicker {
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  margin-bottom: var(--s-4) !important;
  padding-right: 124px !important;
}
.hero-form h3 {
  font-size: 22px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: var(--s-3) !important;
  padding-right: 124px !important;
}
.hf-intro {
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin-bottom: var(--s-5) !important;
  color: var(--ink-2) !important;
  padding-right: 0 !important;
  margin-top: var(--s-4) !important;
}
.hf-field {
  margin-bottom: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.hf-input {
  min-height: 48px !important;
  font-size: 16px !important;
  padding: 12px 14px !important;
}
.hf-submit {
  width: 100% !important;
  padding: 16px 24px !important;
  font-size: 14px !important;
  letter-spacing: 0.09em !important;
  min-height: 52px !important;
  margin-top: 6px !important;
}
.hf-foot {
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  margin-top: var(--s-3) !important;
  text-align: left !important;
}
.topbar-lockup {
  flex-shrink: 1 !important;
  min-width: 0;
  overflow: hidden;
}
.topbar-actions .btn,
  .topbar-actions .btn-sm,
  .topbar-actions .js-open-book {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--cta) !important;
  color: var(--cta-ink) !important;
  padding: 18px 36px !important;
  font-family: var(--ff-display) !important;
  font-size: 16px !important;
  font-weight: var(--fw-bold) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  min-height: 56px !important;
  border-radius: 12px !important;
  border: 0 !important;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12) !important;
}
/* HHZ CERTIFIED · old circular mobile rule removed.
   New rectangle layout lives in the .hero-form-badge-h rules earlier in the file. */
.hero-form h3 em {
  display: block !important;
  padding-right: 0 !important;
  margin-top: 4px !important;
}
/* --- Topbar: compact, buttons left of hamburger --- */
  html body .topbar {
  z-index: 70 !important;
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(245,241,232,0.96) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--line) !important;
}
html body .topbar-inner {
  padding: 8px max(var(--s-5), env(safe-area-inset-left, 20px)) 8px max(var(--s-5), env(safe-area-inset-right, 20px)) !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  display: flex !important;
  align-items: center !important;
}
html body .topbar-lockup {
  flex-shrink: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  gap: 10px !important;
}
html body .topbar-lockup .mark {
  width: 54px !important;
  flex-shrink: 0 !important;
}
html body .topbar-lockup .mark svg {
  width: 100% !important;
  height: auto !important;
}
html body .topbar-wordmark {
  font-size: 14px !important;
  letter-spacing: 0.05em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body .topbar-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  flex-wrap: nowrap !important;
  position: relative !important;
  z-index: 71 !important;
}
html body .topbar-actions .js-open-book,
  html body .topbar-actions button.js-open-book,
  html body .topbar-actions .btn-primary,
  html body .topbar-actions .btn.btn-sm {
  order: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--cta) !important;
  color: var(--cta-ink) !important;
  padding: 10px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  min-height: 40px !important;
  border-radius: 8px !important;
  border: 0 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(246,108,7,0.18) !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  z-index: 72 !important;
}
html body .topbar-hamburger {
  order: 2 !important;
  display: block !important;
  width: 44px !important;
  height: 44px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(26,26,26,0.12) !important;
}
/* Hide desktop nav, show drawer when open */
  html body .topbar-nav {
  display: none !important;
}
html body .topbar-nav.is-open {
  display: flex !important;
  flex-direction: column !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 100% !important;
  background: var(--bg) !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 20px !important;
  gap: 0 !important;
  z-index: 69 !important;
}
html body .topbar-nav.is-open a {
  padding: 14px 0 !important;
  font-size: 18px !important;
  border-bottom: 1px solid rgba(26,26,26,0.06) !important;
}
/* Mobile Services dropdown — inline, full width, never off-screen */
  html body .topbar-nav .nav-item,
  html body .topbar-nav .nav-item.has-dropdown {
  position: static !important;
  width: 100% !important;
  display: block !important;
}
html body .topbar-nav .nav-item.has-dropdown > .nav-trigger {
  width: 100% !important;
  justify-content: space-between !important;
  display: flex !important;
}
html body .topbar-nav .nav-dropdown {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  -webkit-transform: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 0 8px 20px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  display: none !important;
  overflow: visible !important;
}
html body .topbar-nav .nav-item.is-open > .nav-dropdown {
  display: block !important;
}
html body .topbar-nav .nav-dropdown a {
  display: block !important;
  padding: 10px 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(26,26,26,0.05) !important;
}
html body .topbar-nav .nav-dd-title {
  display: block !important;
  font-size: 15px !important;
}
html body .topbar-nav .nav-dd-sub {
  display: block !important;
  font-size: 12px !important;
  color: var(--muted) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-top: 2px !important;
}
html body .topbar-nav .nav-item.has-dropdown::after,
  html body .topbar-nav .nav-dropdown::before {
  display: none !important;
}
/* --- Page hero (subpages) --- */
  html body .page-hero {
  padding: 28px 0 32px !important;
}
html body .page-hero::before {
  display: none !important;
}
html body .page-hero-grid {
  display: block !important;
}
html body .page-hero-photo {
  display: block !important;
  margin-top: var(--s-5) !important;
}
html body .page-hero-eye {
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  white-space: nowrap !important;
  max-width: none !important;
  overflow: visible !important;
  margin-bottom: 16px !important;
  color: var(--blue-soft) !important;
}
html body .page-hero h1 {
  font-size: 34px !important;
  line-height: 1.04 !important;
  letter-spacing: -0.03em !important;
  margin: 0 0 18px !important;
  max-width: 14ch !important;
}
html body .page-hero-dek {
  font-size: 16px !important;
  line-height: 1.5 !important;
  max-width: none !important;
}
/* --- Homepage hero --- */
  html body .hero {
  padding: 24px 0 32px !important;
}
html body .hero::before {
  display: none !important;
}
html body .hero-inner {
  display: block !important;
}
html body .hero-text, html body .hero-right {
  padding: 0 !important;
}
html body .hero-eye {
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  white-space: nowrap !important;
  max-width: none !important;
  margin-bottom: 18px !important;
  color: var(--blue-soft) !important;
}
html body .hero h1 {
  font-size: 42px !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
  margin: 0 0 20px !important;
  max-width: 14ch !important;
}
html body .hero-dek {
  font-size: 16px !important;
  line-height: 1.55 !important;
  max-width: none !important;
  margin: 0 0 20px !important;
  color: rgba(245,241,232,0.78) !important;
}
/* Hero review rotator — single review visible, no overlap */
  html body .hero-proof {
  min-height: 140px !important;
  margin-top: 20px !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(245,241,232,0.14) !important;
}
html body .hero-proof-item {
  opacity: 0 !important;
  visibility: hidden !important;
  display: none !important;
  top: 18px !important;
}
html body .hero-proof-item.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}
html body .hero-proof-stars {
  font-size: 14px !important;
  letter-spacing: 0.22em !important;
}
html body .hero-proof-body {
  font-size: 15px !important;
  line-height: 1.5 !important;
}
html body .hero-proof-attr {
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  margin-top: 12px !important;
}
/* --- Homepage hero form card --- */
  html body .hero-form-wrap {
  margin-top: 32px !important;
  position: relative !important;
  padding: 0 !important;
}
html body .hero-form {
  position: relative !important;
  background: var(--bg) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.18) !important;
  padding: 22px 20px 20px !important;
  overflow: visible !important;
  margin-top: 0 !important;
}
/* Old circular .hero-form-badge mobile rules removed.
   Horizontal rectangle layout lives in .hero-form-badge-h block
   earlier in this stylesheet. */
/* Kicker reserves width for burst */
  html body .hero-form .hero-form-kicker {
  padding-right: 72px !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  color: var(--blue) !important;
  margin-bottom: 14px !important;
  min-height: 12px !important;
  margin: 0 0 14px !important;
  text-align: left !important;
}
/* H3: 'Found mold?' row 1, 'Here's what to do.' row 2 (one line) */
  html body .hero-form h3 {
  padding-right: 0 !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  font-family: var(--ff-display) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 16px !important;
  color: var(--ink) !important;
  text-align: left !important;
}
html body .hero-form h3 .row-2 {
  display: block !important;
  white-space: nowrap !important;
}
html body .hero-form h3 em {
  display: block !important;
  padding-right: 0 !important;
  margin-top: 4px !important;
  font-family: var(--ff-body) !important;
  font-style: italic !important;
  font-weight: 800 !important;
  color: var(--blue) !important;
  font-size: 26px !important;
}
/* Dek and below use full width */
  html body .hero-form .hf-intro {
  padding-right: 0 !important;
  margin: 0 0 20px !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--ink-2) !important;
  padding: 0 !important;
  text-align: left !important;
}
/* Fields tight */
  html body .hero-form .hf-field {
  display: block !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 0 14px !important;
  padding-right: 0 !important;
  padding: 0 !important;
  position: relative !important;
  row-gap: 0 !important;
}
html body .hero-form .hf-input {
  width: 100% !important;
  min-height: 50px !important;
  font-size: 16px !important;
  padding: 13px 14px !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 10px !important;
  background: var(--surface-0) !important;
  font-family: var(--ff-body) !important;
  color: var(--ink) !important;
  margin: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
}
html body .hero-form .hf-input:focus {
  outline: none !important;
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(61,90,128,0.12) !important;
}
html body .hero-form .hf-submit {
  width: 100% !important;
  padding: 16px 24px !important;
  font-size: 14px !important;
  letter-spacing: 0.09em !important;
  min-height: 52px !important;
  margin: 6px 0 0 !important;
  background: var(--anchor) !important;
  color: var(--bg) !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(246,108,7,0.18) !important;
}
html body .hero-form .hf-foot {
  text-align: left !important;
  font-family: var(--ff-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  color: var(--muted) !important;
  margin: 12px 0 0 !important;
  margin-top: 12px !important;
}
/* --- Section body rhythm --- */
  html body .page-body {
  padding: 32px 0 !important;
}
html body .section-row {
  margin-bottom: 28px !important;
  display: block !important;
  grid-template-columns: none !important;
}
html body .section-row-body {
  padding-top: 0 !important;
}
/* Mobile · keep horizontal scroller (swipeable carousel feel),
   slightly smaller cards so the next one peeks at the right edge as a scroll hint */
html body .feature-grid {
  gap: 12px !important;
  margin: 18px 0 !important;
  padding: 8px 8px 16px !important;
  margin-left: -8px !important;
  margin-right: -8px !important;
}
html body .feature {
  padding: 20px !important;
  flex: 0 0 280px !important;
  min-width: 280px !important;
}
/* Equipment grid on Method · same swipe pattern */
  html body .equipment-grid {
  gap: 12px !important;
  margin: 16px 0 !important;
  padding: 8px 8px 16px !important;
  margin-left: -8px !important;
  margin-right: -8px !important;
}
html body .eq-card {
  padding: 16px !important;
  flex: 0 0 260px !important;
  min-width: 260px !important;
}
/* Related / resources grid */
  html body .related-grid {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}
html body .related {
  padding: 32px 0 !important;
}
/* Callout */
  html body .callout, html body .callout.callout-split {
  padding: 24px !important;
  margin: 24px 0 !important;
  display: block !important;
}
html body .callout.callout-split .callout-right {
  width: 100% !important;
  margin-top: 14px;
}
html body .callout.callout-split .callout-right .btn {
  width: 100% !important;
}
/* Consult band */
  html body .consult {
  padding: 32px 0 !important;
}
html body .consult-band {
  padding: 24px !important;
  gap: 14px !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
html body .consult-band h3 {
  font-size: 26px !important;
  max-width: none !important;
}
html body .consult-actions {
  width: 100% !important;
}
html body .consult-actions .btn {
  width: 100% !important;
}
/* Archive / resources controls */
  html body .archive-featured {
  padding: 22px 20px !important;
}
html body .archive-featured-title {
  font-size: 22px !important;
  line-height: 1.1 !important;
}
html body .archive-controls {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  padding: 12px 0 !important;
  position: static !important;
}
html body .archive-filters {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: 6px !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: 6px !important;
}
html body .archive-filters::-webkit-scrollbar {
  display: none;
}
html body .archive-pill {
  flex-shrink: 0 !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
  min-height: 38px !important;
}
html body .archive-tools {
  display: flex !important;
  gap: 10px !important;
  justify-content: space-between !important;
}
html body .archive-search input {
  min-width: 0 !important;
  width: 100% !important;
  font-size: 15px !important;
}
/* Blog post typography */
  html body .blog-body h2 {
  font-size: 22px !important;
  margin: 28px 0 14px !important;
  line-height: 1.12 !important;
}
html body .blog-body p {
  font-size: 16px !important;
  line-height: 1.6 !important;
}
html body .blog-pullquote,
html body blockquote {
  padding: 16px 0 16px 18px !important;
  font-size: 17px !important;
}
html body .blog-fieldnote {
  padding: 16px !important;
}
html body .blog-inline-cta {
  padding: 20px !important;
  display: block !important;
}
html body .blog-inline-cta > div {
  margin-bottom: 14px;
}
html body .blog-inline-cta .btn {
  width: 100% !important;
  margin-left: 0 !important;
}
html body .blog-author {
  padding: 20px !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}
html body .blog-author-avatar {
  width: 72px !important;
  height: 72px !important;
}
/* Breadcrumb */
  html body .breadcrumb-strip {
  padding: 10px 0 !important;
}
html body .breadcrumb-strip .breadcrumb {
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
html body {
  padding-bottom: 0 !important;
}
html body footer {
  padding: 32px 0 calc(40px + 80px + env(safe-area-inset-bottom, 0px)) !important;
}
html body .foot-grid {
  grid-template-columns: 1fr !important;
  gap: 24px !important;
  padding-bottom: 20px !important;
}
html body .foot-col h4 {
  margin-bottom: 10px !important;
}
/* Mobile CTA bar */
  html body .mobile-cta-bar {
  display: block !important;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 45 !important;
}
html body .mobile-cta-bar .btn {
  width: 100% !important;
  min-height: 52px !important;
  font-size: 14px !important;
}
/* Back-to-top */
  html body .back-to-top {
  bottom: 88px !important;
  right: 16px !important;
}
/* A11y widget — keep accessible, move up so it doesn't hit CTA bar */
  html body .a11y-widget {
  right: 14px !important;
  bottom: 72px !important;
}
html body .a11y-toggle {
  width: 48px !important;
  height: 48px !important;
}
/* Booking modal on mobile — bottom-sheet feel */
  html body .book-modal-card,
  html body .eq-modal-panel {
  border-radius: 20px 20px 0 0 !important;
  margin: 0 !important;
  max-height: 90vh !important;
  width: 100% !important;
  max-width: 100% !important;
}
html body .book-modal,
  html body .eq-modal {
  align-items: flex-end !important;
  padding: 0 !important;
}
/* Inputs — prevent iOS zoom */
  html body input, html body textarea, html body select {
  font-size: 16px !important;
}
/* Hero + testimonial links on mobile render as plain text */
  html body .hero-dek a,
  html body .hero-proof-body a,
  html body .hero-proof a {
  color: inherit !important;
  text-decoration: none !important;
  pointer-events: none !important;
  border-bottom: 0 !important;
  cursor: default !important;
}
html body .hero-dek a em,
  html body .hero-proof-body a em {
  color: var(--blue-soft) !important;
  font-style: italic;
}
html body .hero-form .hf-label {
  transform: none !important;
  position: static !important;
}
html body .hero-form .hf-field * {
  margin-top: 0 !important;
}
html body .hero-form .hf-field .hf-label + .hf-input,
  html body .hero-form .hf-label + input,
  html body .hero-form .hf-input {
  margin-top: 4px !important;
  display: block !important;
  width: 100% !important;
  min-height: 50px !important;
  padding: 13px 14px !important;
  font-size: 16px !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 10px !important;
  background: var(--surface-0) !important;
  box-sizing: border-box !important;
}
/* Avoid parent overflow clipping the sticky */
/* Big h3 restored */
  html body .hero-form h3,
  html body .hero-form h3 em {
  font-size: 26px !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
}
html body form.hero-form h3 em {
  display: block !important;
  padding-right: 0 !important;
  margin-right: -74px !important;
  margin-top: 6px !important;
  white-space: nowrap !important;
}
html body form.hero-form h3 {
  padding-right: 74px !important;
}
html body form.hero-form .hero-form-kicker {
  padding-right: 88px !important;
}
html body .hero-eye-full {
  display: none !important;
}
html body .hero-eye-short {
  display: inline !important;
}
}

@media (max-width: 680px) {
.hero::before {
  display: none !important;
}
}

@media (max-width: 640px) {
.blog-inline-cta {
  padding: var(--s-6);
}
.blog-inline-cta > .btn {
  margin-left: 0;
  width: 100%;
}
.gform_wrapper .gform_fields {
  grid-template-columns: 1fr;
}
.gform_wrapper .gfield--width-half,
  .gform_wrapper .gfield--width-third,
  .gform_wrapper .gfield--width-quarter {
  grid-column: 1 / -1;
}
}

@media (max-width: 600px) {
.hero-text h1 {
  font-size: var(--text-5xl);
}
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.consult-band .btn {
  width: 100%;
}
/* Consult-band sits on the blue panel · primary button needs bone fill to read */
.consult-band .btn-primary,
[data-bg="blue"] .btn-primary {
  background: var(--bg);
  color: var(--blue);
  border-color: var(--bg);
}
.consult-band .btn-primary:hover,
[data-bg="blue"] .btn-primary:hover {
  background: var(--anchor);
  color: var(--bg);
  border-color: var(--anchor);
}
.book-modal-card {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-height: 90vh;
  border-radius: 20px 20px 0 0;
  margin: 0;
  overflow-y: auto;
}
.eq-modal-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-height: 90vh;
  border-radius: 20px 20px 0 0;
  margin: 0;
  overflow-y: auto;
}
.btn {
  padding: 12px 24px;
  min-height: 44px;
  width: 100%;
}
.btn-lg {
  width: 100%;
}
.blog-author {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.blog-author-avatar,
  .author-bio img {
  width: 72px;
  height: 72px;
}
}

@media (max-width: 560px) {
.book-modal-card {
  padding: var(--s-7) var(--s-5) var(--s-6);
}
.book-modal-card h2 {
  letter-spacing: -0.035em;
  margin-bottom: var(--s-4);
  max-width: none !important;
}
.book-modal-card .book-modal-kicker {
  font-size: 11px;
  letter-spacing: 0.24em;
}
.book-modal-card .book-modal-intro {
  font-size: 15px;
  line-height: 1.5;
}
.hero-actions,
  [class*="actions"],
  [class*="cta-row"] {
  flex-direction: column;
  gap: var(--s-3);
}
.hero-actions .btn,
  [class*="actions"] .btn,
  [class*="cta-row"] .btn {
  width: 100%;
}
}

@media (max-width: 500px) {
.hero h1 {
  font-size: var(--text-4xl);
}
.foot-grid {
  grid-template-columns: 1fr;
}
.a11y-widget {
  right: 12px;
  bottom: 12px;
}
.a11y-panel {
  width: calc(100vw - 24px);
  right: -6px;
}
.h-md {
  font-size: var(--text-2xl);
}
.h-sm {
  font-size: var(--text-lg);
}
section {
  scroll-margin-top: 60px;
}
/* Old circular .hero-form-badge mobile rules removed at 500px tier.
   Horizontal rectangle layout lives in .hero-form-badge-h block earlier. */
p {
  max-width: 100%;
  overflow-wrap: break-word;
}
.hero-eye {
  font-size: 12px;
}
}

/* Keep the topbar wordmark visible on phones — the icon alone reads as
   incomplete branding. Size it down and lift the max-width cap so it fits
   without an ellipsis on iPhone 14 (390), iPhone 14 Pro Max (430), and
   Pixel 9 (412). Galaxy 360 still hides the wordmark via the 375px rule. */
@media (max-width: 479px) {
  html body .topbar-wordmark {
    display: inline-block !important;
    font-size: 11px !important;
    max-width: none !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }
}

@media (max-width: 430px) {
.topbar-inner {
  padding: var(--s-3) var(--s-5);
  gap: var(--s-3);
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
.topbar-lockup .mark {
  width: 52px !important;
}
.topbar-wordmark {
  font-size: 13px !important;
  max-width: 120px;
}
.btn {
  padding: 10px 14px;
  min-height: 40px;
  font-size: var(--text-sm);
}
.btn-lg {
  padding: 14px 20px;
  min-height: 48px;
}
h1 {
  font-size: var(--text-3xl) !important;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
h2 {
  font-size: var(--text-2xl);
}
.hero-dek {
  font-size: var(--text-md);
}
.hero h1 {
  font-size: 38px !important;
}
.page-hero h1 {
  font-size: 28px !important;
}
.consult-band h3 {
  font-size: var(--text-2xl) !important;
}
.archive-featured-title {
  font-size: var(--text-xl) !important;
}
.hero-form h3 {
  font-size: 20px !important;
}
.hero-primary-mobile-cta {
  font-size: 14px !important;
  padding: 14px 20px !important;
}
.topbar-actions .btn,
  .topbar-actions .btn-sm,
  .topbar-actions .js-open-book {
  padding: 8px 12px !important;
  font-size: 10px !important;
}
.topbar-actions .js-open-book {
  padding: 8px 12px !important;
  font-size: 10px !important;
}
.hero-eye {
  font-size: 9px !important;
  letter-spacing: 0.15em !important;
}
/* Old circular .hero-form-badge mobile rules removed at 430px tier.
   Horizontal rectangle layout lives in .hero-form-badge-h block earlier. */
html body .topbar-lockup .mark {
  width: 50px !important;
}
html body .topbar-wordmark {
  font-size: 13px !important;
}
html body .topbar-actions .js-open-book {
  padding: 9px 13px !important;
  font-size: 11px !important;
}
html body .hero h1 {
  font-size: 36px !important;
}
html body .page-hero h1 {
  font-size: 30px !important;
}
html body .hero-form h3 {
  font-size: 18px !important;
  padding-right: 46px !important;
}
html body .hero-form .hero-form-kicker {
  padding-right: 62px !important;
}
html body .hero-form h3, html body .hero-form h3 em {
  font-size: 22px !important;
}
html body form.hero-form h3 em {
  margin-right: -64px !important;
}
html body form.hero-form h3 {
  padding-right: 64px !important;
}
html body form.hero-form .hero-form-kicker {
  padding-right: 78px !important;
}
html body .a11y-widget {
  bottom: 68px !important;
}
}

@media (max-width: 390px) {
html body .hero-form h3,
  html body .hero-form h3 em {
  font-size: 20px !important;
}
html body .hero-form h3 {
  padding-right: 42px !important;
}
html body .hero-form .hero-form-kicker {
  padding-right: 58px !important;
}
html body form.hero-form h3 em {
  margin-right: -58px !important;
}
html body form.hero-form h3 {
  padding-right: 58px !important;
}
html body form.hero-form .hero-form-kicker {
  padding-right: 72px !important;
}
}

@media (max-width: 375px) {
.btn-sm {
  padding: 7px 12px;
  font-size: var(--text-xs);
  min-height: 32px;
}
.topbar-inner {
  padding: var(--s-2) var(--s-5);
}
h1 {
  font-size: var(--text-2xl) !important;
}
.hero-form {
  padding: var(--s-4) var(--s-4) var(--s-3);
}
.topbar-actions .btn-sm {
  padding: 7px 10px !important;
  font-size: 11px !important;
  min-height: 38px !important;
}
.hero h1 {
  font-size: 34px !important;
}
.page-hero h1 {
  font-size: 26px !important;
}
.topbar-wordmark {
  max-width: 110px;
  display: none !important;
}
.hero-eye {
  font-size: 8.5px !important;
  letter-spacing: 0.12em !important;
}
.topbar-actions .btn,
  .topbar-actions .btn-sm,
  .topbar-actions .js-open-book {
  padding: 8px 11px !important;
}
.topbar-lockup .mark {
  width: 48px !important;
}
/* Old circular .hero-form-badge mobile rules removed at 375px tier.
   Horizontal rectangle layout lives in .hero-form-badge-h block earlier. */
.hero-form h3 {
  font-size: 18px !important;
}
html body .topbar-inner {
  padding: 6px 14px !important;
  gap: 8px !important;
}
html body .topbar-lockup .mark {
  width: 46px !important;
}
html body .topbar-wordmark {
  font-size: 12px !important;
  max-width: 105px;
}
html body .topbar-actions .js-open-book {
  padding: 8px 11px !important;
  font-size: 10.5px !important;
  min-height: 38px !important;
}
html body .topbar-hamburger {
  width: 40px !important;
  height: 40px !important;
}
html body .hero h1 {
  font-size: 32px !important;
}
html body .page-hero h1 {
  font-size: 28px !important;
}
html body .hero-eye, html body .page-hero-eye {
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
}
html body .hero-form h3 {
  font-size: 17px !important;
  padding-right: 40px !important;
}
html body .hero-form {
  padding: 18px 16px 16px !important;
}
html body .hero-form .hero-form-kicker {
  padding-right: 102px !important;
}
html body .hero-form h3, html body .hero-form h3 em {
  font-size: 20px !important;
}
}

@media (max-width: 360px) {
.topbar-inner {
  padding: var(--s-3) var(--s-4);
  gap: var(--s-3);
}
.topbar-lockup .mark {
  width: 56px;
}
.topbar-wordmark {
  font-size: var(--text-sm);
}
.wrap {
  padding: 0 var(--s-4);
}
h1, h2, h3 {
  overflow-wrap: break-word;
  word-break: break-word;
}
html body .topbar-wordmark {
  display: none !important;
}
html body .hero h1 {
  font-size: 30px !important;
}
html body .page-hero h1 {
  font-size: 26px !important;
}
html body .hero-form h3, html body .hero-form h3 em {
  font-size: 18px !important;
}
html body .hero-form h3 {
  padding-right: 38px !important;
}
html body .hero-form .hero-form-kicker {
  padding-right: 54px !important;
}
html body form.hero-form h3 em {
  margin-right: -52px !important;
  white-space: normal !important;
}
html body form.hero-form h3 {
  padding-right: 52px !important;
}
html body form.hero-form .hero-form-kicker {
  padding-right: 66px !important;
}
}


/* ========================================================================
   MOBILE AUDIT FIX (2026-04-24)
   BOOK button tap target: 44×44 minimum per noyo-html-css skill.
   Measured 69×40 at 360/390/430 — below the 44px floor.
   ======================================================================== */
@media (max-width: 700px) {
  html body .topbar-actions .js-open-book,
  html body .topbar-actions button.js-open-book,
  html body .topbar-actions .btn.js-open-book {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 8px 14px !important;
  }
}


/* ========================================================================
   TABLET EXTEND · BOOK button tap-target at touch-capable widths
   Tablet users still tap; extend the 44px floor through 1024px (iPad landscape).
   Above that we assume mouse/trackpad, so the existing 40-42px is acceptable.
   ======================================================================== */
@media (min-width: 701px) and (max-width: 1024px) {
  html body .topbar-actions .js-open-book,
  html body .topbar-actions button.js-open-book,
  html body .topbar-actions .btn.js-open-book {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }
}


/* ========================================================================
   RESOURCES ARCHIVE · mobile overflow fix (2026-04-24)
   .archive-filters and .archive-tools were 950px fixed-width on mobile,
   causing 400-475px horizontal overflow at 360-430px viewports.
   Collapse to fluid containers below 1024px.
   ======================================================================== */
@media (max-width: 1024px) {
  html body .archive-filters,
  html body .archive-tools,
  html body .archive-controls {
    max-width: 100% !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    box-sizing: border-box !important;
  }
  html body .archive-tools {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  html body .archive-sort,
  html body .archive-search {
    width: 100% !important;
    max-width: 100% !important;
  }
  html body .archive-search input,
  html body .archive-sort .select2-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  html body .archive-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 700px) {
  html body .archive-filters .archive-pill {
    font-size: 11px !important;
    padding: 6px 10px !important;
  }
  html body .archive-pill-count {
    font-size: 10px !important;
  }
}


/* ========================================================================
   BOOKING MODAL · iOS mobile fixes (2026-04-24)
   Complaint: massive vertical gaps between fields on real iOS Safari;
   X button + backdrop tap don't dismiss the modal.
   These rules force the mobile layout to a tight single-column block
   regardless of grid/flex context, and give close triggers explicit
   touch affordances iOS needs.
   ======================================================================== */
@media (max-width: 700px) {
  /* Stack fields as a simple vertical list, kill grid-row implicit spacing */
  html body .book-modal-card .gform_wrapper .gform_fields,
  html body #bookModal .gform_wrapper .gform_fields {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    row-gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body .book-modal-card .gform_wrapper .gfield,
  html body #bookModal .gform_wrapper .gfield {
    display: block !important;
    width: 100% !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    grid-column: auto !important;
  }
  html body .book-modal-card .gform_wrapper .gfield_label,
  html body #bookModal .gform_wrapper .gfield_label,
  html body .book-modal-card .gform_wrapper .gform-field-label,
  html body #bookModal .gform_wrapper .gform-field-label {
    display: block !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    height: auto !important;
    min-height: 0 !important;
  }
  html body .book-modal-card .gform_wrapper .ginput_container,
  html body #bookModal .gform_wrapper .ginput_container {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body .book-modal-card .gform_wrapper .ginput_container input,
  html body #bookModal .gform_wrapper .ginput_container input,
  html body .book-modal-card .gform_wrapper .ginput_container textarea,
  html body #bookModal .gform_wrapper .ginput_container textarea,
  html body .book-modal-card .gform_wrapper .ginput_container select,
  html body #bookModal .gform_wrapper .ginput_container select {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
  }
  html body #bookModal .gform_wrapper .ginput_container textarea {
    min-height: 96px !important;
    max-height: none !important;
    padding: 10px 14px !important;
  }
  /* Tighter modal card padding on mobile so form fits without scroll */
  html body .book-modal-card {
    padding: 20px 18px !important;
    gap: 0 !important;
  }
  html body .book-modal-kicker {
    margin-bottom: 4px !important;
  }
  html body #bookModalTitle,
  html body .book-modal-card h2 {
    margin: 0 0 8px 0 !important;
    font-size: clamp(18px, 5.5vw, 26px) !important;
    line-height: 1.1 !important;
    text-wrap: nowrap !important;
    word-break: keep-all !important;
    word-spacing: normal !important;
    hyphens: none !important;
    overflow-wrap: normal !important;
    max-width: none !important;
    width: auto !important;
    overflow: visible !important;
    display: block !important;
  }
  html body #bookModalTitle em,
  html body .book-modal-card h2 em {
    display: inline !important;
  }
  html body .book-modal-intro {
    margin: 0 0 16px 0 !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
  }

  /* Close button + backdrop: give iOS the touch affordances it needs */
  html body #bookModal .book-modal-close,
  html body #bookModal [aria-label="Close"],
  html body .book-modal-close,
  html body [data-close="modal"] {
    cursor: pointer !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
    touch-action: manipulation !important;
    pointer-events: auto !important;
  }
  html body #bookModal .book-modal-close,
  html body .book-modal-close {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
  }
  html body #bookModal .book-modal-backdrop,
  html body .book-modal-backdrop {
    pointer-events: auto !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }
}


/* ========================================================================
   BACK-TO-TOP · mobile stacking with sticky CTA + a11y widget.
   Stack from the bottom up: sticky CTA (~80px) → a11y widget → back-to-top.
   Both floating buttons sit on the right edge above the CTA bar.
   ======================================================================== */
@media (max-width: 1180px) {
  html body .a11y-widget {
    right: 14px !important;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 90 !important;
  }
  html body .back-to-top {
    bottom: calc(160px + env(safe-area-inset-bottom, 0px)) !important;
    right: 14px !important;
    width: 44px !important;
    height: 44px !important;
    z-index: 90 !important;
  }
}


/* ========================================================================
   SECTION PADDING · mobile tightening (2026-04-24)
   Every major section shipped with 96px top + 96px bottom = 192px gap
   between adjacent sections on phones. That's too breathy.
   Clamp to 48px at 700px, 40px at 430px, 32px at 360px.
   .hero and .consult already have tuned mobile values — leave them.
   ======================================================================== */
@media (max-width: 900px) {
  html body section.start-here,
  html body section.method,
  html body section.services,
  html body section.why-us,
  html body section.case,
  html body section.reviews,
  html body section.about,
  html body section.resources,
  html body section.lead-magnet,
  html body section.faq,
  html body section.related,
  html body section.page-body,
  html body .cred-marquee,
  html body .archive-featured {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
}

@media (max-width: 700px) {
  html body section.start-here,
  html body section.method,
  html body section.services,
  html body section.why-us,
  html body section.case,
  html body section.reviews,
  html body section.about,
  html body section.resources,
  html body section.lead-magnet,
  html body section.faq,
  html body section.related,
  html body section.page-body,
  html body .cred-marquee,
  html body .archive-featured {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
}

@media (max-width: 430px) {
  html body section.start-here,
  html body section.method,
  html body section.services,
  html body section.why-us,
  html body section.case,
  html body section.reviews,
  html body section.about,
  html body section.resources,
  html body section.lead-magnet,
  html body section.faq,
  html body section.related,
  html body section.page-body,
  html body .cred-marquee,
  html body .archive-featured {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
}

@media (max-width: 360px) {
  html body section.start-here,
  html body section.method,
  html body section.services,
  html body section.why-us,
  html body section.case,
  html body section.reviews,
  html body section.about,
  html body section.resources,
  html body section.lead-magnet,
  html body section.faq,
  html body section.related,
  html body section.page-body,
  html body .cred-marquee,
  html body .archive-featured {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}

/* Intra-section spacing (heads, content blocks) tighten too */
@media (max-width: 700px) {
  html body .section-head,
  html body .section-row-head,
  html body .related-head {
    margin-bottom: 28px !important;
  }
  html body .section-row {
    margin-bottom: 44px !important;
    gap: 20px !important;
  }
  html body .section-row:last-child {
    margin-bottom: 0 !important;
  }
  /* Stacked-default h2 needs smaller scale on mobile */
  html body .section-row-head h2 {
    font-size: 30px !important;
    line-height: 1.06 !important;
    letter-spacing: -0.025em !important;
  }
  html body .section-row-head p {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }
}


/* ========================================================================
   BACK-TO-TOP · hidden on mobile (2026-04-24)
   iOS Safari and Android Chrome both have native status-bar-tap to scroll
   to top, so the floating back-to-top button is redundant on mobile and
   clashes visually with the accessibility FAB. Hide below 700px.
   ======================================================================== */
/* Back-to-top stays visible on mobile · positioned above the a11y widget,
   which itself sits above the sticky CTA bar. The earlier "hide on mobile"
   rule has been replaced by the stacking rule higher in this file. */
@media (max-width: 700px) {
  html body .back-to-top {
    display: flex !important;
    visibility: visible !important;
  }
}


/* ========================================================================
   BLUE-BACKGROUND LINK CONTRAST (2026-04-27)
   On any element with a blue background (var(--blue) or near-equivalents),
   inline links must be high-contrast — bone or orange, never blue-on-blue.
   Hover flips between the two for affordance.
   ======================================================================== */
html body .consult-band a:not(.btn),
html body [style*="background: var(--blue)"] a:not(.btn),
html body [style*="background:var(--blue)"] a:not(.btn),
html body [style*="background-color: var(--blue)"] a:not(.btn),
html body .blog-inline-cta.is-blue a:not(.btn),
html body .archive-featured.is-blue a:not(.btn),
html body section[data-bg="blue"] a:not(.btn) {
  color: var(--cta) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 3px !important;
  font-weight: 700 !important;
}
html body .consult-band a:not(.btn):hover,
html body [style*="background: var(--blue)"] a:not(.btn):hover,
html body section[data-bg="blue"] a:not(.btn):hover {
  color: var(--bg) !important;
  text-decoration-color: var(--cta) !important;
}

/* Italic emphasis on blue-bg headlines should also be readable.
   .consult-band h3 em already uses --bg from earlier fix; this guards new contexts. */
html body section[data-bg="blue"] h1 em,
html body section[data-bg="blue"] h2 em,
html body section[data-bg="blue"] h3 em {
  color: var(--bg) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px !important;
}

/* Body copy default on blue panels = solid bone (already set on .consult-band p, but
   guard generically for any future blue panel) */
html body section[data-bg="blue"] p,
html body section[data-bg="blue"] li {
  color: var(--bg) !important;
}


/* ============================================================================
   MOBILE MENU DRAWER (2026-04-27)
   Slide-from-right panel with overlay backdrop. Triggered by #navToggle.
   Replaces the old .topbar-nav.is-open dropdown. HHZ branding: anchor
   gradient bg, bone text, orange CTA, blue accents on hover.
   ============================================================================ */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
  /* Below the drawer (500) but above a11y widget (400) so the dim covers it */
  z-index: 480;
}
.menu-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(380px, 88vw);
  background: var(--anchor);
  background-image: radial-gradient(circle at 0% 0%, var(--anchor-soft) 0%, var(--anchor) 60%);
  color: var(--bg);
  padding: 64px 28px calc(32px + env(safe-area-inset-bottom, 0px));
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  /* Sits above a11y widget (z-tooltip: 400) and modals (z-modal: 200) */
  z-index: 500;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: none;
}
@media (max-width: 1180px) {
  .mobile-menu {
    display: flex;
    flex-direction: column;
  }
}
.mobile-menu.is-open { transform: translateX(0); }

.mobile-menu-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--anchor);
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
  padding: 0;
}
.mobile-menu-close:hover {
  background: var(--blue-soft);
  color: var(--anchor);
  transform: scale(1.05);
}

.mobile-menu-logo {
  display: flex !important;
  align-items: center;
  gap: 14px;
  margin: 0 0 24px;
  padding: 0 !important;
  border-bottom: 0 !important;
  text-decoration: none;
  color: var(--bg);
}
.mobile-menu-logo .mark {
  width: 72px;
  flex-shrink: 0;
  color: var(--bg);
}
.mobile-menu-logo .mark svg { width: 100%; height: auto; display: block; }
.mobile-menu-logo .wordmark {
  font-family: var(--ff-display);
  font-weight: var(--fw-black);
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bg);
  line-height: 1.2;
}
.mobile-menu-logo .wordmark em {
  font-style: italic;
  font-weight: 800;
  color: var(--blue-soft);
  letter-spacing: 0;
}

.mobile-menu-phone {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 14px 18px !important;
  margin-top: auto !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  background: rgba(245, 241, 232, 0.08);
  border: 1px solid rgba(245, 241, 232, 0.18) !important;
  border-radius: var(--r-md);
  text-align: center;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(245, 241, 232, 0.18) !important;
  transition: background var(--t-fast), border-color var(--t-fast);
  flex-shrink: 0 !important;
}
.mobile-menu-phone:hover {
  background: rgba(245, 241, 232, 0.14);
  border-color: rgba(245, 241, 232, 0.28) !important;
}
.mm-phone-label {
  display: block;
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.6);
  line-height: 1;
}
.mm-phone-num {
  display: block;
  font-family: var(--ff-display);
  font-size: 24px;
  font-weight: var(--fw-bold);
  color: var(--bg);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.mobile-menu .mm-top {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mobile-menu .mm-top a {
  display: block;
  padding: 18px 0;
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--bg);
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 241, 232, 0.15);
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.mobile-menu .mm-top a:hover {
  color: var(--blue-soft);
  padding-left: 4px;
}

.mobile-menu .mm-group {
  border-bottom: 1px solid rgba(245, 241, 232, 0.15);
  margin: 0;
}
.mobile-menu .mm-group > summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  cursor: pointer;
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--bg);
  cursor: pointer;
  user-select: none;
  transition: color var(--t-fast);
}
.mobile-menu .mm-group > summary:hover { color: var(--blue-soft); }
.mobile-menu .mm-group > summary::-webkit-details-marker { display: none; }
.mobile-menu .mm-group > summary::marker { display: none; content: ''; }
.mobile-menu .mm-group > summary::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(245, 241, 232, 0.7);
  border-bottom: 2px solid rgba(245, 241, 232, 0.7);
  transform: rotate(45deg);
  margin-left: 12px;
  margin-top: -4px;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mobile-menu .mm-group[open] > summary::after {
  transform: rotate(-135deg);
  margin-top: 4px;
}
.mobile-menu .mm-sub {
  list-style: none;
  padding: 0 0 14px 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mobile-menu .mm-sub li { margin: 0; }
.mobile-menu .mm-sub a {
  display: block;
  font-family: var(--ff-body);
  font-size: 16px;
  font-weight: 500;
  padding: 10px 0;
  color: rgba(245, 241, 232, 0.8);
  text-decoration: none;
  border-bottom: 0;
  letter-spacing: 0;
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.mobile-menu .mm-sub a:hover {
  color: var(--bg);
  padding-left: 4px;
}

.mobile-menu-cta {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 24px !important;
  margin-top: 28px;
  background: var(--cta) !important;
  color: var(--bg) !important;
  font-family: var(--ff-display) !important;
  font-size: 13px !important;
  font-weight: var(--fw-bold) !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  border-radius: var(--r-md);
  border: 0;
  border-bottom: 0 !important;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  transition: background var(--t-fast), transform var(--t-fast);
}
.mobile-menu-cta:hover {
  background: var(--cta-hover) !important;
  transform: translateY(-1px);
}

/* PERMANENT mobile suppression: the legacy .topbar-nav.is-open dropdown is
   replaced sitewide by the .mobile-menu drawer. Force it hidden whenever the
   topbar nav would otherwise drop down. Also suppress the a11y widget while
   the drawer is open so it doesn't peek through. */
@media (max-width: 1180px) {
  body.mobile-menu-open { overflow: hidden; }
  html body .topbar-nav.is-open { display: none !important; }
  body.mobile-menu-open .a11y-widget { display: none !important; }
}

/* No images on resource/blog cards — hide all article thumbs sitewide so the
   text-first card design carries the layout. */
.article-thumb { display: none !important; }

/* Footer book inspection button · sits in the contact column, gets the same
   orange CTA treatment as every other Book button, but stays compact (not
   stretched to li width) and has proper padding + radius. */
.foot-col .footer-book-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  padding: 12px 18px !important;
  border-radius: var(--r-md) !important;
  text-align: center !important;
  margin-top: var(--s-1);
  min-height: 44px;
  line-height: 1;
}

/* MOBILE TOPBAR & STICKY CTA · phone treatment.
   Below 1000px: bigger house icon + wordmark, the topbar BOOK button is
   removed (replaced by sticky bottom CTA), hamburger sits on the right, and
   the mobile-cta-bar is always visible at the bottom of the viewport.
   Body picks up bottom padding so the CTA bar never overlaps the footer. */
@media (max-width: 1180px) {
  /* Bigger logo lockup */
  html body .topbar-lockup .mark { width: 64px !important; }
  html body .topbar-wordmark {
    font-size: 16px !important;
    letter-spacing: 0.06em !important;
    max-width: none !important;
    overflow: visible !important;
    white-space: nowrap !important;
    display: inline-block !important;
  }

  /* Remove topbar Book button on mobile · CTA lives in sticky bottom bar */
  html body .topbar-actions .js-open-book,
  html body .topbar-actions .btn-primary {
    display: none !important;
  }

  /* Sticky bottom CTA bar · always visible, no scroll trigger needed */
  html body .mobile-cta-bar {
    display: block !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  html body .mobile-cta-bar .btn {
    width: 100% !important;
    min-height: 52px;
    font-size: var(--text-md);
  }

  /* Reserve space at the bottom of the page so footer content doesn't sit
     under the sticky CTA bar */
  html body footer {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Hide sticky CTA bar at narrowest widths only if absolutely needed · keep
   it on phones at 360px+. Also hide it when the booking modal or mobile
   menu is open so it doesn't sit on top of the drawer/modal.
   Use visibility + opacity instead of display:none so the bar keeps its
   transform state when shown again — prevents the flash-down-flash-up
   animation seen on drawer close. */
body.mobile-menu-open .mobile-cta-bar,
body.modal-open .mobile-cta-bar {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: none !important;
}

/* ============================================================================
   FOOTER · FL licenses + mobile DBA wrap
   ============================================================================ */
.foot-licenses {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.7);
  margin-top: 12px;
  line-height: 1.5;
}
.foot-licenses strong {
  color: var(--bg);
  font-weight: var(--fw-bold);
}
.foot-copy { display: inline; }
.foot-copy-main, .foot-copy-dba { display: inline; }
@media (max-width: 700px) {
  .foot-copy-main, .foot-copy-dba { display: block; }
  .foot-copy-main { margin-bottom: 4px; }
}

/* ============================================================================
   MOBILE · hide every inline Request Info CTA except the sticky bottom bar
   ============================================================================ */
@media (max-width: 700px) {
  html body .js-open-book,
  html body .topbar-actions .js-open-book,
  html body .topbar-actions button.js-open-book,
  html body .topbar-actions .btn.btn-sm.js-open-book,
  html body button.js-open-book,
  html body a.js-open-book {
    display: none !important;
  }
  /* Keep the sticky bottom bar's CTA visible — it lives inside .mobile-cta-bar */
  html body .mobile-cta-bar .js-open-book,
  html body .mobile-cta-bar .btn,
  html body .mobile-cta-bar button,
  html body .mobile-cta-bar a.js-open-book {
    display: inline-flex !important;
  }
  /* Lift accessibility widget above the sticky CTA bar so it stays clickable */
  html body .a11y-widget {
    bottom: calc(110px + env(safe-area-inset-bottom)) !important;
    right: 14px !important;
    z-index: 600 !important;
    pointer-events: auto !important;
  }
  html body .a11y-toggle {
    pointer-events: auto !important;
    width: 48px !important;
    height: 48px !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }
  /* Anchor panel above the toggle, constrained to viewport width */
  html body .a11y-panel {
    width: calc(100vw - 28px) !important;
    max-width: 320px !important;
    right: 0 !important;
    bottom: 60px !important;
  }
}

/* ============================================================================
   ARROW ICON · extend to .btn-primary (dark button) so guide CTAs get it too
   ============================================================================ */
html body .btn-primary:not(.no-arrow)::after {
  content: "\2192";
  display: inline-block;
  margin-left: 10px;
  font-weight: var(--fw-bold);
  transition: transform 200ms ease;
  flex-shrink: 0;
}
html body .btn-primary:not(.no-arrow):hover::after {
  transform: translateX(4px);
}

/* Mobile menu drawer · the standalone Book inspection CTA inside the drawer
   is redundant now that the sticky bottom bar handles booking. Hide it. */
.mobile-menu .mobile-menu-cta {
  display: none !important;
}

/* Mobile menu logo · stack wordmark + Inter italic byline like the topbar
   lockup so the drawer header reads with the same brand mark. */
.mobile-menu-logo .wordmark-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  line-height: 1;
}
.mobile-menu-logo .mm-byline {
  display: block;
  font-family: var(--ff-body), 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.01em;
  color: var(--blue-soft);
  text-transform: none;
  line-height: 1.2;
  white-space: nowrap;
  margin-top: 2px;
}

/* Unified placeholder size on mobile · every photo placeholder (homepage hero,
   subpage hero, about portrait) renders at the same 4:3 aspect ratio with
   matching padding and corner brackets so the layout reads as one consistent
   shot list rather than mismatched boxes. Generous top margin so the frame
   sits comfortably below the hero copy with proper breathing room. */
@media (max-width: 1180px) {
  html body .page-hero-photo {
    margin-top: var(--s-8) !important;
  }
  html body .page-hero-photo-frame,
  html body .hero .page-hero-photo-frame {
    aspect-ratio: 4 / 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: var(--s-5) !important;
    border-radius: var(--r-md) !important;
  }
  html body .page-hero-photo-img,
  html body .hero .page-hero-photo-img {

  }
}
@media (max-width: 700px) {
  html body .page-hero-photo {
    margin-top: 56px !important;
  }
}

/* NUCLEAR · suppress every form of topbar Book button on phones. Several
   earlier @media blocks set display: inline-flex !important on these
   selectors; this final block wins by being last + maximally specific. */
@media (max-width: 1180px) {
  html body .topbar .topbar-actions .js-open-book,
  html body .topbar .topbar-actions .btn,
  html body .topbar .topbar-actions .btn-primary,
  html body .topbar .topbar-actions .btn-sm,
  html body header .topbar-actions > .js-open-book,
  html body header .topbar-actions > .btn-primary {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }
}

/* Sticky bottom CTA button · match the in-content BOOK INSPECTION look. Big
   rounded button, generous padding, drop shadow, sits inside the bar with
   side breathing room so the corners read clearly on bone background. */
@media (max-width: 1180px) {
  html body .mobile-cta-bar {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--bg) !important;
    border-top: 1px solid var(--line) !important;
    box-shadow: 0 -8px 24px rgba(26,26,26,0.10) !important;
  }
  html body .mobile-cta-bar .btn,
  html body .mobile-cta-bar .js-open-book {
    width: 100% !important;
    min-height: 56px !important;
    padding: 16px 24px !important;
    font-family: var(--ff-display), 'Manrope', system-ui, sans-serif !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    border-radius: var(--r-md) !important;
    background: var(--cta) !important;
    color: var(--cta-ink) !important;
    border: 0 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  html body .mobile-cta-bar .btn:hover,
  html body .mobile-cta-bar .btn:active,
  html body .mobile-cta-bar .js-open-book:hover,
  html body .mobile-cta-bar .js-open-book:active {
    background: var(--cta-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12) !important;
  }
}

/* Mobile-only line breaks · hidden on desktop, force a break on phones.
   Used in the homepage hero so "Building Biology / for a home that /
   holds you up." renders as three balanced lines on mobile. */
.mobile-br { display: none; }
@media (max-width: 700px) {
  .mobile-br { display: inline; }
  /* The break itself takes effect because <br> creates a forced newline */
  br.mobile-br { display: block; }
}

/* ============================================================================
   SITEWIDE POLISH PASS · 2026-04-27
   Bells, whistles, animations, spacing rhythm, micro-interactions.
   Every rule respects prefers-reduced-motion via the media query at the end.
   ============================================================================ */

/* Smooth scroll for in-page anchor jumps */
html { scroll-behavior: smooth; }

/* Selection · brand-aware */
::selection { background: var(--blue-soft); color: var(--anchor); }

/* Photo placeholders · subtle ground-line pulse so they don't read as dead
   space. The corner brackets get a slow opacity breathe. */
@keyframes hhz-ph-pulse {
  0%, 100% { opacity: 0.32; }
  50%      { opacity: 0.55; }
}
.page-hero-photo-frame::before,
.page-hero-photo-frame::after {
  animation: hhz-ph-pulse 4.5s ease-in-out infinite;
}
.page-hero-photo-frame::after { animation-delay: 1.5s; }

/* Card hover lift · works on every card that uses the standard component.
   Already styled in places; this unifies the feel. */
.feature,
.path,
.eq-card,
.related-card,
.archive-card,
.article {
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
@media (hover: hover) {
  .feature:hover,
  .path:hover,
  .eq-card:hover,
  .related-card:hover,
  .archive-card:hover,
  .article:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(26,26,26,0.10);
  }
}

/* Button press feedback · tiny scale-down on active so taps feel responsive */
.btn:active,
button:not(.topbar-hamburger):active,
[role="button"]:active {
  transform: translateY(1px) scale(0.985);
}
html body .js-open-book:active,
html body .mobile-cta-bar .btn:active {
  transform: translateY(0) scale(0.98) !important;
}

/* Form fields · refined focus ring · soft orange glow + thicker border */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
textarea,
select,
.gfield input,
.gfield textarea,
.gfield select {
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus,
.gfield input:focus,
.gfield textarea:focus,
.gfield select:focus {
  outline: 0;
  border-color: var(--cta) !important;
  box-shadow: 0 0 0 3px rgba(246,108,7,0.18) !important;
}

/* Cert marquee · slightly slower, smoother loop · already fine but refined */
.cred-track { will-change: transform; }

/* Star ratings · gentle stagger on first paint */
@keyframes hhz-star-pop {
  0%   { opacity: 0; transform: scale(0.5) rotate(-8deg); }
  60%  { opacity: 1; transform: scale(1.18) rotate(0); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.hero-proof-item.is-active .hero-proof-stars > * {
  animation: hhz-star-pop 480ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.hero-proof-item.is-active .hero-proof-stars > *:nth-child(1) { animation-delay: 60ms; }
.hero-proof-item.is-active .hero-proof-stars > *:nth-child(2) { animation-delay: 140ms; }
.hero-proof-item.is-active .hero-proof-stars > *:nth-child(3) { animation-delay: 220ms; }
.hero-proof-item.is-active .hero-proof-stars > *:nth-child(4) { animation-delay: 300ms; }
.hero-proof-item.is-active .hero-proof-stars > *:nth-child(5) { animation-delay: 380ms; }

/* Footer links · sliding underline on hover */
footer a {
  position: relative;
  transition: color var(--t-fast) var(--ease);
}
footer a:not(.footer-book-btn)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width var(--t-fast) var(--ease);
}
@media (hover: hover) {
  footer a:not(.footer-book-btn):hover::after { width: 100%; }
}

/* Topbar nav links · same sliding underline */
.topbar-nav .menu > .menu-item > a:not(.btn) {
  position: relative;
}
.topbar-nav .menu > .menu-item > a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  background: var(--cta);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-fast) var(--ease);
}
@media (hover: hover) {
  .topbar-nav .menu > .menu-item > a:not(.btn):hover::after,
  .topbar-nav .menu > .menu-item > a.active::after {
    transform: scaleX(1);
  }
}

/* Hero kicker · subtle reveal from left on first paint */
@keyframes hhz-kicker-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.hero .hero-eye,
.page-hero-eye {
  animation: hhz-kicker-in 600ms cubic-bezier(0.2, 0.8, 0.2, 1) 100ms both;
}

/* Hero h1 · soft fade up on first paint */
@keyframes hhz-hero-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero h1,
.page-hero h1 {
  animation: hhz-hero-up 760ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms both;
}
.hero .hero-dek,
.page-hero .page-hero-dek {
  animation: hhz-hero-up 760ms cubic-bezier(0.2, 0.8, 0.2, 1) 320ms both;
}

/* Section h2 · soft fade up when revealed */
.section-row-head h2,
.section-head h2 {
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}

/* Horizontal scroller arrows · pulse the next-arrow on first viewport entry
   to hint at swipeability */
@keyframes hhz-arrow-hint {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50%      { transform: translateY(-50%) translateX(4px); }
}
.h-scroll-shell.is-scrollable.is-fresh .h-scroll-next {
  animation: hhz-arrow-hint 1.4s ease-in-out 2;
}

/* Photo placeholder caption · slow fade so it reads as a quiet annotation */
.page-hero-photo-label {
  animation: hhz-hero-up 800ms cubic-bezier(0.2, 0.8, 0.2, 1) 600ms both;
}

/* Section spacing rhythm · tighten on mobile, breathe more on desktop */
@media (min-width: 1100px) {
  section + section { margin-top: var(--s-2); }
  .section-row { margin-bottom: var(--s-12); }
}
@media (max-width: 700px) {
  section + section { margin-top: 0; }
  .section-row { margin-bottom: var(--s-9); }
}

/* Sticky CTA bar · soft slide-up on first appearance instead of just toggling */
@keyframes hhz-sticky-rise {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@media (max-width: 1180px) {
  html body .mobile-cta-bar {
    animation: hhz-sticky-rise 520ms cubic-bezier(0.2, 0.8, 0.2, 1) 250ms both !important;
  }
}

/* Mobile menu drawer items · stagger fade-in when drawer opens */
@keyframes hhz-mm-item-in {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}
.mobile-menu.is-open .mm-top > li,
.mobile-menu.is-open .mm-group {
  animation: hhz-mm-item-in 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.mobile-menu.is-open .mm-top > li:nth-child(1) { animation-delay: 100ms; }
.mobile-menu.is-open .mm-top > li:nth-child(2) { animation-delay: 160ms; }
.mobile-menu.is-open .mm-group:nth-of-type(1)  { animation-delay: 220ms; }
.mobile-menu.is-open .mm-top:nth-of-type(2) > li { animation-delay: 280ms; }
.mobile-menu.is-open .mm-group:nth-of-type(2)  { animation-delay: 340ms; }
.mobile-menu.is-open .mm-top:nth-of-type(3) > li { animation-delay: 400ms; }

/* FAQ accordion · soft chevron rotate */
.faq-icon {
  transition: transform var(--t-fast) var(--ease);
}
.faq-item[open] .faq-icon {
  transform: rotate(45deg);
}

/* Image placeholders · hover sheen removed.
   The previous rule painted a gradient onto ::after, which is the small
   bottom-right corner bracket (28×28 px). On hover that bracket would fill
   with a triangular gradient artifact instead of a sheen across the whole
   frame, so the effect is dropped. The L-bracket stays unchanged. */

/* SELECT2 DROPDOWN · brand-aware refinement
   The default highlight was solid orange — too aggressive against the bone
   panel. Refine to blue-soft hover, anchor text, refined search input,
   tight spacing, and rounded corners that match form fields. */
html body .select2-dropdown {
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  box-shadow: 0 12px 32px rgba(26,26,26,0.12) !important;
  background: var(--bg) !important;
  overflow: hidden !important;
  margin-top: 4px !important;
}
html body .select2-search--dropdown {
  padding: 10px 10px 6px !important;
  background: var(--bg) !important;
}
html body .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--line) !important;
  border-radius: var(--r-sm) !important;
  padding: 10px 12px !important;
  font-family: var(--ff-body) !important;
  font-size: 15px !important;
  color: var(--ink) !important;
  background: var(--bg) !important;
  outline: 0 !important;
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease) !important;
}
html body .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--cta) !important;
  box-shadow: 0 0 0 3px rgba(246,108,7,0.18) !important;
}
html body .select2-results__options {
  padding: 6px !important;
  max-height: 280px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior: contain !important;
}
html body .select2-dropdown {
  touch-action: pan-y !important;
  overscroll-behavior: contain !important;
}
/* Mobile dropdown scroll · the booking modal locks body scroll, so the
   dropdown's own scroll surface must accept touch and contain its own pan. */
@media (max-width: 768px) {
  html body .select2-results__options {
    max-height: 60vh !important;
  }
  html body .book-modal .select2-dropdown,
  html body .book-modal .select2-results,
  html body .book-modal .select2-results__options {
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }
}
html body .select2-results__option {
  padding: 11px 14px !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--ff-body) !important;
  font-size: 15px !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease) !important;
  margin: 1px 0 !important;
}
html body .select2-container--default .select2-results__option--highlighted[aria-selected],
html body .select2-container--default .select2-results__option--highlighted {
  background: var(--blue-soft) !important;
  color: var(--anchor) !important;
}
html body .select2-container--default .select2-results__option[aria-selected="true"] {
  background: rgba(61,90,128,0.06) !important;
  color: var(--blue) !important;
  font-weight: var(--fw-medium) !important;
}
html body .select2-container--default .select2-results__option[aria-disabled="true"] {
  color: var(--muted) !important;
  cursor: default !important;
}
/* Refined trigger pill — slightly taller, rounded to match other inputs */
html body .select2-container--default .select2-selection--single {
  height: 48px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  background: var(--bg) !important;
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease) !important;
}
html body .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 46px !important;
  padding-left: 14px !important;
  padding-right: 36px !important;
  color: var(--ink) !important;
  font-family: var(--ff-body) !important;
  font-size: 15px !important;
}
html body .select2-container--default.select2-container--focus .select2-selection--single,
html body .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--cta) !important;
  box-shadow: 0 0 0 3px rgba(246,108,7,0.18) !important;
  outline: 0 !important;
}
html body .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--anchor) transparent transparent transparent !important;
  border-width: 6px 5px 0 5px !important;
}
html body .select2-container--default.select2-container--open
  .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--anchor) transparent !important;
  border-width: 0 5px 6px 5px !important;
}
/* Native <select> trigger fallback (when select2 hasn't initialised yet) ·
   matches the same visual treatment so there's no flash-of-default-style. */
select.gfield_select,
.gfield select,
.book-modal select {
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  padding: 12px 40px 12px 14px !important;
  font-family: var(--ff-body) !important;
  font-size: 15px !important;
  color: var(--ink) !important;
  background: var(--bg) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%227%22%20viewBox%3D%220%200%2012%207%22%20fill%3D%22none%22%20stroke%3D%22%232C2A28%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M1%201l5%205%205-5%22%2F%3E%3C%2Fsvg%3E") no-repeat right 14px center !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* Sub-page hero CTAs hidden sitewide · the topbar Book button (desktop) and
   sticky bottom CTA bar (mobile) cover the booking action. The hero CTAs
   were overwhelming the page-hero, especially with two stacked buttons on
   mobile. Each subpage hero now ends with the headline + dek only. */
html body .page-hero-cta {
  display: none !important;
}

/* CURSOR HOVER STATES · sitewide audit
   Every interactive element shows the pointer cursor. Catches every place
   where the default arrow cursor was leaking through (cards, summaries,
   labels, FAB buttons, dropdown chevrons, etc). */
button:not(:disabled),
[role="button"]:not(:disabled),
a[href],
summary,
label[for],
select,
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.js-open-book,
.footer-book-btn,
.feature,
.path,
.eq-card,
.related-card,
.archive-card,
.article,
.faq-summary,
.faq-item summary,
.mm-group > summary,
.mobile-menu-close,
.mobile-menu-cta,
.topbar-hamburger,
.topbar-lockup,
.nav-trigger,
.h-scroll-btn,
.back-to-top,
.a11y-toggle,
.a11y-action,
.eq-modal-close,
.book-modal-close,
.modal-close,
[data-close],
.tab,
.tab-trigger,
.archive-filter,
.hero-proof-dot,
.hero-cta-secondary,
.cta-link,
.lk-link,
.cred-item,
input[type="checkbox"],
input[type="radio"],
.gfield input[type="submit"],
.gform_button {
  cursor: pointer;
}
button:disabled,
[role="button"]:disabled,
[aria-disabled="true"],
.btn[disabled] {
  cursor: not-allowed;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea {
  cursor: text;
}

/* Reduced motion respect · kill non-essential animations */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
}

/* Italic emphasis in section headlines drops to its own row on mobile so
   the blue italic phrase reads as a deliberate "kicker" line below the
   white statement, never sharing a row with it. Scoped to h2/h3 so hero
   h1s (which use explicit mobile-br tags) are unaffected. */
@media (max-width: 700px) {
  html body h2 > em,
  html body h3 > em,
  html body .section-row-head h2 em,
  html body .section-row-head h3 em,
  html body .section-head h2 em,
  html body section h2 em,
  html body main h2 em {
    display: block !important;
    margin-top: 4px !important;
    width: 100% !important;
  }
}

/* Topbar lockup · stack wordmark on row 1 + cursive "By Kit Brucker" on
   row 2. Stack must be a flex column with display:flex on the wrapper so
   the byline lands fully on its own row. The byline itself is small and
   elegant — Dancing Script is a readable cursive that reads well at 11–13px
   and falls back to system script fonts if it doesn't load. */
html body .topbar-lockup .topbar-wordmark-stack,
.topbar-wordmark-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  line-height: 1 !important;
  gap: 2px !important;
  flex: 0 1 auto !important;
}
html body .topbar-lockup .topbar-wordmark-stack > .topbar-wordmark {
  display: block !important;
  width: auto !important;
}
html body .topbar-lockup .topbar-byline,
.topbar-byline {
  display: block !important;
  font-family: var(--ff-body), 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-style: italic !important;
  letter-spacing: 0.01em !important;
  color: var(--blue) !important;
  text-transform: none !important;
  line-height: 1.2 !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  width: 100% !important;
}
@media (max-width: 1180px) {
  html body .topbar-byline { font-size: 15px !important; }
}
@media (max-width: 479px) {
  html body .topbar-byline { font-size: 13px !important; }
}
@media (max-width: 380px) {
  html body .topbar-byline { font-size: 12px !important; }
}

/* Bigger overall lockup · larger house icon and wordmark on desktop and
   mobile so the brand reads with more presence in the topbar. */
html body .topbar-lockup .mark { width: 84px !important; }
html body .topbar-wordmark {
  font-size: 22px !important;
  letter-spacing: 0.07em !important;
}

/* Topbar bottom border · was being clipped at the cream/dark hero seam.
   Pin a stronger, slightly darker hairline so the topbar reads as its own
   surface and the dark hero doesn't bleed up into it. */
html body .topbar {
  border-bottom: 1px solid var(--line-2, rgba(26,26,26,0.12)) !important;
  box-shadow: 0 1px 0 rgba(26,26,26,0.06) !important;
}

/* Topbar lockup must NOT clip · the previous overflow:hidden was cropping
   the bottom of the house icon. Give the topbar enough vertical padding to
   fit the new bigger icon + wordmark stack. Override every breakpoint. */
html body .topbar-lockup,
html body header .topbar .topbar-lockup {
  overflow: visible !important;
}
html body .topbar-lockup .mark,
html body .topbar-lockup .mark svg {
  overflow: visible !important;
}
html body .topbar-inner {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  align-items: center !important;
}
@media (max-width: 1180px) {
  html body .topbar-inner {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
}
@media (max-width: 430px) {
  html body .topbar-inner {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}
/* SVG inside the icon must show its full intrinsic height — no clipping
   from preserveAspectRatio or implicit overflow on the inline SVG element. */
html body .topbar-lockup .mark svg {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  overflow: visible !important;
}
@media (max-width: 1180px) {
  html body .topbar-lockup .mark { width: 92px !important; }
  html body .topbar-wordmark {
    font-size: 22px !important;
    letter-spacing: 0.06em !important;
  }
}
@media (max-width: 479px) {
  html body .topbar-lockup .mark { width: 80px !important; }
  html body .topbar-wordmark { font-size: 19px !important; }
}
@media (max-width: 380px) {
  html body .topbar-lockup .mark { width: 70px !important; }
  html body .topbar-wordmark { font-size: 17px !important; }
}

/* ============================================================================
   MODERN BOOK INSPECTION CTA · ONE SOURCE OF TRUTH
   Every Book CTA across the entire site shares the same DNA: pill shape,
   Manrope 800 display, layered shadow with inner highlight, hover lift.
   Only padding/font-size shift between contexts (topbar/in-content/sticky).

   Specificity boost: doubled .js-open-book.js-open-book overrides every
   prior contextual rule (.topbar-actions .js-open-book, .mobile-cta-bar .btn,
   etc.) so this is the canonical, authoritative treatment. NO old style
   leakage — this rule wins every cascade.
   ============================================================================ */
html body .js-open-book.js-open-book,
html body button.js-open-book,
html body a.js-open-book,
html body .footer-book-btn.footer-book-btn,
html body .mobile-cta-bar .btn,
html body .mobile-menu-cta.js-open-book {
  background: var(--cta) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 50%) !important;
  color: var(--cta-ink) !important;
  border: 0 !important;
  border-radius: var(--r-md) !important;
  padding: 16px 28px !important;
  min-height: 52px !important;
  font-family: var(--ff-display), 'Manrope', system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 1px 2px rgba(0,0,0,0.08) !important;
  transition: background 200ms cubic-bezier(.2,.8,.2,1),
              transform 200ms cubic-bezier(.2,.8,.2,1),
              box-shadow 200ms cubic-bezier(.2,.8,.2,1) !important;
}

html body .js-open-book.js-open-book:hover,
html body button.js-open-book:hover,
html body a.js-open-book:hover,
html body .footer-book-btn.footer-book-btn:hover,
html body .mobile-cta-bar .btn:hover,
html body .mobile-menu-cta.js-open-book:hover {
  background: var(--cta-hover) !important;
  color: var(--cta-ink) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 4px 10px rgba(0,0,0,0.12) !important;
}

html body .js-open-book.js-open-book:active,
html body button.js-open-book:active,
html body a.js-open-book:active,
html body .footer-book-btn.footer-book-btn:active,
html body .mobile-cta-bar .btn:active {
  transform: translateY(0) !important;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.18),
    0 1px 2px rgba(0,0,0,0.08) !important;
}

html body .js-open-book.js-open-book:focus-visible,
html body button.js-open-book:focus-visible,
html body a.js-open-book:focus-visible {
  outline: 2px solid var(--cta) !important;
  outline-offset: 3px !important;
}

/* SIZE CONTEXTS — same DNA, padding only differs.
   Every Book Inspection CTA across the site now reads at 16px, matching the
   reference treatment. Padding adjusts per context so the button frame fits
   its surroundings (compact in topbar/footer, full-width on the sticky bar). */
html body .topbar-actions .js-open-book.js-open-book,
html body .topbar-actions button.js-open-book {
  padding: 10px 18px !important;
  min-height: 40px !important;
  font-size: 16px !important;
  letter-spacing: 0.04em !important;
}
html body .mobile-cta-bar .btn,
html body .mobile-cta-bar .js-open-book.js-open-book {
  width: 100% !important;
  padding: 18px 28px !important;
  min-height: 56px !important;
  font-size: 16px !important;
}
html body .mobile-menu-cta.js-open-book {
  align-self: flex-start !important;
  padding: 14px 24px !important;
  min-height: 48px !important;
  font-size: 16px !important;
}
html body .foot-col .footer-book-btn.footer-book-btn {
  padding: 12px 22px !important;
  min-height: 42px !important;
  font-size: 16px !important;
}
/* Hero / consult-band / section CTAs (the standard in-content size) */
html body .hero .js-open-book.js-open-book,
html body .consult-actions .js-open-book.js-open-book,
html body .page-hero-cta .js-open-book.js-open-book,
html body section .js-open-book.js-open-book {
  padding: 18px 32px !important;
  min-height: 56px !important;
  font-size: 16px !important;
}
/* NUKE LEGACY · kill every older topbar/mobile rule that forces a smaller
   font on the Book Inspection CTAs. They live in older mobile @media blocks
   with !important and lower specificity but can win on equal selectors via
   source-order before the unified rules. Force 16px sitewide. */
html body .topbar-actions .js-open-book,
html body .topbar-actions button.js-open-book,
html body .topbar-actions .btn-primary,
html body .topbar-actions .btn.btn-sm,
html body .mobile-cta-bar .btn,
html body .mobile-cta-bar .js-open-book,
html body .mobile-menu-cta,
html body .footer-book-btn,
html body .foot-col .footer-book-btn {
  font-size: 16px !important;
}

/* In-content Book buttons hidden on mobile · the sticky bottom CTA bar
   handles booking, so duplicate buttons in the hero, body, and consult bands
   only add noise. Footer, modal submit, and the sticky bar stay visible. */
@media (max-width: 1180px) {
  html body main .js-open-book,
  html body .page-hero-cta .js-open-book,
  html body .consult-actions .js-open-book,
  html body .hero .js-open-book,
  html body section .js-open-book {
    display: none !important;
  }
  /* Restore the buttons that should stay visible · sticky bar, footer, modal */
  html body .mobile-cta-bar .js-open-book,
  html body footer .js-open-book,
  html body .foot-col .js-open-book,
  html body .footer-book-btn,
  html body .book-modal .js-open-book,
  html body .book-modal button[type="submit"],
  html body .book-modal .gform_button {
    display: inline-flex !important;
  }
}

/* Booking modal · lock horizontal movement on mobile. Card stays centered,
   no horizontal scroll inside the card, no swipe-to-dismiss drift, inputs
   never spill past the edge. Fixes the L/R drag noticed on phone. */
@media (max-width: 1180px) {
  html body .book-modal {
    overflow-x: hidden !important;
    overscroll-behavior-x: none !important;
    touch-action: pan-y !important;
  }
  html body .book-modal-card {
    max-width: calc(100vw - 24px) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: none !important;
    touch-action: pan-y !important;
    transform: none !important;
  }
  html body .book-modal-card * {
    max-width: 100% !important;
  }
  html body .book-modal input,
  html body .book-modal select,
  html body .book-modal textarea,
  html body .book-modal .ginput_container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}
/* Mobile only · stack half-width fields (Zip + Sqft) so they don't squeeze on small screens */
@media (max-width: 600px) {
  html body .book-modal .gfield--width-half {
    grid-column: 1 / -1 !important;
  }
}

/* ============================================================================
   LINK BEHAVIOR ON DARK SURFACES
   Inline body links inside dark anchor backgrounds (hero, case study, footer,
   sub-page hero) must stay readable on hover. The global a:hover rule swaps
   to var(--anchor) which is the dark background itself, so links disappear.
   Force a brighter blue on hover and guarantee the pointer cursor.
   ============================================================================ */
html body a { cursor: pointer; }
html body a:hover,
html body a:focus { cursor: pointer; }

/* Inline links inside dark surfaces — keep readable on hover, brighten on focus.
   Footer is excluded from the underline declaration here because it has its
   own sliding ::after underline animation; doubling the underline reads as
   double-line on resting state. */
html body .hero a:not(.btn):not(.topbar-lockup):not(.mobile-menu-cta),
html body .hero a:not(.btn):not(.topbar-lockup):not(.mobile-menu-cta):visited,
html body .case-frame a:not(.btn),
html body .case-frame a:not(.btn):visited,
html body .case a:not(.btn),
html body .case a:not(.btn):visited,
html body .page-hero a:not(.btn):not(.btn-primary):not(.btn-secondary),
html body .page-hero a:not(.btn):not(.btn-primary):not(.btn-secondary):visited,
html body .callout a:not(.btn),
html body .callout a:not(.btn):visited,
html body .consult-band a:not(.btn),
html body .consult-band a:not(.btn):visited,
html body .four-way a:not(.btn),
html body .four-way a:not(.btn):visited {
  color: var(--bg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(245,241,232,0.45);
  transition: color .18s ease, text-decoration-color .18s ease;
  cursor: pointer;
}

/* Footer links · color only, NO native text-decoration — sliding ::after is
   the only underline mechanism on footer. */
html body footer a:not(.btn),
html body footer a:not(.btn):visited {
  color: var(--bg);
  text-decoration: none !important;
  cursor: pointer;
  transition: color .18s ease;
}

html body .hero a:not(.btn):not(.topbar-lockup):not(.mobile-menu-cta):hover,
html body .hero a:not(.btn):not(.topbar-lockup):not(.mobile-menu-cta):focus,
html body .case-frame a:not(.btn):hover,
html body .case-frame a:not(.btn):focus,
html body .case a:not(.btn):hover,
html body .case a:not(.btn):focus,
html body footer a:not(.btn):hover,
html body footer a:not(.btn):focus,
html body .page-hero a:not(.btn):not(.btn-primary):not(.btn-secondary):hover,
html body .page-hero a:not(.btn):not(.btn-primary):not(.btn-secondary):focus,
html body .callout a:not(.btn):hover,
html body .callout a:not(.btn):focus,
html body .consult-band a:not(.btn):hover,
html body .consult-band a:not(.btn):focus,
html body .four-way a:not(.btn):hover,
html body .four-way a:not(.btn):focus {
  color: var(--cta) !important;
  text-decoration-color: var(--cta);
  cursor: pointer;
}

/* ============================================================================
   SWIPER · brand-tuned styling for the carousels
   The .feature-grid / .equipment-grid / .related-grid markup is wrapped in
   .hhz-swiper.swiper at runtime by page.js. The grid itself becomes the
   .swiper-wrapper, each child becomes a .swiper-slide. CSS below resets the
   horizontal-scroller styles when these classes appear together so Swiper
   can take over the layout.
   ============================================================================ */
html body .hhz-swiper.swiper {
  position: relative;
  width: 100%;
  /* top padding gives lifted hover cards (translateY(-2px)/-3px) breathing
     room so they don't clip against the overflow:hidden boundary */
  padding: 14px 0 var(--s-7);
  margin: calc(var(--s-8) - 14px) 0 var(--s-8);
  overflow: hidden;
}

/* When the grid is wrapped by Swiper, drop the legacy h-scroller styles */
html body .feature-grid.swiper-wrapper,
html body .equipment-grid.swiper-wrapper,
html body .related-grid.swiper-wrapper,
html body .resources-grid.swiper-wrapper,
html body .why-grid.swiper-wrapper {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 0 !important;          /* Swiper handles spacing via spaceBetween */
  grid-template-columns: none !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  scroll-snap-type: none !important;
  scroll-padding: 0 !important;
  -webkit-overflow-scrolling: auto !important;
  scrollbar-width: none;
  scroll-behavior: auto !important;
}
html body .feature-grid.swiper-wrapper::-webkit-scrollbar,
html body .equipment-grid.swiper-wrapper::-webkit-scrollbar,
html body .related-grid.swiper-wrapper::-webkit-scrollbar,
html body .resources-grid.swiper-wrapper::-webkit-scrollbar,
html body .why-grid.swiper-wrapper::-webkit-scrollbar { display: none; }

/* Why-tile fixed slide width when swiperized */
html body .why-grid.swiper-wrapper .why-tile.swiper-slide {
  flex: 0 0 280px !important;
  width: 280px !important;
  min-width: 280px;
  height: auto;
}
@media (max-width: 700px) {
  html body .why-grid.swiper-wrapper .why-tile.swiper-slide {
    flex: 0 0 260px !important;
    width: 260px !important;
    min-width: 260px;
  }
}

/* Slides keep their intrinsic card width — Swiper uses width: auto when
   slidesPerView is 'auto'. Reset any flex shorthand that the grid set. */
html body .hhz-swiper .swiper-slide {
  flex-shrink: 0 !important;
  height: auto;
  scroll-snap-align: none !important;
}

/* Navigation buttons · brand-styled circular buttons matching the prior
   custom h-scroll arrows. Override Swiper's default chevron pseudo. */
html body .hhz-swiper .swiper-button-prev,
html body .hhz-swiper .swiper-button-next {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  background: var(--bg);
  color: var(--anchor);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  z-index: 10;
}
html body .hhz-swiper .swiper-button-prev { left: 8px; }
html body .hhz-swiper .swiper-button-next { right: 8px; }
html body .hhz-swiper .swiper-button-prev:hover,
html body .hhz-swiper .swiper-button-next:hover {
  background: var(--anchor);
  color: var(--bg);
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0,0,0,0.14);
}
html body .hhz-swiper .swiper-button-prev::after,
html body .hhz-swiper .swiper-button-next::after {
  font-size: 16px;
  font-weight: 800;
  font-family: 'swiper-icons', system-ui, sans-serif;
}
html body .hhz-swiper .swiper-button-prev.swiper-button-disabled,
html body .hhz-swiper .swiper-button-next.swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
}

/* Mobile nav · keep arrows visible but smaller and pulled in tighter */
@media (max-width: 700px) {
  html body .hhz-swiper .swiper-button-prev,
  html body .hhz-swiper .swiper-button-next {
    width: 36px;
    height: 36px;
    margin-top: -18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  }
  html body .hhz-swiper .swiper-button-prev { left: 4px; }
  html body .hhz-swiper .swiper-button-next { right: 4px; }
  html body .hhz-swiper .swiper-button-prev::after,
  html body .hhz-swiper .swiper-button-next::after {
    font-size: 13px;
  }
}

/* Pagination dots · simple uniform circles, brand colors.
   Swiper's bundle CSS controls bullet size via custom properties; override
   them at the wrapper so size is fixed regardless of bundle version. */
html body .hhz-swiper {
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-inactive-color: var(--ink-2);
  --swiper-pagination-bullet-inactive-opacity: 0.3;
  --swiper-pagination-color: var(--cta);
  --swiper-pagination-bullet-horizontal-gap: 5px;
}
html body .hhz-swiper .swiper-pagination {
  bottom: 0 !important;
  text-align: center;
  line-height: 0;
  font-size: 0;
}
html body .hhz-swiper .swiper-pagination-bullets-dynamic {
  display: none !important;
}
html body .hhz-swiper .swiper-pagination-bullet,
html body .hhz-swiper .swiper-pagination-bullet-active,
html body .hhz-swiper .swiper-pagination-bullet-active-main,
html body .hhz-swiper .swiper-pagination-bullet-active-prev,
html body .hhz-swiper .swiper-pagination-bullet-active-next,
html body .hhz-swiper .swiper-pagination-bullet-active-prev-prev,
html body .hhz-swiper .swiper-pagination-bullet-active-next-next {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  min-height: 8px !important;
  max-width: 8px !important;
  max-height: 8px !important;
  background: var(--ink-2) !important;
  opacity: 0.3 !important;
  margin: 0 5px !important;
  border-radius: 50% !important;
  border: 0 !important;
  padding: 0 !important;
  transform: none !important;
  transform-origin: center !important;
  display: inline-block !important;
  vertical-align: middle !important;
  transition: opacity 200ms ease, background 200ms ease !important;
}
html body .hhz-swiper .swiper-pagination-bullet-active {
  background: var(--cta) !important;
  opacity: 1 !important;
}

/* When Swiper detects content fits without overflow it adds .swiper-watch-overflow.
   Hide the nav + pagination in that case so they don't show as dead UI. */
html body .hhz-swiper.swiper-watch-overflow .swiper-button-prev,
html body .hhz-swiper.swiper-watch-overflow .swiper-button-next,
html body .hhz-swiper.swiper-watch-overflow .swiper-pagination {
  display: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html body .hhz-swiper .swiper-wrapper {
    transition-duration: 0ms !important;
  }
}