/* ============================================================
   hm-modern.css
   Good Vibes Hypnosis Training  |  hypnomark.com
   Light design system for the training side of the site:
   home page, training landing pages, and all 113 city pages.

   Architecture mirrors plr-modern.css (custom properties,
   hm- prefixed classes, section / inner / label / title /
   divider structure) so both sites stay consistent to work on.

   PALETTE: "Open Sky" (final direction)
   Built around the daylight sky hero photograph. Deep navy ink
   kin to the PLR site so both sites read as one family, a
   confident mid blue as the single actionable accent, pure
   white body with pale sky alternating sections, and the PLR
   gold carried over for exactly one warm moment: the divider
   thread beneath each headline.
   Directions A, B, and C are retired and removed.
   Fonts stay as established: Fraunces (display) + Public Sans.
   ============================================================ */

:root {
    --hm-bg:            #ffffff;
    --hm-bg-alt:        #eaf3fb;
    --hm-surface:       #ffffff;
    --hm-ink:           #14273e;
    --hm-ink-soft:      #46586e;
    --hm-accent:        #1e5fa8;
    --hm-accent-deep:   #164a85;
    --hm-accent-soft:   #dcebf9;
    --hm-gold:          #c9a84c;
    --hm-line:          #cfdfee;
    --hm-font-display:  'Fraunces', Georgia, serif;
    --hm-font-body:     'Public Sans', Verdana, Arial, sans-serif;
    --hm-radius:        12px;
    --hm-radius-sm:     8px;
    --hm-shadow:        0 2px 16px rgba(20, 39, 62, 0.10);
    --hm-shadow-lift:   0 8px 30px rgba(20, 39, 62, 0.14);
    --hm-max:           1100px;
    --hm-max-text:      760px;
}


/* ══ BASE ══════════════════════════════════════════════════ */
.hm-page {
    margin: 0;
    padding: 0;
    background: var(--hm-bg);
    color: var(--hm-ink);
    font-family: var(--hm-font-body);
    font-size: 17px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
.hm-page * { box-sizing: border-box; }
.hm-page img { max-width: 100%; height: auto; }

.hm-page a { color: var(--hm-accent-deep); }
.hm-page a:hover { color: var(--hm-ink); }

.hm-page :focus-visible {
    outline: 3px solid var(--hm-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .hm-page *, .hm-page *::before, .hm-page *::after {
        animation-duration: 0.001s !important;
        transition-duration: 0.001s !important;
    }
    /* The sky stays in place; only its motion stops */
    .hm-hero-sky-img { animation: none !important; transform: none !important; }
}


/* ══ HEADER (sticky, shrinks on scroll) ════════════════════ */
.hm-header {
    position: sticky;
    top: 0;
    z-index: 500;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--hm-line);
    backdrop-filter: blur(6px);
    transition: box-shadow 0.25s ease;
}
.hm-header.hm-scrolled { box-shadow: var(--hm-shadow); }

.hm-header-inner {
    max-width: var(--hm-max);
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    transition: padding 0.25s ease;
}
.hm-header.hm-scrolled .hm-header-inner { padding-top: 8px; padding-bottom: 8px; }

.hm-logo { text-decoration: none; display: flex; flex-direction: column; line-height: 1.25; }
.hm-logo-name {
    font-family: var(--hm-font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--hm-ink);
}
.hm-logo-title {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hm-ink-soft);
}

.hm-nav {
    display: flex;
    align-items: center;
    gap: 26px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.hm-nav a {
    text-decoration: none;
    color: var(--hm-ink);
    font-size: 0.93rem;
    font-weight: 500;
    padding: 6px 2px;
    border-bottom: 2px solid transparent;
}
.hm-nav a:hover { border-bottom-color: var(--hm-accent); color: var(--hm-ink); }

.hm-nav-cta a {
    background: var(--hm-accent);
    color: #fff !important;
    font-weight: 700;
    padding: 11px 22px;
    border-radius: 32px;
    border-bottom: none;
}
.hm-nav-cta a:hover { background: var(--hm-ink); color: #fff !important; border-bottom: none; }

/* Hamburger, mobile only */
.hm-hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}
.hm-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--hm-ink);
    margin: 5px 0;
    border-radius: 2px;
}

