/* ==========================================================
   CoregenX: Healthcare Marketing page (css/healthcare-marketing.css)
   Loads after css/web-design.min.css and only styles this page.
   Theme palette only: logo teal-green #359fad -> #4cdaa0, pink CTA #f9758f -> #d9265f,
   violet bands #432d92, navy #1c1446, white / soft #f8f6ff. Third-party marks keep
   their own colours (Google Maps result, WhatsApp button, client logos).
   Type: Jost headings, Open Sans text, sizes as index.html.
   1. Tokens, layout, section heads, buttons
   2. Hero
   3. Patient journey
   4. Services (grid; swipe carousel on phones)
   5. Philosophy (violet band)
   6. Who we help + digital stack
   7. Clinic UI (sample interfaces)
   8. Client logo marquee
   9. Specialty chips
   10. Why CoregenX (violet band)
   11. Strategy flow (auto-advancing steps)
   12. Enquiry (violet band, white form card)
   13. FAQ
   14. Carousel, reveal, motion (all motion off with prefers-reduced-motion)
   15. Responsive
   Version: 20261017
   ========================================================== */

/* ---------- 1. Tokens, layout ---------- */
:root {
    --hm-ink: #343c55;
    --hm-body: #5e6371;
    --hm-muted: #868b9b;
    --hm-line: #e9eaf2;
    --hm-soft: #f8f6ff;
    --hm-violet: #432d92;
    --hm-violet-2: #5b3fd0;
    --hm-violet-soft: #f0ecff;
    --hm-pink: #d9265f;
    --hm-pink-2: #f9758f;
    --hm-pink-soft: #ffebf1;
    --hm-teal-1: #359fad;
    --hm-teal-2: #4cdaa0;
    --hm-teal-ink: #1f7f8c;
    --hm-teal-soft: #e6f7f5;
    --hm-navy: #1c1446;
    --hm-navy-2: #0f1a3c;
    --hm-green: linear-gradient(270deg, #359fad, #4cdaa0);
    --hm-pinkg: linear-gradient(135deg, #f9758f, #d9265f);
    --hm-violetg: linear-gradient(135deg, #432d92, #5b3fd0);
    --hm-heading: 'Jost', sans-serif;
    --hm-text: 'Open Sans', sans-serif;
    --hm-ease: cubic-bezier(.2, .7, .2, 1);
    --hm-gutter: clamp(16px, 4vw, 40px);
}

.hmSprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.hmPage {
    overflow-x: hidden;
}

.hmPage svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hmWrap {
    width: min(1320px, calc(100% - 2 * var(--hm-gutter)));
    margin-inline: auto;
}

.hmSection {
    position: relative;
    padding: 72px 0;
}

.hmSection--white {
    background: #fff;
}

.hmSection--soft {
    background: var(--hm-soft);
}

.hmSection--violet,
.hmEnquirySection {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--hm-violet);
    color: rgba(255, 255, 255, .86);
}

.hmSection--violet .hmWrap,
.hmEnquirySection .hmWrap {
    position: relative;
    z-index: 1;
}

/* Section heads (index.html scale: eyebrow 15px, H2 32px / 500) */
.hmHead {
    max-width: 860px;
    margin: 0 auto 40px;
    text-align: center;
}

.hmHeadSplit {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px 36px;
    margin-bottom: 40px;
}

.hmHeadSplit_left {
    flex: 1 1 500px;
}

.hmHeadSplit_left .hmEyebrow {
    margin-bottom: 10px;
}

.hmHeadSplit_left h2 {
    margin: 0;
    font-family: var(--hm-heading);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--hm-ink);
}

.hmHeadSplit_right {
    flex: 1 1 400px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.hmHeadSplit_right p {
    margin: 0;
    font-family: var(--hm-text);
    font-size: 16px;
    line-height: 26px;
    color: var(--hm-body);
}

.hmHeadBadge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 13px;
    border: 1px solid rgba(53, 159, 173, .22);
    border-radius: 20px;
    background: var(--hm-teal-soft);
    font-family: var(--hm-heading);
    font-size: 13px;
    font-weight: 500;
    color: var(--hm-teal-ink);
}

.hmEyebrow {
    margin: 0 0 14px;
    font-family: var(--hm-heading);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 4.5px;
    text-transform: uppercase;
    color: var(--hm-pink);
}

.hmSection--violet .hmEyebrow,
.hmEnquirySection .hmEyebrow {
    color: #ffb3c9;
}

.hmHead h2,
.hmPhiloText h2,
.hmEnquiryIntro h2 {
    margin: 0 0 14px;
    font-family: var(--hm-heading);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--hm-ink);
}

.hmSection--violet .hmHead h2,
.hmPhiloText h2,
.hmEnquiryIntro h2 {
    color: #fff;
}

.hmHead p:not(.hmEyebrow) {
    margin: 0;
    font-family: var(--hm-text);
    font-size: 17px;
    line-height: 28px;
    color: var(--hm-body);
}

.hmSection--violet .hmHead p:not(.hmEyebrow) {
    color: rgba(255, 255, 255, .82);
}

.hmNote {
    margin: 22px 0 0;
    text-align: center;
    font-family: var(--hm-text);
    font-size: 13.5px;
    color: var(--hm-muted);
}

/* Buttons */
.hmBtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 26px;
    overflow: hidden;
    border: 1.5px solid transparent;
    border-radius: 50px;
    font-family: var(--hm-heading);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}

.hmBtn svg {
    width: 18px;
    height: 18px;
    flex: none;
}

.hmBtn--primary {
    background: var(--hm-pinkg);
    color: #fff !important;
    box-shadow: 0 8px 20px -6px rgba(217, 38, 95, .45);
}

.hmBtn--primary:hover,
.hmBtn--primary:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -6px rgba(217, 38, 95, .55);
    color: #fff !important;
}

.hmBtn--wa {
    background: var(--hm-green);
    color: #fff !important;
    box-shadow: 0 8px 20px -6px rgba(53, 159, 173, .5);
}

.hmBtn--wa:hover,
.hmBtn--wa:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -6px rgba(53, 159, 173, .6);
    color: #fff !important;
}

.hmBtn--outline {
    background: #fff;
    border-color: var(--hm-ink);
    color: var(--hm-ink) !important;
}

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

/* Shared tick list */
.hmTicks {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hmTicks li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-family: var(--hm-text);
    font-size: 14.5px;
    line-height: 1.5;
    color: #4b5470;
}

.hmTicks li svg {
    width: 17px;
    height: 17px;
    margin-top: 2px;
    flex: none;
    stroke-width: 2.6;
    color: var(--hm-teal-1);
}

/* Decorations for violet bands: ring, disc, dots, lines (as on the homepage) */
.hmDeco {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.hmDeco--ring {
    top: -150px;
    right: -120px;
    width: 380px;
    height: 380px;
    border: 46px solid rgba(255, 255, 255, .07);
    border-radius: 50%;
}

.hmDeco--disc {
    bottom: -110px;
    left: -90px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(249, 117, 143, .2);
}

.hmDeco--dots,
.hmDeco--dotsR {
    display: none !important;
}

.hmDeco--lines {
    right: 8%;
    bottom: 36px;
    width: 180px;
    height: 90px;
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .12) 0 2px, transparent 2px 16px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}

.hmDeco--ringR {
    top: -170px;
    right: -150px;
}

.hmDeco--discL {
    bottom: -130px;
    left: -110px;
}

/* ---------- 2. Hero ---------- */
.hmHero {
    position: relative;
    padding: 44px 0 52px;
    overflow: hidden;
    background:
        radial-gradient(760px 420px at 8% 12%, rgba(76, 218, 160, .09), transparent 70%),
        radial-gradient(700px 420px at 92% 88%, rgba(67, 45, 146, .07), transparent 70%),
        #fff;
}

.hmHeroGrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

.hmHeroEyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    padding: 7px 16px;
    border: 1px solid rgba(53, 159, 173, .25);
    border-radius: 40px;
    background: var(--hm-teal-soft);
    font-family: var(--hm-heading);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--hm-teal-ink);
}

.hmHeroEyebrow svg {
    width: 16px;
    height: 16px;
}

.hmHeroContent h1 {
    margin: 0 0 18px;
    font-family: var(--hm-heading);
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--hm-ink);
}

.hmHeroLead {
    margin: 0 0 24px;
    font-family: var(--hm-text);
    font-size: 17px;
    line-height: 28px;
    color: var(--hm-body);
    text-align: justify;
    text-justify: inter-word;
}

.hmHeroFeatures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.hmHeroFeature {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 16px 7px 7px;
    border: 1px solid var(--hm-line);
    border-radius: 40px;
    background: #fff;
    font-family: var(--hm-heading);
    font-size: 15px;
    font-weight: 500;
    color: var(--hm-ink);
    box-shadow: 0 6px 16px -10px rgba(40, 26, 110, .25);
}

.hmHeroFeatureIcon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    background: var(--hm-green);
    color: #fff;
}

.hmHeroFeature:nth-child(2) .hmHeroFeatureIcon {
    background: var(--hm-violetg);
}

.hmHeroFeature:nth-child(3) .hmHeroFeatureIcon {
    background: var(--hm-teal-1);
}

.hmHeroFeature:nth-child(4) .hmHeroFeatureIcon {
    background: var(--hm-pinkg);
}

.hmHeroFeatureIcon svg {
    width: 15px;
    height: 15px;
}

.hmHeroCtas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 26px;
}

.hmHeroProof {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--hm-line);
    list-style: none;
}

.hmHeroProof li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--hm-text);
    font-size: 14px;
    color: var(--hm-body);
}

