/* ==========================================================================
   MHC bundle — elevated
   GENERATED FILE — DO NOT EDIT BY HAND.

   Source:    mhc-wiki/brand/design-tokens.json  v1.0.0 (2026-09-04)
   Generator: mhc-templates/tokens/build-tokens.mjs
   Regenerate: node tokens/build-tokens.mjs

   Single-request bundle for the ELEVATED treatment:
     tokens/elevated.css + tokens/base.css + tokens/components.css + motion/reveal.css
   in that order, which is the only order they are valid in.

   Link THIS on a production page:
     <link rel="stylesheet" href="/tokens/elevated.bundle.css">

   The four separate files remain for development. Do not link both.

   Every literal colour and font value in the pack lives in the :root block
   below and nowhere else. A hex or font-family literal outside :root is a
   design-review FAIL, not a style preference.
   ========================================================================== */

/* ==========================================================================
   MHC tokens — elevated treatment
   GENERATED FILE — DO NOT EDIT BY HAND.

   Source:    mhc-wiki/brand/design-tokens.json  v1.0.0 (2026-09-04)
   Generator: mhc-templates/tokens/build-tokens.mjs
   Regenerate: node tokens/build-tokens.mjs

   Treatment: ELEVATED — Selling, luxury, and personal-authority surfaces — restrained, editorial
   Gold permitted: yes, Accent only: rules, ticks, badges, eyebrows, numerals, status tags. Never floods, never backgrounds, never body text. #D4A843 is never text on light surfaces. Gold text/eyebrows only on navy_deep/dark fields; on light surfaces gold is decorative (rules, ticks, badges) and eyebrows are navy.
   Surfaces locked to this treatment:
     · perfecthomesellingprocess.com
     · mhcshowcase.com
     · jerodlee.com
     · perfectrealestateconnection.com (documented exception — not precedent)
     · perfectrealestatebusiness.com + /insights/
     · Luxury Listing YouTube channel + thumbnails
     · TVHS + PREB podcast thumbnails and episode art
     · ILHM / luxury content

   A surface not on that list is classified at its audit by the boundary
   principle, never assumed. If the site you are building is not listed,
   stop and ask — do not pick the treatment that "looks nicer".

   Every literal colour and font value in the pack lives in the :root block
   below and nowhere else. A hex or font-family literal outside :root is a
   design-review FAIL, not a style preference.
   ========================================================================== */

