:root{
    --navy:#0F1D45;
    --royal:#1B3A8A;
    --royal-2:#2A4FB0;
    --emerald:#1E7A5E;
    --emerald-2:#2E9C7B;
    --ivory:#F6F4EE;
    --paper:#FFFFFF;
    --ink:#101425;
    --ink-soft:#4A5068;
    --line:rgba(15,29,69,0.12);
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  *{box-sizing:inherit; margin:0; padding:0;}
  html{scroll-behavior:smooth; scroll-padding-top:env(safe-area-inset-top,0px);}
  html,body{height:100%;}
  body{
    background:var(--ivory);
    color:var(--ink);
    font-family:'Work Sans',sans-serif;
    font-size:16px;
    line-height:1.6;
    overflow-x:hidden;
  }
  h1,h2,h3{
    font-family:'Fraunces',serif;
    font-weight:500;
    color:var(--navy);
    line-height:1.15;
  }
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .wrap{max-width:1120px; margin:0 auto; padding:0 32px;}

  /* ---- nav ---- */
  header{
    position:sticky; top:env(safe-area-inset-top,0px); z-index:50;
    background:rgba(246,244,238,0.9);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 32px; max-width:1120px; margin:0 auto;
  }
  .logo{
    font-family:'Fraunces',serif; font-size:22px; font-weight:600; color:var(--navy);
    display:flex; align-items:center; gap:10px;
  }
  .logo .dot{
    width:9px; height:9px; border-radius:50%;
    background:linear-gradient(135deg,var(--emerald),var(--royal));
  }
  .navlinks{display:flex; gap:36px; font-size:15px; color:var(--ink-soft);}
  .navlinks a:hover{color:var(--royal);}
  .navcta{
    padding:11px 22px; border-radius:3px;
    background:var(--navy); color:var(--ivory); font-size:14px; font-weight:500;
    transition:background .2s ease;
  }
  .navcta:hover{background:var(--royal);}
  .navtoggle{display:none;}

  /* ---- hero ---- */
  .hero{
    position:relative;
    padding:100px 0 120px;
    overflow:hidden;
  }
  .hero::before{
    content:"";
    position:absolute; top:-180px; right:-160px;
    width:520px; height:520px; border-radius:50%;
    background:radial-gradient(circle at 30% 30%, var(--royal-2), var(--royal) 60%, transparent 72%);
    opacity:.14;
  }
  .hero::after{
    content:"";
    position:absolute; bottom:-220px; left:-140px;
    width:460px; height:460px; border-radius:50%;
    background:radial-gradient(circle at 60% 40%, var(--emerald-2), var(--emerald) 60%, transparent 72%);
    opacity:.14;
  }
  .hero-inner{position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:center;}
  .eyebrow-root{
    font-size:15px; color:var(--emerald); font-weight:500; margin-bottom:18px;
    display:flex; align-items:center; gap:10px;
  }
  .eyebrow-root svg{width:20px; height:20px;}
  .hero h1{font-size:clamp(38px,5vw,58px); max-width:11ch;}
  .hero h1 .accent{color:var(--emerald);}
  .hero p.lede{
    margin-top:24px; max-width:44ch; font-size:18px; color:var(--ink-soft);
  }
  .hero-actions{display:flex; gap:16px; margin-top:38px; flex-wrap:wrap;}
  .btn-primary{
    background:var(--royal); color:#fff; padding:15px 30px; border-radius:3px;
    font-size:15px; font-weight:500; transition:transform .2s ease, background .2s ease;
  }
  .btn-primary:hover{background:var(--royal-2); transform:translateY(-1px);}
  .btn-ghost{
    padding:15px 30px; border-radius:3px; border:1px solid var(--line);
    font-size:15px; font-weight:500; color:var(--navy);
    transition:border-color .2s ease;
  }
  .btn-ghost:hover{border-color:var(--emerald); color:var(--emerald);}
  .hero-stats{display:flex; gap:36px; margin-top:56px; flex-wrap:wrap;}
  .stat b{font-family:'Fraunces',serif; font-size:30px; color:var(--navy); display:block; font-weight:500;}
  .stat span{font-size:13.5px; color:var(--ink-soft);}

  /* tooth diagram */
  .hero-visual{position:relative; display:flex; align-items:center; justify-content:center;}
  .tooth-card{
    background:var(--paper); border-radius:6px; padding:36px;
    box-shadow:0 24px 60px -20px rgba(15,29,69,0.25);
    border:1px solid var(--line);
    max-width:340px;
  }
  .tooth-card svg{width:100%; height:auto;}
  .tooth-caption{margin-top:18px; font-size:13.5px; color:var(--ink-soft); text-align:center;}

  /* ---- section shared ---- */
  section{padding:96px 0;}
  .section-head{max-width:640px; margin-bottom:56px;}
  .section-head h2{font-size:clamp(28px,3.4vw,38px);}
  .section-head p{margin-top:16px; color:var(--ink-soft); font-size:16.5px;}
  .kicker{font-size:14px; color:var(--emerald); font-weight:500; margin-bottom:14px;}

  /* ---- services ---- */
  .services{background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .service-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
    background:var(--line); border:1px solid var(--line);
  }
  .service{
    background:var(--paper); padding:38px 34px; min-height:230px;
    display:flex; flex-direction:column; gap:16px;
    transition:background .25s ease;
  }
  .service:hover{background:var(--ivory);}
  .service .num{font-family:'Fraunces',serif; font-size:14px; color:var(--emerald); font-weight:500;}
  .service h3{font-size:20px; margin-top:2px;}
  .service p{font-size:14.5px; color:var(--ink-soft); flex:1;}
  .service .icn{width:30px; height:30px; color:var(--royal);}

  /* ---- why / process ---- */
  .why{display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:start;}
  .why-list{display:flex; flex-direction:column;}
  .why-item{
    padding:26px 0; border-bottom:1px solid var(--line);
    display:grid; grid-template-columns:56px 1fr; gap:20px; align-items:start;
  }
  .why-item:first-child{padding-top:0;}
  .why-item .icn-wrap{
    width:48px; height:48px; border-radius:50%;
    background:linear-gradient(135deg,var(--royal),var(--emerald));
    display:flex; align-items:center; justify-content:center;
  }
  .why-item .icn-wrap svg{width:22px; height:22px; color:#fff;}
  .why-item h4{font-family:'Fraunces',serif; font-weight:500; font-size:18px; color:var(--navy); margin-bottom:6px;}
  .why-item p{font-size:14.5px; color:var(--ink-soft);}

  .why-card{
    background:var(--navy); color:var(--ivory); border-radius:6px; padding:44px;
    position:relative; overflow:hidden;
  }
  .why-card::after{
    content:""; position:absolute; inset:0;
    background:radial-gradient(circle at 80% 0%, rgba(46,156,123,0.35), transparent 55%);
  }
  .why-card h3{color:#fff; font-size:26px; position:relative;}
  .why-card p{margin-top:14px; color:rgba(246,244,238,0.75); font-size:15px; max-width:38ch; position:relative;}
  .why-quote{
    margin-top:34px; padding-top:28px; border-top:1px solid rgba(246,244,238,0.18); position:relative;
  }
  .why-quote p{font-family:'Fraunces',serif; font-style:italic; font-size:17px; color:#fff; max-width:32ch;}
  .why-quote span{display:block; margin-top:12px; font-size:13.5px; color:rgba(246,244,238,0.6);}

  /* ---- gallery ---- */
  .gallery{background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:150px;
    gap:14px;
  }
  .gtile{
    position:relative; border-radius:6px; overflow:hidden;
    display:flex; align-items:flex-end; padding:20px;
    color:#fff;
  }
  .gtile.royal{background:linear-gradient(150deg,var(--royal) 0%, var(--navy) 100%);}
  .gtile.emerald{background:linear-gradient(150deg,var(--emerald) 0%, #14503D 100%);}
  .gtile.mix{background:linear-gradient(150deg,var(--royal-2) 0%, var(--emerald) 100%);}
  .gtile img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; z-index:0;
  }
  .gtile::after{
    content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(to top, rgba(10,16,36,0.65), rgba(10,16,36,0) 55%);
  }
  .gtile span{position:relative; z-index:2; font-size:14.5px; font-weight:500;}
  .g-wide{grid-column:span 2;}
  .g-tall{grid-row:span 2;}

  /* ---- testimonials ---- */
  .testimonials{}
  .testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .testi-card{
    background:var(--paper); border:1px solid var(--line); border-radius:6px;
    padding:32px; display:flex; flex-direction:column; gap:18px;
  }
  .testi-stars{display:flex; gap:4px; color:var(--emerald);}
  .testi-stars svg{width:16px; height:16px;}
  .testi-card p.quote{font-family:'Fraunces',serif; font-size:17px; color:var(--navy); font-style:italic; flex:1;}
  .testi-who{display:flex; align-items:center; gap:12px;}
  .testi-avatar{
    width:40px; height:40px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-family:'Fraunces',serif; font-weight:500; font-size:15px;
  }
  .testi-who .name{font-size:14.5px; font-weight:600; color:var(--navy);}
  .testi-who .role{font-size:13px; color:var(--ink-soft);}

  /* ---- social row ---- */
  .social-row{display:flex; gap:14px; margin-top:20px;}
  .social-row a{
    width:38px; height:38px; border-radius:50%;
    border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    color:var(--navy); transition:background .2s ease, color .2s ease, border-color .2s ease;
  }
  .social-row a:hover{background:var(--royal); border-color:var(--royal); color:#fff;}
  .social-row svg{width:17px; height:17px;}

  /* ---- cta / contact ---- */
  .cta{
    background:linear-gradient(135deg,var(--royal) 0%, var(--emerald) 130%);
    border-radius:8px; padding:64px 56px;
    display:grid; grid-template-columns:1.3fr .7fr; gap:40px; align-items:center;
    color:#fff;
  }
  .cta h2{color:#fff; font-size:clamp(26px,3vw,34px); max-width:16ch;}
  .cta p{margin-top:14px; color:rgba(255,255,255,0.85); max-width:40ch;}
  .cta-box{background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.25); border-radius:6px; padding:28px;}
  .cta-box .row{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.18); font-size:14.5px;}
  .cta-box .row:last-child{border-bottom:none;}
  .cta-box .row span:first-child{color:rgba(255,255,255,0.7);}
  .cta-box .btn-primary{
    display:block; text-align:center; width:100%; margin-top:18px;
    background:#fff; color:var(--navy);
  }
  .cta-box .btn-primary:hover{background:var(--ivory);}
  .btn-whatsapp{
    display:flex; align-items:center; justify-content:center; gap:9px;
    width:100%; margin-top:12px; padding:14px 20px; border-radius:3px;
    background:#25D366; color:#fff; font-size:14.5px; font-weight:500;
    transition:filter .2s ease;
  }
  .btn-whatsapp:hover{filter:brightness(0.94);}
  .btn-whatsapp svg{width:18px; height:18px;}

  /* ---- footer ---- */
  footer{border-top:1px solid var(--line); padding:44px 0;}
  .footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
  .footer-row .logo{font-size:18px;}
  .footer-links{display:flex; gap:28px; font-size:14px; color:var(--ink-soft);}
  .footer-links a:hover{color:var(--royal);}
  .footer-note{font-size:13px; color:var(--ink-soft); margin-top:20px;}

  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ivory:#0E1424; --paper:#131A2E; --ink:#EDEFF7; --ink-soft:#A3AAC2;
      --line:rgba(237,239,247,0.12); --navy:#EDEFF7;
    }
    :root:not([data-theme="light"]) header{background:rgba(14,20,36,0.85);}
    :root:not([data-theme="light"]) .hero h1{color:#EDEFF7;}
    :root:not([data-theme="light"]) .navcta{background:var(--royal-2); color:#fff;}
    :root:not([data-theme="light"]) .why-card{background:#0B1120;}
  }
  :root[data-theme="dark"]{
    --ivory:#0E1424; --paper:#131A2E; --ink:#EDEFF7; --ink-soft:#A3AAC2;
    --line:rgba(237,239,247,0.12); --navy:#EDEFF7;
  }

  @media (max-width:860px){
    .navlinks{display:none;}
    .hero-inner{grid-template-columns:1fr; gap:48px;}
    .hero{padding:64px 0 80px;}
    .service-grid{grid-template-columns:1fr;}
    .why{grid-template-columns:1fr;}
    .gallery-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:130px;}
    .g-wide{grid-column:span 2;}
    .testi-grid{grid-template-columns:1fr;}
    .cta{grid-template-columns:1fr; padding:44px 28px;}
  }
  @media (max-width:520px){
    .wrap{padding:0 20px;}
    nav{padding:18px 20px;}
    section{padding:64px 0;}
  }