/* ═══════════════════════════════════════════════
    WHITE CLEAN — Enchant Logo Palette
    #9BA3C4  Periwinkle (accent / logo bg)
    #7880A8  Periwinkle dark (hover)
    #BFC4DA  Periwinkle light
    #E8EAF4  Periwinkle pale (section tint)
    #FFFFFF  White (dominant bg)
    #1A1A2E  Deep navy (headings)
    #4A4F6A  Body text
    #8890A8  Muted text
    ═══════════════════════════════════════════════ */
    :root{
    --peri:     #b3c0d8;
    --peri-dk:  #7880A8;
    --peri-lt:  #BFC4DA;
    --peri-xs:  #E8EAF4;
    --peri-xxs: #F4F5FA;
    --navy:     #6b7288;
    --text:     #3D4260;
    --muted:    #6b7288;
    --border:   #E2E4EF;
    --border-lt:#EEF0F8;
    --white:    #FFFFFF;
    --off:      #FAFBFD;
    --shadow:   rgba(155,163,196,0.15);
    --font:     'Noto Sans Thai', sans-serif;
    }
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth;font-size:112%}
    body{font-family:var(--font);background:var(--white);color:var(--text);overflow-x:hidden;line-height:1.7}
    body.lang-en{font-family:var(--font)}
    body.lang-cn{font-family:var(--font);font-size:97%}
    ::-webkit-scrollbar{width:4px}
    ::-webkit-scrollbar-track{background:var(--off)}
    ::-webkit-scrollbar-thumb{background:var(--peri);border-radius:2px}
    /* ── NAVBAR ── */
    #navbar{
    position:sticky;top:0;left:0;right:0;z-index:500;
    background:rgba(255,255,255,0.97);
    backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border);
    transition:all 0.3s;
    }
    #navbar.scrolled{box-shadow:0 4px 24px rgba(155,163,196,0.18)}
    .nav-inner{display:flex;align-items:center;justify-content:space-between;height:66px;padding:0 2rem;max-width:1320px;margin:0 auto}
    .brand-logo {
    /* height: 34px; */
    width: auto;
    max-width: 267px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}
    @media(max-width:767px){.brand-logo{height:49px;max-width:230px;}}
    .nav-links{display:flex;align-items:center;list-style:none;margin:0;padding:0}
    .nav-link-item{
    color:var(--text);font-size:0.85rem;letter-spacing:0.08em;
    text-transform:uppercase;font-weight:500;padding:0.4rem 0.85rem;
    text-decoration:none;font-family:var(--font);transition:color 0.2s;position:relative;
    }
    .nav-link-item::after{content:'';position:absolute;bottom:0;left:50%;right:50%;height:2px;background:var(--peri);transition:all 0.3s;border-radius:1px}
    .nav-link-item:hover{color:var(--peri)}
    .nav-link-item:hover::after{left:12%;right:12%}
    /* Dropdown */
    .has-drop{position:relative}
    .drop-menu{
      position:absolute; top:calc(100% + 8px); left:0; transform:translateY(-6px);
      background:rgba(255,255,255,0.97); border:1px solid var(--border); border-radius:12px;
      padding:0; min-width:420px; z-index:600;
      box-shadow:0 16px 48px rgba(26,26,46,0.13), 0 2px 8px rgba(155,163,196,0.08);
      opacity:0; pointer-events:none;
      transition:opacity 0.2s ease, transform 0.2s ease;
      overflow:hidden; display:flex;
    }
    .has-drop:hover .drop-menu{
      opacity:1; pointer-events:all; transform:translateY(0);
    }
    /* Left panel — category list */
    .drop-left{
      width:260px; flex-shrink:0;
      background:#f0f2f7;
      padding:0.5rem 0;
    }
    .drop-cat{
      display:flex; align-items:center; justify-content:space-between;
      padding:0.65rem 1rem; font-size:0.82rem; color:var(--text);
      font-weight:500; cursor:default; letter-spacing:0.01em;
      border-left:3px solid transparent;
      transition:all 0.15s;
    }
    .drop-cat i{ font-size:0.6rem; color:var(--muted); opacity:0.6; }
    .drop-cat.active, .drop-cat:hover{
      background:rgba(255,255,255,0.7); color:var(--peri-dk);
      border-left-color:var(--peri);
    }
    /* Right panel — items */
    .drop-right{
      flex:1; padding:0.8rem 0.5rem;
      background:rgba(255,255,255,0.97);
    }
    .drop-panel{ display:none; }
    .drop-panel.active{ display:block; }
    .drop-item{
      display:block;
      color:var(--text); font-size:0.87rem; padding:0.6rem 1rem;
      text-decoration:none; border-radius:6px;
      transition:all 0.15s; font-weight:400; white-space:nowrap;
    }
    .drop-item:hover{ color:var(--peri-dk); background:var(--peri-xxs); }
    .drop-cols{ display:block; }
    .drop-sep{ display:none; }
    .drop-group{ display:none; }
    .drop-footer{ display:none; }
    .arr{font-size:0.48rem;margin-left:3px;opacity:0.4;vertical-align:middle}
    /* EN secondary bar */
    .en-bar{display:none;background:var(--peri-xxs);border-top:1px solid var(--border-lt);justify-content:center}
    .en-bar.show{display:flex}
    .en-item{color:var(--muted);font-size:0.76rem;letter-spacing:0.16em;text-transform:uppercase;text-decoration:none;padding:6px 20px;font-family:var(--font);border-right:1px solid var(--border-lt);transition:all 0.2s}
    .en-item:last-child{border-right:none}
    .en-item:hover{color:var(--peri);background:var(--peri-xs)}
    /* Lang */
    /* ── Lang dropdown ── */
    .lang-drop{position:relative;flex-shrink:0}
    .lang-drop-btn{
      display:flex;align-items:center;gap:6px;
      background:none;border:1px solid var(--border);border-radius:6px;
      color:var(--text);font-size:0.73rem;font-weight:700;letter-spacing:0.08em;
      padding:5px 10px;cursor:pointer;font-family:var(--font);
      transition:all 0.2s;white-space:nowrap;
    }
    .lang-drop-btn:hover{border-color:var(--peri);color:var(--peri)}
    .lang-drop-btn i{font-size:0.55rem;opacity:0.5;transition:transform 0.2s}
    .lang-drop.open .lang-drop-btn i{transform:rotate(180deg)}
    .lang-drop-menu{
      position:absolute;top:calc(100% + 8px);right:0;
      background:var(--white);border:1px solid var(--border);border-radius:10px;
      padding:0.4rem;min-width:130px;z-index:700;
      box-shadow:0 12px 36px rgba(26,26,46,0.1);
      opacity:0;pointer-events:none;transform:translateY(-6px);
      transition:opacity 0.18s ease,transform 0.18s ease;
    }
    .lang-drop.open .lang-drop-menu{opacity:1;pointer-events:all;transform:translateY(0)}
    .lb{
      display:flex;align-items:center;gap:8px;width:100%;
      background:none;border:none;border-radius:7px;
      color:var(--text);font-size:0.73rem;font-weight:600;letter-spacing:0.06em;
      padding:7px 10px;cursor:pointer;font-family:var(--font);
      transition:all 0.15s;text-align:left;
    }
    .lb:hover{background:var(--peri-xxs);color:var(--peri)}
    .lb.on{background:var(--peri-xxs);color:var(--peri)}
    .lb .lb-flag{font-size:1rem;line-height:1}
    .btn-book{background:var(--peri);border:none;color:var(--white);font-size:0.8rem;letter-spacing:0.12em;text-transform:uppercase;padding:7px 18px;border-radius:4px;font-family:var(--font);cursor:pointer;transition:all 0.25s;text-decoration:none;white-space:nowrap}
    .btn-book:hover{background:var(--peri-dk);color:var(--white)}
    .hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:none}
    .hamburger span{width:22px;height:1.5px;background:var(--text);transition:all 0.3s}
    /* Mobile drawer — slides in from right */
    #mobileMenu{
      display:block;
      position:fixed; top:0; right:0; bottom:0;
      width:80vw;
      background:var(--white);
      box-shadow:-8px 0 40px rgba(26,26,46,0.18);
      padding:5rem 1.8rem 2rem;
      z-index:1100;
      transform:translateX(110%);
      transition:transform 0.35s cubic-bezier(.4,0,.2,1);
      overflow-y:auto;
    }
    #mobileMenu.open{ transform:translateX(0); }
    /* Backdrop */
    #mobileBackdrop{
      display:none; position:fixed; inset:0; z-index:1050;
      background:rgba(26,26,46,0.55); backdrop-filter:blur(3px);
      transition:opacity 0.35s ease;
    }
    #mobileBackdrop.open{ display:block; }
    .mob-link{display:block;color:var(--text);font-size:0.98rem;letter-spacing:0.06em;text-transform:uppercase;text-decoration:none;padding:0.75rem 0;border-bottom:1px solid var(--border-lt);font-family:var(--font);transition:color 0.2s}
    .mob-link:hover{color:var(--peri)}
    .mob-sub{padding-left:1rem;border-left:2px solid var(--peri-lt);margin:0.3rem 0 0.6rem;display:none}
    .mob-sub.open{display:block}
    .mob-sub-item{display:block;color:var(--muted);font-size:0.88rem;padding:0.4rem 0;text-decoration:none;font-family:var(--font);transition:color 0.2s}
    .mob-sub-item:hover{color:var(--peri)}
    /* ── HERO CAROUSEL ── */
    .hero-carousel{
    position:relative; width:100%;
    height: calc(100vw * 825 / 1920);
    max-height: 825px;
    min-height: 420px;
    overflow:hidden; padding-top:0;
    }
     @media(max-width:767px){
      .hero-carousel {
height: 537px;
min-height: 537px;
}
     }
    .hero-carousel .slide{
    position:absolute; inset:0;
    opacity:1; z-index:0;
    display:flex; align-items:flex-end;
    }
    .hero-carousel .slide.active{ z-index:1; }
    /* Reveal wipe layer */
    .hero-carousel .slide::after{
      content:'';
      position:absolute; inset:0; z-index:3;
      background:var(--peri-xs);
      transform:translateX(-101%);
      pointer-events:none;
    }
    .hero-carousel .slide.reveal-in::after{
      animation: slideRevealIn 0.75s cubic-bezier(0.77,0,0.18,1) forwards;
    }
    @keyframes slideRevealIn{
      0%   { transform:translateX(-101%); }
      45%  { transform:translateX(0%); }
      55%  { transform:translateX(0%); }
      100% { transform:translateX(101%); }
    }
    /* slide backgrounds — gradient placeholders until real images added */
    .slide-1{ background:linear-gradient(135deg,#1a1a2e 0%,#2d2b55 40%,#9ba3c4 100%); }
    .slide-2{ background:linear-gradient(135deg,#0d1b2a 0%,#1b3a4b 40%,#7880a8 100%); }
    .slide-3{ background:linear-gradient(135deg,#1a1229 0%,#3d2b55 40%,#bfc4da 100%); }
    .slide-4{ background:linear-gradient(160deg,#101820 0%,#1c2b40 50%,#9ba3c4 100%); }
    /* Real image support: add bg-image inline on each .slide */
    .slide[style*="background-image"]{
    background-size:cover; background-position:center;
    }
    /* Dark overlay on image slides */
    .slide-overlay{
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(10,10,20,0.85) 0%, rgba(10,10,20,0.35) 60%, rgba(10,10,20,0.15) 100%);
    }
    /* Decorative pattern */
    .slide-pattern{
    position:absolute; inset:0; opacity:0.04;
    background-image:radial-gradient(rgba(255,255,255,0.8) 1px, transparent 1px);
    background-size:40px 40px;
    }
    /* Slide content — bottom-left aligned */
    .slide-content{
    position:relative; z-index:2;
    max-width:1320px; margin:0 auto; padding:0 2.5rem 5rem;
    width:100%;
    }
    .slide-tag{
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(155,163,196,0.2); backdrop-filter:blur(8px);
    border:1px solid rgba(155,163,196,0.3);
    border-radius:20px; padding:5px 14px;
    font-size:0.78rem; color:rgba(255,255,255,0.8);
    letter-spacing:0.18em; text-transform:uppercase;
    margin-bottom:1.2rem;
    }
    .slide-tag i{ color:var(--peri-lt); }
    .slide-title{
    font-size:clamp(2.4rem,6vw,5.2rem);
    font-weight:700; color:#fff; line-height:1.1;
    margin-bottom:1rem; max-width:700px;
    }
    .slide-title em{ color:var(--peri-lt); font-style:normal; }
    .slide-sub{
    font-size:1.12rem; color:rgba(255,255,255,0.65);
    line-height:1.8; max-width:520px; margin-bottom:2rem;
    }
    .slide-actions{ display:flex; gap:1rem; flex-wrap:wrap; }
    .s-btn-pri{
    background:var(--peri); color:#fff; border:none;
    padding:13px 28px; border-radius:4px;
    font-size:0.88rem; font-weight:700; letter-spacing:0.12em;
    text-transform:uppercase; cursor:pointer; transition:all 0.3s;
    text-decoration:none; display:inline-flex; align-items:center; gap:8px;
    font-family:var(--font);
    }
    .s-btn-pri:hover{ background:var(--peri-dk); color:#fff; transform:translateY(-2px); box-shadow:0 10px 30px rgba(155,163,196,0.4); }
    .s-btn-out{
    background:rgba(255,255,255,0.1); color:#fff;
    border:1.5px solid rgba(255,255,255,0.4);
    padding:13px 26px; border-radius:4px;
    font-size:0.88rem; letter-spacing:0.12em; text-transform:uppercase;
    cursor:pointer; transition:all 0.3s;
    text-decoration:none; display:inline-flex; align-items:center; gap:8px;
    font-family:var(--font); backdrop-filter:blur(8px);
    }
    .s-btn-out:hover{ background:rgba(255,255,255,0.22); color:#fff; transform:translateY(-2px); }
    /* ── Carousel controls ── */
    .car-prev, .car-next{
    position:absolute; top:50%; transform:translateY(-50%);
    z-index:10; width:50px; height:50px;
    background:rgba(255,255,255,0.1); backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.2); border-radius:50%;
    color:#fff; font-size:1rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all 0.3s;
    }
    .car-prev{ left:1.5rem; }
    .car-next{ right:1.5rem; }
    .car-prev:hover,.car-next:hover{
    background:var(--peri); border-color:var(--peri);
    transform:translateY(-50%) scale(1.08);
    }
    /* ── Dots ── */
    .car-dots{
    position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
    display:flex; gap:8px; z-index:10;
    }
    .car-dot{
    width:8px; height:8px; border-radius:4px;
    background:rgba(255,255,255,0.35); border:none; cursor:pointer;
    transition:all 0.4s; padding:0;
    }
    .car-dot.active{ background:var(--peri); width:28px; }
    /* ── Progress bar ── */
    .car-progress{
    position:absolute; bottom:0; left:0; height:3px;
    background:var(--peri); z-index:10;
    width:0; transition:width 0s linear;
    }
    /* ── Slide counter ── */
    .car-counter{
    position:absolute; top:1.5rem; right:2rem;
    z-index:10; color:rgba(255,255,255,0.5);
    font-size:0.75rem; letter-spacing:0.1em;
    }
    .car-counter span{ color:var(--peri-lt); font-weight:700; font-size:1rem; }
    /* ── Thumbnail strip ── */
    .car-thumbs{
    position:absolute; bottom:4rem; right:2rem;
    z-index:10; display:flex; flex-direction:column; gap:8px;
    }
    .car-thumb{
    width:56px; height:40px; border-radius:6px;
    border:2px solid transparent; cursor:pointer;
    overflow:hidden; transition:all 0.3s; opacity:0.55;
    }
    .car-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
    .car-thumb.active{ border-color:var(--peri); opacity:1; transform:scale(1.05); }
    /* Responsive */
    @media(max-width:767px){
    .slide-title{ font-size:clamp(1.9rem,8vw,3rem); }
    .slide-content{ padding:0 1.2rem 4rem; }
    .car-thumbs{ display:none; }
    .car-prev,.car-next{ width:40px; height:40px; font-size:0.85rem; }
    }
    /* ── Desktop vs Mobile carousel visibility ── */
    .hero-carousel-desktop{ display:block; }
    .hero-carousel-mobile{ display:none; }
    @media(max-width:767px){
      .hero-carousel-desktop{ display:none !important; }
      .hero-carousel-mobile{ display:block; }
    }
    /* Mobile carousel uses same styles but different ID for counter/dots */
    #carNumMob{ color:var(--peri-lt); font-weight:700; font-size:1rem; }
    /* ── Keep other hero utilities ── */
    .btn-pri{background:var(--peri);color:var(--white);border:none;font-family:var(--font);font-size:0.78rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;padding:13px 26px;border-radius:4px;cursor:pointer;transition:all 0.3s;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
    .btn-pri:hover{background:var(--peri-dk);color:var(--white);transform:translateY(-2px);box-shadow:0 10px 30px rgba(155,163,196,0.35)}
    .btn-out{background:transparent;color:var(--peri-dk);border:1.5px solid var(--peri);font-family:var(--font);font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;padding:13px 26px;border-radius:4px;cursor:pointer;transition:all 0.3s;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
    .btn-out:hover{background:var(--peri);color:var(--white);transform:translateY(-2px)}
    .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-top:2.5rem}
    .stat-box{background:var(--white);text-align:center;padding:1.2rem 0.5rem}
    .stat-n{font-family:var(--font);font-size:1.9rem;color:var(--peri);line-height:1;font-weight:400}
    .stat-l{font-size:0.59rem;color:var(--muted);letter-spacing:0.1em;text-transform:uppercase;margin-top:4px;font-family:var(--font)}
    /* Tech panel — right side of hero */
    .tech-panel{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:2.5rem;box-shadow:0 8px 40px var(--shadow)}
    .tp-head{font-family:var(--font);font-size:1rem;color:var(--navy);letter-spacing:0.06em;margin-bottom:1.4rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
    .tp-item{display:flex;align-items:flex-start;gap:14px;padding:1.1rem 0;border-bottom:1px solid var(--border-lt)}
    .tp-item:last-child{border-bottom:none;padding-bottom:0}
    .tp-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:6px}
    .dot-peri{background:var(--peri);box-shadow:0 0 6px rgba(155,163,196,0.5)}
    .dot-red{background:#C96A6A;box-shadow:0 0 6px rgba(201,106,106,0.4)}
    .dot-teal{background:#6AA8A0;box-shadow:0 0 6px rgba(106,168,160,0.4)}
    .tp-name{font-family:var(--font);font-size:0.8rem;color:var(--navy);font-weight:700;letter-spacing:0.04em;margin-bottom:2px}
    .tp-wave{font-size:0.63rem;color:var(--muted);font-family:var(--font)}
    .tp-desc{font-size:0.75rem;color:var(--muted);line-height:1.75;font-family:var(--font);margin-top:4px}
    .scroll-cue{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--peri-lt);font-size:0.57rem;letter-spacing:0.2em;text-transform:uppercase;font-family:var(--font);animation:bob 2.2s ease-in-out infinite}
    .scroll-line{width:1px;height:34px;background:linear-gradient(var(--peri),transparent)}
    @keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}
    /* ── SECTIONS ── */
    .sec{padding:96px 0}
    .sec-white{background:var(--white)}
    .sec-off{background:var(--off)}
    .sec-tint{background:var(--peri-xxs)}
    .sec-peri{background:var(--peri);position:relative;overflow:hidden}
    .con{max-width:1380px;margin:0 auto;padding:0 2rem}
    .sec-lbl{font-family:var(--font);font-size:0.65rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--peri);margin-bottom:0.5rem}
    .sec-lbl.inv{color:rgba(255,255,255,0.7)}
    .sec-title{font-family:var(--font);font-size:clamp(2rem,3.8vw,3rem);font-weight:700;line-height:1.2;margin-bottom:0.8rem}
    .sec-title em{font-style:italic;color:var(--peri)}
    .sec-title.onwh{color:var(--navy)}
    .sec-title.oninv{color:var(--white)}
    .sec-title.oninv em{color:rgba(255,255,255,0.8);font-style:italic}
    .peri-rule{width:44px;height:2px;background:var(--peri);border-radius:1px;margin:0.9rem 0}
    .peri-rule.c{margin-left:auto;margin-right:auto}
    .peri-rule.inv{background:rgba(255,255,255,0.5)}
    .sec-desc{font-size:0.9rem;line-height:1.95;color:var(--muted)}
    .sec-desc.inv{color:rgba(255,255,255,0.75)}
    .fu{opacity:0;transform:translateY(24px);transition:opacity 0.65s ease,transform 0.65s ease}
    .fu.vis{opacity:1;transform:translateY(0)}
    /* ── SERVICES ── */
    .srv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem}
    .srv-card{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:2.2rem 1.8rem;transition:all 0.35s;position:relative;overflow:hidden}
    .srv-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--peri);transform:scaleX(0);transform-origin:left;transition:transform 0.35s;border-radius:14px 14px 0 0}
    .srv-card:hover{border-color:var(--peri-lt);box-shadow:0 12px 40px var(--shadow);transform:translateY(-5px)}
    .srv-card:hover::before{transform:scaleX(1)}
    .srv-n-bg{font-family:var(--font);font-size:2.8rem;color:rgba(155,163,196,0.1);line-height:1;margin-bottom:0.8rem;font-weight:700}
    .srv-ico{width:46px;height:46px;background:var(--peri-xxs);border:1px solid var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--peri);font-size:1.1rem;margin-bottom:1rem;transition:all 0.3s}
    .srv-card:hover .srv-ico{background:var(--peri);color:var(--white);border-color:var(--peri)}
    .srv-name{font-family:var(--font);font-size:1.25rem;color:var(--navy);margin-bottom:0.4rem;font-weight:500}
    .srv-tag{font-size:0.68rem;color:var(--peri);letter-spacing:0.15em;text-transform:uppercase;border:1px solid var(--peri-lt);padding:2px 8px;border-radius:3px;margin-bottom:0.7rem;font-family:var(--font);display:inline-block;background:var(--peri-xxs)}
    .srv-desc{font-size:0.9rem;color:var(--muted);line-height:1.85;font-family:var(--font)}
    .srv-more{display:inline-flex;align-items:center;gap:5px;color:var(--peri);font-size:0.8rem;letter-spacing:0.12em;text-transform:uppercase;text-decoration:none;margin-top:1.1rem;font-family:var(--font);transition:gap 0.3s}
    .srv-more:hover{gap:9px;color:var(--peri-dk)}
    /* ── ANOLYZE ── */
    .an-card{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:2.5rem;box-shadow:0 6px 30px var(--shadow)}
    .step-row{display:flex;align-items:flex-start;gap:16px;margin-bottom:2rem}
    .step-row:last-child{margin-bottom:0}
    .step-num{width:40px;height:40px;flex-shrink:0;border:1.5px solid var(--peri);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font);font-size:1.1rem;color:var(--peri);background:var(--peri-xxs)}
    .step-t{font-size:0.98rem;color:var(--navy);font-weight:600;margin-bottom:3px;font-family:var(--font)}
    .step-d{font-size:0.88rem;color:var(--muted);line-height:1.8;font-family:var(--font)}
    /* ── DEKA SECTION ── inverted peri bg */
    .deka-section{background:var(--peri);padding:100px 0;position:relative;overflow:hidden}
    .deka-section::before{content:'DEKA';position:absolute;right:-60px;top:50%;transform:translateY(-50%);font-family:var(--font);font-size:18rem;color:rgba(255,255,255,0.06);line-height:1;pointer-events:none;font-weight:700}
    .deka-big-badge{display:inline-flex;align-items:center;gap:14px;background:rgba(255,255,255,0.15);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.25);border-radius:8px;padding:14px 22px;margin-bottom:2rem}
    .deka-big-icon{width:44px;height:44px;background:var(--white);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#D4A89A;font-size:1.2rem;flex-shrink:0}
    .deka-big-t strong{display:block;color:var(--white);font-family:var(--font);font-size:1.1rem}
    .deka-big-t span{font-size:0.78rem;color:rgba(255,255,255,0.7);letter-spacing:0.1em;font-family:var(--font)}
    /* tc-grid: desktop = CSS grid, mobile = Swiper */
    .tc-swiper-wrap { margin-top: 2rem; position: relative; }
    .tc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; align-items: stretch; }
    /* mobile swiper overrides */
    @media (max-width: 767px) {
        .tc-swiper { overflow: hidden; }
        .tc-grid {
            display: flex;          /* swiper-wrapper needs flex */
            gap: 0;
        }
        .tc-card.swiper-slide {
            width: 80vw !important;
            flex-shrink: 0;
            margin-right: 12px;
            height: auto !important;
        }
        .tc-pagination {
            display: flex;
            justify-content: center;
            gap: 6px;
            margin-top: 1rem;
        }
        .tc-pagination .swiper-pagination-bullet {
            width: 7px; height: 7px; border-radius: 4px;
            background: rgba(255,255,255,0.4); opacity: 1; transition: all 0.3s;
        }
        .tc-pagination .swiper-pagination-bullet-active {
            width: 22px; background: #fff;
        }
    }
    .tc-card{
        background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);
        border-radius:12px;padding:1.8rem 1.5rem;transition:all 0.35s;backdrop-filter:blur(8px);
        display:grid;
        grid-template-rows: auto auto auto 1fr auto;  /* lbl | name | wave | desc | pill */
        align-items:start;
    }
    .tc-card:hover{background:rgba(255,255,255,0.2);transform:translateY(-4px)}
    .tc-lbl{font-size:0.68rem;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,0.6);font-family:var(--font);margin-bottom:0.4rem}
    .tc-name{font-family:var(--font);font-size:1.3rem;color:var(--white);margin-bottom:0.2rem;font-weight:700}
    .tc-wave{font-size:0.78rem;color:rgba(255,255,255,0.55);font-family:var(--font);margin-bottom:0.7rem}
    .tc-desc{font-size:0.88rem;color:rgba(255,255,255,0.65);line-height:1.8;font-family:var(--font);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
    .tc-pill{display:inline-block;background:rgb(166 179 202);border:1px solid rgba(255,255,255,0.3);color:var(--white);font-size:0.7rem;letter-spacing:0.08em;padding:3px 10px;border-radius:3px;margin-top:1rem;font-family:var(--font);align-self:end}
    /* ── DOCTORS ── */
    .doc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem}
    .doc-card{background:var(--white);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:all 0.35s}
    .doc-card:hover{border-color:var(--peri-lt);box-shadow:0 16px 50px var(--shadow);transform:translateY(-5px)}
    .doc-photo{position:relative;aspect-ratio:3/2;background:linear-gradient(135deg,var(--peri-xxs),var(--peri-xs));display:flex;align-items:center;justify-content:center;overflow:hidden}
    .doc-ph{font-size:5rem;color:rgba(155,163,196,0.3);transition:transform 0.4s}
    .doc-card:hover .doc-ph{transform:scale(1.05)}
    .doc-ovl{position:absolute;inset:0;background:rgba(155,163,196,0.35);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;opacity:0;transition:opacity 0.3s;cursor:pointer;backdrop-filter:blur(4px)}
    .doc-card:hover .doc-ovl{opacity:1}
    .play-ring{width:56px;height:56px;border:2px solid var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--white);font-size:1.2rem;transition:all 0.25s;padding-left:3px}
    .play-ring:hover{background:var(--white);color:var(--peri)}
    .vid-cue{font-size:0.63rem;color:var(--white);letter-spacing:0.14em;text-transform:uppercase;font-family:var(--font)}
    .doc-body{padding:1.5rem}
    .doc-name{font-family:var(--font);font-size:1.22rem;color:var(--navy);margin-bottom:0.2rem;font-weight:500}
    .doc-spec{font-size:0.77rem;color:var(--peri);letter-spacing:0.12em;text-transform:uppercase;font-family:var(--font);margin-bottom:0.8rem}
    .doc-bio{font-size:0.88rem;color:var(--muted);line-height:1.85;margin-bottom:0.9rem;font-family:var(--font)}
    .doc-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:1rem}
    .doc-tag{font-size:0.72rem;color:var(--peri-dk);border:1px solid var(--peri-lt);padding:2px 8px;border-radius:3px;font-family:var(--font);background:var(--peri-xxs)}
    .btn-vid-doc{width:100%;background:var(--peri-xxs);border:1px solid var(--peri-lt);color:var(--peri-dk);border-radius:5px;font-size:0.82rem;font-family:var(--font);letter-spacing:0.1em;text-transform:uppercase;padding:9px;cursor:pointer;transition:all 0.25s;display:flex;align-items:center;justify-content:center;gap:8px}
    .btn-vid-doc:hover{background:var(--peri);color:var(--white);border-color:var(--peri)}
    /* ── VIDEO MODAL ── */
    .v-modal{display:none;position:fixed;inset:0;z-index:9999;background:rgba(26,26,46,0.85);align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(8px)}
    .v-modal.open{display:flex}
    .v-box{background:var(--white);border:1px solid var(--border);border-radius:16px;overflow:hidden;width:100%;max-width:760px;position:relative;animation:vIn 0.3s ease;box-shadow:0 40px 100px rgba(0,0,0,0.3)}
    @keyframes vIn{from{transform:scale(0.9);opacity:0}to{transform:scale(1);opacity:1}}
    .v-close{position:absolute;top:12px;right:12px;z-index:1;width:32px;height:32px;background:var(--peri-xxs);border:1px solid var(--border);border-radius:50%;color:var(--muted);cursor:pointer;font-size:0.85rem;display:flex;align-items:center;justify-content:center;transition:all 0.2s}
    .v-close:hover{background:var(--peri);color:var(--white);border-color:var(--peri)}
    .v-screen{aspect-ratio:16/9;background:var(--peri-xxs);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--muted);font-family:var(--font);font-size:0.88rem;text-align:center;padding:2rem}
    .v-pi{font-size:3.5rem;color:var(--peri-lt)}
    .v-info{padding:1.4rem 2rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
    .v-name{font-family:var(--font);font-size:1.2rem;color:var(--navy)}
    .v-spec{font-size:0.67rem;color:var(--peri);letter-spacing:0.1em;font-family:var(--font)}
    /* ── WHY ── */
    .why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:3rem}
    .why-card{text-align:center;padding:2.3rem 1.4rem;border:1px solid var(--border);border-radius:14px;background:var(--white);transition:all 0.35s}
    .why-card:hover{border-color:var(--peri-lt);box-shadow:0 10px 36px var(--shadow);transform:translateY(-4px)}
    .why-ico {
    width: 54px;
    height: 54px;
    background: #D4A89A;
    border: 1px solid #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin: 0 auto 1.1rem;
    color: #ffffff;
}
    .why-card:hover .why-ico{background:var(--peri);color:var(--white);border-color:var(--peri)}
    .why-t{font-family:var(--font);font-size:1.15rem;color:var(--navy);margin-bottom:0.5rem;font-weight:700}
    .why-d{font-size:0.88rem;color:var(--muted);line-height:1.85;font-family:var(--font)}
    /* ── TESTIMONIALS ── */
    /* ── REVIEWS SWIPER ── */
    #reviews { background: linear-gradient(160deg, var(--peri-xxs) 0%, #fff 60%); }
    .reviews-header { margin-bottom: 3.5rem; }
    .reviews-meta { display:flex; align-items:center; justify-content:center; gap:2rem; margin-top:1.4rem; flex-wrap:wrap; }
    .reviews-avg { display:flex; align-items:center; gap:10px; }
    .reviews-avg-num { font-size:2.6rem; font-weight:700; color:var(--navy); line-height:1; }
    .reviews-avg-stars { color:#F4B942; font-size:1.05rem; letter-spacing:2px; }
    .reviews-avg-count { font-size:0.82rem; color:var(--muted); }
    .reviews-badge { display:inline-flex; align-items:center; gap:7px; background:rgba(155,163,196,0.12); border:1px solid var(--border); border-radius:20px; padding:5px 14px; font-size:0.8rem; color:var(--peri-dk); letter-spacing:0.1em; }

    /* Swiper wrapper */
    .reviews-swiper-wrap { position:relative; padding:0; }
    .swiper.reviews-swiper { overflow:hidden; padding:1rem 0.5rem 0.5rem; }
    .swiper-slide.test-card-slide { height:auto; }

    /* Card — clean minimal style */
    .test-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 1.8rem 1.6rem;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      height: 100%;
      box-shadow: 0 2px 12px rgba(155,163,196,0.07);
      transition: box-shadow 0.3s ease, transform 0.3s ease;
    }
    .test-card:hover {
      box-shadow: 0 10px 36px rgba(155,163,196,0.16);
      transform: translateY(-3px);
    }
    .t-stars { color:#F4B942; font-size:1rem; letter-spacing:3px; }
    .t-text {
      font-size:0.92rem; color:var(--text); line-height:1.85;
      flex:1;
    }
    .t-name { font-size:0.95rem; color:var(--navy); font-weight:700; line-height:1.4; }
    .t-loc  { font-size:0.78rem; color:var(--muted); margin-top:2px; }
    /* hide unused elements */
    .t-q, .t-treatment, .t-av, .t-auth { display:none !important; }

    /* Swiper custom nav */
    .reviews-nav { display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:1.5rem; }
    .rev-btn {
      width:44px; height:44px; border-radius:50%;
      border:1.5px solid var(--border); background:var(--white);
      color:var(--muted); display:flex; align-items:center; justify-content:center;
      cursor:pointer; transition:all 0.25s; font-size:0.9rem;
      box-shadow:0 2px 10px rgba(155,163,196,0.1);
    }
    .rev-btn:hover { background:var(--peri); color:#fff; border-color:var(--peri); transform:scale(1.08); }
    .rev-btn.swiper-button-disabled { opacity:0.3; cursor:not-allowed; pointer-events:none; }

    /* Pagination dots */
    .reviews-pagination { display:flex; align-items:center; gap:6px; }
    .reviews-pagination .swiper-pagination-bullet {
      width:7px; height:7px; border-radius:4px;
      background:var(--peri-lt); opacity:1; transition:all 0.4s;
    }
    .reviews-pagination .swiper-pagination-bullet-active {
      background:var(--peri); width:22px;
    }
    /* ── CONTACT ── */
    .con-grid{display:grid;grid-template-columns:5fr 7fr;gap:3rem;margin-top:3rem}
    .ci-box{background:var(--white);border-radius:14px;padding:2.5rem;border:1px solid var(--border);box-shadow:0 4px 24px var(--shadow)}
    .ci-row{display:flex;gap:14px;align-items:flex-start;padding:0.9rem 0;border-bottom:1px solid var(--border-lt)}
    .ci-row:last-of-type{border-bottom:none}
    .ci-ico{width:36px;height:36px;flex-shrink:0;background:var(--peri-xxs);border:1px solid var(--peri-lt);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--peri);font-size:0.85rem}
    .ci-lbl{font-size:0.7rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);font-family:var(--font);margin-bottom:2px}
    .ci-val{font-size:0.93rem;color:var(--text);font-family:var(--font);line-height:1.6}
    .soc-row{display:flex;gap:9px;margin-top:1.3rem}
    .soc-btn{width:36px;height:36px;border:1px solid rgba(255,255,255,0.45);border-radius:50%;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.8);font-size:0.82rem;transition:all 0.25s;text-decoration:none}
    .soc-btn:hover{background:var(--peri);border-color:var(--peri);color:var(--white)}
    .cf-box{background:var(--white);border-radius:14px;padding:2.5rem;border:1px solid var(--border);box-shadow:0 4px 24px var(--shadow)}
    .f-lbl{font-size:0.82rem;color:var(--text);letter-spacing:0.05em;margin-bottom:4px;font-family:var(--font);font-weight:700;text-transform:uppercase}
    .f-ctrl{width:100%;border:1.5px solid var(--border);border-radius:6px;padding:11px 13px;font-family:var(--font);font-size:0.96rem;color:var(--text);background:var(--off);transition:all 0.25s;outline:none}
    .f-ctrl:focus{border-color:var(--peri);background:var(--white);box-shadow:0 0 0 3px rgba(155,163,196,0.12)}
    .f-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
    .f-full{margin-bottom:1rem}
    .btn-sub{width:100%;background:var(--peri);color:var(--white);border:none;border-radius:6px;font-family:var(--font);font-size:0.9rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;padding:14px;cursor:pointer;transition:all 0.3s;display:flex;align-items:center;justify-content:center;gap:10px}
    .btn-sub:hover{background:var(--peri-dk)}
    /* ── FOOTER ── */
    footer{background:var(--navy);border-top:none;padding:70px 0 30px}
    .ft-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:3rem;max-width:1320px;margin:0 auto;padding:0 2rem}
    .ft-logo{height:30px;width:auto;object-fit:contain;margin-bottom:1rem;filter:brightness(10) saturate(0)}
    .ft-desc{font-size:0.88rem;color:rgba(255,255,255,0.75);line-height:1.9;font-family:var(--font)}
    .ft-h{font-family:var(--font);font-size:1.05rem;color:var(--white);margin-bottom:1.1rem;font-weight:600}
    .ft-lnk{display:block;color:rgba(255,255,255,0.75);font-size:0.88rem;text-decoration:none;margin-bottom:0.45rem;font-family:var(--font);transition:color 0.2s}
    .ft-lnk:hover{color:#fff}
    .ft-bot{max-width:1320px;margin:2.5rem auto 0;padding:1.4rem 2rem 0;border-top:1px solid rgba(255,255,255,0.18);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
    .ft-copy{font-size:0.8rem;color:rgba(255,255,255,0.55);font-family:var(--font)}
    .ft-tag{font-size:0.8rem;color:rgba(255,255,255,0.55);font-family:var(--font);font-style:italic}
    /* LINE float */
    .line-float{position:fixed;bottom:26px;right:22px;width:50px;height:50px;background:#06C755;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.4rem;box-shadow:0 6px 22px rgba(6,199,85,0.4);z-index:990;text-decoration:none;transition:transform 0.3s}
    .line-float:hover{transform:scale(1.1);color:#fff}
    /* ── RESPONSIVE ── */
    @media(max-width:1199px){.hero-wrap{grid-template-columns:1fr;gap:3rem}.tech-panel{max-width:600px;margin:0 auto;width:100%}.srv-grid{grid-template-columns:repeat(2,1fr)}.tc-grid{grid-template-columns:1fr 1fr}.doc-grid{grid-template-columns:repeat(2,1fr)}.why-grid{grid-template-columns:repeat(2,1fr)}.ft-grid{grid-template-columns:1fr 1fr}}
    @media(max-width:767px){.nav-links,.btn-book{display:none!important}.hamburger{display:flex!important}.hero-wrap{padding:3rem 1.5rem}.srv-grid,.doc-grid{grid-template-columns:1fr}.why-grid{grid-template-columns:1fr 1fr}.con-grid{grid-template-columns:1fr}.ft-grid{grid-template-columns:1fr 1fr;gap:2rem}.f-row{grid-template-columns:1fr}.sec{padding:70px 0}.lang-drop{display:none}}
    @media(max-width:480px){.why-grid,.ft-grid{grid-template-columns:1fr}.hero-stats{grid-template-columns:repeat(3,1fr)}}
    body.lang-cn .sec-title{font-size:clamp(1.5rem,3vw,2.5rem)}
    body.lang-cn .hero-title{font-size:clamp(2rem,4.5vw,4rem)}

    /* ── PROGRAM LOGOS SWIPER ── */
    .program-logos-swiper { overflow: hidden; }
    .program-logos-swiper .swiper-slide {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 12px;
    }
    .program-logos-swiper .hover-img {
      transition: transform 0.3s ease, opacity 0.3s ease;
      opacity: 0.85;
    }
    .program-logos-swiper .hover-img:hover {
      transform: scale(1.05);
      opacity: 1;
    }

    /* ═══════════════════════════════════════
       SMOOTH & MINIMAL EFFECTS
    ═══════════════════════════════════════ */

    /* ── Page load fade ── */
    body { animation: pageFadeIn 0.7s ease both; }
    @keyframes pageFadeIn { from{opacity:0} to{opacity:1} }

    /* ── Scroll progress bar (thin & elegant) ── */
    #scroll-progress {
      position: fixed; top: 0; left: 0; height: 2px; z-index: 400;
      background: linear-gradient(90deg, var(--peri-lt), var(--peri), var(--peri-dk));
      width: 0%; transition: width 0.1s linear;
      pointer-events: none;
    }

    /* ── Scroll-to-top button ── */
    #scroll-top {
      position: fixed; bottom: 90px; right: 22px;
      width: 42px; height: 42px;
      background: var(--white); border: 1px solid var(--border);
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
      color: var(--peri); font-size: 0.85rem; cursor: pointer; z-index: 990;
      box-shadow: 0 4px 20px rgba(155,163,196,0.2);
      opacity: 0; transform: translateY(10px);
      transition: opacity 0.4s ease, transform 0.4s ease, background 0.2s, color 0.2s;
      text-decoration: none;
    }
    #scroll-top.show { opacity: 1; transform: translateY(0); }
    #scroll-top:hover { background: var(--peri); color: #fff; }

    /* ── Refined scroll-reveal: fade up ── */
    .fu {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.8s cubic-bezier(.4,0,.2,1), transform 0.8s cubic-bezier(.4,0,.2,1);
    }
    .fu.vis { opacity: 1; transform: translateY(0); }

    /* ── LINE float: gentle pulse ── */
    @keyframes linePulse {
      0%,100% { box-shadow: 0 6px 22px rgba(6,199,85,0.35); }
      50%      { box-shadow: 0 6px 22px rgba(6,199,85,0.35), 0 0 0 8px rgba(6,199,85,0.08); }
    }
    .line-float { animation: linePulse 3s ease-in-out infinite; }

    /* ── Navbar: smooth shadow on scroll ── */
    #navbar { transition: box-shadow 0.4s ease, background 0.4s ease; }
    #navbar.scrolled {
      box-shadow: 0 2px 24px rgba(155,163,196,0.14);
      background: rgba(255,255,255,0.99);
    }

    /* ── Buttons: subtle lift ── */
    .btn-pri, .btn-book, .s-btn-pri, .btn-sub, .ab-cta-label {
      transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    }
    .btn-pri:hover, .btn-book:hover, .s-btn-pri:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(155,163,196,0.3);
    }
    .btn-sub:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 24px rgba(155,163,196,0.3);
    }

    /* ── Service cards: clean hover ── */
    .srv-card {
      transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    }
    .srv-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 40px rgba(155,163,196,0.18);
    }

    /* ── Why cards ── */
    .why-card {
      transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    }
    .why-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 32px rgba(155,163,196,0.16);
    }

    /* ── Why icon: smooth fill ── */
    .why-ico { }
    .why-card:hover .why-ico { background: var(--peri); color: #fff; border-color: var(--peri); }

    /* ── DEKA tech cards ── */
    .tc-card { transition: transform 0.35s ease, background 0.35s ease; }
    .tc-card:hover { transform: translateY(-4px); background: rgba(255,255,255,0.22); }

    /* ── Testimonial cards (handled in reviews block above) ── */

    /* ── Form inputs: clean focus ── */
    .f-ctrl {
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }
    .f-ctrl:focus {
      border-color: var(--peri);
      box-shadow: 0 0 0 3px rgba(155,163,196,0.12);
      outline: none;
    }

    /* ── Section rule: animate width ── */
    .peri-rule {
      width: 0; transition: width 0.9s cubic-bezier(.4,0,.2,1) 0.2s;
    }
    .peri-rule.animated { width: 44px; }

    /* ── Active nav link ── */
    .nav-link-item.active { color: var(--peri); }
    .nav-link-item.active::after { left: 12%; right: 12%; }

    /* ── Footer links: subtle indent ── */
    .ft-lnk { transition: color 0.2s ease, padding-left 0.2s ease; }
    .ft-lnk:hover { color: var(--peri-lt) !important; padding-left: 4px; }

    /* ── About image: gentle reveal ── */
    .ab-img-main-wrap {
      opacity: 0; transform: translateY(16px);
      transition: opacity 0.9s ease, transform 0.9s ease;
    }
    .ab-img-main-wrap.vis { opacity: 1; transform: translateY(0); }

    /* ── Stagger helper ── */
    .fu[data-delay="1"] { transition-delay: 0.1s; }
    .fu[data-delay="2"] { transition-delay: 0.2s; }
    .fu[data-delay="3"] { transition-delay: 0.3s; }
    .fu[data-delay="4"] { transition-delay: 0.4s; }

    /* ── Doctor thumb hover ── */
    .dr-thumb { transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease; }
    .dr-thumb:hover:not(.active) { transform: translateY(-2px); }

    /* ── Hamburger morph ── */
    .hamburger span { transition: transform 0.3s ease, opacity 0.3s ease; }
    .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
    .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }
    /* ── NAVBAR DROPDOWN (handled above) ── */
    /* ── PARTNER LOGO STRIP ── */
    .logo-strip {
    background: var(--white);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 2.8rem 0;
    overflow: hidden;
    }
    .logo-strip-inner {
    max-width: 1320px; margin: 0 auto; padding: 0 2rem;
    display: flex; align-items: center; justify-content: center;
    gap: 0; flex-wrap: wrap;
    }
    .logo-item {
    flex: 1; min-width: 180px; max-width: 280px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 2.5rem;
    border-right: 1px solid var(--border);
    transition: all 0.3s;
    }
    .logo-item:last-child { border-right: none; }
    .logo-item img {
    max-height: 70px; width: auto; max-width: 100%;
    object-fit: contain;
    opacity: 0.65;
    filter: grayscale(20%);
    transition: all 0.35s;
    }
    .logo-item:hover img {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.05);
    }
    @media(max-width:767px) {
    .logo-strip-inner { gap: 1rem; }
    .logo-item { min-width: 140px; padding: 0.8rem 1rem; border-right: none; border-bottom: 1px solid var(--border); }
    .logo-item:last-child { border-bottom: none; }
    }
    /* ══════════════════════════════════════════
       ABOUT SECTION — NEW DESIGN
    ══════════════════════════════════════════ */
    #about {
      background: var(--white);
      padding: 0;
      overflow: hidden;
    }