.hm-mobile-menu {
    position: fixed;
    inset: 0;
    background: var(--hm-bg);
    z-index: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
}
.hm-mobile-menu.hm-open { opacity: 1; visibility: visible; }
.hm-mobile-menu a {
    font-family: var(--hm-font-display);
    font-size: 1.4rem;
    color: var(--hm-ink);
    text-decoration: none;
    padding: 10px 20px;
}
.hm-mobile-menu a.hm-mobile-cta {
    background: var(--hm-accent);
    color: #fff;
    font-family: var(--hm-font-body);
    font-size: 1rem;
    font-weight: 700;
    border-radius: 32px;
    margin-top: 18px;
    padding: 14px 32px;
}
.hm-mobile-close {
    position: absolute;
    top: 20px;
    right: 24px;
    background: none;
    border: none;
    font-size: 1.6rem;
    color: var(--hm-ink);
    cursor: pointer;
}

@media (max-width: 860px) {
    .hm-nav { display: none; }
    .hm-hamburger { display: block; }
}


/* ══ HERO: the sky photograph with the slow pan ══════════
   The image never changes; the motion is pure CSS. The <img>
   is oversized (185% wide, 112% tall) so the cloud formation
   visibly travels most of the hero width, passing fully
   behind the centered text and continuing on before the pan
   reverses. Easing and alternate direction are unchanged, so
   there is never a jump at the turnaround. The bottom and far
   right of the photo, where the small artifact sits, stay
   cropped out of view at every point in the pan: the vertical
   crop anchored at 35% keeps the cloud band centered while
   cutting the bottom edge, and the pan stops just short of
   the right edge. The photo's own top to bottom fade is
   continued into the white page below by the ::after
   gradient, so the hero and the body feel continuous rather
   than stacked.

   Text legibility comes from a fixed backdrop panel on
   .hm-hero-inner (see below), not from a directional scrim.
   The old left anchored scrim was built for the left aligned
   layout and is removed. */

.hm-hero-sky {
    position: relative;
    overflow: hidden;
    min-height: clamp(520px, 72vh, 720px);
    display: flex;
    align-items: center;
    background: #7db8e8; /* fallback while the photo loads */
}

.hm-hero-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hm-page .hm-hero-sky-img,
.hm-hero-sky-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 185% !important;
    height: 112% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: left 35%;
    animation: hmSkyPan 120s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes hmSkyPan {
    from { transform: translateX(0); }
    to   { transform: translateX(-45%); }
}

/* Continue the photo's fade into the white page below */
.hm-hero-sky::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(255,255,255,0) 58%,
        rgba(255,255,255,0.55) 82%,
        rgba(255,255,255,0.92) 95%,
        #ffffff 100%);
    pointer-events: none;
}

/* Text stays fixed on top; the clouds drift behind it */
.hm-hero-content {
    position: relative;
    z-index: 2;
    max-width: var(--hm-max);
    width: 100%;
    margin: 0 auto;
    padding: 96px 24px 120px;
    text-align: center;
}

/* The fixed backdrop panel. One contained group holding the
   eyebrow, headline, divider, subtitle, and button. Semi
   transparent navy, dark enough that the white text stays
   clearly legible whether open sky or a bright cloud is
   passing behind it, while the sky still reads through
   faintly. The blur softens whatever drifts past. The panel
   never moves with the pan. */
.hm-hero-inner {
    max-width: 680px;
    margin: 0 auto;
    padding: 48px 44px 44px;
    background: rgba(13, 39, 70, 0.44);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px;
    box-shadow: 0 10px 40px rgba(13, 39, 70, 0.22);
}

.hm-hero-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 1px 8px rgba(13, 39, 70, 0.45);
    margin: 0 0 18px;
}

.hm-hero-title {
    font-family: var(--hm-font-display);
    font-size: clamp(2.1rem, 4.6vw, 3.2rem);
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 18px;
    color: #ffffff;
    text-shadow: 0 2px 14px rgba(13, 39, 70, 0.45);
}