.hmHeroProof svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.6;
    color: var(--hm-teal-1);
}

.hmHeroVisual {
    position: relative;
}

.hmHeroDuo {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: center;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.hmHeroPic {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--hm-line);
    box-shadow: 0 20px 45px -20px rgba(40, 26, 110, .3);
    transition: transform .35s var(--hm-ease), box-shadow .35s ease;
}

.hmHeroPic:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 50px -18px rgba(67, 45, 146, .4);
}

.hmHeroPic--first {
    transform: translateY(-8px);
}

.hmHeroPic--second {
    transform: translateY(8px);
}

.hmHeroPic--first:hover {
    transform: translateY(-12px);
}

.hmHeroPic--second:hover {
    transform: translateY(4px);
}

.hmHeroImg {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 424 / 634;
    object-fit: cover;
    object-position: center top;
}

/* ---------- 3. Patient journey ---------- */
.hmJourney {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hmJourneyCard {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 22px;
    border: 1px solid var(--hm-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 14px 34px -24px rgba(40, 26, 110, .3);
    transition: transform .3s var(--hm-ease), box-shadow .3s ease, border-color .3s ease;
}

.hmJourneyCard:hover {
    transform: translateY(-6px);
    border-color: rgba(67, 45, 146, .28);
    box-shadow: 0 24px 44px -26px rgba(67, 45, 146, .45);
}

/* Chevron between steps (wide screens) */
.hmJourneyCard:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 118px;
    right: -18px;
    width: 10px;
    height: 10px;
    border-top: 2.5px solid var(--hm-teal-1);
    border-right: 2.5px solid var(--hm-teal-1);
    transform: rotate(45deg);
}

.hmJourneyStep {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    margin-bottom: 14px;
    padding: 5px 12px 5px 6px;
    border-radius: 30px;
    background: var(--hm-violet-soft);
    font-family: var(--hm-heading);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--hm-violet);
}

.hmJourneyStep svg {
    width: 24px;
    height: 24px;
    padding: 5px;
    border-radius: 50%;
    background: var(--hm-violetg);
    color: #fff;
}

.hmJourneyCard h3 {
    margin: 0 0 8px;
    font-family: var(--hm-heading);
    font-size: 19px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--hm-ink);
}

.hmJourneyCard p {
    margin: 0;
    font-family: var(--hm-text);
    font-size: 15px;
    line-height: 24px;
    color: var(--hm-body);
}

.hmMiniUi {
    min-height: 124px;
    margin-bottom: 18px;
    padding: 12px;
    border: 1px solid #ebe8f6;
    border-radius: 14px;
    background: var(--hm-soft);
    font-family: var(--hm-text);
    font-size: 12px;
    color: var(--hm-ink);
}

.hmMiniSearch_bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
    padding: 7px 12px;
    border: 1px solid #dfdcef;
    border-radius: 20px;
    background: #fff;
    color: #4b5470;
}

.hmMiniSearch_bar svg {
    width: 14px;
    height: 14px;
    color: var(--hm-muted);
}

.hmMiniSearch_result {
    padding: 9px 10px;
    border: 1px solid #edeaf6;
    border-radius: 10px;
    background: #fff;
}

/* Google's own colours inside the Maps result mock */
.hmMiniSearch_result small {
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 600;
    color: var(--hm-teal-ink);
}

.hmMiniSearch_result strong {
    display: block;
    font-family: var(--hm-heading);
    font-size: 14px;
    font-weight: 500;
    color: #202124;
}

.hmMiniSearch_stars {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 11px;
    color: #fbbc04;
}

.hmMiniSearch_stars em {
    font-style: normal;
    color: var(--hm-muted);
}

.hmMiniBook_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 9px;
    font-family: var(--hm-heading);
    font-size: 13px;
    font-weight: 500;
}

.hmMiniBook_badge {
    padding: 2px 8px;
    border-radius: 12px;
    background: var(--hm-teal-soft);
    font-family: var(--hm-text);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--hm-teal-ink);
}

.hmMiniBook_slots {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 9px;
}

.hmMiniBook_slot {
    padding: 6px;
    border: 1px solid #dfdcef;
    border-radius: 8px;
    background: #fff;
    text-align: center;
    font-size: 11.5px;
}

.hmMiniBook_slot--active {
    border-color: var(--hm-violet);
    background: var(--hm-violet);
    font-weight: 600;
    color: #fff;
}

.hmMiniBook_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 8px;
    background: #25d366;
    font-weight: 600;
    color: #fff;
}

.hmMiniBook_btn svg {
    width: 14px;
    height: 14px;
}

.hmMiniVisit_card {
    padding: 12px;
    border: 1px solid #edeaf6;
    border-left: 4px solid var(--hm-teal-1);
    border-radius: 10px;
    background: #fff;
}

.hmMiniVisit_token {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 11px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--hm-muted);
}

.hmMiniVisit_token b {
    font-family: var(--hm-heading);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--hm-teal-ink);
}

.hmMiniVisit_doc {
    font-family: var(--hm-heading);
    font-size: 13.5px;
    font-weight: 500;
}

.hmMiniVisit_time {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--hm-body);
}

.hmMiniVisit_time i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hm-teal-2);
    box-shadow: 0 0 0 3px rgba(76, 218, 160, .25);
}

.hmMiniReview_box {
    padding: 10px;
    border: 1px solid #edeaf6;
    border-radius: 10px;
    background: #fff;
    text-align: center;
}

.hmMiniReview_title {
    font-family: var(--hm-heading);
    font-size: 13px;
    font-weight: 500;
}

.hmMiniReview_stars {
    margin: 2px 0 6px;
    font-size: 17px;
    letter-spacing: 2px;
    color: #fbbc04;
}

.hmMiniReview_quote {
    padding: 6px 8px;
    border-left: 2px solid var(--hm-pink-2);
    border-radius: 6px;
    background: var(--hm-soft);
    text-align: left;
    font-size: 11.5px;
    font-style: italic;
    color: #4b5470;
}

/* Public Healthcare Research & Search Intelligence */
.hmResearchBar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: 36px;
    padding: 26px 22px;
    border: 1px solid var(--hm-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 14px 34px -24px rgba(40, 26, 110, .28);
}

.hmResearchItem {
    display: flex;
    flex-direction: column;
    padding: 0 14px;
    border-right: 1px solid var(--hm-line);
}

.hmResearchItem:last-child {
    border-right: none;
}

.hmResearchStat {
    display: block;
    margin-bottom: 8px;
    font-family: var(--hm-heading);
    font-size: clamp(30px, 3.2vw, 42px);
    font-weight: 600;
    line-height: 1;
    background: var(--hm-green);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hmResearchItem p {
    margin: 0 0 10px;
    font-family: var(--hm-text);
    font-size: 13.5px;
    line-height: 20px;
    color: var(--hm-body);
    flex: 1;
}

.hmResearchItem cite {
    display: block;
    font-family: var(--hm-text);
    font-size: 11px;
    font-style: normal;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--hm-muted);
}

/* ---------- 4. Services ---------- */
.hmServiceGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.hmServiceCard {
    --tone: var(--hm-green);
    --tone-ink: var(--hm-teal-ink);
    --tone-soft: var(--hm-teal-soft);
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px;
    overflow: hidden;
    border: 1px solid var(--hm-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 14px 34px -26px rgba(40, 26, 110, .35);
    transition: transform .3s var(--hm-ease), box-shadow .3s ease, border-color .3s ease;
}

.hmTone--violet {
    --tone: var(--hm-violetg);
    --tone-ink: var(--hm-violet);
    --tone-soft: var(--hm-violet-soft);
}

.hmTone--pink {
    --tone: var(--hm-pinkg);
    --tone-ink: var(--hm-pink);
    --tone-soft: var(--hm-pink-soft);
}

.hmServiceCard::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--tone);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--hm-ease);
}

.hmServiceCard:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 50px -28px rgba(67, 45, 146, .5);
}

.hmServiceTop {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.hmServiceIcon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: 16px;
    background: var(--tone);
    color: #fff;
    box-shadow: 0 10px 20px -10px rgba(40, 26, 110, .5);
    transition: transform .3s var(--hm-ease);
}

.hmServiceCard:hover .hmServiceIcon {
    transform: rotate(-6deg) scale(1.05);
}

.hmServiceIcon svg {
    width: 26px;
    height: 26px;
}

/* Tiny UI hint per service */
.hmServiceVis {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    height: 56px;
    padding: 8px 12px;
    border-radius: 12px;
    background: var(--tone-soft);
    font-family: var(--hm-text);
    font-size: 11.5px;
    color: var(--hm-ink);
}

.hmServiceVis b {
    overflow: hidden;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hmServiceVis i {
    display: block;
    height: 5px;
    border-radius: 3px;
    background: rgba(52, 60, 85, .14);
}

.hmVis--web i:first-child {
    width: 70%;
}

.hmVis--web i:nth-child(2) {
    width: 45%;
}

.hmVis--web b {
    position: absolute;
    right: 10px;
    bottom: 9px;
    padding: 3px 9px;
    border-radius: 20px;
    background: var(--hm-pinkg);
    font-size: 10px;
    color: #fff;
}

.hmVis--ad em {
    align-self: flex-start;
    padding: 0 6px;
    border: 1px solid currentColor;
    border-radius: 4px;
    font-size: 9.5px;
    font-style: normal;
    font-weight: 700;
    line-height: 14px;
    color: var(--tone-ink);
}

.hmVis--ad i {
    width: 80%;
}

.hmVis--video {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.hmVis--video span {
    position: relative;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    background: var(--hm-pinkg);
}

.hmVis--video span::after {
    content: '';
    position: absolute;
    top: 11px;
    left: 13px;
    border-left: 10px solid #fff;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.hmVis--map {
    gap: 6px;
}

.hmVis--map i {
    position: relative;
    margin-left: 16px;
}

.hmVis--map i::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -16px;
    width: 9px;
    height: 9px;
    border-radius: 50% 50% 50% 0;
    background: var(--hm-teal-1);
    transform: rotate(-45deg);
}

.hmVis--map i:first-child {
    width: 75%;
    background: var(--hm-green);
}

.hmVis--map i:nth-child(2) {
    width: 55%;
}

.hmVis--map i:nth-child(3) {
    width: 40%;
}

.hmVis--app {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
}

.hmVis--app span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 9px;
    background: var(--hm-violetg);
    color: #fff;
}