:root {
  /* Core palette */
  --color-red: #C1212B;
  --color-navy: #27387C;
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-paper: #FFFFFF;
  --color-ink: #16181F;
  --color-navy-deep: #1D2A5E;
  --color-navy-tint: #E9ECF5;
  --color-red-tint: #F9E9EA;

  /* Semantic roles */
  --text-primary: #16181F;
  --text-inverse: #FFFFFF;
  --color-heading: #27387C;
  --color-link: #27387C;
  --color-link-hover: #C1212B;
  --cta-bg: #C1212B;
  --cta-text: #FFFFFF;
  --cta-secondary-border: #27387C;
  --section-alt-bg: #E9ECF5;
  --footer-bg: #1D2A5E;
  --quick-answer-bg: #E9ECF5;
  --quick-answer-rule: #C1212B;
  --pull-quote-rule: #C1212B;
  --focus-ring: #27387C;
  --color-gold: #D4A843;
  --eyebrow-color: var(--color-gold);
  --eyebrow-on-light: var(--color-navy);
  --accent-text-color: var(--color-navy);
  --accent-rule-color: var(--color-gold);
  --rule-accent: 1px solid #D4A843;

  /* Type families */
  --font-heading: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, serif;
  --font-body: 'Montserrat', 'Montserrat Fallback', 'Jost', Arial, sans-serif;

  /* Type scale */
  --size-display: clamp(2.5rem, 5vw, 3.75rem);
  --line-display: 1.05;
  --weight-display: 500;
  --ls-display: -0.01em;
  --size-h1: clamp(2rem, 4vw, 3rem);
  --line-h1: 1.1;
  --weight-h1: 500;
  --size-h2: clamp(1.5rem, 3vw, 2.25rem);
  --line-h2: 1.15;
  --weight-h2: 500;
  --size-h3: 1.5rem;
  --line-h3: 1.2;
  --weight-h3: 600;
  --size-h4: 1.25rem;
  --line-h4: 1.3;
  --weight-h4: 600;
  --size-lead: 1.25rem;
  --line-lead: 1.5;
  --weight-lead: 400;
  --size-body: 1.0625rem;
  --line-body: 1.65;
  --weight-body: 400;
  --size-small: 0.9375rem;
  --line-small: 1.5;
  --weight-small: 400;
  --size-eyebrow: 0.8125rem;
  --line-eyebrow: 1.2;
  --weight-eyebrow: 600;
  --ls-eyebrow: 0.12em;
  --size-legal: 0.8125rem;
  --line-legal: 1.5;
  --weight-legal: 400;
  --base-font-size: 16px;
  --measure: 68ch;

  /* Spacing */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 2.5rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-10: 5rem;
  --space-12: 6rem;
  --space-16: 8rem;
  --section-pad-mobile: 4rem;
  --section-pad-desktop: 6rem;
  --container-max: 1200px;
  --content-max: 72ch;
  --gutter-mobile: 1.5rem;
  --gutter-desktop: 2rem;

  /* Radii */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --radius-card: var(--radius-md);
  --radius-button: var(--radius-none);
  --radius-input: var(--radius-sm);
  --radius-badge: var(--radius-pill);

  /* Depth */
  --shadow-sm: 0 1px 2px rgba(22,24,31,0.06);
  --shadow-md: 0 4px 12px rgba(22,24,31,0.08);
  --shadow-lg: 0 12px 32px rgba(22,24,31,0.12);
  --hero-overlay: linear-gradient(180deg, rgba(29,42,94,0.55) 0%, rgba(29,42,94,0.85) 100%);
  --rule-thin: 1px solid rgba(22,24,31,0.12);
  --rule-brand: 3px solid #C1212B;

  /* Motion */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-reveal: 600ms;
  --dur-count: 1200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-rise: 16px;
  --stagger-step: 80ms;
}

/* Elevated: the eyebrow, ticks, badges, numerals and status tags may carry
   gold. Floods, backgrounds and body text may not — treatments.elevated.gold_rule.

   CONTRAST BOUND (color.contrast_minimums, ui_components 3:1): gold #D4A843
   measures 2.21:1 on white and 6.14:1 on navy_deep. So gold TEXT is scoped to
   dark fields, where it clears the minimum, and resolves to ink on light ones.
   The accent role is unchanged — the rules, ticks and numerals still read as
   gold everywhere the surface can carry them. This is the tokens file
   constraining itself: contrast_minimums is a token too, and it outranks a
   colour preference. Flagged to Jerod for ratification, or for a darker gold
   variant intended for light surfaces. */
/* Gold TEXT roles default to navy: a light surface is the common case and
   #D4A843 does not clear 3:1 on it. */
.eyebrow,
.numeral,
.status-tag { color: var(--accent-text-color); }

/* Inside a dark field, the same roles take gold — 6.14:1 on navy_deep. Adding
   a dark scope here is how a new dark section opts in; nothing opts in by
   sitting on a light background and hoping. */
.section--dark,
.hero--master,
.hero--elevated,
.cta-band--dark,
.site-footer { --accent-text-color: var(--color-gold); }

/* Decorative gold — rules, ticks, badges — is permitted on any surface,
   because a border or a mark is not text and is not held to the text
   contrast minimum. */
.rule-accent { border: 0; border-top: var(--rule-accent); }
.tick { color: var(--color-gold); }
.badge { border: 1px solid var(--color-gold); color: var(--accent-text-color); }