.hm-hero-content .hm-thread { margin: 0 auto 24px; }

.hm-hero-subtitle {
    font-size: clamp(1.02rem, 1.8vw, 1.18rem);
    color: #f2f7fc;
    text-shadow: 0 1px 10px rgba(13, 39, 70, 0.5);
    max-width: 540px;
    margin: 0 auto 32px;
    line-height: 1.65;
}

.hm-hero-note {
    font-size: 0.9rem;
    color: #eef4fa;
    text-shadow: 0 1px 8px rgba(13, 39, 70, 0.55);
    max-width: 480px;
    margin: 16px auto 0;
}

@media (max-width: 760px) {
    .hm-hero-content { padding: 72px 20px 96px; }
    .hm-hero-inner { max-width: 100%; padding: 36px 24px 32px; }
}


/* ══ BUTTONS ═══════════════════════════════════════════════ */
.hm-btn-primary,
.hm-btn-primary:link,
.hm-btn-primary:visited {
    display: inline-block;
    background: var(--hm-accent);
    color: #fff;
    font-family: var(--hm-font-body);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 16px 40px;
    border-radius: 40px;
    border: none;
    text-decoration: none;
    box-shadow: var(--hm-shadow);
    transition: background 0.2s ease, transform 0.15s ease;
    cursor: pointer;
}
.hm-page .hm-btn-primary:hover,
.hm-btn-primary:hover {
    background: var(--hm-ink) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

.hm-btn-secondary,
.hm-btn-secondary:link,
.hm-btn-secondary:visited {
    display: inline-block;
    background: transparent;
    color: var(--hm-ink);
    font-size: 0.92rem;
    font-weight: 600;
    padding: 12px 26px;
    border: 1.5px solid var(--hm-line);
    border-radius: 40px;
    text-decoration: none;
}
.hm-page .hm-btn-secondary:hover,
.hm-btn-secondary:hover { border-color: var(--hm-accent); color: var(--hm-ink) !important; }

/* Tertiary: quiet inline text link for anything that must not
   compete with the discovery call */
.hm-link-quiet,
.hm-link-quiet:link,
.hm-link-quiet:visited {
    color: var(--hm-ink-soft);
    font-size: 0.9rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.hm-link-quiet:hover { color: var(--hm-ink); }


/* ══ THE THREAD ════════════════════════════════════════════
   The short divider beneath each headline. This is the one
   warm gold moment on the page, carried over from the PLR
   site. Nothing else on the training pages uses gold. */
.hm-thread {
    display: block;
    width: 56px;
    height: 3px;
    background: var(--hm-gold);
    border: none;
    border-radius: 2px;
    margin: 0 auto 28px;
}


/* ══ SECTIONS ══════════════════════════════════════════════ */
.hm-main { display: block; }

.hm-section { padding: 72px 24px; }
.hm-section-alt { background: var(--hm-bg-alt); }
.hm-section-surface { background: var(--hm-surface); border-top: 1px solid var(--hm-line); border-bottom: 1px solid var(--hm-line); }

.hm-section-inner { max-width: var(--hm-max-text); margin: 0 auto; }
.hm-section-inner-wide { max-width: var(--hm-max); margin: 0 auto; }

.hm-section-label {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--hm-accent-deep);
    margin: 0 0 10px;
    text-align: center;
}
.hm-section-title {
    font-family: var(--hm-font-display);
    font-size: clamp(1.6rem, 3.4vw, 2.2rem);
    font-weight: 600;
    line-height: 1.25;
    color: var(--hm-ink);
    margin: 0 0 16px;
    text-align: center;
}
.hm-body-text {
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--hm-ink);
    margin: 0 0 20px;
}
.hm-body-soft { color: var(--hm-ink-soft); }

.hm-text-left .hm-section-label,
.hm-text-left .hm-section-title { text-align: left; }
.hm-text-left .hm-thread { margin-left: 0; }