.hmVis--app span svg {
    width: 15px;
    height: 15px;
}

.hmVis--chat b {
    padding: 6px 9px;
    border-left: 3px solid var(--hm-teal-1);
    border-radius: 4px 10px 10px 10px;
    background: #fff;
    font-weight: 500;
    white-space: normal;
    line-height: 1.3;
    font-size: 10.5px;
}

.hmVis--chat em {
    position: absolute;
    right: 10px;
    bottom: 3px;
    font-size: 9px;
    font-style: normal;
    color: var(--hm-teal-1);
}

.hmServiceTag {
    align-self: flex-start;
    padding: 4px 11px;
    border-radius: 20px;
    background: var(--tone-soft);
    font-family: var(--hm-heading);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--tone-ink);
}

.hmServiceCard h3 {
    margin: 12px 0 8px;
    font-family: var(--hm-heading);
    font-size: 19px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--hm-ink);
}

.hmServiceCard > p {
    margin: 0 0 16px;
    font-family: var(--hm-text);
    font-size: 15px;
    line-height: 24px;
    color: var(--hm-body);
}

.hmServiceCard .hmTicks {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px dashed #e2deef;
}

.hmServiceCard .hmTicks svg {
    color: var(--tone-ink);
}

.hmTone--teal .hmTicks svg {
    color: var(--hm-teal-1);
}

/* ---------- 5. Philosophy ---------- */
.hmPhilo {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: clamp(36px, 5vw, 72px);
    align-items: center;
}

.hmPhiloPic {
    position: relative;
    margin: 0 0 0 16px;
}

.hmPhiloPic::before {
    content: '';
    position: absolute;
    inset: 16px 16px -16px -16px;
    border: 2px solid rgba(255, 255, 255, .22);
    border-radius: 24px;
}

.hmPhiloPic img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 660 / 553;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 30px 60px -30px rgba(10, 6, 40, .7);
}

.hmPhiloCap {
    position: absolute;
    left: 18px;
    bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100% - 36px);
    padding: 10px 16px 10px 10px;
    border-radius: 14px;
    background: #fff;
    font-family: var(--hm-heading);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--hm-ink);
    box-shadow: 0 16px 30px -14px rgba(10, 6, 40, .5);
}

.hmPhiloCap span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 10px;
    background: var(--hm-green);
    color: #fff;
}

.hmPhiloCap svg {
    width: 18px;
    height: 18px;
}

.hmPhiloText > p:not(.hmEyebrow) {
    margin: 0 0 24px;
    font-family: var(--hm-text);
    font-size: 17px;
    line-height: 28px;
    color: rgba(255, 255, 255, .84);
}

.hmPhiloList {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hmPhiloList li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    background: rgba(255, 255, 255, .07);
    font-family: var(--hm-heading);
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.35;
    color: #fff;
    transition: background-color .25s ease, transform .25s var(--hm-ease);
}

.hmPhiloList li:hover {
    background: rgba(255, 255, 255, .12);
    transform: translateY(-3px);
}

.hmPhiloList li span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 11px;
    background: var(--hm-green);
    color: #fff;
}

.hmPhiloList li:nth-child(2) span,
.hmPhiloList li:nth-child(3) span {
    background: var(--hm-pinkg);
}

.hmPhiloList svg {
    width: 19px;
    height: 19px;
}

/* ---------- 6. Who we help + digital stack ---------- */
.hmAudience {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.hmAudienceCard {
    position: relative;
    padding: 26px;
    overflow: hidden;
    border: 1px solid var(--hm-line);
    border-radius: 20px;
    background: #fff;
    transition: transform .3s var(--hm-ease), box-shadow .3s ease;
}

.hmAudienceCard::after {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    border: 16px solid var(--hm-violet-soft);
    border-radius: 50%;
    transition: transform .4s var(--hm-ease);
}

.hmAudienceCard:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 46px -28px rgba(67, 45, 146, .45);
}

.hmAudienceCard:hover::after {
    transform: scale(1.25);
}

.hmAudienceIcon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 18px;
    border-radius: 16px;
    background: var(--hm-violetg);
    color: #fff;
}

.hmAudienceCard:nth-child(2) .hmAudienceIcon {
    background: var(--hm-green);
}

.hmAudienceCard:nth-child(3) .hmAudienceIcon {
    background: var(--hm-pinkg);
}

.hmAudienceIcon svg {
    width: 26px;
    height: 26px;
}

.hmAudienceCard h3 {
    position: relative;
    margin: 0 0 8px;
    font-family: var(--hm-heading);
    font-size: 19px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--hm-ink);
}

.hmAudienceCard p {
    position: relative;
    margin: 0;
    font-family: var(--hm-text);
    font-size: 15px;
    line-height: 24px;
    color: var(--hm-body);
}

.hmStackHead {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 20px;
    margin: 48px 0 18px;
    padding-top: 30px;
    border-top: 1px solid #e6e2f3;
}

.hmStackHead h3 {
    margin: 0;
    font-family: var(--hm-heading);
    font-size: 22px;
    font-weight: 500;
    color: var(--hm-ink);
}

.hmStackHead span {
    font-family: var(--hm-text);
    font-size: 15px;
    color: var(--hm-muted);
}

.hmStack {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.hmStackCard {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--hm-line);
    border-radius: 18px;
    background: #fff;
    text-decoration: none;
    transition: transform .3s var(--hm-ease), box-shadow .3s ease;
}

.hmStackCard:hover,
.hmStackCard:focus-visible {
    transform: translateY(-5px);
    box-shadow: 0 24px 44px -28px rgba(67, 45, 146, .5);
}

.hmStackPic {
    display: block;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    background: var(--hm-violet-soft);
}

.hmStackPic img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--hm-ease);
}

.hmStackCard:hover .hmStackPic img {
    transform: scale(1.06);
}

.hmStackName {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    font-family: var(--hm-heading);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--hm-ink);
}

.hmStackName svg {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--hm-pink);
    transition: transform .25s ease;
}

.hmStackCard:hover .hmStackName svg {
    transform: translateX(4px);
}

/* ---------- 7. Clinic UI ---------- */
/* Simplified Segmented Tab Switcher */
.hmConnectedBar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
    margin: 0 auto 32px;
    padding: 6px;
    border: 1px solid #e8e4f5;
    border-radius: 50px;
    background: #fbfaff;
    box-shadow: 0 8px 20px -12px rgba(40, 26, 110, .2);
}

.hmConnectedStep {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border: none;
    border-radius: 40px;
    background: transparent;
    cursor: pointer;
    text-align: center;
    transition: all .25s ease;
}

.hmConnectedStep:hover {
    background: rgba(67, 45, 146, .06);
}

.hmConnectedStep:focus-visible {
    outline: 2px solid var(--hm-violet);
    outline-offset: 2px;
}

.hmConnectedDot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #c7c2e0;
    transition: all .25s ease;
}

.hmConnectedStep.is-active {
    background: var(--hm-violet);
    box-shadow: 0 6px 16px -6px rgba(67, 45, 146, .45);
}

.hmConnectedStep.is-active .hmConnectedDot {
    background: var(--hm-teal-2);
    box-shadow: 0 0 0 3px rgba(76, 218, 160, .35);
}

.hmConnectedStep b {
    font-family: var(--hm-heading);
    font-size: 14.5px;
    font-weight: 500;
    color: var(--hm-ink);
    transition: color .25s ease;
}

.hmConnectedStep.is-active b {
    color: #fff;
}

.hmWinChip--connected {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--hm-teal-soft);
    color: var(--hm-teal-ink);
}

.hmLiveDot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--hm-teal-2);
    box-shadow: 0 0 0 2px rgba(76, 218, 160, .4);
    animation: hmPulse 2s infinite;
}

.hmMockups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.hmWin {
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--hm-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 20px 44px -28px rgba(40, 26, 110, .4);
    transition: transform .3s var(--hm-ease), box-shadow .3s ease, border-color .3s ease;
}

.hmWin:hover,
.hmWin.is-active {
    transform: translateY(-6px);
    border-color: rgba(53, 159, 173, .6);
    box-shadow: 0 30px 56px -30px rgba(53, 159, 173, .5);
}

.hmWinBar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #ebe8f6;
    background: var(--hm-soft);
}

.hmWinDots {
    display: flex;
    gap: 5px;
}

.hmWinDots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--hm-pink-2);
}

.hmWinDots i:nth-child(2) {
    background: #c9bff0;
}

.hmWinDots i:nth-child(3) {
    background: var(--hm-teal-2);
}

.hmWinTitle {
    flex: 1;
    font-family: var(--hm-heading);
    font-size: 13px;
    font-weight: 500;
    color: var(--hm-body);
}