/* Elevated headings sit lighter and larger; the high-contrast serif carries
   the weight, so the type does not need to. */
h1, h2, .h-display { letter-spacing: -0.005em; }


/* ==========================================================================
   MHC base — reset, type scale, spacing, containers
   GENERATED FILE — DO NOT EDIT BY HAND.

   Source:    mhc-wiki/brand/design-tokens.json  v1.0.0 (2026-09-04)
   Generator: mhc-templates/tokens/build-tokens.mjs
   Regenerate: node tokens/build-tokens.mjs

   Treatment-agnostic layer. Load AFTER a treatment file:

     <link rel="stylesheet" href="/tokens/elevated.css">
     <link rel="stylesheet" href="/tokens/base.css">

   Breakpoints (CSS custom properties cannot be used in media queries,
   so these are compiled in): sm 480px · md 768px · lg 1024px · xl 1280px.
   Mobile-first.

   Every literal colour and font value in the pack lives in the :root block
   below and nowhere else. A hex or font-family literal outside :root is a
   design-review FAIL, not a style preference.
   ========================================================================== */

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

html {
  font-size: var(--base-font-size);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--line-body);
  font-weight: var(--weight-body);
  color: var(--text-primary);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }

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

input, button, textarea, select { font: inherit; color: inherit; }

/* ── Self-hosted faces ────────────────────────────────────────────────────
   Fonts are served from this origin, not fonts.gstatic.com. The Google Fonts
   request was the largest render-blocking cost on the pilots — ~838 ms under
   simulated mobile throttling, on pages whose LCP element is text — and a
   third-party round trip cannot be preloaded away, because the connection, the
   CSS and then the font binaries are three sequential hops on a host we do not
   control.

   Two of these files are VARIABLE fonts, verified with fontTools rather than
   assumed: Cormorant Garamond normal (wght 300-700) and Montserrat (wght
   100-900). A variable file declared under a single font-weight renders every
   weight at the file's default instance, which is a silent bug that looks like
   "the bold just isn't very bold". They are declared with weight RANGES.

   OFL 1.1, all three families. tokens/fonts/OFL.txt and LICENSES.md ship with
   the files — the licence has to travel with them.                          */

@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/zilla-slab-normal-500.woff2") format("woff2");
}
@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./fonts/zilla-slab-normal-600.woff2") format("woff2");
}
@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/zilla-slab-normal-700.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500 600;              /* variable, wght 300-700 */
  font-display: swap;
  src: url("./fonts/cormorant-garamond-normal-500-600.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/cormorant-garamond-italic-500.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;              /* variable, wght 100-900 */
  font-display: swap;
  src: url("./fonts/montserrat-normal-400-500-600-700.woff2") format("woff2");
}

/* ── Metric-matched fallbacks ─────────────────────────────────────────────
   The web fonts arrive after first paint (font-display: swap, which is right —
   invisible text is worse than swapped text). The swap only costs layout
   stability if the fallback occupies a different amount of space, so these
   overrides bring the fallback's metrics close to the real face. Text is
   readable immediately AND the line count does not change when the real font
   lands.

   Values are the standard published fallback metrics for these pairings. If a
   headline looks noticeably wrong in the ~200ms before the webfont loads,
   adjust size-adjust here — never by hard-coding a size on a heading. */