/* ══ LOCAL NARRATIVE ANCHOR ════════════════════════════════
   The per city paragraph near the headline, rendered by
   LocalAnchor.ascx only when the city has an entry in
   LocalContentData.xml. */
.hm-local-anchor {
    padding: 44px 24px 0;
}
.hm-local-anchor p {
    max-width: var(--hm-max-text);
    margin: 0 auto;
    text-align: center;
    font-size: 1.06rem;
    line-height: 1.75;
    color: var(--hm-ink);
}
/* The closing variant bridges the self qualifier into the final
   invitation, so it carries a touch more vertical breathing room */
.hm-local-closing { padding: 56px 24px 8px; }


/* ══ FORMAT CALLOUT BANNER ═════════════════════════════════
   The explicit note near the top of every city page that
   reframes the live online format as the offering, feeding
   both the visitor and AI search a clear, confident answer. */
.hm-callout {
    background: var(--hm-accent-soft);
    border: 1px solid var(--hm-accent);
    border-top: 4px solid var(--hm-accent);
    border-radius: var(--hm-radius);
    box-shadow: var(--hm-shadow);
    padding: 22px 28px;
    max-width: var(--hm-max-text);
    margin: 0 auto;
}
.hm-callout-title {
    font-weight: 700;
    font-size: 0.95rem;
    margin: 0 0 6px;
    color: var(--hm-ink);
}
.hm-callout p { margin: 0; font-size: 0.95rem; line-height: 1.65; color: var(--hm-ink); }


/* ══ BEFORE / AFTER CONTRAST PANEL ═════════════════════════ */
.hm-contrast {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--hm-surface);
    border: 1px solid var(--hm-line);
    border-top: 4px solid var(--hm-accent);
    border-radius: var(--hm-radius);
    overflow: hidden;
    box-shadow: var(--hm-shadow);
    max-width: 920px;
    margin: 40px auto 0;
    position: relative;
}
/* the thread runs vertically between the two states */
.hm-contrast::before {
    content: '';
    position: absolute;
    top: 10%;
    bottom: 10%;
    left: 50%;
    width: 3px;
    transform: translateX(-50%);
    background: var(--hm-accent);
    border-radius: 2px;
}
.hm-contrast-col { padding: 36px 34px; }
.hm-contrast-col.hm-before { background: var(--hm-bg-alt); }
.hm-contrast-heading {
    font-family: var(--hm-font-display);
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 14px;
    color: var(--hm-ink);
}
.hm-contrast-col ul { margin: 0; padding: 0 0 0 18px; }
.hm-contrast-col li { margin: 0 0 12px; font-size: 0.97rem; line-height: 1.6; color: var(--hm-ink-soft); }
.hm-contrast-col.hm-after li { color: var(--hm-ink); }

@media (max-width: 700px) {
    .hm-contrast { grid-template-columns: 1fr; }
    .hm-contrast::before {
        top: 50%; bottom: auto; left: 10%; right: 10%;
        width: auto; height: 3px; transform: translateY(-50%);
    }
}


/* ══ VALUE STACK + PRICE ═══════════════════════════════════ */
.hm-stack {
    background: var(--hm-surface);
    border: 1px solid var(--hm-line);
    border-top: 4px solid var(--hm-accent);
    border-radius: var(--hm-radius);
    box-shadow: var(--hm-shadow);
    padding: 40px 44px;
    max-width: 720px;
    margin: 36px auto 0;
}
.hm-stack ul { margin: 0 0 26px; padding: 0; list-style: none; }
.hm-stack li {
    padding: 12px 0 12px 34px;
    border-bottom: 1px solid var(--hm-line);
    position: relative;
    font-size: 1rem;
    line-height: 1.55;
}
.hm-stack li:last-child { border-bottom: none; }
.hm-stack li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 20px;
    width: 14px;
    height: 3px;
    background: var(--hm-accent);
    border-radius: 2px;
}
.hm-price-row {
    text-align: center;
    padding-top: 10px;
    border-top: 2px solid var(--hm-accent);
}

/* The three figures always travel together: full tuition, early
   bird, and deposit. Never show one number in isolation. */
