/* +===================================================================+
       |  CSS - fwhp-ai                                                    |
       |  Desktop: full-bleed ×310 (1200-unit axis) | ≤1024: vertical    |
       +===================================================================+ */

    /* ── 1. CSS VARIABLES ── */
    
    
    /* ── 3. SECTION LAYOUT & HEADER ── */
    .fwhp-ai-section {
      width: 100%; min-height: 45vh; background: var(--g0);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      padding: 36px 0; position: relative;
    }
    .fwhp-ai-section::before, .fwhp-ai-section::after {
      content: ''; position: absolute; left: 5%; right: 5%; height: 1px;
      background: linear-gradient(90deg, transparent, var(--g2), transparent);
    }
    .fwhp-ai-section::before { top: 0; } .fwhp-ai-section::after { bottom: 0; }

    .fwhp-ai-wrap { width: 100%; padding: 0 28px; position: relative; z-index: 2; }
    .fwhp-ai-header { text-align: center; margin-bottom: 0; }
    .fwhp-ai-badge {
      display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px;
      background: var(--pu-l); border-radius: 100px; font-size: 10px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 2px; color: var(--pu); margin-bottom: 12px;
    }
    .fwhp-ai-badge i { font-size: 11px; }
    .fwhp-ai-h2 { font-size: 38px; font-weight: 200; line-height: 1.1; letter-spacing: -1.5px; }
    .fwhp-ai-h2 b { font-weight: 700; }
    #fwhp-ai-accent { transition: color .4s ease; }
    .fwhp-ai-sub { font-size: 14px; color: var(--g5); font-weight: 300; margin-top: 8px; }

    /* ── 4. DESKTOP HORIZONTAL TIMELINE (full-bleed × 310) ── */
    /* ================================================================
       DESKTOP: horizontal stage, full width of the house gutters.
       No max-width: every horizontal position is a point on a 1200-unit
       axis (--x) and is placed as a percentage of the stage, so the line,
       segments, dots, badges and copy stretch together. home.js §1.3
       swims along the same 1200-unit axis and writes its left in %, so
       the swimmer stays registered with the dots at any width.
       ================================================================ */
    .fwhp-ai-scroll { width: 100%; }
    .fwhp-ai-stage { position: relative; width: 100%; height: 310px; }
    .fwhp-ai-stage [data-n="0"]{--x:100}.fwhp-ai-stage [data-n="1"]{--x:300}
    .fwhp-ai-stage [data-n="2"]{--x:500}.fwhp-ai-stage [data-n="3"]{--x:700}
    .fwhp-ai-stage [data-n="4"]{--x:900}.fwhp-ai-stage [data-n="5"]{--x:1100}

    /* — 4a. Track line — 60→1140 of 1200 */
    .fwhp-ai-track { position: absolute; top: 150px; left: 5%; width: 90%; height: 3px; background: #D1D3D4; border-radius: 1.5px; z-index: 1; }

    /* — 4b. Colored segments — 120 of 1200, centred on the step */
    .fwhp-ai-seg { position: absolute; top: 149px; height: 5px; width: 10%; left: calc(var(--x) * 100% / 1200 - 5%); border-radius: 2px; z-index: 2; }
    .fwhp-ai-seg[data-n="0"]{background:var(--pk)}
    .fwhp-ai-seg[data-n="1"]{background:var(--bl)}
    .fwhp-ai-seg[data-n="2"]{background:var(--go)}
    .fwhp-ai-seg[data-n="3"]{background:var(--co)}
    .fwhp-ai-seg[data-n="4"]{background:var(--pu)}
    .fwhp-ai-seg[data-n="5"]{background:var(--tl)}

    /* — 4c. Dots on line — */
    .fwhp-ai-dot { position: absolute; top: 144px; width: 14px; height: 14px; left: calc(var(--x) * 100% / 1200 - 7px); border-radius: 50%; z-index: 5; }
    .fwhp-ai-dot[data-n="0"]{background:var(--pk)}
    .fwhp-ai-dot[data-n="1"]{background:var(--bl)}
    .fwhp-ai-dot[data-n="2"]{background:var(--go)}
    .fwhp-ai-dot[data-n="3"]{background:var(--co)}
    .fwhp-ai-dot[data-n="4"]{background:var(--pu)}
    .fwhp-ai-dot[data-n="5"]{background:var(--tl)}

    /* — 4d. Double pulse rings — */
    .fwhp-ai-pulse, .fwhp-ai-pulse2 {
      position: absolute; top: 144px; width: 14px; height: 14px; left: calc(var(--x) * 100% / 1200 - 7px);
      border-radius: 50%; z-index: 4; opacity: 0.12; animation: fwhp-ai-pls 3s infinite;
    }
    .fwhp-ai-pulse2 { animation: fwhp-ai-pls2 3s infinite; }
    .fwhp-ai-pulse[data-n="0"]{background:var(--pk)}
    .fwhp-ai-pulse[data-n="1"]{background:var(--bl);animation-delay:.5s}
    .fwhp-ai-pulse[data-n="2"]{background:var(--go);animation-delay:1s}
    .fwhp-ai-pulse[data-n="3"]{background:var(--co);animation-delay:1.5s}
    .fwhp-ai-pulse[data-n="4"]{background:var(--pu);animation-delay:2s}
    .fwhp-ai-pulse[data-n="5"]{background:var(--tl);animation-delay:2.5s}
    .fwhp-ai-pulse2[data-n="0"]{background:var(--pk);animation-delay:.4s}
    .fwhp-ai-pulse2[data-n="1"]{background:var(--bl);animation-delay:.9s}
    .fwhp-ai-pulse2[data-n="2"]{background:var(--go);animation-delay:1.4s}
    .fwhp-ai-pulse2[data-n="3"]{background:var(--co);animation-delay:1.9s}
    .fwhp-ai-pulse2[data-n="4"]{background:var(--pu);animation-delay:2.4s}
    .fwhp-ai-pulse2[data-n="5"]{background:var(--tl);animation-delay:2.9s}
    @keyframes fwhp-ai-pls { 0%,100%{transform:scale(1);opacity:.15} 50%{transform:scale(2.4);opacity:0} }
    @keyframes fwhp-ai-pls2 { 0%,100%{transform:scale(1);opacity:.10} 50%{transform:scale(3);opacity:0} }

    /* — 4e. Timeline groups (zero-width positioned) — */
    .fwhp-ai-grp {
      position: absolute; top: 0; width: 0; height: 310px; z-index: 10;
      opacity: 0; transform: translateY(12px);
      transition: opacity .5s cubic-bezier(.25,1,.5,1), transform .5s cubic-bezier(.25,1,.5,1);
    }
    .fwhp-ai-grp.fwhp-ai-vis { opacity: 1; transform: translateY(0); }
    .fwhp-ai-grp { left: calc(var(--x) * 100% / 1200); }
    .fwhp-ai-grp[data-x="100"]{--x:100}.fwhp-ai-grp[data-x="300"]{--x:300}
    .fwhp-ai-grp[data-x="500"]{--x:500}.fwhp-ai-grp[data-x="700"]{--x:700}
    .fwhp-ai-grp[data-x="900"]{--x:900}.fwhp-ai-grp[data-x="1100"]{--x:1100}
    .fwhp-ai-grp[data-c="pk"]{color:var(--pk)}.fwhp-ai-grp[data-c="bl"]{color:var(--bl)}
    .fwhp-ai-grp[data-c="go"]{color:var(--go)}.fwhp-ai-grp[data-c="mt"]{color:var(--co)}
    .fwhp-ai-grp[data-c="pu"]{color:var(--pu)}.fwhp-ai-grp[data-c="tl"]{color:var(--tl)}

    /* — 4f. Vertical line segment (mobile only, hidden on desktop) — */
    /* Vertical line segment — hidden on desktop, shown on mobile */
    .fwhp-ai-vline { display: none; }

    /* — 4g. Teardrop badges — */
    .fwhp-ai-tear {
      position: absolute; width: 64px; height: 64px; transform: translate(-50%, -50%);
      display: flex; align-items: center; justify-content: center;
      filter: drop-shadow(0 3px 8px rgba(15,23,42,0.06)) drop-shadow(0 1px 2px rgba(15,23,42,0.04));
      transition: filter .4s, transform .4s;
    }
    .fwhp-ai-grp:hover .fwhp-ai-tear {
      filter: drop-shadow(0 10px 24px rgba(15,23,42,0.14)) drop-shadow(0 2px 4px rgba(15,23,42,0.06));
      transform: translate(-50%, calc(-50% - 3px));
    }
    .fwhp-ai-tear--up { top: 78px; }
    .fwhp-ai-tear--dn { top: 225px; }

    .fwhp-ai-tear-bg { position: absolute; width: 58px; height: 58px; opacity: 0.45; }
    .fwhp-ai-tear-fg { position: absolute; width: 52px; height: 52px; }
    .fwhp-ai-tear--up .fwhp-ai-tear-bg, .fwhp-ai-tear--up .fwhp-ai-tear-fg { border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
    .fwhp-ai-tear--up .fwhp-ai-tear-bg { background: linear-gradient(135deg, #fff, #D1D3D4); }
    .fwhp-ai-tear--up .fwhp-ai-tear-fg { background: linear-gradient(135deg, #D1D3D4, #fff); }
    .fwhp-ai-tear--dn .fwhp-ai-tear-bg, .fwhp-ai-tear--dn .fwhp-ai-tear-fg { border-radius: 0 50% 50% 50%; transform: rotate(45deg); }
    .fwhp-ai-tear--dn .fwhp-ai-tear-bg { background: linear-gradient(135deg, #D1D3D4, #fff); }
    .fwhp-ai-tear--dn .fwhp-ai-tear-fg { background: linear-gradient(135deg, #fff, #D1D3D4); }

    /* — 4h. Inner circle + ring — */
    .fwhp-ai-tear-inner { position: absolute; width: 42px; height: 42px; background: #E6E7E8; border-radius: 50%; z-index: 2; }
    .fwhp-ai-tear-ring { position: absolute; width: 42px; height: 42px; border: 1.5px solid currentColor; border-radius: 50%; z-index: 3; }
    .fwhp-ai-tear i { position: absolute; z-index: 4; font-size: 14px; color: currentColor; }

    /* — 4i. Title + Description positioning — */
    .fwhp-ai-title, .fwhp-ai-desc { position: absolute; left: 0; text-align: center; white-space: nowrap; transition: transform .3s ease; }
    .fwhp-ai-title { font-size: 12px; font-weight: 700; color: currentColor; }
    .fwhp-ai-desc { font-size: clamp(10px, 0.9vw, 12px); font-weight: 300; color: #808285; line-height: 1.5; letter-spacing: 0.1px; }
    .fwhp-ai-title--above { top: 136px; transform: translate(-50%, -100%); }
    .fwhp-ai-desc--below { top: 170px; transform: translate(-50%, 0); }
    .fwhp-ai-title--below { top: 164px; transform: translate(-50%, 0); }
    .fwhp-ai-desc--above { top: 138px; transform: translate(-50%, -100%); }
    .fwhp-ai-grp:hover .fwhp-ai-title--above { transform: translate(-50%, calc(-100% - 2px)); }
    .fwhp-ai-grp:hover .fwhp-ai-desc--below { transform: translate(-50%, 2px); }
    .fwhp-ai-grp:hover .fwhp-ai-title--below { transform: translate(-50%, 2px); }
    .fwhp-ai-grp:hover .fwhp-ai-desc--above { transform: translate(-50%, calc(-100% - 2px)); }

    /* — 4j. Sperm traveler (head + tail joints) — */
    .fwhp-ai-sperm { position: absolute; width: 10px; height: 9px; transform: translate(-5px, -4.5px); z-index: 50; display: flex; align-items: center; }
    .fwhp-ai-sperm-head { position: absolute; width: 11px; height: 8px; background: currentColor; z-index: 2; right: 0; border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%; transform: rotate(-2deg); }
    .fwhp-ai-joint { position: absolute; height: 1.8px; background: currentColor; border-radius: 1px; transform-origin: right center; opacity: 0.6; }
    .fwhp-ai-j1 { right: 8px; width: 8px; animation: fwhp-ai-w1 .4s infinite alternate ease-in-out; }
    .fwhp-ai-j2 { right: 100%; width: 7px; animation: fwhp-ai-w2 .4s infinite alternate ease-in-out; }
    .fwhp-ai-j3 { right: 100%; width: 6px; animation: fwhp-ai-w1 .4s infinite alternate ease-in-out; }
    @keyframes fwhp-ai-w1 { 0%{transform:rotate(-25deg)} 100%{transform:rotate(25deg)} }
    @keyframes fwhp-ai-w2 { 0%{transform:rotate(40deg)} 100%{transform:rotate(-40deg)} }

    /* — 4k. Impact glow ring — */
    .fwhp-ai-glow { position: absolute; border: 2px solid currentColor; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 10; }

    /* — 4l. Scroll reveal animations — */
    .fwhp-ai-reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s cubic-bezier(.25,1,.5,1), transform .6s cubic-bezier(.25,1,.5,1); }
    .fwhp-ai-vis { opacity: 1; transform: translateY(0); }

    /* ── 5. RESPONSIVE: LARGE DESKTOP (>1440px) ── */
    @media(min-width:1441px){ .fwhp-ai-section{padding:44px 0}.fwhp-ai-h2{font-size:42px} }

    /* ── 6. RESPONSIVE: MOBILE/TABLET VERTICAL TIMELINE (≤1024px) ── */
    /* ================================================================
       MOBILE / TABLET ≤1024px — VERTICAL TIMELINE
       Center line runs top-to-bottom at 50%
       Odd steps (1,3,5): icon LEFT, desc RIGHT
       Even steps (2,4,6): icon RIGHT, desc LEFT
       ================================================================ */
    @media(max-width:1024px){
      .fwhp-ai-section { padding: 32px 0; min-height: auto; }
      .fwhp-ai-h2 { font-size: 30px; letter-spacing: -1px; }
      .fwhp-ai-sub { font-size: 12px; }
      .fwhp-ai-sub br { display: none; }

      .fwhp-ai-scroll { overflow: visible; }
      .fwhp-ai-stage { width: 100%; height: auto; position: relative; padding: 24px 0; }

      /* Vertical center line */
      .fwhp-ai-track {
        top: 0; bottom: 0; left: 50%; width: 3px; height: 100%;
        transform: translateX(-50%);
      }

      /* Hide horizontal elements */
      .fwhp-ai-seg, .fwhp-ai-dot, .fwhp-ai-pulse, .fwhp-ai-pulse2 { display: none; }

      /* Vertical colored segment on center line */
      .fwhp-ai-grp .fwhp-ai-vline {
        display: block; position: absolute; left: 50%; top: 50%;
        width: 5px; height: 50px; border-radius: 3px;
        background: currentColor; z-index: 2;
        transform: translate(-50%, -50%);
      }

      /* Groups become flow items */
      .fwhp-ai-grp {
        position: relative; width: 100%; height: auto;
        left: auto !important; top: auto;
        display: flex; align-items: center;
        padding: 20px 0; opacity: 0;
        transform: translateY(16px);
        min-height: 80px;
      }
      .fwhp-ai-grp.fwhp-ai-vis { opacity: 1; transform: translateY(0); }

      /* Vertical dot on center line */
      .fwhp-ai-grp::before {
        content: ''; position: absolute; left: 50%;
        width: 14px; height: 14px; border-radius: 50%;
        background: currentColor; z-index: 6;
        transform: translateX(-50%);
      }
      /* Pulse ring */
      .fwhp-ai-grp::after {
        content: ''; position: absolute; left: 50%;
        width: 14px; height: 14px; border-radius: 50%;
        background: currentColor; z-index: 5;
        margin-left: -7px;
        animation: fwhp-ai-pls 3s infinite;
      }

      /* Reset teardrops */
      .fwhp-ai-tear { position: relative; top: auto !important; transform: none; flex-shrink: 0; width: 54px; height: 54px; }
      .fwhp-ai-grp:hover .fwhp-ai-tear { transform: none; }
      .fwhp-ai-tear-bg { width: 48px; height: 48px; }
      .fwhp-ai-tear-fg { width: 42px; height: 42px; }
      .fwhp-ai-tear-inner { width: 34px; height: 34px; }
      .fwhp-ai-tear-ring { width: 34px; height: 34px; }

      /* UP steps (1,3,5): icon LEFT, text RIGHT */
      .fwhp-ai-grp[data-dir="up"] .fwhp-ai-micon {
        position: absolute; left: 0; width: calc(50% - 36px);
        display: flex; justify-content: flex-end; align-items: center;
      }
      .fwhp-ai-grp[data-dir="up"] .fwhp-ai-mcontent {
        margin-left: calc(50% + 18px); text-align: left; padding-right: 8px;
      }
      .fwhp-ai-grp[data-dir="up"] .fwhp-ai-tear-bg,
      .fwhp-ai-grp[data-dir="up"] .fwhp-ai-tear-fg {
        border-radius: 50% 50% 0 50% !important;
        transform: rotate(-45deg) !important;
      }
      .fwhp-ai-grp[data-dir="up"] .fwhp-ai-tear-bg { background: linear-gradient(135deg, #fff, #D1D3D4) !important; }
      .fwhp-ai-grp[data-dir="up"] .fwhp-ai-tear-fg { background: linear-gradient(135deg, #D1D3D4, #fff) !important; }

      /* DN steps (2,4,6): icon RIGHT, text LEFT */
      .fwhp-ai-grp[data-dir="dn"] .fwhp-ai-micon {
        position: absolute; right: 0; width: calc(50% - 36px);
        display: flex; justify-content: flex-start; align-items: center;
      }
      .fwhp-ai-grp[data-dir="dn"] .fwhp-ai-mcontent {
        margin-right: calc(50% + 18px); text-align: right; margin-left: 0; padding-left: 8px;
      }
      .fwhp-ai-grp[data-dir="dn"] .fwhp-ai-tear-bg,
      .fwhp-ai-grp[data-dir="dn"] .fwhp-ai-tear-fg {
        border-radius: 50% 50% 50% 0 !important;
        transform: rotate(45deg) !important;
      }
      .fwhp-ai-grp[data-dir="dn"] .fwhp-ai-tear-bg { background: linear-gradient(135deg, #D1D3D4, #fff) !important; }
      .fwhp-ai-grp[data-dir="dn"] .fwhp-ai-tear-fg { background: linear-gradient(135deg, #fff, #D1D3D4) !important; }

      /* Title + desc flow */
      .fwhp-ai-title, .fwhp-ai-desc {
        position: relative; top: auto; left: auto;
        transform: none !important; white-space: normal;
      }
      .fwhp-ai-mcontent { display: flex; flex-direction: column; gap: 3px; }
      .fwhp-ai-mcontent .fwhp-ai-title { order: 1; }
      .fwhp-ai-mcontent .fwhp-ai-desc { order: 2; }
      .fwhp-ai-title { font-size: 13px; }
      .fwhp-ai-desc { font-size: 11px; line-height: 1.45; }
      .fwhp-ai-desc br { display: none; }

      /* Sperm hidden — JS creates vertical */
      .fwhp-ai-sperm { display: none; }
    }

    /* ── 7. RESPONSIVE: TABLET PORTRAIT (≤768px) ── */
    /* ═══ TABLET PORTRAIT (601-768px) ═══ */
    @media(max-width:768px){
      .fwhp-ai-section { padding: 28px 0; }
      .fwhp-ai-wrap { padding: 0 14px; }
      .fwhp-ai-h2 { font-size: 28px; }
      .fwhp-ai-grp { padding: 16px 0; min-height: 72px; }
      .fwhp-ai-tear { width: 50px; height: 50px; }
      .fwhp-ai-tear-bg { width: 44px; height: 44px; }
      .fwhp-ai-tear-fg { width: 38px; height: 38px; }
      .fwhp-ai-tear-inner { width: 32px; height: 32px; }
      .fwhp-ai-tear-ring { width: 32px; height: 32px; }
      .fwhp-ai-tear i { font-size: 13px; }
      .fwhp-ai-grp .fwhp-ai-vline { height: 42px; }
    }

    /* ── 8. RESPONSIVE: MOBILE (≤600px) ── */
    /* ═══ MOBILE — iPhone 14 Pro Max, Galaxy S series ═ */
    @media(max-width:600px){
      .fwhp-ai-section { padding: 24px 0; }
      .fwhp-ai-h2 { font-size: 26px; }
      .fwhp-ai-sub { font-size: 11px; }
      .fwhp-ai-badge { padding: 5px 12px; font-size: 9px; }
      .fwhp-ai-grp { padding: 14px 0; min-height: 68px; }
      .fwhp-ai-tear { width: 46px; height: 46px; }
      .fwhp-ai-tear-bg { width: 40px; height: 40px; }
      .fwhp-ai-tear-fg { width: 34px; height: 34px; }
      .fwhp-ai-tear-inner { width: 28px; height: 28px; }
      .fwhp-ai-tear-ring { width: 28px; height: 28px; }
      .fwhp-ai-tear i { font-size: 11px; }
      .fwhp-ai-title { font-size: 12px; }
      .fwhp-ai-desc { font-size: 10px; line-height: 1.4; }
      .fwhp-ai-grp[data-dir="up"] .fwhp-ai-micon { width: calc(50% - 28px); }
      .fwhp-ai-grp[data-dir="dn"] .fwhp-ai-micon { width: calc(50% - 28px); }
      .fwhp-ai-grp[data-dir="up"] .fwhp-ai-mcontent { margin-left: calc(50% + 14px); }
      .fwhp-ai-grp[data-dir="dn"] .fwhp-ai-mcontent { margin-right: calc(50% + 14px); }
      .fwhp-ai-grp .fwhp-ai-vline { height: 36px; }
      .fwhp-ai-grp::before { width: 12px; height: 12px; }
      .fwhp-ai-grp::after { width: 12px; height: 12px; margin-left: -6px; }
    }

    /* ── 9. RESPONSIVE: SMALL MOBILE (≤430px) ── */
    /* ═══ SMALL MOBILE — iPhone 13/14/15, Pixel ═══ */
    @media(max-width:430px){
      .fwhp-ai-section { padding: 20px 0; }
      .fwhp-ai-h2 { font-size: 24px; }
      .fwhp-ai-sub { font-size: 10.5px; }
      .fwhp-ai-grp { padding: 12px 0; min-height: 62px; }
      .fwhp-ai-tear { width: 42px; height: 42px; }
      .fwhp-ai-tear-bg { width: 36px; height: 36px; }
      .fwhp-ai-tear-fg { width: 30px; height: 30px; }
      .fwhp-ai-tear-inner { width: 24px; height: 24px; }
      .fwhp-ai-tear-ring { width: 24px; height: 24px; }
      .fwhp-ai-tear i { font-size: 10px; }
      .fwhp-ai-title { font-size: 11px; }
      .fwhp-ai-desc { font-size: 9.5px; }
      .fwhp-ai-grp[data-dir="up"] .fwhp-ai-micon { width: calc(50% - 22px); }
      .fwhp-ai-grp[data-dir="dn"] .fwhp-ai-micon { width: calc(50% - 22px); }
      .fwhp-ai-grp[data-dir="up"] .fwhp-ai-mcontent { margin-left: calc(50% + 12px); padding-right: 4px; }
      .fwhp-ai-grp[data-dir="dn"] .fwhp-ai-mcontent { margin-right: calc(50% + 12px); padding-left: 4px; }
      .fwhp-ai-grp .fwhp-ai-vline { height: 30px; }
    }

    /* ── 10. RESPONSIVE: VERY SMALL (≤380px) ── */
    /* ═══ VERY SMALL — iPhone SE, Galaxy A series ═══ */
    @media(max-width:380px){
      .fwhp-ai-h2 { font-size: 22px; }
      .fwhp-ai-sub { font-size: 10px; }
      .fwhp-ai-badge { padding: 4px 10px; font-size: 8px; letter-spacing: 1.5px; }
      .fwhp-ai-grp { padding: 10px 0; }
      .fwhp-ai-tear { width: 38px; height: 38px; }
      .fwhp-ai-tear-bg { width: 32px; height: 32px; }
      .fwhp-ai-tear-fg { width: 26px; height: 26px; }
      .fwhp-ai-tear-inner { width: 22px; height: 22px; }
      .fwhp-ai-tear-ring { width: 22px; height: 22px; }
      .fwhp-ai-tear i { font-size: 9px; }
      .fwhp-ai-title { font-size: 10px; }
      .fwhp-ai-desc { font-size: 9px; }
      .fwhp-ai-grp[data-dir="up"] .fwhp-ai-micon { width: calc(50% - 18px); }
      .fwhp-ai-grp[data-dir="dn"] .fwhp-ai-micon { width: calc(50% - 18px); }
      .fwhp-ai-grp[data-dir="up"] .fwhp-ai-mcontent { margin-left: calc(50% + 10px); }
      .fwhp-ai-grp[data-dir="dn"] .fwhp-ai-mcontent { margin-right: calc(50% + 10px); }
    }

    /* ── 11. RESPONSIVE: LANDSCAPE MOBILE ── */
    /* ═══ LANDSCAPE MOBILE (short height + wide) ═══ */
    @media(max-width:1024px) and (max-height:500px) and (orientation:landscape){
      .fwhp-ai-section { padding: 16px 0; }
      .fwhp-ai-header { margin-bottom: 0; }
      .fwhp-ai-h2 { font-size: 22px; }
      .fwhp-ai-sub { display: none; }
      .fwhp-ai-stage { padding: 12px 0; }
      .fwhp-ai-grp { padding: 8px 0; min-height: 52px; }
      .fwhp-ai-tear { width: 38px; height: 38px; }
      .fwhp-ai-tear-bg { width: 32px; height: 32px; }
      .fwhp-ai-tear-fg { width: 26px; height: 26px; }
      .fwhp-ai-tear-inner { width: 22px; height: 22px; }
      .fwhp-ai-tear-ring { width: 22px; height: 22px; }
      .fwhp-ai-tear i { font-size: 9px; }
      .fwhp-ai-title { font-size: 10px; }
      .fwhp-ai-desc { font-size: 9px; line-height: 1.3; }
      .fwhp-ai-grp .fwhp-ai-vline { height: 24px; }
      .fwhp-ai-grp::before { width: 10px; height: 10px; }
      .fwhp-ai-grp::after { width: 10px; height: 10px; margin-left: -5px; }
    }


    /* ── 12. ACCESSIBILITY: prefers-reduced-motion ── */
    @media(prefers-reduced-motion: reduce){
      .fwhp-ai-pulse, .fwhp-ai-pulse2, .fwhp-ai-grp::after { animation: none !important; }
      .fwhp-ai-joint { animation: none !important; }
      .fwhp-ai-sperm { display: none !important; }
      .fwhp-ai-grp { transition: none !important; opacity: 1 !important; transform: none !important; }
      .fwhp-ai-reveal { transition: none !important; opacity: 1 !important; transform: none !important; }
      .fwhp-ai-tear { transition: none !important; }
      .fwhp-ai-title, .fwhp-ai-desc { transition: none !important; }
      #fwhp-ai-accent { transition: none !important; color: var(--pk) !important; }
    }

    /* +===================================================================+
       |  CSS END - fwhp-ai                                                |
       |  Sections: 1-3 Base | 4 Desktop | 5-11 Responsive                |
       +===================================================================+ */

/* +================================== Section)                   |
	|  All classes prefixed: fw-rfc-*                                  |
	|  All IDs prefixed: fw-rfc-*                                      |
	|  Safe to deploy alongside any other FertilityWorld CSS           |
	+===================================================================+
	SECTION: "IVF" - Homepage Ecosystem Section
	TABS: Booking / Finance / At-Home
	LAYOUT: Desktop 3D phone | Tablet horizontal | Mobile vertical
	PREFIX: fw-rfc- (all classes and IDs)
	DEPS: Outfit font, Bootstrap Icons 1.11.3
=============================================================== */

/* -- Section Container --
   ONE ACCENT PER TAB. Booking / Finance / At-Home each own a colour
   family that already exists in :root, and the whole band reads from
   --rfc-ac rather than from a rule per state: the ground wash, two
   blurred discs, the badge, the headline's bold half, the feature
   icons, the dock and the glow behind the phone. Switching tabs is
   therefore a class on the section (js §2) and nothing sets an inline
   style. The discs are BACKGROUND-COLOUR on a blurred disc, never a
   gradient: a gradient does not interpolate reliably across browsers,
   so a tab change would jump instead of wash.

   The band is height-capped, so its display type is sized in vh — a
   headline sized by WIDTH overflows a capped band the moment the
   window is wide and short. */
.fw-rfc-section {
	--rfc-ac: var(--bl); --rfc-ac-d: var(--bl-d); --rfc-ac-l: var(--bl-l);
	--rfc-wash: var(--bl-wash);
	position: relative; width: 100%; height: clamp(560px, 55vh, 650px);
	display: flex; align-items: center; justify-content: center; overflow: hidden;
	background: var(--rfc-wash);
	transition: background-color .9s ease;
}
.fw-rfc-section.is-finance {
	--rfc-ac: var(--mt-d); --rfc-ac-d: var(--mt-dd); --rfc-ac-l: var(--mt-l);
	--rfc-wash: var(--mt-wash);
}
.fw-rfc-section.is-home {
	--rfc-ac: var(--pk); --rfc-ac-d: var(--pk-d); --rfc-ac-l: var(--pk-l);
	--rfc-wash: var(--pk-wash);
}

/* The two discs that carry the band's light. Siblings of the content,
   not ancestors of it — an overflowing ancestor makes itself the scroll
   container. */
.fw-rfc-section::before,
.fw-rfc-section::after {
	content: ''; position: absolute; z-index: 0; pointer-events: none;
	aspect-ratio: 1; border-radius: 50%; filter: blur(90px);
	transition: background-color .9s ease;
}
.fw-rfc-section::before {
	top: -24%; left: -6%; width: clamp(320px, 34vw, 720px);
	background-color: color-mix(in srgb, var(--rfc-ac) 20%, transparent);
}
.fw-rfc-section::after {
	bottom: -28%; right: -4%; width: clamp(280px, 30vw, 640px);
	background-color: color-mix(in srgb, var(--rfc-ac) 14%, transparent);
}

/* Full bleed on the house gutters. No max-width: the width is held by
   the GRID and by type size, and past 1600px the supporting copy runs
   multi-up rather than stretching its lines (see the rule further down). */
.fw-rfc-container {
	width: 100%; padding: 0 28px;
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(40px, 5vw, 120px); align-items: stretch;
	position: relative; z-index: 2; height: 480px; 
}

/* -- Left Panel: Text Content + Dock -- */
.fw-rfc-left { display: flex; flex-direction: column; justify-content: space-between; position: relative; }

.fw-rfc-badge {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 7px 18px; background: var(--rfc-ac-l); border-radius: 100px;
	font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px;
	margin-bottom: 24px; align-self: flex-start;
	box-shadow: 0 2px 12px rgba(15, 23, 42, .06), 0 0 0 1px rgba(15, 23, 42, .03);
	transition: all 0.4s; color: var(--g6);
}
.fw-rfc-badge i { font-size: 13px; color: var(--rfc-ac); transition: color 0.4s; }

/* -- Content Morpher (slide transitions) -- */
.fw-rfc-morpher { position: relative; flex: 1; }
.fw-rfc-slide {
	position: absolute; top: 0; left: 0; width: 100%;
	opacity: 0; transform: translateY(15px); filter: blur(8px);
	transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); pointer-events: none;
}
.fw-rfc-slide.active { opacity: 1; transform: translateY(0); filter: blur(0); pointer-events: auto; }

/* -- Typography (Premium: ultra-light/bold contrast) -- */
.fw-rfc-slide h2 { font-size: clamp(34px, 5.4vh, 60px); font-weight: 200; line-height: 1.12; color: var(--dk); margin-bottom: 14px; letter-spacing: -1.5px; }
.fw-rfc-slide h2 b { font-weight: 700; color: var(--rfc-ac); transition: color 0.4s; }
.fw-rfc-slide p { font-size: 15.5px; color: var(--g6); line-height: 1.7; margin-bottom: 30px; font-weight: 300; letter-spacing: 0.05px; text-wrap: pretty; }

/* -- Feature List (icon pills + hover slide) -- */
.fw-rfc-feats { display: flex; flex-direction: column; gap: 16px; }
.fw-rfc-feat { display: flex; align-items: flex-start; gap: 14px; transition: transform 0.2s; }
.fw-rfc-feat:hover { transform: translateX(4px); }
.fw-rfc-feat i { font-size: 18px; line-height: 1; flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px; transition: 0.3s; }
.fw-rfc-feat i { background: var(--rfc-ac-l); color: var(--rfc-ac); }
.fw-rfc-feat h4 { font-size: 14px; font-weight: 600; color: var(--dk); margin-bottom: 2px; letter-spacing: -0.2px; }
.fw-rfc-feat p { font-size: 13px; color: var(--g5); line-height: 1.4; margin: 0; font-weight: 300; }

/* -- Holding the measure without a max-width --
   The band is full bleed, so on a wide monitor the text column keeps
   growing. There is no max-width on this site, so the measure is held
   by TYPE SIZE instead: the lead paragraph and the feature copy grow
   with the viewport, which keeps a line near 70–85 characters instead
   of letting it run to 110.

   Only the LEAD paragraph grows on the width axis — `> p`, a direct
   child. `.fw-rfc-slide p` also matches every feature description, and
   sizing those by viewport (or running them multi-up) shreds them into
   three-word columns. The headline stays on the HEIGHT axis: this band
   is height-capped, and display type sized by width overflows the cap
   the moment a window is wide and short. */
.fw-rfc-slide > p { font-size: clamp(15.5px, 0.62vw + 6px, 21px); }
.fw-rfc-feat h4 { font-size: clamp(14px, 0.3vw + 9.5px, 17px); }
.fw-rfc-feat p  { font-size: clamp(13px, 0.28vw + 9px, 15.5px); }

/* -- Dock (floating tab bar with sliding pill) -- */
.fw-rfc-dock-wrap { padding-top: 16px; z-index: 10; }
.fw-rfc-dock {
	display: inline-flex; background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
	border-radius: 100px; padding: 5px; box-shadow: var(--ios-shadow); position: relative; align-self: flex-start;
}
.fw-rfc-dock-pill {
	position: absolute; top: 5px; left: 5px; bottom: 5px; width: 130px; 
	background: var(--wh); border-radius: 100px;
	box-shadow: 0 4px 12px rgba(15,23,42,0.08), 0 1px 2px rgba(0,0,0,0.04);
	transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 1;
}
.fw-rfc-dock-btn {
	position: relative; z-index: 2; padding: 12px 24px;
	font-family: var(--ff); font-size: 12.5px; font-weight: 600; color: var(--g5);
	background: transparent; border: none; cursor: pointer;
	display: flex; align-items: center; gap: 8px; transition: color 0.3s;
}
.fw-rfc-dock-btn.active { color: var(--dk); }
.fw-rfc-dock-btn i { font-size: 15px; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.fw-rfc-dock-btn.active i { color: var(--rfc-ac); transform: scale(1.15); }

/* -- Right Panel: 3D Scene -- */
.fw-rfc-right { width: 100%; display: flex; justify-content: center; align-items: center; }
.fw-rfc-3d-scene { perspective: 2400px; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: relative; }
.fw-rfc-glow { position: absolute; width: 320px; height: 320px; border-radius: 50%; filter: blur(80px); opacity: 0.22; transition: background-color .9s ease; z-index: 0; background-color: var(--rfc-ac); }

/* -- 3D Phone Device Rig -- */
.fw-rfc-device-rig { position: relative; z-index: 2; transform-style: preserve-3d; width: 250px; height: 510px; margin: 0 auto; }

/* -- Floating Tooltip Badges -- */
@keyframes floatUp { 0%, 100% { margin-top: 0; } 50% { margin-top: -12px; } }
@keyframes floatDown { 0%, 100% { margin-top: 0; } 50% { margin-top: 12px; } }
.fw-rfc-float {
	position: absolute; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(16px);
	border-radius: 14px; padding: 10px 14px; box-shadow: var(--ios-shadow);
	display: flex; align-items: center; gap: 10px; z-index: 300; opacity: 0; visibility: hidden; transition: 0.6s; pointer-events: none; white-space: nowrap; border: none;
}
.fw-rfc-float.active { opacity: 1; visibility: visible; transform: translateZ(90px) scale(1); }
.fw-rfc-float--top { top: 40px; left: -160px; transform: translateZ(90px) scale(0.9); animation: floatUp 4s ease-in-out infinite; } 
.fw-rfc-float--bot { bottom: 70px; right: -150px; transform: translateZ(80px) scale(0.9); animation: floatDown 4.5s ease-in-out infinite; } 
.fw-rfc-float-icon { font-size: 20px; line-height: 1; }
.fw-rfc-float-text b { font-size: 11px; font-weight: 700; color: var(--dk); display: block; margin-bottom: 2px;}
.fw-rfc-float-text span { font-size: 9px; color: var(--g5); font-weight: 500; text-transform: uppercase;}

/* -- Hardware Chassis (Titanium phone / MacBook morph) -- */
.fw-rfc-chassis {
	position: absolute; inset: 0; background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 40%, #94a3b8 100%);
	border-radius: 38px; padding: 5px; transform-style: preserve-3d;
	box-shadow: inset 0 0 0 1px #f8fafc, inset 0 0 0 4px #94a3b8, inset 0 0 0 6px #0f172a, 20px 30px 50px rgba(15,23,42,0.1), -10px -10px 20px rgba(255,255,255,0.8);
}
.fw-rfc-ph-action { position: absolute; left: -2px; top: 80px; width: 2px; height: 20px; background: #64748b; border-radius: 2px 0 0 2px; }
.fw-rfc-ph-volup { position: absolute; left: -2px; top: 120px; width: 2px; height: 35px; background: #64748b; border-radius: 2px 0 0 2px; }
.fw-rfc-ph-voldn { position: absolute; left: -2px; top: 165px; width: 2px; height: 35px; background: #64748b; border-radius: 2px 0 0 2px; }
.fw-rfc-ph-power { position: absolute; right: -2px; top: 140px; width: 2px; height: 50px; background: #64748b; border-radius: 0 2px 2px 0; }
.fw-rfc-lap-notch, .fw-rfc-lap-base { display: none; }

/* -- Screen & iOS UI Elements -- */
.fw-rfc-screen { width: 100%; height: 100%; background: #000; border-radius: 34px; position: relative; overflow: hidden; transform: translateZ(1px); }
.fw-rfc-island { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 70px; height: 22px; background: #000; border-radius: 20px; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; box-shadow: inset 0 -1px 2px rgba(255,255,255,0.15); }
.fw-rfc-island::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #111; border: 1px solid #222; }
.fw-rfc-island::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #058A4E; }
.fw-rfc-status-bar { position: absolute; top: 13px; left: 0; width: 100%; padding: 0 22px; display: flex; justify-content: space-between; align-items: center; z-index: 101; pointer-events: none; color: var(--dk); }
.fw-rfc-ios-time { font-size: 10px; font-weight: 600; letter-spacing: -0.2px; }
.fw-rfc-ios-icons { display: flex; gap: 4px; font-size: 11px; }
.fw-rfc-glare { position: absolute; inset: 0; border-radius: 34px; background: linear-gradient(105deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.2) 45%, rgba(255,255,255,0) 60%); pointer-events: none; z-index: 200; background-size: 200% 200%; background-position: 100% 100%; }

/* -- App Views (Booking / Finance / At-Home screens) -- */
.fw-rfc-app-view { position: absolute; inset: 0; background: var(--wh); display: flex; flex-direction: column; opacity: 0; visibility: hidden; z-index: 10; }
.fw-rfc-app-view.active { opacity: 1; visibility: visible; z-index: 20; }
.fw-rfc-app-wrap { height: 100%; display: flex; flex-direction: column; }
.fw-rfc-grid { display: grid; grid-template-columns: 1fr; gap: 10px; flex: 1; }
.fw-rfc-col { display: flex; flex-direction: column; gap: 10px; }
.fw-rfc-fin-grid { display: flex; flex-direction: column; gap: 6px; flex: 1;}
.fw-rfc-hdr { padding: 44px 14px 10px; background: rgba(255,255,255,0.95); backdrop-filter: blur(16px); box-shadow: 0 2px 10px rgba(0,0,0,0.02); display: flex; justify-content: space-between; align-items: center; z-index: 10; position: relative;}
.fw-rfc-logo { font-size: 11.5px; font-weight: 700; display: flex; align-items: center; gap: 4px; letter-spacing: -0.5px; transition: color 0.4s; }
.fw-rfc-body { padding: 12px; flex: 1; display: flex; flex-direction: column; position: relative; z-index: 2; overflow-y: auto; scrollbar-width: none; }
.fw-rfc-body::-webkit-scrollbar { display: none; }
.fw-rfc-card { background: var(--wh); border-radius: 12px; padding: 12px; box-shadow: var(--ios-shadow); transition: background-color 0.3s; display: flex; flex-direction: column;}
.fw-rfc-btn { width: 100%; padding: 12px; border-radius: 100px; color: var(--wh); font-size: 12px; font-weight: 600; text-align: center; margin-top: auto; display: flex; justify-content: center; align-items: center; gap: 8px; cursor: pointer; border: none; box-shadow: 0 4px 14px rgba(0,0,0,0.1); transition: transform 0.2s; position: relative; z-index: 5;}
.fw-rfc-btn:active { transform: scale(0.96); }

/* -- iOS-Style Dropdown -- */
.fw-rfc-dropdown { position: relative; z-index: 50; }
.fw-rfc-select { background: var(--wh); box-shadow: var(--ios-shadow); border-radius: 12px; padding: 8px 12px; display: flex; flex-direction: column; cursor: pointer; transition: 0.2s; position: relative; }
.fw-rfc-select small { font-size: 9px; color: var(--g5); font-weight: 500; margin-bottom: 2px; display: block; letter-spacing: 0.2px;}
.fw-rfc-select-val { display: flex; align-items: center; gap: 8px; }
.fw-rfc-select-val img { width: 16px; border-radius: 2px; }
.fw-rfc-select-val b { font-size: 12px; font-weight: 600; color: var(--dk); transition: color 0.3s;}
.fw-rfc-select > i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--g5); }
.fw-rfc-ios-menu { position: absolute; top: calc(100% + 4px); left: 0; width: 100%; background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); opacity: 0; visibility: hidden; transform: translateY(-5px); transition: all 0.2s ease; overflow: hidden; border: none; z-index: 100;}
.fw-rfc-ios-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.fw-rfc-ios-item { padding: 10px 12px; display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 11.5px; font-weight: 600; color: var(--g6); border-bottom: 1px solid var(--g0); transition: 0.2s; }
.fw-rfc-ios-item:hover { background: var(--g0); }
.fw-rfc-ios-item img { width: 16px; border-radius: 2px; }
.fw-rfc-ios-item.selected { color: var(--dk); background: var(--g0); }

/* -- Chips, Time Slots & Interactive Elements -- */
.fw-rfc-chip-row { display: flex; gap: 6px; width: 100%; }
.fw-rfc-chip { flex: 1; text-align: center; padding: 8px 2px; background: var(--wh); box-shadow: var(--ios-shadow); border-radius: 8px; font-size: 8.5px; font-weight: 600; color: var(--g5); cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; border: none;}
.fw-rfc-chip i { font-size: 11px; transition: 0.2s; }
.fw-rfc-chip.fw-rfc-th-bl.selected { background: var(--bl); color: var(--wh); box-shadow: 0 4px 8px rgba(20,120,200,0.2); }
.fw-rfc-chip.fw-rfc-th-pk.selected { background: var(--pk); color: var(--wh); box-shadow: 0 4px 8px rgba(233,52,138,0.2); }
.fw-rfc-time-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; margin-bottom: 8px;}
.fw-rfc-time-slot { padding: 8px 4px; text-align: center; border-radius: 8px; font-size: 9px; font-weight: 600; color: var(--g6); cursor: pointer; transition: 0.2s; background: var(--wh); box-shadow: var(--ios-shadow); border: none;}
.fw-rfc-time-slot.selected { background: var(--bl); color: var(--wh); box-shadow: 0 2px 6px rgba(20,120,200,0.2); }

/* -- Finance Display & EMI Cards -- */
.fw-rfc-fin-display { flex-direction: column; align-items: flex-start; }
.fw-rfc-fin-top { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.fw-rfc-box { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; cursor: pointer; transition: all 0.2s; background: var(--wh); box-shadow: var(--ios-shadow); border: none; height: 100%;}
.fw-rfc-box-ic { font-size: 16px; color: var(--g4); transition: 0.2s; flex-shrink: 0; }
.fw-rfc-box-text { flex: 1; }
.fw-rfc-box > div:has(.fw-rfc-box-text) { flex: 1; }
.fw-rfc-box-text b { font-size: 10.5px; color: var(--dk); display: block; margin-bottom: 1px;}
.fw-rfc-box-text span { font-size: 8.5px; color: var(--g5); }
.fw-rfc-box-price { font-size: 10px; font-weight: 700; color: var(--mt-d); text-align: right; white-space: nowrap;}
.fw-rfc-box.selected { background: var(--mt-l); transform: scale(1.02); box-shadow: 0 4px 10px rgba(76,213,170,0.1); }
.fw-rfc-box.selected .fw-rfc-box-ic { color: var(--mt-d); }

/* -- Card Swap & Build Animations -- */
.fw-rfc-dyn { transition: all 0.3s; } .fw-rfc-dyn.fw-rfc-swapping { opacity: 0; transform: translateY(10px); }
.fw-rfc-icon-bare { font-size: 24px; line-height: 1; flex-shrink: 0; transition: color 0.3s; }
@keyframes fw-rfc-pulseMap { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2); opacity: 0; } }
.fw-rfc-anim { opacity: 0; transform: translateY(10px) scale(0.98); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.fw-rfc-app-view.active .fw-rfc-anim { opacity: 1; transform: translateY(0) scale(1); }
.fw-rfc-app-view.active .fw-rfc-d1 { transition-delay: 0.05s; } .fw-rfc-app-view.active .fw-rfc-d2 { transition-delay: 0.1s; }
.fw-rfc-app-view.active .fw-rfc-d3 { transition-delay: 0.15s; } .fw-rfc-app-view.active .fw-rfc-d4 { transition-delay: 0.2s; }

/* -- Utility Classes -- */
.fw-rfc-row { display: flex; justify-content: space-between; align-items: center; }
.fw-rfc-txt-xs { font-size: 9px; color: var(--g5); transition: color 0.3s;}
.fw-rfc-txt-sm { font-size: 11px; color: var(--g6); }
.fw-rfc-txt-md { font-size: 12.5px; font-weight: 600; color: var(--dk); transition: color 0.3s;}


/* ===============================================================
	MOBILE (≤992px) - Vertical Column + MacBook Inversion
	Uses display:contents + CSS order for layout reflow
	No HTML duplication - single markup, CSS handles all
=============================================================== */
@media (max-width: 992px) {
	/* -- Section & Container -- */
	.fw-rfc-section { height: auto !important; min-height: auto !important; padding: 30px 0; } 
	.fw-rfc-container { grid-template-columns: 1fr; gap: 14px; height: auto !important; min-height: auto !important; display: flex; flex-direction: column; padding: 0 14px; }
	
	/* -- Layout Reflow via display:contents + order -- */
	.fw-rfc-left { height: auto !important; min-height: auto !important; display: contents;}
	.fw-rfc-left > div:first-child { display: contents; }
	.fw-rfc-morpher { display: contents; }
	.fw-rfc-slide { position: static !important; }
	.fw-rfc-slide:not(.active) { display: none !important; }
	.fw-rfc-slide.active { display: contents !important; }
	
	/* -- Order: badge(1) → h2(2) → p(3) → dock(4) → macbook(5) → features(6) -- */
	.fw-rfc-badge { padding: 5px 12px; font-size: 9px; order: 1; align-self: flex-start; margin-bottom: 0; width: fit-content; display: inline-flex; }
	.fw-rfc-badge i { font-size: 11px; }
	.fw-rfc-slide h2 { font-size: 28px; margin-bottom: 0; order: 2; }
	.fw-rfc-slide h2 br { display: none; }
	/* The <br> is what separated "Fertility Care," from "Reimagined." —
	   hiding it ran the two words together. pre-wrap keeps the space and
	   still allows the line to break there. */
	.fw-rfc-slide h2 b::before { content: ' '; white-space: pre-wrap; }
	.fw-rfc-slide p { max-width: 100%; font-size: 13px; margin-bottom: 0; order: 3; }
	.fw-rfc-dock-wrap { padding-top: 0; margin-bottom: 0; order: 4; }
	.fw-rfc-right { width: 100%; display: block; order: 5; }
	
	/* -- Feature Cards (1x3 grid, below MacBook) -- */
	.fw-rfc-feats { order: 6; margin-top: 6px; }
	.fw-rfc-feats { gap: 4px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: stretch; align-content: normal; }
	.fw-rfc-feat { flex-direction: column; align-items: flex-start; justify-content:  flex-start; text-align: left; gap: 3px; background: var(--g0); border-radius: 10px; padding: 10px 8px; }
	.fw-rfc-feat i { font-size: 18px; margin-top: 0; width: auto; height: auto; background: none; }
	.fw-rfc-feat div { display: flex; flex-direction: column; align-items: flex-start; }
	.fw-rfc-feat h4 { font-size: 10px; margin-bottom: 1px; }
	.fw-rfc-feat p { font-size: 8.5px; line-height: 1.3; }
	.fw-rfc-feat:hover { transform: none; }
	
	/* -- Hide Desktop-Only Elements -- */
	.fw-rfc-float, .fw-rfc-glow, .fw-rfc-dock-pill { display: none !important; } 
	
	/* -- Dock Tabs (full width, pill shape, smooth transition) -- */
	.fw-rfc-dock { width: 100%; justify-content: space-between; }
	.fw-rfc-dock-btn { flex: 1; justify-content: center; font-size: 11.5px; padding: 10px 4px; border-radius: 100px; background: transparent; transition: background 0.3s, color 0.3s;}
	.fw-rfc-dock-btn.active[data-id="booking"] { background: var(--bl-l); color: var(--bl); }
	.fw-rfc-dock-btn.active[data-id="finance"] { background: var(--mt-l); color: var(--mt-d); }
	.fw-rfc-dock-btn.active[data-id="home"] { background: var(--pk-l); color: var(--pk); }
	
	/* -- MacBook Laptop Inversion -- */
	.fw-rfc-3d-scene { perspective: none; width: 100%; position: relative; height: auto !important; }
	.fw-rfc-device-rig { position: relative; width: 100%; aspect-ratio: 1.55; height: auto !important; transform: none !important; margin: 0; }
	.fw-rfc-chassis { background: linear-gradient(180deg, #E2E4E9 0%, #B9BDC5 100%); border-radius: 8px 8px 0 0; padding: 2% 2% 3% 2%; box-shadow: inset 0 2px 4px rgba(255,255,255,0.8), 0 15px 30px rgba(0,0,0,0.15); display: flex; flex-direction: column; }
	.fw-rfc-ph-action, .fw-rfc-ph-volup, .fw-rfc-ph-voldn, .fw-rfc-ph-power, .fw-rfc-island, .fw-rfc-status-bar, .fw-rfc-glare { display: none !important; }
	.fw-rfc-lap-notch { display: flex; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 15%; height: 8px; background: #000; border-radius: 0 0 4px 4px; z-index: 100; justify-content: center; align-items: center; }
	.fw-rfc-lap-notch::after { content: ''; width: 3px; height: 3px; background: #222; border-radius: 50%; }
	.fw-rfc-lap-base { display: flex; position: absolute; bottom: -8px; left: -2%; right: -2%; height: 8px; background: linear-gradient(180deg, #c3c7cf 0%, #9ca1a9 100%); border-radius: 0 0 8px 8px; justify-content: center; box-shadow: inset 0 2px 2px rgba(255,255,255,0.6), inset 0 -1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3); }
	.fw-rfc-lap-lip { width: 40px; height: 3px; background: #9ca3af; border-radius: 0 0 2px 2px; }
	
	/* -- Screen & Internal App Layout -- */
	.fw-rfc-screen { border-radius: 4px; border: 4px solid #000; background: var(--wh); width: 100%; flex: 1; overflow: hidden; position: relative; }
	.fw-rfc-app-view { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
	.fw-rfc-app-wrap { display: flex; flex-direction: column; height: 100%; width: 100%; }
	.fw-rfc-hdr { padding: 6px 10px; border-radius: 0; height: 32px; }
	.fw-rfc-logo { font-size: 9px; }
	.fw-rfc-logo i { font-size: 11px; }
	.fw-rfc-body { padding: 8px; height: calc(100% - 32px); overflow: hidden; } 
	.fw-rfc-grid { grid-template-columns: 1fr 1fr; gap: 8px; height: 100%; }
	.fw-rfc-col { gap: 6px; justify-content: space-between; height: 100%;}
	
	/* -- Micro-Typography (fits inside MacBook screen) -- */
	.fw-rfc-select { padding: 6px 8px; border-radius: 6px;}
	.fw-rfc-select small { font-size: 6px; margin-bottom: 2px;}
	.fw-rfc-select-val b { font-size: 9px; }
	.fw-rfc-select-val img { width: 10px; }
	.fw-rfc-select > i { font-size: 8px; right: 8px; }
	.fw-rfc-ios-menu { border-radius: 6px; }
	.fw-rfc-ios-item { padding: 6px 10px; font-size: 8px; }
	.fw-rfc-ios-item img { width: 10px; }
	.fw-rfc-chip-row { gap: 4px; }
	.fw-rfc-chip { flex: 1; font-size: 7.5px; padding: 6px 0; border-radius: 6px; gap: 4px; letter-spacing: -0.2px;}
	.fw-rfc-chip i { font-size: 8.5px; }
	.fw-rfc-card { padding: 8px; border-radius: 8px; }
	.fw-rfc-icon-bare { font-size: 18px; margin:0;}
	.fw-rfc-txt-xs { font-size: 7px; }
	.fw-rfc-txt-sm { font-size: 9px; }
	.fw-rfc-txt-md { font-size: 10px; }
	.fw-rfc-time-grid { gap: 4px; margin: 4px 0; }
	.fw-rfc-time-slot { font-size: 7px; padding: 6px 4px; border-radius: 6px;}
	.fw-rfc-btn { font-size: 9px; padding: 8px; border-radius: 100px; margin-top: auto;}
	
	/* -- Finance Tab: Centered vertical, 1x4 EMI cards -- */
	#fw-rfc-app-finance .fw-rfc-body { display: flex; flex-direction: column; justify-content: center; align-items: stretch; }
	#fw-rfc-app-finance .fw-rfc-grid { grid-template-columns: 1fr; gap: 4px; display: flex; flex-direction: column; height: auto; flex: none;}
	#fw-rfc-app-finance .fw-rfc-col { height: auto; flex: none; }
	.fw-rfc-fin-display { flex-direction: row; justify-content: space-between; align-items: center; padding: 6px 10px; height: auto !important; flex: none;}
	.fw-rfc-fin-top { flex-direction: column; align-items: flex-start; gap: 1px; width: auto;}
	.fw-rfc-fin-display #fw-rfc-finPrice { font-size: 14px; margin-top: 0;}
	.fw-rfc-fin-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 3px;}
	.fw-rfc-box { padding: 4px 4px 6px; margin-bottom: 0; border-radius: 6px; gap: 2px; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; height: auto;}
	.fw-rfc-box-ic { font-size: 16px; }
	.fw-rfc-box-text b { font-size: 7.5px; margin-bottom: 0;line-height: 0px;}
	.fw-rfc-box-text span { font-size: 6px; }
	.fw-rfc-box-price { font-size: 8px; margin-left: 0; font-weight: 700; color: var(--mt-d);}
	#fw-rfc-finBtn { margin-top: 4px; padding: 6px; font-size: 8px; }
	
	/* -- Home Tab Overrides -- */
	#fw-rfc-app-home .fw-rfc-anim.fw-rfc-d2 { min-height: 40px !important; border-radius: 6px; }
	#fw-rfc-mapRoute { top: 5px; left: 10%; width: 80%; height: 80%; stroke-width: 1.5; }
	#fw-rfc-mapPulse { width: 14px; height: 14px; border-width: 1px; }
	.fw-rfc-map-pulse2 { width: 10px; height: 10px; border-width: 1px; }
	#fw-rfc-mapPin { width: 6px; height: 6px; font-size: 3px; box-shadow: 0 0 0 2px var(--pk-l); }
	#fw-rfc-mapEta { font-size: 5px; padding: 2px 5px; }
	.fw-rfc-map-dest { width: 5px; height: 5px; border-width: 1px; }
	.fw-rfc-map-fade { background: radial-gradient(ellipse at center, transparent 30%, rgba(255,255,255,0.8) 80%, rgba(255,255,255,1) 100%); }
	#fw-rfc-homeDynCard { padding: 6px; flex: 1; display: flex; flex-direction: column; justify-content: space-between;}
	#fw-rfc-homeDynCard .fw-rfc-row { margin-bottom: 4px; padding-bottom: 4px; }
	#fw-rfc-homeAvatar { font-size: 16px; }
	#fw-rfc-homeName { font-size: 9px; }
	#fw-rfc-homeRole { font-size: 7px; }
	#fw-rfc-homeTask { font-size: 9px; margin-bottom: 0px !important;}
	#fw-rfc-homePrep { font-size: 7px; }
	.bi-telephone-fill { font-size: 7px !important; }
	#fw-rfc-homeDynCard > div:nth-child(2) { margin-bottom: 4px !important; gap: 6px !important; }
	#fw-rfc-homeDynCard > div:nth-child(2) > div:last-child { width: 14px !important; height: 14px !important; }
	#fw-rfc-homeDynCard > div:last-child { padding: 4px !important; border-radius: 4px !important; margin-top: 2px !important; }
	
	/* -- Booking Tab Overrides -- */
	#fw-rfc-clinicDynCard { flex-direction: column; text-align: center; gap: 4px; padding: 6px; flex: 1; justify-content: center;}
	#fw-rfc-clinicName { font-size: 10px; }
	#fw-rfc-clinicCount { font-size: 8px; }
	#fw-rfc-consultCount { font-size: 7px; }
}


/* ===============================================================
	TABLET & SMALL LAPTOP (601-992px)
	Overrides mobile column → horizontal row for MacBook + features
	Scales up micro-typography for larger screens
=============================================================== */
@media (min-width: 601px) and (max-width: 992px) {
	.fw-rfc-container { flex-wrap: wrap; flex-direction: row; gap: 16px; padding: 0 24px; }
	
	/* -- Top row: full width items -- */
	.fw-rfc-badge { width: fit-content !important; flex-basis: auto; align-self: flex-start; display: inline-flex; }
	.fw-rfc-slide h2 { flex-basis: 100%; font-size: 34px; }
	.fw-rfc-slide p { flex-basis: 100%; font-size: 14px; }
	.fw-rfc-dock-wrap { flex-basis: 100%; order: 4; }
	.fw-rfc-dock { width: 100% !important; }
	
	/* -- Bottom row: MacBook (left) + Features (right) -- */
	.fw-rfc-right { flex: 0 0 58%; max-width: 58%; order: 5; }
	.fw-rfc-feats { flex: 0 0 calc(42% - 16px); max-width: calc(42% - 16px); order: 6; margin-top: 0;
	grid-template-columns: 1fr; gap: 8px; align-self: stretch; align-content: normal; display: flex; flex-direction: column; }
	.fw-rfc-feat { flex-direction: row; text-align: left; align-items: center; padding: 10px 12px; flex: 1; 
	background: var(--g0); border-radius: 10px; gap: 10px; overflow: hidden; }
	.fw-rfc-feat i { font-size: 20px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; 
	background: var(--wh); border-radius: 8px; box-shadow: var(--ios-shadow); flex-shrink: 0; }
	.fw-rfc-feat div { align-items: flex-start; flex: 1; min-width: 0; }
	.fw-rfc-feat h4 { font-size: 12px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.fw-rfc-feat p { font-size: 10px; line-height: 1.3; color: var(--g5); }
	
	/* -- Scale up MacBook UI for tablet -- */
	.fw-rfc-device-rig { aspect-ratio: 1.6; }
	.fw-rfc-hdr { height: 36px; padding: 8px 14px; }
	.fw-rfc-logo { font-size: 11px; }
	.fw-rfc-logo i { font-size: 13px; }
	.fw-rfc-body { padding: 10px 12px; }
	.fw-rfc-grid { gap: 10px; }
	.fw-rfc-col { gap: 8px; }
	.fw-rfc-select { padding: 8px 10px; }
	.fw-rfc-select small { font-size: 8px; }
	.fw-rfc-select-val b { font-size: 12px; }
	.fw-rfc-select-val img { width: 14px; }
	.fw-rfc-select > i { font-size: 11px; }
	.fw-rfc-ios-item { padding: 8px 12px; font-size: 10px; }
	.fw-rfc-ios-item img { width: 14px; }
	.fw-rfc-chip { font-size: 9px; padding: 8px 4px; }
	.fw-rfc-chip i { font-size: 10px; }
	.fw-rfc-card { padding: 10px; }
	.fw-rfc-icon-bare { font-size: 22px; }
	.fw-rfc-txt-xs { font-size: 9px; }
	.fw-rfc-txt-sm { font-size: 11px; }
	.fw-rfc-txt-md { font-size: 13px; }
	.fw-rfc-time-grid { gap: 6px; margin: 6px 0; }
	.fw-rfc-time-slot { font-size: 9px; padding: 8px 6px; }
	.fw-rfc-btn { font-size: 11px; padding: 10px; }
	.fw-rfc-fin-display { padding: 10px 14px; }
	.fw-rfc-fin-display #fw-rfc-finPrice { font-size: 18px; }
	.fw-rfc-fin-grid { gap: 5px; }
	.fw-rfc-box { padding: 6px; }
	.fw-rfc-box-ic { font-size: 14px; }
	.fw-rfc-box-text b { font-size: 8px; }
	.fw-rfc-box-text span { font-size: 6.5px; }
	.fw-rfc-box-price { font-size: 8px; }
	#fw-rfc-finBtn { padding: 8px; font-size: 10px; }
	#fw-rfc-app-home .fw-rfc-anim.fw-rfc-d2 { min-height: 60px !important; }
	#fw-rfc-mapPulse { width: 18px; height: 18px; }
	.fw-rfc-map-pulse2 { width: 14px; height: 14px; }
	#fw-rfc-mapPin { width: 8px; height: 8px; font-size: 5px; }
	#fw-rfc-mapEta { font-size: 6px; padding: 3px 6px; }
	.fw-rfc-map-dest { width: 6px; height: 6px; }
	#fw-rfc-homeDynCard { padding: 8px; }
	#fw-rfc-homeAvatar { font-size: 20px; }
	#fw-rfc-homeName { font-size: 11px; }
	#fw-rfc-homeRole { font-size: 9px; }
	#fw-rfc-homeTask { font-size: 11px; }
	#fw-rfc-homePrep { font-size: 9px; }
	#fw-rfc-clinicName { font-size: 13px; }
	#fw-rfc-clinicCount { font-size: 10px; }
	#fw-rfc-consultCount { font-size: 9px; }
}



/* -- Dynamic Price Color via data-color -- */
#fw-rfc-clinicPrice[data-color="bl"] { color: var(--bl); }
#fw-rfc-clinicPrice[data-color="mt"] { color: var(--mt-d); }
#fw-rfc-clinicPrice[data-color="go"] { color: var(--go); }
/* -- Dynamic Tab Colors via data-tab attribute -- */
.fw-rfc-mob-title[data-tab="booking"] { color: var(--bl); }
.fw-rfc-mob-title[data-tab="finance"] { color: var(--mt-d); }
.fw-rfc-mob-title[data-tab="home"] { color: var(--pk); }
/* -- Inline Style Replacements (fw-rfc- scoped) -- */
.fw-rfc-icon-ac { color: var(--rfc-ac); }
.fw-rfc-icon-bl { color: var(--bl); }
.fw-rfc-icon-mt { color: var(--mt-d); }
.fw-rfc-icon-pk { color: var(--pk); }
.fw-rfc-text-g6 { color: var(--g6); }
.fw-rfc-text-g4 { color: var(--g4); }
.fw-rfc-avatar-sm { width: 22px; height: 22px; background: var(--g1); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.fw-rfc-avatar-sm i { color: var(--g5); font-size: 12px; }
.fw-rfc-phone-circle { width: 24px; height: 24px; background: var(--wh); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--ios-shadow); }
.fw-rfc-phone-circle i { color: var(--pk); font-size: 10px; }
.fw-rfc-chip-wrap { background: var(--wh); padding: 3px; border-radius: 10px; box-shadow: var(--ios-shadow); }
.fw-rfc-divider { height: 1px; background: var(--g1); margin: 6px 0; }
.fw-rfc-col-between { justify-content: space-between; }
.fw-rfc-col-full { display: flex; flex-direction: column; height: 100%; }
.fw-rfc-flex-1 { flex: 1;line-height: 10px; }
.fw-rfc-card-booking { flex: 1; align-items: center; justify-content: center; text-align: center; background: var(--bl-l); }
.fw-rfc-card-booking .fw-rfc-icon-bare { color: var(--bl); margin-bottom: 6px; }
.fw-rfc-clinic-name { display: block; margin-bottom: 2px; color: var(--bl); }
.fw-rfc-clinic-count { display: block; color: var(--bl); margin-bottom: 1px; font-weight: 500; }
.fw-rfc-clinic-consult { display: block; color: var(--bl); opacity: 0.8; font-weight: 500; }
.fw-rfc-card-slots { flex: 1; display: flex; flex-direction: column; }
.fw-rfc-slots-label { font-weight: 700; color: var(--g5); }
.fw-rfc-rating { color: var(--go); font-weight: 700; }
.fw-rfc-time-center { margin-top: auto; margin-bottom: auto; }
.fw-rfc-btn-booking { background: var(--bl); }
.fw-rfc-btn-finance { background: var(--mt-d); }
.fw-rfc-btn-home { background: var(--pk); }
.fw-rfc-safe-badge { font-size: 8px; background: var(--g1); color: var(--g6); padding: 3px 8px; border-radius: 100px; font-weight: 700; }
.fw-rfc-live-badge { font-size: 8px; background: var(--pk-l); color: var(--pk); padding: 3px 8px; border-radius: 100px; font-weight: 700; }
.fw-rfc-fin-card { background: var(--dk); color: var(--wh); border: none; }
.fw-rfc-fin-price { font-weight: 300; line-height: 1; }
.fw-rfc-fin-tag { background: rgba(255,255,255,0.1); padding: 3px 6px; border-radius: 100px; font-size: 8px; font-weight: 600; }
.fw-rfc-plan-label { font-weight: 700; margin-bottom: 6px; color: var(--g5); }
.fw-rfc-emi-mo { font-size: 8px; font-weight: 400; color: var(--g5); }
/* -- Map: Premium Live Tracking -- */
.fw-rfc-map-box { flex: 1; min-height: 100px; background: var(--wh); border-radius: 12px; position: relative; overflow: hidden; box-shadow: var(--ios-shadow); }
.fw-rfc-map-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(233,52,138,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(233,52,138,0.04) 1px, transparent 1px); background-size: 20px 20px; }
.fw-rfc-map-fade { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(255,255,255,0.7) 85%, rgba(255,255,255,1) 100%); pointer-events: none; z-index: 3; }
.fw-rfc-map-svg { position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; z-index: 2; }
@keyframes fw-rfc-routeCrawl { to { stroke-dashoffset: -16; } }
.fw-rfc-map-route-shadow { filter: drop-shadow(0 1px 3px rgba(233,52,138,0.25)); }
.fw-rfc-map-route-glow { stroke: var(--pk); stroke-width: 4; stroke-dasharray: 3 3; opacity: 0.1; filter: blur(2px); }
.fw-rfc-map-route-main { stroke: var(--pk); stroke-width: 1.5; stroke-dasharray: 5 3; animation: fw-rfc-routeCrawl 1.5s linear infinite; }
@keyframes fw-rfc-pulseRing1 { 0% { transform: translate(-50%,-50%) scale(0.8); opacity: 0.6; } 100% { transform: translate(-50%,-50%) scale(2.2); opacity: 0; } }
@keyframes fw-rfc-pulseRing2 { 0% { transform: translate(-50%,-50%) scale(0.6); opacity: 0.4; } 100% { transform: translate(-50%,-50%) scale(1.6); opacity: 0; } }
.fw-rfc-map-pulse { position: absolute; top: 25%; left: 15%; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--pk); transform: translate(-50%, -50%); animation: fw-rfc-pulseRing1 2.5s ease-out infinite; z-index: 3; }
.fw-rfc-map-pulse2 { position: absolute; top: 25%; left: 15%; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--pk); transform: translate(-50%, -50%); animation: fw-rfc-pulseRing2 2.5s ease-out 0.5s infinite; z-index: 3; }
.fw-rfc-map-pin { position: absolute; top: 25%; left: 15%; width: 12px; height: 12px; background: var(--pk); color: var(--wh); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 6px; box-shadow: 0 0 0 3px var(--pk-l), 0 1px 6px rgba(233,52,138,0.25); transition: 0.5s; z-index: 4; }
.fw-rfc-map-dest { position: absolute; top: 70%; left: 88%; width: 8px; height: 8px; background: var(--wh); border: 1.5px solid var(--pk); border-radius: 50%; transform: translate(-50%,-50%); z-index: 4; box-shadow: 0 0 0 2px var(--pk-l); }
.fw-rfc-map-dest::after { content: ''; position: absolute; inset: 1.5px; background: var(--pk); border-radius: 50%; opacity: 0.35; }
.fw-rfc-map-eta { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(15,23,42,0.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--wh); padding: 5px 10px; border-radius: 100px; font-size: 8px; font-weight: 700; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 5; letter-spacing: 0.5px; }
.fw-rfc-home-header { margin-bottom: 8px; border-bottom: 1px solid var(--g1); padding-bottom: 6px; }
.fw-rfc-home-counter { font-weight: 700; color: var(--pk); }
.fw-rfc-home-staff { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; margin-top: auto; }
.fw-rfc-home-task-box { background: var(--pk-bg); padding: 8px; border-radius: 8px; margin-top: auto; }
.fw-rfc-home-task { display: block; color: var(--pk); margin-bottom: 2px; }
.fw-rfc-float-bl { color: var(--bl); }
.fw-rfc-float-mt { color: var(--mt-d); }
.fw-rfc-float-pk { color: var(--pk); }
#fw-rfc-homeAvatar { color: var(--pk); }

/* +===================================================================+
	|  CSS END - fw-hp-rfc (IVF Section)                     |
+===================================================================+ */


/* ══════════════════════════════════════════════════════════════
	SECTION LAYOUT — Main container, left/right columns -HUB
══════════════════════════════════════════════════════════════ */

.fw-hp-section {
	width: 100vw;
	height: 550px; 
	display: flex;
	align-items: center;
	gap: 40px;
	position: relative;
	overflow: hidden; 
}

.fw-hp-left-col {
	position: relative;
	width: 500px;
	height: 100%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.fw-hp-silhouette {
	position: absolute;
	top: 50%;
	left: -185px;
	transform: translateY(-50%);
	height: 80%;
	width: auto;
	z-index: 2; 
	color: var(--theme-base);
	transition: color 0.5s cubic-bezier(0.25, 1, 0.2, 1);
	pointer-events: none;
	opacity: 0.95;
	filter: drop-shadow(5px 5px 15px rgba(0,0,0,0.15));
}

.fw-hp-arcs-wrapper {
	position: absolute;
	top: 50%;
	left: 0; 
	width: 550px;
	height: 550px;
	transform: translate(-50%, -50%); 
	z-index: 1; 
	pointer-events: none;
}

.fw-hp-arc-layer {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 20px solid var(--layer-color);
	box-sizing: border-box;
	transition: border-color 0.5s ease;
}

.fw-hp-arc-1 { width: 550px; height: 550px; --layer-color: var(--arc-1); }
.fw-hp-arc-2 { width: 510px; height: 510px; --layer-color: var(--arc-2); }
.fw-hp-arc-3 { width: 470px; height: 470px; --layer-color: var(--arc-3); }
.fw-hp-arc-4 { width: 430px; height: 430px; --layer-color: var(--arc-4); }
.fw-hp-arc-5 { width: 390px; height: 390px; --layer-color: var(--arc-5); }

.fw-hp-arc-center {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 350px; height: 350px;
	background-color: var(--wh);
	border-radius: 50%;
	box-shadow: inset -5px 0 20px rgba(0,0,0,0.03);
	z-index: 8;
}

.fw-hp-tabs-container {
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-left: 225px; 
	width: 100%;
}

.fw-hp-tab {
	display: flex; align-items: center; gap: 15px;
	cursor: pointer;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	opacity: 0.6;
}

.fw-hp-tab-pos-1 { transform: translateX(0); }
.fw-hp-tab-pos-2 { transform: translateX(30px); }
.fw-hp-tab-pos-3 { transform: translateX(45px); }
.fw-hp-tab-pos-4 { transform: translateX(45px); }
.fw-hp-tab-pos-5 { transform: translateX(30px); }
.fw-hp-tab-pos-6 { transform: translateX(0); }

.fw-hp-tab-icon {
	width: 42px; height: 42px;
	background: var(--wh);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 1rem; color: var(--g4);
	box-shadow: 0 4px 10px rgba(15,23,42,0.05);
	transition: all 0.3s;
	flex-shrink: 0;
	z-index: 2;
}

.fw-hp-tab-text {
	background: var(--wh);
	padding: 8px 18px;
	border-radius: 12px;
	box-shadow: 0 4px 15px rgba(15,23,42,0.03);
	border: 1px solid var(--g2);
	width: 190px;
	transition: all 0.3s;
}

.fw-hp-tab-text h3 { font-size: 0.9rem; color: var(--g6); font-weight: 600; margin: 0;}

.fw-hp-tab:hover, .fw-hp-tab.active { opacity: 1; }
.fw-hp-tab.active .fw-hp-tab-icon { background: var(--theme-base); color: var(--wh); }
.fw-hp-tab.active .fw-hp-tab-text { border-color: var(--theme-base); box-shadow: var(--sh); }
.fw-hp-tab.active .fw-hp-tab-text h3 { color: var(--theme-base); }

/* ═══════════════════════════════════════════
	RIGHT COLUMN v10 — Unique per panel
═══════════════════════════════════════════ */

.fw-hp-right-col {
	flex: 1; height: 100%;
	padding: 18px 32px 18px 0;
	overflow: hidden;
	display: flex; align-items: center;
	position: relative; z-index: 1;
}

/* ══════════════════════════════════════════════════════════════
	PANELS — Tab content containers + Typography
══════════════════════════════════════════════════════════════ */
.fw-hp-panel { display: none; width: 100%; }
.fw-hp-panel.active {
	display: flex; flex-direction: column;
	animation: fwPIn 0.45s cubic-bezier(0.25,1,0.2,1) forwards;
}
@keyframes fwPIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ── Heading ── */
.fw-hp-rt {
	font-family: var(--ff); font-size: 1.85rem; font-weight: 700;
	color: var(--dk); line-height: 1.15; margin-bottom: 5px;
}
.fw-hp-rt span { color: var(--theme-base); transition: color 0.5s; }
.fw-hp-sub {
font-family: var(--ff); font-size: 0.7rem; color: var(--theme-base); transition: color 0.5s;
font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
margin-bottom: 2px; transition: color 0.5s;
}
.fw-hp-rd {
font-family: var(--ff); font-size: 0.95rem; color: var(--g5);
line-height: 1.55; font-weight: 300; margin-bottom: 10px;
}

/* ═══ GLASS ZONE ═══ */
.fw-hp-gz {
background: rgba(255,255,255,0.4);
backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(255,255,255,0.65);
border-radius: 18px;
box-shadow: 0 8px 32px rgba(15,23,42,0.04), inset 0 1px 0 rgba(255,255,255,0.5);
padding: 18px 20px;
margin-bottom: 12px;
}

/* ═════════════════════════════════════
══════════════════════════════════════════════════════════════
TAB 1: LIFECYCLE — Service tiles + Counter row — 2×2 icon tiles + counter row
Like image 1 icon strip + image 2 bento
═════════════════════════════════════ */
.fw-hp-tiles {
display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
}
.fw-hp-tile {
display: flex; flex-direction: column; align-items: center;
text-align: center; gap: 6px;
padding: 8px 4px; transition: transform 0.3s;
}
.fw-hp-tile:hover { transform: translateX(4px); }
.fw-hp-tile-img {
width: 42px; height: 42px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; overflow: hidden;
}
.fw-hp-tile-img img { width: 24px; height: 24px; object-fit: contain; }
/* Tiles are links to their care-area page. The icon is Manage's uploaded
   care-area TILE artwork (a square with an inset mark), so it is shown whole
   and filling its box — sized like a line icon it crushes to a blank chip. */
a.fw-hp-tile { color: inherit; text-decoration: none; border-radius: 10px; }
a.fw-hp-tile:focus-visible { outline: 2px solid var(--bl-d); outline-offset: 2px; }
a.fw-hp-tile:hover .fw-hp-tile-name { color: var(--bl-d); }
.fw-hp-tile-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.fw-hp-tile-img svg { width: 24px; height: 24px; }
.fw-hp-tile-name {
font-family: var(--ff); font-size: 0.78rem; font-weight: 600;
color: var(--dk); line-height: 1.15;
}
.fw-hp-tile-sub {
font-family: var(--ff); font-size: 0.62rem; font-weight: 300;
color: var(--g5); line-height: 1.25; margin-top: 1px;
}

/* ═════════════════════════════════════
══════════════════════════════════════════════════════════════
SHARED: COUNTER ROW — Icon left, text right, ring palette hover — split: icon left (large centered), text right
Colors: ring palette always (icon=dark, number=base, text=lighter)
Hover: lift + intensify
═════════════════════════════════════ */
.fw-hp-ctrs {
display: flex; gap: 6px; margin-bottom: 10px;
}
.fw-hp-ctr {
flex: 1;
display: flex; align-items: stretch; gap: 0;
background: rgba(255,255,255,0.4);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.65);
border-radius: 14px;
box-shadow: 0 4px 18px rgba(15,23,42,0.03), inset 0 1px 0 rgba(255,255,255,0.4);
transition: all 0.4s cubic-bezier(0.25,1,0.2,1);
overflow: hidden;
}
.fw-hp-ctr:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(15,23,42,0.06), inset 0 1px 0 rgba(255,255,255,0.5);
border-color: var(--theme-base);
}

/* Icon zone: full left column, centered */
.fw-hp-ctr-ico {
width: 44px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 1.15rem;
color: var(--theme-dark);
background: var(--theme-light);
transition: all 0.4s;
}
.fw-hp-ctr:hover .fw-hp-ctr-ico {
color: var(--wh);
background: var(--theme-base);
}

/* Text zone: right side */
.fw-hp-ctr-body {
flex: 1; min-width: 0;
padding: 8px 10px 7px 10px;
}

/* Number: theme base color always */
.fw-hp-ctr-val {
font-family: var(--ff); font-size: 1.25rem; font-weight: 700;
color: var(--theme-dark); line-height: 1;
transition: color 0.4s;
}
.fw-hp-ctr:hover .fw-hp-ctr-val { color: var(--theme-base); }
/* Canvas .counter drives the count-up; counter-inherit returns size and
   weight but not the family, and tabular digits stop the number jittering. */
.fw-hp-ctr-val .counter { font-family: var(--ff); font-variant-numeric: tabular-nums; }

/* Title: slightly lighter */
.fw-hp-ctr-lbl {
font-family: var(--ff); font-size: 0.7rem;
color: var(--theme-base);
font-weight: 600; margin-top: 2px;
transition: color 0.4s; opacity: 0.8;
}
.fw-hp-ctr:hover .fw-hp-ctr-lbl { opacity: 1; }

/* Paragraph: muted theme shade */
.fw-hp-ctr-desc {
font-family: var(--ff); font-size: 0.55rem;
color: var(--g5);
font-weight: 300; line-height: 1.35; margin-top: 4px;
transition: color 0.4s;
}
.fw-hp-ctr:hover .fw-hp-ctr-desc { color: var(--theme-dark); opacity: 0.7; }

/* ═════════════════════════════════════
══════════════════════════════════════════════════════════════
TAB 2: SEAMLESS — Split layout (list left, vertical bars right) — icon list left + vertical bars right
Split layout like image 3 (left list, right data)
═════════════════════════════════════ */
.fw-hp-split {
display: flex; gap: 16px; align-items: stretch;
}
.fw-hp-split-left { flex: 1.1; display: flex; flex-direction: column; gap: 0; }
.fw-hp-split-right {
flex: 0.9; display: flex; flex-direction: column; gap: 8px;
}
.fw-hp-sl-item {
display: flex; align-items: center; gap: 12px;
padding: 9px 0; border-bottom: 1px solid var(--g1);
}
.fw-hp-sl-item:last-child { border-bottom: none; }
.fw-hp-sl-icon {
width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.fw-hp-sl-icon img { width: 24px; height: 24px; object-fit: contain; opacity: 0.6; }
.fw-hp-sl-name {
font-family: var(--ff); font-size: 1rem; font-weight: 600;
color: var(--dk); line-height: 1.2;
}
.fw-hp-sl-sub {
font-family: var(--ff); font-size: 0.76rem; font-weight: 300;
color: var(--g5); margin-top: 2px;
}

/* Vertical bars as glass tubes */
.fw-hp-vbars {
display: flex; gap: 10px; align-items: flex-end;
flex: 1; min-height: 100px;
padding: 10px 8px 8px;
}
.fw-hp-vb {
flex: 1; display: flex; flex-direction: column;
align-items: center; height: 100%;
}
.fw-hp-vb-val {
font-family: var(--ff); font-size: 0.78rem; font-weight: 700;
color: var(--dk); margin-bottom: 4px;
}
.fw-hp-vb-tube {
width: 24px; flex: 1; border-radius: 12px;
background: var(--theme-light);
position: relative; overflow: hidden;
box-shadow: inset 0 2px 6px rgba(0,0,0,0.06);
transition: background 0.5s;
}
.fw-hp-vb-fill {
position: absolute; bottom: 0; left: 0; right: 0;
border-radius: 12px;
background: var(--theme-base);
transition: height 1.2s cubic-bezier(0.25,1,0.2,1), background 0.5s;
height: 0;
}
.fw-hp-vb-lbl {
font-family: var(--ff); font-size: 0.6rem; color: var(--g4);
text-transform: uppercase; letter-spacing: 0.2px;
font-weight: 500; margin-top: 5px; text-align: center; line-height: 1.15;
}

/* ═════════════════════════════════════
PANEL 3: CLINICAL — horizontal bars + circle ring
Image 3 curability bars + image 2 pie charts
═════════════════════════════════════ */
.fw-hp-hbars { display: flex; flex-direction: column; gap: 12px; }
.fw-hp-hb {
display: flex; align-items: center; gap: 12px;
}
.fw-hp-hb-icon {
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fw-hp-hb-icon img { width: 22px; height: 22px; object-fit: contain; opacity: 0.55; }
.fw-hp-hb-info { flex: 1; }
.fw-hp-hb-row {
display: flex; justify-content: space-between; margin-bottom: 5px;
}
.fw-hp-hb-name {
font-family: var(--ff); font-size: 0.98rem; font-weight: 600; color: var(--dk);
}
.fw-hp-hb-pct {
font-family: var(--ff); font-size: 0.98rem; font-weight: 700;
}
.fw-hp-hb-track {
width: 100%; height: 10px; background: var(--g1); border-radius: 10px;
overflow: hidden;
}
.fw-hp-hb-fill {
height: 100%; border-radius: 10px;
transition: width 1.2s cubic-bezier(0.25,1,0.2,1); width: 0;
}
.fw-hp-hb-fill { background: var(--theme-base); transition: background 0.5s; }
.fw-hp-hb-pct { color: var(--theme-base); transition: color 0.5s; }

.fw-hp-cring {
display: flex; justify-content: space-around; align-items: flex-start;
padding: 14px 10px;
background: rgba(255,255,255,0.35);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,0.6);
border-radius: 16px;
box-shadow: 0 4px 20px rgba(15,23,42,0.03);
margin-bottom: 10px;
}
.fw-hp-cr { text-align: center; }
.fw-hp-cr .rounded-skill { margin: 0 auto 5px; }
.fw-hp-cr-lbl {
font-family: var(--ff); font-size: 0.7rem; color: var(--g4);
font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px;
}

/* ═════════════════════════════════════
PANEL 4: INNOVATION — timeline + counters
Clean minimal timeline (image 3 numbered steps)
═════════════════════════════════════ */
.fw-hp-tl {
position: relative; padding-left: 28px; margin-bottom: 14px;
}
.fw-hp-tl::before {
content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px;
width: 2px; background: var(--g2);
}
.fw-hp-tl-step {
position: relative; padding: 8px 0;
}
.fw-hp-tl-dot {
position: absolute; left: -28px; top: 10px;
width: 18px; height: 18px; border-radius: 50%;
border: 3px solid var(--g3); background: var(--wh);
z-index: 2;
}
.fw-hp-tl-step:nth-child(1) .fw-hp-tl-dot { border-color: var(--theme-base); background: var(--theme-base); }
.fw-hp-tl-step:nth-child(2) .fw-hp-tl-dot { border-color: var(--theme-base); background: var(--theme-base); }
.fw-hp-tl-step:nth-child(3) .fw-hp-tl-dot { border-color: var(--g3); }

.fw-hp-tl-top {
display: flex; justify-content: space-between; align-items: baseline;
}
.fw-hp-tl-name {
font-family: var(--ff); font-size: 1.05rem; font-weight: 600; color: var(--dk);
}
.fw-hp-tl-pct {
font-family: var(--ff); font-size: 1.25rem; font-weight: 700; color: var(--g6);
}
.fw-hp-tl-txt {
font-family: var(--ff); font-size: 0.8rem; font-weight: 300;
color: var(--g5); line-height: 1.45; margin-top: 3px;
}
.fw-hp-tl-track {
width: 100%; height: 4px; background: var(--g2); border-radius: 4px;
margin-top: 6px; overflow: hidden;
}
.fw-hp-tl-fill {
height: 100%; border-radius: 4px;
transition: width 1.2s cubic-bezier(0.25,1,0.2,1); width: 0;
}
.fw-hp-tl-step:nth-child(1) .fw-hp-tl-fill { background: var(--theme-base); }
.fw-hp-tl-step:nth-child(2) .fw-hp-tl-fill { background: var(--theme-base); }
.fw-hp-tl-step:nth-child(3) .fw-hp-tl-fill { background: var(--g4); }

/* ═════════════════════════════════════
PANEL 5: PARTNERS — numbered list + stat table
Image 3 numbered cards style
═════════════════════════════════════ */
.fw-hp-nums { display: flex; flex-direction: column; gap: 0; margin-bottom: 14px; }
.fw-hp-num-row {
display: flex; align-items: center; gap: 14px;
padding: 11px 0; border-bottom: 1px solid var(--g1);
transition: padding-left 0.3s;
}
.fw-hp-num-row:last-child { border-bottom: none; }
.fw-hp-num-row:hover { padding-left: 4px; }
.fw-hp-num-n {
width: 36px; height: 36px; border-radius: 50%;
background: var(--g0); border: 2px solid var(--g2);
display: flex; align-items: center; justify-content: center;
font-family: var(--ff); font-size: 0.85rem; font-weight: 700;
color: var(--g5); flex-shrink: 0;
transition: all 0.3s;
}
.fw-hp-num-n { border-color: var(--theme-base); transition: all 0.3s; }
.fw-hp-num-row:hover .fw-hp-num-n {
background: var(--theme-base); color: var(--wh);
}
.fw-hp-num-title {
font-family: var(--ff); font-size: 1.05rem; font-weight: 600;
color: var(--dk); line-height: 1.2;
}
.fw-hp-num-desc {
font-family: var(--ff); font-size: 0.82rem; font-weight: 300;
color: var(--g5); margin-top: 3px; line-height: 1.45;
}

/* Stat table (image 1 stat rows style) */
.fw-hp-stbl {
display: flex; flex-direction: column; gap: 0;
border: 1px solid var(--g2); border-radius: 12px; overflow: hidden;
margin-bottom: 10px;
}
.fw-hp-stbl-row {
display: flex; align-items: center; padding: 10px 16px;
border-bottom: 1px solid var(--g1);
}
.fw-hp-stbl-row:last-child { border-bottom: none; }
.fw-hp-stbl-row:nth-child(odd) { background: var(--g0); }
.fw-hp-stbl-lbl {
font-family: var(--ff); font-size: 0.88rem; font-weight: 500;
color: var(--g5); flex: 1;
}
.fw-hp-stbl-val {
font-family: var(--ff); font-size: 1.25rem; font-weight: 700;
color: var(--theme-base); transition: color 0.5s;
}

/* ═════════════════════════════════════
PANEL 6: GLOBAL — feature list + circles + tags
Image 4 bullet points style
═════════════════════════════════════ */
.fw-hp-dots { display: flex; flex-direction: column; gap: 0; margin-bottom: 14px; }
.fw-hp-dot-row {
display: flex; align-items: flex-start; gap: 12px;
padding: 10px 0; border-bottom: 1px solid var(--g1);
}
.fw-hp-dot-row:last-child { border-bottom: none; }
.fw-hp-dot-mark {
width: 28px; height: 28px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; margin-top: 2px; font-size: 1rem;
}
.fw-hp-dot-mark { color: var(--theme-base); transition: color 0.5s; }
.fw-hp-dot-title {
font-family: var(--ff); font-size: 1.02rem; font-weight: 600;
color: var(--dk); line-height: 1.2;
}
.fw-hp-dot-desc {
font-family: var(--ff); font-size: 0.82rem; font-weight: 300;
color: var(--g5); margin-top: 3px; line-height: 1.45;
}

/* ═══ CLINICAL: Hero circle left + bars right + counter chips ═══ */
.fw-hp-cl-split {
display: flex; gap: 18px; align-items: center; margin-bottom: 14px;
}
.fw-hp-cl-hero {
width: 160px; flex-shrink: 0;
display: flex; flex-direction: column; align-items: center;
text-align: center;
}
.fw-hp-cl-hero .rounded-skill { margin: 0 auto 8px; }
.fw-hp-cl-hero-label {
font-family: var(--ff); font-size: 0.7rem; font-weight: 600;
color: var(--theme-base); text-transform: uppercase;
letter-spacing: 0.5px; transition: color 0.5s;
}
.fw-hp-cl-hero-sub {
font-family: var(--ff); font-size: 0.62rem; font-weight: 300;
color: var(--g4); margin-top: 2px;
}

.fw-hp-cl-bars { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.fw-hp-cl-bar {
display: flex; align-items: center; gap: 12px;
padding: 10px 14px;
border-left: 3px solid var(--theme-base);
transition: all 0.3s;
}
.fw-hp-cl-bar:hover { background: rgba(255,255,255,0.25); }
.fw-hp-cl-bar:hover .fw-hp-cl-bar-name { color: var(--theme-base); }
.fw-hp-cl-bar-ico {
font-size: 1.15rem; color: var(--theme-base);
flex-shrink: 0; width: 28px; text-align: center;
transition: color 0.5s;
}
.fw-hp-cl-bar-body { flex: 1; }
.fw-hp-cl-bar-top {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 4px;
}
.fw-hp-cl-bar-name {
font-family: var(--ff); font-size: 0.9rem; font-weight: 600; color: var(--dk);
transition: color 0.3s;
}
.fw-hp-cl-bar-pct {
font-family: var(--ff); font-size: 0.9rem; font-weight: 700;
color: var(--theme-base); transition: color 0.5s;
}
.fw-hp-cl-bar-desc {
font-family: var(--ff); font-size: 0.68rem; font-weight: 300;
color: var(--g5); line-height: 1.35; margin-bottom: 6px;
}
.fw-hp-cl-bar-track {
width: 100%; height: 6px; background: var(--g2); border-radius: 6px;
overflow: hidden;
}
.fw-hp-cl-bar-fill {
height: 100%; border-radius: 6px;
background: var(--theme-base);
transition: width 1.2s cubic-bezier(0.25,1,0.2,1), background 0.5s;
width: 0;
}

.fw-hp-cl-chips {
display: flex; gap: 8px; margin-bottom: 8px;
}
.fw-hp-cl-chip {
flex: 1; display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
background: rgba(255,255,255,0.4);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,0.65);
border-radius: 12px;
box-shadow: 0 2px 10px rgba(15,23,42,0.02);
transition: all 0.35s cubic-bezier(0.25,1,0.2,1);
}
.fw-hp-cl-chip:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(15,23,42,0.05);
border-color: var(--theme-base);
}
.fw-hp-cl-chip-ico {
font-size: 1.1rem; color: var(--theme-dark);
flex-shrink: 0; transition: color 0.5s;
}
.fw-hp-cl-chip:hover .fw-hp-cl-chip-ico { color: var(--theme-base); }
.fw-hp-cl-chip-val {
font-family: var(--ff); font-size: 1.15rem; font-weight: 700;
color: var(--theme-dark); line-height: 1; transition: color 0.5s;
}
.fw-hp-cl-chip:hover .fw-hp-cl-chip-val { color: var(--theme-base); }
.fw-hp-cl-chip-lbl {
font-family: var(--ff); font-size: 0.58rem; font-weight: 500;
color: var(--g4); text-transform: uppercase; letter-spacing: 0.3px;
}

.fw-hp-cl-quote {
font-family: var(--ff); font-size: 0.72rem; font-weight: 400;
color: var(--g4); text-align: center;
padding-top: 4px; border-top: 1px solid var(--g1);
}
.fw-hp-cl-quote span {
color: var(--theme-base); font-weight: 600;
transition: color 0.5s;
}

/* ═══ INNOVATION: Premium roadmap ═══ */

/* Overall progress strip */
.fw-hp-prog-strip {
display: flex; align-items: center; gap: 0;
margin-bottom: 10px; height: 6px;
background: var(--g2); border-radius: 8px;
overflow: hidden; position: relative;
}
.fw-hp-prog-seg {
height: 100%; transition: width 1.2s cubic-bezier(0.25,1,0.2,1), background 0.5s;
width: 0;
}
.fw-hp-prog-seg:first-child { border-radius: 8px 0 0 8px; }
.fw-hp-prog-strip .fw-hp-prog-seg:nth-child(1) { background: var(--theme-dark); }
.fw-hp-prog-strip .fw-hp-prog-seg:nth-child(2) { background: var(--theme-base); opacity: 0.7; }
.fw-hp-prog-strip .fw-hp-prog-seg:nth-child(3) { background: var(--theme-base); opacity: 0.3; }
.fw-hp-prog-labels {
display: flex; justify-content: space-between; margin-top: -4px; margin-bottom: 14px;
}
.fw-hp-prog-lbl {
font-family: var(--ff); font-size: 0.58rem; font-weight: 500;
color: var(--g4); text-transform: uppercase; letter-spacing: 0.3px;
}

/* Connected phase cards with roadmap dots */
.fw-hp-roadmap {
display: flex; gap: 0; align-items: stretch; margin-bottom: 8px;
position: relative;
}
.fw-hp-rm-card {
flex: 1; padding: 10px 10px; position: relative;
transition: all 0.35s cubic-bezier(0.25,1,0.2,1);
}
.fw-hp-rm-card:hover { background: rgba(255,255,255,0.2); }

/* Connector dots between cards */
.fw-hp-rm-connector {
width: 20px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.fw-hp-rm-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--g3);
position: relative;
}
.fw-hp-rm-dot::before, .fw-hp-rm-dot::after {
content: ''; position: absolute; top: 50%;
height: 2px; background: var(--g2); width: 6px;
}
.fw-hp-rm-dot::before { right: 100%; transform: translateY(-50%); }
.fw-hp-rm-dot::after { left: 100%; transform: translateY(-50%); }

/* Status badge */
.fw-hp-rm-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px; border-radius: 20px;
font-family: var(--ff); font-size: 0.55rem; font-weight: 600;
letter-spacing: 0.4px; text-transform: uppercase;
margin-bottom: 4px;
}
.fw-hp-rm-card:nth-child(1) .fw-hp-rm-badge {
background: var(--theme-light); color: var(--theme-dark);
transition: background 0.5s, color 0.5s;
}
.fw-hp-rm-card:nth-child(3) .fw-hp-rm-badge {
background: var(--theme-light); color: var(--theme-dark);
transition: background 0.5s, color 0.5s;
}
.fw-hp-rm-card:nth-child(5) .fw-hp-rm-badge {
background: var(--g1); color: var(--g5);
}

.fw-hp-rm-name {
font-family: var(--ff); font-size: 0.85rem; font-weight: 700;
color: var(--dk); margin-bottom: 2px;
}
.fw-hp-rm-pct {
font-family: var(--ff); font-size: 1.25rem; font-weight: 700;
color: var(--theme-base); line-height: 1; margin-bottom: 4px;
transition: color 0.5s;
}
.fw-hp-rm-txt {
font-family: var(--ff); font-size: 0.65rem; font-weight: 300;
color: var(--g5); line-height: 1.35;
}
.fw-hp-rm-bar {
width: 100%; height: 4px; background: var(--g2); border-radius: 4px;
margin-top: 5px; overflow: hidden;
}
.fw-hp-rm-fill {
height: 100%; border-radius: 4px;
background: var(--theme-base);
transition: width 1.2s cubic-bezier(0.25,1,0.2,1), background 0.5s;
width: 0;
}

/* Feature tags for roadmap */
.fw-hp-rm-tags {
display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px;
}
.fw-hp-rm-tag {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px; border-radius: 20px;
font-family: var(--ff); font-size: 0.58rem; font-weight: 500;
color: var(--g5); background: var(--g0);
border: 1px solid var(--g2);
transition: all 0.3s;
}
.fw-hp-rm-tag:hover {
color: var(--theme-base); border-color: var(--theme-base);
}
.fw-hp-rm-tag i { font-size: 0.55rem; }

/* ═══ PARTNER STAT COLUMNS ═══ */
.fw-hp-pcols {
display: flex; gap: 8px; margin-bottom: 10px;
}
.fw-hp-pcol {
flex: 1; text-align: center;
padding: 16px 8px;
background: rgba(255,255,255,0.4);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,0.65);
border-radius: 14px;
box-shadow: 0 3px 14px rgba(15,23,42,0.03);
transition: all 0.35s cubic-bezier(0.25,1,0.2,1);
}
.fw-hp-pcol:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(15,23,42,0.06);
}
.fw-hp-pcol-icon {
width: 36px; height: 36px; margin: 0 auto 8px;
display: flex; align-items: center; justify-content: center;
font-size: 1.15rem;
}
.fw-hp-pcol-icon { color: var(--theme-base); transition: color 0.5s; }
.fw-hp-pcol-val {
font-family: var(--ff); font-size: 1.5rem; font-weight: 700;
color: var(--theme-base); line-height: 1; margin-bottom: 4px;
transition: color 0.5s;
}
.fw-hp-pcol-lbl {
font-family: var(--ff); font-size: 0.6rem; color: var(--g4);
text-transform: uppercase; letter-spacing: 0.4px; font-weight: 500;
}

/* ═══ PARTNER: Premium partner section ═══ */

/* Partner type badges row */
.fw-hp-pt-types {
display: flex; gap: 6px; margin-bottom: 10px;
}
.fw-hp-pt-type {
flex: 1; display: flex; flex-direction: column; align-items: center;
gap: 4px; padding: 8px 6px;
background: rgba(255,255,255,0.35);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,0.6);
border-radius: 12px;
box-shadow: 0 2px 10px rgba(15,23,42,0.02);
transition: all 0.35s cubic-bezier(0.25,1,0.2,1);
text-align: center;
}
.fw-hp-pt-type:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(15,23,42,0.05);
border-color: var(--theme-base);
}
.fw-hp-pt-type-ico {
font-size: 1.1rem; color: var(--theme-dark);
transition: color 0.4s;
}
.fw-hp-pt-type:hover .fw-hp-pt-type-ico { color: var(--theme-base); }
.fw-hp-pt-type-name {
font-family: var(--ff); font-size: 0.78rem; font-weight: 600;
color: var(--dk);
}
.fw-hp-pt-type:hover .fw-hp-pt-type-name { color: var(--theme-base); }
.fw-hp-pt-type-sub {
font-family: var(--ff); font-size: 0.52rem; font-weight: 300;
color: var(--g4); line-height: 1.25;
}

/* Partner split: benefits left, hero circle right */
.fw-hp-pt-split {
display: flex; gap: 14px; align-items: center; margin-bottom: 10px;
}
.fw-hp-pt-benefits { flex: 1.2; display: flex; flex-direction: column; gap: 0; }
.fw-hp-pt-ben {
display: flex; align-items: flex-start; gap: 12px;
padding: 9px 0;
border-bottom: 1px solid var(--g1);
border-left: 3px solid var(--theme-base);
padding-left: 12px;
transition: all 0.3s;
}
.fw-hp-pt-ben:last-child { border-bottom: none; }
.fw-hp-pt-ben:hover { background: rgba(255,255,255,0.25); }
.fw-hp-pt-ben:hover .fw-hp-pt-ben-title { color: var(--theme-base); }
.fw-hp-pt-ben-num {
font-family: var(--ff); font-size: 0.72rem; font-weight: 700;
color: var(--theme-base); flex-shrink: 0;
min-width: 22px; transition: color 0.5s;
}
.fw-hp-pt-ben-title {
font-family: var(--ff); font-size: 0.82rem; font-weight: 600;
color: var(--dk); line-height: 1.2; transition: color 0.3s;
}
.fw-hp-pt-ben-desc {
font-family: var(--ff); font-size: 0.62rem; font-weight: 300;
color: var(--g5); line-height: 1.35; margin-top: 1px;
}

/* Hero stat for partner */
.fw-hp-pt-hero {
width: 130px; flex-shrink: 0;
display: flex; flex-direction: column; align-items: center;
text-align: center;
}
.fw-hp-pt-hero .rounded-skill { margin: 0 auto 8px; }
.fw-hp-pt-hero-label {
font-family: var(--ff); font-size: 0.72rem; font-weight: 600;
color: var(--theme-base); text-transform: uppercase;
letter-spacing: 0.4px; transition: color 0.5s;
}
.fw-hp-pt-hero-sub {
font-family: var(--ff); font-size: 0.6rem; font-weight: 300;
color: var(--g4); margin-top: 2px;
}

/* Partner quote/CTA line */
.fw-hp-pt-cta {
font-family: var(--ff); font-size: 0.7rem; font-weight: 400;
color: var(--g4); text-align: center;
padding-top: 4px; border-top: 1px solid var(--g1);
}
.fw-hp-pt-cta span {
color: var(--theme-base); font-weight: 600;
transition: color 0.5s;
}

/* ═══ GLOBAL: Impact cards ═══ */
.fw-hp-gm-impact {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
margin-bottom: 12px;
}
.fw-hp-gm-card {
padding: 12px 10px; text-align: center;
background: rgba(255,255,255,0.4);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.65);
border-radius: 12px;
box-shadow: 0 3px 14px rgba(15,23,42,0.03), inset 0 1px 0 rgba(255,255,255,0.4);
transition: all 0.4s cubic-bezier(0.25,1,0.2,1);
}
.fw-hp-gm-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(15,23,42,0.06);
border-color: var(--theme-base);
}
.fw-hp-gm-card-ico {
font-size: 1.2rem; color: var(--theme-dark);
margin-bottom: 6px; transition: color 0.4s;
}
.fw-hp-gm-card:hover .fw-hp-gm-card-ico { color: var(--theme-base); }
.fw-hp-gm-card-val {
font-family: var(--ff); font-size: 1.35rem; font-weight: 700;
color: var(--theme-dark); line-height: 1; margin-bottom: 3px;
transition: color 0.4s;
}
.fw-hp-gm-card:hover .fw-hp-gm-card-val { color: var(--theme-base); }
.fw-hp-gm-card-lbl {
font-family: var(--ff); font-size: 0.62rem; font-weight: 600;
color: var(--theme-base); opacity: 0.8;
text-transform: uppercase; letter-spacing: 0.3px;
transition: color 0.5s;
}
.fw-hp-gm-card-desc {
font-family: var(--ff); font-size: 0.55rem; font-weight: 300;
color: var(--g4); line-height: 1.3; margin-top: 3px;
}
.fw-hp-gm-card:hover .fw-hp-gm-card-desc { color: var(--theme-dark); opacity: 0.7; }

.fw-hp-gm-stmt {
font-family: var(--ff); font-size: 0.82rem; font-weight: 300;
color: var(--g5); line-height: 1.55; margin-bottom: 12px;
}
.fw-hp-gm-stmt strong {
font-weight: 600; color: var(--theme-base);
transition: color 0.5s;
}

/* ══════════════════════════════════════════════════════════════
TAB 6: GLOBAL — Impact circle + mission pillars + vision text
══════════════════════════════════════════════════════════════ */

/* Impact hero split: circle LEFT, pillars RIGHT */
.fw-hp-gm-hero {
display: flex; gap: 14px; align-items: stretch;
margin-bottom: 10px;
}
.fw-hp-gm-circle {
width: 120px; flex-shrink: 0;
display: flex; flex-direction: column; align-items: center;
justify-content: center; text-align: center;
}
.fw-hp-gm-circle .rounded-skill { margin: 0 auto 6px; }
.fw-hp-gm-circle-label {
font-family: var(--ff); font-size: 0.7rem; font-weight: 600;
color: var(--theme-base); text-transform: uppercase;
letter-spacing: 0.4px; transition: color 0.5s;
}
.fw-hp-gm-circle-sub {
font-family: var(--ff); font-size: 0.58rem; font-weight: 300;
color: var(--g4); margin-top: 2px;
}
.fw-hp-gm-vision {
flex: 1;
}
.fw-hp-gm-vision-text {
font-family: var(--ff); font-size: 0.78rem; font-weight: 300;
color: var(--g5); line-height: 1.55; margin-bottom: 10px;
}
.fw-hp-gm-vision-text strong {
font-weight: 600; color: var(--theme-base);
transition: color 0.5s;
}

/* Mission pillars — horizontal strips */
.fw-hp-gm-pillars {
display: flex; flex-direction: column; gap: 0;
margin-bottom: 8px; flex: 1;
}
.fw-hp-gm-pillar {
display: flex; align-items: center; gap: 12px;
padding: 6px 0 6px 10px;
border-bottom: 1px solid var(--g1);
border-left: 3px solid var(--theme-base);
transition: all 0.3s;
}
.fw-hp-gm-pillar:last-child { border-bottom: none; }
.fw-hp-gm-pillar:hover { background: rgba(255,255,255,0.25); }
.fw-hp-gm-pillar:hover .fw-hp-gm-pil-title { color: var(--theme-base); }
.fw-hp-gm-pil-ico {
font-size: 1.15rem; color: var(--theme-dark);
flex-shrink: 0; width: 28px; text-align: center;
transition: color 0.5s;
}
.fw-hp-gm-pillar:hover .fw-hp-gm-pil-ico { color: var(--theme-base); }
.fw-hp-gm-pil-body { flex: 1; }
.fw-hp-gm-pil-title {
font-family: var(--ff); font-size: 0.85rem; font-weight: 600;
color: var(--dk); transition: color 0.3s;
}
.fw-hp-gm-pil-desc {
font-family: var(--ff); font-size: 0.65rem; font-weight: 300;
color: var(--g5); line-height: 1.35; margin-top: 1px;
}
.fw-hp-gm-pil-stat {
font-family: var(--ff); font-size: 1.1rem; font-weight: 700;
color: var(--theme-base); flex-shrink: 0;
min-width: 50px; text-align: right;
transition: color 0.5s;
}

/* Vision closing */
.fw-hp-gm-close {
font-family: var(--ff); font-size: 0.78rem; font-weight: 400;
color: var(--g4); text-align: center;
padding-top: 6px; border-top: 1px solid var(--g1);
line-height: 1.5;
}
.fw-hp-gm-close strong {
font-weight: 600; color: var(--theme-base);
transition: color 0.5s;
}

/* ══════════════════════════════════════════════════════════════
SHARED: CONTENT EFFECTS — Border accents, hovers — all use theme palette ═══ */
.fw-hp-hb {
padding: 8px 12px; border-radius: 0;
border-left: 3px solid var(--theme-base);
transition: all 0.3s;
}
.fw-hp-hb:hover { background: rgba(255,255,255,0.25); }
.fw-hp-hb:hover .fw-hp-hb-name { color: var(--theme-base); }

.fw-hp-sl-item {
border-left: 3px solid var(--theme-base); padding-left: 10px;
transition: all 0.3s;
}
.fw-hp-sl-item:hover { background: rgba(255,255,255,0.25); }
.fw-hp-sl-item:hover .fw-hp-sl-name { color: var(--theme-base); }
.fw-hp-sl-item:hover .fw-hp-sl-sub { color: var(--theme-base); opacity: 0.7; }

.fw-hp-num-row {
border-left: 3px solid var(--theme-base); padding-left: 10px;
transition: all 0.3s;
}
.fw-hp-num-row:hover { background: rgba(255,255,255,0.25); }
.fw-hp-num-row:hover .fw-hp-num-title { color: var(--theme-base); }
.fw-hp-num-row:hover .fw-hp-num-desc { color: var(--theme-base); opacity: 0.7; }

.fw-hp-dot-row {
padding-left: 4px; border-left: 3px solid var(--theme-base);
transition: all 0.3s;
}
.fw-hp-dot-row:hover { background: rgba(255,255,255,0.25); }
.fw-hp-dot-row:hover .fw-hp-dot-title { color: var(--theme-base); }
.fw-hp-dot-row:hover .fw-hp-dot-desc { color: var(--theme-base); opacity: 0.7; }

/* ═══ UTILITY CLASSES (replacing inline styles) ═══ */
.fw-hp-rd-sm {
font-size: 0.82rem; margin: 8px 0 12px;
}
.fw-hp-rd-sm2 {
font-size: 0.82rem; margin: 8px 0 0;
}
.fw-hp-rd-sm3 {
font-size: 0.8rem; margin: 6px 0 0;
}
.fw-hp-rd-sm4 {
font-size: 0.82rem; margin: 4px 0 10px;
}
.fw-hp-sl-icon i,
.fw-hp-dot-mark i {
font-size: 1.1rem; color: var(--theme-base);
transition: color 0.5s;
}
.fw-hp-cring-inner {
font-size: 0.85rem; font-weight: 700;
}
.fw-hp-cring-inner-sm {
font-size: 0.9rem; font-weight: 700;
}
[data-color="#4CD5AA"] > .fw-hp-cring-inner { color: #4CD5AA; }
[data-color="#E5A93D"] > .fw-hp-cring-inner { color: #E5A93D; }
[data-color="#8B5CF6"] > .fw-hp-cring-inner { color: #8B5CF6; }
.fw-hp-split-gz {
padding: 14px 16px;
}
.fw-hp-dots-gz {
padding: 10px 16px;
}

/* ══════════════════════════════════════════════════════════════
SECTION BACKGROUND — Gradient overlay via ::before
══════════════════════════════════════════════════════════════ */
.fw-hp-section::before {
content: ''; position: absolute; inset: 0; z-index: 0;
background: var(--section-bg, linear-gradient(135deg, rgba(233,52,138,0.06) 0%, rgba(233,52,138,0.02) 45%, transparent 70%));
transition: background 0.7s cubic-bezier(0.25,1,0.2,1);
pointer-events: none;
}
.fw-hp-left-col { z-index: 1; }

/* ═══ STAGGER ═══ */
/* ══════════════════════════════════════════════════════════════
STAGGER ANIMATIONS — Fade-in delay per child element
══════════════════════════════════════════════════════════════ */
.fw-hp-panel.active .fw-hp-tile,
.fw-hp-panel.active .fw-hp-ctr,
.fw-hp-panel.active .fw-hp-sl-item,
.fw-hp-panel.active .fw-hp-hb,
.fw-hp-panel.active .fw-hp-cr,
.fw-hp-panel.active .fw-hp-tl-step,
.fw-hp-panel.active .fw-hp-num-row,
.fw-hp-panel.active .fw-hp-dot-row,
.fw-hp-panel.active .fw-hp-stbl-row,
.fw-hp-panel.active .fw-hp-gm-card,
.fw-hp-panel.active .fw-hp-gm-pillar,
.fw-hp-panel.active .fw-hp-pt-type,
.fw-hp-panel.active .fw-hp-pt-ben,
.fw-hp-panel.active .fw-hp-rm-card,
.fw-hp-panel.active .fw-hp-rm-tag,
.fw-hp-panel.active .fw-hp-cl-bar,
.fw-hp-panel.active .fw-hp-cl-chip,
.fw-hp-panel.active .fw-hp-pcol,
.fw-hp-panel.active .fw-hp-phase-card,
.fw-hp-panel.active .fw-hp-vb {
animation: fwUp 0.4s cubic-bezier(0.25,1,0.2,1) both;
}
.fw-hp-panel.active > :nth-child(n) > :nth-child(1) { animation-delay: 0.04s; }
.fw-hp-panel.active > :nth-child(n) > :nth-child(2) { animation-delay: 0.08s; }
.fw-hp-panel.active > :nth-child(n) > :nth-child(3) { animation-delay: 0.12s; }
.fw-hp-panel.active > :nth-child(n) > :nth-child(4) { animation-delay: 0.16s; }
@keyframes fwUp {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}



/* ══════════════════════════════════════════════════════════════
RESPONSIVE ≤1024px — Mobile/Tablet Native App Layout
Tab bar, swipe animations, content adaptations
═══════════════════════════════════════════ */

@media (max-width: 1024px) {

/* ── Section ── */
.fw-hp-section {
flex-direction: column; height: auto;
padding: 0; gap: 0; overflow-x: hidden;
}
.fw-hp-section::before { 
position: absolute; top: 0; left: 0; right: 0;
height: 300px; border-radius: 0;
}

/* ── Left col: tab bar container ── */
.fw-hp-left-col {
width: 100%; height: auto; flex-shrink: 0;
padding: 0; background: var(--wh);
}
.fw-hp-arcs-wrapper,
.fw-hp-silhouette,
.fw-hp-arc-center,
.fw-hp-arc-layer { display: none; }

/* ═══ TAB BAR: Clean bottom-border style, icon top text bottom ═══ */
.fw-hp-tabs-container {
padding: 0; flex-direction: row;
flex-wrap: nowrap; gap: 0;
overflow-x: auto; -webkit-overflow-scrolling: touch;
scrollbar-width: none;
background: var(--g0);
width: 100%;
}
.fw-hp-tabs-container::-webkit-scrollbar { display: none; }

.fw-hp-tab {
transform: none !important;
flex: 1; min-width: 0;
flex-direction: column; align-items: center;
gap: 3px; opacity: 1;
padding: 10px 6px 8px;
border: none;
border-bottom: 3px solid transparent;
border-radius: 0;
background: transparent;
transition: all 0.3s;
min-width: 0;
}
.fw-hp-tab.active {
border-bottom-color: var(--theme-base);
background: var(--wh);
}

.fw-hp-tab-icon {
width: 28px; height: 28px; font-size: 0.75rem;
border-radius: 50%; box-shadow: none;
background: none; color: var(--g4);
transition: all 0.3s;
}
.fw-hp-tab.active .fw-hp-tab-icon {
background: var(--theme-base); color: var(--wh);
}

.fw-hp-tab-text {
background: none; padding: 0; border: none;
box-shadow: none; width: auto;
}
.fw-hp-tab-text h3 {
font-size: 0.58rem; white-space: nowrap;
color: var(--g4); font-weight: 500;
line-height: 1.1; transition: color 0.3s;
}
.fw-hp-tab.active .fw-hp-tab-text h3 {
color: var(--theme-dark); font-weight: 700;
}

/* ═══ Content area ═══ */
.fw-hp-right-col {
width: 100%; height: auto; overflow: hidden;
padding: 18px 14px 28px;
}

/* Prevent any horizontal overflow from content */
.fw-hp-panel { max-width: 100%; overflow-x: hidden; }
.fw-hp-rm-tags { overflow-x: hidden; }
.fw-hp-roadmap { overflow: hidden; }

/* ═══ Slide animations ═══ */
.fw-hp-panel { display: none; width: 100%; }
.fw-hp-panel.active { display: flex; flex-direction: column; }
.fw-hp-panel.fw-hp-slide-right {
animation: fwSlideR 0.32s cubic-bezier(0.22,1,0.36,1) forwards;
}
.fw-hp-panel.fw-hp-slide-left {
animation: fwSlideL 0.32s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes fwSlideR {
from { opacity: 0; transform: translateX(30px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes fwSlideL {
from { opacity: 0; transform: translateX(-30px); }
to { opacity: 1; transform: translateX(0); }
}

/* ═══ Typography ═══ */
.fw-hp-sub { font-size: 0.6rem; letter-spacing: 0.8px; margin-bottom: 2px; }
.fw-hp-rt { font-size: 1.4rem; margin-bottom: 4px; line-height: 1.2; }
.fw-hp-rd { font-size: 0.84rem; line-height: 1.5; margin-bottom: 12px; }

/* ═══ Tab 1: Service 2-col list — icon left, title+sub stacked right ═══ */
.fw-hp-tiles {
display: grid; grid-template-columns: 1fr 1fr; gap: 0;
margin-bottom: 12px;
}
.fw-hp-tile {
display: grid; grid-template-columns: 32px 1fr;
grid-template-rows: auto auto;
align-items: center;
text-align: left; gap: 0 10px;
padding: 7px 8px;
border-radius: 0;
transition: all 0.3s;
}
.fw-hp-tile:nth-child(odd) {
border-right: 1px solid var(--g1);
}
.fw-hp-tile:nth-child(-n+4) {
border-bottom: 1px solid var(--g1);
}
.fw-hp-tile:hover, .fw-hp-tile:active {
background: rgba(255,255,255,0.3);
}
.fw-hp-tile-img {
width: 32px; height: 32px; flex-shrink: 0;
grid-row: 1 / 3; grid-column: 1;
}
.fw-hp-tile-img img { width: 100%; height: 100%; border-radius: 8px; }
.fw-hp-tile-name {
font-size: 0.72rem; font-weight: 600;
grid-row: 1; grid-column: 2;
align-self: end;
}
.fw-hp-tile-sub {
font-size: 0.55rem; display: block;
color: var(--g4); margin-top: 1px;
grid-row: 2; grid-column: 2;
align-self: start;
}

/* ═══ Counters: 2-col ═══ */
.fw-hp-ctrs { flex-wrap: wrap; gap: 8px; }
.fw-hp-ctr { flex: 0 0 calc(50% - 4px); border-radius: 12px; }
.fw-hp-ctr-ico { width: 40px; font-size: 1rem; border-radius: 12px 0 0 12px; }
.fw-hp-ctr-body { padding: 10px 10px 8px; }
.fw-hp-ctr-val { font-size: 1.15rem; }
.fw-hp-ctr-lbl { font-size: 0.6rem; }
.fw-hp-ctr-desc { font-size: 0.5rem; margin-top: 2px; }

/* ═══ Tab 2: Seamless — list left + tight vbars right ═══ */
.fw-hp-split {
flex-direction: row !important; gap: 10px !important;
padding: 0 !important; border-radius: 0 !important;
background: none !important; border: none !important;
box-shadow: none !important;
backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
align-items: stretch !important;
}
.fw-hp-split-left {
width: auto; flex: 1 !important;
display: flex !important; flex-direction: column !important;
gap: 0 !important;
}
.fw-hp-sl-item {
display: grid; grid-template-columns: 26px 1fr;
grid-template-rows: auto auto;
align-items: center;
gap: 0 8px;
padding: 6px 6px 6px 8px !important;
border-left: 3px solid var(--theme-base) !important;
}
.fw-hp-sl-item:not(:last-child) { border-bottom: 1px solid var(--g1); }
.fw-hp-sl-icon {
grid-row: 1 / 3; grid-column: 1;
display: flex; align-items: center; justify-content: center;
}
.fw-hp-sl-icon i { font-size: 0.88rem !important; }
.fw-hp-sl-name {
font-size: 0.72rem !important;
grid-row: 1; grid-column: 2; align-self: end;
}
.fw-hp-sl-sub {
font-size: 0.52rem !important;
grid-row: 2; grid-column: 2; align-self: start;
color: var(--g4);
}

.fw-hp-split-right {
width: auto; flex: 0 0 auto;
flex-direction: row;
}
.fw-hp-vbars {
min-height: auto; gap: 3px; padding: 4px 2px 4px;
flex: 1;
}
.fw-hp-vb { height: 100%; }
.fw-hp-vb-tube { width: 12px; border-radius: 6px; flex: 1; }
.fw-hp-vb-fill { border-radius: 6px; }
.fw-hp-vb-val { font-size: 0.58rem; font-weight: 700; }
.fw-hp-vb-lbl { font-size: 0.4rem; white-space: nowrap; }
.fw-hp-rd-sm2 { font-size: 0.72rem; margin: 6px 0 0; }

/* ═══ Tab 3: Clinical — stat number replaces circle on mobile ═══ */
.fw-hp-cl-split { flex-direction: column; gap: 12px; }
.fw-hp-cl-hero {
width: 100%; flex-direction: column;
gap: 2px; align-items: flex-start;
}
/* Hide the circle on mobile */
.fw-hp-cl-hero .rounded-skill { display: none; }
/* Show big stat number instead */
.fw-hp-cl-hero-label {
font-size: 0.62rem;
text-transform: uppercase; letter-spacing: 0.4px;
text-align: left;
}
.fw-hp-cl-hero-sub { text-align: left; font-size: 0.55rem; margin-top: 0; }
.fw-hp-cl-bars { width: 100%; }
.fw-hp-cl-bar { padding: 7px 8px; gap: 8px; }
.fw-hp-cl-bar-ico { font-size: 0.9rem; width: 22px; }
.fw-hp-cl-bar-name { font-size: 0.75rem; }
.fw-hp-cl-bar-pct { font-size: 0.75rem; }
.fw-hp-cl-bar-desc { font-size: 0.58rem; margin-bottom: 4px; }
.fw-hp-cl-bar-track { height: 5px; }
.fw-hp-cl-chips { flex-wrap: wrap; gap: 6px; }
.fw-hp-cl-chip { flex: 0 0 calc(50% - 3px); padding: 8px 10px; border-radius: 10px; }
.fw-hp-cl-chip-val { font-size: 1rem; }
.fw-hp-cl-chip-ico { font-size: 0.9rem; }
.fw-hp-cl-quote { font-size: 0.62rem; }

/* ═══ Tab 4: Roadmap — 3 phases in one row, 3 counters in one row ═══ */
.fw-hp-prog-strip { height: 5px; margin-bottom: 8px; }
.fw-hp-roadmap { flex-direction: row; gap: 6px; align-items: stretch; }
.fw-hp-rm-connector { display: none; }
.fw-hp-rm-card {
flex: 1; padding: 8px 6px; border-radius: 10px;
position: relative;
display: flex; flex-direction: column;
}
.fw-hp-rm-badge {
position: absolute; top: 6px; right: 6px;
margin-bottom: 0; width: fit-content;
font-size: 0.42rem; padding: 2px 6px;
}
.fw-hp-rm-name { font-size: 0.7rem; margin-bottom: 1px; padding-top: 2px; }
.fw-hp-rm-pct { font-size: 1.05rem; margin-bottom: 2px; }
.fw-hp-rm-txt { font-size: 0.5rem; line-height: 1.3; margin-bottom: 8px; }
.fw-hp-rm-bar { margin-top: auto; height: 3px; }
.fw-hp-rm-tags { gap: 4px; }
.fw-hp-rm-tag { padding: 3px 7px; font-size: 0.52rem; }

/* Counters: 3 in one row for Tab 4 */
#fw-hp-panel-3 .fw-hp-ctrs { flex-wrap: nowrap; gap: 6px; }
#fw-hp-panel-3 .fw-hp-ctr { flex: 1; }

/* ═══ Tab 5: Partner — types row, benefits 2×2, big stat, counters row ═══ */

/* 4 partner types in one row */
.fw-hp-pt-types { flex-wrap: nowrap; gap: 4px; }
.fw-hp-pt-type {
flex: 1; padding: 8px 4px; border-radius: 8px;
gap: 3px;
}
.fw-hp-pt-type-ico { font-size: 0.9rem; }
.fw-hp-pt-type-name { font-size: 0.58rem; }
.fw-hp-pt-type-sub { font-size: 0.42rem; display: block; line-height: 1.25; }

/* Split: benefits + hero stat */
.fw-hp-pt-split { flex-direction: column; gap: 10px; }

/* Benefits as 2×2 grid */
.fw-hp-pt-benefits {
display: grid !important; grid-template-columns: 1fr 1fr;
gap: 0;
}
.fw-hp-pt-ben {
display: grid !important; grid-template-columns: 20px 1fr;
grid-template-rows: auto auto;
align-items: center;
gap: 0 6px;
padding: 7px 6px 7px 8px !important;
border-left: none !important; border-bottom: none !important;
}
.fw-hp-pt-ben:nth-child(odd) { border-right: 1px solid var(--g1) !important; }
.fw-hp-pt-ben:nth-child(-n+2) { border-bottom: 1px solid var(--g1) !important; }
.fw-hp-pt-ben-num {
grid-row: 1 / 3; grid-column: 1;
font-size: 0.62rem; min-width: auto;
}
.fw-hp-pt-ben-title {
font-size: 0.68rem !important;
grid-row: 1; grid-column: 2; align-self: end;
}
.fw-hp-pt-ben-desc {
font-size: 0.5rem !important;
grid-row: 2; grid-column: 2; align-self: start;
}

/* Hero: hide circle, show big stat number */
.fw-hp-pt-hero {
width: 100%; flex-direction: column;
gap: 2px; align-items: flex-start;
}
.fw-hp-pt-hero .rounded-skill { display: none; }
.fw-hp-pt-hero-label {
font-size: 0.62rem; text-align: left;
}
.fw-hp-pt-hero-sub { text-align: left; font-size: 0.55rem; margin-top: 0; }

/* Counters: 3 in one row */
#fw-hp-panel-4 .fw-hp-ctrs { flex-wrap: nowrap; gap: 6px; }
#fw-hp-panel-4 .fw-hp-ctr { flex: 1; }

.fw-hp-pt-cta { font-size: 0.6rem; }

/* ═══ Tab 6: Global — big stat, pillars 2×2, counters row ═══ */
.fw-hp-gm-hero {
flex-direction: column; gap: 8px; align-items: stretch;
}
/* Hide circle, show big stat */
.fw-hp-gm-circle {
width: 100%; flex-direction: column;
gap: 2px; align-items: flex-start; text-align: left;
}
.fw-hp-gm-circle .rounded-skill { display: none; }
.fw-hp-gm-circle-label {
font-size: 0.62rem;
text-transform: uppercase; letter-spacing: 0.4px;
text-align: left;
}
.fw-hp-gm-circle-sub { text-align: left; font-size: 0.55rem; margin-top: 0; }

/* Pillars as 2×2 grid: icon+text left, stat right per cell */
.fw-hp-gm-pillars {
display: grid !important; grid-template-columns: 1fr 1fr;
gap: 0; flex: none; width: 100%; margin-bottom: 10px;
}
.fw-hp-gm-pillar {
display: flex !important; align-items: center;
gap: 6px; padding: 7px 6px 7px 8px;
border-left: none !important; border-bottom: none !important;
}
.fw-hp-gm-pillar:nth-child(odd) { border-right: 1px solid var(--g1) !important; }
.fw-hp-gm-pillar:nth-child(-n+2) { border-bottom: 1px solid var(--g1) !important; }
.fw-hp-gm-pil-ico {
font-size: 0.8rem; width: 20px; flex-shrink: 0;
text-align: center;
}
.fw-hp-gm-pil-body { flex: 1; min-width: 0; }
.fw-hp-gm-pil-title { font-size: 0.65rem; }
.fw-hp-gm-pil-desc { font-size: 0.48rem; margin-top: 1px; }
.fw-hp-gm-pil-stat {
font-size: 0.9rem; font-weight: 700;
text-align: right; min-width: 32px; flex-shrink: 0;
}

/* Counters: 3 in one row */
#fw-hp-panel-5 .fw-hp-ctrs { flex-wrap: nowrap; gap: 6px; }
#fw-hp-panel-5 .fw-hp-ctr { flex: 1; }

.fw-hp-gm-vision-text { font-size: 0.7rem; line-height: 1.5; }
.fw-hp-gm-close { font-size: 0.62rem; }

/* ═══ Shared mobile adjustments ═══ */
.fw-hp-gz {
padding: 12px; border-radius: 12px;
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.fw-hp-cring {
padding: 10px; border-radius: 12px;
gap: 8px; flex-wrap: wrap; justify-content: center;
}
.fw-hp-gm-close, .fw-hp-cl-quote, .fw-hp-pt-cta {
font-size: 0.62rem; padding-top: 8px;
}
.fw-hp-hb, .fw-hp-sl-item, .fw-hp-num-row,
.fw-hp-dot-row, .fw-hp-gm-pillar, .fw-hp-pt-ben {
border-left-width: 3px;
}
}

/* ═══ SMALL MOBILE (≤480px) ═══ */
@media (max-width: 480px) {
/* Tabs: scrollable, not squeezed */
.fw-hp-tab {
flex: 0 0 auto; min-width: 0;
padding: 6px 10px 8px;
}
.fw-hp-tab-icon { width: 26px; height: 26px; font-size: 0.68rem; }
.fw-hp-tab-text h3 { font-size: 0.52rem; }
.fw-hp-rt { font-size: 1.25rem; }
.fw-hp-rd { font-size: 0.78rem; }

/* Partner types: hide sub-text on small screens */
.fw-hp-pt-type-sub { display: none !important; }

/* Phase cards tighter */
.fw-hp-rm-card { padding: 6px 5px; }
.fw-hp-rm-name { font-size: 0.62rem; }
.fw-hp-rm-pct { font-size: 0.9rem; }
.fw-hp-rm-txt { font-size: 0.45rem; }
.fw-hp-rm-badge { font-size: 0.38rem; padding: 2px 4px; }

/* Counters tighter in 3-row */
#fw-hp-panel-3 .fw-hp-ctr-ico,
#fw-hp-panel-4 .fw-hp-ctr-ico,
#fw-hp-panel-5 .fw-hp-ctr-ico { width: 32px; font-size: 0.85rem; }
#fw-hp-panel-3 .fw-hp-ctr-val,
#fw-hp-panel-4 .fw-hp-ctr-val,
#fw-hp-panel-5 .fw-hp-ctr-val { font-size: 0.95rem; }
#fw-hp-panel-3 .fw-hp-ctr-desc,
#fw-hp-panel-4 .fw-hp-ctr-desc,
#fw-hp-panel-5 .fw-hp-ctr-desc { display: none; }

/* Clinical chips tighter */
.fw-hp-cl-chip { padding: 6px 8px; }
.fw-hp-cl-chip-val { font-size: 0.88rem; }
.fw-hp-cl-chip-ico { font-size: 0.78rem; }

/* Global pillars tighter */
.fw-hp-gm-pil-title { font-size: 0.6rem; }
.fw-hp-gm-pil-desc { font-size: 0.44rem; }
.fw-hp-gm-pil-stat { font-size: 0.8rem; min-width: 28px; }

/* Partner benefits tighter */
.fw-hp-pt-ben-title { font-size: 0.6rem !important; }
.fw-hp-pt-ben-desc { font-size: 0.45rem !important; }

/* Feature tags */
.fw-hp-rm-tag { padding: 2px 5px; font-size: 0.48rem; }
}

/* ═══ VERY SMALL (≤380px) ═══ */
@media (max-width: 380px) {
.fw-hp-right-col { padding: 14px 10px 24px; }
.fw-hp-tabs-container { padding: 10px 8px 0; }
.fw-hp-tab { padding: 5px 8px 7px; }
.fw-hp-tab-icon { width: 24px; height: 24px; font-size: 0.62rem; }
.fw-hp-tab-text h3 { font-size: 0.48rem; }
.fw-hp-rt { font-size: 1.15rem; }

/* Tiles 2-col on very small */
.fw-hp-tiles { grid-template-columns: 1fr 1fr; }
.fw-hp-tile:nth-child(5),
.fw-hp-tile:nth-child(6) { border-bottom: none; }
.fw-hp-tile:nth-child(3),
.fw-hp-tile:nth-child(4) { border-bottom: 1px solid var(--g1); }

/* Phase cards: stack if too cramped */
.fw-hp-rm-name { font-size: 0.58rem; }
.fw-hp-rm-pct { font-size: 0.82rem; }
.fw-hp-rm-txt { font-size: 0.42rem; }

/* Partner types: 2×2 on very small */
.fw-hp-pt-types { flex-wrap: wrap !important; }
.fw-hp-pt-type { flex: 0 0 calc(50% - 2px) !important; }

/* 3-row counters: hide desc */
.fw-hp-ctr-desc { display: none; }
.fw-hp-ctr-lbl { font-size: 0.52rem; }
.fw-hp-ctr-val { font-size: 0.9rem; }
}

/* ═══════════════════════════════════════════════════════════
HOMEPAGE BLOG SECTION (fw-hp-blog)
─ Swiper 11.0.5 carousel
─ IMG icon tabs with CSS filter color switching
─ Compact premium cards with skeleton loading
─ Smooth filter + hover transitions
═══════════════════════════════════════════════════════════ */

.fw-hp-blog{
padding:44px 0 48px;
position:relative;
overflow:hidden;
background:var(--g0)
}

/* ── Decorative background ── */
.fw-hp-blog::before{
content:'';position:absolute;width:450px;height:450px;border-radius:50%;
background:radial-gradient(circle,rgba(20,120,200,.03) 0%,transparent 70%);
top:-140px;right:-100px;pointer-events:none
}


/* ═══════════════════════════════════
SECTION HEADER
═══════════════════════════════════ */

.fw-hp-blog__top{
position:relative;z-index:1;
padding:0 28px;margin-bottom:20px
}

/* Label */
.fw-hp-blog__label{
display:inline-flex;align-items:center;gap:8px;
font-size:10.5px;font-weight:600;text-transform:uppercase;
letter-spacing:2.5px;color:var(--bl);margin-bottom:10px
}
.fw-hp-blog__label span{
width:20px;height:1.5px;background:var(--bl);border-radius:2px
}

/* Title + nav row */
.fw-hp-blog__head-row{
display:flex;align-items:center;justify-content:space-between;gap:16px
}

.fw-hp-blog__title{
font-family:var(--ff);
font-size:28px;font-weight:700;
color:var(--dk);line-height:1.2;letter-spacing:-.2px
}
.fw-hp-blog__title em{
font-style:normal;color:var(--bl);
font-family: 'Outfit', sans-serif;
}


/* ═══════════════════════════════════
TABS + ARROWS ROW (single line)
Desktop: tabs left, arrows right
Mobile: tabs only, scroll
═══════════════════════════════════ */

.fw-hp-blog__nav{
position:relative;z-index:1;
padding:0 28px;margin-bottom:20px;
display:flex;align-items:center;gap:12px
}

.fw-hp-blog__tabs-track{
display:flex;gap:8px;overflow-x:auto;flex:1;
scrollbar-width:none;-ms-overflow-style:none;
padding-bottom:2px
}
.fw-hp-blog__tabs-track::-webkit-scrollbar{display:none}

/* Tab pill */
.fw-hp-blog__tab{
display:inline-flex;align-items:center;gap:6px;
padding:7px 16px;font-size:12px;font-weight:500;
color:var(--g6);background:var(--wh);
border:1.5px solid var(--g2);border-radius:100px;
white-space:nowrap;transition:all .25s;flex-shrink:0
}
.fw-hp-blog__tab:hover{
border-color:var(--bl);color:var(--bl);background:var(--bl-bg)
}

/* Tab icon — IMG with CSS filter */
.fw-hp-blog__tab-icon{
width:15px;height:15px;flex-shrink:0;object-fit:contain;
transition:filter .25s;
filter:brightness(0) saturate(100%) invert(45%) sepia(5%) saturate(300%) hue-rotate(180deg)
}
.fw-hp-blog__tab:hover .fw-hp-blog__tab-icon{
filter:brightness(0) saturate(100%) invert(30%) sepia(90%) saturate(1200%) hue-rotate(190deg)
}

/* Active tab — brand blue */
.fw-hp-blog__tab.active{
background:var(--bl);border-color:var(--bl);color:var(--wh);
font-weight:600;box-shadow:0 4px 14px rgba(20,120,200,.2)
}
.fw-hp-blog__tab.active .fw-hp-blog__tab-icon{
filter:brightness(0) invert(1)
}

.fw-hp-blog__tab-count{
font-size:9.5px;font-weight:700;
background:rgba(0,0,0,.06);padding:1px 6px;border-radius:100px
}
.fw-hp-blog__tab.active .fw-hp-blog__tab-count{
background:rgba(255,255,255,.2)
}

/* Arrow buttons */
.fw-hp-blog__arrows{display:flex;gap:6px;flex-shrink:0}
.fw-hp-blog__arrow{
width:34px;height:34px;border-radius:50%;
border:1.5px solid var(--g3);
display:flex;align-items:center;justify-content:center;
font-size:12px;color:var(--g6);
transition:all .2s;background:var(--wh)
}
.fw-hp-blog__arrow:hover{
background:var(--bl);color:var(--wh);border-color:var(--bl)
}
.fw-hp-blog__arrow.swiper-button-disabled{
opacity:.3;pointer-events:none
}


/* ═══════════════════════════════════
SWIPER CONTAINER
═══════════════════════════════════ */

.fw-hp-blog .swiper{
padding:2px 28px 6px;overflow:visible
}
.fw-hp-blog .swiper-slide{
width:236px;height:auto;
transition:opacity .4s ease,transform .4s ease
}

/* Filter animation — hide/show slides */
.fw-hp-blog .swiper-slide.hiding{
opacity:0;transform:scale(.95)
}


/* ═══════════════════════════════════
SKELETON LOADER
Shown before images load
═══════════════════════════════════ */

@keyframes fw-hp-blog-shimmer{
0%{background-position:-400px 0}
100%{background-position:400px 0}
}
.fw-hp-blog__skel{
background:linear-gradient(90deg,var(--g1) 25%,var(--g2) 50%,var(--g1) 75%);
background-size:800px 100%;
animation:fw-hp-blog-shimmer 1.5s ease infinite
}
.fw-hp-blog__skel--img{
height:148px;border-radius:var(--rx) var(--rx) 0 0
}
.fw-hp-blog__skel--text{
height:12px;border-radius:6px;margin-bottom:8px
}
.fw-hp-blog__skel--text.w70{width:70%}
.fw-hp-blog__skel--text.w90{width:90%}
.fw-hp-blog__skel--text.w50{width:50%}
.fw-hp-blog__skel--circle{
width:26px;height:26px;border-radius:50%
}

/* Skeleton card wrapper */
.fw-hp-blog__card-skel{
border-radius:var(--rx);overflow:hidden;
background:var(--wh);border:1px solid rgba(15,23,42,.06)
}
.fw-hp-blog__card-skel .body{padding:14px}
.fw-hp-blog__card-skel .row{display:flex;align-items:center;gap:8px;margin-bottom:10px}

/* Hide skeleton when loaded */
.fw-hp-blog.loaded .fw-hp-blog__card-skel{display:none}
.fw-hp-blog:not(.loaded) .fw-hp-blog__card{opacity:0}
.fw-hp-blog.loaded .fw-hp-blog__card{opacity:1}


/* ═══════════════════════════════════
CARD — clean, compact, premium
═══════════════════════════════════ */

.fw-hp-blog__card{
height:100%;border-radius:var(--rx);overflow:hidden;
background:var(--wh);display:flex;flex-direction:column;
transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s cubic-bezier(.22,1,.36,1),border-color .3s;
border:1px solid rgba(15,23,42,.06)
}
.fw-hp-blog__card:hover{
transform:translateY(-5px);
box-shadow:0 12px 36px rgba(15,23,42,.09);
border-color:transparent
}

/* ── Image area — only badge + bookmark ── */
.fw-hp-blog__card-img{
position:relative;height:148px;overflow:hidden;display:block
}
.fw-hp-blog__card-img img{
width:100%;height:100%;object-fit:cover;
transition:transform .5s cubic-bezier(.22,1,.36,1)
}
.fw-hp-blog__card:hover .fw-hp-blog__card-img img{
transform:scale(1.05)
}

/* Category badge — IMG icon */
.fw-hp-blog__card-cat{
position:absolute;top:10px;left:10px;
padding:4px 10px;border-radius:100px;
font-size:10px;font-weight:600;color:var(--wh);
z-index:2;display:inline-flex;align-items:center;gap:4px;
letter-spacing:.2px;
/* White text sits on a photograph, so the pill carries its own ground:
   --bl-d holds white at 5.79:1 (plain --bl and --pk do not reach 4.5). */
background:var(--bl-d);
box-shadow:0 4px 12px -4px color-mix(in srgb, var(--dk) 45%, transparent)
}
.fw-hp-blog__card-cat img{
width:12px;height:12px;object-fit:contain;
filter:brightness(0) invert(1)
}

/* Bookmark — checkbox toggle */

/* ── Card body ── */
.fw-hp-blog__card-body{
padding:14px 14px 16px;flex:1;display:flex;flex-direction:column
}

/* Author row */
.fw-hp-blog__card-author{
display:flex;align-items:center;gap:8px;margin-bottom:10px
}
.fw-hp-blog__card-avatar{
width:26px;height:26px;border-radius:50%;object-fit:cover;flex-shrink:0
}
.fw-hp-blog__card-aname{
font-size:11px;font-weight:600;color:var(--dk);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.fw-hp-blog__card-dot{
width:3px;height:3px;border-radius:50%;background:var(--g3);flex-shrink:0
}
.fw-hp-blog__card-adate{
font-size:10px;color:var(--g4);white-space:nowrap;flex-shrink:0
}

/* Title — Outfit bold, readable */
.fw-hp-blog__card-title{
font-family:var(--ff);
font-size:14px;font-weight:700;
color:var(--dk);line-height:1.4;
margin-bottom:6px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;text-overflow:ellipsis;
transition:color .3s
}
.fw-hp-blog__card:hover .fw-hp-blog__card-title{color:var(--bl)}

/* Excerpt — ellipsis overflow */
.fw-hp-blog__card-excerpt{
font-size:11.5px;color:var(--g5);line-height:1.55;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;text-overflow:ellipsis;
flex:1;margin-bottom:12px
}

/* Footer — read time left, read more right */
.fw-hp-blog__card-foot{
display:flex;justify-content:space-between;align-items:center;
padding-top:10px;border-top:1px solid var(--g1)
}
.fw-hp-blog__card-meta{
font-size:10px;color:var(--g4);display:flex;align-items:center;gap:4px
}
.fw-hp-blog__card-meta i{font-size:10px}
.fw-hp-blog__card-link{
font-size:11px;font-weight:600;color:var(--bl);
display:flex;align-items:center;gap:4px;
transition:color .25s,gap .25s
}
.fw-hp-blog__card:hover .fw-hp-blog__card-link{color:var(--pk);gap:6px}
.fw-hp-blog__card-link i{font-size:9px;transition:transform .2s}
.fw-hp-blog__card:hover .fw-hp-blog__card-link i{transform:translateX(2px)}

/* Section foot — the way out to /blog, right-aligned on the section gutters.
   Its own class: .fw-hp-blog__card-link belongs to the card and reacts to a
   card hover, which a section link must not. */
.fw-hp-blog__foot{
position:relative;z-index:1;
padding:0 28px;margin-top:18px;
display:flex;justify-content:flex-end
}
.fw-hp-blog__more{
display:inline-flex;align-items:center;gap:7px;
font-size:13px;font-weight:600;color:var(--bl);
transition:gap .25s,color .25s
}
.fw-hp-blog__more:hover{color:var(--pk);gap:10px}
.fw-hp-blog__more i{font-size:11px}


/* ═══════════════════════════════════
RESPONSIVE BREAKPOINTS
═══════════════════════════════════ */

/* 13" Laptop ≤1366px */
@media(max-width:1366px){
.fw-hp-blog__title{font-size:26px}
.fw-hp-blog .swiper-slide{width:224px}
.fw-hp-blog__card-img{height:138px}
}

/* Small laptop ≤1024px */
@media(max-width:1024px){
.fw-hp-blog{padding:36px 0 40px}
.fw-hp-blog__title{font-size:23px}
.fw-hp-blog .swiper-slide{width:210px}
.fw-hp-blog__card-img{height:128px}
.fw-hp-blog__card-title{font-size:13px}
}

/* Tablet ≤768px */
@media(max-width:768px){
.fw-hp-blog{padding:30px 0 34px}
.fw-hp-blog__top{padding:0 14px;margin-bottom:14px}
.fw-hp-blog__title{font-size:21px}
.fw-hp-blog__nav{padding:0 14px;margin-bottom:16px}
.fw-hp-blog__foot{padding:0 14px;margin-top:14px}
.fw-hp-blog__more{font-size:12px}
.fw-hp-blog__arrows{display:none}
.fw-hp-blog__tab{padding:6px 12px;font-size:11px;gap:5px}
.fw-hp-blog__tab-icon{width:13px;height:13px}
.fw-hp-blog .swiper{padding:2px 14px 4px}
.fw-hp-blog .swiper-slide{width:195px}
.fw-hp-blog__card-img{height:118px}
.fw-hp-blog__card-body{padding:10px 12px 12px}
.fw-hp-blog__card-avatar{width:22px;height:22px}
.fw-hp-blog__card-aname{font-size:10px}
.fw-hp-blog__card-adate{font-size:9px}
.fw-hp-blog__card-author{gap:6px;margin-bottom:8px}
.fw-hp-blog__card-title{font-size:12.5px;margin-bottom:4px}
.fw-hp-blog__card-excerpt{font-size:10.5px;margin-bottom:10px}
.fw-hp-blog__card-foot{padding-top:8px}
.fw-hp-blog__card-meta{font-size:9px}
.fw-hp-blog__card-link{font-size:10px}
}

/* Mobile ≤480px */
@media(max-width:480px){
.fw-hp-blog{padding:24px 0 28px}
.fw-hp-blog__label{font-size:9px;letter-spacing:2px;margin-bottom:7px}
.fw-hp-blog__title{font-size:18px}
.fw-hp-blog__nav{margin-bottom:14px}
.fw-hp-blog__tab{padding:5px 10px;font-size:10px}
.fw-hp-blog__tab-icon{width:12px;height:12px}
.fw-hp-blog .swiper-slide{width:170px}
.fw-hp-blog__card-img{height:105px}
.fw-hp-blog__card-cat{font-size:8.5px;padding:3px 7px;gap:3px}
.fw-hp-blog__card-cat img{width:10px;height:10px}
.fw-hp-blog__card-body{padding:8px 10px 10px}
.fw-hp-blog__card-avatar{width:20px;height:20px}
.fw-hp-blog__card-aname{font-size:9.5px}
.fw-hp-blog__card-dot{width:2px;height:2px}
.fw-hp-blog__card-adate{font-size:8.5px}
.fw-hp-blog__card-author{gap:5px;margin-bottom:6px}
.fw-hp-blog__card-title{font-size:11.5px}
.fw-hp-blog__card-excerpt{font-size:9.5px;margin-bottom:8px}
.fw-hp-blog__card-link{font-size:9.5px}
.fw-hp-blog__card-meta{font-size:8.5px}
}

/* Small mobile ≤360px — native app feel */
@media(max-width:360px){
.fw-hp-blog{padding:20px 0 24px}
.fw-hp-blog__top{padding:0 10px;margin-bottom:10px}
.fw-hp-blog__title{font-size:16px}
.fw-hp-blog__label{display:none}
.fw-hp-blog__nav{padding:0 10px;margin-bottom:10px}
.fw-hp-blog__foot{padding:0 10px;margin-top:10px}
.fw-hp-blog__tab{padding:4px 8px;font-size:9px}
.fw-hp-blog__tab-count{display:none}
.fw-hp-blog .swiper{padding:2px 10px 2px}
.fw-hp-blog .swiper-slide{width:150px}
.fw-hp-blog__card-img{height:90px}
.fw-hp-blog__card-cat{font-size:7.5px;padding:2px 6px}
.fw-hp-blog__card-body{padding:6px 8px 8px}
.fw-hp-blog__card-author{margin-bottom:5px}
.fw-hp-blog__card-adate{display:none}
.fw-hp-blog__card-dot{display:none}
.fw-hp-blog__card-title{font-size:10.5px}
.fw-hp-blog__card-excerpt{display:none}
.fw-hp-blog__card-foot{padding-top:5px}
}

/* ── Entrance animation ── */
.fw-hp-blog__card{opacity:0;transform:translateY(14px)}
.fw-hp-blog.in-view .fw-hp-blog__card{
opacity:1;transform:translateY(0);
transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)
}
.fw-hp-blog.in-view .swiper-slide:nth-child(1) .fw-hp-blog__card{transition-delay:.03s}
.fw-hp-blog.in-view .swiper-slide:nth-child(2) .fw-hp-blog__card{transition-delay:.06s}
.fw-hp-blog.in-view .swiper-slide:nth-child(3) .fw-hp-blog__card{transition-delay:.09s}
.fw-hp-blog.in-view .swiper-slide:nth-child(4) .fw-hp-blog__card{transition-delay:.12s}
.fw-hp-blog.in-view .swiper-slide:nth-child(5) .fw-hp-blog__card{transition-delay:.15s}
.fw-hp-blog.in-view .swiper-slide:nth-child(6) .fw-hp-blog__card{transition-delay:.18s}
.fw-hp-blog.in-view .swiper-slide:nth-child(7) .fw-hp-blog__card{transition-delay:.21s}
.fw-hp-blog.in-view .swiper-slide:nth-child(8) .fw-hp-blog__card{transition-delay:.24s}
.fw-hp-blog__top,.fw-hp-blog__nav{
opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s
}
.fw-hp-blog.in-view .fw-hp-blog__top,.fw-hp-blog.in-view .fw-hp-blog__nav{
opacity:1;transform:translateY(0)
}
.fw-hp-blog.in-view .fw-hp-blog__nav{transition-delay:.05s}

/* ═══════════════════════════════════════════════════════════
   HOMEPAGE CLINIC SECTION (fw-hp-cln)
   ─ Swiper 11.0.5 carousel (parallel to fw-hp-blog)
   ─ City-based filter tabs
   ─ Premium clinic cards: image + success/rating pills + logo
     overlap + specialty chips + stats row + CTA
   ═══════════════════════════════════════════════════════════ */

/* The cards carry no border, so the ground has to do that work: a tinted
   ground + a soft resting shadow + the radius, all three together, or a
   white card on a white band simply dissolves. */
.fw-hp-cln{
padding:44px 0 48px;
position:relative;
overflow:hidden;
background:var(--paper)
}

/* ── Decorative background — pink whisper top-left, blue whisper bottom-right ── */
.fw-hp-cln::before{
content:'';position:absolute;width:480px;height:480px;border-radius:50%;
background:radial-gradient(circle,color-mix(in srgb, var(--pk) 4%, transparent) 0%,transparent 70%);
top:-160px;left:-120px;pointer-events:none
}
.fw-hp-cln::after{
content:'';position:absolute;width:480px;height:480px;border-radius:50%;
background:radial-gradient(circle,color-mix(in srgb, var(--bl) 4%, transparent) 0%,transparent 70%);
bottom:-180px;right:-140px;pointer-events:none
}


/* ═══════════════════════════════════
   SECTION HEADER
   ═══════════════════════════════════ */

.fw-hp-cln__top{
position:relative;z-index:1;
padding:0 28px;margin-bottom:20px
}

/* Label */
.fw-hp-cln__label{
display:inline-flex;align-items:center;gap:8px;
font-size:10.5px;font-weight:600;text-transform:uppercase;
letter-spacing:2.5px;color:var(--pk);margin-bottom:10px
}
.fw-hp-cln__label span{
width:20px;height:1.5px;background:var(--pk);border-radius:2px
}

/* Title + see-all row */
.fw-hp-cln__head-row{
display:flex;align-items:center;justify-content:space-between;gap:16px
}

.fw-hp-cln__title{
font-family:var(--ff);
font-size:28px;font-weight:700;
color:var(--dk);line-height:1.2;letter-spacing:-.2px
}
.fw-hp-cln__title em{
font-style:normal;color:var(--pk);
font-family:'Outfit',sans-serif
}

.fw-hp-cln__see-all{
display:inline-flex;align-items:center;gap:6px;
font-size:13px;font-weight:600;color:var(--bl);
white-space:nowrap;flex-shrink:0;
transition:gap .25s,color .25s
}
.fw-hp-cln__see-all:hover{color:var(--bl-d);gap:9px}
.fw-hp-cln__see-all i{font-size:11px;transition:transform .25s}
.fw-hp-cln__see-all:hover i{transform:translateX(2px)}


/* ═══════════════════════════════════
   TABS + ARROWS ROW
   ═══════════════════════════════════ */

.fw-hp-cln__nav{
position:relative;z-index:1;
padding:0 28px;margin-bottom:22px;
display:flex;align-items:center;gap:12px
}

/* The track scrolls horizontally and is driven by the arrows to its
   right — nine care areas never fit. gap:0 because the tabs are parted by
   a hairline of their own, not by air. */
.fw-hp-cln__tabs-track{
display:flex;gap:0;overflow-x:auto;flex:1;
scroll-behavior:smooth;
scrollbar-width:none;-ms-overflow-style:none;
padding-bottom:2px
}
.fw-hp-cln__tabs-track::-webkit-scrollbar{display:none}

/* Tab — no border of its own; a hairline DIVIDER separates it from the
   one before, and only the chosen tab takes a filled chip. */
.fw-hp-cln__tab{
position:relative;
display:inline-flex;align-items:center;gap:6px;
padding:7px 16px;font-size:12px;font-weight:500;
color:var(--g6);background:none;
border:0;border-radius:8px;
white-space:nowrap;transition:color .25s,background .25s;flex-shrink:0
}
.fw-hp-cln__tab + .fw-hp-cln__tab::before{
content:'';position:absolute;left:0;top:50%;
transform:translateY(-50%);
width:1px;height:16px;background:var(--g2)
}
/* A divider must never run down the edge of a filled or hovered chip. */
.fw-hp-cln__tab:hover::before,
.fw-hp-cln__tab.active::before,
.fw-hp-cln__tab:hover + .fw-hp-cln__tab::before,
.fw-hp-cln__tab.active + .fw-hp-cln__tab::before{opacity:0}
.fw-hp-cln__tab:hover{
color:var(--pk);background:var(--pk-bg)
}

/* Care-area glyph — the house icon set (includes/service/icons.php), the
   same mark the clinic directory prints for the area. Stroked in
   currentColor, so it follows the pill's text: gray by default, pink on
   hover, white when active, with no per-state rule. */
.fw-hp-cln__tab-icon{
width:15px;height:15px;flex-shrink:0;
fill:none;stroke:currentColor;stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round;overflow:visible
}
/* The UPLOADED care-area icon (23 Sep 2026) — a picture, not a stroked glyph,
   so it takes none of the currentColor treatment above. The artwork is a
   tinted rounded tile with the mark already inset, so it is shown whole at
   the size the mega menu uses (.fw-mega__cg-icon img) rather than shrunk to
   glyph size. The house glyph still stands in when none is uploaded. */
.fw-hp-cln__tab-icon--img{
width:19px;height:19px;
stroke:none;fill:none;object-fit:contain;border-radius:5px
}

/* Active tab — a filled chip on the same 8px corner. --pk-d, not --pk:
   the raw brand pink is 3.95:1 behind a 12px white label. */
.fw-hp-cln__tab.active{
background:var(--pk-d);color:var(--wh);
font-weight:600;box-shadow:var(--pk-glow)
}

.fw-hp-cln__tab-count{
font-size:9.5px;font-weight:700;
font-variant-numeric:tabular-nums;
background:var(--ink-a06);padding:1px 6px;border-radius:5px
}
.fw-hp-cln__tab.active .fw-hp-cln__tab-count{
background:var(--wh-a20)
}

/* Arrow buttons — these scroll the CARE-AREA TRACK, which overflows at
   every width. The deck below is dragged, so it needs no arrows of its
   own, and a control that scrolls nothing is hidden outright. */
.fw-hp-cln__arrows{display:flex;gap:6px;flex-shrink:0}
.fw-hp-cln__arrows[hidden]{display:none}
.fw-hp-cln__arrow{
width:34px;height:34px;border-radius:50%;
border:1.5px solid var(--g3);
display:flex;align-items:center;justify-content:center;
font-size:12px;color:var(--g6);
transition:all .2s;background:var(--wh);cursor:pointer
}
.fw-hp-cln__arrow:hover{
background:var(--pk-d);color:var(--wh);border-color:var(--pk-d);
box-shadow:var(--pk-glow-sm)
}
.fw-hp-cln__arrow:disabled{
opacity:.3;pointer-events:none
}


/* ═══════════════════════════════════
   SWIPER CONTAINER
   ═══════════════════════════════════ */

.fw-hp-cln .swiper{
padding:6px 28px 10px;overflow:visible
}
.fw-hp-cln .swiper-slide{
width:286px;height:auto;
transition:opacity .4s ease,transform .4s ease
}
.fw-hp-cln .swiper-slide.hiding{
opacity:0;transform:scale(.96)
}


/* ═══════════════════════════════════
   SKELETON LOADER
   ═══════════════════════════════════ */

@keyframes fw-hp-cln-shimmer{
0%{background-position:-400px 0}
100%{background-position:400px 0}
}
.fw-hp-cln__skel{
background:linear-gradient(90deg,var(--g1) 25%,var(--g2) 50%,var(--g1) 75%);
background-size:800px 100%;
animation:fw-hp-cln-shimmer 1.5s ease infinite
}
.fw-hp-cln__skel--img{
height:160px;border-radius:var(--rx) var(--rx) 0 0
}
.fw-hp-cln__skel--text{
height:12px;border-radius:6px;margin-bottom:10px
}
.fw-hp-cln__skel--text.w70{width:70%}
.fw-hp-cln__skel--text.w90{width:90%}
.fw-hp-cln__skel--text.w50{width:50%}

/* Skeleton + real card occupy the SAME slot inside the slide — skeleton
   is absolutely positioned over the card, so when it disappears there's
   no layout collapse (no "the card jumps up" effect). */
.fw-hp-cln .swiper-slide{position:relative}
.fw-hp-cln__card-skel{
position:absolute;inset:0;z-index:5;
border-radius:var(--rx);overflow:hidden;
background:var(--wh);border:0;box-shadow:var(--sh);
transition:opacity .35s ease,visibility .35s ease
}
.fw-hp-cln__card-skel .body{padding:16px}

/* When the images are loaded, fade the skeleton out gracefully —
   no `display:none` swap, no layout shift. */
.fw-hp-cln.loaded .fw-hp-cln__card-skel{opacity:0;visibility:hidden;pointer-events:none}
.fw-hp-cln:not(.loaded) .fw-hp-cln__card{opacity:0}
.fw-hp-cln.loaded .fw-hp-cln__card{opacity:1}


/* ═══════════════════════════════════
   CARD — premium clinic card
   ═══════════════════════════════════ */

.fw-hp-cln__card{
height:100%;border-radius:var(--rx);overflow:hidden;
background:var(--wh);display:flex;flex-direction:column;
transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s cubic-bezier(.22,1,.36,1);
border:0;box-shadow:var(--sh);
position:relative
}
.fw-hp-cln__card:hover{
transform:translateY(-6px);
box-shadow:var(--sh2)
}

/* ── Image area ──
   Use `> img` (direct child) so nested icons inside child <span> tags
   (e.g. the specialty-tag icon) don't accidentally inherit width:100% /
   height:100% and blow up to fill the whole card image. */
.fw-hp-cln__card-img{
position:relative;height:160px;overflow:hidden;display:block
}
.fw-hp-cln__card-img > img{
width:100%;height:100%;object-fit:cover;
transition:transform .55s cubic-bezier(.22,1,.36,1)
}
.fw-hp-cln__card:hover .fw-hp-cln__card-img > img{
transform:scale(1.06)
}
/* Soft dark gradient at the image bottom — makes overlay logo readable */
.fw-hp-cln__card-img::after{
content:'';position:absolute;left:0;right:0;bottom:0;height:62%;
background:linear-gradient(to top,rgba(15,23,42,.55) 0%,rgba(15,23,42,.05) 70%,transparent 100%);
pointer-events:none
}

/* Specialty tag (top-left) — color-coded per FW vertical */
.fw-hp-cln__card-tag{
position:absolute;top:11px;left:11px;z-index:2;
display:inline-flex;align-items:center;gap:5px;
padding:4px 10px;border-radius:100px;
font-size:10px;font-weight:700;color:var(--wh);
text-transform:uppercase;letter-spacing:.5px;
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
box-shadow:0 2px 8px rgba(15,23,42,.16)
}
.fw-hp-cln__card-tag i{font-size:11px;line-height:1}
.fw-hp-cln__card-tag-icon{
width:12px;height:12px;flex-shrink:0;
fill:none;stroke:currentColor;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round;overflow:visible
}
/* The uploaded artwork already carries its own tinted tile, so it needs no
   disc behind it — one only ate the padding and hid the mark. It reads as a
   pale badge against the coloured pill. */
.fw-hp-cln__card-tag-icon--img{
width:16px;height:16px;
stroke:none;object-fit:contain;border-radius:4px
}
/* One tone per care area, by its position in the taxonomy
   (includes/clinic/prepare_home_clinics.php), so an area added in Manage
   is coloured without an edit here. Each shade carries the white label at
   4.5:1 or better — the plain brand colours cannot (see :root inks). */
.fw-hp-cln__card-tag--t1{background:color-mix(in srgb,var(--pk-d) 95%,transparent);box-shadow:var(--pk-glow-sm)}
.fw-hp-cln__card-tag--t2{background:color-mix(in srgb,var(--bl-d) 95%,transparent);box-shadow:var(--bl-glow-sm)}
.fw-hp-cln__card-tag--t3{background:color-mix(in srgb,var(--pu-d) 95%,transparent);box-shadow:var(--pu-glow-sm)}
.fw-hp-cln__card-tag--t4{background:color-mix(in srgb,var(--co-dd) 95%,transparent);box-shadow:var(--co-glow-sm)}
.fw-hp-cln__card-tag--t5{background:color-mix(in srgb,var(--mt-dd) 95%,transparent);box-shadow:var(--mt-glow-sm)}
.fw-hp-cln__card-tag--t6{background:color-mix(in srgb,var(--go-dd) 95%,transparent);box-shadow:var(--go-glow-sm)}
.fw-hp-cln__card-tag--t7{background:color-mix(in srgb,var(--pk-dd) 95%,transparent);box-shadow:var(--pk-glow-sm)}
.fw-hp-cln__card-tag--t8{background:color-mix(in srgb,var(--g7) 95%,transparent)}

/* Rating pill (top-right) — score, then the review count.
   The score sits beside the address rather than on the photograph, so the
   corner is free for the save control and the two no longer compete.
   Three things still make the figure read as a FIGURE rather than as body copy:
   the house face stated explicitly (the Canvas theme would otherwise hand
   the <em> a serif), tabular lining numerals so 4.9 and 4.0 occupy the
   same width down a row of cards, and a score set a clear step larger
   than its review count. */
.fw-hp-cln__card-rate{
display:inline-flex;align-items:baseline;gap:3px;flex-shrink:0;
font-family:var(--ff);
font-size:12px;font-weight:700;line-height:1;
letter-spacing:-.2px;color:var(--dk);
font-variant-numeric:tabular-nums lining-nums
}
.fw-hp-cln__card-rate i{
font-size:9.5px;color:var(--go);line-height:1;
align-self:center;margin-right:1px
}
.fw-hp-cln__card-rate em{
font-family:var(--ff);
font-style:normal;font-size:9.5px;font-weight:600;
line-height:1;letter-spacing:0;color:var(--g5);
font-variant-numeric:tabular-nums lining-nums
}

/* ── Save toggle ── SHARED by every homepage deck: clinic, doctor, article
   and service. One definition, one class (.fw-hp-save), one listener in
   user/custom/js/dashboard-state.js — the decks differ only in placement.

   GG's pin control in FW grammar, with a heart. Two icons are printed and
   one is hidden, rather than one icon whose class is swapped: the outline
   and the fill are different glyphs, so switching a class on the BUTTON is
   enough and nothing has to rewrite the mark itself.

   It must be a SIBLING of the card's photo link, never a child of it: a
   control nested inside an anchor is invalid, and every click would open
   the card instead of saving it. Each card therefore needs position:relative.

   Account-owned saved state is confirmed through the shared User operation.
   aria-pressed and .is-saved follow that state after writes and on reload,
   including cards rebuilt by the homepage filters. */
.fw-hp-save{
position:absolute;top:11px;right:11px;z-index:3;
width:32px;height:32px;padding:0;border:0;
display:flex;align-items:center;justify-content:center;
border-radius:50%;cursor:pointer;
font-size:14px;line-height:1;color:var(--g6);
background:color-mix(in srgb, var(--wh) 95%, transparent);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
box-shadow:0 2px 8px var(--ink-a12);
transition:color .25s,background .25s,transform .25s,box-shadow .25s
}
.fw-hp-save:hover{
color:var(--pk);background:var(--wh);transform:scale(1.1)
}
.fw-hp-save:focus-visible{
outline:2px solid var(--pk);outline-offset:2px
}
.fw-hp-save .fw-hp-save__on{display:none}
.fw-hp-save .fw-hp-save__off{display:inline-block}

/* Saved — the fill takes over and beats once. */
.fw-hp-save.is-saved{
color:var(--pk-d);background:var(--pk-l);
box-shadow:var(--pk-glow-sm)
}
.fw-hp-save.is-saved .fw-hp-save__off{display:none}
.fw-hp-save.is-saved .fw-hp-save__on{
display:inline-block;
animation:fw-hp-beat .45s cubic-bezier(.22,1,.36,1)
}
@keyframes fw-hp-beat{
0%{transform:scale(.4);opacity:0}
45%{transform:scale(1.3);opacity:1}
70%{transform:scale(.92)}
100%{transform:scale(1);opacity:1}
}
@media(prefers-reduced-motion:reduce){
.fw-hp-save{transition:color .25s,background .25s}
.fw-hp-save:hover{transform:none}
.fw-hp-save.is-saved .fw-hp-save__on{animation:none}
}
/* The article card's own chrome sits on a 10px inset, so the heart matches it. */
.fw-hp-blog__card .fw-hp-save{top:10px;right:10px}

/* The four cards that carry the control must establish the containing block.
   .fw-hp-cln__card and .fw-hp-dr__card already declare it. */
.fw-hp-blog__card,
.fw-hp-svc__card{position:relative}

/* ── Card body ── (no more overlapping logo, so less top padding) */
.fw-hp-cln__card-body{
padding:16px 16px 16px;flex:1;display:flex;flex-direction:column
}

/* Clinic name + inline branch/location on one line.
   Name reads bold, branch reads lighter — visually one statement. */
.fw-hp-cln__card-name{
font-family:var(--ff);
font-size:15px;font-weight:700;
color:var(--dk);line-height:1.35;
margin-bottom:8px;letter-spacing:-.15px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;text-overflow:ellipsis;
transition:color .3s
}
.fw-hp-cln__card:hover .fw-hp-cln__card-name{color:var(--bl-ink)}

/* Address row — flag + full address on the left, the score on the right.
   The address takes the slack and truncates (min-width:0 is what lets a
   flex child shrink below its text), so a long one never pushes the score
   out of the card or on to a second line. */
.fw-hp-cln__card-meta{
display:flex;align-items:center;justify-content:space-between;
gap:10px;margin-bottom:10px
}
/* Block, not a flex row: text-overflow cannot clip the anonymous flex item
   a bare text node becomes, so the flag rides along as inline content. */
.fw-hp-cln__card-loc{
display:block;min-width:0;
font-size:10.5px;font-weight:500;color:var(--g5);
line-height:1.4;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.fw-hp-cln__card-loc img{
width:14px;height:10px;object-fit:cover;
border-radius:2px;display:inline-block;
vertical-align:-1px;margin-right:4px
}

/* Open-status row — pulsing green dot + status text + hours */
.fw-hp-cln__card-status{
display:flex;align-items:center;gap:6px;
font-size:10.5px;font-weight:500;color:var(--g6);
margin-bottom:10px;letter-spacing:.1px
}
.fw-hp-cln__card-status b{
font-weight:700;color:var(--mt-d)
}
.fw-hp-cln__card-status-dot{
width:7px;height:7px;border-radius:50%;
background:var(--mt-d);flex-shrink:0;
box-shadow:0 0 0 0 rgba(56,181,142,.55);
animation:fw-hp-cln-pulse 2s ease-out infinite
}
@keyframes fw-hp-cln-pulse{
0%{box-shadow:0 0 0 0 rgba(56,181,142,.55)}
70%{box-shadow:0 0 0 8px rgba(56,181,142,0)}
100%{box-shadow:0 0 0 0 rgba(56,181,142,0)}
}
/* Outside its hours the clinic is not "live": a still gray dot, no pulse. */
.fw-hp-cln__card-status--off b{color:var(--g6)}
.fw-hp-cln__card-status--off .fw-hp-cln__card-status-dot{
background:var(--g4);box-shadow:none;animation:none
}

/* Service chips */
.fw-hp-cln__card-chips{
display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px
}
.fw-hp-cln__card-chip{
display:inline-flex;align-items:center;
padding:3px 9px;border-radius:6px;
font-size:10px;font-weight:600;color:var(--bl-d);
background:var(--bl-bg);
letter-spacing:.2px
}

/* CTA button — blue. --bl is 4.02:1 behind a white label, so the button
   sits on --bl-d and deepens again on hover. */
.fw-hp-cln__card-cta{
display:inline-flex;align-items:center;justify-content:center;gap:6px;
padding:10px 16px;border-radius:10px;
font-size:12.5px;font-weight:600;color:var(--wh);
background:var(--bl-d);
transition:background .25s,gap .25s,box-shadow .25s;
margin-top:auto
}
.fw-hp-cln__card-cta:hover{background:var(--bl-dd);gap:9px;box-shadow:var(--bl-glow-sm)}
.fw-hp-cln__card-cta i{font-size:11px;transition:transform .2s}
.fw-hp-cln__card-cta:hover i{transform:translateX(2px)}


/* ═══════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════ */

/* 13" laptop ≤1366px */
@media(max-width:1366px){
.fw-hp-cln__title{font-size:26px}
.fw-hp-cln .swiper-slide{width:268px}
.fw-hp-cln__card-img{height:150px}
}

/* Small laptop ≤1024px */
@media(max-width:1024px){
.fw-hp-cln{padding:36px 0 40px}
.fw-hp-cln__title{font-size:23px}
.fw-hp-cln .swiper-slide{width:256px}
.fw-hp-cln__card-img{height:140px}
}

/* Tablet ≤768px */
@media(max-width:768px){
.fw-hp-cln{padding:30px 0 34px}
.fw-hp-cln__top{padding:0 14px;margin-bottom:14px}
.fw-hp-cln__title{font-size:21px}
.fw-hp-cln__see-all{font-size:12px}
.fw-hp-cln__nav{padding:0 14px;margin-bottom:18px}
.fw-hp-cln__arrows{display:none}
.fw-hp-cln__tab{padding:6px 12px;font-size:11px;gap:5px}
.fw-hp-cln__tab-icon--img{width:17px;height:17px;border-radius:4px}
.fw-hp-cln .swiper{padding:6px 14px 8px}
.fw-hp-cln .swiper-slide{width:240px}
.fw-hp-cln__card-img{height:130px}
.fw-hp-cln__card-body{padding:14px 14px 14px}
.fw-hp-cln__card-name{font-size:13.5px}
.fw-hp-cln__card-tag{font-size:9.5px;padding:3px 9px}
}

/* Mobile ≤480px */
@media(max-width:480px){
.fw-hp-cln{padding:24px 0 28px}
.fw-hp-cln__label{font-size:9px;letter-spacing:2px;margin-bottom:7px}
.fw-hp-cln__title{font-size:18px}
.fw-hp-cln__see-all span{display:none}
.fw-hp-cln__nav{margin-bottom:14px}
.fw-hp-cln__tab{padding:5px 10px;font-size:10px}
.fw-hp-cln .swiper-slide{width:215px}
.fw-hp-cln__card-img{height:118px}
.fw-hp-cln__card-tag{font-size:9px;padding:3px 8px;letter-spacing:.4px}
.fw-hp-cln__card-tag-icon--img{width:14px;height:14px}
.fw-hp-cln__card-rate{font-size:11px}
.fw-hp-cln__card-rate em{font-size:9px}
.fw-hp-save{width:30px;height:30px;font-size:13px;top:9px;right:9px}
.fw-hp-cln__card-body{padding:12px 12px 12px}
.fw-hp-cln__card-name{font-size:13px;margin-bottom:6px}
.fw-hp-cln__card-loc{font-size:9.5px;margin-bottom:8px}
.fw-hp-cln__card-status{font-size:9.5px;margin-bottom:8px}
.fw-hp-cln__card-chip{font-size:9px;padding:2px 7px}
.fw-hp-cln__card-cta{padding:9px 14px;font-size:11.5px}
}

/* Small mobile ≤360px */
@media(max-width:360px){
.fw-hp-cln{padding:20px 0 24px}
.fw-hp-cln__top{padding:0 10px;margin-bottom:10px}
.fw-hp-cln__title{font-size:16px}
.fw-hp-cln__label{display:none}
.fw-hp-cln__nav{padding:0 10px;margin-bottom:12px}
.fw-hp-cln__tab{padding:4px 8px;font-size:9px}
.fw-hp-cln__tab-count{display:none}
.fw-hp-cln .swiper{padding:6px 10px 8px}
.fw-hp-cln .swiper-slide{width:190px}
.fw-hp-cln__card-img{height:104px}
.fw-hp-cln__card-chips{margin-bottom:10px}
}

/* ── Entrance animation ──
   Cards fade in only — NO translateY slide. The old slide-up combined
   with the still-visible skeleton looked like a layout shift, so we
   keep just the opacity transition (managed in the loaded/in-view
   rules above) and let the staggered transition-delays handle rhythm. */
.fw-hp-cln__card{
transition:opacity .5s cubic-bezier(.22,1,.36,1)
}
.fw-hp-cln.in-view .swiper-slide:nth-child(1) .fw-hp-cln__card{transition-delay:.03s}
.fw-hp-cln.in-view .swiper-slide:nth-child(2) .fw-hp-cln__card{transition-delay:.06s}
.fw-hp-cln.in-view .swiper-slide:nth-child(3) .fw-hp-cln__card{transition-delay:.09s}
.fw-hp-cln.in-view .swiper-slide:nth-child(4) .fw-hp-cln__card{transition-delay:.12s}
.fw-hp-cln.in-view .swiper-slide:nth-child(5) .fw-hp-cln__card{transition-delay:.15s}
.fw-hp-cln.in-view .swiper-slide:nth-child(6) .fw-hp-cln__card{transition-delay:.18s}
.fw-hp-cln.in-view .swiper-slide:nth-child(7) .fw-hp-cln__card{transition-delay:.21s}
.fw-hp-cln.in-view .swiper-slide:nth-child(8) .fw-hp-cln__card{transition-delay:.24s}
.fw-hp-cln__top,.fw-hp-cln__nav{
opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s
}
.fw-hp-cln.in-view .fw-hp-cln__top,.fw-hp-cln.in-view .fw-hp-cln__nav{
opacity:1;transform:translateY(0)
}
.fw-hp-cln.in-view .fw-hp-cln__nav{transition-delay:.05s}


/* ═══════════════════════════════════════════════════════════
   HOMEPAGE DOCTOR SECTION (fw-hp-dr)
   ─ Swiper carousel (sibling of clinic + blog)
   ─ Specialty filter tabs (same 4 verticals as clinic)
   ─ Premium doctor cards: portrait image + verified-pro chip +
     star rating · name · spec · quals · stats · langs · CTA
   ═══════════════════════════════════════════════════════════ */

.fw-hp-dr{
padding:44px 0 48px;
position:relative;
overflow:hidden;
background:var(--g0)
}

/* Decorative whisper — blue this time so the rhythm alternates
   (white clinic → off-white doctor → white aipower etc.) */
.fw-hp-dr::before{
content:'';position:absolute;width:480px;height:480px;border-radius:50%;
background:radial-gradient(circle,rgba(20,120,200,.04) 0%,transparent 70%);
top:-160px;right:-120px;pointer-events:none
}
.fw-hp-dr::after{
content:'';position:absolute;width:480px;height:480px;border-radius:50%;
background:radial-gradient(circle,rgba(233,52,138,.025) 0%,transparent 70%);
bottom:-180px;left:-140px;pointer-events:none
}


/* ── Section header ── */
.fw-hp-dr__top{
position:relative;z-index:1;
padding:0 28px;margin-bottom:20px
}
.fw-hp-dr__label{
display:inline-flex;align-items:center;gap:8px;
font-size:10.5px;font-weight:600;text-transform:uppercase;
letter-spacing:2.5px;color:var(--bl);margin-bottom:10px
}
.fw-hp-dr__label span{
width:20px;height:1.5px;background:var(--bl);border-radius:2px
}
.fw-hp-dr__head-row{
display:flex;align-items:center;justify-content:space-between;gap:16px
}
.fw-hp-dr__title{
font-family:var(--ff);
font-size:28px;font-weight:700;
color:var(--dk);line-height:1.2;letter-spacing:-.2px
}
.fw-hp-dr__title em{
font-style:normal;color:var(--bl);
font-family:'Outfit',sans-serif
}
.fw-hp-dr__see-all{
display:inline-flex;align-items:center;gap:6px;
font-size:13px;font-weight:600;color:var(--bl);
white-space:nowrap;flex-shrink:0;
transition:gap .25s,color .25s
}
.fw-hp-dr__see-all:hover{color:var(--bl-d);gap:9px}
.fw-hp-dr__see-all i{font-size:11px;transition:transform .25s}
.fw-hp-dr__see-all:hover i{transform:translateX(2px)}


/* ── Tabs + arrows ── */
.fw-hp-dr__nav{
position:relative;z-index:1;
padding:0 28px;margin-bottom:22px;
display:flex;align-items:center;gap:12px
}
.fw-hp-dr__tabs-track{
display:flex;gap:8px;overflow-x:auto;flex:1;
scrollbar-width:none;-ms-overflow-style:none;
padding-bottom:2px
}
.fw-hp-dr__tabs-track::-webkit-scrollbar{display:none}
.fw-hp-dr__tab{
display:inline-flex;align-items:center;gap:6px;
padding:7px 16px;font-size:12px;font-weight:500;
color:var(--g6);background:var(--wh);
border:1.5px solid var(--g2);border-radius:100px;
white-space:nowrap;transition:all .25s;flex-shrink:0
}
.fw-hp-dr__tab:hover{
border-color:var(--bl);color:var(--bl);background:var(--bl-bg)
}
/* Care-area glyph — the house icon set, stroked in currentColor so it
   follows the pill's text with no per-state rule. */
.fw-hp-dr__tab-icon{
width:15px;height:15px;flex-shrink:0;
fill:none;stroke:currentColor;stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round;overflow:visible
}
/* The UPLOADED care-area icon (23 Sep 2026). It used to be run through
   filter:brightness(0), which flattens an image to one solid colour: the
   artwork is a tinted tile with the mark already inset and 96% of it is
   opaque, so every care area came out as the SAME filled square and looked
   hard-coded. No filter now — the tile is shown whole at the size the mega
   menu uses (.fw-mega__cg-icon img), exactly as the clinic deck shows it. */
.fw-hp-dr__tab-icon--img{
width:19px;height:19px;
stroke:none;fill:none;object-fit:contain;border-radius:5px
}
.fw-hp-dr__tab.active{
background:var(--bl);border-color:var(--bl);color:var(--wh);
font-weight:600;box-shadow:0 4px 14px rgba(20,120,200,.22)
}
.fw-hp-dr__tab.active .fw-hp-dr__tab-icon{
stroke:currentColor
}
.fw-hp-dr__tab-count{
font-size:9.5px;font-weight:700;
background:rgba(0,0,0,.06);padding:1px 6px;border-radius:100px
}
.fw-hp-dr__tab.active .fw-hp-dr__tab-count{
background:rgba(255,255,255,.22)
}
.fw-hp-dr__arrows{display:flex;gap:6px;flex-shrink:0}
/* display:flex beats the `hidden` attribute, so state it explicitly —
   a track that does not overflow gets no arrows rather than two dead ones. */
.fw-hp-dr__arrows[hidden]{display:none}
.fw-hp-dr__arrow{
width:34px;height:34px;border-radius:50%;
border:1.5px solid var(--g3);
display:flex;align-items:center;justify-content:center;
font-size:12px;color:var(--g6);
transition:all .2s;background:var(--wh);cursor:pointer
}
.fw-hp-dr__arrow:hover{
background:var(--bl);color:var(--wh);border-color:var(--bl)
}
.fw-hp-dr__arrow:disabled{opacity:.3;pointer-events:none}


/* ── Swiper container ── */
.fw-hp-dr .swiper{
padding:6px 28px 10px;overflow:visible
}
.fw-hp-dr .swiper-slide{
width:244px;height:auto;position:relative;
transition:opacity .4s ease,transform .4s ease
}
.fw-hp-dr .swiper-slide.hiding{
opacity:0;transform:scale(.96)
}


/* ── Skeleton ── (absolute overlay so card doesn't shift) */
@keyframes fw-hp-dr-shimmer{
0%{background-position:-400px 0}
100%{background-position:400px 0}
}
.fw-hp-dr__skel{
background:linear-gradient(90deg,var(--g1) 25%,var(--g2) 50%,var(--g1) 75%);
background-size:800px 100%;
animation:fw-hp-dr-shimmer 1.5s ease infinite
}
.fw-hp-dr__skel--img{
height:280px;border-radius:var(--rx) var(--rx) 0 0
}
.fw-hp-dr__skel--text{
height:12px;border-radius:6px;margin-bottom:10px
}
.fw-hp-dr__skel--text.w70{width:70%}
.fw-hp-dr__skel--text.w90{width:90%}
.fw-hp-dr__skel--text.w50{width:50%}
.fw-hp-dr__card-skel{
position:absolute;inset:0;z-index:5;
border-radius:var(--rx);overflow:hidden;
background:var(--wh);border:1px solid rgba(15,23,42,.06);
transition:opacity .35s ease,visibility .35s ease
}
.fw-hp-dr__card-skel .body{padding:16px}
.fw-hp-dr.loaded .fw-hp-dr__card-skel{opacity:0;visibility:hidden;pointer-events:none}
.fw-hp-dr:not(.loaded) .fw-hp-dr__card{opacity:0}
.fw-hp-dr.loaded .fw-hp-dr__card{opacity:1}


/* ── Doctor card ── */
.fw-hp-dr__card{
height:100%;border-radius:var(--rx);overflow:hidden;
background:var(--wh);display:flex;flex-direction:column;
transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s cubic-bezier(.22,1,.36,1),border-color .3s;
border:1px solid rgba(15,23,42,.06);
position:relative
}
.fw-hp-dr__card:hover{
transform:translateY(-6px);
box-shadow:0 16px 40px rgba(15,23,42,.10);
border-color:transparent
}

/* Portrait image — tall, premium framing */
.fw-hp-dr__card-img{
position:relative;height:280px;overflow:hidden;display:block
}
.fw-hp-dr__card-img > img{
width:100%;height:100%;object-fit:cover;object-position:center 20%;
transition:transform .6s cubic-bezier(.22,1,.36,1)
}
.fw-hp-dr__card:hover .fw-hp-dr__card-img > img{
transform:scale(1.05)
}
/* Bottom gradient — improves readability of bottom-placed chips */
.fw-hp-dr__card-img::after{
content:'';position:absolute;left:0;right:0;bottom:0;height:55%;
background:linear-gradient(to top,rgba(15,23,42,.50) 0%,rgba(15,23,42,.05) 70%,transparent 100%);
pointer-events:none
}

/* Specialty tag (top-left) — color-coded per vertical */
.fw-hp-dr__card-tag{
position:absolute;top:11px;left:11px;z-index:2;
display:inline-flex;align-items:center;gap:5px;
padding:4px 10px;border-radius:100px;
font-size:10px;font-weight:700;color:var(--wh);
text-transform:uppercase;letter-spacing:.5px;
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
box-shadow:0 2px 8px rgba(15,23,42,.16)
}
.fw-hp-dr__card-tag-icon{
width:12px;height:12px;flex-shrink:0;
fill:none;stroke:currentColor;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round;overflow:visible
}
/* Same as the tab: no filter, the uploaded tile carries its own colour. */
.fw-hp-dr__card-tag-icon--img{
width:16px;height:16px;
stroke:none;object-fit:contain;border-radius:4px
}
/* One tone per care area, by its position in the taxonomy, matching the
   clinic deck. The four named modifiers this replaced (--fertility,
   --maternity, --gyno, --pediatric) were never printed by the section, so
   every pill carried white text on no background at all. */
.fw-hp-dr__card-tag--t1{background:color-mix(in srgb,var(--pk-d) 95%,transparent);box-shadow:var(--pk-glow-sm)}
.fw-hp-dr__card-tag--t2{background:color-mix(in srgb,var(--bl-d) 95%,transparent);box-shadow:var(--bl-glow-sm)}
.fw-hp-dr__card-tag--t3{background:color-mix(in srgb,var(--pu-d) 95%,transparent);box-shadow:var(--pu-glow-sm)}
.fw-hp-dr__card-tag--t4{background:color-mix(in srgb,var(--co-dd) 95%,transparent);box-shadow:var(--co-glow-sm)}
.fw-hp-dr__card-tag--t5{background:color-mix(in srgb,var(--mt-dd) 95%,transparent);box-shadow:var(--mt-glow-sm)}
.fw-hp-dr__card-tag--t6{background:color-mix(in srgb,var(--go-dd) 95%,transparent);box-shadow:var(--go-glow-sm)}
.fw-hp-dr__card-tag--t7{background:color-mix(in srgb,var(--pk-dd) 95%,transparent);box-shadow:var(--pk-glow-sm)}
.fw-hp-dr__card-tag--t8{background:color-mix(in srgb,var(--g7) 95%,transparent)}

/* Rating pill (top-right) */
.fw-hp-dr__card-rate{
position:absolute;top:11px;right:11px;z-index:2;
display:inline-flex;align-items:center;gap:4px;
padding:4px 10px;border-radius:100px;
font-size:11.5px;font-weight:700;color:var(--dk);
background:rgba(255,255,255,.96);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
box-shadow:0 2px 8px rgba(15,23,42,.12)
}
.fw-hp-dr__card-rate i{font-size:10px;color:var(--go);line-height:1}
.fw-hp-dr__card-rate em{
font-style:normal;font-size:10px;font-weight:600;
color:var(--g4);letter-spacing:.1px;margin-left:1px
}

/* "FW Verified" pro chip (bottom of image) — every doctor is FW-vetted */
.fw-hp-dr__card-pro{
position:absolute;bottom:11px;left:11px;z-index:2;
display:inline-flex;align-items:center;gap:4px;
padding:4px 9px;border-radius:6px;
font-size:9.5px;font-weight:700;color:var(--wh);
background:rgba(20,120,200,.92);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
text-transform:uppercase;letter-spacing:.4px;
box-shadow:0 2px 8px rgba(20,120,200,.32)
}
.fw-hp-dr__card-pro i{font-size:11px;line-height:1}


/* ── Card body ── */
.fw-hp-dr__card-body{
padding:14px 14px 14px;flex:1;display:flex;flex-direction:column
}

/* Doctor name */
.fw-hp-dr__card-name{
font-family:var(--ff);
font-size:15px;font-weight:700;
color:var(--dk);line-height:1.3;
margin-bottom:2px;letter-spacing:-.15px;
transition:color .3s
}
.fw-hp-dr__card:hover .fw-hp-dr__card-name{color:var(--bl)}

/* Specialty line */
.fw-hp-dr__card-spec{
font-size:11.5px;font-weight:600;color:var(--bl);
margin-bottom:4px;letter-spacing:-.1px
}

/* Qualifications — quieter, smaller */
.fw-hp-dr__card-qual{
font-size:10.5px;font-weight:500;color:var(--g5);
margin-bottom:12px;letter-spacing:.1px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}

/* Stats — inline experience + patients */
.fw-hp-dr__card-meta{
display:flex;align-items:center;gap:10px;
padding:8px 0;margin-bottom:10px;
border-top:1px solid var(--g1);border-bottom:1px solid var(--g1)
}
.fw-hp-dr__card-stat{
flex:1;display:inline-flex;align-items:center;gap:5px;
font-size:10.5px;color:var(--g6);letter-spacing:.1px
}
.fw-hp-dr__card-stat i{font-size:11px;color:var(--bl);line-height:1}
.fw-hp-dr__card-stat b{font-size:11px;font-weight:700;color:var(--dk)}
.fw-hp-dr__card-stat-sep{
width:1px;height:14px;background:var(--g2);flex-shrink:0
}

/* Languages — small chips with flag + code */
.fw-hp-dr__card-langs{
display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px
}
.fw-hp-dr__card-lang{
display:inline-flex;align-items:center;gap:4px;
padding:2px 7px;border-radius:6px;
font-size:9.5px;font-weight:600;color:var(--g6);
background:var(--g0);letter-spacing:.3px
}
.fw-hp-dr__card-lang img{
border-radius:2px;flex-shrink:0;display:inline-block
}

/* CTA — primary blue (matches doctor section accent) */
.fw-hp-dr__card-cta{
display:inline-flex;align-items:center;justify-content:center;gap:6px;
padding:10px 16px;border-radius:10px;
font-size:12.5px;font-weight:600;color:var(--wh);
background:var(--bl);
transition:background .25s,gap .25s,box-shadow .25s;
margin-top:auto
}
.fw-hp-dr__card-cta:hover{background:var(--bl-d);gap:9px;box-shadow:0 4px 14px rgba(20,120,200,.3)}
.fw-hp-dr__card-cta i{font-size:11px;transition:transform .2s}
.fw-hp-dr__card-cta:hover i{transform:translateX(2px)}


/* ── Responsive ── */
@media(max-width:1366px){
.fw-hp-dr__title{font-size:26px}
.fw-hp-dr .swiper-slide{width:232px}
.fw-hp-dr__card-img,.fw-hp-dr__skel--img{height:260px}
}
@media(max-width:1024px){
.fw-hp-dr{padding:36px 0 40px}
.fw-hp-dr__title{font-size:23px}
.fw-hp-dr .swiper-slide{width:222px}
.fw-hp-dr__card-img,.fw-hp-dr__skel--img{height:248px}
}
@media(max-width:768px){
.fw-hp-dr{padding:30px 0 34px}
.fw-hp-dr__top{padding:0 14px;margin-bottom:14px}
.fw-hp-dr__title{font-size:21px}
.fw-hp-dr__see-all{font-size:12px}
.fw-hp-dr__nav{padding:0 14px;margin-bottom:18px}
.fw-hp-dr__arrows{display:none}
.fw-hp-dr__tab{padding:6px 12px;font-size:11px;gap:5px}
.fw-hp-dr .swiper{padding:6px 14px 8px}
.fw-hp-dr .swiper-slide{width:210px}
.fw-hp-dr__card-img,.fw-hp-dr__skel--img{height:228px}
.fw-hp-dr__card-name{font-size:13.5px}
.fw-hp-dr__card-spec{font-size:11px}
.fw-hp-dr__card-qual{font-size:9.5px}
.fw-hp-dr__card-tag{font-size:9.5px;padding:3px 9px}
}
@media(max-width:480px){
.fw-hp-dr{padding:24px 0 28px}
.fw-hp-dr__label{font-size:9px;letter-spacing:2px;margin-bottom:7px}
.fw-hp-dr__title{font-size:18px}
.fw-hp-dr__see-all span{display:none}
.fw-hp-dr__nav{margin-bottom:14px}
.fw-hp-dr__tab{padding:5px 10px;font-size:10px}
.fw-hp-dr .swiper-slide{width:192px}
.fw-hp-dr__card-img,.fw-hp-dr__skel--img{height:204px}
.fw-hp-dr__card-rate{font-size:10.5px;padding:3px 8px}
.fw-hp-dr__card-rate em{font-size:9px}
.fw-hp-dr__card-body{padding:12px 12px 12px}
.fw-hp-dr__card-name{font-size:13px}
.fw-hp-dr__card-spec{font-size:10.5px}
.fw-hp-dr__card-qual{font-size:9px;margin-bottom:10px}
.fw-hp-dr__card-meta{padding:6px 0;margin-bottom:8px}
.fw-hp-dr__card-stat{font-size:9.5px}
.fw-hp-dr__card-stat b{font-size:10px}
.fw-hp-dr__card-langs{gap:4px;margin-bottom:10px}
.fw-hp-dr__card-lang{font-size:9px;padding:2px 6px}
.fw-hp-dr__card-cta{padding:9px 14px;font-size:11.5px}
}
@media(max-width:360px){
.fw-hp-dr{padding:20px 0 24px}
.fw-hp-dr__top{padding:0 10px;margin-bottom:10px}
.fw-hp-dr__title{font-size:16px}
.fw-hp-dr__label{display:none}
.fw-hp-dr__nav{padding:0 10px;margin-bottom:12px}
.fw-hp-dr__tab{padding:4px 8px;font-size:9px}
.fw-hp-dr__tab-count{display:none}
.fw-hp-dr .swiper{padding:6px 10px 8px}
.fw-hp-dr .swiper-slide{width:170px}
.fw-hp-dr__card-img,.fw-hp-dr__skel--img{height:184px}
.fw-hp-dr__card-meta{flex-wrap:wrap;gap:6px}
.fw-hp-dr__card-stat-sep{display:none}
}

/* Entrance — opacity-only fade-in matching clinic.
   (Skeleton overlays the card so no slide-up needed.) */
.fw-hp-dr__card{
transition:opacity .5s cubic-bezier(.22,1,.36,1)
}
.fw-hp-dr.in-view .swiper-slide:nth-child(1) .fw-hp-dr__card{transition-delay:.03s}
.fw-hp-dr.in-view .swiper-slide:nth-child(2) .fw-hp-dr__card{transition-delay:.06s}
.fw-hp-dr.in-view .swiper-slide:nth-child(3) .fw-hp-dr__card{transition-delay:.09s}
.fw-hp-dr.in-view .swiper-slide:nth-child(4) .fw-hp-dr__card{transition-delay:.12s}
.fw-hp-dr.in-view .swiper-slide:nth-child(5) .fw-hp-dr__card{transition-delay:.15s}
.fw-hp-dr.in-view .swiper-slide:nth-child(6) .fw-hp-dr__card{transition-delay:.18s}
.fw-hp-dr.in-view .swiper-slide:nth-child(7) .fw-hp-dr__card{transition-delay:.21s}
.fw-hp-dr.in-view .swiper-slide:nth-child(8) .fw-hp-dr__card{transition-delay:.24s}
.fw-hp-dr__top,.fw-hp-dr__nav{
opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s
}
.fw-hp-dr.in-view .fw-hp-dr__top,.fw-hp-dr.in-view .fw-hp-dr__nav{
opacity:1;transform:translateY(0)
}
.fw-hp-dr.in-view .fw-hp-dr__nav{transition-delay:.05s}




/* ═══════════════════════════════════════════════════════════════════════
   §  FIND CARE NEAR YOU  (fw-hp-loc)
   Markup: includes/home/location.php   ·   JS: custom/js/home.js §7

   The city card is a PLATE: a white card carrying a rectangular
   photograph on the minimum radius, a circular flag seal straddling the
   photograph's foot, the city name, and a two-cell figure rail split by a
   hairline. The figures are CLINICS and DOCTORS — both are counts we
   actually hold; there is no per-city rating in the data and the card
   does not invent one.

   Foundation: full-bleed with 28px / 14px gutters, no max-width on any
   section or line of text, a bright ground lit by blurred brand spots,
   and every colour a :root token (alpha through color-mix, never a typed
   rgba). Cards are the user's explicit request and the stated exception
   to the no-boxes rule; every card in the deck is exactly the same
   height — the grid rows see to that, and the rail is pushed to the foot
   with margin-top:auto so a short city name cannot shorten a plate.

   The four card dimensions are custom properties on the section, so a
   breakpoint re-sizes the whole deck by redeclaring them — the markup
   never changes and there is no second copy of a card anywhere.

   Scroller: native CSS scroll-snap over a 2-row grid (NOT Swiper), so the
   end of the list respects content width exactly — no trailing gap.
   ═══════════════════════════════════════════════════════════════════════ */

.fw-hp-loc{
--loc-col:226px;   /* plate width          */
--loc-row:230px;   /* plate height (fixed) */
--loc-shot:138px;  /* photograph height    */
--loc-pad:12px;    /* inset for the TEXT, not the photograph */
--loc-gut:28px;    /* page gutter          */
position:relative;
overflow:hidden;
padding:50px 0 54px;
/* The plates carry no border, so the ground has to do that work: a
   tinted ground + a soft resting shadow + the radius, all three, or a
   white plate on a white band simply dissolves. */
background:var(--paper)
}


/* ── Ambient brand light. Its own layer, a SIBLING of the content: an
   overflowing ancestor would make itself the scroll container. ── */
.fw-hp-loc__fx{
position:absolute;inset:0;z-index:0;
overflow:hidden;pointer-events:none
}
.fw-hp-loc__spot{
position:absolute;display:block;
aspect-ratio:1;border-radius:50%;
filter:blur(74px)
}
.fw-hp-loc__spot--p{
top:-24%;left:-2%;width:clamp(240px,24vw,420px);
background:color-mix(in srgb, var(--pk) 14%, transparent);
animation:fwLocSpotA 27s ease-in-out infinite
}
.fw-hp-loc__spot--b{
bottom:-22%;right:7%;width:clamp(200px,20vw,340px);
background:color-mix(in srgb, var(--bl) 16%, transparent);
animation:fwLocSpotB 33s ease-in-out infinite
}
.fw-hp-loc__spot--m{
top:36%;right:36%;width:clamp(140px,13vw,220px);
background:color-mix(in srgb, var(--mt) 18%, transparent);
animation:fwLocSpotA 39s ease-in-out infinite
}
@keyframes fwLocSpotA{
0%,100%{transform:translate3d(0,0,0)}
50%{transform:translate3d(26px,-20px,0)}
}
@keyframes fwLocSpotB{
0%,100%{transform:translate3d(0,0,0)}
50%{transform:translate3d(-30px,18px,0)}
}


/* ── Section header ── */
.fw-hp-loc__top{
position:relative;z-index:1;
padding:0 var(--loc-gut);margin-bottom:22px
}
.fw-hp-loc__label{
display:inline-flex;align-items:center;gap:8px;
font-size:10.5px;font-weight:600;text-transform:uppercase;
letter-spacing:2.5px;color:var(--bl-ink);margin-bottom:10px
}
.fw-hp-loc__label span{
width:20px;height:1.5px;background:var(--bl);border-radius:2px
}
.fw-hp-loc__head-row{
display:flex;align-items:center;justify-content:space-between;gap:16px
}
.fw-hp-loc__title{
font-family:var(--ff);
font-size:30px;font-weight:700;
color:var(--dk);line-height:1.15;letter-spacing:-.4px
}
/* The Canvas theme sets em{font-family:<serif>} — reset it explicitly. */
.fw-hp-loc__title em{
font-style:normal;color:var(--pk);
font-family:var(--ff)
}
.fw-hp-loc__see-all{
display:inline-flex;align-items:center;gap:6px;
font-size:13px;font-weight:600;color:var(--dk);
white-space:nowrap;flex-shrink:0;
transition:gap .25s,color .25s
}
.fw-hp-loc__see-all:hover{color:var(--pk-ink);gap:9px}
.fw-hp-loc__see-all i{font-size:11px;transition:transform .25s}
.fw-hp-loc__see-all:hover i{transform:translateX(2px)}


/* ── Filter tabs + scroller arrows ── */
.fw-hp-loc__nav{
position:relative;z-index:1;
padding:0 var(--loc-gut);margin-bottom:20px;
display:flex;align-items:center;gap:12px
}
.fw-hp-loc__tabs-track{
display:flex;gap:8px;overflow-x:auto;flex:1;
scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px
}
.fw-hp-loc__tabs-track::-webkit-scrollbar{display:none}
.fw-hp-loc__tab{
display:inline-flex;align-items:center;gap:7px;
padding:7px 16px;font-size:12px;font-weight:500;
color:var(--g6);background:var(--wh);
border:1.5px solid var(--g2);border-radius:100px;
white-space:nowrap;transition:all .25s;flex-shrink:0
}
.fw-hp-loc__tab i{font-size:13px;line-height:1}
/* Flags are sized here, never with width=/height= in the markup. */
.fw-hp-loc__tab-flag{
width:16px;aspect-ratio:4/3;object-fit:cover;
border-radius:2px;flex-shrink:0;display:inline-block;
box-shadow:0 0 0 1px var(--ink-a06)
}
.fw-hp-loc__tab:hover{
border-color:var(--pk-ring);color:var(--dk);background:var(--pk-wash)
}
/* Pink is the ACTION, so the chosen filter carries it. --pk-d, not --pk:
   the raw brand pink is 3.95:1 behind a 12px white label. */
.fw-hp-loc__tab.active{
background:var(--pk-d);border-color:var(--pk-d);color:var(--wh);
font-weight:600;box-shadow:var(--pk-glow)
}
.fw-hp-loc__tab-count{
font-size:9.5px;font-weight:700;
background:var(--ink-a06);padding:1px 6px;border-radius:100px
}
.fw-hp-loc__tab.active .fw-hp-loc__tab-count{
background:var(--wh-a20)
}
.fw-hp-loc__arrows{display:flex;gap:6px;flex-shrink:0}
.fw-hp-loc__arrows[hidden]{display:none}
.fw-hp-loc__arrow{
width:36px;height:36px;border-radius:50%;
border:1.5px solid var(--g3);
display:flex;align-items:center;justify-content:center;
font-size:13px;color:var(--g7);
transition:all .2s;background:var(--wh);cursor:pointer
}
.fw-hp-loc__arrow:hover{
background:var(--pk-d);color:var(--wh);border-color:var(--pk-d);
box-shadow:var(--pk-glow-sm)
}
.fw-hp-loc__arrow:disabled{opacity:.35;pointer-events:none}


/* ── The deck ── */
.fw-hp-loc__scroller{
position:relative;z-index:1;
display:grid;
grid-template-rows:repeat(2,var(--loc-row));
grid-auto-flow:column;
grid-auto-columns:var(--loc-col);
column-gap:16px;
row-gap:16px;
overflow-x:auto;
overflow-y:hidden;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
-ms-overflow-style:none;
/* Top padding is the room the hover lift rises into; without it the
   scroller's overflow-y:hidden shears the top off every raised plate. */
padding:8px var(--loc-gut) 20px;
scroll-padding-left:var(--loc-gut)
}
.fw-hp-loc__scroller::-webkit-scrollbar{display:none}
/* Drag to scroll, the way the clinic deck does. Snapping and smooth
   scrolling are both suspended while a drag is in progress: mandatory snap
   fights the pointer, and smooth behaviour makes every move lag a frame
   behind the hand. They come back on release, so the deck still settles on
   a column. custom/js/home.js §7 adds and removes .is-dragging. */
.fw-hp-loc__scroller{cursor:grab}
.fw-hp-loc__scroller.is-dragging{
cursor:grabbing;
scroll-snap-type:none;scroll-behavior:auto;
user-select:none;-webkit-user-select:none
}
.fw-hp-loc__scroller.is-dragging .fw-hp-loc__card{pointer-events:none}


/* ── The arch plate ── */
.fw-hp-loc__card{
position:relative;
display:flex;flex-direction:column;align-items:center;
height:100%;padding:0;
background:var(--wh);
border-radius:var(--rx);
box-shadow:var(--sh);
overflow:hidden;
text-decoration:none;color:inherit;
scroll-snap-align:start;
transition:transform .38s cubic-bezier(.22,1,.36,1),
           box-shadow .38s cubic-bezier(.22,1,.36,1)
}
.fw-hp-loc__card:hover{
transform:translateY(-5px);
box-shadow:var(--sh2)
}

/* The light that gathers behind the seal and the city name on hover —
   the same ambient device as the section, at plate scale. Blue, not
   pink: it is the family the section label already speaks in. */
.fw-hp-loc__card::before{
content:'';position:absolute;z-index:0;
top:calc(var(--loc-shot) - 46px);left:50%;
width:170px;aspect-ratio:1;
transform:translateX(-50%);
border-radius:50%;
background:color-mix(in srgb, var(--bl) 15%, transparent);
filter:blur(40px);
opacity:0;transition:opacity .4s;
pointer-events:none
}
.fw-hp-loc__card:hover::before{opacity:1}

/* The line that wipes across the foot on hover. */
.fw-hp-loc__card::after{
content:'';position:absolute;z-index:2;
left:0;right:0;bottom:0;height:3px;
background:var(--bl);
transform:scaleX(0);transform-origin:50% 50%;
transition:transform .38s cubic-bezier(.22,1,.36,1)
}
.fw-hp-loc__card:hover::after{transform:scaleX(1)}

/* The dome. Its box is held by an explicit height, so the photograph
   never has width=/height= in the markup and never shifts on load. */
/* Full bleed: no radius of its own and no inset on any side. The plate
   is 16px round with overflow:hidden, so the card's own corners clip the
   top of the photograph — a radius here would only round it twice. The
   TEXT below is inset by --loc-pad instead; the photograph is not. */
.fw-hp-loc__shot{
position:relative;z-index:1;
display:flex;align-items:center;justify-content:center;
width:100%;height:var(--loc-shot);flex-shrink:0;
border-radius:0;
overflow:hidden;
background:linear-gradient(160deg, var(--pk-l2) 0%, var(--bl-l2) 100%)
}
/* Empty state. Most cities will have no photograph on day one, so the
   dome is designed for that case first: the city's initial on a brand
   wash. The photograph, when there is one, covers it. */
.fw-hp-loc__shot-ini{
font-family:var(--ff);
font-size:calc(var(--loc-shot) * .46);font-weight:700;line-height:1;
color:var(--wh);
text-shadow:0 2px 12px var(--ink-a12);
user-select:none
}
.fw-hp-loc__shot img{
position:absolute;inset:0;
display:block;width:100%;height:100%;object-fit:cover;
/* A broken src must not print its alt text over the initial plate. */
color:transparent;
transition:transform .7s cubic-bezier(.22,1,.36,1)
}
.fw-hp-loc__card:hover .fw-hp-loc__shot img{transform:scale(1.07)}

/* Identity row — the flag at the left, the place beside it. */
.fw-hp-loc__id{
position:relative;z-index:1;
display:flex;align-items:center;gap:9px;
width:100%;min-width:0;
padding:10px var(--loc-pad) 0;
text-align:left
}

/* THE FLAG IS NEVER CROPPED. A national flag is shown whole, in its own
   rectangle, at the proportion the asset is drawn at — static/flags is
   uniformly 4:3. It is not masked into a circle, not object-fit:cover
   and not squashed: aspect-ratio holds the box open before load, and
   `contain` guarantees the whole field stays visible whatever ratio an
   asset turns out to use. The hairline is what stops a white-fielded
   flag (Japan) dissolving into the plate. */
.fw-hp-loc__flag{
flex-shrink:0;
width:26px;aspect-ratio:4/3;height:auto;
object-fit:contain;
display:block;border-radius:2px;
box-shadow:0 0 0 1px var(--ink-a12)
}

.fw-hp-loc__place{
display:flex;flex-direction:column;min-width:0
}
.fw-hp-loc__region{
max-width:100%;
font-size:9px;font-weight:600;line-height:1;
letter-spacing:1.6px;text-transform:uppercase;
color:var(--gy-ink);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.fw-hp-loc__city{
max-width:100%;margin-top:4px;
font-family:var(--ff);
font-size:16.5px;font-weight:700;line-height:1.15;
letter-spacing:-.3px;color:var(--dk);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
transition:color .25s
}
.fw-hp-loc__card:hover .fw-hp-loc__city{color:var(--bl-ink)}

/* Figure rail — pushed to the foot, so every plate reads on one baseline */
.fw-hp-loc__rail{
position:relative;z-index:1;
margin-top:auto;width:100%;
display:flex;align-items:center;justify-content:space-between;gap:10px;
border-top:1px solid var(--g2);
padding:10px var(--loc-pad) 12px
}
.fw-hp-loc__stat{
display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0
}
/* The figures sit on the plate's own margins — clinics under the flag,
   doctors on the right edge. With that much distance between them a
   divider has nothing left to separate, so there isn't one. */
.fw-hp-loc__stat:first-child{align-items:flex-start}
.fw-hp-loc__stat:last-child{align-items:flex-end}
.fw-hp-loc__stat-n{
display:inline-flex;align-items:center;
font-family:var(--ff);
font-size:15px;font-weight:700;line-height:1;color:var(--dk);
font-variant-numeric:tabular-nums
}
/* A city we hold no doctors for prints an em dash, never a bare 0. */
.fw-hp-loc__stat-n--none{color:var(--g4)}
.fw-hp-loc__stat-l{
font-size:8px;font-weight:600;line-height:1;
letter-spacing:1.2px;text-transform:uppercase;color:var(--g5)
}


/* ── Filter hiding (display:none, the grid reflows its columns) ── */
.fw-hp-loc__card.is-hidden{display:none}


/* ── Responsive — one declaration block re-sizes the whole deck ── */
@media(max-width:1366px){
.fw-hp-loc{--loc-col:218px;--loc-row:224px;--loc-shot:132px}
.fw-hp-loc__title{font-size:28px}
}
@media(max-width:1024px){
.fw-hp-loc{--loc-col:208px;--loc-row:218px;--loc-shot:126px;padding:42px 0 46px}
.fw-hp-loc__title{font-size:24px}
.fw-hp-loc__spot{filter:blur(48px)}
.fw-hp-loc__spot--m{display:none}
}
@media(max-width:768px){
.fw-hp-loc{--loc-col:214px;--loc-row:256px;--loc-shot:164px;--loc-gut:14px;padding:34px 0 38px}
.fw-hp-loc__top{margin-bottom:14px}
.fw-hp-loc__title{font-size:22px}
.fw-hp-loc__see-all{font-size:12px}
.fw-hp-loc__nav{margin-bottom:18px}
.fw-hp-loc__arrows{display:none}
.fw-hp-loc__tab{padding:6px 12px;font-size:11px;gap:6px}
/* One row on a phone: two short rows of small plates read as a wall,
   and a single band lets each plate carry a real photograph. */
.fw-hp-loc__scroller{grid-template-rows:var(--loc-row);column-gap:12px;row-gap:0}
.fw-hp-loc__city{font-size:15.5px}
}
@media(max-width:480px){
.fw-hp-loc{--loc-col:194px;--loc-row:242px;--loc-shot:152px;padding:28px 0 32px}
.fw-hp-loc__label{font-size:9px;letter-spacing:2px;margin-bottom:7px}
.fw-hp-loc__title{font-size:19px}
.fw-hp-loc__see-all span{display:none}
.fw-hp-loc__nav{margin-bottom:14px}
.fw-hp-loc__tab{padding:5px 10px;font-size:10px}
.fw-hp-loc__scroller{column-gap:10px;row-gap:0}
.fw-hp-loc__flag{width:23px}
.fw-hp-loc__city{font-size:14.5px}
.fw-hp-loc__stat-n{font-size:13.5px}
}
@media(max-width:360px){
.fw-hp-loc{--loc-col:172px;--loc-row:226px;--loc-shot:138px;--loc-pad:10px;--loc-gut:10px;padding:24px 0 28px}
.fw-hp-loc__top{margin-bottom:10px}
.fw-hp-loc__title{font-size:17px}
.fw-hp-loc__label{display:none}
.fw-hp-loc__nav{margin-bottom:12px}
.fw-hp-loc__tab{padding:4px 8px;font-size:9px}
.fw-hp-loc__tab-count{display:none}
.fw-hp-loc__scroller{column-gap:8px;row-gap:0}
.fw-hp-loc__region{letter-spacing:1.4px}
.fw-hp-loc__city{font-size:13.5px}
}


/* ── Entrance ── */
.fw-hp-loc__card{opacity:0}
.fw-hp-loc.in-view .fw-hp-loc__card{
opacity:1;transition:opacity .5s cubic-bezier(.22,1,.36,1),
           transform .38s cubic-bezier(.22,1,.36,1),
           box-shadow .38s cubic-bezier(.22,1,.36,1),
           border-color .3s
}
.fw-hp-loc.in-view .fw-hp-loc__card:nth-child(1){transition-delay:.02s}
.fw-hp-loc.in-view .fw-hp-loc__card:nth-child(2){transition-delay:.04s}
.fw-hp-loc.in-view .fw-hp-loc__card:nth-child(3){transition-delay:.06s}
.fw-hp-loc.in-view .fw-hp-loc__card:nth-child(4){transition-delay:.08s}
.fw-hp-loc.in-view .fw-hp-loc__card:nth-child(5){transition-delay:.10s}
.fw-hp-loc.in-view .fw-hp-loc__card:nth-child(6){transition-delay:.12s}
.fw-hp-loc.in-view .fw-hp-loc__card:nth-child(7){transition-delay:.14s}
.fw-hp-loc.in-view .fw-hp-loc__card:nth-child(8){transition-delay:.16s}
.fw-hp-loc.in-view .fw-hp-loc__card:nth-child(n+9){transition-delay:.18s}
.fw-hp-loc.in-view .fw-hp-loc__card:hover{transition-delay:0s}
.fw-hp-loc__top,.fw-hp-loc__nav{
opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s
}
.fw-hp-loc.in-view .fw-hp-loc__top,.fw-hp-loc.in-view .fw-hp-loc__nav{
opacity:1;transform:translateY(0)
}
.fw-hp-loc.in-view .fw-hp-loc__nav{transition-delay:.05s}

@media(prefers-reduced-motion:reduce){
.fw-hp-loc__spot{animation:none}
}


/* ═══════════════════════════════════════════════════════════════════════
   §  SERVICE EXPLORER  (fw-hp-svc)
   Markup: includes/home/service.php   ·   JS: custom/js/home.js §8

   Three levels of the service taxonomy in one band: the care area on TOP,
   its treatments in a LEFT rail, and the services themselves in a swiper
   on the RIGHT. Single markup — at =<1024px the same rail becomes a
   horizontal chip strip above the pane, by CSS alone.

   Foundation: full-bleed with 28px / 14px gutters, no max-width on any
   section or any line of text, bright ground with blurred brand orbs, and
   every colour a :root token (alpha through color-mix, never a typed
   rgba). Cards are the user's explicit request and are the stated
   exception to the no-boxes rule.
   ═══════════════════════════════════════════════════════════════════════ */

.fw-hp-svc{
position:relative;overflow:hidden;
padding:52px 0 56px;
background:var(--wh);
/* One knob for the two panes, so the rail and the pane can never disagree
   about how tall the band is. */
--svc-gut:28px;
--svc-pane-h:492px
}
/* Canvas's style.css puts a serif on every bare <em>. The accent word in
   the title is an <em>, so it needs the family back. <i> is deliberately
   NOT in this rule — Bootstrap Icons need their own family. */
.fw-hp-svc em{font-family:var(--ff);font-style:normal}

/* ── Ambient brand light. A sibling of the content, never an ancestor:
      an overflowing ancestor makes itself the scroll container and any
      position:sticky inside it silently stops sticking. ── */
.fw-hp-svc__fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fw-hp-svc__fx span{
position:absolute;border-radius:50%;
filter:blur(96px);opacity:.5;
animation:svcDrift 32s ease-in-out infinite
}
.fw-hp-svc__fx span:nth-child(1){width:420px;height:420px;top:-140px;left:-90px;background:var(--pk-l);animation-delay:-4s}
.fw-hp-svc__fx span:nth-child(2){width:380px;height:380px;top:38%;right:-120px;background:var(--bl-l);animation-delay:-14s}
.fw-hp-svc__fx span:nth-child(3){width:340px;height:340px;bottom:-150px;left:34%;background:var(--mt-l);animation-delay:-22s}
@keyframes svcDrift{
0%,100%{transform:translate3d(0,0,0) scale(1)}
50%{transform:translate3d(26px,-22px,0) scale(1.08)}
}

/* ── Section header — the house idiom (eyebrow, 28px title with an accent
      word, see-all link), pink here so it alternates with the blue of the
      doctor band that follows. ── */
.fw-hp-svc__top{position:relative;z-index:1;padding:0 var(--svc-gut);margin-bottom:20px}
.fw-hp-svc__label{
display:inline-flex;align-items:center;gap:8px;
font-size:10.5px;font-weight:600;text-transform:uppercase;
letter-spacing:2.5px;color:var(--pk-ink);margin-bottom:10px
}
.fw-hp-svc__label span{width:20px;height:1.5px;background:var(--pk);border-radius:2px}
.fw-hp-svc__label span:last-child{width:8px;opacity:.45}
.fw-hp-svc__head-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.fw-hp-svc__title{
font-family:var(--ff);font-size:28px;font-weight:700;
color:var(--dk);line-height:1.2;letter-spacing:-.2px
}
.fw-hp-svc__title em{color:var(--pk)}
.fw-hp-svc__see-all{
display:inline-flex;align-items:center;gap:6px;
font-size:13px;font-weight:600;color:var(--pk-ink);
white-space:nowrap;flex-shrink:0;transition:gap .25s,color .25s
}
.fw-hp-svc__see-all:hover{color:var(--pk-d);gap:9px}
.fw-hp-svc__see-all i{font-size:11px;transition:transform .25s}
.fw-hp-svc__see-all:hover i{transform:translateX(2px)}
.fw-hp-svc__lede{
margin-top:9px;font-size:14px;line-height:1.6;color:var(--g6);
text-wrap:pretty
}

/* ── LEVEL 1 · care-area strip ───────────────────────────────────────────
   The same control the mega menu's All Services rail is, turned on its
   side: no box, no radius, no pill — plain labels on a hairline, split by
   fading dividers, and the active one carries a pink underline. The rail is
   the tabs' own bottom border, so the underline REPLACES a segment of it
   rather than sitting under a second line.

   Eight care areas never fit, so the strip always overflows. It is driven
   by the shared [data-rail] engine in core.js — the arrows and edge fades
   below are the affordance, and there is no scrollbar. */
.fw-hp-svc__cats{position:relative;z-index:1;padding:0 var(--svc-gut);margin-bottom:22px}
.fw-hp-svc__cats-track{
display:flex;overflow-x:auto;
-webkit-overflow-scrolling:touch;
/* No scrollbar: the affordance is the pair of arrows plus the edge fade,
   the way /service-category.php's jump rail does it. */
scrollbar-width:none;-ms-overflow-style:none
}
.fw-hp-svc__cats-track::-webkit-scrollbar{display:none}
/* Every tab carries the SAME 2px bottom border and the tabs are
   contiguous, so the borders line up into one continuous rail and the
   active mark is a colour change rather than an extra line. Nothing moves
   by a pixel when the selection changes, which a 1px-to-2px swap would. */
.fw-hp-svc__cat{
position:relative;flex-shrink:0;
display:inline-flex;align-items:center;gap:8px;
padding:9px 18px;
font-size:13px;font-weight:500;color:var(--g6);
background:none;border:0;border-radius:0;
border-bottom:2px solid var(--g2);
border-bottom-color:color-mix(in srgb,var(--dk) 8%,transparent);
white-space:nowrap;
transition:color .22s,border-color .22s
}
/* Fading hairline between labels — the same divider idiom the mega menu's
   own columns use, so it dissolves instead of hard-stopping. */
.fw-hp-svc__cat + .fw-hp-svc__cat::before{
content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
width:1px;height:18px;
background:linear-gradient(180deg,transparent,var(--g2) 25%,var(--g2) 75%,transparent)
}
.fw-hp-svc__cat:hover{color:var(--dk)}
.fw-hp-svc__cat-ico{
width:19px;height:19px;flex-shrink:0;object-fit:contain;
/* Eight different flaticon sets are eight different palettes; flattened at
   rest they read as one control, and the active one comes back to colour. */
filter:grayscale(1) opacity(.5);transition:filter .22s
}
.fw-hp-svc__cat:hover .fw-hp-svc__cat-ico{filter:grayscale(1) opacity(.8)}
.fw-hp-svc__cat-num{
font-size:11px;font-weight:600;color:var(--g4);
font-variant-numeric:tabular-nums;
transition:color .22s
}
.fw-hp-svc__cat.is-on{
color:var(--pk-ink);font-weight:600;
border-bottom-color:var(--pk)
}
.fw-hp-svc__cat.is-on .fw-hp-svc__cat-ico{filter:none}
.fw-hp-svc__cat.is-on .fw-hp-svc__cat-num{color:var(--pk)}
.fw-hp-svc__cat:focus-visible{outline:2px solid var(--pk-edge);outline-offset:-2px}

/* ── Rail arrows + edge fades ────────────────────────────────────────────
   Skin only. The behaviour lives once in custom/js/core.js, which sets
   .has-rail when the row overflows and .at-start / .at-end at each end of
   the travel; both this strip and the treatment strip below wear it.

   The fade starts AT the gutter, not at 0 — the scrolling row sits inside
   the padded wrapper, so that is the edge its content is clipped at. */
.fw-hp-svc__cats::before,.fw-hp-svc__cats::after,
.fw-hp-svc__rail::before{
content:"";position:absolute;top:0;bottom:0;z-index:2;
width:clamp(36px,4vw,68px);
pointer-events:none;opacity:0;transition:opacity .3s
}
.fw-hp-svc__cats::before{left:var(--svc-gut);background:linear-gradient(90deg,var(--wh) 24%,transparent)}
.fw-hp-svc__cats::after{right:var(--svc-gut);background:linear-gradient(270deg,var(--wh) 24%,transparent)}
.fw-hp-svc__cats.has-rail:not(.at-start)::before{opacity:1}
.fw-hp-svc__cats.has-rail:not(.at-end)::after{opacity:1}

.fw-hp-svc__railnav{
position:absolute;z-index:3;
top:50%;transform:translateY(-50%);
display:none;align-items:center;justify-content:center;
width:30px;height:30px;padding:0;
border:0;border-radius:50%;
background:var(--wh);color:var(--g6);
box-shadow:0 4px 14px -5px var(--ink-a40),inset 0 0 0 1px var(--g2);
transition:color .22s,background .22s,opacity .25s,transform .25s
}
.has-rail>.fw-hp-svc__railnav{display:flex}
.fw-hp-svc__railnav i{font-size:12px;line-height:1}
.fw-hp-svc__railnav:hover{color:var(--pk-ink);box-shadow:0 4px 14px -5px var(--ink-a40),inset 0 0 0 1px var(--pk-ring)}
.fw-hp-svc__railnav:active{transform:translateY(-50%) scale(.94)}
/* Disabled rather than removed: taking the button out at the end of the
   travel would shift the fade and flicker on every click. */
.fw-hp-svc__railnav[disabled]{opacity:0;pointer-events:none}
.fw-hp-svc__railnav--prev{left:calc(var(--svc-gut) - 7px)}
.fw-hp-svc__railnav--next{right:calc(var(--svc-gut) - 7px)}
.fw-hp-svc__railnav:focus-visible{outline:2px solid var(--pk-edge);outline-offset:2px}
/* The care-area arrows centre on the LABEL row, which is all there is in
   that wrapper; the treatment arrows have a heading above them, so they
   sit on the strip at the foot instead. Both are set where they are used
   rather than here. */
.fw-hp-svc__cats .fw-hp-svc__railnav{top:calc(50% - 1px)}


/* ── Body — rail beside pane. minmax(0,1fr) so the swiper can shrink;
      a bare 1fr takes its min-content width from the slides and the
      whole grid overflows the gutter. ── */
.fw-hp-svc__body{
position:relative;z-index:1;
padding:0 var(--svc-gut);
display:grid;grid-template-columns:302px minmax(0,1fr);
gap:0 30px;align-items:stretch
}

/* ── LEVEL 2 · the treatment rail ── */
/* height:0 + min-height:100% is what keeps the rail from DEFINING the row.
   With a plain auto height the taller of the two panes wins, which is the
   rail, so its own max-height would be circular and the two columns would
   never finish level. At height:0 the rail contributes nothing to the row,
   the pane sets it, and min-height:100% then resolves against a height
   that is finally definite. --svc-pane-h stays as the ceiling for the one
   case this cannot cover: a browser without grid percentage resolution. */
.fw-hp-svc__rail{
position:relative;
display:flex;flex-direction:column;min-width:0;
height:0;min-height:100%;
border-right:1px solid var(--g2);
border-right-color:color-mix(in srgb,var(--dk) 8%,transparent);
padding-right:22px
}
.fw-hp-svc__rail-head{
display:flex;flex-direction:column;gap:1px;
padding:0 4px 12px;margin-bottom:8px;
border-bottom:1px solid var(--g2);
border-bottom-color:color-mix(in srgb,var(--dk) 7%,transparent)
}
.fw-hp-svc__rail-kicker{
font-size:9.5px;font-weight:600;text-transform:uppercase;
letter-spacing:1.6px;color:var(--g5)
}
.fw-hp-svc__rail-cat{font-size:14.5px;font-weight:600;color:var(--dk);line-height:1.35}
/* The rail is the taller of the two panes, so it scrolls inside itself
   rather than setting the height of the band. Released the moment the
   layout stacks — a capped scroll region inside a scrolling page eats the
   flick that should move the page. */
/* A flex column, so the eight <ul>s stack with the whitespace text nodes
   between them dropped rather than turned into anonymous line boxes. */
.fw-hp-svc__rail-scroll{
display:flex;flex-direction:column;
flex:1;min-height:0;max-height:var(--svc-pane-h);
overflow-y:auto;overscroll-behavior:contain;
padding-right:4px
}
/* The vertical rail's scrollbar is a HOVER affordance, not decoration.
   A permanent grey rule down the side of a ten-row list reads as a border
   nobody asked for, and it is the last hard edge in a section built out of
   hairlines — so the track is always transparent and the thumb only paints
   while the pointer is in the rail. Scrolling itself never depended on it:
   the wheel, the trackpad and a touch drag all work untouched, and the
   bottom fade is what says there is more below.

   The 5px GUTTER is reserved at all times, so revealing the thumb changes
   no width and the rows do not shift a pixel under the pointer.

   WebKit/Blink first, because ::-webkit-scrollbar gives a plain pill with
   no platform arrow buttons; `scrollbar-width` is deliberately NOT set
   alongside it, because where the standard property is honoured it WINS and
   the pseudo-elements are dropped — which is how a carefully styled bar
   turns back into the OS widget. Firefox gets the standard property
   instead, inside a @supports test for the pseudo it does not implement. */
.fw-hp-svc__rail-scroll::-webkit-scrollbar{width:5px;height:5px}
.fw-hp-svc__rail-scroll::-webkit-scrollbar-track{background:transparent}
.fw-hp-svc__rail-scroll::-webkit-scrollbar-thumb{background:transparent;border-radius:100px}
.fw-hp-svc__rail:hover .fw-hp-svc__rail-scroll::-webkit-scrollbar-thumb{background:var(--g3)}
.fw-hp-svc__rail:hover .fw-hp-svc__rail-scroll::-webkit-scrollbar-thumb:hover{background:var(--g4)}
@supports not selector(::-webkit-scrollbar){
.fw-hp-svc__rail-scroll{scrollbar-width:thin;scrollbar-color:transparent transparent}
.fw-hp-svc__rail:hover .fw-hp-svc__rail-scroll{scrollbar-color:var(--g3) transparent}
}
/* Nothing hovers on a touch screen, so the thumb would never appear — and
   there the platform draws its own overlay bar during the scroll anyway. */
@media(hover:none){
.fw-hp-svc__rail-scroll{scrollbar-width:none;-ms-overflow-style:none}
.fw-hp-svc__rail-scroll::-webkit-scrollbar{display:none}
}
/* A short fade on the last row so a rail that scrolls says so. Short on
   purpose — a deep one reads as a broken gradient once the list is at its
   end, and the shallow one just reads as depth. */
.fw-hp-svc__rail::after{
content:"";position:absolute;left:0;right:22px;bottom:0;height:22px;
background:linear-gradient(to top,var(--wh),transparent);
pointer-events:none
}
/* margin:0 is not tidiness — Canvas's style.css carries `ul{margin-bottom:30px}`
   and it loads BEFORE common.css, whose `*{margin:0}` is specificity (0,0,0)
   and loses to an element selector. That 30px sat under the last treatment as
   phantom scroll height on desktop and pushed the strip's scrollbar a clear
   half-inch below its own tabs on mobile. */
.fw-hp-svc__rail-list,.fw-hp-svc__rail-list>li{margin:0;padding:0}
.fw-hp-svc__rail-list{display:none}
.fw-hp-svc__rail-list.is-on{display:block}
.fw-hp-svc__sub{
position:relative;display:flex;align-items:center;gap:10px;
padding:9px 10px 9px 12px;border-radius:var(--rl);
transition:background .2s,color .2s
}
.fw-hp-svc__sub::before{
content:"";position:absolute;left:0;top:50%;transform:translateY(-50%) scaleY(0);
width:3px;height:22px;border-radius:0 3px 3px 0;background:var(--pk);
transition:transform .25s
}
.fw-hp-svc__sub:hover{background:var(--g0)}
/* Same treatment as the care-area tabs above: eight flaticon sets are eight
   palettes, so they are flattened at rest and the chosen one comes back to
   colour. Keeps the rail reading as one control instead of a sticker sheet. */
.fw-hp-svc__sub-ico{
width:22px;height:22px;flex-shrink:0;object-fit:contain;
filter:grayscale(1) opacity(.45);transition:filter .22s
}
.fw-hp-svc__sub:hover .fw-hp-svc__sub-ico{filter:grayscale(1) opacity(.75)}
.fw-hp-svc__sub.is-on .fw-hp-svc__sub-ico{filter:none}
.fw-hp-svc__sub-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.fw-hp-svc__sub-name{
font-size:13.5px;font-weight:500;color:var(--g7);line-height:1.3;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.fw-hp-svc__sub-desc{
font-size:11px;color:var(--g5);line-height:1.35;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.fw-hp-svc__sub-num{
flex-shrink:0;font-size:10px;font-weight:700;
min-width:22px;text-align:center;
padding:2px 6px;border-radius:100px;
color:var(--g6);background:var(--g1);
transition:color .2s,background .2s
}
.fw-hp-svc__sub.is-on{
background:var(--pk-l);
background:color-mix(in srgb,var(--pk) 7%,var(--wh))
}
.fw-hp-svc__sub.is-on::before{transform:translateY(-50%) scaleY(1)}
.fw-hp-svc__sub.is-on .fw-hp-svc__sub-name{color:var(--pk-ink);font-weight:600}
.fw-hp-svc__sub.is-on .fw-hp-svc__sub-desc{color:var(--g6)}
.fw-hp-svc__sub.is-on .fw-hp-svc__sub-num{color:var(--wh);background:var(--pk)}
.fw-hp-svc__sub:focus-visible{outline:2px solid var(--pk-edge);outline-offset:1px}

/* ── LEVEL 3 · the pane ── */
.fw-hp-svc__pane{display:flex;flex-direction:column;min-width:0}
.fw-hp-svc__pane-top{
display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
padding:0 2px 12px;margin-bottom:16px;
border-bottom:1px solid var(--g2);
border-bottom-color:color-mix(in srgb,var(--dk) 7%,transparent)
}
.fw-hp-svc__pane-txt{min-width:0}
.fw-hp-svc__pane-title{
font-size:18px;font-weight:600;color:var(--dk);line-height:1.25;letter-spacing:-.1px
}
.fw-hp-svc__pane-sub{margin-top:3px;font-size:12.5px;color:var(--g5);line-height:1.4}
.fw-hp-svc__arrows{display:flex;gap:6px;flex-shrink:0}
.fw-hp-svc__arrow{
width:34px;height:34px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:12px;color:var(--g6);background:var(--wh);
border:1.5px solid var(--g3);
transition:color .2s,background .2s,border-color .2s
}
.fw-hp-svc__arrow:hover{background:var(--pk);color:var(--wh);border-color:var(--pk)}
.fw-hp-svc__arrow.swiper-button-disabled{opacity:.3;pointer-events:none}
.fw-hp-svc__arrow:focus-visible{outline:2px solid var(--pk-edge);outline-offset:2px}

.fw-hp-svc__sw{width:100%;overflow:hidden}
/* Keep the real first pane browsable before JS, or if the Swiper CDN is unavailable. */
.fw-hp-svc__sw:not(.swiper-initialized) .swiper-wrapper{gap:14px;overflow-x:auto}
/* height:auto on the slide is what lets every card in the row finish at
   the same height instead of each taking its own content height. */
.fw-hp-svc__sw .swiper-slide{
width:clamp(262px,23vw,348px);height:auto;display:flex
}
/* Scrollbar in the flow under the deck, not floating over the last card.
   Swiper's own .swiper-horizontal>.swiper-scrollbar is the same
   specificity, so this only wins because home.css loads after swiper.css. */
.fw-hp-svc__sw>.fw-hp-svc__bar{
position:static;width:100%;margin:18px 0 0;height:4px;
border-radius:100px;background:var(--g1)
}
.fw-hp-svc__bar .swiper-scrollbar-drag{
background:var(--pk);
background:linear-gradient(90deg,var(--pk),var(--pk-dd));
border-radius:100px
}
.fw-hp-svc__pane-foot{
display:flex;align-items:center;justify-content:space-between;gap:14px;
margin-top:16px
}
.fw-hp-svc__more{
display:inline-flex;align-items:center;gap:7px;
font-size:13px;font-weight:600;color:var(--pk-ink);
transition:gap .25s,color .25s
}
.fw-hp-svc__more:hover{color:var(--pk-d);gap:10px}
.fw-hp-svc__more i{font-size:11px}
.fw-hp-svc__hint{
display:inline-flex;align-items:center;gap:6px;
font-size:11.5px;color:var(--g4);white-space:nowrap
}

/* ── The service card ── */
.fw-hp-svc__card{
display:flex;flex-direction:column;width:100%;
background:var(--wh);border-radius:var(--rx);
border:1px solid var(--g2);
border-color:color-mix(in srgb,var(--dk) 8%,transparent);
box-shadow:var(--ios-shadow);
overflow:hidden;
transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .3s
}
.fw-hp-svc__card:hover{
transform:translateY(-4px);
border-color:var(--pk-ring);
box-shadow:var(--sh)
}
.fw-hp-svc__card-media{
position:relative;display:block;aspect-ratio:16/10;overflow:hidden;
background:var(--g1)
}
.fw-hp-svc__card-media img{
width:100%;height:100%;object-fit:cover;display:block;
transition:transform .55s cubic-bezier(.22,1,.36,1)
}
.fw-hp-svc__card:hover .fw-hp-svc__card-media img{transform:scale(1.06)}
/* Scrim so the chip stays legible over any photograph. */
.fw-hp-svc__card-media::after{
content:"";position:absolute;inset:auto 0 0 0;height:58%;
background:linear-gradient(to top,var(--ink-a40),transparent);
pointer-events:none
}
.fw-hp-svc__card-chip{
position:absolute;left:10px;bottom:10px;z-index:1;
display:inline-flex;align-items:center;
max-width:calc(100% - 20px);
padding:4px 10px;border-radius:100px;
font-size:10.5px;font-weight:600;letter-spacing:.02em;
color:var(--pk-ink);background:var(--wh);
box-shadow:var(--pk-glow-sm);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.fw-hp-svc__card-body{
flex:1;min-height:0;
display:flex;flex-direction:column;gap:6px;
padding:14px 15px 12px
}
.fw-hp-svc__card-name{
font-size:15px;font-weight:600;color:var(--dk);
line-height:1.3;letter-spacing:-.1px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.fw-hp-svc__card-name a{transition:color .2s}
.fw-hp-svc__card:hover .fw-hp-svc__card-name a{color:var(--pk-ink)}
.fw-hp-svc__card-desc{
font-size:12.5px;line-height:1.55;color:var(--g6);
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden
}
.fw-hp-svc__card-btn{
display:flex;align-items:center;justify-content:space-between;gap:8px;
margin:0 15px 14px;padding:9px 14px;
border-radius:100px;
font-size:12.5px;font-weight:600;
color:var(--pk-ink);background:var(--pk-l);
background:color-mix(in srgb,var(--pk) 7%,var(--wh));
transition:color .25s,background .25s,box-shadow .25s
}
.fw-hp-svc__card-btn i{font-size:11px;transition:transform .25s}
.fw-hp-svc__card-btn:hover,
.fw-hp-svc__card:hover .fw-hp-svc__card-btn{
color:var(--wh);background:linear-gradient(135deg,var(--pk),var(--pk-dd));
box-shadow:var(--pk-glow-sm)
}
.fw-hp-svc__card:hover .fw-hp-svc__card-btn i{transform:translateX(3px)}
.fw-hp-svc__card-btn:focus-visible{outline:2px solid var(--pk-edge);outline-offset:2px}

/* The last tile of a capped pane: an exit, not a card. */
.fw-hp-svc__end{
display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;
width:100%;padding:24px 22px;
border-radius:var(--rx);
border:1.5px dashed var(--g3);
border-color:color-mix(in srgb,var(--pk) 26%,transparent);
background:var(--pk-wash);
transition:background .25s,border-color .25s,transform .3s cubic-bezier(.22,1,.36,1)
}
.fw-hp-svc__end:hover{
transform:translateY(-4px);
border-color:var(--pk);
background:color-mix(in srgb,var(--pk) 6%,var(--wh))
}
.fw-hp-svc__end-num{
font-size:30px;font-weight:700;line-height:1;color:var(--pk-ink);letter-spacing:-1px
}
.fw-hp-svc__end-txt{font-size:13.5px;font-weight:600;color:var(--dk);line-height:1.35}
.fw-hp-svc__end-sub{font-size:12px;color:var(--g5);line-height:1.45}
.fw-hp-svc__end-go{
display:inline-flex;align-items:center;gap:7px;margin-top:2px;
font-size:12.5px;font-weight:600;color:var(--pk-ink)
}
.fw-hp-svc__end-go i{font-size:11px;transition:transform .25s}
.fw-hp-svc__end:hover .fw-hp-svc__end-go i{transform:translateX(3px)}

/* ── Skeletons — what the pane shows for the few hundred milliseconds
      before home.js §8 renders the real cards. ── */
.fw-hp-svc__skel{
display:flex;flex-direction:column;gap:10px;width:100%;
padding:0 0 16px;border-radius:var(--rx);
border:1px solid var(--g2);overflow:hidden;background:var(--wh)
}
.fw-hp-svc__skel-img{display:block;width:100%;aspect-ratio:16/10}
.fw-hp-svc__skel-line{display:block;height:11px;border-radius:100px;margin:0 15px}
.fw-hp-svc__skel-img,.fw-hp-svc__skel-line{
background:linear-gradient(90deg,var(--g1) 25%,var(--g2) 37%,var(--g1) 63%);
background-size:400% 100%;
animation:svcShimmer 1.4s ease-in-out infinite
}
.fw-hp-svc__skel-line.w45{width:45%}
.fw-hp-svc__skel-line.w70{width:70%}
.fw-hp-svc__skel-line.w95{width:calc(95% - 30px)}
@keyframes svcShimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* ── Entrance ── */
.fw-hp-svc.is-enhanced .fw-hp-svc__top,.fw-hp-svc.is-enhanced .fw-hp-svc__cats,.fw-hp-svc.is-enhanced .fw-hp-svc__body{
opacity:0;transform:translateY(12px);
transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)
}
.fw-hp-svc.in-view .fw-hp-svc__top,
.fw-hp-svc.in-view .fw-hp-svc__cats,
.fw-hp-svc.in-view .fw-hp-svc__body{opacity:1;transform:translateY(0)}
.fw-hp-svc.in-view .fw-hp-svc__cats{transition-delay:.06s}
.fw-hp-svc.in-view .fw-hp-svc__body{transition-delay:.12s}
/* Card swap between filters — the wrapper fades, never the whole band. */
.fw-hp-svc__sw .swiper-wrapper{transition:opacity .18s ease}
.fw-hp-svc__sw.is-swapping .swiper-wrapper{opacity:0}

/* ── 1366 and below — the rail gives up its width first ── */
@media(max-width:1366px){
.fw-hp-svc__body{grid-template-columns:274px minmax(0,1fr);gap:0 24px}
.fw-hp-svc__rail{padding-right:18px}
}

/* ── 1200 ── */
@media(max-width:1200px){
.fw-hp-svc{padding:44px 0 48px;--svc-pane-h:466px}
.fw-hp-svc__body{grid-template-columns:250px minmax(0,1fr);gap:0 20px}
.fw-hp-svc__sw .swiper-slide{width:clamp(250px,30vw,300px)}
.fw-hp-svc__sub-desc{display:none}
.fw-hp-svc__sub{padding-top:11px;padding-bottom:11px;gap:9px}
.fw-hp-svc__sub-ico{width:19px;height:19px}
}

/* ── 1024 · THE SWITCH. Same markup: the vertical rail becomes a
      horizontal chip strip above the pane. No second copy of anything. ── */
@media(max-width:1024px){
.fw-hp-svc{padding:38px 0 42px}
.fw-hp-svc__title{font-size:23px}
.fw-hp-svc__lede{font-size:13px}
.fw-hp-svc__body{grid-template-columns:minmax(0,1fr);gap:16px 0}
.fw-hp-svc__rail{position:relative;height:auto;min-height:0;border-right:0;padding-right:0}
/* Turned on its side, the rail wears the same fades-and-arrows skin as the
   care-area strip. ::after has to be re-declared rather than tweaked: on
   desktop it is the BOTTOM fade of a vertical list, so almost every
   property it carries there is the wrong one here. Both are pinned to the
   foot of the aside, because the heading sits above the strip and a
   centred arrow would land on the words. */
.fw-hp-svc__rail::before,.fw-hp-svc__rail::after{
content:"";position:absolute;z-index:2;
top:auto;bottom:0;height:38px;
width:clamp(30px,4vw,56px);
opacity:0;pointer-events:none;transition:opacity .3s
}
.fw-hp-svc__rail::before{left:0;right:auto;background:linear-gradient(90deg,var(--wh) 24%,transparent)}
.fw-hp-svc__rail::after{right:0;left:auto;background:linear-gradient(270deg,var(--wh) 24%,transparent)}
.fw-hp-svc__rail.has-rail:not(.at-start)::before{opacity:1}
.fw-hp-svc__rail.has-rail:not(.at-end)::after{opacity:1}
.fw-hp-svc__rail .fw-hp-svc__railnav{top:auto;bottom:3px;transform:none}
.fw-hp-svc__rail .fw-hp-svc__railnav:active{transform:scale(.94)}
.fw-hp-svc__rail .fw-hp-svc__railnav--prev{left:-7px}
.fw-hp-svc__rail .fw-hp-svc__railnav--next{right:-7px}
.fw-hp-svc__rail-head{
flex-direction:row;align-items:baseline;gap:6px;
padding:0 0 8px;margin-bottom:6px;border-bottom:0
}
.fw-hp-svc__rail-scroll{
/* Cap released: a capped scroll region inside a scrolling page steals
   the vertical flick from the page under the reader's thumb. The
   horizontal one stays, and stays VISIBLE — nine treatments never fit. */
/* flex-start so the list sizes to its chips rather than being stretched to
   the container, and flex:0 0 auto because filling the rail's height is a
   DESKTOP job — horizontally the strip is exactly as tall as one row. */
align-items:flex-start;flex:0 0 auto;
max-height:none;overflow-y:visible;overflow-x:auto;
padding:0;
scrollbar-width:none;-ms-overflow-style:none
}
.fw-hp-svc__rail-scroll::-webkit-scrollbar{display:none}
.fw-hp-svc__rail-list.is-on{display:flex}
.fw-hp-svc__sub{
flex-shrink:0;align-items:center;gap:7px;
padding:8px 15px;
border-radius:0;background:none;
border-bottom:2px solid var(--g2);
border-bottom-color:color-mix(in srgb,var(--dk) 8%,transparent)
}
/* The rail's own marker is a LEFT bar on desktop; horizontally the same
   idea is a bottom bar, so the left one is switched off rather than left
   pointing at nothing. */
.fw-hp-svc__sub::before{
left:0;top:50%;width:1px;height:15px;border-radius:0;
transform:translateY(-50%) scaleY(1);background:var(--g2);
background:linear-gradient(180deg,transparent,var(--g2) 25%,var(--g2) 75%,transparent)
}
.fw-hp-svc__sub:first-child::before,
.fw-hp-svc__rail-list li:first-child .fw-hp-svc__sub::before{display:none}
.fw-hp-svc__sub:hover{background:none}
.fw-hp-svc__sub-ico{width:17px;height:17px}
.fw-hp-svc__sub-name{font-size:12.5px;white-space:nowrap}
.fw-hp-svc__sub-num{background:none;color:var(--g4);padding:0;min-width:0;font-size:11px}
.fw-hp-svc__sub.is-on{background:none;border-bottom-color:var(--pk)}
.fw-hp-svc__sub.is-on::before{transform:translateY(-50%) scaleY(1)}
.fw-hp-svc__sub.is-on .fw-hp-svc__sub-name{color:var(--pk-ink)}
.fw-hp-svc__sub.is-on .fw-hp-svc__sub-num{color:var(--pk);background:none}
.fw-hp-svc__arrows{display:none}
.fw-hp-svc__sw .swiper-slide{width:clamp(240px,44vw,300px)}
/* Half the ambient layers on touch — each blurred box is its own
   compositor layer. */
.fw-hp-svc__fx span{filter:blur(60px)}
.fw-hp-svc__fx span:nth-child(3){display:none}
}

/* ── 768 ── */
@media(max-width:768px){
.fw-hp-svc{padding:32px 0 36px;--svc-gut:14px}
.fw-hp-svc__title{font-size:21px}
.fw-hp-svc__see-all{font-size:12px}
.fw-hp-svc__lede{margin-top:8px;font-size:12.5px}
.fw-hp-svc__cat{padding:8px 14px;font-size:12px;gap:6px}
.fw-hp-svc__cat-ico{width:17px;height:17px}
.fw-hp-svc__sub{padding:7px 12px}
.fw-hp-svc__pane-title{font-size:16px}
.fw-hp-svc__pane-sub{font-size:11.5px}
.fw-hp-svc__hint{display:none}
.fw-hp-svc__sw .swiper-slide{width:clamp(230px,68vw,272px)}
/* Phones keep the fade and lose the arrows: a swipe is the affordance
   there, and two 30px targets over a 14px gutter crowd the row. Not keyed
   to (hover:none) — a touchscreen laptop is still a desktop layout and
   would lose the arrows with nothing replacing them. */
.has-rail>.fw-hp-svc__railnav{display:none}
}

/* ── 480 ── */
@media(max-width:480px){
.fw-hp-svc{padding:26px 0 30px}
.fw-hp-svc__label{font-size:9px;letter-spacing:2px;margin-bottom:7px}
.fw-hp-svc__title{font-size:18px}
.fw-hp-svc__see-all span{display:none}
.fw-hp-svc__lede{display:none}
.fw-hp-svc__cat{padding:7px 12px;font-size:11.5px}
.fw-hp-svc__cat-num{font-size:10px}
.fw-hp-svc__sub{padding:6px 11px;gap:6px}
.fw-hp-svc__sub-ico{width:15px;height:15px}
.fw-hp-svc__sub-name{font-size:12px}
.fw-hp-svc__rail-kicker{display:none}
.fw-hp-svc__sw .swiper-slide{width:clamp(215px,76vw,258px)}
.fw-hp-svc__card-name{font-size:14px}
.fw-hp-svc__card-desc{font-size:12px;-webkit-line-clamp:2}
.fw-hp-svc__more{font-size:12px}
}

/* ── 360 ── */
@media(max-width:360px){
.fw-hp-svc__title{font-size:16.5px}
.fw-hp-svc__cat-num{display:none}
.fw-hp-svc__sw .swiper-slide{width:82vw}
}

@media(prefers-reduced-motion:reduce){
.fw-hp-svc__fx span,.fw-hp-svc__skel-img,.fw-hp-svc__skel-line{animation:none}
.fw-hp-svc__top,.fw-hp-svc__cats,.fw-hp-svc__body{opacity:1;transform:none;transition:none}
.fw-hp-svc__card,.fw-hp-svc__card-media img,.fw-hp-svc__end{transition:none}
.fw-hp-svc__card:hover,.fw-hp-svc__end:hover{transform:none}
}


/* ═══════════════════════════════════════════════════════════════════════
   §  PATIENT REVIEWS  (fw-hp-rev)
   Markup: includes/home/review.php   ·   JS: custom/js/home.js §9

   NO CARD. Every other deck on this page is boxed; a testimonial is not a
   product, and a quote in a ring with a shadow reads as an advertisement
   for itself. Each slide is a ruled column — a hairline in the gutter, a
   quote mark, and the type scale doing the rest. The chips, the avatar
   disc and the buttons are objects, not containers, and stay.

   Full-bleed, 28px / 14px gutters, no max-width on any line, ground white
   so it alternates against the off-white AI band above it. Colour only
   from :root; the per-facet tones are TOKEN NAMES carried in data-tone.
   ═══════════════════════════════════════════════════════════════════════ */

.fw-hp-rev{
position:relative;overflow:hidden;
padding:52px 0 56px;
background:var(--wh);
--rev-gut:28px
}
/* Canvas's style.css puts a serif on every bare <em>; the accent word in
   the title is one. <i> is deliberately NOT here — Bootstrap Icons need
   their own family, and this section is full of them. */
.fw-hp-rev em{font-family:var(--ff);font-style:normal}
/* A bare <blockquote> arrives pre-decorated by Canvas's style.css:
   `padding:10px 20px`, `margin:0 0 20px` AND `border-left:5px solid
   var(--cnvs-contrast-200)` — plus `margin-bottom:30px` from its
   pre/ul/ol/blockquote group. Element selectors, so common.css's
   `*{margin:0}` (0,0,0) loses to all of it. Left alone that indents the
   quote out of line with everything else in the column and draws a grey
   bar in a colour this file does not own. Reset it here; the quote mark is
   the ❝ glyph below, drawn in a token. */
.fw-hp-rev blockquote{margin:0;border:0}

.fw-hp-rev__fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fw-hp-rev__fx span{
position:absolute;border-radius:50%;filter:blur(100px);opacity:.55;
animation:revDrift 34s ease-in-out infinite
}
.fw-hp-rev__fx span:nth-child(1){width:420px;height:420px;top:-150px;right:-110px;background:var(--pu-l);animation-delay:-6s}
.fw-hp-rev__fx span:nth-child(2){width:380px;height:380px;bottom:-160px;left:-100px;background:var(--go-l);animation-delay:-18s}
@keyframes revDrift{
0%,100%{transform:translate3d(0,0,0) scale(1)}
50%{transform:translate3d(-24px,20px,0) scale(1.07)}
}

/* ── Header ── */
.fw-hp-rev__top{position:relative;z-index:1;padding:0 var(--rev-gut);margin-bottom:18px}
.fw-hp-rev__label{
display:inline-flex;align-items:center;gap:8px;
font-size:10.5px;font-weight:600;text-transform:uppercase;
letter-spacing:2.5px;color:var(--pu-ink);margin-bottom:10px
}
.fw-hp-rev__label span{width:20px;height:1.5px;background:var(--pu);border-radius:2px}
.fw-hp-rev__label span:last-child{width:8px;opacity:.45}
.fw-hp-rev__head-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.fw-hp-rev__title{
font-family:var(--ff);font-size:28px;font-weight:700;
color:var(--dk);line-height:1.2;letter-spacing:-.2px
}
.fw-hp-rev__title em{color:var(--pu)}
.fw-hp-rev__see-all{
display:inline-flex;align-items:center;gap:6px;
font-size:13px;font-weight:600;color:var(--pu-ink);
white-space:nowrap;flex-shrink:0;transition:gap .25s,color .25s
}
.fw-hp-rev__see-all:hover{color:var(--pu-d);gap:9px}
.fw-hp-rev__see-all i{font-size:11px;transition:transform .25s}
.fw-hp-rev__see-all:hover i{transform:translateX(2px)}

/* ── Trust summary — ruled, never boxed ── */
.fw-hp-rev__trust{
position:relative;z-index:1;
padding:14px var(--rev-gut) 16px;margin-bottom:18px;
display:flex;align-items:center;flex-wrap:wrap;gap:14px 30px;
border-top:1px solid var(--g2);border-bottom:1px solid var(--g2);
border-color:color-mix(in srgb,var(--dk) 8%,transparent)
}
.fw-hp-rev__score{display:flex;align-items:center;gap:12px;flex-shrink:0}
.fw-hp-rev__score-num{
font-size:40px;font-weight:700;line-height:1;
color:var(--dk);letter-spacing:-1.5px;
font-variant-numeric:tabular-nums
}
.fw-hp-rev__score-side{display:flex;flex-direction:column;gap:3px}
.fw-hp-rev__score-cap{font-size:11.5px;color:var(--g5);line-height:1.3}
.fw-hp-rev__facts{
display:flex;align-items:center;flex-wrap:wrap;gap:10px 24px;
margin-left:auto
}
.fw-hp-rev__fact{
position:relative;display:flex;align-items:center;gap:10px;padding-left:24px
}
/* The divider is drawn on every fact and switched off for the first, which
   is the same fading hairline the care-area tabs use. Kept even now that
   each figure carries a mark: the fading hairline is the device the whole
   section is built on, and this row would be the only place without it. */
.fw-hp-rev__fact::before{
content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
width:1px;height:30px;
background:linear-gradient(180deg,transparent,var(--g2) 25%,var(--g2) 75%,transparent)
}
.fw-hp-rev__fact:first-child{padding-left:0}
.fw-hp-rev__fact:first-child::before{display:none}
/* A small tinted disc, the same object as the review chips and the
   reviewer avatars — not a container, so the no-boxes rule is intact. */
.fw-hp-rev__fact-ico{
width:32px;height:32px;border-radius:50%;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
font-size:14px;line-height:1
}
.fw-hp-rev__fact-ico[data-tone="mt"]{color:var(--mt-ink);background:var(--mt-t)}
.fw-hp-rev__fact-ico[data-tone="pk"]{color:var(--pk-ink);background:var(--pk-t)}
.fw-hp-rev__fact-ico[data-tone="bl"]{color:var(--bl-ink);background:var(--bl-t)}
.fw-hp-rev__fact-ico[data-tone="pu"]{color:var(--pu-ink);background:var(--pu-t)}
.fw-hp-rev__fact-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.fw-hp-rev__fact-txt b{
font-size:17px;font-weight:700;color:var(--dk);line-height:1.1;
font-variant-numeric:tabular-nums
}
/* Scoped to __fact-txt, NOT to `.fw-hp-rev__fact span`: the icon wrapper is
   a <span> inside the same block, and the looser selector is (0,1,1) —
   enough to beat this element's own class and shrink the mark to label
   size. */
.fw-hp-rev__fact-txt span{font-size:11.5px;color:var(--g5);line-height:1.3}

/* ── Stars ── */
.fw-hp-rev__stars{display:inline-flex;align-items:center;gap:2px;color:var(--go);font-size:12px;line-height:1}
.fw-hp-rev__stars--lg{font-size:15px;gap:3px}
.fw-hp-rev__stars .bi-star{color:var(--g3)}

/* ── Filter row ── */
.fw-hp-rev__nav{
position:relative;z-index:1;
padding:0 var(--rev-gut);margin-bottom:22px;
display:flex;align-items:flex-end;gap:16px
}
.fw-hp-rev__tabs{position:relative;flex:1;min-width:0}
.fw-hp-rev__tabs-track{
display:flex;overflow-x:auto;
-webkit-overflow-scrolling:touch;
/* No scrollbar: the arrows and the edge fades are the affordance, exactly
   as on the service explorer and /service-category.php's jump rail. */
scrollbar-width:none;-ms-overflow-style:none
}
.fw-hp-rev__tabs-track::-webkit-scrollbar{display:none}
/* One shared 2px bottom border across contiguous tabs makes a continuous
   rail, so the active mark is a colour change and nothing shifts. */
.fw-hp-rev__tab{
position:relative;flex-shrink:0;
display:inline-flex;align-items:center;gap:8px;
padding:9px 18px;
font-size:13px;font-weight:500;color:var(--g6);
background:none;border:0;border-radius:0;
border-bottom:2px solid var(--g2);
border-bottom-color:color-mix(in srgb,var(--dk) 8%,transparent);
white-space:nowrap;
transition:color .22s,border-color .22s
}
.fw-hp-rev__tab + .fw-hp-rev__tab::before{
content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
width:1px;height:18px;
background:linear-gradient(180deg,transparent,var(--g2) 25%,var(--g2) 75%,transparent)
}
.fw-hp-rev__tab i{font-size:13px;color:var(--g4);transition:color .22s}
.fw-hp-rev__tab:hover{color:var(--dk)}
.fw-hp-rev__tab:hover i{color:var(--g6)}
.fw-hp-rev__tab-num{
font-size:11px;font-weight:600;color:var(--g4);
font-variant-numeric:tabular-nums;transition:color .22s
}
.fw-hp-rev__tab.is-on{color:var(--pu-ink);font-weight:600;border-bottom-color:var(--pu)}
.fw-hp-rev__tab.is-on i,.fw-hp-rev__tab.is-on .fw-hp-rev__tab-num{color:var(--pu)}
.fw-hp-rev__tab:focus-visible{outline:2px solid var(--pk-edge);outline-offset:-2px}

/* Edge fades + the two rail arrows. Behaviour is the shared [data-rail]
   engine in core.js; this is skin only. */
.fw-hp-rev__tabs::before,.fw-hp-rev__tabs::after{
content:"";position:absolute;top:0;bottom:0;z-index:2;
width:clamp(30px,3vw,56px);
pointer-events:none;opacity:0;transition:opacity .3s
}
.fw-hp-rev__tabs::before{left:0;background:linear-gradient(90deg,var(--wh) 24%,transparent)}
.fw-hp-rev__tabs::after{right:0;background:linear-gradient(270deg,var(--wh) 24%,transparent)}
.fw-hp-rev__tabs.has-rail:not(.at-start)::before{opacity:1}
.fw-hp-rev__tabs.has-rail:not(.at-end)::after{opacity:1}
.fw-hp-rev__railnav{
position:absolute;z-index:3;top:calc(50% - 1px);transform:translateY(-50%);
display:none;align-items:center;justify-content:center;
width:28px;height:28px;padding:0;border:0;border-radius:50%;
background:var(--wh);color:var(--g6);
box-shadow:0 4px 14px -5px var(--ink-a40),inset 0 0 0 1px var(--g2);
transition:color .22s,box-shadow .22s,opacity .25s,transform .25s
}
.has-rail>.fw-hp-rev__railnav{display:flex}
.fw-hp-rev__railnav i{font-size:11px;line-height:1}
.fw-hp-rev__railnav:hover{color:var(--pu-ink);box-shadow:0 4px 14px -5px var(--ink-a40),inset 0 0 0 1px var(--pu-ring)}
.fw-hp-rev__railnav:active{transform:translateY(-50%) scale(.94)}
.fw-hp-rev__railnav[disabled]{opacity:0;pointer-events:none}
.fw-hp-rev__railnav--prev{left:-7px}
.fw-hp-rev__railnav--next{right:-7px}
.fw-hp-rev__railnav:focus-visible{outline:2px solid var(--pk-edge);outline-offset:2px}

/* Carousel arrows */
.fw-hp-rev__arrows{display:flex;gap:6px;flex-shrink:0;padding-bottom:2px}
.fw-hp-rev__arrow{
width:34px;height:34px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:12px;color:var(--g6);background:var(--wh);
border:1.5px solid var(--g3);
transition:color .2s,background .2s,border-color .2s
}
.fw-hp-rev__arrow:hover{background:var(--pu);color:var(--wh);border-color:var(--pu)}
.fw-hp-rev__arrow.swiper-button-disabled{opacity:.3;pointer-events:none}
.fw-hp-rev__arrow:focus-visible{outline:2px solid var(--pk-edge);outline-offset:2px}

/* ── The deck ── */
.fw-hp-rev__sw{position:relative;z-index:1;padding:0 var(--rev-gut);overflow:hidden}
.fw-hp-rev__sw .swiper-slide{
position:relative;
width:clamp(288px,25vw,392px);height:auto;display:flex
}
/* The rule between columns lives in the gutter, drawn by the slide that
   follows it. Hidden on the first so the deck never opens on a stray line;
   the filter re-appends slides, so :first-child stays true. */
.fw-hp-rev__sw .swiper-slide::before{
content:"";position:absolute;left:-15px;top:4px;bottom:4px;width:1px;
background:linear-gradient(180deg,transparent,var(--g2) 12%,var(--g2) 88%,transparent)
}
.fw-hp-rev__sw .swiper-slide:first-child::before{display:none}

.fw-hp-rev__item{
display:flex;flex-direction:column;width:100%;
padding:4px 2px 2px;
transition:opacity .28s ease
}
.fw-hp-rev__item-top{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.fw-hp-rev__score-inline{
font-size:12.5px;font-weight:700;color:var(--dk);
font-variant-numeric:tabular-nums;margin-right:auto
}
.fw-hp-rev__kind{
display:inline-flex;align-items:center;gap:5px;
padding:3px 9px;border-radius:100px;
font-size:10.5px;font-weight:600;letter-spacing:.02em;white-space:nowrap
}
.fw-hp-rev__kind i{font-size:10px}
.fw-hp-rev__kind[data-tone="bl"]{color:var(--bl-ink);background:var(--bl-t)}
.fw-hp-rev__kind[data-tone="mt"]{color:var(--mt-ink);background:var(--mt-t)}
.fw-hp-rev__kind[data-tone="pk"]{color:var(--pk-ink);background:var(--pk-t)}
.fw-hp-rev__kind[data-tone="pu"]{color:var(--pu-ink);background:var(--pu-t)}

/* The quote carries the section. Big enough to read as a voice rather than
   a caption, and clamped so every column ends level. */
.fw-hp-rev__quote{
position:relative;flex:1;min-height:0;
/* The full shorthand, not padding-top: Canvas's `blockquote{padding:10px
   20px}` has to be beaten on the left and right too, and the reset above
   deliberately does NOT touch padding — an element reset at (0,1,1) would
   outrank this class at (0,1,0) and silently win, which is exactly how the
   ❝ ended up sitting on the first line. */
padding:32px 0 0;
font-size:15px;line-height:1.62;color:var(--g7);
letter-spacing:-.05px;text-wrap:pretty;
display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden
}
.fw-hp-rev__quote::before{
content:"\201C";
position:absolute;top:-6px;left:-3px;
font-family:var(--fs);
font-size:52px;line-height:1;color:var(--pu);opacity:.2;
pointer-events:none
}

/* What was reviewed */
.fw-hp-rev__subject{
display:flex;align-items:center;gap:10px;
margin-top:16px;padding-top:14px;
border-top:1px solid var(--g2);
border-top-color:color-mix(in srgb,var(--dk) 8%,transparent);
transition:gap .22s
}
.fw-hp-rev__subject:hover{gap:12px}
.fw-hp-rev__subject-img{
width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0;
box-shadow:0 0 0 1px var(--g2)
}
.fw-hp-rev__subject-mark{
width:38px;height:38px;border-radius:50%;flex-shrink:0;
display:flex;align-items:center;justify-content:center;font-size:15px
}
.fw-hp-rev__subject-mark[data-tone="bl"]{color:var(--bl-ink);background:var(--bl-t)}
.fw-hp-rev__subject-mark[data-tone="mt"]{color:var(--mt-ink);background:var(--mt-t)}
.fw-hp-rev__subject-mark[data-tone="pk"]{color:var(--pk-ink);background:var(--pk-t)}
.fw-hp-rev__subject-mark[data-tone="pu"]{color:var(--pu-ink);background:var(--pu-t)}
.fw-hp-rev__subject-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.fw-hp-rev__subject-name{
font-size:13.5px;font-weight:600;color:var(--dk);line-height:1.3;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
transition:color .22s
}
.fw-hp-rev__subject-meta{
font-size:11.5px;color:var(--g5);line-height:1.3;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.fw-hp-rev__subject > .bi-arrow-right{
font-size:11px;color:var(--g4);flex-shrink:0;transition:color .22s,transform .22s
}
.fw-hp-rev__subject:hover .fw-hp-rev__subject-name{color:var(--pu-ink)}
.fw-hp-rev__subject:hover > .bi-arrow-right{color:var(--pu);transform:translateX(2px)}
.fw-hp-rev__subject:focus-visible{outline:2px solid var(--pk-edge);outline-offset:3px}

/* Who said it */
.fw-hp-rev__by{display:flex;align-items:center;gap:10px;margin-top:14px}
.fw-hp-rev__avatar{
width:32px;height:32px;border-radius:50%;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
font-size:11.5px;font-weight:700;letter-spacing:.02em
}
.fw-hp-rev__avatar[data-tone="pk"]{color:var(--pk-ink);background:var(--pk-l)}
.fw-hp-rev__avatar[data-tone="bl"]{color:var(--bl-ink);background:var(--bl-l)}
.fw-hp-rev__avatar[data-tone="mt"]{color:var(--mt-ink);background:var(--mt-l)}
.fw-hp-rev__avatar[data-tone="pu"]{color:var(--pu-ink);background:var(--pu-l)}
.fw-hp-rev__avatar[data-tone="go"]{color:var(--go-ink);background:var(--go-l)}
.fw-hp-rev__avatar[data-tone="co"]{color:var(--co-ink);background:var(--co-l)}
.fw-hp-rev__by-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.fw-hp-rev__by-name{
display:flex;align-items:center;gap:5px;
font-size:12.5px;font-weight:600;color:var(--g7);line-height:1.3
}
.fw-hp-rev__by-name .bi-patch-check-fill{font-size:11px;color:var(--mt-ink)}
.fw-hp-rev__by-meta{
display:flex;align-items:center;gap:5px;
font-size:11px;color:var(--g5);line-height:1.3
}
.fw-hp-rev__flag{width:14px;height:10px;border-radius:2px;object-fit:cover;flex-shrink:0}

/* ── Foot ── */
.fw-hp-rev__foot{
position:relative;z-index:1;
padding:0 var(--rev-gut);margin-top:26px;
display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap
}
.fw-hp-rev__more{
display:inline-flex;align-items:center;gap:7px;
font-size:13px;font-weight:600;color:var(--pu-ink);
transition:gap .25s,color .25s
}
.fw-hp-rev__more:hover{color:var(--pu-d);gap:10px}
.fw-hp-rev__more i{font-size:11px}
.fw-hp-rev__note{
display:inline-flex;align-items:center;gap:7px;
font-size:11.5px;color:var(--g5)
}
.fw-hp-rev__note i{font-size:12px;color:var(--mt-ink)}
.fw-hp-rev__empty{
width:100%;order:-1;
font-size:13px;color:var(--g5)
}

/* ── Entrance + filter swap ── */
.fw-hp-rev__top,.fw-hp-rev__trust,.fw-hp-rev__nav,.fw-hp-rev__sw,.fw-hp-rev__foot{
opacity:0;transform:translateY(12px);
transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)
}
.fw-hp-rev.in-view .fw-hp-rev__top,
.fw-hp-rev.in-view .fw-hp-rev__trust,
.fw-hp-rev.in-view .fw-hp-rev__nav,
.fw-hp-rev.in-view .fw-hp-rev__sw,
.fw-hp-rev.in-view .fw-hp-rev__foot{opacity:1;transform:translateY(0)}
.fw-hp-rev.in-view .fw-hp-rev__trust{transition-delay:.05s}
.fw-hp-rev.in-view .fw-hp-rev__nav{transition-delay:.1s}
.fw-hp-rev.in-view .fw-hp-rev__sw{transition-delay:.15s}
.fw-hp-rev.in-view .fw-hp-rev__foot{transition-delay:.2s}
.fw-hp-rev__sw .swiper-slide.is-hiding .fw-hp-rev__item{opacity:0}

/* ── 1366 ── */
@media(max-width:1366px){
.fw-hp-rev__sw .swiper-slide{width:clamp(280px,29vw,356px)}
}

/* ── 1200 ── */
@media(max-width:1200px){
.fw-hp-rev{padding:44px 0 48px}
.fw-hp-rev__score-num{font-size:34px}
.fw-hp-rev__facts{gap:10px 18px}
.fw-hp-rev__fact{padding-left:18px;gap:9px}
.fw-hp-rev__fact-ico{width:29px;height:29px;font-size:13px}
.fw-hp-rev__sw .swiper-slide{width:clamp(272px,34vw,330px)}
}

/* ── 1024 ── */
@media(max-width:1024px){
.fw-hp-rev{padding:38px 0 42px}
.fw-hp-rev__title{font-size:23px}
.fw-hp-rev__facts{margin-left:0}
.fw-hp-rev__arrows{display:none}
.fw-hp-rev__quote{font-size:14.5px;-webkit-line-clamp:7}
.fw-hp-rev__sw .swiper-slide{width:clamp(268px,50vw,336px)}
/* Halve the ambient layers on touch — each blurred box is its own
   compositor layer. */
.fw-hp-rev__fx span{filter:blur(64px)}
.fw-hp-rev__fx span:nth-child(2){display:none}
}

/* ── 768 ── */
@media(max-width:768px){
.fw-hp-rev{padding:32px 0 36px;--rev-gut:14px}
.fw-hp-rev__title{font-size:21px}
.fw-hp-rev__see-all{font-size:12px}
.fw-hp-rev__trust{gap:12px 18px;padding-top:12px;padding-bottom:14px}
.fw-hp-rev__score-num{font-size:30px}
/* A 2x2 grid rather than a wrapping flex row. Wrapped, the fourth figure
   drops onto a line of its own still wearing the divider that separated it
   from the third — a rule pointing at nothing. A grid puts the divider on
   the even columns only and both rows line up. */
.fw-hp-rev__facts{
display:grid;grid-template-columns:1fr 1fr;
gap:10px 14px;width:100%;margin-left:0
}
.fw-hp-rev__fact{padding-left:14px;gap:8px}
.fw-hp-rev__fact:nth-child(odd){padding-left:0}
.fw-hp-rev__fact:nth-child(odd)::before{display:none}
.fw-hp-rev__fact-ico{width:27px;height:27px;font-size:12.5px}
.fw-hp-rev__fact-txt b{font-size:15px}
.fw-hp-rev__tab{padding:8px 14px;font-size:12px}
.fw-hp-rev__note{display:none}
/* Phones keep the fade and lose the arrows: a swipe is the affordance
   there, and a 28px target over a 14px gutter crowds the row. */
.has-rail>.fw-hp-rev__railnav{display:none}
.fw-hp-rev__sw .swiper-slide{width:clamp(252px,74vw,308px)}
.fw-hp-rev__sw .swiper-slide::before{left:-11px}
}

/* ── 480 ── */
@media(max-width:480px){
.fw-hp-rev{padding:26px 0 30px}
.fw-hp-rev__label{font-size:9px;letter-spacing:2px;margin-bottom:7px}
.fw-hp-rev__title{font-size:18px}
.fw-hp-rev__see-all span{display:none}
.fw-hp-rev__score{gap:10px}
.fw-hp-rev__score-num{font-size:26px}
.fw-hp-rev__score-cap{display:none}
.fw-hp-rev__fact-txt b{font-size:14px}
.fw-hp-rev__fact-txt span{font-size:10.5px}
.fw-hp-rev__fact-ico{width:25px;height:25px;font-size:11.5px}
.fw-hp-rev__tab{padding:7px 12px;font-size:11.5px;gap:6px}
.fw-hp-rev__quote{font-size:13.5px;-webkit-line-clamp:6}
.fw-hp-rev__sw .swiper-slide{width:clamp(236px,80vw,288px)}
.fw-hp-rev__more{font-size:12px}
}

/* ── 360 ── */
@media(max-width:360px){
.fw-hp-rev__title{font-size:16.5px}
.fw-hp-rev__tab-num{display:none}
.fw-hp-rev__sw .swiper-slide{width:84vw}
}

@media(prefers-reduced-motion:reduce){
.fw-hp-rev__fx span{animation:none}
.fw-hp-rev__top,.fw-hp-rev__trust,.fw-hp-rev__nav,.fw-hp-rev__sw,.fw-hp-rev__foot{
opacity:1;transform:none;transition:none
}
.fw-hp-rev__item,.fw-hp-rev__subject{transition:none}
}

/* ── Patient Stories, real testimonials (9 Oct 2026) ─────────────────────
   The band now reads published testimonials (includes/home/review.php):
   no stars, so the item top carries the tab and what stood out; the
   caption beside the total stays on phones (a bare number means nothing);
   a featured story's line sits at the foot above the links. */
.fw-hp-rev__chip{font-size:11.5px;font-weight:600;color:var(--g6)}
.fw-hp-rev__score .fw-hp-rev__score-cap{display:block;max-width:240px;font-size:13px;line-height:1.4;color:var(--g6)}
.fw-hp-rev__story{
order:-1;width:100%;margin:0 0 4px;padding:14px 0 16px;border-bottom:1px dashed var(--g2);
display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px;line-height:1.55;color:var(--g7)
}
.fw-hp-rev__story > i{font-size:18px;color:var(--pk-d)}
.fw-hp-rev__story > span{flex:1;min-width:240px}
.fw-hp-rev__story em{font-style:normal;font-weight:600;color:var(--dk);margin-left:4px}
.fw-hp-rev__story a{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--pk-dd);white-space:nowrap}
.fw-hp-rev__story a:hover{color:var(--pk-ink)}
.fw-hp-rev__note a{font-weight:600;color:var(--g7);text-decoration:underline;text-underline-offset:2px}
.fw-hp-rev__note a:hover{color:var(--pk-dd)}
@media(max-width:480px){
.fw-hp-rev__score .fw-hp-rev__score-cap{font-size:11.5px;max-width:170px}
.fw-hp-rev__story{font-size:13px}
}

/* ═════════════════════════════════════
   COUNTED, NEVER TYPED (10 Oct 2026)
   The hub's rings and bars printed invented scores (98%, 7x, 50K+, the
   percentage bars). Each is now a counted figure from Manage
   (public_home_hub_facts()): .fw-hp-num replaces a ring, .fw-hp-facts the
   vertical bars, and the cards that now lead somewhere are links.
═════════════════════════════════════ */
.fw-hp-num{display:grid;place-items:center;width:104px;aspect-ratio:1;margin:0 auto 8px;border-radius:50%;background:radial-gradient(circle at 50% 38%, var(--wh) 45%, color-mix(in srgb, var(--theme-base) 14%, var(--wh)) 100%);box-shadow:0 0 0 4px var(--wh), 0 0 0 6px color-mix(in srgb, var(--theme-base) 30%, transparent);font-family:var(--ff);font-size:1.7rem;font-weight:700;letter-spacing:-.5px;line-height:1;color:var(--theme-base);font-variant-numeric:tabular-nums;transition:color .5s}
.fw-hp-facts{display:flex;flex-direction:column;gap:0;margin:0;padding:4px 0;list-style:none}
.fw-hp-facts li{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px solid var(--g1)}
.fw-hp-facts li:last-child{border-bottom:0}
.fw-hp-facts b{min-width:58px;font-family:var(--ff);font-size:1.35rem;font-weight:700;line-height:1;color:var(--theme-base);font-variant-numeric:tabular-nums;transition:color .5s}
.fw-hp-facts span{font-family:var(--ff);font-size:.78rem;color:var(--g6)}
a.fw-hp-sl-item,a.fw-hp-cl-bar,a.fw-hp-cl-chip,a.fw-hp-pt-type,a.fw-hp-pt-hero,a.fw-hp-gm-pillar,a.fw-hp-cl-hero,a.fw-hp-gm-circle{color:inherit;text-decoration:none}
a.fw-hp-sl-item:hover .fw-hp-sl-name,a.fw-hp-pt-type:hover .fw-hp-pt-type-name,a.fw-hp-gm-pillar:hover .fw-hp-gm-pil-title{color:var(--theme-base)}
@media (max-width:1024px){
	.fw-hp-num{width:auto;aspect-ratio:auto;margin:0 0 2px;background:none;box-shadow:none;font-size:2rem;place-items:start}
}