@font-face {
  font-family: "Montserrat Fallback";
  src: local("Arial");
  size-adjust: 112.16%;
  ascent-override: 92.72%;
  descent-override: 24.05%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Cormorant Fallback";
  src: local("Georgia");
  size-adjust: 92%;
  ascent-override: 96%;
  descent-override: 28%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Zilla Fallback";
  src: local("Georgia");
  size-adjust: 104%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* ── Type scale ──────────────────────────────────────────────────────── */

h1, h2, h3, h4, .h-display {
  font-family: var(--font-heading);
  color: var(--color-heading);
  text-wrap: balance;
}

.h-display {
  font-size: var(--size-display);
  line-height: var(--line-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--ls-display);
}
h1 { font-size: var(--size-h1); line-height: var(--line-h1); font-weight: var(--weight-h1); }
h2 { font-size: var(--size-h2); line-height: var(--line-h2); font-weight: var(--weight-h2); }
h3 { font-size: var(--size-h3); line-height: var(--line-h3); font-weight: var(--weight-h3); }
h4 { font-size: var(--size-h4); line-height: var(--line-h4); font-weight: var(--weight-h4); }

.lead    { font-size: var(--size-lead);  line-height: var(--line-lead);  font-weight: var(--weight-lead); }
.small   { font-size: var(--size-small); line-height: var(--line-small); }
.legal   { font-size: var(--size-legal); line-height: var(--line-legal); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--size-eyebrow);
  line-height: var(--line-eyebrow);
  font-weight: var(--weight-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}

p { max-width: var(--measure); }
p + p { margin-top: var(--space-2); }

a { color: var(--color-link); text-underline-offset: 0.2em; }
a:hover { color: var(--color-link-hover); }

/* Focus is visible, always. A focus ring removed is an accessibility FAIL. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ── Layout ──────────────────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
}

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

.section {
  padding-block: var(--section-pad-mobile);
}
.section--alt { background: var(--section-alt-bg); }
.section--dark { background: var(--footer-bg); color: var(--text-inverse); }
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--text-inverse); }

.stack > * + * { margin-top: var(--space-3); }
.grid { display: grid; gap: var(--space-3); }

/* ── Buttons ─────────────────────────────────────────────────────────── */

.cta-primary {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  background: var(--cta-bg);
  color: var(--cta-text);
  border: 1px solid var(--cta-bg);
  border-radius: var(--radius-button);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--size-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  min-height: 44px;
  transition: filter var(--dur-fast) var(--ease-standard);
}
.cta-primary:hover { filter: brightness(0.92); color: var(--cta-text); }

/* One ask per screen: the secondary action is a text link, never a second
   button (design-build-guide 4.7). */
.cta-secondary {
  display: inline-block;
  min-height: 44px;
  padding-block: var(--space-2);
  color: var(--color-link);
  font-weight: 600;
  text-decoration: underline;
}

/* ── Cards ───────────────────────────────────────────────────────────── */

.card {
  background: var(--color-paper);
  border: var(--rule-thin);
  border-radius: var(--radius-card);
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
}

/* ── Utility ─────────────────────────────────────────────────────────── */

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

@media (min-width: 768px) {
  .container { padding-inline: var(--gutter-desktop); }
  .section { padding-block: var(--section-pad-desktop); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--split { grid-template-columns: 1.1fr 1fr; gap: var(--space-8); }
}


/* ==========================================================================
   MHC components — scoped component styles
   GENERATED FILE — DO NOT EDIT BY HAND.

   Source:    mhc-wiki/brand/design-tokens.json  v1.0.0 (2026-09-04)
   Generator: mhc-templates/tokens/build-tokens.mjs
   Regenerate: node tokens/build-tokens.mjs

   Concatenation of components/<name>/<name>.css, in that order. Edit a
   component's own stylesheet and re-run the generator — never this file.

   Load order on a page:
     1. tokens/master.css  OR  tokens/elevated.css   (one, never both)
     2. tokens/base.css
     3. tokens/components.css
     4. motion/reveal.css   (only if the page carries a signature move)

   Every literal colour and font value in the pack lives in the :root block
   below and nowhere else. A hex or font-family literal outside :root is a
   design-review FAIL, not a style preference.
   ========================================================================== */

/* ─── blog-post ─── components/blog-post/blog-post.css */
/* blog-post — Quick Answer first, then body. No scroll-narrative here (R5):
   on a post it costs dwell time rather than earning it. */
.post { padding-block: var(--section-pad-mobile); }
.post__header { max-width: var(--content-max); margin-bottom: var(--space-4); }
.post__meta { font-size: var(--size-small); color: var(--text-primary); opacity: 0.75; margin-top: var(--space-2); }
.post__byline a { font-weight: 600; }
.post__body { max-width: var(--content-max); }
.post__body h2 { margin-top: var(--space-6); margin-bottom: var(--space-2); }
.post__body h3 { margin-top: var(--space-4); margin-bottom: var(--space-1); }
.post__body ul, .post__body ol { max-width: var(--content-max); padding-left: var(--space-3); margin-block: var(--space-2); }
.post__body li + li { margin-top: var(--space-1); }
.post__body blockquote { border-left: 3px solid var(--pull-quote-rule); padding-left: var(--space-2); margin-block: var(--space-3); font-style: italic; }
.post__body table { width: 100%; border-collapse: collapse; margin-block: var(--space-3); font-size: var(--size-small); }
.post__body th, .post__body td { border: var(--rule-thin); padding: var(--space-1); text-align: left; }
.post__body th { background: var(--section-alt-bg); }
.post__table-scroll { overflow-x: auto; }
@media (min-width: 768px) { .post { padding-block: var(--section-pad-desktop); } }

/* ─── cta-band ─── components/cta-band/cta-band.css */
/* cta-band — one ask. Followed immediately by what-happens-next. */
.cta-band { background: var(--section-alt-bg); }
.cta-band--dark { background: var(--footer-bg); color: var(--text-inverse); }
.cta-band--dark h2 { color: var(--text-inverse); }
.cta-band--dark .cta-band__dek { color: var(--text-inverse); opacity: 0.9; }
.cta-band__inner { text-align: center; }
.cta-band__dek { margin: 0 auto var(--space-3); }
.cta-band .eyebrow { color: var(--eyebrow-color); }
.cta-band--dark .eyebrow { color: var(--eyebrow-color); }

/* ─── faq-at-cta ─── components/faq-at-cta/faq-at-cta.css */
/* faq-at-cta — the 3-5 hesitation questions sit AT the ask, not on a far page.
   The accordion is presentational only: answers stay in the DOM at all times,
   so FAQPage schema and crawlers see the same text a reader does. */
.faq-at-cta { margin-block: var(--space-4); }
.faq-at-cta__list { display: grid; gap: var(--space-1); }
.faq-item { border: var(--rule-thin); border-radius: var(--radius-card); background: var(--color-paper); }
.faq-item > summary {
  padding: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--size-h4);
  line-height: var(--line-h4);
  font-weight: var(--weight-h4);
  color: var(--color-heading);
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.faq-item > summary::after { content: "+"; color: var(--accent-text-color); font-family: var(--font-body); }
.faq-item[open] > summary::after { content: "\2013"; }
.faq-item__answer { padding: 0 var(--space-2) var(--space-2); }
.faq-item__answer p { max-width: var(--content-max); }

/* ─── footer ─── components/footer/footer.css */
/* footer — the locked legal block and the network-identity line.
   No motion selector may target the footer (motion.prohibited).
   Legal type never goes below type_scale.legal. */
.site-footer { background: var(--footer-bg); color: var(--text-inverse); }
.site-footer a { color: var(--text-inverse); }
.site-footer a:hover { color: var(--text-inverse); text-decoration: underline; }
.site-footer__inner { padding-block: var(--space-6); display: grid; gap: var(--space-4); }
.site-footer__cols { display: grid; gap: var(--space-4); }
.site-footer__col-title { font-family: var(--font-heading); font-size: var(--size-h4); margin-bottom: var(--space-1); color: var(--text-inverse); }
.site-footer__links { display: grid; gap: var(--space-1); }
.site-footer__network { font-size: var(--size-small); line-height: var(--line-small); opacity: 0.92; }
.site-footer__legal {
  font-size: var(--size-legal);
  line-height: var(--line-legal);
  opacity: 0.85;
  border-top: var(--rule-thin);
  padding-top: var(--space-3);
  max-width: none;
}
@media (min-width: 768px) { .site-footer__cols { grid-template-columns: 1.4fr 1fr 1fr; } }

/* ─── form ─── components/form/form.css */
/* form — Netlify form -> outgoing webhook -> GHL (R10). Labels are visible
   text, never placeholders: a placeholder disappears the moment someone types,
   which is exactly when they need to know what the field was.
   No motion selector may target a form (motion.prohibited). */
.mhc-form { display: grid; gap: var(--space-2); max-width: 560px; }
.mhc-form__group { display: grid; gap: var(--space-1); }
.mhc-form label { font-weight: 600; font-size: var(--size-small); color: var(--text-primary); }
.mhc-form input[type="text"],
.mhc-form input[type="email"],
.mhc-form input[type="tel"],
.mhc-form select,
.mhc-form textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--space-1);
  border: 1px solid var(--cta-secondary-border);
  border-radius: var(--radius-input);
  background: var(--color-paper);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--size-body);
}
.mhc-form textarea { min-height: 120px; resize: vertical; }
.mhc-form__consent { display: flex; gap: var(--space-1); align-items: flex-start; }
.mhc-form__consent input[type="checkbox"] { width: 20px; height: 20px; margin-top: 3px; flex: 0 0 auto; accent-color: var(--cta-bg); }
.mhc-form__consent label { font-weight: 400; font-size: var(--size-small); line-height: var(--line-small); }
.mhc-form__help { font-size: var(--size-small); color: var(--text-primary); opacity: 0.75; }
.mhc-form__hp { position: absolute; left: -9999px; }
.mhc-form .cta-primary { width: 100%; text-align: center; border: 0; }