.hmWinChip {
    padding: 3px 8px;
    border-radius: 20px;
    background: var(--hm-pink-soft);
    font-family: var(--hm-text);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--hm-pink);
}

.hmWinBody {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 18px;
    font-family: var(--hm-text);
    font-size: 12.5px;
    color: var(--hm-ink);
}

.hmWin figcaption {
    padding: 12px 18px;
    border-top: 1px solid #f0eef7;
    font-family: var(--hm-text);
    font-size: 13px;
    line-height: 1.45;
    color: var(--hm-body);
}

.hmLbl {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--hm-muted);
}

.hmDoc {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f0eef7;
}

.hmDocAv {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: 50%;
    background: var(--hm-green);
    color: #fff;
}

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

.hmDocMeta strong {
    display: block;
    font-family: var(--hm-heading);
    font-size: 15px;
    font-weight: 500;
}

.hmDocMeta small {
    display: block;
    font-size: 12px;
    color: var(--hm-muted);
}

.hmDocMeta em {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--hm-teal-soft);
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    color: var(--hm-teal-ink);
}

.hmDocMeta em svg {
    width: 12px;
    height: 12px;
}

.hmDates {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.hmDates span,
.hmSlots span {
    flex: 1;
    padding: 9px 4px;
    border: 1px solid #e4e1ef;
    border-radius: 10px;
    text-align: center;
    font-size: 12px;
    color: #4b5470;
}

.hmDates .is-on {
    border-color: var(--hm-violet);
    background: var(--hm-violet);
    font-weight: 600;
    color: #fff;
}

.hmSlots {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}

.hmSlots span {
    padding: 8px 4px;
    border-radius: 8px;
}

.hmSlots .is-on {
    border-color: var(--hm-teal-1);
    background: var(--hm-teal-soft);
    font-weight: 600;
    color: var(--hm-teal-ink);
}

.hmWaBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    padding: 10px;
    border-radius: 10px;
    background: #25d366;
    font-family: var(--hm-heading);
    font-size: 13.5px;
    font-weight: 500;
    color: #fff;
}

.hmWaBtn svg {
    width: 16px;
    height: 16px;
}

.hmPortalTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0eef7;
}

.hmPortalTop strong {
    font-family: var(--hm-heading);
    font-size: 15px;
    font-weight: 500;
}

.hmPortalTop span {
    padding: 3px 9px;
    border-radius: 20px;
    background: var(--hm-teal-soft);
    font-size: 11px;
    font-weight: 600;
    color: var(--hm-teal-ink);
}

.hmPortalAlert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border-left: 3px solid var(--hm-violet);
    border-radius: 10px;
    background: var(--hm-violet-soft);
}

.hmPortalAlert svg {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--hm-violet);
}

.hmPortalAlert p {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: #3a2d73;
}

.hmReports {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
}

.hmReports > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid #ebe8f6;
    border-radius: 9px;
    background: #fbfaff;
}

.hmReports strong {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
}

.hmReports small {
    font-size: 11px;
    color: var(--hm-muted);
}

.hmReports em {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid #d9d3f3;
    border-radius: 6px;
    background: #fff;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    color: var(--hm-violet);
}

.hmReports em svg {
    width: 12px;
    height: 12px;
}

.hmRx {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: auto;
    padding: 10px 12px;
    border: 1px solid #c6ece4;
    border-radius: 10px;
    background: var(--hm-teal-soft);
    font-size: 12px;
    color: #1f6f78;
}

.hmRx svg {
    width: 18px;
    height: 18px;
    flex: none;
}

.hmRx strong {
    display: block;
}

.hmKpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

.hmKpis > div {
    padding: 10px 12px 6px;
    border: 1px solid #ebe8f6;
    border-radius: 10px;
    background: #fbfaff;
}

.hmKpis small {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    color: var(--hm-muted);
}

.hmPage svg.hmSpark {
    display: block;
    width: 100%;
    height: 34px;
    stroke: var(--hm-violet);
    stroke-width: 2.5;
    vector-effect: non-scaling-stroke;
}

.hmPage svg.hmSpark--teal {
    stroke: var(--hm-teal-1);
}

.hmSpark path {
    vector-effect: non-scaling-stroke;
}

.hmBars > div {
    margin-bottom: 9px;
}

.hmBars span {
    display: block;
    margin-bottom: 4px;
    font-size: 11.5px;
    color: #4b5470;
}

.hmBars i,
.hmAb i {
    position: relative;
    display: block;
    height: 7px;
    overflow: hidden;
    border-radius: 4px;
    background: #ece9f7;
}

.hmBars i::after,
.hmAb i::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--w);
    border-radius: 4px;
    background: var(--hm-violetg);
    transform-origin: left;
}

.hmBars > div:nth-child(2) i::after {
    background: var(--hm-green);
}

.hmBars > div:nth-child(3) i::after {
    background: var(--hm-pinkg);
}

.hmFeed {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid #f0eef7;
}

.hmFeed span {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    font-size: 11.5px;
    color: #4b5470;
}

.hmFeed i {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: var(--hm-teal-2);
}

/* ---------- 8. Client logos (full-width marquee) ---------- */
.hmClientsTrustRow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
}

.hmClientsBadge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border: 1px solid var(--hm-line);
    border-radius: 30px;
    background: #fff;
    font-family: var(--hm-heading);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--hm-ink);
    box-shadow: 0 4px 12px -8px rgba(40, 26, 110, .25);
}

.hmClientsBadge svg {
    width: 16px;
    height: 16px;
    color: var(--hm-teal-1);
    stroke-width: 2.4;
}

.hmClientsMarqueeWrap {
    width: 100%;
    margin-top: 28px;
}

.hmMarquee {
    position: relative;
    overflow: hidden;
    padding: 10px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.hmMarqueeTrack {
    display: flex;
    align-items: center;
    gap: 24px;
    width: max-content;
    padding: 6px 12px;
}

.hmLogo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 92px;
    padding: 12px 26px;
    border: 1px solid var(--hm-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 24px -20px rgba(40, 26, 110, .4);
    transition: transform .25s var(--hm-ease), box-shadow .25s ease;
}

.hmLogo:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px -20px rgba(67, 45, 146, .5);
}

.hmLogo img {
    width: auto;
    height: auto;
    max-width: 170px;
    max-height: 60px;
    object-fit: contain;
}

/* ---------- 10. Why CoregenX ---------- */
.hmWhyGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.hmWhyCard {
    position: relative;
    padding: 26px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 20px;
    background: rgba(255, 255, 255, .06);
    transition: transform .3s var(--hm-ease), background-color .3s ease, border-color .3s ease;
}

.hmWhyCard::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--hm-green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--hm-ease);
}

.hmWhyCard:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .11);
}

.hmWhyCard:hover::before {
    transform: scaleX(1);
}

.hmWhyNum {
    position: absolute;
    top: 14px;
    right: 20px;
    font-family: var(--hm-heading);
    font-size: 46px;
    font-weight: 600;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .3);
    transition: -webkit-text-stroke-color .3s ease;
}

.hmWhyIcon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: var(--hm-green);
    color: #fff;
    box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .4);
}

.hmWhyCard:nth-child(even) .hmWhyIcon {
    background: var(--hm-pinkg);
}

.hmWhyIcon svg {
    width: 24px;
    height: 24px;
}

.hmWhyCard h3 {
    margin: 0 0 8px;
    padding-right: 52px;
    font-family: var(--hm-heading);
    font-size: 19px;
    font-weight: 500;
    line-height: 1.3;
    color: #fff;
}

.hmWhyCard p {
    margin: 0;
    font-family: var(--hm-text);
    font-size: 15px;
    line-height: 24px;
    color: rgba(255, 255, 255, .82);
}

/* ---------- 11. Strategy flow ---------- */
.hmFlow {
    --hm-flow-dur: 6500ms;
    padding: 26px;
    border: 1px solid var(--hm-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 24px 50px -36px rgba(40, 26, 110, .45);
}

.hmFlowRail {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 26px;
}

.hmFlowTab {
    position: relative;
    display: block;
    min-height: 64px;
    padding: 11px 14px 15px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 14px;
    background: var(--hm-soft);
    text-align: left;
    cursor: pointer;
    transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.hmFlowTab b {
    display: block;
    font-family: var(--hm-heading);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: var(--hm-pink);
}

.hmFlowTab span {
    display: block;
    margin-top: 2px;
    font-family: var(--hm-heading);
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--hm-ink);
}

.hmFlowTab:hover {
    border-color: rgba(67, 45, 146, .2);
}

.hmFlowTab:focus-visible {
    outline: 2px solid var(--hm-violet);
    outline-offset: 2px;
}

.hmFlowTab.is-on {
    border-color: rgba(67, 45, 146, .3);
    background: #fff;
    box-shadow: 0 12px 24px -16px rgba(67, 45, 146, .5);
}

.hmFlowTab.is-on b {
    color: var(--hm-violet);
}

.hmFlowBar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(67, 45, 146, .08);
}

.hmFlowBar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--hm-green);
    transform: scaleX(0);
    transform-origin: left;
}

.hmFlowTab.is-on .hmFlowBar::after {
    transform: scaleX(1);
}

.hmFlowPanel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}

.hmFlowPanel[hidden] {
    display: none;
}

.hmFlowKicker {
    display: block;
    margin-bottom: 8px;
    font-family: var(--hm-heading);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--hm-teal-ink);
}

.hmFlowText h3 {
    margin: 0 0 10px;
    font-family: var(--hm-heading);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--hm-ink);
}

.hmFlowText p {
    margin: 0 0 18px;
    font-family: var(--hm-text);
    font-size: 16px;
    line-height: 26px;
    color: var(--hm-body);
}