.hm-price-grid {
    display: flex;
    justify-content: center;
    gap: 36px;
    flex-wrap: wrap;
    margin: 18px 0 0;
}
.hm-price-item { text-align: center; }
.hm-price-item-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hm-ink-soft);
    margin-bottom: 4px;
}
.hm-price {
    font-family: var(--hm-font-display);
    font-size: 2rem;
    font-weight: 600;
    color: var(--hm-ink);
    margin: 0;
    line-height: 1.2;
}
.hm-price-item-featured .hm-price { color: var(--hm-accent-deep); }
.hm-price-item-featured .hm-price-item-label { color: var(--hm-accent-deep); }
/* The flash special: boxed so a genuinely rare offer reads as one */
.hm-price-item-flash {
    background: var(--hm-accent-soft);
    border: 1px solid var(--hm-accent);
    border-radius: var(--hm-radius-sm);
    padding: 8px 18px;
}
.hm-price-item-flash .hm-price { color: var(--hm-accent-deep); }
.hm-price-item-flash .hm-price-item-label { color: var(--hm-accent-deep); }

/* Footnotes sit clear of the figures above them */
.hm-price-detail {
    font-size: 0.92rem;
    color: var(--hm-ink-soft);
    margin: 28px 0 10px;
}
.hm-price-roi {
    font-size: 0.98rem;
    color: var(--hm-ink);
    font-style: italic;
    margin: 0;
}


/* ══ SELF QUALIFIER ════════════════════════════════════════ */
.hm-qualifier {
    max-width: var(--hm-max-text);
    margin: 0 auto;
}
.hm-qualifier ul { margin: 24px 0 0; padding: 0; list-style: none; }
.hm-qualifier li {
    background: var(--hm-surface);
    border: 1px solid var(--hm-line);
    border-top: 3px solid var(--hm-accent);
    border-radius: var(--hm-radius-sm);
    box-shadow: var(--hm-shadow);
    padding: 16px 22px;
    margin-bottom: 12px;
    font-size: 1rem;
    line-height: 1.6;
}


/* ══ DISCOVERY CALL INVITATION BLOCK ═══════════════════════
   The one dominant CTA, repeated top, middle, and bottom.
   Always paired with the warm explainer paragraph. */
.hm-invite {
    text-align: center;
    max-width: 620px;
    margin: 0 auto;
}
.hm-invite-explainer {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--hm-ink-soft);
    margin: 18px auto 0;
    max-width: 520px;
}

.hm-invite-card {
    background: var(--hm-surface);
    border: 1px solid var(--hm-line);
    border-top: 4px solid var(--hm-accent);
    border-radius: var(--hm-radius);
    box-shadow: var(--hm-shadow-lift);
    padding: 48px 40px;
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
}
.hm-invite-card .hm-section-title { margin-bottom: 12px; }


/* ══ STORY / CREDENTIALS ═══════════════════════════════════ */
.hm-story { max-width: var(--hm-max-text); margin: 0 auto; }
.hm-credentials {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 28px;
    padding: 0;
    list-style: none;
}
.hm-credentials li {
    background: var(--hm-surface);
    border: 1px solid var(--hm-line);
    border-radius: 30px;
    padding: 8px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--hm-ink-soft);
}


/* ══ SECONDARY OPT-IN (free recording, quiet) ══════════════ */
.hm-optin-quiet {
    text-align: center;
    padding: 34px 24px;
    border-top: 1px solid var(--hm-line);
    background: var(--hm-bg);
}
.hm-optin-quiet p { margin: 0 0 6px; font-size: 0.92rem; color: var(--hm-ink-soft); }


/* ══ ONTRAPORT FORM OVERRIDES (light theme) ════════════════ */
.hm-page .moonray-form input[type="text"],
.hm-page .moonray-form input[type="email"],
.hm-page .moonray-form-input {
    background: var(--hm-surface) !important;
    border: 1px solid var(--hm-line) !important;
    border-radius: var(--hm-radius-sm) !important;
    padding: 12px 14px !important;
    font-family: var(--hm-font-body) !important;
    font-size: 0.95rem !important;
    color: var(--hm-ink) !important;
    width: 100% !important;
}