/* ─── funnel-landing ─── components/funnel-landing/funnel-landing.css */
/* funnel-landing — value exchange only. Guide/kit for an email address.
   No promotion language of any kind (gates.md). */
.funnel__inside { display: grid; gap: var(--space-2); }
.funnel__item { border-top: var(--rule-accent); padding-top: var(--space-2); }
.funnel__item h3 { font-size: var(--size-h4); line-height: var(--line-h4); margin-bottom: var(--space-1); }
.funnel__form-wrap { background: var(--section-alt-bg); }
.funnel__card { background: var(--color-paper); border: var(--rule-thin); border-radius: var(--radius-card); padding: var(--space-4); max-width: 620px; margin-inline: auto; box-shadow: var(--shadow-sm); }
@media (min-width: 768px) { .funnel__inside { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } }

/* ─── guide-chapter ─── components/guide-chapter/guide-chapter.css */
/* guide-chapter — the scrollcraft pattern: one idea per screen, reveal on
   entry, chapter nav. Permitted on guide chapters and funnel landings ONLY
   (R5); on a blog post or FAQ page it costs dwell time rather than earning it.
   The chapter content is crawlable HTML. The PDF is the gated package, never
   the content itself. */
.chapter-nav { position: sticky; top: 0; z-index: 40; background: var(--color-paper); border-bottom: var(--rule-thin); }
.chapter-nav ol { display: flex; gap: var(--space-3); overflow-x: auto; padding: var(--space-1) 0; margin: 0; list-style: none; }
.chapter-nav a { font-size: var(--size-small); white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
.chapter-nav a[aria-current="true"] { color: var(--color-link-hover); font-weight: 600; }
.chapter { border-top: var(--rule-thin); }
.chapter__idea { max-width: var(--content-max); }
.chapter__number { font-family: var(--font-heading); color: var(--accent-text-color); font-size: var(--size-h3); }

/* ─── hero ─── components/hero/hero.css */
/* hero — one value-prop headline, one primary CTA above the fold.
   Tokens only. Overlay from depth.hero_overlay; field colour navy_deep. */
/* Scoped to the pack's own modifiers, never to a bare `.hero`.
   `hero` is the most-reused class name on the network: every site already has
   one, most of them on a LIGHT field. A component stylesheet that claims the
   bare class turns those headlines white on white the moment the pack is
   linked. The modifier is the contract — `.hero--master` / `.hero--elevated`
   opt a section into these rules; a site's own `.hero` is left alone. */
.hero--master, .hero--elevated { position: relative; overflow: hidden; background: var(--footer-bg); color: var(--text-inverse); }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__overlay { position: absolute; inset: 0; background: var(--hero-overlay); }
.hero__inner { position: relative; z-index: 1; padding-block: var(--section-pad-mobile); }
.hero--master h1, .hero--master .h-display,
.hero--elevated h1, .hero--elevated .h-display { color: var(--text-inverse); margin-bottom: var(--space-2); }
.hero--master .eyebrow, .hero--elevated .eyebrow { color: var(--eyebrow-color); }
.hero__dek { color: var(--text-inverse); opacity: 0.92; margin-bottom: var(--space-3); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.hero__actions .cta-secondary { color: var(--text-inverse); }
.hero__credential { display: inline-flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-3); }
.hero--field { background: var(--footer-bg); }
@media (min-width: 768px) { .hero__inner { padding-block: var(--section-pad-desktop); } }

/* ─── proof-beside-claim ─── components/proof-beside-claim/proof-beside-claim.css */
/* proof-beside-claim — the receipt sits next to the sentence it supports,
   never at page bottom. Figures carry their source and as-of date on-surface. */
.proof { display: flex; gap: var(--space-2); align-items: flex-start; margin-block: var(--space-3); }
.proof__figure {
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-size: var(--size-h2);
  line-height: 1;
  color: var(--accent-text-color);
  font-variant-numeric: tabular-nums;
}
.proof__body { border-left: var(--rule-thin); padding-left: var(--space-2); }
.proof__claim { margin-bottom: var(--space-1); }
.proof__source { font-size: var(--size-small); color: var(--text-primary); opacity: 0.72; }
.proof--inline { display: block; }
.proof--inline .proof__source { display: block; margin-top: var(--space-1); }

/* ─── quick-answer ─── components/quick-answer/quick-answer.css */
/* quick-answer — RESTYLE ONLY. The markup this styles is emitted by
   mhc-quick-answer-inserter and is part of the answer layer: semantics,
   element order, and text are never edited by a styling pass. This file
   changes how it looks and nothing else.
   No motion selector may ever target .quick-answer (motion.prohibited). */
.quick-answer {
  background: var(--quick-answer-bg);
  border-left: 4px solid var(--quick-answer-rule);
  padding: var(--space-3);
  border-radius: var(--radius-card);
  margin-block: var(--space-4);
}
.quick-answer p,
.quick-answer .qa-text {
  font-size: var(--size-lead);
  line-height: var(--line-lead);
  color: var(--text-primary);
  max-width: var(--content-max);
}
.quick-answer strong { font-weight: 600; }

/* ─── specialist-intro ─── components/specialist-intro/specialist-intro.css */
/* specialist-intro — agent face + situation-first story. */
.specialist { display: grid; gap: var(--space-4); align-items: start; }
.specialist__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; border-radius: var(--radius-card); }
.specialist__name { font-family: var(--font-heading); font-size: var(--size-h2); line-height: var(--line-h2); color: var(--color-heading); }
.specialist__role { font-size: var(--size-small); color: var(--text-primary); opacity: 0.75; margin-bottom: var(--space-2); }
.specialist__license { font-size: var(--size-small); border-left: var(--rule-accent); padding-left: var(--space-2); margin-bottom: var(--space-3); }
.specialist__quote {
  border-left: 3px solid var(--pull-quote-rule);
  padding-left: var(--space-2);
  font-style: italic;
  font-size: var(--size-lead);
  line-height: var(--line-lead);
  margin-block: var(--space-3);
}
@media (min-width: 1024px) { .specialist { grid-template-columns: 1fr 1.6fr; gap: var(--space-8); } }