.hmFlowUi {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 310px;
    padding: 28px;
    overflow: hidden;
    border-radius: 20px;
    background:
        radial-gradient(ellipse at 85% 15%, rgba(76, 218, 160, .08), transparent 60%),
        radial-gradient(ellipse at 15% 85%, rgba(67, 45, 146, .06), transparent 60%),
        var(--hm-soft);
}

.hmFlowUi::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 180px;
    height: 180px;
    border: 22px solid rgba(76, 218, 160, .14);
    border-radius: 50%;
}

.hmUiCard {
    position: relative;
    width: min(100%, 370px);
    padding: 18px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 44px -26px rgba(40, 26, 110, .45);
    font-family: var(--hm-text);
}

.hmUiHead {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0eef7;
    font-family: var(--hm-heading);
    font-size: 15px;
    font-weight: 500;
    color: var(--hm-ink);
}

.hmUiHead svg {
    width: 18px;
    height: 18px;
    color: var(--hm-violet);
}

.hmAudit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px dashed #ece9f5;
    font-size: 13.5px;
    color: #4b5470;
}

.hmAudit:last-child {
    border-bottom: 0;
}

.hmAudit em,
.hmAb em {
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11.5px;
    font-style: normal;
    font-weight: 600;
}

.hmAudit .ok,
.hmAb em {
    background: var(--hm-teal-soft);
    color: var(--hm-teal-ink);
}

.hmAudit .fix {
    background: var(--hm-pink-soft);
    color: var(--hm-pink);
}

.hmAudit .chk {
    background: var(--hm-violet-soft);
    color: var(--hm-violet);
}

.hmScqa {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    font-size: 13.5px;
    color: #4b5470;
}

.hmScqa b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    height: 28px;
    padding: 2px 8px;
    flex: none;
    border-radius: 8px;
    background: var(--hm-violet-soft);
    font-family: var(--hm-heading);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--hm-violet);
}

.hmScqa--a b {
    background: var(--hm-green);
    color: #fff;
}

.hmScqa--a span {
    font-weight: 600;
    color: var(--hm-ink);
}

.hmPilot {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 0;
    font-size: 13.5px;
    color: #4b5470;
}

.hmPilot:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 28px;
    left: 9px;
    width: 2px;
    height: 18px;
    background: #e4e0f2;
}

.hmPilot i {
    position: relative;
    width: 20px;
    height: 20px;
    flex: none;
    border: 2px solid #d9d3f3;
    border-radius: 50%;
    background: #fff;
}

.hmPilot.is-done i {
    border: 0;
    background: var(--hm-green);
}

.hmPilot.is-done i::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 7px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.hmPilot.is-now i {
    border-color: var(--hm-violet);
    box-shadow: 0 0 0 4px rgba(67, 45, 146, .14);
}

.hmPilot.is-now {
    font-weight: 600;
    color: var(--hm-ink);
}

.hmAb {
    position: relative;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px 10px;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid #ebe8f6;
    border-radius: 12px;
}

.hmAb.is-win {
    border-color: var(--hm-teal-1);
    background: #fbfffe;
}

.hmAbTag {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--hm-violet-soft);
    font-family: var(--hm-heading);
    font-weight: 600;
    color: var(--hm-violet);
}

.hmAb b {
    display: block;
    padding-right: 44px;
    font-size: 13px;
    color: var(--hm-ink);
}

.hmAb small {
    font-size: 11px;
    color: var(--hm-muted);
}

.hmAb i {
    grid-column: 1 / -1;
}

.hmAb.is-win i::after {
    background: var(--hm-green);
}

.hmAb em {
    position: absolute;
    top: 12px;
    right: 12px;
}

.hmOrbit {
    position: relative;
    width: 300px;
    max-width: 100%;
    aspect-ratio: 1;
}

.hmOrbit::before {
    content: '';
    position: absolute;
    inset: 32px;
    border: 1.5px dashed rgba(67, 45, 146, .3);
    border-radius: 50%;
}

.hmOrbitCore {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background: var(--hm-violetg);
    font-family: var(--hm-heading);
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    box-shadow: 0 0 0 10px rgba(67, 45, 146, .1), 0 20px 30px -16px rgba(40, 26, 110, .6);
    transform: translate(-50%, -50%);
}

.hmOrbitCore svg {
    width: 24px;
    height: 24px;
}

.hmOrbitChip {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 6px 12px;
    border: 1px solid var(--hm-line);
    border-radius: 20px;
    background: #fff;
    font-family: var(--hm-heading);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--hm-ink);
    box-shadow: 0 10px 18px -12px rgba(40, 26, 110, .45);
    transform: translate(-50%, -50%) rotate(var(--a)) translateX(118px) rotate(calc(-1 * var(--a)));
}

.hmFunnel {
    width: var(--w);
    margin: 8px auto 0;
    padding: 9px 14px;
    border-radius: 10px;
    background: var(--hm-violetg);
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, .85);
}

.hmFunnel:nth-of-type(3) {
    background: linear-gradient(135deg, #5b3fd0, #7a62dc);
}

.hmFunnel:nth-of-type(4) {
    background: var(--hm-pinkg);
}

.hmFunnel:nth-of-type(5) {
    background: var(--hm-green);
}

.hmFunnel b {
    margin-right: 6px;
    font-family: var(--hm-heading);
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}

/* ---------- 12. Enquiry ---------- */
.hmEnquirySection {
    padding: 72px 0;
}

.hmEnquiryGrid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

.hmEnquiryLead {
    margin: 0 0 22px;
    font-family: var(--hm-text);
    font-size: 17px;
    line-height: 28px;
    color: rgba(255, 255, 255, .84);
}

.hmUspList {
    display: grid;
    gap: 12px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.hmUspList li {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: var(--hm-heading);
    font-size: 16px;
    font-weight: 400;
    color: #fff;
}

.hmUspList svg {
    width: 24px;
    height: 24px;
    flex: none;
    padding: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    stroke-width: 3;
    color: #fff;
}

.hmDeskOnly {
    display: inline-flex !important;
}

.hmMobOnly {
    display: none !important;
}

.hmContactCards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.hmContactCard {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 16px;
    background: rgba(255, 255, 255, .1);
    color: #fff !important;
    text-decoration: none;
    transition: background-color .2s ease, transform .2s ease;
}

.hmContactCard:hover,
.hmContactCard:focus-visible {
    background: rgba(255, 255, 255, .17);
    transform: translateY(-2px);
    color: #fff !important;
}

.hmContactCardIcon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 50%;
    background: #fff;
    color: var(--hm-violet);
}

.hmContactCardIcon svg {
    width: 19px;
    height: 19px;
}

.hmContactCardText {
    min-width: 0;
}

.hmContactCardText small {
    display: block;
    font-family: var(--hm-heading);
    font-size: 13px;
    color: rgba(255, 255, 255, .72);
}

.hmContactCardText strong {
    display: block;
    overflow: hidden;
    font-family: var(--hm-heading);
    font-size: 16.5px;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #fff;
}

.hmFormCard {
    padding: clamp(22px, 3vw, 34px);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 30px 60px -24px rgba(10, 6, 40, .55);
    color: var(--hm-ink);
}

.hmFormTitle {
    margin: 0 0 18px;
    font-family: var(--hm-heading);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--hm-ink);
}

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

.hmFormCard .cgx-field-input,
.hmFormCard .cgx-dialcode-input,
.hmFormCard .cgx-field-select,
.hmFormCard .cgx-field-textarea {
    border-color: var(--hm-line);
    color: var(--hm-ink);
    font-size: 14px;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.hmFormCard .cgx-field-input::placeholder,
.hmFormCard .cgx-field-textarea::placeholder,
.hmFormCard .cgx-dialcode-input::placeholder {
    font-size: 13.5px;
    color: var(--hm-muted);
    font-weight: 400;
}

.hmFormCard .cgx-field-input:focus,
.hmFormCard .cgx-dialcode-input:focus,
.hmFormCard .cgx-field-select:focus,
.hmFormCard .cgx-field-textarea:focus {
    border-color: var(--hm-teal-1) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(53, 159, 173, .2) !important;
}

.hmFormCard .cgx-field-icon,
.hmFormCard .cgx-dialcode-icon,
.hmFormCard .cgx-field-select-arrow {
    color: var(--hm-teal-1);
}

.hmFormCard .cgx-submit-btn {
    background: var(--hm-pinkg);
    box-shadow: 0 10px 22px -8px rgba(217, 38, 95, .5);
}

.hmFormCard .cgx-submit-btn:hover,
.hmFormCard .cgx-submit-btn:focus-visible {
    background: linear-gradient(135deg, #f7637f, #c81f55);
    box-shadow: 0 14px 26px -8px rgba(217, 38, 95, .6);
}

.hmFormCard .cgx-field-input,
.hmFormCard .cgx-dialcode-input,
.hmFormCard .cgx-field-select,
.hmFormCard .cgx-field-textarea {
    font-family: var(--hm-text);
    font-size: 14.5px;
    border-color: #e2def0;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.hmFormCard .cgx-field-input::placeholder,
.hmFormCard .cgx-dialcode-input::placeholder,
.hmFormCard .cgx-field-textarea::placeholder {
    font-family: var(--hm-text);
    font-size: 13.5px !important;
    color: #868b9b !important;
    opacity: 1;
}

.hmFormCard .cgx-field-input:focus,
.hmFormCard .cgx-dialcode-input:focus,
.hmFormCard .cgx-field-select:focus,
.hmFormCard .cgx-field-textarea:focus {
    border-color: var(--hm-violet) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(67, 45, 146, .14) !important;
}

.hmFormCard .cgx-field-icon,
.hmFormCard .cgx-dialcode-icon {
    color: var(--hm-violet);
}

/* ---------- 13. FAQ ---------- */
#faq {
    padding-top: 56px;
    padding-bottom: 64px;
}

.hmFaqGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 22px;
    align-items: start;
}

.hmFaqCol {
    display: grid;
    gap: 14px;
}

.hmFaqItem {
    overflow: hidden;
    border: 1px solid var(--hm-line);
    border-radius: 16px;
    background: #fff;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.hmFaqItem.is-open {
    border-color: rgba(67, 45, 146, .32);
    box-shadow: 0 16px 30px -22px rgba(67, 45, 146, .5);
}

.hmFaqItem h3 {
    margin: 0;
}

.hmFaqBtn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    min-height: 56px;
    padding: 16px 20px;
    border: 0;
    background: transparent;
    text-align: left;
    font-family: var(--hm-heading);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--hm-ink);
    cursor: pointer;
    transition: color .2s ease;
}