/* ── Modal form layout ──────────────────────────────────────
   Scoped to the modal's form target only. Ontraport's own
   stylesheet (written into the page with the form) floats its
   field wrappers and gives them fixed widths, which is why the
   form rendered narrow and left justified. These neutralize
   that inside the modal: every wrapper and field runs the full
   width of the modal, fields keep a comfortable height, the
   form block is centered, and the submit stays on one line. */
.hm-op-modal-form-wrap {
    text-align: center !important;
    margin-top: 6px !important;
}
.hm-op-modal-form-wrap .moonray-form,
.hm-op-modal-form-wrap [class*="moonray-form-p"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    float: none !important;
    background: transparent !important;
    text-align: left !important;
}
.hm-op-modal-form-wrap form {
    width: 100% !important;
    margin: 0 !important;
}
.hm-op-modal-form-wrap .moonray-form-element-wrapper,
.hm-op-modal-form-wrap .moonray-form-element-wrapper-input,
.hm-op-modal-form-wrap .moonray-form-element-wrapper-select {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    text-align: left !important;
}
.hm-op-modal-form-wrap label {
    display: block !important;
    margin: 0 0 6px !important;
    font-weight: 600 !important;
}
.hm-op-modal-form-wrap input[type="text"],
.hm-op-modal-form-wrap input[type="email"],
.hm-op-modal-form-wrap select {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 46px !important;
    padding: 12px 14px !important;
    background: var(--hm-surface) !important;
    border: 1px solid var(--hm-line) !important;
    border-radius: var(--hm-radius-sm) !important;
    font-family: var(--hm-font-body) !important;
    font-size: 0.95rem !important;
    color: var(--hm-ink) !important;
}
.hm-op-modal-form-wrap select {
    cursor: pointer !important;
}
.hm-op-modal-form-wrap input:focus,
.hm-op-modal-form-wrap select:focus {
    outline: none !important;
    border-color: var(--hm-accent) !important;
    box-shadow: 0 0 0 3px var(--hm-accent-soft) !important;
}
/* Ontraport's small helper captions under fields */
.hm-op-modal-form-wrap .moonray-form-element-caption,
.hm-op-modal-form-wrap small {
    display: block !important;
    text-align: left !important;
    font-size: 0.78rem !important;
    color: var(--hm-ink-soft) !important;
    margin-top: 4px !important;
}
/* The submit: centered, one line, never wrapping */
.hm-op-modal-form-wrap .hm-form-submit-btn {
    display: block !important;
    width: auto !important;
    margin: 18px auto 0 !important;
    white-space: nowrap !important;
    padding: 13px 36px !important;
}
.hm-page .moonray-form label {
    color: var(--hm-ink) !important;
    font-family: var(--hm-font-body) !important;
    font-size: 0.9rem !important;
}
.hm-form-submit-btn {
    display: inline-block;
    background: var(--hm-accent);
    color: #fff;
    font-family: var(--hm-font-body);
    font-size: 0.95rem;
    font-weight: 700;
    padding: 13px 34px;
    border: none;
    border-radius: 32px;
    cursor: pointer;
    margin-top: 8px;
}
.hm-form-submit-btn:hover { background: var(--hm-ink); }
/* Hide Ontraport's default image submit once ours is injected */
.hm-page .moonray-form input[type="image"][data-replaced="1"] { display: none !important; }


/* ══ MODAL (shared by the opt-in popup) ════════════════════ */
.hm-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(34, 64, 60, 0.45);
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
}
.hm-modal-backdrop.hm-modal-open { opacity: 1; visibility: visible; }
.hm-modal-container {
    background: var(--hm-surface);
    border-radius: var(--hm-radius);
    box-shadow: var(--hm-shadow-lift);
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 40px 36px 30px;
    position: relative;
}
.hm-modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.6rem;
    color: var(--hm-ink-soft);
    cursor: pointer;
}
.hm-op-modal-title {
    font-family: var(--hm-font-display);
    font-size: 1.4rem;
    font-weight: 600;
    margin: 6px 0 10px;
    color: var(--hm-ink);
    text-align: center;
}
.hm-op-modal-desc { font-size: 0.92rem; color: var(--hm-ink-soft); text-align: center; margin: 0 0 18px; }
.hm-op-modal-privacy { font-size: 0.78rem; color: var(--hm-ink-soft); text-align: center; margin: 16px 0 0; }
.hm-op-modal-header .hm-section-label { text-align: center; }