/* ─── sticky-mobile-cta ─── components/sticky-mobile-cta/sticky-mobile-cta.css */
/* sticky-mobile-cta — positioning and reveal live in motion/reveal.css.
   This file styles only the contents of the bar. */
[data-sticky-cta] .cta-primary { flex: 1 1 auto; text-align: center; }
[data-sticky-cta] .sticky-cta__text {
  flex: 1 1 auto;
  text-align: center;
  min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-inverse);
  border: 1px solid var(--text-inverse);
  border-radius: var(--radius-button);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--size-small);
}

/* ─── what-happens-next ─── components/what-happens-next/what-happens-next.css */
/* what-happens-next — three plain steps after every form and every CTA.
   Carries the two-hour response SLA in the locked wording. */
.whn { margin-top: var(--space-4); }
.whn__steps { display: grid; gap: var(--space-3); counter-reset: whn; }
.whn__step { counter-increment: whn; padding-left: var(--space-4); position: relative; }
.whn__step::before {
  content: counter(whn);
  position: absolute; left: 0; top: 0;
  font-family: var(--font-heading);
  font-size: var(--size-h3);
  line-height: 1;
  color: var(--accent-text-color);
  font-variant-numeric: tabular-nums;
}
.whn__step h3 { font-size: var(--size-h4); line-height: var(--line-h4); margin-bottom: var(--space-1); }
.whn__sla { margin-top: var(--space-3); font-weight: 600; }
/* auto-fit, not repeat(3): this block sits inside a narrow form card as often
   as it sits across a full-width section, and three fixed columns inside a
   620px card wrap every heading into a stack of one-word lines. */