.hmFaqBtn:hover {
    color: var(--hm-violet);
}

.hmFaqBtn:focus-visible {
    outline: 2px solid var(--hm-violet);
    outline-offset: -2px;
    border-radius: 16px;
}

.hmFaqIcon {
    position: relative;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    background: var(--hm-violet-soft);
    color: var(--hm-violet);
    transition: background-color .25s ease, color .25s ease;
}

.hmFaqIcon::before,
.hmFaqIcon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    margin: -1px 0 0 -6px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .3s var(--hm-ease);
}

.hmFaqIcon::after {
    transform: rotate(90deg);
}

/* Open: the vertical bar turns flat, so the plus becomes a minus */
.hmFaqItem.is-open .hmFaqIcon {
    background: var(--hm-violet);
    color: #fff;
}

.hmFaqItem.is-open .hmFaqIcon::after {
    transform: rotate(0deg);
}

.hmFaqAns {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .35s var(--hm-ease);
}

.hmFaqItem.is-open .hmFaqAns {
    grid-template-rows: 1fr;
}

.hmFaqAnsInner {
    min-height: 0;
    overflow: hidden;
    padding: 0 20px;
}

.hmFaqAnsInner p {
    margin: 0;
    padding: 0 0 18px;
    font-family: var(--hm-text);
    font-size: 15px;
    line-height: 25px;
    color: var(--hm-body);
}

.hmFaqCta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 36px;
    padding: 22px 28px;
    border: 1px solid #e2def2;
    border-radius: 20px;
    background: var(--hm-soft);
}

.hmFaqCta p {
    margin: 0;
    font-family: var(--hm-text);
    font-size: 16px;
    color: var(--hm-body);
}

.hmFaqCta strong {
    font-family: var(--hm-heading);
    font-size: 18px;
    font-weight: 500;
    color: var(--hm-ink);
}

.hmFaqCta > div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hmFaqCta .hmBtn {
    min-height: 46px;
    padding: 11px 24px;
    border: 1.5px solid transparent;
}

/* ---------- 14. Carousel, reveal, motion ---------- */
.hmCarouselNav,
.hmChipsHint {
    display: none;
}

.hm-js [data-hm-rv] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s var(--hm-ease), transform .6s var(--hm-ease);
    transition-delay: calc(var(--i, 0) * 70ms);
}

.hm-js [data-hm-rv].is-in {
    opacity: 1;
    transform: none;
}

/* After the reveal, hover transitions run without the stagger delay */
.hm-js [data-hm-rv].is-done {
    transition-delay: 0ms;
}

.hm-js .hmServiceCard.is-done,
.hm-js .hmJourneyCard.is-done,
.hm-js .hmWin.is-done,
.hm-js .hmAudienceCard.is-done,
.hm-js .hmStackCard.is-done,
.hm-js .hmWhyCard.is-done {
    transition: transform .3s var(--hm-ease), box-shadow .3s ease, border-color .3s ease, background-color .3s ease;
}

@media (prefers-reduced-motion: no-preference) {
    .hmBadge--tl,
    .hmBadge--br {
        animation: hmFloat 4.8s ease-in-out infinite alternate;
    }

    .hmBadge--tr,
    .hmBadge--bl {
        animation: hmFloat 4.8s ease-in-out -2.4s infinite alternate;
    }

    .hmHeroRing {
        animation: hmSpinSlow 30s linear infinite;
        border-top-color: rgba(76, 218, 160, .5);
    }

    .hmMarqueeTrack {
        animation: hmMarquee 38s linear infinite;
    }

    .hmMarquee:hover .hmMarqueeTrack,
    .hmMarquee:focus-within .hmMarqueeTrack {
        animation-play-state: paused;
    }

    /* Occasional shine on the hero CTA only */
    .hmBtn--shine::after {
        content: '';
        position: absolute;
        top: 0;
        left: -60%;
        width: 40%;
        height: 100%;
        background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
        transform: skewX(-20deg);
        animation: hmShine 5.5s ease-in-out 1.5s infinite;
    }

    .hmFlowTab.is-on .hmFlowBar::after {
        transition: transform var(--hm-flow-dur) linear;
    }

    .hmFlow:not(.is-running) .hmFlowTab.is-on .hmFlowBar::after {
        transition: none;
    }

    .hmFlowPanel.is-on {
        animation: hmPanelIn .5s var(--hm-ease);
    }

    .hmBars i::after,
    .hmAb i::after {
        transform: scaleX(0);
        transition: transform 1.1s var(--hm-ease) .3s;
    }

    .is-in .hmBars i::after,
    .hmFlowPanel.is-on .hmAb i::after {
        transform: scaleX(1);
    }

    .hmPilot.is-now i {
        animation: hmPulse 1.8s ease-out infinite;
    }

    .hmOrbitChip {
        animation: hmChipIn .5s var(--hm-ease) backwards;
    }

    .hmOrbitChip:nth-child(3) { animation-delay: .06s; }
    .hmOrbitChip:nth-child(4) { animation-delay: .12s; }
    .hmOrbitChip:nth-child(5) { animation-delay: .18s; }
    .hmOrbitChip:nth-child(6) { animation-delay: .24s; }
    .hmOrbitChip:nth-child(7) { animation-delay: .3s; }
    .hmOrbitChip:nth-child(8) { animation-delay: .36s; }
}

/* Without the auto-advance (no JS timer), the active bar is simply full */
.hmFlow:not(.is-running) .hmFlowTab.is-on .hmFlowBar::after {
    transform: scaleX(1);
}

@keyframes hmFloat {
    to { transform: translateY(-8px); }
}

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

@keyframes hmMarquee {
    to { transform: translateX(-50%); }
}

@keyframes hmShine {
    0%, 70% { left: -60%; }
    100% { left: 130%; }
}

@keyframes hmPanelIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@keyframes hmPulse {
    0% { box-shadow: 0 0 0 0 rgba(67, 45, 146, .35); }
    100% { box-shadow: 0 0 0 10px rgba(67, 45, 146, 0); }
}