#about {
    background: var(--white);
    padding: 100px 0;
}
.ab-cta-label {
    background: var(--peri);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 13px 24px;
    border-radius: 6px 0 0 6px;
    transition: background 0.3s;
    font-family: var(--font);
}
    /* ── Hero Banner ── */
    .ab-hero {
      position: relative;
      height: 420px;
      background: linear-gradient(135deg, #1a1a2e 0%, #2d2b55 50%, #7880A8 100%);
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
    }
    .ab-hero-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to bottom, rgba(10,10,20,0.55) 0%, rgba(10,10,20,0.75) 100%);
    }
    .ab-hero-pattern {
      position: absolute; inset: 0; opacity: 0.04;
      background-image: radial-gradient(rgba(255,255,255,0.9) 1px, transparent 1px);
      background-size: 36px 36px;
    }
    .ab-hero-content {
      position: relative; z-index: 2; text-align: center; padding: 0 2rem;
    }
    .ab-hero-badge {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(155,163,196,0.18); backdrop-filter: blur(8px);
      border: 1px solid rgba(155,163,196,0.35); border-radius: 30px;
      padding: 6px 18px; margin-bottom: 1.4rem;
      font-size: 0.72rem; color: rgba(255,255,255,0.8);
      letter-spacing: 0.2em; text-transform: uppercase;
    }
    .ab-hero-badge i { color: var(--peri-lt); }
    .ab-hero-title {
      font-size: clamp(2.2rem, 5vw, 4rem);
      font-weight: 700; color: #fff; line-height: 1.15;
      margin-bottom: 1rem;
    }
    .ab-hero-title em { color: var(--peri-lt); font-style: normal; }
    .ab-hero-sub {
      font-size: 1.05rem; color: rgba(255,255,255,0.65);
      max-width: 580px; margin: 0 auto; line-height: 1.8;
    }

    /* ── Stat strip ── */
    .ab-stat-strip {
      display: grid; grid-template-columns: repeat(3, 1fr);
      background: var(--navy);
    }
    .ab-stat-item {
      padding: 2rem 1rem; text-align: center;
      border-right: 1px solid rgba(255,255,255,0.08);
    }
    .ab-stat-item:last-child { border-right: none; }
    .ab-stat-n {
      font-size: clamp(2rem, 4vw, 3rem); font-weight: 300;
      color: var(--peri-lt); line-height: 1;
      font-family: var(--font);
    }
    .ab-stat-n span { font-size: 1.4rem; font-weight: 600; color: #fff; }
    .ab-stat-l {
      font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
      color: rgba(255,255,255,0.45); margin-top: 6px;
    }

    /* ── Story section ── */
    .ab-story { padding: 100px 0 80px; background: var(--white); }
    .ab-story-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 80px; align-items: center;
    }
    .ab-img-stack { position: relative; }
    .ab-img-main-new {
      border-radius: 20px; overflow: hidden;
      aspect-ratio: 4/5; position: relative;
    }
    .ab-img-main-new img {
      width: 100%; height: 100%; object-fit: cover; display: block;
      transition: transform 0.6s ease;
    }
    .ab-img-main-new:hover img { transform: scale(1.04); }
    .ab-img-float {
      position: absolute; bottom: -28px; right: -28px;
      width: 200px; border-radius: 16px; overflow: hidden;
      box-shadow: 0 20px 60px rgba(26,26,46,0.2);
      border: 4px solid #fff;
    }
    .ab-img-float img { width: 100%; display: block; }
    .ab-deka-badge {
      position: absolute; top: 24px; left: -20px;
      background: var(--white); border-radius: 14px;
      padding: 14px 18px; box-shadow: 0 12px 40px rgba(26,26,46,0.14);
      display: flex; align-items: center; gap: 12px;
      min-width: 200px;
    }
    .ab-deka-icon {
      width: 44px; height: 44px; border-radius: 10px;
      background: var(--peri); display: flex; align-items: center; justify-content: center;
      color: #fff; font-size: 1.1rem; flex-shrink: 0;
    }
    .ab-deka-t { font-size: 0.78rem; font-weight: 700; color: var(--navy); }
    .ab-deka-s { font-size: 0.65rem; color: var(--muted); margin-top: 2px; }

    /* Right text */
    .ab-lbl {
      font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase;
      color: var(--peri); font-weight: 600; margin-bottom: 0.8rem;
    }
    .ab-title {
      font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 700;
      color: #3D4260; line-height: 1.2; margin-bottom: 1.2rem;
    }
    .ab-title em { color: var(--peri); font-style: normal; }
    .ab-body {
      font-size: 0.97rem; color: var(--muted); line-height: 2;
      margin-bottom: 1.6rem;
    }
    .ab-checks { list-style: none; padding: 0; margin: 0 0 2rem; }
    .ab-checks li {
      display: flex; align-items: flex-start; gap: 10px;
      font-size: 0.93rem; color: var(--text); margin-bottom: 0.7rem;
    }
    .ab-checks li i {
      color: var(--peri); margin-top: 3px; flex-shrink: 0; font-size: 0.8rem;
    }
    .ab-cta-row { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
    .ab-btn-pri {
      background: var(--peri); color: #fff; border: none;
      padding: 13px 26px; border-radius: 6px;
      font-size: 0.87rem; font-weight: 700; letter-spacing: 0.1em;
      text-transform: uppercase; cursor: pointer; transition: all 0.25s;
      text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
      font-family: var(--font);
    }
    .ab-btn-pri:hover { background: var(--peri-dk); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(155,163,196,0.4); }
    .ab-btn-out {
      color: var(--peri-dk); border: 1.5px solid var(--peri);
      background: transparent;
      padding: 12px 22px; border-radius: 6px;
      font-size: 0.87rem; font-weight: 600; letter-spacing: 0.06em;
      cursor: pointer; transition: all 0.25s;
      text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
      font-family: var(--font);
    }
    .ab-btn-out:hover { background: var(--peri-xs); transform: translateY(-2px); }

    /* ── 3 Tech cards ── */
    .ab-tech { padding: 0 0 100px; background: var(--white); }
    .ab-tech-header { text-align: center; margin-bottom: 3rem; }
    .ab-tech-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    }
    .ab-tech-card {
      border: 1px solid var(--border); border-radius: 20px;
      padding: 2.2rem 2rem; position: relative; overflow: hidden;
      transition: all 0.35s; cursor: default;
    }
    .ab-tech-card::before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(160deg, var(--peri-xxs) 0%, transparent 60%);
      opacity: 0; transition: opacity 0.35s;
    }
    .ab-tech-card:hover { border-color: var(--peri-lt); transform: translateY(-6px); box-shadow: 0 20px 50px rgba(155,163,196,0.18); }
    .ab-tech-card:hover::before { opacity: 1; }
    .ab-tech-num {
      font-size: 3.5rem; font-weight: 200; color: var(--peri-lt);
      line-height: 1; margin-bottom: 1rem; position: relative; z-index: 1;
    }
    .ab-tech-icon {
      width: 52px; height: 52px; border-radius: 14px;
      background: var(--peri-xs); border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      color: var(--peri); font-size: 1.2rem; margin-bottom: 1.2rem;
      position: relative; z-index: 1;
      transition: all 0.3s;
    }
    .ab-tech-card:hover .ab-tech-icon { background: var(--peri); color: #fff; border-color: var(--peri); }
    .ab-tech-name {
      font-size: 1.15rem; font-weight: 700; color: var(--navy);
      margin-bottom: 0.3rem; position: relative; z-index: 1;
    }
    .ab-tech-wave {
      font-size: 0.72rem; color: var(--peri); letter-spacing: 0.1em;
      text-transform: uppercase; margin-bottom: 1rem;
      position: relative; z-index: 1;
    }
    .ab-tech-desc {
      font-size: 0.88rem; color: var(--muted); line-height: 1.85;
      position: relative; z-index: 1;
    }
    .ab-tech-tags {
      display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1.2rem;
      position: relative; z-index: 1;
    }
    .ab-tech-tag {
      background: var(--peri-xxs); color: var(--peri-dk);
      font-size: 0.7rem; padding: 4px 10px; border-radius: 20px;
      border: 1px solid var(--border);
    }

    /* ── Why strip ── */
    .ab-why { background: var(--peri-xxs); padding: 80px 0; }
    .ab-why-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
      background: var(--border); border-radius: 20px; overflow: hidden;
    }
    .ab-why-item {
      background: var(--white); padding: 2rem 1.6rem;
      transition: background 0.25s;
    }
    .ab-why-item:hover { background: var(--peri-xxs); }
    .ab-why-ico {
      width: 48px; height: 48px; border-radius: 12px;
      background: var(--peri-xs); border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      color: var(--peri); font-size: 1rem; margin-bottom: 1rem;
      transition: all 0.25s;
    }
    .ab-why-item:hover .ab-why-ico { background: var(--peri); color: #fff; border-color: var(--peri); }
    .ab-why-t { font-size: 0.88rem; font-weight: 700; color: var(--navy); margin-bottom: 0.5rem; }
    .ab-why-d { font-size: 0.8rem; color: var(--muted); line-height: 1.75; }
/* ── ABOUT SECTION ── */
    #about{ background:var(--white); padding:100px 0; }
    /* Left column — big image + play button */
    .ab-img-main{
    position:relative; border-radius:20px; overflow:hidden;
    aspect-ratio:3/4; cursor:pointer; max-height:660px;
    }
    .ab-img-main img{
    width:100%; height:100%; object-fit:cover;
    display:block; transition:transform 0.6s ease;
    }
    .ab-img-main:hover img{ transform:scale(1.04); }
    /* Play button overlay */
    .ab-play{
    position:absolute; bottom:1.2rem; right:1.2rem;
    width:54px; height:54px;
    background:var(--peri); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:1.1rem; padding-left:3px;
    box-shadow:0 8px 28px rgba(155,163,196,0.5);
    transition:all 0.3s; cursor:pointer; border:none;
    }
    .ab-play:hover{ transform:scale(1.12); background:var(--peri-dk); box-shadow:0 12px 36px rgba(155,163,196,0.6); }
    /* Pulse ring */
    .ab-play::before {
    content: '';
    position: absolute;
    background-color: #b5c0d8b5;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgb(155 163 196);
    animation: playPulse 2s ease-in-out infinite;
}
    @keyframes playPulse{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.15);opacity:0.4} }
    /* Right column — small image + text */
    .ab-img-small{
    border-radius:16px; overflow:hidden;
    aspect-ratio:16/7; margin-bottom:1.4rem;
    }
    .ab-img-small img{
    width:100%; height:100%; object-fit:cover;
    display:block; transition:transform 0.5s;
    }
    .ab-img-small:hover img{ transform:scale(1.04); }
    /* Text block */
    .ab-lbl{
    font-size:0.68rem; letter-spacing:0.28em; text-transform:uppercase;
    color:var(--peri); font-weight:600; margin-bottom:0.8rem;
    }
    .ab-title{
    font-size:clamp(1.8rem,3.5vw,2.7rem); font-weight:700;
    color:var(--navy); line-height:1.2; margin-bottom:1.2rem;
    }
    .ab-title em{ color: #4a566d; font-style:normal; }
    .ab-body{
    font-size:1rem; color:var(--muted); line-height:1.95;
    margin-bottom:2rem;
    }
    /* CTA button — matches screenshot style */
    .ab-cta{
    display:inline-flex; align-items:center; gap:0;
    text-decoration:none;
    }
    .ab-cta-label{
    background:var(--peri); color:#fff;
    font-size:0.9rem; font-weight:700; letter-spacing:0.1em;
    padding:13px 24px; border-radius:6px 0 0 6px;
    transition:background 0.3s;
    font-family:var(--font);
    }
    .ab-cta-arrow{
    background:var(--peri-dk); color:#fff;
    width:48px; height:48px;
    display:flex; align-items:center; justify-content:center;
    border-radius:0 6px 6px 0; font-size:1rem;
    transition:background 0.3s;
    }
    .ab-cta:hover .ab-cta-label{ background:var(--peri-dk); }
    .ab-cta:hover .ab-cta-arrow{ background:var(--navy); }
    /* Video Modal for About */
    #aboutModal{
    display:none; position:fixed; inset:0; z-index:9999;
    background:rgba(10,10,20,0.92); backdrop-filter:blur(12px);
    align-items:center; justify-content:center; padding:1rem;
    }
    #aboutModal.open{ display:flex; }
    #aboutModal .am-box{
    background:#111; border-radius:16px; overflow:hidden;
    width:100%; max-width:900px; position:relative;
    animation:vIn 0.3s ease;
    }
    #aboutModal .am-close{
    position:absolute; top:12px; right:12px; z-index:1;
    width:34px; height:34px; background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.2); border-radius:50%;
    color:#fff; cursor:pointer; font-size:0.85rem;
    display:flex; align-items:center; justify-content:center;
    transition:all 0.2s; border:none;
    }
    #aboutModal .am-close:hover{ background:var(--peri); }
    #aboutModal .am-screen{
    aspect-ratio:16/9; background:var(--peri-xxs);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:12px; color:var(--muted); text-align:center; padding:2rem;
    }
    #aboutModal .am-pi{ font-size:4rem; color:var(--peri-lt); }
    @media(max-width:767px){
    #about{ padding:70px 0; }
    .ab-title{ font-size:1.7rem; }
    }.dr-socials{display:none}.dr-tags-card,.dr-quote-card{display:none}}

    /* Video Modal */
    #aboutModal {
      display: none; position: fixed; inset: 0; z-index: 9999;
      background: rgba(10,10,20,0.92); backdrop-filter: blur(12px);
      align-items: center; justify-content: center; padding: 1rem;
    }
    #aboutModal.open { display: flex; }
    #aboutModal .am-box {
      background: #111; border-radius: 16px; overflow: hidden;
      width: 100%; max-width: 900px; position: relative;
      animation: vIn 0.3s ease;
    }
    #aboutModal .am-close {
      position: absolute; top: 12px; right: 12px; z-index: 1;
      width: 34px; height: 34px; background: rgba(255,255,255,0.1);
      border-radius: 50%; color: #fff; cursor: pointer; font-size: 0.85rem;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.2s; border: none;
    }
    #aboutModal .am-close:hover { background: var(--peri); }
    #aboutModal .am-screen {
      aspect-ratio: 16/9; background: var(--peri-xxs);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 12px; color: var(--muted); text-align: center; padding: 2rem;
    }
    #aboutModal .am-pi { font-size: 4rem; color: var(--peri-lt); }

    /* Responsive */
    @media (max-width: 991px) {
      .ab-story-grid { grid-template-columns: 1fr; gap: 60px; }
      .ab-img-stack { max-width: 480px; margin: 0 auto; }
      .ab-tech-grid { grid-template-columns: 1fr 1fr; }
      .ab-why-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 767px) {
      .ab-hero { height: 320px; }
      .ab-stat-strip { grid-template-columns: 1fr 1fr 1fr; }
      .ab-stat-item { padding: 1.4rem 0.5rem; }
      .ab-stat-n { font-size: 1.6rem; }
      .ab-story { padding: 70px 0 50px; }
      .ab-tech-grid { grid-template-columns: 1fr; }
      .ab-why-grid { grid-template-columns: 1fr; }
      .ab-deka-badge { display: none; }
      .ab-img-float { display: none; }
    }

    /* Play button (keep for modal open) */
    .ab-play {
      position: absolute; bottom: 1.2rem; right: 1.2rem;
      width: 54px; height: 54px;
      background: var(--peri); border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: #fff; font-size: 1.1rem; padding-left: 3px;
      box-shadow: 0 8px 28px rgba(155,163,196,0.5);
      transition: all 0.3s; cursor: pointer; border: none;
    }
    .ab-play:hover { transform: scale(1.12); background: var(--peri-dk); }
    .ab-play::before {
      content: ''; position: absolute;
      background-color: #b5c0d8b5; inset: -6px;
      border-radius: 50%; border: 2px solid rgb(155 163 196);
      animation: playPulse 2s ease-in-out infinite;
    }
    @keyframes playPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.15);opacity:0.4} }
    /* ── DOCTORS SECTION ── */
    /* ===== SECTION ===== */
    #doctors{background:var(--white);padding:110px 0;position:relative;overflow:hidden}
    #doctors::after{content:'';position:absolute;right:-200px;top:-200px;width:700px;height:700px;background:radial-gradient(circle,rgba(155,163,196,0.06) 0%,transparent 65%);border-radius:50%;pointer-events:none}
    /* ===== LEFT — big image ===== */
    .dr-left{position:relative;padding-right:2rem}
    .dr-img-box{
    position:relative;border-radius:24px;overflow:hidden;
    background:linear-gradient(160deg,var(--peri-xxs),var(--peri-xs));
    aspect-ratio:3/4;display:flex;align-items:flex-end;justify-content:center;
    }
    .dr-img-box img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform 0.5s}
    .dr-img-box:hover img{transform:scale(1.03)}
    .dr-emoji{font-size:11rem;color:rgba(155,163,196,0.2);padding-bottom:1rem;transition:transform 0.5s}
    /* Floating social icons */
    .dr-socials{position:absolute;left:-16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:2}
    .dr-soc{width:38px;height:38px;background:var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.82rem;color:var(--muted);box-shadow:0 4px 16px rgba(155,163,196,0.22);text-decoration:none;transition:all 0.25s}
    .dr-soc:hover{background:var(--peri);color:#fff;transform:scale(1.12)}
    /* Specialty tag list — bottom left */
    .dr-tags-card{position:absolute;bottom:1.4rem;left:1.4rem;background:#fff;border-radius:14px;padding:12px 16px;box-shadow:0 8px 28px rgba(155,163,196,0.2);min-width:160px;z-index:2}
    .dr-tag-item{display:flex;align-items:center;gap:9px;font-size:0.78rem;font-weight:600;color:var(--navy);margin-bottom:6px}
    .dr-tag-item:last-child{margin-bottom:0}
    .dr-tag-dot{width:22px;height:22px;border-radius:50%;background:var(--peri);display:flex;align-items:center;justify-content:center;color:#fff;font-size:0.55rem;flex-shrink:0}
    /* Quote card — bottom right overlap */
    .dr-quote-card{position:absolute;bottom:1.4rem;right:-20px;background:#fff;border-radius:16px;padding:14px 16px;box-shadow:0 12px 36px rgba(155,163,196,0.22);max-width:210px;z-index:2}
    .dr-q-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
    .dr-q-av{width:36px;height:36px;border-radius:50%;background:var(--peri-xs);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
    .dr-q-name{font-size:0.76rem;font-weight:700;color:var(--navy);line-height:1.2}
    .dr-q-role{font-size:0.6rem;color:var(--peri)}
    .dr-q-text{font-size:0.7rem;color:var(--muted);line-height:1.6;font-style:italic}
    /* ===== RIGHT — header + grid + nav ===== */
    .dr-right{padding-left:1rem}
    .dr-lbl{font-size:0.67rem;letter-spacing:0.28em;text-transform:uppercase;color:var(--peri);margin-bottom:0.5rem}
    .dr-title{font-size:clamp(1.9rem,3.2vw,2.7rem);font-weight:700;color:var(--navy);line-height:1.2;margin-bottom:0.8rem}
    .dr-desc{font-size:0.88rem;color:var(--muted);line-height:1.85;margin-bottom:2rem;max-width:440px}
    /* Thumb grid — 3 cols × 2 rows (6 visible, more hidden) */
    .dr-thumb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.9rem;margin-bottom:2rem}
    .dr-thumb{
    border:1.5px solid var(--border);border-radius:14px;padding:0.9rem 1rem;
    cursor:pointer;transition:all 0.3s;background:var(--white);
    }
    .dr-thumb.active{border-color:var(--peri);background:var(--peri-xxs)}
    .dr-thumb:hover:not(.active){border-color:var(--peri-lt);background:var(--off)}
    .dr-th-top{display:flex;align-items:center;gap:10px;margin-bottom:0.6rem}
    .dr-th-av{
    width:42px;height:42px;border-radius:50%;
    background:var(--peri-xs);display:flex;align-items:center;justify-content:center;
    font-size:1.4rem;flex-shrink:0;overflow:hidden;
    }
    .dr-th-av img{width:100%;height:100%;object-fit:cover}
    .dr-th-name{font-size:0.76rem;font-weight:700;color:var(--navy);line-height:1.2}
    .dr-th-spec{font-size:0.6rem;color:var(--peri);letter-spacing:0.05em}
    .dr-th-socials{display:flex;gap:6px;flex-wrap:wrap}
    .dr-th-soc{width:22px;height:22px;border-radius:50%;background:var(--off);display:flex;align-items:center;justify-content:center;font-size:0.55rem;color:var(--muted);text-decoration:none;transition:all 0.2s;border:1px solid var(--border)}
    .dr-th-soc:hover,.dr-thumb.active .dr-th-soc:hover{background:var(--peri);color:#fff;border-color:var(--peri)}
    .dr-thumb.active .dr-th-soc{background:rgba(155,163,196,0.12);border-color:rgba(155,163,196,0.2)}
    /* Progress navigation */
    .dr-nav{display:flex;align-items:center;gap:1rem;border-top:1px solid var(--border);padding-top:1.4rem}
    .dr-nav-btn{width:42px;height:42px;border:1.5px solid var(--border);border-radius:8px;background:#fff;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.25s;font-size:0.9rem;flex-shrink:0}
    .dr-nav-btn:hover:not(:disabled){border-color:var(--peri);color:var(--peri)}
    .dr-nav-btn:disabled{opacity:0.3;cursor:not-allowed}
    .dr-cur{font-size:1.1rem;font-weight:700;color:var(--navy);flex-shrink:0;min-width:26px;text-align:center}
    .dr-sep{font-size:0.75rem;color:var(--border);flex-shrink:0}
    .dr-tot{font-size:0.78rem;color:var(--muted);flex-shrink:0}
    .dr-prog{flex:1;height:3px;background:var(--border);border-radius:2px;overflow:hidden}
    .dr-prog-fill{height:100%;background:var(--peri);border-radius:2px;transition:width 0.35s ease}
    /* Video watch btn — circular, centered over doctor image */
    .dr-vid-btn{
      position:absolute;
      /* centre horizontally over the image box (dr-left has position:relative) */
      left:50%; top:50%;
      transform:translate(-50%,-50%);
      width:72px; height:72px;
      border-radius:50%;
      background:rgba(255,255,255,0.92);
      border:none;
      display:flex; align-items:center; justify-content:center;
      cursor:pointer;
      z-index:10;
      transition:background 0.25s, transform 0.25s;
      box-shadow:0 8px 32px rgba(155,163,196,0.4);
      padding:0;
    }
    .dr-vid-btn .plic{
      display:flex; align-items:center; justify-content:center;
      font-size:1.2rem;
      color:var(--peri);
      padding-left:4px;
      transition:color 0.25s;
      flex-shrink:0;
    }
    .dr-vid-btn:hover{
      background:var(--peri);
      transform:translate(-50%,-50%) scale(1.1);
    }
    .dr-vid-btn:hover .plic{ color:#fff; }
    /* Wave rings — expand outward, not clipped because parent has no overflow:hidden */
    .dr-vid-btn::before,
    .dr-vid-btn::after{
      content:'';
      position:absolute;
      inset:0; border-radius:50%;
      border:2.5px solid rgba(155,163,196,0.6);
      animation:drWave 2.2s ease-out infinite;
      pointer-events:none;
    }
    .dr-vid-btn::after{
      border-color:rgba(155,163,196,0.3);
      animation-delay:1.1s;
    }
    @keyframes drWave{
      0%  { transform:scale(1);   opacity:1; }
      100%{ transform:scale(2.6); opacity:0; }
    }
    @media(max-width:1199px){.dr-left{padding-right:0}.dr-quote-card{right:0}.dr-right{padding-left:0;margin-top:2.5rem}}
    @media(max-width:767px){.dr-thumb-grid{grid-template-columns:repeat(2,1fr)}.dr-socials{display:none}.dr-tags-card,.dr-quote-card{display:none}}

    /* ── Scroll-triggered fade up/down ── */
    .fade-up, .fade-down {
      opacity: 0;
      transition: opacity 0.75s cubic-bezier(.4,0,.2,1), transform 0.75s cubic-bezier(.4,0,.2,1);
    }
    .fade-up   { transform: translateY(36px); }
    .fade-down { transform: translateY(-36px); }
    .fade-up.visible,
    .fade-down.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ── Gallery Fade-In ── */
    .gallery-fade {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.7s cubic-bezier(.4,0,.2,1), transform 0.7s cubic-bezier(.4,0,.2,1);
    }
    .gallery-fade.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .gallery-fade.gd1 { transition-delay: 0.08s; }
    .gallery-fade.gd2 { transition-delay: 0.16s; }
    .gallery-fade.gd3 { transition-delay: 0.24s; }
    .gallery-fade.gd4 { transition-delay: 0.32s; }
    .gallery-fade.gd5 { transition-delay: 0.40s; }
    .gallery-fade.gd6 { transition-delay: 0.16s; }
    .gallery-fade.gd7 { transition-delay: 0.24s; }

    /* ── Image Reveal ── */
    .reveal-img {
      position: relative;
      overflow: hidden;
      display: block;
    }
    .reveal-img::after {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--peri-xs);
      transform: translateX(0%);
      transition: transform 0.85s cubic-bezier(.77,0,.18,1);
      z-index: 2;
      pointer-events: none;
    }
    .reveal-img.revealed::after {
      transform: translateX(101%);
    }
    .reveal-img img {
      opacity: 0;
      /* No transform here — parallax JS owns transform.
         Reveal is handled only by opacity fade-in. */
      transition: opacity 0.7s 0.42s ease;
      display: block;
      width: 100%;
    }
    .reveal-img.revealed img {
      opacity: 1;
    }
    /* Bento swiper — fills fixed aspect-ratio container */
    .dr-bento-swiper .swiper-slide img {
      opacity: 1 !important;
      transition: none !important;
    }
    .dr-bento-swiper,
    .dr-bento-swiper .swiper-wrapper,
    .dr-bento-swiper .swiper-slide {
      height: 100% !important;
    }
    .reveal-img.delay-1::after            { transition-delay: 0.12s; }
    .reveal-img.delay-1 img               { transition-delay: 0.54s, 0.54s; }
    .reveal-img.delay-2::after            { transition-delay: 0.24s; }
    .reveal-img.delay-2 img               { transition-delay: 0.66s, 0.66s; }

    .ab-img-main,
    .ab-img-small {
      overflow: hidden;
      isolation: isolate;
    }
    .ab-img-main img,
    .ab-img-small img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    /* ══════════════════════════════════════════
       M-MOSAIC — reference layout
       col1: narrow full-height
       col2: wide, 2 rows (services top, doctors bottom)
       col3: wide, 3 rows (image top, contact mid, text bottom)
    ══════════════════════════════════════════ */
    .sec.sec-white.m-grid2-section { padding: 0 0 80px; }

    /* ── m-grid2-wrap (2-column: left 2×2 grid + right doctor swiper) ── */
    .m-grid2-wrap {
        display: grid;
        grid-template-columns: 3fr 2fr;
        gap: 12px;
        align-items: stretch;
    }
    .m-left {
        display: grid;
        grid-template-columns: 200px 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 12px;
        align-self: stretch;
        height: 100%;
    }
    .m-right {
        border-radius: 16px;
        overflow: hidden;
        position: relative;
        aspect-ratio: 375 / 548;
    }
    .m-box { border-radius: 16px; overflow: hidden; position: relative; }
    .m-box.a { grid-column: 1; grid-row: 1; }
    .m-box.b { grid-column: 1; grid-row: 2; }
    .m-box.c { grid-column: 2; grid-row: 1; }
    .m-box.e { grid-column: 2; grid-row: 2; display: block; }

    .box-grid-hover {
        display: block;
        position: relative;
        overflow: hidden;
        text-align: center;
        padding: 20px;
        border-radius: 16px;
        text-decoration: none;
        cursor: pointer;
        width: 100%;
        height: 100%;
        transition: filter 0.3s;
    }
    .box-grid-hover::before {
        content: "";
        position: absolute;
        width: 200%; height: 200%;
        aspect-ratio: 1 / 1;
        top: 100%; left: 100%;
        background: rgba(0,0,0,0.07);
        transition: all 0.3s ease-in-out;
        z-index: 1;
        border-radius: 1000%;
    }
    .box-grid-hover:hover::before { top: -50%; left: -50%; }
    .box-grid-hover:hover { filter: brightness(0.96); }
    .bg-primary { background: #9BA3C4 !important; }

    .text-hover {
        color: #fff;
        font-size: 1.05rem;
        font-weight: 500;
        letter-spacing: 0.04em;
        font-family: var(--font);
        z-index: 1;
        position: relative;
    }

    .box-grid-img-hover {
        display: block;
        height: 100%; width: 100%;
        border-radius: 16px;
        overflow: hidden;
        position: relative;
        text-decoration: none;
    }
    .box-grid-img-hover img {
        width: 100%; height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.5s ease;
    }
    .box-grid-img-hover:hover img { transform: scale(1.1); filter: grayscale(1); }
    .box-grid-img-hover::after {
        content: '';
        position: absolute; inset: 0;
        background: linear-gradient(to top, rgba(10,10,30,0.55) 0%, transparent 55%);
        border-radius: 16px;
        pointer-events: none;
    }
    .text-on-hover {
        position: absolute;
        bottom: 1.2rem; left: 1.4rem;
        color: #fff;
        font-size: 0.9rem;
        font-weight: 500;
        letter-spacing: 0.1em;
        z-index: 2;
        line-height: 1.35;
        font-family: var(--font);
    }

    /* mc-doctors: right column image swiper */
    .mc-doctors {
        border-radius: 16px;
        overflow: hidden;
        position: relative;
        aspect-ratio: 375 / 548;
    }
    .mc-doctors .swiper.mc-img-swiper { height: 100% !important; }
    .mc-doctors .mc-img-swiper .swiper-wrapper { height: 100% !important; }
    .mc-doctors .mc-img-swiper .swiper-slide {
        height: 100% !important;
        overflow: hidden;
    }
    .mc-img {
        display: block;
        width: 100%; height: 100%;
        object-fit: cover;
        object-position: top center;
        transition: transform 0.55s cubic-bezier(.4,0,.2,1);
        background: var(--peri-xs);
    }
    .mc-img-pagination span {
        display: inline-block;
        width: 7px; height: 7px;
        border-radius: 4px;
        background: rgba(255,255,255,0.5);
        transition: all 0.35s;
        cursor: pointer;
    }
    .mc-img-pagination span.active { width: 22px; background: var(--peri); }

    /* Responsive */
    @media (max-width: 991px) {
        .m-grid2-wrap { grid-template-columns: 1fr; }
        .m-left { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 200px; }
        .mc-doctors { aspect-ratio: unset; height: 360px; }
        .m-box.a { grid-column: 1; grid-row: 1; }
        .m-box.b { grid-column: 1; grid-row: 2; }
        .m-box.c { grid-column: 2; grid-row: 1; }
        .m-box.e { grid-column: 2; grid-row: 2; }
    }
    @media (max-width: 575px) {
        .m-left { grid-template-columns: 1fr 1fr; grid-template-rows: 160px 160px; }
        .mc-doctors { aspect-ratio: 375 / 548; height: auto; margin-top: 2rem; width: 100%; border-radius: 16px; }
        .sec.sec-white.m-grid2-section { padding: 0 0 40px; }
    }