/* Opt-in teaser (quiet by design; must never outshine the CTA) */
.hm-op-teaser { max-width: 520px; margin: 0 auto; text-align: center; }
.hm-op-teaser-headline { font-weight: 700; font-size: 0.95rem; margin: 0 0 10px; color: var(--hm-ink); }
.hm-op-teaser-list { list-style: none; margin: 0 0 14px; padding: 0; }
.hm-op-teaser-list li { font-size: 0.9rem; color: var(--hm-ink-soft); margin-bottom: 4px; }
.hm-op-popup-trigger,
.hm-op-popup-trigger:link,
.hm-op-popup-trigger:visited {
    color: var(--hm-accent-deep);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.hm-op-popup-trigger:hover { color: var(--hm-ink); }


/* ══ DISCOVERY CALL SCHEDULER MODAL ════════════════════════
   Opened by any discovery call button sitewide via
   DiscoveryModal.ascx. Larger than the opt-in modal because it
   hosts the Acuity scheduler in an iframe. */
.hm-schedule-modal-container {
    background: var(--hm-surface);
    border-radius: var(--hm-radius);
    box-shadow: var(--hm-shadow-lift);
    width: 100%;
    max-width: 920px;
    height: 86vh;
    max-height: 860px;
    padding: 48px 10px 10px;
    position: relative;
    display: flex;
    flex-direction: column;
}
.hm-schedule-modal-container iframe {
    flex: 1;
    width: 100%;
    border: none;
    border-radius: var(--hm-radius-sm);
    background: #fff;
}
.hm-schedule-modal-title {
    position: absolute;
    top: 14px;
    left: 24px;
    font-family: var(--hm-font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--hm-ink);
    margin: 0;
}
@media (max-width: 700px) {
    .hm-schedule-modal-container { height: 92vh; padding-top: 44px; }
}


/* ══ FOOTER ════════════════════════════════════════════════ */
.hm-footer {
    background: var(--hm-ink);
    color: #e9efe9;
    padding: 56px 24px 28px;
}
.hm-footer a { color: #e9efe9; text-decoration: none; }
.hm-footer a:hover { color: #8fc1ef; }

.hm-footer-inner { max-width: var(--hm-max); margin: 0 auto; }
.hm-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 36px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}
.hm-footer-brand .hm-logo-name { color: #fff; }
.hm-footer-brand .hm-logo-title { color: rgba(255,255,255,0.7); }
.hm-footer-brand p { font-size: 0.9rem; line-height: 1.65; color: rgba(255,255,255,0.8); margin: 12px 0; }
.hm-footer-phone { font-weight: 600; font-size: 0.95rem; }

.hm-footer-col-title {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8fc1ef;
    margin-bottom: 14px;
}
.hm-footer-links { list-style: none; margin: 0; padding: 0; }
.hm-footer-links li { margin-bottom: 10px; font-size: 0.92rem; }

.hm-footer-disclaimer {
    font-size: 0.8rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.65);
    max-width: 760px;
    margin: 24px auto 0;
    text-align: center;
}
.hm-footer-bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.7);
    margin-top: 20px;
}

@media (max-width: 760px) {
    .hm-footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .hm-footer-bottom { flex-direction: column; text-align: center; }
}


/* ══ UTILITIES ═════════════════════════════════════════════ */
.hm-center { text-align: center; }
.hm-mt-lg { margin-top: 40px; }
.hm-mt-md { margin-top: 24px; }
.hm-testimonial-slot { max-width: 640px; margin: 36px auto 0; }