@media (min-width: 768px) {
  .whn__steps { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}


/* MHC motion — the CSS half of the signature-move layer.
   Load after tokens/base.css. Pairs with motion/reveal.js.

   Every transition here is driven by a token custom property. Nothing in
   this file starts moving on its own: the JS adds .is-visible, the CSS
   transitions to it. That ordering is what keeps the reduced-motion branch
   honest — with motion reduced, .is-visible is applied immediately and the
   transition is suppressed, so the page renders its final state at once. */

[data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-rise));
  transition:
    opacity var(--dur-reveal) var(--ease-reveal) var(--reveal-delay, 0ms),
    transform var(--dur-reveal) var(--ease-reveal) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Parallax travel is applied inline by the JS; this only prepares the layer. */
[data-parallax] { will-change: transform; }

/* Sticky mobile CTA — call/text on the Lofty line only. Hidden above md and
   until 25% scroll; stands down when the footer enters view so it can never
   cover the legal block. */
[data-sticky-cta] {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1) var(--gutter-mobile);
  padding-bottom: calc(var(--space-1) + env(safe-area-inset-bottom, 0px));
  background: var(--footer-bg);
  box-shadow: var(--shadow-lg);
  transform: translateY(110%);
  transition: transform var(--dur-base) var(--ease-standard);
}
[data-sticky-cta].is-visible { transform: none; }

@media (min-width: 768px) {
  [data-sticky-cta] { display: none; }
}

/* Card hover: 2px lift + shadow_md. Pointer devices only — a "hover" state
   that fires on tap is a mobile bug, not a flourish. */
@media (hover: hover) {
  .card--lift { transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); }
  .card--lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
}

/* FAQ accordion is presentational only — the answer text stays in the DOM
   at all times so the FAQPage schema and the crawler both still see it. */
.faq-item > summary { cursor: pointer; list-style: none; }
.faq-item > summary::-webkit-details-marker { display: none; }

/* ── The single branch that governs all of it ───────────────────────────
   Reveals render final immediately, count-ups show their final number
   (the JS never starts), parallax is never bound, the sticky bar appears
   without sliding. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  [data-parallax] { transform: none !important; }
  [data-sticky-cta] { transition: none; }
  .card--lift { transition: none; }
  .card--lift:hover { transform: none; }
}