/* Scoped implant service page — migrated from site.css */

    *{box-sizing:border-box}
    
    
    a{text-decoration:none;color:inherit}
    .container{width:100%;max-width:var(--max);margin:auto;padding:0 24px}
    img,svg{max-width:100%}
    header,main,section,.hero,.topbar,.final,.footerline{max-width:100%;overflow-x:hidden}
    .hero-grid,.problem-grid,.info-panel,.cards5,.six-grid,.option-grid,.steps,.faq-grid,.final-grid{min-width:0}
    .card,.option,.faq,.cost,.info-panel{min-width:0}
    .topbar{
      position:sticky;top:0;z-index:50;
      background:rgba(255,255,255,.94);
      backdrop-filter:blur(14px);
      border-bottom:1px solid var(--line);
    }
    .nav{
      min-height:78px;
      display:flex;align-items:center;justify-content:space-between;gap:20px;
    }
    .brand{display:flex;align-items:center;gap:12px;font-weight:850;color:var(--blue);font-size:25px;letter-spacing:-.03em}
    .brand svg{width:42px;height:42px}
    .brand-logo{width:54px;height:54px;border-radius:50%;object-fit:contain;display:block;box-shadow:0 4px 12px rgba(7,27,77,.10)}
    .links{display:flex;align-items:center;gap:26px;font-size:14px;font-weight:700;color:#111827}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:9px;
      min-height:48px;padding:0 20px;border-radius:12px;
      font-weight:800;font-size:15px;border:1px solid transparent;
      transition:.2s ease;white-space:nowrap;cursor:pointer;
    }
    .btn:hover{transform:translateY(-1px);filter:brightness(.98)}
    .btn-blue{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;box-shadow:0 10px 24px rgba(7,93,219,.22)}
    .btn-green{background:var(--green);color:#fff;box-shadow:0 10px 24px rgba(24,169,87,.18)}
    .btn-outline{border-color:#94B9F5;color:var(--blue);background:#fff}
    .hero{
      position:relative;
      overflow:hidden;
      background:radial-gradient(circle at 76% 22%, #EAF4FF 0, #fff 34%, #fff 100%);
      border-bottom:1px solid var(--line);
    }
    .hero-grid{
      min-height:650px;
      display:grid;grid-template-columns:1.03fr .97fr;gap:36px;align-items:center;
      padding:66px 0 46px;
    }
    .eyebrow{
      display:inline-flex;align-items:center;gap:8px;color:var(--blue);
      font-weight:900;font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px
    }
    h1{
      color:var(--navy);font-size:58px;line-height:1.02;letter-spacing:-.055em;
      margin:0 0 18px;font-weight:900;
    }
    .hero p{font-size:18px;color:#34425B;max-width:590px;margin:0 0 26px}
    .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:22px}
    .trust-row{display:flex;gap:18px;flex-wrap:wrap;color:#30405B;font-size:14px;font-weight:700}
    .check{display:inline-flex;align-items:center;gap:7px}
    .check:before{
      content:"✓";width:20px;height:20px;border-radius:50%;background:var(--blue);color:#fff;
      display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900
    }
    .hero-art{
      position:relative;min-height:530px;display:flex;align-items:flex-end;justify-content:center;
    }
    .smile-card{
      position:absolute;right:156px;bottom:0;width:335px;height:435px;border-radius:180px 180px 26px 26px;
      background:linear-gradient(180deg,#F8FBFF,#DBECFF);
      box-shadow:var(--shadow);overflow:hidden;border:1px solid #DDEBFF;
    }
    .face{
      position:absolute;left:50%;top:62px;transform:translateX(-50%);
      width:210px;height:210px;border-radius:50%;
      background:#D7A277;
      box-shadow:inset 0 -10px 0 rgba(0,0,0,.05);
    }
    .hair{
      position:absolute;left:38px;top:18px;width:230px;height:260px;border-radius:52% 48% 50% 50%;
      background:linear-gradient(135deg,#22150F,#4A2A1E);
      clip-path:ellipse(48% 56% at 50% 44%);
    }
    .face:before,.face:after{
      content:"";position:absolute;top:88px;width:12px;height:12px;background:#2b1b17;border-radius:50%
    }
    .face:before{left:65px}.face:after{right:65px}
    .smile{
      position:absolute;left:50%;top:132px;transform:translateX(-50%);
      width:78px;height:34px;background:white;border-radius:0 0 70px 70px;border-top:4px solid #7F3D35;
    }
    .
    .implant-hero{
      position:absolute;right:0;bottom:10px;width:270px;height:440px;border-radius:26px;
      background:rgba(255,255,255,.65);
      display:flex;align-items:center;justify-content:center;
    }
    .implant-hero svg{width:258px;height:405px}
    .cards5{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin:-20px auto 0;position:relative;z-index:5}
    .cards4{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin:-20px auto 0;position:relative;z-index:5}
    .card{
      background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:0 8px 24px rgba(7,27,77,.07);
    }
    .icon{width:48px;height:48px;color:var(--blue);margin-bottom:12px}
    .card h3{margin:0 0 8px;color:var(--navy);font-size:17px;line-height:1.22}
    .card p{margin:0;color:#55647B;font-size:14px}
    section{padding:72px 0}
    .section-title{text-align:center;color:var(--navy);font-size:34px;line-height:1.15;font-weight:900;letter-spacing:-.035em;margin:0 0 30px}
    .problem{padding-top:62px}
    .problem-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:36px;align-items:center}
    .problem-grid--text-only{grid-template-columns:1fr;max-width:820px;margin:0 auto}
    .problem-grid--text-only .section-title{text-align:center}
    .problem-grid--text-only .bullets{max-width:720px;margin:0 auto}
    .problem h2{text-align:left;margin-bottom:18px}
    .bullets{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
    .mini-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:start}
    .mini{
      text-align:center;font-weight:800;font-size:13px;color:var(--navy);position:relative
    }
    .mini:not(:last-child):after{content:"→";position:absolute;right:-12px;top:42%;color:var(--blue);font-size:24px}
    .mini-img{
      height:112px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(180deg,#F3F8FF,#fff);
      display:flex;align-items:center;justify-content:center;margin-bottom:9px;overflow:hidden
    }
    .info-panel{
      display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:center;
      background:linear-gradient(135deg,#F7FBFF,#fff);border:1px solid var(--line);border-radius:var(--radius);padding:36px;
      box-shadow:0 8px 26px rgba(7,27,77,.05);
    }
    .info-panel--text-only{grid-template-columns:1fr;max-width:860px;margin:0 auto;padding:40px 44px}
    .info-panel--text-only h2{text-align:center}
    .info-panel h2,.cost h2{color:var(--navy);font-size:34px;line-height:1.15;margin:0 0 14px;letter-spacing:-.03em}
    .info-panel p{margin:0 0 12px;color:#35445D}
    .six-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
    .six-grid .card{text-align:center;padding:22px 14px}
    .six-grid .icon{margin:0 auto 12px}
    .option-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
    .option{
      background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;text-align:center;
      box-shadow:0 8px 24px rgba(7,27,77,.06);font-weight:900;color:var(--navy)
    }
    .option .dental-pic{height:130px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
    .process{background:#FBFDFF;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
    .steps{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;position:relative}
    .step{text-align:center;position:relative}
    .step:not(:last-child):after{
      content:"";position:absolute;top:34px;right:-28px;width:54px;border-top:3px dotted #89B8FF;
    }
    .circle{
      width:68px;height:68px;border-radius:50%;background:var(--blue);color:#fff;margin:0 auto 10px;
      display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 10px 22px rgba(7,93,219,.18)
    }
    .num{
      position:absolute;left:-5px;top:-8px;background:white;color:var(--blue);border:2px solid #A9C8FA;border-radius:50%;
      width:27px;height:27px;font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center
    }
    .step b{display:block;color:var(--navy);font-size:14px}
    .cost{
      background:linear-gradient(135deg,#EAF4FF,#F8FBFF);
      border:1px solid #D8E9FF;border-radius:22px;padding:34px 38px;
      display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;
    }
    .rupee{width:92px;height:92px;border-radius:24px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
    .rupee span{font-size:52px;color:var(--blue);font-weight:900}
    .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;max-width:990px;margin:auto}
    .faq{
      background:#fff;border:1px solid var(--line);border-radius:13px;padding:16px 18px;
      display:flex;justify-content:space-between;align-items:center;font-weight:850;color:var(--navy);
      box-shadow:0 4px 14px rgba(7,27,77,.04)
    }
    .faq span:last-child{font-size:22px;color:var(--blue)}
    .final{
      background:linear-gradient(135deg,#032A75,#075DDB);
      color:#fff;padding:36px 0 24px
    }
    .final-grid{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center}
    .final h2{margin:0 0 6px;font-size:30px;letter-spacing:-.03em}
    .final p{margin:0;color:#D9E9FF}
    .footerline{background:#071B33;color:#D7E8FF;text-align:center;padding:12px 20px;font-size:14px}
    .final-buttons{display:grid;gap:12px;min-width:280px}

    .floating-contact{
      position:fixed;
      right:18px;
      bottom:18px;
      z-index:9999;
      display:grid;
      gap:10px;
      width:260px;
    }
    .floating-contact .btn{
      width:100%;
      min-height:50px;
      box-shadow:0 12px 30px rgba(7,27,77,.22);
    }
    @media (max-width: 760px){
      .floating-contact{
        left:0;
        right:0;
        bottom:0;
        width:100%;
        grid-template-columns:1fr 1fr;
        gap:8px;
        background:rgba(255,255,255,.96);
        border-top:1px solid var(--line);
        padding:10px;
        box-shadow:0 -10px 28px rgba(7,27,77,.15);
      }
      .floating-contact .btn{
        min-height:48px;
        font-size:13px;
        padding:0 8px;
      }
      
    }


    .clinical-photo-wrap{
      position:relative;
      width:100%;
      max-width:560px;
      margin-left:auto;
      border-radius:28px;
      overflow:hidden;
      background:#F3F8FF;
      border:1px solid #DDEBFF;
      box-shadow:var(--shadow);
    }
    .clinical-photo-wrap:before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(7,93,219,.08));
      z-index:1;
      pointer-events:none;
    }
    .clinical-photo{
      width:100%;
      height:530px;
      object-fit:cover;
      object-position:center center;
      display:block;
    }
    .clinical-photo-badge{
      position:absolute;
      left:18px;
      bottom:18px;
      z-index:2;
      background:rgba(255,255,255,.92);
      color:var(--navy);
      border:1px solid rgba(227,236,250,.9);
      border-radius:16px;
      padding:12px 14px;
      box-shadow:0 10px 24px rgba(7,27,77,.12);
      font-weight:850;
      font-size:14px;
      line-height:1.25;
    }
    .clinical-photo-badge span{
      display:block;
      color:var(--blue);
      font-size:12px;
      margin-top:2px;
    }


    .case-gallery{
      background:#FBFDFF;
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
    }
    .gallery-subtitle{
      max-width:760px;
      margin:-14px auto 28px;
      text-align:center;
      color:var(--muted);
      font-size:16px;
    }
    .gallery-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
      align-items:stretch;
    }
    .gallery-card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:20px;
      overflow:hidden;
      box-shadow:0 8px 24px rgba(7,27,77,.07);
      min-width:0;
    }
    .gallery-img{
      width:100%;
      height:280px;
      object-fit:cover;
      object-position:center top;
      display:block;
      background:#EEF5FF;
    }
    .gallery-
    .gallery-body h3{
      margin:0 0 8px;
      color:var(--navy);
      font-size:18px;
      line-height:1.25;
    }
    .gallery-body p{
      margin:0;
      color:#55647B;
      font-size:14px;
    }
    .gallery-placeholder{
      height:280px;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      color:var(--blue);
      font-weight:900;
      background:linear-gradient(135deg,#F4F9FF,#fff);
      border-bottom:1px solid var(--line);
      padding:20px;
    }
    .gallery-note{
      margin-top:18px;
      text-align:center;
      color:#6B7890;
      font-size:13px;
    }


    .case-collage-wrap{
      max-width:1120px;
      margin:0 auto;
      background:#fff;
      border:1px solid var(--line);
      border-radius:26px;
      box-shadow:0 14px 40px rgba(7,27,77,.08);
      padding:28px;
      overflow:hidden;
    }
    .case-collage-top{
      text-align:center;
      margin-bottom:22px;
    }
    .case-collage-top .implant-badge{
      width:64px;
      height:64px;
      margin:0 auto 10px;
      border-radius:50%;
      background:#F3F8FF;
      border:1px solid var(--line);
      color:var(--blue);
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:30px;
      box-shadow:0 8px 18px rgba(7,27,77,.06);
    }
    .case-collage-title{
      margin:0;
      color:var(--navy);
      font-size:38px;
      letter-spacing:-.04em;
      line-height:1.1;
      font-weight:900;
    }
    .case-collage-grid{
      display:grid;
      grid-template-columns:1.35fr .85fr 1fr;
      gap:18px;
      align-items:stretch;
    }
    .case-panel{
      background:#fff;
      border:1px solid var(--line);
      border-radius:20px;
      padding:14px;
      box-shadow:0 8px 24px rgba(7,27,77,.06);
      min-width:0;
    }
    .case-panel-head{
      display:flex;
      align-items:center;
      gap:10px;
      margin-bottom:12px;
      color:var(--blue);
      font-weight:900;
      font-size:20px;
    }
    .case-panel-icon{
      width:40px;
      height:40px;
      border-radius:50%;
      background:#EEF5FF;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:20px;
    }
    .case-panel-imgbox{
      position:relative;
      width:100%;
      height:340px;
      border-radius:16px;
      overflow:hidden;
      background:#EEF5FF;
    }
    .case-panel.large .case-panel-imgbox{height:340px}
    .case-panel.xray .case-panel-imgbox{height:340px;background:#07111F}
    .case-panel.smile .case-panel-imgbox{height:340px}
    .case-panel-imgbox img{
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center;
      display:block;
    }
    .case-panel.xray .case-panel-imgbox img{
      object-fit:contain;
      background:#050A10;
    }
    .privacy-bar{
      position:absolute;
      left:14%;
      right:14%;
      top:32%;
      height:54px;
      border-radius:10px;
      background:rgba(65,48,38,.72);
      backdrop-filter:blur(8px);
      z-index:2;
    }
    .identity-badge{
      position:absolute;
      right:10px;
      bottom:10px;
      z-index:3;
      background:rgba(255,255,255,.92);
      color:var(--blue);
      border:1px solid var(--line);
      border-radius:999px;
      padding:8px 10px;
      font-weight:850;
      font-size:12px;
      box-shadow:0 8px 18px rgba(7,27,77,.10);
    }
    .case-collage-note{
      margin:22px auto 0;
      max-width:830px;
      background:#F7FBFF;
      border:1px solid #CFE2FF;
      border-radius:18px;
      padding:18px 22px;
      display:flex;
      gap:14px;
      align-items:flex-start;
      color:#28406B;
      font-size:16px;
    }
    .case-collage-note b{color:var(--blue)}
    .case-collage-note .tick{
      width:42px;
      height:42px;
      flex:0 0 42px;
      border-radius:50%;
      background:var(--blue);
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:22px;
      font-weight:900;
    }
    @media (max-width:980px){
      .case-collage-grid{grid-template-columns:1fr}
      .case-collage-title{font-size:30px}
      .case-panel-imgbox,.case-panel.large .case-panel-imgbox,.case-panel.xray .case-panel-imgbox,.case-panel.smile .case-panel-imgbox{height:360px}
    }
    @media (max-width:620px){
      .case-collage-wrap{padding:16px;border-radius:20px}
      .case-collage-title{font-size:26px}
      .case-panel-head{font-size:18px}
      .case-panel-imgbox,.case-panel.large .case-panel-imgbox,.case-panel.xray .case-panel-imgbox,.case-panel.smile .case-panel-imgbox{height:310px}
      .privacy-bar{top:30%;height:44px;left:10%;right:10%}
      .case-collage-note{font-size:14px;padding:14px}
    }

    .mobile-sticky{
      display:none !important;position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid var(--line);
      padding:10px 12px;gap:10px;box-shadow:0 -8px 24px rgba(7,27,77,.12)
    }
    .mobile-sticky .btn{flex:1;min-height:46px;font-size:13px;padding:0 10px}
    @media (max-width: 980px){
      .gallery-grid{grid-template-columns:1fr 1fr}

      .links{display:none}
      .hero-grid,.problem-grid,.info-panel,.cost,.final-grid{grid-template-columns:1fr}
      h1{font-size:40px}
      .hero-grid{padding:42px 0}
      .hero-art{min-height:400px}
      .smile-card{right:130px;width:240px;height:330px}
      .implant-hero{right:8px;width:190px;height:330px}
      .cards5,.cards4{grid-template-columns:1fr 1fr;margin-top:22px}
      .six-grid{grid-template-columns:1fr 1fr}
      .option-grid{grid-template-columns:1fr 1fr}
      .steps{grid-template-columns:1fr 1fr 1fr}
      .step:after{display:none}
      .faq-grid{grid-template-columns:1fr}
      .cost .btn{width:100%}
      .mobile-sticky{display:none !important}
      
    }
    @media (max-width: 620px){
      .gallery-grid{grid-template-columns:1fr}
      .gallery-img,.gallery-placeholder{height:360px}

      .container{padding:0 18px}
      .brand{font-size:20px}
      .brand svg{width:34px}
      .brand-logo{width:42px;height:42px}
      .nav{min-height:68px}
      h1{font-size:34px}
      .hero p{font-size:16px}
      .btn{width:100%}
      .cta-row{gap:10px}
      .trust-row{display:grid;gap:10px}
      .hero-art{min-height:auto}

      .clinical-photo-wrap{
        max-width:100%;
        margin:20px auto 0;
        border-radius:22px;
      }
      .clinical-photo{
        height:520px;
        object-position:center center;
      }

      .smile-card{left:4px;right:auto;width:205px;height:285px}
      .hair{left:18px;width:180px;height:220px}
      .face{width:160px;height:160px;top:62px}
      .face:before,.face:after{top:70px}
      .face:before{left:48px}.face:after{right:48px}
      .smile{top:105px;width:58px}
      .implant-hero{width:145px;height:270px;right:0}
      .implant-hero svg{width:150px;height:250px}
      .cards5,.cards4,.bullets,.mini-flow,.six-grid,.option-grid,.steps{grid-template-columns:1fr}
      .mini:not(:last-child):after{display:none}
      section{padding:50px 0}
      .section-title,.info-panel h2,.cost h2{font-size:28px}
      .info-panel{padding:24px}
      .final-grid{gap:16px}
      .final .btn{width:100%}
      .final-buttons{min-width:0;width:100%}
      .hero-art,.smile-card,.implant-hero{max-width:100%}
    }
  
    /* FINAL FIX: prevent Case 1 collage images from leaking into hero area */
    .hero .case-collage-wrap,
    .hero .case-panel,
    .hero .case-panel-imgbox,
    .hero .privacy-bar,
    .hero .identity-badge{
      display:none !important;
    }
    .case-gallery{
      position:relative;
      z-index:2;
      clear:both;
    }
    .case-gallery .case-panel-imgbox{
      position:relative;
      overflow:hidden;
    }
    .case-gallery .privacy-bar{
      position:absolute !important;
      display:block !important;
    }

  
    @media (max-width:620px){
      .hero-grid{display:block !important}
      .hero-art{position:relative !important;min-height:auto !important;margin-top:24px !important}
      .clinical-photo-wrap{max-width:100% !important;margin:0 auto !important}
      .clinical-photo{height:auto !important;max-height:560px !important;object-fit:cover !important}
      .case-gallery{margin-top:0 !important}
    }

  
    /* SIZE FIX: make Patient Smile card properly sized and centered */
    .case-collage-grid{
      grid-template-columns:1.15fr .85fr;
      grid-template-areas:
        "before xray"
        "smile smile";
      align-items:start;
    }
    .case-panel.before{grid-area:before;}
    .case-panel.xray{grid-area:xray;}
    .case-panel.smile{
      grid-area:smile;
      width:100%;
      max-width:560px;
      margin:0 auto;
    }
    .case-panel.smile .case-panel-head{
      justify-content:center;
      text-align:center;
    }
    .case-panel.smile .case-panel-imgbox{
      height:420px;
      max-width:100%;
      margin:0 auto;
    }
    .case-panel.smile .case-panel-imgbox img{
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center top;
      display:block;
    }
    .case-panel.smile .privacy-bar{
      left:18%;
      right:18%;
      top:28%;
      height:48px;
    }
    @media (max-width:980px){
      .case-collage-grid{
        grid-template-columns:1fr;
        grid-template-areas:
          "before"
          "xray"
          "smile";
      }
      .case-panel.smile{
        max-width:100%;
      }
      .case-panel.smile .case-panel-imgbox{
        height:360px;
      }
    }
    @media (max-width:620px){
      .case-panel.smile .case-panel-imgbox{
        height:320px;
      }
      .case-panel.smile .privacy-bar{
        left:20%;
        right:20%;
        top:28%;
        height:42px;
      }
    }

  
    /* FINAL MOBILE FIX: prevent Cost section button/card overflow */
    .cost{
      max-width:100%;
      overflow:hidden;
    }
    .cost .btn{
      max-width:100%;
      white-space:normal;
      text-align:center;
      line-height:1.2;
      height:auto;
      min-height:52px;
      padding:14px 16px;
    }
    @media (max-width:620px){
      #cost .container{
        padding-left:18px !important;
        padding-right:18px !important;
        overflow:hidden;
      }
      .cost{
        width:100% !important;
        max-width:100% !important;
        padding:26px 20px !important;
        grid-template-columns:1fr !important;
        gap:18px !important;
      }
      .cost .btn{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        display:flex !important;
        white-space:normal !important;
        overflow-wrap:anywhere !important;
        word-break:normal !important;
        font-size:15px !important;
      }
      .rupee{
        width:84px !important;
        height:84px !important;
      }
    }

  
    .implant-structure-img{
      width:100%;
      max-width:520px;
      border-radius:18px;
      border:1px solid var(--line);
      box-shadow:0 8px 24px rgba(7,27,77,.08);
      display:block;
      margin:auto;
      background:#fff;
    }
    @media (max-width:620px){
      .implant-structure-img{
        max-width:100%;
        border-radius:16px;
      }
    }

  
    .process-image-wrap{
      width:100%;
      max-width:1180px;
      margin:0 auto;
      overflow:hidden;
      border-radius:22px;
      background:#fff;
      border:1px solid var(--line);
      box-shadow:0 8px 24px rgba(7,27,77,.06);
      padding:18px;
    }
    .process-image{
      width:100%;
      height:auto;
      display:block;
      border-radius:16px;
      background:#fff;
    }
    @media (max-width:620px){
      .process-image-wrap{
        padding:10px;
        border-radius:16px;
      }
      .process-image{
        min-width:820px;
      }
      .process-image-wrap{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
      }
    }

  
    /* PREMIUM INDIVIDUAL PROCESS ICONS */
    .premium-process{
      display:grid;
      grid-template-columns:repeat(6,1fr);
      gap:18px;
      align-items:start;
      position:relative;
      margin-top:20px;
    }
    .process-step{
      position:relative;
      text-align:center;
      min-width:0;
    }
    .process-step:not(:last-child)::after{
      content:"";
      position:absolute;
      top:66px;
      right:-26px;
      width:52px;
      border-top:4px dotted #8AB6F5;
    }
    .process-icon{
      width:112px;
      height:112px;
      margin:0 auto 16px;
      border-radius:50%;
      background:linear-gradient(180deg,#1D8BFF 0%,#075DDB 100%);
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow:0 14px 28px rgba(7,93,219,.24), inset 0 0 0 6px rgba(255,255,255,.12);
      border:5px solid #EAF4FF;
    }
    .process-icon svg{
      width:58px;
      height:58px;
    }
    .step-number{
      position:absolute;
      left:calc(50% - 64px);
      top:-8px;
      z-index:2;
      width:36px;
      height:36px;
      border-radius:50%;
      background:#fff;
      color:var(--blue);
      border:2px solid #9BC2FF;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:900;
      font-size:17px;
      box-shadow:0 6px 16px rgba(7,27,77,.10);
    }
    .process-step h3{
      margin:0;
      color:var(--navy);
      font-size:17px;
      line-height:1.25;
      font-weight:900;
    }
    @media (max-width:980px){
      .premium-process{
        grid-template-columns:repeat(2,1fr);
        gap:24px 16px;
      }
      .process-step:not(:last-child)::after{
        display:none;
      }
    }
    @media (max-width:620px){
      .premium-process{
        grid-template-columns:1fr;
        gap:18px;
      }
      .process-step{
        display:grid;
        grid-template-columns:86px 1fr;
        align-items:center;
        text-align:left;
        background:#fff;
        border:1px solid var(--line);
        border-radius:18px;
        padding:14px;
        box-shadow:0 8px 22px rgba(7,27,77,.05);
      }
      .process-icon{
        width:72px;
        height:72px;
        margin:0;
        border-width:4px;
      }
      .process-icon svg{
        width:40px;
        height:40px;
      }
      .step-number{
        left:8px;
        top:4px;
        width:28px;
        height:28px;
        font-size:14px;
      }
      .process-step h3{
        font-size:18px;
      }
    }

  
    /* IMPLANT BRAND MOVING BANNER */
    .implant-brands{
      padding:64px 0;
      background:#F7FBFF;
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
      overflow:hidden;
    }
    .brand-subtitle{
      text-align:center;
      max-width:820px;
      margin:-14px auto 28px;
      color:var(--muted);
      font-size:16px;
      line-height:1.65;
    }
    .brand-marquee{
      width:100%;
      overflow:hidden;
      border-radius:22px;
      background:#fff;
      border:1px solid var(--line);
      box-shadow:0 8px 24px rgba(7,27,77,.06);
      padding:22px 0;
      position:relative;
    }
    .brand-marquee:before,
    .brand-marquee:after{
      content:"";
      position:absolute;
      top:0;
      width:90px;
      height:100%;
      z-index:2;
      pointer-events:none;
    }
    .brand-marquee:before{
      left:0;
      background:linear-gradient(90deg,#fff,rgba(255,255,255,0));
    }
    .brand-marquee:after{
      right:0;
      background:linear-gradient(270deg,#fff,rgba(255,255,255,0));
    }
    .brand-track{
      display:flex;
      align-items:center;
      gap:18px;
      width:max-content;
      animation:brandScroll 28s linear infinite;
      padding-left:18px;
    }
    .brand-marquee:hover .brand-track{
      animation-play-state:paused;
    }
    .brand-pill{
      min-width:190px;
      min-height:66px;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:12px 20px;
      border-radius:16px;
      background:linear-gradient(180deg,#FFFFFF,#F7FBFF);
      border:1px solid #DDEBFF;
      color:var(--navy);
      font-weight:900;
      font-size:18px;
      letter-spacing:-.02em;
      box-shadow:0 8px 20px rgba(7,27,77,.05);
      white-space:nowrap;
    }
    @keyframes brandScroll{
      from{transform:translateX(0);}
      to{transform:translateX(-50%);}
    }
    .brand-note{
      text-align:center;
      color:#6B7890;
      font-size:13px;
      margin:18px auto 0;
      max-width:760px;
      line-height:1.55;
    }
    @media (max-width:620px){
      .implant-brands{padding:46px 0}
      .brand-pill{
        min-width:165px;
        min-height:58px;
        font-size:16px;
      }
      .brand-track{animation-duration:24s}
      .brand-marquee:before,.brand-marquee:after{width:42px}
    }

  
    /* LOGO MARQUEE OVERRIDE: small thin scrolling brand logo strip */
    .implant-brands{
      padding:42px 0 !important;
    }
    .implant-brands .section-title{
      margin-bottom:12px !important;
    }
    .brand-subtitle{
      margin:-6px auto 22px !important;
      font-size:15px !important;
    }
    .brand-marquee{
      border-radius:16px !important;
      padding:12px 0 !important;
      background:#ffffff !important;
    }
    .brand-track{
      gap:18px !important;
      animation:brandScroll 26s linear infinite !important;
      padding-left:18px !important;
    }
    .brand-logo-pill{
      height:58px;
      min-width:180px;
      padding:8px 16px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:14px;
      background:#fff;
      border:1px solid #E3ECFA;
      box-shadow:0 6px 16px rgba(7,27,77,.05);
      flex:0 0 auto;
    }
    .brand-logo-pill img{
      max-width:155px;
      max-height:42px;
      width:auto;
      height:auto;
      object-fit:contain;
      display:block;
    }
    .brand-note{
      font-size:12px !important;
      margin-top:14px !important;
    }
    @media (max-width:620px){
      .implant-brands{
        padding:34px 0 !important;
      }
      .brand-logo-pill{
        height:50px;
        min-width:145px;
        padding:7px 12px;
      }
      .brand-logo-pill img{
        max-width:125px;
        max-height:34px;
      }
      .brand-track{
        gap:12px !important;
        animation-duration:22s !important;
      }
    }

  
    /* POSITION FIX: Implant system logo strip directly below hero photo */
    .hero + .implant-brands{
      padding:22px 0 26px !important;
      background:#ffffff !important;
      border-top:0 !important;
      border-bottom:1px solid var(--line) !important;
    }
    .hero + .implant-brands .section-title{
      font-size:26px !important;
      margin-bottom:8px !important;
    }
    .hero + .implant-brands .brand-subtitle{
      margin:0 auto 14px !important;
      font-size:14px !important;
      line-height:1.45 !important;
    }
    .hero + .implant-brands .brand-marquee{
      padding:9px 0 !important;
    }
    .hero + .implant-brands .brand-logo-pill{
      height:48px !important;
      min-width:155px !important;
      padding:6px 12px !important;
    }
    .hero + .implant-brands .brand-logo-pill img{
      max-width:132px !important;
      max-height:32px !important;
    }
    .hero + .implant-brands .brand-note{
      display:none !important;
    }
    @media (max-width:620px){
      .hero + .implant-brands{
        padding:18px 0 20px !important;
      }
      .hero + .implant-brands .section-title{
        font-size:22px !important;
      }
      .hero + .implant-brands .brand-subtitle{
        font-size:13px !important;
        padding:0 12px;
      }
      .hero + .implant-brands .brand-logo-pill{
        height:44px !important;
        min-width:130px !important;
      }
      .hero + .implant-brands .brand-logo-pill img{
        max-width:112px !important;
        max-height:28px !important;
      }
    }

  
    /* MOBILE LOGO FIX: normalized white logo cards + reliable loading */
    .brand-marquee{
      background:#F8FBFF !important;
      overflow:hidden !important;
    }
    .brand-track{
      display:flex !important;
      align-items:center !important;
      gap:14px !important;
      width:max-content !important;
      animation:brandScroll 24s linear infinite !important;
      will-change:transform;
    }
    .brand-logo-pill{
      height:54px !important;
      min-width:158px !important;
      max-width:158px !important;
      padding:5px 8px !important;
      background:#ffffff !important;
      border:1px solid #DDEBFF !important;
      border-radius:12px !important;
      box-shadow:0 6px 16px rgba(7,27,77,.08) !important;
      display:flex !important;
      align-items:center !important;
      justify-content:center !important;
      flex:0 0 158px !important;
      overflow:hidden !important;
    }
    .brand-logo-pill img{
      width:100% !important;
      height:100% !important;
      max-width:142px !important;
      max-height:44px !important;
      object-fit:contain !important;
      display:block !important;
      opacity:1 !important;
      visibility:visible !important;
      filter:none !important;
      mix-blend-mode:normal !important;
    }
    @media (max-width:620px){
      .brand-track{
        gap:10px !important;
        animation-duration:20s !important;
      }
      .brand-logo-pill{
        height:48px !important;
        min-width:140px !important;
        max-width:140px !important;
        flex-basis:140px !important;
      }
      .brand-logo-pill img{
        max-width:124px !important;
        max-height:38px !important;
      }
    }


  
    /* SPEED/PERCEIVED LOAD FIX */
    body::before{
      content:"";
      position:fixed;
      inset:0;
      background:#ffffff;
      z-index:99998;
      opacity:1;
      animation:hidePreloader .45s ease .35s forwards;
      pointer-events:none;
    }
    @keyframes hidePreloader{to{opacity:0;visibility:hidden}}

  
    /* PROBLEM VISUAL REPLACEMENT */
    .problem-visual-premium{
      width:100%;
      background:#fff;
      border:1px solid var(--line);
      border-radius:22px;
      box-shadow:0 10px 28px rgba(7,27,77,.07);
      padding:10px;
      overflow:hidden;
    }
    .problem-visual-premium img{
      width:100%;
      height:auto;
      display:block;
      border-radius:16px;
      object-fit:contain;
    }
    @media(max-width:620px){
      .problem-visual-premium{
        padding:8px;
        border-radius:18px;
      }
    }

  
    /* 
    
    .cases-subtitle{
      text-align:center;
      color:#5B6A86;
      font-size:16px;
      margin:0 auto 24px;
      font-weight:700;
    }
    
    
    
    
    .cases-note{
      text-align:center;
      color:#6B7890;
      font-size:13px;
      line-height:1.55;
      margin:2px auto 0;
      max-width:760px;
    }
    @media(min-width:768px){
        flex-basis:46%;
        max-width:46%;
      }
    }
    @media(min-width:1180px){
        flex-basis:32%;
        max-width:32%;
      }
    }
    @media(max-width:620px){
        padding:38px 0 42px;
      }
        gap:16px;
        padding-left:4px;
        padding-right:4px;
      }
        flex-basis:92%;
        max-width:92%;
        border-radius:20px;
      }
        border-radius:20px;
      }
        top:10px;
        font-size:13px;
        padding:7px 18px;
      }
    }

  
    /* 

  
    /* 
    
    
    
    
    
    
      from{transform:translateX(0);}
      to{transform:translateX(-50%);}
    }
    @media(max-width:620px){
        gap:16px;
        animation-duration:38s;
      }
        flex:0 0 86vw !important;
        max-width:86vw !important;
      }
        width:28px;
      }
    }

  
    /* MOBILE FIX: show implant case photos clearly on phone */
    @media(max-width:620px){
        overflow-x:auto !important;
        overflow-y:hidden !important;
        -webkit-overflow-scrolling:touch !important;
        scroll-snap-type:x mandatory !important;
        padding-left:0 !important;
        padding-right:0 !important;
      }
        display:none !important;
      }
        animation:none !important;
        width:max-content !important;
        transform:none !important;
        padding:8px 12px 20px !important;
        gap:14px !important;
      }
        flex:0 0 88vw !important;
        max-width:88vw !important;
        min-width:88vw !important;
        scroll-snap-align:center !important;
        display:block !important;
      }
        width:100% !important;
        height:auto !important;
        display:block !important;
        opacity:1 !important;
        visibility:visible !important;
      }
    }

  
    /* 
    @media(max-width:620px){
        animation:none !important;
      }
    }

  
    /* 
    
    
    
    
    
    @media(max-width:620px){
        gap:14px !important;
        padding:8px 12px 20px !important;
      }
        margin-top:10px;
      }
        width:42px;
        height:42px;
        font-size:22px;
      }
    }

  
    /* WHATSAPP ICON IMAGE */
    .wa-icon-img{
      width:22px;
      height:22px;
      border-radius:50%;
      object-fit:cover;
      display:inline-block;
      vertical-align:middle;
      margin-right:8px;
    }
    .floating-contact .wa-icon-img{
      width:24px;
      height:24px;
    }

  
    /* 
    
    .cases-subtitle{
      text-align:center;
      color:#5B6A86;
      font-size:16px;
      margin:0 auto 24px;
      font-weight:700;
    }
    
    
    
    
    
    
    .cases-note{
      text-align:center;
      color:#6B7890;
      font-size:13px;
      line-height:1.55;
      margin:8px auto 0;
      max-width:760px;
    }
    @media(min-width:768px){
        flex-basis:46%;
        max-width:46%;
      }
    }
    @media(max-width:620px){
        gap:14px !important;
        padding:8px 12px 20px !important;
      }
        flex:0 0 88vw !important;
        max-width:88vw !important;
        min-width:88vw !important;
        border-radius:20px;
      }
        width:42px;
        height:42px;
        font-size:22px;
      }
    }

  
    /* 
    
    .cases-subtitle{
      text-align:center;
      color:#5B6A86;
      font-size:16px;
      margin:0 auto 24px;
      font-weight:700;
    }
    
    
    
    
    
    
    
    .cases-note{
      text-align:center;
      color:#6B7890;
      font-size:13px;
      line-height:1.55;
      margin:8px auto 0;
      max-width:760px;
    }
    @media(min-width:768px){
        flex-basis:46%;
        max-width:46%;
      }
    }
    @media(max-width:620px){
        gap:14px !important;
        padding:8px 12px 20px !important;
      }
        flex:0 0 88vw !important;
        max-width:88vw !important;
        min-width:88vw !important;
        border-radius:20px;
      }
        width:42px;
        height:42px;
        font-size:22px;
      }
    }


/* =========================================================
   Shared with homepage (from legacy style.css)
   ========================================================= */


/* Anchor padding synced with JS --header-scroll-margin; smooth scroll handled in JS only */




@media (max-width: 1023px) {
  
}

/* Native hash jumps + stacking: each section owns its layer so sliders don’t visually overlap the next block */
body > section[id] {
  position: relative;
  isolation: isolate;
  scroll-margin-top: var(--header-scroll-margin);
}

/* In-section anchor: land on treatment cards, not the stats row above */
#treatment-cards {
  scroll-margin-top: var(--header-scroll-margin);
}

/* Scrollbar hide for horizontal scroll tracks */
.hide-scrollbar::-webkit-scrollbar,
[class*="overflow-x-auto"]::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar,
[class*="overflow-x-auto"] {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ---- Scroll-triggered animations ---- */
/* Safe default: visible. JS-enabled mode applies the hidden start state. */
.animate-on-scroll {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.js-enabled .animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
}
.js-enabled .animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Anchor nav: reveal in place without shifting scroll target mid-glide */
html.anchor-navigating .animate-on-scroll {
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Stagger children in grid layouts */
.animate-on-scroll:nth-child(2) { transition-delay: 0.1s; }
.animate-on-scroll:nth-child(3) { transition-delay: 0.2s; }
.animate-on-scroll:nth-child(4) { transition-delay: 0.3s; }


/* ---- Booking card + multi-step form ---- */
.booking-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
}
.booking-overlay.hidden {
  display: none;
}

.booking-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 22, 50, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.booking-overlay-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
  padding: 20px 12px;
  max-height: 100vh;
}

@media (min-width: 768px) {
  .booking-overlay-inner {
    max-width: 820px;
    padding: 28px 18px;
  }
}

.booking-card-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: -8px -8px 0 0;
  padding: 0 0 4px 0;
}

.booking-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #6B7280;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, transform 0.12s ease;
}

.booking-close-btn:hover {
  color: #111827;
  background-color: rgba(0, 0, 0, 0.06);
  transform: scale(1.05);
}

html.booking-open,
body.booking-open {
  overflow: hidden;
}

.booking-card {
  position: relative;
  border-radius: 20px;
  background:
    radial-gradient(circle at top left, #E6F6FE 0, #ffffff 55%),
    linear-gradient(to bottom right, rgba(19, 118, 248, 0.08), rgba(1, 22, 50, 0.04));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
  padding: 28px 20px 32px;
  max-height: 90vh;
  overflow-y: auto;
}

@media (min-width: 768px) {
  .booking-card {
    padding: 36px 40px 40px;
  }
  .booking-card-header {
    margin: -12px -12px 0 0;
  }
}

/* Stepper: more breathing room */
.booking-card .mb-8 {
  margin-bottom: 2rem;
}

.booking-step {
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Step content: uncrowded, punchy typography */
.booking-step-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #011632;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
@media (min-width: 768px) {
  .booking-step-title {
    font-size: 1.5rem;
  }
}

.booking-step-desc {
  font-size: 0.9375rem;
  color: #3C4959;
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

.booking-offer-copy {
  font-size: 0.6875rem;
  color: #6B7280;
  margin-bottom: 1.5rem;
  line-height: 1.4;
}

.booking-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
@media (max-width: 639px) {
  .booking-options-grid {
    grid-template-columns: 1fr;
  }
}
.booking-options-grid .booking-pill[class*="col-span-2"] {
  grid-column: 1 / -1;
}

.booking-step-actions {
  margin-top: 2rem;
  display: flex;
  justify-content: flex-end;
}
.booking-step-actions-between {
  justify-content: space-between;
}

/* Section spacing: separate blocks so it doesn’t feel crowded */
.booking-section {
  margin-bottom: 1.25rem;
}

.booking-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
  margin-bottom: 1rem;
}
.booking-fields-grid .booking-field-full {
  grid-column: 1 / -1;
}
@media (max-width: 767px) {
  .booking-fields-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

.booking-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #011632;
  margin-bottom: 0.375rem;
}

/* Radio groups in step 2: compact, same rhythm as step 3 */
.booking-step .mt-4.grid {
  margin-top: 1.25rem;
  gap: 1rem;
}
.booking-step .mt-4.grid p {
  font-weight: 600;
  color: #011632;
  font-size: 0.875rem;
  margin-bottom: 0.375rem;
}
.booking-step .mt-4.grid .flex-wrap {
  gap: 0.5rem;
}

/* All steps: consistent title/desc spacing (steps 3 & 4 use default h3/p) */
.booking-step h3 {
  font-size: 1.35rem;
  font-weight: 700;
  color: #011632;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
@media (min-width: 768px) {
  .booking-step h3 {
    font-size: 1.5rem;
  }
}
.booking-step h3 + p,
.booking-step p.text-dental-
.booking-step .grid.gap-3 {
  gap: 0.875rem;
}
.booking-step .grid.gap-4 {
  gap: 1.25rem;
}
.booking-step .space-y-8 > * + * {
  margin-top: 1.5rem;
}

.booking-step.hidden {
  opacity: 0;
  transform: translateY(8px);
}

.booking-step:not(.hidden) {
  opacity: 1;
  transform: translateY(0);
}

/* Booking form: consistent compact fields (match step 3 feel) */
.booking-input {
  width: 100%;
  min-height: 42px;
  border-radius: 8px;
  border: 1px solid #D1D5DB;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  color: #011632;
  background-color: #FAFBFC;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.booking-input:hover {
  border-color: #9CA3AF;
  background-color: #ffffff;
}

.booking-input::placeholder {
  color: #6B7280;
}

.booking-input:focus {
  outline: none;
  border-color: #1376F8;
  background-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(19, 118, 248, 0.18);
}

.booking-input:focus-visible {
  outline: none;
  border-color: #1376F8;
  box-shadow: 0 0 0 4px rgba(19, 118, 248, 0.18);
}

/* Select dropdown: same punchy look, clear dropdown arrow */
select.booking-input {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 18px;
  padding-right: 40px;
}

select.booking-input:focus {
  border-color: #1376F8;
  background-color: #ffffff;
}

textarea.booking-input {
  min-height: 80px;
  padding: 10px 12px;
  font-size: 14px;
}

/* Modern date picker (Flatpickr) – classy calendar matching booking form */
.flatpickr-calendar {
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(1, 22, 50, 0.12);
  border: 1px solid #E5E7EB;
  font-family: inherit;
}
.flatpickr-months .flatpickr-month {
  background: #FAFBFC;
  color: #011632;
  border-radius: 10px 10px 0 0;
}
.flatpickr-current-month .numInputWrapper,
.flatpickr-current-month .flatpickr-prev-month,
.flatpickr-current-month .flatpickr-next-month {
  color: #011632;
  fill: #011632;
}
.flatpickr-weekdays {
  background: #FAFBFC;
}
span.flatpickr-weekday {
  color: #6B7280;
  font-weight: 600;
  font-size: 12px;
}
.flatpickr-day {
  border-radius: 8px;
  font-weight: 500;
  color: #011632;
}
.flatpickr-day:hover {
  background: #EFF6FF;
  border-color: transparent;
  color: #011632;
}
.flatpickr-day.selected,
.flatpickr-day.startRange {
  background: #1376F8;
  border-color: #1376F8;
  color: #fff;
}
/* Past dates: disabled and de-emphasized (minDate: "today" in JS) */
.flatpickr-day.flatpickr-disabled {
  color: #D1D5DB;
  opacity: 0.35;
  cursor: default;
}
.flatpickr-day.flatpickr-disabled:hover {
  background: transparent;
  color: #D1D5DB;
}
.flatpickr-day.today {
  border-color: #1376F8;
  color: #1376F8;
}
.flatpickr-day.today:hover {
  background: #EFF6FF;
  color: #1376F8;
}
.flatpickr-input[readonly] {
  cursor: pointer;
}

/* Keep date field same size and look as other booking inputs */
.booking-form .flatpickr input.input,
.booking-form .flatpickr input[type="text"] {
  width: 100%;
  min-height: 42px;
  border-radius: 8px;
  border: 1px solid #D1D5DB;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  color: #011632;
  background-color: #FAFBFC;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.booking-form .flatpickr input.input:focus,
.booking-form .flatpickr input[type="text"]:focus {
  outline: none;
  border-color: #1376F8;
  box-shadow: 0 0 0 4px rgba(19, 118, 248, 0.18);
}

/* Form labels in booking steps */
.booking-step label.block {
  font-weight: 600;
  color: #011632;
  font-size: 14px;
}

.booking-pill,
.booking-pill-sm {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  border-radius: 999px;
  border: 2px solid #E5E7EB;
  background-color: #ffffff;
  color: #111827;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 14px;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}

.booking-pill:active,
.booking-pill-sm:active {
  transform: scale(0.98);
}

.booking-pill-sm {
  padding: 8px 12px;
  font-size: 12px;
}

.booking-pill span,
.booking-pill-sm span {
  white-space: nowrap;
  background: none !important;
  padding: 0;
  border-radius: 0;
}

.booking-pill:hover,
.booking-pill-sm:hover {
  border-color: #1376F8;
  background-color: #E6F6FE;
}

.booking-pill:hover,
.booking-pill-sm:hover {
  box-shadow: 0 4px 12px rgba(19, 118, 248, 0.15);
}

/* Whole pill selected: full blue border + light blue background (label, not span) */
.booking-pill.is-selected,
.booking-pill-sm.is-selected,
.booking-pill:has(input:checked),
.booking-pill-sm:has(input:checked) {
  border-color: #1376F8;
  background-color: #E6F6FE;
  color: #011632;
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(19, 118, 248, 0.3);
}

.booking-pill.is-selected span,
.booking-pill-sm.is-selected span,
.booking-pill:has(input:checked) span,
.booking-pill-sm:has(input:checked) span {
  color: inherit;
  background: none !important;
}

.booking-primary-btn,
.booking-secondary-btn {
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.booking-primary-btn {
  background-color: #1376F8;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(19, 118, 248, 0.4);
}

.booking-primary-btn:hover {
  background-color: #0d5fd4;
}

.booking-secondary-btn {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #D1D5DB;
}

.booking-primary-btn:active,
.booking-secondary-btn:active {
  transform: translateY(1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}

.booking-error {
  margin-top: 10px;
  font-size: 12px;
  color: #E52323;
}

.booking-step-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 0;
  text-align: center;
}

.booking-step-indicator .indicator-dot {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 2px solid #D1D5DB;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #6B7280;
  background-color: #ffffff;
  position: relative;
}

.booking-step-indicator .indicator-label {
  margin-top: 6px;
  font-size: 11px;
}

.booking-offer-copy {
  letter-spacing: 0.02em;
  color: #1376F8;
  font-weight: 600;
}

/* ---- Hover polish (desktop only) ---- */
@media (hover: hover) and (pointer: fine) {
  /* Primary brand CTAs */
  .booking-primary-btn,
  a.bg-dental-accent,
  button.bg-dental-accent {
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  }

  .booking-primary-btn:hover,
  a.bg-dental-accent:hover,
  button.bg-dental-accent:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(19, 118, 248, 0.35);
  }

  /* Service cards */
  .service-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  }

  .service-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    border-color: rgba(19, 118, 248, 0.5);
  }

  /* Booking pills */
  .booking-pill:hover span,
  .booking-pill-sm:hover span {
    transform: translateY(-0.5px);
  }
}

.booking-step-indicator.is-active .indicator-dot {
  border-color: #1376F8;
  background-color: #1376F8;
  color: #ffffff;
}

.booking-step-indicator.is-complete .indicator-dot {
  border-color: #25B4F8;
  background-color: #25B4F8;
  color: #ffffff;
}

.booking-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  border: 1px solid #E5E7EB;
  background-color: #ffffff;
  padding: 8px 10px;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.booking-checkbox input {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.booking-checkbox:hover {
  border-color: #1376F8;
  background-color: #E6F6FE;
}

.booking-checkbox input:checked + span {
  font-weight: 600;
}

/* ---- Selection color ---- */
::selection {
  background-color: #1376F8;
  color: white;
}

/* ---- Service page: mobile layout polish ---- */
@media (max-width: 640px) {
  .page-service .hero-rounded-img {
    max-height: 280px;
    width: 100%;
    object-fit: cover;
    object-position: center top;
  }

  .page-service .problem {
    padding-top: 2rem;
  }

  .page-service .problem-visual-premium img {
    max-height: 240px;
    width: 100%;
    object-fit: cover;
    border-radius: 12px;
  }

  .page-service .info-panel {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .page-service .info-panel > div:first-child {
    order: 2;
  }

  .page-service .info-panel > div:last-child {
    order: 1;
  }

  .page-service .info-panel .implant-structure-img {
    max-height: 220px;
    width: 100%;
    object-fit: cover;
    border-radius: 12px;
  }

  .page-service .option-grid .option {
    padding: 1rem;
  }

  .page-service .cards5 .card,
  .page-service .cards4 .card {
    padding: 1.125rem;
  }
}

/* ---- Focus styles for accessibility ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid #1376F8;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Print styles ---- */
@media print {
  #site-header,
  #mobile-fabs,
  .animate-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    position: static !important;
  }
}

/* ---- Pressed state for key CTAs ---- */
.is-pressed {
  transform: translateY(1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}