@keyframes hmChipIn {
    from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hm-js [data-hm-rv] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .hmPage *,
    .hmPage *::before,
    .hmPage *::after {
        transition-duration: .01ms !important;
        animation: none !important;
    }

    .hmServiceCard:hover,
    .hmJourneyCard:hover,
    .hmWin:hover,
    .hmAudienceCard:hover,
    .hmStackCard:hover,
    .hmWhyCard:hover,
    .hmChips li:hover,
    .hmLogo:hover,
    .hmPhiloList li:hover {
        transform: none;
    }

    /* Logos sit still: one centred, wrapping row and no duplicate copy */
    .hmMarquee {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .hmMarqueeTrack {
        flex-wrap: wrap;
        justify-content: center;
        width: auto;
    }

    .hmLogo[aria-hidden="true"] {
        display: none;
    }
}

/* ---------- 15. Responsive ---------- */
@media (max-width: 1199px) {
    .hmJourney {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hmJourneyCard::after {
        display: none;
    }

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

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

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

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

}

@media (max-width: 991px) {
    .hmSection,
    .hmEnquirySection {
        padding: 56px 0;
    }

    .hmHero {
        padding: 40px 0 56px;
    }

    .hmHeroGrid,
    .hmPhilo,
    .hmEnquiryGrid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hmHeroDuo {
        width: min(100%, 460px);
    }

    .hmAudience {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

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

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

    .hmPhiloPic {
        max-width: 560px;
    }

    .hmResearchBar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        padding: 22px 18px;
    }

    .hmResearchItem {
        padding: 0;
        border-right: none;
    }

    .hmResearchItem:nth-child(1),
    .hmResearchItem:nth-child(2) {
        padding-bottom: 16px;
        border-bottom: 1px solid var(--hm-line);
    }
}

@media (max-width: 767px) {
    .hmSection,
    .hmEnquirySection {
        padding: 44px 0;
    }

    .hmHead {
        margin-bottom: 26px;
    }

    .hmEyebrow {
        margin-bottom: 10px;
        font-size: 13px;
        letter-spacing: 2.5px;
    }

    .hmHead h2,
    .hmPhiloText h2,
    .hmEnquiryIntro h2 {
        font-size: 26px;
    }

    .hmHead p:not(.hmEyebrow),
    .hmPhiloText > p:not(.hmEyebrow),
    .hmEnquiryLead {
        font-size: 15px;
        line-height: 24px;
    }

    .hmHero {
        padding: 28px 0 44px;
    }

    .hmHeroGrid {
        gap: 30px;
    }

    .hmHeroContent h1 {
        font-size: 28px;
    }

    .hmHeroLead {
        font-size: 15px;
        line-height: 24px;
    }

    .hmHeroEyebrow {
        margin-bottom: 14px;
        font-size: 12px;
        letter-spacing: 1.8px;
    }

    .hmHeroFeatures {
        gap: 8px;
        margin-bottom: 22px;
    }

    .hmHeroFeature {
        font-size: 14px;
    }

    .hmHeroCtas {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .hmHeroCtas .hmBtn--primary {
        grid-column: 1 / -1;
    }

    .hmBtn {
        padding: 12px 16px;
        font-size: 15px;
    }

    .hmHeroProof {
        gap: 8px 16px;
    }

    .hmHeroProof li {
        font-size: 13.5px;
    }

    .hmHeroRing {
        top: -14px;
        right: -8px;
        width: 100px;
        height: 100px;
        border-width: 12px;
    }

    .hmHeroLines {
        left: -8px;
        bottom: 20px;
        width: 100px;
        height: 60px;
    }

    .hmDeskOnly {
        display: none !important;
    }

    .hmMobOnly {
        display: inline-flex !important;
    }

    .hmConnectedBar {
        padding: 8px 12px;
        border-radius: 20px;
        overflow-x: auto;
        justify-content: flex-start;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .hmConnectedBar::-webkit-scrollbar {
        display: none;
    }

    .hmConnectedStep {
        padding: 6px 10px;
        min-height: 44px;
    }

    .hmConnectedStep b {
        font-size: 13px;
    }

    .hmResearchBar {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        margin-top: 24px;
        padding: 18px 16px;
        border-radius: 16px;
    }

    .hmResearchItem {
        padding: 0 0 14px;
        border-right: none;
        border-bottom: 1px solid var(--hm-line);
    }

    .hmResearchItem:nth-child(1),
    .hmResearchItem:nth-child(2) {
        padding-bottom: 14px;
        border-bottom: 1px solid var(--hm-line);
    }

    .hmResearchItem:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }

    .hmResearchStat {
        font-size: 32px;
    }



    /* Swipe carousels: journey, services, clinic UI */
    .hmCarousel [data-hm-track] {
        display: flex;
        gap: 14px;
        margin-inline: calc(-1 * var(--hm-gutter));
        padding: 4px var(--hm-gutter) 14px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--hm-gutter);
        scrollbar-width: none;
    }

    .hmCarousel [data-hm-track]::-webkit-scrollbar {
        display: none;
    }

    .hmCarousel [data-hm-track] > * {
        flex: 0 0 86%;
        scroll-snap-align: start;
    }

    .hm-js .hmCarousel [data-hm-track] > [data-hm-rv] {
        opacity: 1;
        transform: none;
    }

    .hmCarousel [data-hm-track]:focus-visible {
        outline: 2px solid var(--hm-violet);
        outline-offset: -2px;
    }

    .hmCarouselNav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        margin-top: 6px;
    }

    .hmCarouselBtn {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border: 1px solid var(--hm-line);
        border-radius: 50%;
        background: #fff;
        color: var(--hm-violet);
        cursor: pointer;
        box-shadow: 0 8px 16px -12px rgba(40, 26, 110, .5);
    }

    .hmCarouselBtn svg {
        width: 20px;
        height: 20px;
    }

    .hmCarouselBtn:disabled {
        opacity: .4;
        cursor: default;
    }

    .hmCarouselDots {
        display: flex;
        gap: 6px;
    }

    .hmCarouselDots i,
    .hmCarouselDots button {
        display: block;
        width: 7px;
        height: 7px;
        padding: 0;
        border: 0;
        border-radius: 4px;
        background: #d9d3f3;
        transition: width .25s ease, background-color .25s ease;
        cursor: pointer;
    }

    .hmCarouselDots i.is-on,
    .hmCarouselDots button.is-on {
        width: 20px;
        background: var(--hm-violet);
    }

    .hmCarouselDots button {
        display: grid;
        place-items: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: transparent;
    }

    .hmCarouselDots button::before {
        content: '';
        width: 7px;
        height: 7px;
        border-radius: 4px;
        background: #d9d3f3;
        transition: width .25s ease, background-color .25s ease;
    }

    .hmCarouselDots button.is-on::before {
        width: 20px;
        background: var(--hm-violet);
    }

    .hmCarouselDots button:focus-visible {
        outline: 2px solid var(--hm-violet);
        outline-offset: 1px;
    }

    .hmJourneyCard,
    .hmServiceCard {
        padding: 20px;
    }

    .hmJourneyCard:hover,
    .hmServiceCard:hover,
    .hmWin:hover {
        transform: none;
    }

    .hmServiceCard h3,
    .hmJourneyCard h3,
    .hmAudienceCard h3,
    .hmWhyCard h3 {
        font-size: 17.5px;
    }

    .hmServiceCard > p,
    .hmJourneyCard p,
    .hmAudienceCard p,
    .hmWhyCard p {
        font-size: 14.5px;
        line-height: 23px;
    }

    .hmPhiloPic {
        margin: 0 0 0 10px;
    }

    .hmPhiloPic::before {
        inset: 10px 10px -10px -10px;
    }

    .hmPhiloCap {
        left: 12px;
        bottom: 12px;
        max-width: calc(100% - 24px);
        font-size: 13.5px;
    }

    .hmPhiloList {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .hmPhiloList li {
        padding: 11px 12px;
        font-size: 15px;
    }

    .hmAudienceCard {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 4px 14px;
        padding: 18px;
    }

    .hmAudienceIcon {
        grid-row: span 2;
        width: 48px;
        height: 48px;
        margin: 0;
        border-radius: 14px;
    }

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

    .hmAudienceCard h3 {
        margin: 0;
    }

    .hmStackHead {
        margin-top: 32px;
        padding-top: 22px;
    }

    .hmStackHead h3 {
        font-size: 19px;
    }

    .hmStackHead span {
        font-size: 14px;
    }

    .hmStack {
        gap: 12px;
    }

    .hmStackName {
        padding: 10px 12px;
        font-size: 14px;
    }

    .hmStackName svg {
        width: 15px;
        height: 15px;
    }

    .hmLogo {
        height: 76px;
        padding: 10px 18px;
    }

    .hmLogo img {
        max-width: 130px;
        max-height: 48px;
    }

    .hmChips {
        gap: 8px;
    }

    .hmChips li {
        gap: 8px;
        padding: 5px 13px 5px 5px;
        font-size: 13.5px;
    }

    .hmChips li svg {
        width: 30px;
        height: 30px;
        padding: 7px;
    }

    .hmWhyGrid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .hmWhyCard {
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 4px 14px;
        padding: 18px;
    }

    .hmWhyIcon {
        grid-row: span 2;
        width: 46px;
        height: 46px;
        margin: 0;
        border-radius: 13px;
    }

    .hmWhyIcon svg {
        width: 21px;
        height: 21px;
    }

    .hmWhyNum {
        top: 12px;
        right: 14px;
        font-size: 30px;
    }

    .hmWhyCard h3 {
        margin: 0;
    }

    .hmFlow {
        padding: 14px;
        border-radius: 20px;
    }

    .hmFlowRail {
        display: flex;
        gap: 8px;
        margin: 0 -14px 18px;
        padding: 2px 14px 6px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .hmFlowRail::-webkit-scrollbar {
        display: none;
    }

    .hmFlowTab {
        flex: 0 0 auto;
        min-width: 118px;
        min-height: 58px;
        padding: 9px 12px 13px;
        scroll-snap-align: start;
    }

    .hmFlowTab span {
        font-size: 14.5px;
        white-space: nowrap;
    }

    .hmFlowPanel {
        gap: 18px;
    }

    .hmFlowText h3 {
        font-size: 20px;
    }

    .hmFlowText p {
        font-size: 15px;
        line-height: 24px;
    }

    .hmFlowUi {
        min-height: 0;
        padding: 20px 14px;
    }

    .hmOrbit {
        width: 280px;
    }

    .hmOrbitChip {
        padding: 5px 10px;
        font-size: 12px;
        transform: translate(-50%, -50%) rotate(var(--a)) translateX(108px) rotate(calc(-1 * var(--a)));
    }

    .hmOrbitCore {
        width: 96px;
        height: 96px;
        font-size: 13px;
    }

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

    .hmFormCard .cgx-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hmFormTitle {
        font-size: 21px;
    }

    .hmFaqBtn {
        padding: 14px 16px;
        font-size: 15.5px;
    }

    .hmFaqAnsInner {
        padding: 0 16px;
    }

    .hmFaqAnsInner p {
        padding-bottom: 16px;
        font-size: 14.5px;
        line-height: 23px;
    }

    .hmFaqCta {
        padding: 18px;
    }

    .hmFaqCta > div {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }
}

@media (max-width: 390px) {
    .hmHeroContent h1 {
        font-size: 26px;
    }

    .hmHead h2,
    .hmPhiloText h2,
    .hmEnquiryIntro h2 {
        font-size: 24px;
    }

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

    .hmBadgeText span {
        display: none;
    }

    .hmFormCard {
        padding: 20px 16px;
    }

    .hmOrbit {
        width: 264px;
    }

    .hmOrbitChip {
        transform: translate(-50%, -50%) rotate(var(--a)) translateX(100px) rotate(calc(-1 * var(--a)));
    }

    .hmConnectedBar {
        padding: 6px 10px;
    }

    .hmConnectedStep {
        gap: 6px;
        padding: 4px 6px;
    }

    .hmConnectedStep b {
        font-size: 12.5px;
    }

    .hmConnectedLine {
        min-width: 14px;
        margin: 0 4px;
    }
}

@media (max-width: 360px) {
    .hmHeroFeature {
        font-size: 13.5px;
    }

    .hmConnectedStep b {
        font-size: 11.5px;
    }

    .hmResearchStat {
        font-size: 28px;
    }

    .hmBtn {
        padding: 11px 14px;
        font-size: 14px;
    }

    .hmStack {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px;
    }

    .hmStackName {
        font-size: 13px;
    }

    .hmFaqCta > div {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Late fixes ---------- */
.hmAudienceCard h3,
.hmAudienceCard p {
    z-index: 1;
}

.hmAudienceCard::after {
    z-index: 0;
}

.hmVis--ad i {
    display: none;
}

/* Keep any reCAPTCHA status text inside its zero-size holder */
.hmFormCard #recaptcha-holder {
    overflow: hidden;
}

/* Owner-review polish: phone hero crop, decor behind cards, textarea counter space */
#why-choose-us .hmDeco{z-index:0}
#why-choose-us .hmWrap{position:relative;z-index:1}
#enquiry textarea{padding-bottom:30px}

/* Responsive polish for hero dual images and CTAs */
@media (max-width: 767px) {
    .hmHeroDuo {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: center;
        gap: 12px;
        width: 100%;
        max-width: 420px;
        margin: 0 auto 24px;
        padding-bottom: 0;
    }

    .hmHeroPic--first,
    .hmHeroPic--second {
        width: 100%;
        margin-top: 0 !important;
        margin-left: 0 !important;
        border: 2px solid #fff;
        transform: none !important;
    }

    .hmHeroPic {
        border-radius: 14px;
    }

    .hmHeroCtas {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .hmHeroCtas .hmBtn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .hmHeroDuo {
        gap: 8px;
        max-width: 320px;
    }

    .hmHeroPic {
        border-radius: 12px;
    }
}

/* ---------- Owner review batch 2 (2026-10-20) ---------- */
/* Hero: H1 on one line, CTA buttons on one line (sized to the column) */
.hmHeroContent,
.hmEnquiryIntro {
    container-type: inline-size;
}

@media (min-width: 768px) {
    .hmHeroContent h1 {
        font-size: max(22px, min(32px, 4.05cqi));
        text-wrap: balance;
    }

    .hmEnquiryIntro h2 {
        font-size: max(24px, min(32px, 5.3cqi));
        text-wrap: balance;
    }

    .hmHeroCtas {
        flex-wrap: nowrap;
        gap: min(12px, 1.8cqi);
    }

    .hmHeroCtas .hmBtn {
        flex: 0 1 auto;
        padding-inline: min(26px, 3.4cqi);
        font-size: min(16px, 2.45cqi);
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .hmHeroCtas .hmBtn--outline {
        display: none;
    }

    .hmHeroCtas .hmBtn {
        font-size: min(16px, 3.3cqi);
        padding-inline: min(26px, 4.4cqi);
    }
}

@media (max-width: 767px) {
    .hmHeroContent h1,
    .hmEnquiryIntro h2 {
        text-wrap: balance;
    }

    .hmHeroCtas,
    .hmHeroCtas[data-sticky-after] {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .hmHeroCtas .hmBtn {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        padding: 12px min(14px, 3.2cqi);
        font-size: min(15px, 3.9cqi);
    }

    .hmHeroCtas .hmBtn--outline {
        display: none;
    }
}

/* Philosophy: CTA under the list */
.hmPhiloCta {
    margin-top: 28px;
}

/* Enquiry form: same look as the homepage form (.hpForm) */
.hmFormCard {
    width: 100%;
    padding: 28px;
    border-radius: 20px;
}

.hmFormTitle {
    font-size: 22px;
}

.hmFormCard .cgx-form-grid {
    gap: 12px 14px;
}

.hmFormCard .cgx-field-group {
    height: 48px;
    border: 1px solid #dfe1ec;
    border-radius: 12px;
    background: #fbfbfe;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.hmFormCard .cgx-field-group:focus-within {
    border-color: var(--hm-violet-2);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(91, 63, 208, .12);
}

.hmFormCard .cgx-field-input,
.hmFormCard .cgx-dialcode-input,
.hmFormCard .cgx-field-select,
.hmFormCard .cgx-field-textarea {
    border: 0;
    background: transparent;
    box-shadow: none !important;
    font-family: var(--hm-text);
    font-size: 13.5px;
    font-weight: 400;
    color: var(--hm-ink);
}

.hmFormCard .cgx-field-input,
.hmFormCard .cgx-field-select {
    padding-left: 42px;
}

.hmFormCard .cgx-field-input::placeholder,
.hmFormCard .cgx-dialcode-input::placeholder,
.hmFormCard .cgx-field-textarea::placeholder {
    font-size: 13.5px !important;
    font-weight: 400;
    color: #94a3b8 !important;
    opacity: 1;
}

.hmFormCard .cgx-field-icon,
.hmFormCard .cgx-dialcode-icon,
.hmFormCard .cgx-field-select-arrow {
    color: var(--hm-muted);
}

.hmFormCard .cgx-field-icon {
    top: 14px;
    left: 14px;
}

.hmFormCard svg.cgx-field-icon,
.hmFormCard svg.cgx-dialcode-icon,
.hmFormCard svg.cgx-field-select-arrow {
    display: block;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hmFormCard svg.cgx-field-select-arrow {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    color: #868b9b;
}

.hmFormCard .cgx-field-group:focus-within .cgx-field-icon,
.hmFormCard .cgx-field-group:focus-within .cgx-dialcode-icon {
    color: var(--hm-violet-2);
}

.hmFormCard .cgx-dialcode-box {
    flex: 0 0 84px;
    gap: 6px;
    padding: 0 4px 0 15px;
    border-right: 1px solid #dfe1ec;
    border-radius: 12px 0 0 12px;
    background: transparent;
}

.hmFormCard .cgx-dialcode-icon {
    color: var(--hm-muted);
}

.hmFormCard .cgx-dialcode-input {
    width: 100%;
    padding: 0;
    text-align: left;
}

.hmFormCard .cgx-phone-input {
    padding-left: 12px;
}

.hmFormCard .cgx-field-textarea-group {
    height: 72px;
    min-height: 72px;
}

.hmFormCard .cgx-field-textarea-group .cgx-field-icon {
    top: 13px;
}

.hmFormCard .cgx-field-textarea {
    height: 70px;
    min-height: 62px;
    padding: 10px 14px 20px 42px;
    resize: none;
}

.hmFormCard .cgx-char-counter {
    font-size: 11.5px;
    font-weight: 400;
    color: #6b7080;
}

.hmFormCard .cgx-submit-btn {
    min-height: 50px;
    margin-top: 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f9577c 0%, #f9758f 100%);
    box-shadow: 0 6px 18px -6px rgba(249, 87, 124, .32);
    font-family: var(--hm-heading);
    font-size: 16px;
    font-weight: 500;
}

.hmFormCard .cgx-submit-btn:hover,
.hmFormCard .cgx-submit-btn:focus-visible {
    background: linear-gradient(135deg, #ea4269 0%, #f85f7c 100%);
    box-shadow: 0 10px 22px -6px rgba(249, 87, 124, .42);
}

.hmFormCard .cgx-captcha-legal {
    margin-top: 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #6b7080;
}

@media (max-width: 767px) {
    .hmFormCard {
        padding: 20px 16px;
        border-radius: 16px;
    }

    .hmFormCard .cgx-field-input,
    .hmFormCard .cgx-dialcode-input,
    .hmFormCard .cgx-field-select,
    .hmFormCard .cgx-field-textarea {
        font-size: 16px; /* 16px stops iPhones zooming into the field */
    }

    .hmFormCard .cgx-dialcode-icon {
        display: inline-block;
    }

    .hmFormCard .cgx-field-textarea-group {
        height: 64px;
        min-height: 64px;
    }

    .hmFormCard .cgx-field-textarea {
        height: 62px;
        padding-top: 9px;
        padding-bottom: 18px;
        padding-right: 58px; /* Mobile QA: keep text clear of the 0/500 counter */
    }
}

/* Free consultation: soft dots + circles like the homepage Let's Talk box (owner batch 4) */
.hmEnquirySection {
    background:
        radial-gradient(rgba(255, 255, 255, .09) 1.3px, transparent 1.6px) 0 0 / 18px 18px,
        var(--hm-violet);
}

/* Dots fade out towards the form side, as on the homepage */
.hmEnquirySection::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent 0%, var(--hm-violet) 55%);
}

.hmEnquirySection .hmDeco--ringR {
    top: -170px;
    right: auto;
    left: 34%;
    width: 340px;
    height: 340px;
    border: 0;
    background: rgba(255, 255, 255, .06);
}

.hmEnquirySection .hmDeco--discL {
    bottom: -120px;
    left: -90px;
    width: 240px;
    height: 240px;
}

.hmEnquirySection .hmDeco--lines {
    display: none;
}

@media (max-width: 640px) {
    .hmHeroDuo {
        margin-bottom: 12px;
    }

    .hmHeroFeatures {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        margin-bottom: 14px;
    }

    .hmHeroFeature {
        align-items: flex-start;
        line-height: 1.45;
    }

    .hmHeroCtas {
        margin-bottom: 0;
    }

    #partners .hmClientsBadge {
        display: none;
    }

    #faq .hmHead p:not(.hmEyebrow) {
        max-width: 35em;
        font-size: 13px;
        line-height: 20px;
    }
}