:root{
    --cream:#ffffff;
    --cream-2:#f0f0ee;
    --paper:#f7f7f4;
    --ink:#1a201d;
    --ink-soft:#3a423d;
    --muted:#6b6e66;
    --line:rgba(26,32,29,.10);
    --line-soft:rgba(26,32,29,.05);
    --jade:#0ABAB5;
    --jade-deep:#0a4d4a;
    --jade-soft:#cdebe9;
    --gold:#b08d57;
    --wa:#25d366;
    --wa-deep:#128c4f;
    --r-sm:6px;
    --r-md:12px;
    --r-lg:20px;
    --max:1280px;
    --gap:clamp(20px,2.4vw,32px);
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    background:var(--cream);
    color:var(--ink);
    font-family:"Noto Sans TC","Inter",ui-sans-serif,system-ui,sans-serif;
    font-weight:400;
    font-size:16px;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  img{max-width:100%;display:block}
  a{color:inherit;text-decoration:none}
  h1,h2,h3,h4{
    font-family:"Noto Serif TC","Cormorant Garamond",ui-serif,Georgia,serif;
    font-weight:500;
    letter-spacing:.005em;
    margin:0;
    color:var(--jade-deep);
    text-wrap:balance;
  }
  .en{
    font-family:"Cormorant Garamond","Inter",ui-serif,Georgia,serif;
    font-style:italic;
    font-weight:400;
    letter-spacing:.04em;
    color:var(--gold);
  }
  .eyebrow{
    font-family:"Inter","Noto Sans TC",sans-serif;
    text-transform:uppercase;
    letter-spacing:.28em;
    font-size:11px;
    color:var(--jade);
    font-weight:500;
  }
  .container{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,4vw,48px)}

  /* ── Top bar ───────────────────────────────────────────── */
  .topstrip{
    background:var(--jade-deep);
    color:#e8e2d4;
    font-size:12px;
    letter-spacing:.04em;
  }
  .topstrip-inner{
    display:flex;justify-content:space-between;align-items:center;
    padding:8px 0;gap:24px;flex-wrap:wrap;
  }
  .topstrip a{color:#e8e2d4;opacity:.85}
  .topstrip a:hover{opacity:1}
  .topstrip .sep{opacity:.4;margin:0 12px}

  .nav{
    position:sticky;top:0;z-index:50;
    background:rgba(255,255,255,.82);
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    border-bottom:1px solid var(--line-soft);
  }
  .nav-inner{
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 0;gap:24px;
  }
  .brand{display:flex;align-items:center;gap:14px}
  .brand-mark{
    width:42px;height:42px;border-radius:50%;
    background:var(--jade);color:var(--paper);
    display:grid;place-items:center;
    font-family:"Noto Serif TC",serif;font-weight:600;font-size:20px;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 2px 14px rgba(20,51,41,.3);
  }
  img.brand-mark, .brand-logo{
    width:auto;height:52px;max-width:140px;
    background:transparent;border-radius:0;
    object-fit:contain;
    box-shadow:none;padding:0;
    display:block;
  }
  .brand-name{font-family:"Noto Serif TC",serif;font-weight:600;font-size:20px;color:var(--jade-deep);line-height:1.1}
  .brand-name small{display:block;font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:400;font-size:12px;color:var(--gold);letter-spacing:.08em;margin-top:2px}
  .nav-links{display:flex;gap:30px;align-items:center;font-size:14px;color:var(--ink-soft)}
  .nav-links a{position:relative;padding:6px 0;font-weight:500}
  .nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--jade);transform:scaleX(0);transform-origin:left;transition:transform .25s}
  .nav-links a:hover::after{transform:scaleX(1)}

  .btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:12px 22px;border-radius:999px;border:1px solid transparent;
    font-family:"Noto Sans TC",sans-serif;font-weight:500;font-size:14px;
    letter-spacing:.04em;cursor:pointer;transition:transform .15s, box-shadow .2s, background .2s;
    text-decoration:none;
    white-space:nowrap;
  }
  .btn-wa{background:var(--wa);color:#fff;box-shadow:0 4px 18px rgba(37,211,102,.28)}
  .btn-wa:hover{background:var(--wa-deep);transform:translateY(-1px)}
  .btn-jade{background:var(--jade);color:var(--paper)}
  .btn-jade:hover{background:var(--jade-deep);transform:translateY(-1px)}
  .btn-ghost{background:transparent;color:var(--jade-deep);border-color:rgba(31,77,62,.4)}
  .btn-ghost:hover{background:var(--jade-deep);color:var(--paper);border-color:var(--jade-deep)}
  .btn svg{width:16px;height:16px}

  /* ── Hero ──────────────────────────────────────────────── */
  .hero{
    padding:clamp(48px,8vw,96px) 0 clamp(60px,10vw,120px);
    position:relative;overflow:hidden;
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1.05fr 1fr;
    gap:clamp(32px,5vw,72px);
    align-items:center;
  }
  .hero h1{
    font-size:clamp(40px,5.8vw,76px);
    line-height:1.08;
    font-weight:500;
    letter-spacing:-.01em;
  }
  .hero h1 .en-h{
    display:block;
    font-family:"Cormorant Garamond",serif;
    font-style:italic;font-weight:400;
    color:var(--gold);
    font-size:.42em;
    letter-spacing:.05em;
    margin-top:14px;
  }
  .hero-sub{
    margin-top:28px;
    color:var(--ink-soft);
    font-size:17px;
    max-width:48ch;
    line-height:1.75;
  }
  .hero-cta{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
  .hero-meta{
    display:flex;gap:28px;margin-top:48px;padding-top:28px;
    border-top:1px solid var(--line);
    flex-wrap:wrap;
  }
  .hero-meta-item{min-width:90px}
  .hero-meta-item .num{
    font-family:"Noto Serif TC",serif;font-weight:500;
    font-size:28px;color:var(--jade-deep);line-height:1;
  }
  .hero-meta-item .lbl{
    font-size:12px;color:var(--muted);margin-top:6px;letter-spacing:.05em;
  }

  .hero-art{
    position:relative;aspect-ratio:4/5;
    border-radius:var(--r-lg);
    overflow:hidden;
    background:
      radial-gradient(120% 80% at 30% 20%, #d5efec, transparent 60%),
      radial-gradient(100% 100% at 80% 90%, #74cfca, transparent 55%),
      linear-gradient(160deg,#9be0dc,#0a6c68);
    box-shadow:0 30px 80px -30px rgba(10,77,74,.4);
  }
  .hero-art-img{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:center;
    display:block;
  }
  .hero-art-split{
    display:grid;
    grid-template-rows:1fr 1fr;
    gap:6px;
    background:var(--cream);
    padding:0;
  }
  .hero-art-half{
    position:relative;overflow:hidden;
    border-radius:calc(var(--r-lg) - 6px);
  }
  .hero-art-half:first-child{border-radius:var(--r-lg) var(--r-lg) calc(var(--r-lg) - 6px) calc(var(--r-lg) - 6px)}
  .hero-art-half:last-child{border-radius:calc(var(--r-lg) - 6px) calc(var(--r-lg) - 6px) var(--r-lg) var(--r-lg)}
  .hero-art-half img{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:center;display:block;
  }
  .hero-art-split .hero-art-tag{
    background:linear-gradient(to top, rgba(10,32,28,.75), transparent);
    left:0;right:0;bottom:0;padding:18px 20px;margin:0;
  }
  .hero-art-split .hero-art-tag .ph{
    background:rgba(255,255,255,.16);color:#fff;
  }
  .hero-art-inset{
    position:absolute;
    left:-22px;bottom:-22px;
    width:42%;aspect-ratio:4/3;
    border-radius:var(--r-md);
    overflow:hidden;
    box-shadow:0 20px 50px -15px rgba(10,77,74,.35), 0 0 0 6px var(--cream);
    transform:rotate(-2deg);
    z-index:2;
  }
  .hero-art-inset img{
    width:100%;height:100%;object-fit:cover;display:block;
  }
  @media (max-width: 960px){
    .hero-art-inset{left:auto;right:-16px;width:34%}
  }
  .hero-art::before{
    /* hidden when an image is present */
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(circle at 50% 65%, rgba(255,255,255,.85) 0 4%, transparent 4.5%),
      radial-gradient(circle at 35% 60%, rgba(255,255,255,.7) 0 3.5%, transparent 4%),
      radial-gradient(circle at 65% 60%, rgba(255,255,255,.7) 0 3.5%, transparent 4%),
      radial-gradient(circle at 22% 50%, rgba(255,255,255,.65) 0 3%, transparent 3.5%),
      radial-gradient(circle at 78% 50%, rgba(255,255,255,.65) 0 3%, transparent 3.5%),
      radial-gradient(circle at 14% 38%, rgba(255,255,255,.55) 0 2.5%, transparent 3%),
      radial-gradient(circle at 86% 38%, rgba(255,255,255,.55) 0 2.5%, transparent 3%);
    mix-blend-mode:screen;opacity:.75;
  }
  .hero-art:has(.hero-art-img)::before{display:none}
  .hero-art:has(.hero-art-img) .hero-art-tag{
    background:linear-gradient(to top, rgba(10,32,28,.75), transparent);
    left:0;right:0;bottom:0;padding:24px;margin:0;
  }
  .hero-art:has(.hero-art-img) .hero-art-tag .ph{
    background:rgba(255,255,255,.16);color:#fff;
  }
  .hero-art-tag{
    position:absolute;left:24px;bottom:24px;right:24px;
    color:#fbf7ee;font-family:"Cormorant Garamond",serif;font-style:italic;
    font-size:18px;letter-spacing:.04em;
    display:flex;justify-content:space-between;align-items:flex-end;
  }
  .hero-art-tag .ph{
    background:rgba(20,51,41,.4);backdrop-filter:blur(8px);
    padding:6px 12px;border-radius:999px;font-size:11px;letter-spacing:.18em;
    font-style:normal;font-family:"Inter",sans-serif;text-transform:uppercase;
  }

  .hero-badge{
    position:absolute;
    right:-12px;top:40px;
    background:var(--paper);
    border-radius:50%;
    width:140px;height:140px;
    display:grid;place-items:center;text-align:center;
    box-shadow:0 12px 40px rgba(20,51,41,.18);
    font-family:"Cormorant Garamond",serif;
    border:1px solid var(--line);
    transform:rotate(-8deg);
  }
  .hero-badge b{display:block;font-size:30px;color:var(--jade-deep);font-weight:500;line-height:1}
  .hero-badge span{display:block;font-size:11px;font-family:"Noto Sans TC",sans-serif;font-style:normal;color:var(--muted);letter-spacing:.18em;margin-top:6px}

  /* ── Trust strip ───────────────────────────────────────── */
  .trust{
    background:var(--paper);
    border-top:1px solid var(--line-soft);
    border-bottom:1px solid var(--line-soft);
  }
  .trust-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    padding:36px 0;
    gap:24px;
  }
  .trust-item{display:flex;gap:16px;align-items:flex-start;padding:0 8px;border-right:1px solid var(--line-soft)}
  .trust-item:last-child{border-right:none}
  .trust-item .ico{
    width:44px;height:44px;flex-shrink:0;border-radius:50%;
    background:var(--jade-soft);color:var(--jade-deep);
    display:grid;place-items:center;
  }
  .trust-item h4{font-size:15px;color:var(--jade-deep);font-family:"Noto Sans TC",sans-serif;font-weight:600;margin-bottom:3px}
  .trust-item p{margin:0;font-size:13px;color:var(--muted);line-height:1.55}

  /* ── Section base ──────────────────────────────────────── */
  section{padding:clamp(72px,10vw,128px) 0}
  .sect-head{margin-bottom:clamp(40px,6vw,72px);max-width:760px}
  .sect-head .eyebrow{display:block;margin-bottom:18px}
  .sect-head h2{
    font-size:clamp(32px,4.2vw,52px);
    line-height:1.15;
    font-weight:500;
  }
  .sect-head h2 .en-h{
    display:block;font-family:"Cormorant Garamond",serif;font-style:italic;
    color:var(--gold);font-size:.5em;margin-top:10px;font-weight:400;
  }
  .sect-head p{
    margin-top:20px;color:var(--ink-soft);font-size:16px;max-width:60ch;
  }

  /* ── Services ──────────────────────────────────────────── */
  .services{background:var(--cream)}
  .svc-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
    background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  }
  .svc{
    background:var(--paper);padding:36px 30px;
    display:flex;flex-direction:column;gap:18px;
    position:relative;transition:background .25s;
    min-height:300px;
  }
  .svc:hover{background:#fff}
  .svc-num{
    font-family:"Cormorant Garamond",serif;font-style:italic;
    color:var(--gold);font-size:14px;letter-spacing:.1em;
  }
  .svc-ico{
    width:48px;height:48px;border-radius:12px;
    background:var(--jade-soft);color:var(--jade-deep);
    display:grid;place-items:center;
    margin-bottom:8px;
  }
  .svc h3{font-size:22px;color:var(--jade-deep);font-weight:500}
  .svc h3 small{display:block;font-family:"Cormorant Garamond",serif;font-style:italic;color:var(--gold);font-size:13px;font-weight:400;margin-top:4px;letter-spacing:.06em}
  .svc p{margin:0;color:var(--ink-soft);font-size:14px;line-height:1.75;flex:1}
  .svc-link{
    color:var(--jade-deep);font-size:13px;font-weight:500;
    display:inline-flex;align-items:center;gap:6px;
    border-top:1px solid var(--line-soft);padding-top:16px;margin-top:auto;
  }
  .svc-link:hover{color:var(--gold)}

  /* ── Two-col (about) ───────────────────────────────────── */
  .about{background:var(--paper);position:relative}
  .about::before{
    content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--line-soft);
  }
  .about-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(40px,6vw,80px);align-items:center}
  .about-art{
    aspect-ratio:4/5;
    border-radius:var(--r-lg);
    background:
      radial-gradient(80% 60% at 70% 30%, #d6efec, transparent 70%),
      linear-gradient(200deg,#8fd5d0,#0a4d4a);
    position:relative;overflow:hidden;
    box-shadow:0 30px 80px -30px rgba(10,77,74,.4);
  }
  .about-art img{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:center;
    display:block;
  }
  .about-art::after{
    /* gradient overlay for label legibility */
    content:"";position:absolute;inset:0;
    background:linear-gradient(to top, rgba(10,32,28,.65) 0%, rgba(10,32,28,.15) 30%, transparent 50%);
    pointer-events:none;
  }
  .about-art .label{
    position:absolute;left:24px;bottom:24px;right:24px;color:#fbf7ee;font-family:"Cormorant Garamond",serif;
    font-style:italic;font-size:18px;z-index:1;
  }
  .about-art .label .ph{display:block;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:20px;color:#fbf7ee;margin-top:4px;letter-spacing:.02em}
  .about-prose p{color:var(--ink-soft);font-size:16px;margin:0 0 20px}
  .about-prose p.lead{font-family:"Noto Serif TC",serif;font-size:22px;line-height:1.5;color:var(--jade-deep);margin-bottom:28px}
  .about-pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:36px;padding-top:32px;border-top:1px solid var(--line)}
  .pillar h4{font-size:15px;font-family:"Noto Sans TC",sans-serif;font-weight:600;color:var(--jade-deep);margin-bottom:6px}
  .pillar p{margin:0;font-size:13px;color:var(--muted);line-height:1.65}

  /* ── Team ──────────────────────────────────────────────── */
  .team{background:var(--cream)}
  .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .doctor{
    background:var(--paper);
    border-radius:var(--r-md);
    border:1px solid var(--line-soft);
    padding:30px 28px;
    transition:transform .25s, box-shadow .25s;
  }
  .doctor:hover{transform:translateY(-4px);box-shadow:0 20px 50px -20px rgba(20,51,41,.18)}
  .doctor-mono{
    width:46px;height:46px;border-radius:50%;
    background:var(--jade-soft);color:var(--jade-deep);
    display:grid;place-items:center;
    font-family:"Noto Serif TC",serif;font-weight:600;font-size:20px;
    margin-bottom:20px;
  }
  .doctor h3{font-size:20px;color:var(--jade-deep);font-weight:500;line-height:1.3}
  .doctor h3 small{display:block;font-family:"Cormorant Garamond",serif;font-style:italic;color:var(--gold);font-size:13px;font-weight:400;margin-top:4px;letter-spacing:.04em}
  .doctor-role{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--jade-deep);margin:12px 0 16px;font-weight:600}
  .doctor ul{list-style:none;padding:0;margin:0;border-top:1px solid var(--line-soft);padding-top:14px}
  .doctor li{font-size:13px;color:var(--ink-soft);padding:5px 0;line-height:1.5;display:flex;gap:8px}
  .doctor li::before{content:"·";color:var(--gold);font-weight:700}

  .doctor-featured{
    grid-column:1 / -1;
    background:linear-gradient(135deg,var(--paper) 40%,var(--jade-soft));
    padding:44px 48px;
    display:grid;
    grid-template-columns:auto 1fr;
    gap:36px;
    align-items:start;
    margin-bottom:8px;
  }
  .doctor-featured .doctor-mono{
    width:72px;height:72px;font-size:30px;margin-bottom:0;
  }
  .founder-photo{
    width:200px;
    aspect-ratio:3/4;
    border-radius:var(--r-md);
    overflow:hidden;
    background:var(--cream);
    box-shadow:0 18px 40px -16px rgba(10,77,74,.28), 0 0 0 1px rgba(255,255,255,.4) inset;
  }
  .founder-photo img{
    width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  }
  .doctor-featured h3{font-size:26px}
  .doctor-featured h3 small{font-size:15px;margin-top:6px}
  .doctor-featured .doctor-role{margin-top:14px}
  .doctor-featured ul{columns:2;column-gap:32px;border-top:1px solid var(--line-soft);padding-top:16px}
  .doctor-featured li{break-inside:avoid}

  .team-subhead{
    font-family:"Inter",sans-serif;
    font-size:11px;letter-spacing:.24em;
    text-transform:uppercase;
    color:var(--jade-deep);
    margin:56px 0 24px;
    padding-bottom:14px;
    border-bottom:1px solid var(--line);
    display:flex;justify-content:space-between;align-items:baseline;gap:16px;
    font-weight:600;
  }
  .team-subhead span{color:var(--gold);font-family:"Cormorant Garamond",serif;font-style:italic;text-transform:none;letter-spacing:.04em;font-size:14px;font-weight:400}

  .hyg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:820px}
  .hygienist{
    background:var(--paper);
    border-radius:var(--r-md);
    border:1px solid var(--line-soft);
    padding:22px 26px;
    display:flex;gap:18px;align-items:center;
    transition:transform .25s, box-shadow .25s;
  }
  .hygienist:hover{transform:translateY(-2px);box-shadow:0 12px 30px -12px rgba(20,51,41,.18)}
  .hygienist .doctor-mono{margin-bottom:0;width:42px;height:42px;font-size:17px;flex-shrink:0}
  .hyg-body h4{font-size:17px;color:var(--jade-deep);font-weight:500;margin:0;font-family:"Noto Serif TC",serif;line-height:1.3}
  .hyg-body h4 small{display:block;font-family:"Cormorant Garamond",serif;font-style:italic;color:var(--gold);font-size:12px;font-weight:400;margin-top:2px;letter-spacing:.04em}
  .hyg-body .role{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--jade-deep);margin-top:6px;font-weight:500}

  /* ── Gallery ───────────────────────────────────────────── */
  .gallery{background:var(--paper)}
  .gal-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    grid-template-rows:200px 200px;
    gap:14px;
  }
  .gal{
    border-radius:var(--r-md);overflow:hidden;
    background-color:#a6dedb;
    background-size:cover;
    background-position:center;
    position:relative;
    transition:transform .3s ease;
  }
  .gal:hover{transform:translateY(-3px)}
  .gal::before{
    /* subtle gradient overlay so caption is readable */
    content:"";position:absolute;inset:0;
    background:linear-gradient(to top, rgba(10,32,28,.55) 0%, rgba(10,32,28,.15) 35%, transparent 60%);
    pointer-events:none;
  }
  .gal::after{
    content:attr(data-ph);position:absolute;left:16px;bottom:14px;right:16px;
    color:rgba(255,255,255,.95);font-family:"Cormorant Garamond",serif;font-style:italic;font-size:15px;
    text-shadow:0 1px 3px rgba(0,0,0,.4);
    pointer-events:none;
  }
  .gal-1{grid-column:span 3;grid-row:span 2}
  .gal-2{grid-column:span 2}
  .gal-3{grid-column:span 1}
  .gal-4{grid-column:span 2}
  .gal-5{grid-column:span 1}

  /* ── Booking ───────────────────────────────────────────── */
  .booking{
    background:var(--jade-deep);
    color:#ecf6f5;
    position:relative;overflow:hidden;
  }
  .booking::before{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(50% 60% at 90% 0%, rgba(176,141,87,.18), transparent 60%),
      radial-gradient(40% 50% at 0% 100%, rgba(10,186,181,.16), transparent 60%);
    pointer-events:none;
  }
  .booking *{position:relative}
  .booking h2{color:#fbf7ec}
  .booking .eyebrow{color:#c8b78a}
  .booking .sect-head p{color:rgba(236,246,245,.7)}
  .booking-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,6vw,80px);align-items:flex-start}

  .info-block{margin-bottom:32px}
  .info-block h4{
    font-family:"Inter",sans-serif;font-size:11px;letter-spacing:.24em;
    text-transform:uppercase;color:#c8b78a;margin-bottom:14px;font-weight:500;
  }
  .info-block .big{font-family:"Noto Serif TC",serif;font-size:28px;color:#fbf7ee;line-height:1.3;font-weight:500}
  .info-block p, .info-block a{color:rgba(236,228,210,.85);font-size:15px;line-height:1.7;display:block;margin:2px 0}
  .info-block a:hover{color:#fbf7ee}
  .hours-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(236,228,210,.1);font-size:14px;color:rgba(236,228,210,.85)}
  .hours-row:last-child{border-bottom:none}
  .hours-row b{font-weight:500;color:#fbf7ee}

  .map-embed{
    display:block;position:relative;margin-top:18px;
    border-radius:var(--r-md);overflow:hidden;
    box-shadow:0 8px 24px rgba(0,0,0,.18);
    border:1px solid rgba(255,255,255,.08);
    cursor:pointer;
  }
  .map-embed iframe{filter:saturate(.85) contrast(.95)}
  .map-overlay{
    position:absolute;right:10px;bottom:10px;
    background:rgba(15,32,27,.85);color:#fbf7ee;
    font-family:"Inter",sans-serif;font-size:11px;letter-spacing:.08em;
    padding:6px 12px;border-radius:999px;
    backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.12);
    pointer-events:none;
  }
  .map-embed:hover .map-overlay{background:var(--jade-deep);color:#fff}

  .addr-photos{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
    margin-top:18px;
  }
  .addr-photo{
    aspect-ratio:4/3;border-radius:var(--r-md);overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 8px 24px rgba(0,0,0,.18);
  }
  .addr-photo img{width:100%;height:100%;object-fit:cover;display:block}

  .form-card{
    background:var(--paper);
    color:var(--ink);
    border-radius:var(--r-lg);
    padding:36px;
    box-shadow:0 30px 80px -30px rgba(0,0,0,.5);
  }
  .form-card h3{font-size:22px;margin-bottom:6px}
  .form-card .hint{color:var(--muted);font-size:13px;margin:0 0 26px}
  .field{margin-bottom:16px}
  .field label{display:block;font-size:12px;font-weight:500;color:var(--ink-soft);margin-bottom:6px;letter-spacing:.06em}
  .field label .req{color:var(--gold)}
  .field input, .field select, .field textarea{
    width:100%;padding:12px 14px;border:1px solid var(--line);
    border-radius:var(--r-sm);background:#fff;
    font-family:inherit;font-size:14px;color:var(--ink);
    transition:border-color .15s, box-shadow .15s;
  }
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:none;border-color:var(--jade);box-shadow:0 0 0 3px rgba(31,77,62,.12);
  }
  .field textarea{min-height:80px;resize:vertical;font-family:inherit}
  .row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .form-card .actions{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap}
  .form-card .actions .btn{flex:1;justify-content:center;min-width:140px}
  .form-card .fine{font-size:11px;color:var(--muted);margin-top:14px;line-height:1.5}

  /* ── Footer ────────────────────────────────────────────── */
  footer{
    background:#062f2d;
    color:rgba(236,246,245,.7);
    padding:60px 0 30px;
    font-size:13px;
  }
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.08)}
  .foot-grid h5{font-family:"Inter",sans-serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#c8b78a;margin:0 0 16px;font-weight:500}
  .foot-grid a, .foot-grid p{color:rgba(236,246,245,.7);display:block;padding:4px 0;line-height:1.6}
  .foot-grid a:hover{color:#fbf7ec}
  .foot-brand p{margin:0;color:rgba(236,246,245,.55);font-size:13px;line-height:1.65;max-width:none;white-space:nowrap}
  .foot-bottom{padding-top:24px;display:flex;justify-content:space-between;font-size:12px;color:rgba(236,246,245,.45);flex-wrap:wrap;gap:14px}

  /* ── WhatsApp FAB ─────────────────────────────────────── */
  .wa-fab{
    position:fixed;right:22px;bottom:22px;z-index:40;
    width:60px;height:60px;border-radius:50%;
    background:var(--wa);color:#fff;
    display:grid;place-items:center;
    box-shadow:0 10px 30px rgba(37,211,102,.45);
    transition:transform .2s;
  }
  .wa-fab:hover{transform:scale(1.08)}
  .wa-fab svg{width:30px;height:30px}

  /* ── Responsive ───────────────────────────────────────── */
  @media (max-width: 960px){
    .hero-grid, .about-grid, .booking-grid{grid-template-columns:1fr}
    .hero-art{max-width:520px;margin:0 auto}
    .svc-grid{grid-template-columns:repeat(2,1fr)}
    .team-grid{grid-template-columns:repeat(2,1fr)}
    .trust-grid{grid-template-columns:repeat(2,1fr)}
    .trust-item:nth-child(2){border-right:none}
    .gal-grid{grid-template-columns:repeat(4,1fr);grid-template-rows:160px 160px 160px}
    .gal-1{grid-column:span 4;grid-row:span 1}
    .gal-2{grid-column:span 2}
    .gal-3{grid-column:span 2}
    .gal-4{grid-column:span 2}
    .gal-5{grid-column:span 2}
    .foot-grid{grid-template-columns:repeat(2,1fr)}
    .nav-links{display:none}
  }
  @media (max-width: 600px){
    .svc-grid{grid-template-columns:1fr}
    .team-grid{grid-template-columns:1fr}
    .hyg-grid{grid-template-columns:1fr}
    .doctor-featured{grid-template-columns:1fr;padding:30px 24px;gap:20px}
    .doctor-featured .founder-photo{width:160px;margin:0 auto}
    .doctor-featured ul{columns:1}
    .trust-grid{grid-template-columns:1fr}
    .trust-item{border-right:none;border-bottom:1px solid var(--line-soft);padding-bottom:18px}
    .trust-item:last-child{border-bottom:none}
    .row-2{grid-template-columns:1fr}
    .about-pillars{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr}
    .hero-badge{width:104px;height:104px;right:10px;top:14px}
    .hero-badge b{font-size:22px}
    .form-card{padding:24px}
  }

  /* ── Active nav link ──────────────────────────────────── */
  .nav-links a.active{color:var(--jade-deep);font-weight:600}
  .nav-links a.active::after{transform:scaleX(1);background:var(--gold)}

  /* ── Page hero (for sub-pages) ────────────────────────── */
  .page-hero{
    padding:clamp(56px,8vw,96px) 0 clamp(40px,6vw,72px);
    background:var(--paper);
    border-bottom:1px solid var(--line-soft);
  }
  .page-hero .container{max-width:920px;text-align:left}
  .page-hero .breadcrumb{
    font-family:"Inter",sans-serif;
    font-size:11px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--jade);font-weight:500;
    display:flex;gap:12px;align-items:center;margin-bottom:24px;
  }
  .page-hero .breadcrumb a{color:var(--muted)}
  .page-hero .breadcrumb a:hover{color:var(--jade-deep)}
  .page-hero .breadcrumb .sep{opacity:.45}
  .page-hero h1{
    font-size:clamp(36px,5vw,64px);
    line-height:1.1;
    font-weight:500;
    color:var(--jade-deep);
    text-wrap:balance;
  }
  .page-hero h1 .en-h{
    display:block;font-family:"Cormorant Garamond",serif;font-style:italic;
    color:var(--gold);font-size:.45em;margin-top:14px;font-weight:400;
  }
  .page-hero .lead{
    margin-top:24px;color:var(--ink-soft);font-size:17px;line-height:1.75;
    max-width:60ch;
  }

  /* ── Front-page explore teaser ────────────────────────── */
  .explore{background:var(--cream)}
  .explore-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
    background:var(--line);border:1px solid var(--line);
    border-radius:var(--r-md);overflow:hidden;
  }
  .explore-card{
    background:var(--paper);
    padding:44px 36px;
    display:flex;flex-direction:column;gap:14px;
    min-height:280px;
    transition:background .25s, transform .25s;
    position:relative;
  }
  .explore-card:hover{background:#fff}
  .explore-card .num{
    font-family:"Cormorant Garamond",serif;font-style:italic;
    color:var(--gold);font-size:14px;letter-spacing:.1em;
  }
  .explore-card h3{
    font-size:28px;color:var(--jade-deep);font-weight:500;line-height:1.2;
    margin-top:6px;
  }
  .explore-card h3 small{
    display:block;font-family:"Cormorant Garamond",serif;font-style:italic;
    color:var(--gold);font-size:14px;font-weight:400;margin-top:4px;
  }
  .explore-card p{margin:0;color:var(--ink-soft);font-size:14px;line-height:1.75;flex:1}
  .explore-card .arrow{
    color:var(--jade-deep);font-size:13px;font-weight:500;
    display:inline-flex;align-items:center;gap:8px;
    border-top:1px solid var(--line-soft);padding-top:16px;margin-top:auto;
    transition:gap .25s;
  }
  .explore-card:hover .arrow{gap:14px;color:var(--gold)}

  /* ── Section CTA strip (sub-page bottom) ─────────────── */
  .page-cta{
    padding:clamp(56px,8vw,88px) 0;
    background:var(--paper);
    text-align:center;
    border-top:1px solid var(--line-soft);
  }
  .page-cta h3{
    font-size:clamp(28px,3.6vw,40px);
    color:var(--jade-deep);font-weight:500;
    margin-bottom:18px;
    text-wrap:balance;
  }
  .page-cta p{margin:0 auto 30px;max-width:48ch;color:var(--ink-soft);font-size:16px}
  .page-cta .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

  @media (max-width: 960px){
    .explore-grid{grid-template-columns:1fr}
  }


  /* ── FAQ ─────────────────────────────────────────────── */
  .faq{background:var(--paper)}
  .faq-list{
    display:grid;gap:14px;
    max-width:820px;
  }
  .faq-item{
    background:var(--cream);
    border:1px solid var(--line-soft);
    border-radius:var(--r-md);
    overflow:hidden;
    transition:border-color .2s, box-shadow .2s;
  }
  .faq-item[open]{
    border-color:var(--jade);
    box-shadow:0 6px 20px -8px rgba(10,77,74,.15);
  }
  .faq-item summary{
    list-style:none;
    cursor:pointer;
    padding:22px 28px;
    font-family:"Noto Serif TC",serif;
    font-size:17px;
    font-weight:500;
    color:var(--jade-deep);
    display:flex;justify-content:space-between;align-items:center;gap:18px;
    transition:color .2s;
  }
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item summary::after{
    content:"+";
    font-family:"Inter",sans-serif;
    font-size:24px;font-weight:300;
    color:var(--gold);
    width:28px;height:28px;flex-shrink:0;
    border-radius:50%;
    background:var(--jade-soft);
    display:grid;place-items:center;
    transition:transform .25s ease, background .2s, color .2s;
  }
  .faq-item[open] summary::after{
    transform:rotate(45deg);
    background:var(--jade);color:#fff;
  }
  .faq-item summary:hover{color:var(--jade)}
  .faq-ans{
    padding:0 28px 24px;
    color:var(--ink-soft);
    font-size:15px;line-height:1.75;
    animation:faqIn .25s ease;
  }
  .faq-ans p{margin:0}
  @keyframes faqIn{
    from{opacity:0;transform:translateY(-4px)}
    to{opacity:1;transform:none}
  }
  @media (max-width: 600px){
    .faq-item summary{padding:18px 20px;font-size:16px}
    .faq-ans{padding:0 20px 20px}
  }


  /* ── SEO landing pages (implants/braces/endodontics) ─── */
  .landing-content{padding:clamp(56px,8vw,96px) 0;background:var(--cream)}
  .landing-content .content-section{
    max-width:920px;
    margin:0 auto clamp(48px,7vw,80px);
    padding-bottom:clamp(48px,7vw,80px);
    border-bottom:1px solid var(--line-soft);
  }
  .landing-content .content-section:last-child{
    border-bottom:none;padding-bottom:0;margin-bottom:0;
  }
  .landing-content .content-section .eyebrow{display:block;margin-bottom:18px}
  .landing-content .content-section h2{
    font-size:clamp(28px,3.6vw,42px);
    line-height:1.2;font-weight:500;
    margin-bottom:24px;
  }
  .landing-content .content-section h2 .en-h{
    display:block;font-family:"Cormorant Garamond",serif;font-style:italic;
    color:var(--gold);font-size:.5em;margin-top:10px;font-weight:400;
  }
  .landing-content .content-section p{
    color:var(--ink-soft);font-size:16px;line-height:1.8;
    margin:0;max-width:62ch;
  }
  .landing-content .content-section p + p{margin-top:14px}
  .landing-content .content-section strong{color:var(--jade-deep);font-weight:600}

  .feature-list{
    list-style:none;padding:0;margin:24px 0 0;
    display:grid;gap:14px;
  }
  .feature-list li{
    padding:16px 22px;padding-left:46px;
    background:var(--paper);
    border-radius:var(--r-sm);
    color:var(--ink-soft);font-size:15px;line-height:1.7;
    position:relative;
  }
  .feature-list li::before{
    content:"";
    position:absolute;left:18px;top:24px;
    width:10px;height:10px;border-radius:50%;
    background:var(--jade);
  }

  .tech-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin-top:24px;
  }
  .tech-card{
    background:var(--paper);
    padding:26px 28px;
    border-radius:var(--r-md);
    border:1px solid var(--line-soft);
    transition:border-color .2s, transform .2s;
  }
  .tech-card:hover{
    border-color:var(--jade);
    transform:translateY(-2px);
  }
  .tech-card h3{
    font-size:18px;color:var(--jade-deep);font-weight:500;
    margin-bottom:8px;line-height:1.3;
  }
  .tech-card p{
    font-size:14px;line-height:1.7;color:var(--ink-soft);margin:0;
  }

  @media (max-width: 720px){
    .tech-grid{grid-template-columns:1fr}
  }


  /* ── Featured services (SEO landing page promos) ──────── */
  .featured-svc{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-bottom:clamp(48px,7vw,72px);
  }
  .featured-card{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--r-md);
    padding:32px 28px;
    display:flex;flex-direction:column;gap:14px;
    transition:border-color .25s, transform .25s, box-shadow .25s;
    min-height:260px;
  }
  .featured-card:hover{
    border-color:var(--jade);
    transform:translateY(-4px);
    box-shadow:0 20px 40px -18px rgba(10,77,74,.2);
  }
  .featured-card .featured-num{
    font-family:"Cormorant Garamond",serif;font-style:italic;
    color:var(--gold);font-size:14px;letter-spacing:.1em;
  }
  .featured-card h3{
    font-size:22px;color:var(--jade-deep);font-weight:500;line-height:1.25;
  }
  .featured-card h3 small{
    display:block;font-family:"Cormorant Garamond",serif;font-style:italic;
    color:var(--gold);font-size:13px;font-weight:400;margin-top:4px;letter-spacing:.04em;
  }
  .featured-card p{
    margin:0;color:var(--ink-soft);font-size:14px;line-height:1.7;flex:1;
  }
  .featured-arrow{
    color:var(--jade-deep);font-size:13px;font-weight:500;
    display:inline-flex;align-items:center;gap:8px;
    border-top:1px solid var(--line-soft);padding-top:14px;margin-top:auto;
    transition:gap .25s, color .25s;
  }
  .featured-card:hover .featured-arrow{gap:14px;color:var(--gold)}

  .svc-divider{
    display:flex;align-items:center;gap:18px;
    margin:0 0 clamp(28px,4vw,40px);
    color:var(--muted);
    font-family:"Inter",sans-serif;font-size:11px;
    letter-spacing:.24em;text-transform:uppercase;
  }
  .svc-divider::before, .svc-divider::after{
    content:"";flex:1;height:1px;background:var(--line);
  }
  .svc-divider .en{
    font-family:"Cormorant Garamond",serif;font-style:italic;
    color:var(--gold);text-transform:none;letter-spacing:.04em;font-size:14px;
  }

  @media (max-width: 960px){
    .featured-svc{grid-template-columns:1fr}
  }


  /* ── Pricing pending notice ──────────────────────────── */
  .pricing-pending{
    padding:clamp(56px,8vw,96px) 0 clamp(72px,10vw,120px);
    background:var(--cream);
  }
  .pricing-card{
    max-width:680px;
    margin:0 auto;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    padding:clamp(40px,6vw,72px);
    text-align:center;
    box-shadow:0 30px 60px -30px rgba(10,77,74,.15);
  }
  .pricing-icon{
    width:80px;height:80px;border-radius:50%;
    background:var(--jade-soft);color:var(--jade-deep);
    display:grid;place-items:center;margin:0 auto 24px;
  }
  .pricing-card h2{
    font-size:clamp(28px,3.4vw,40px);
    color:var(--jade-deep);font-weight:500;line-height:1.2;
    margin-bottom:8px;
  }
  .pricing-card h2 .en-h{
    display:block;font-family:"Cormorant Garamond",serif;font-style:italic;
    color:var(--gold);font-size:.5em;margin-top:10px;font-weight:400;
  }
  .pricing-card p{
    margin:20px auto;max-width:42ch;
    color:var(--ink-soft);font-size:16px;line-height:1.75;
  }
  .pricing-actions{
    display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
    margin:28px 0 24px;
  }
  .pricing-fine{
    font-size:13px;color:var(--muted);
    padding-top:24px;border-top:1px solid var(--line-soft);
    margin:24px auto 0;
  }


  /* ─────────────────────────────────────────────────────────
   * MOBILE NAV + GENERAL MOBILE POLISH
   * ───────────────────────────────────────────────────────── */

  .nav-toggle{
    display:none;
    appearance:none;background:transparent;border:none;
    width:44px;height:44px;cursor:pointer;
    padding:0;
    color:var(--jade-deep);
    border-radius:8px;
    transition:background .15s;
  }
  .nav-toggle:hover{background:rgba(10,77,74,.06)}
  .nav-toggle svg{display:block;margin:0 auto;width:24px;height:24px}
  .nav-toggle .close-icon{display:none}
  .nav-toggle.open .open-icon{display:none}
  .nav-toggle.open .close-icon{display:block}

  /* Mobile-only nav (drawer) */
  @media (max-width: 960px){
    .nav-toggle{display:inline-grid;place-items:center}

    .nav-inner{
      flex-wrap:wrap;
      gap:12px;
    }
    .nav-inner > .btn-wa{order:2}
    .nav-inner > .nav-toggle{order:3}

    .nav-links{
      display:none;
      order:4;
      width:100%;
      flex-direction:column;
      align-items:stretch;
      gap:0;
      padding:8px 0 16px;
      margin-top:8px;
      border-top:1px solid var(--line-soft);
    }
    .nav-links.open{display:flex}
    .nav-links a{
      padding:14px 8px;
      font-size:16px;
      border-bottom:1px solid var(--line-soft);
    }
    .nav-links a::after{display:none}
    .nav-links a.active{
      color:var(--jade-deep);
      background:var(--jade-soft);
      margin:0 -8px;padding-left:16px;padding-right:16px;
      border-radius:6px;
      border-bottom:none;
    }
    .nav-links a:last-child{border-bottom:none}

    /* Brand: shrink slightly to make room */
    .brand-logo{height:42px}
    .brand-name{font-size:17px}
    .brand-name small{font-size:11px}

    /* Top info strip — keep tight, hide EN/繁 toggle on small */
    .topstrip-inner{font-size:11px;gap:10px;padding:8px 0}
    .topstrip-inner > div:last-child{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
    .topstrip-inner .sep{margin:0 4px}

    /* WhatsApp button in nav: trim copy on mobile */
    .nav-inner .btn-wa span,
    .nav-inner .btn-wa{font-size:13px;padding:10px 16px}

    /* Hero meta: tighter spacing for 5 items */
    .hero-meta{gap:18px}
    .hero-meta-item{min-width:0;flex:0 0 calc(50% - 9px)}
    .hero-meta-item .num{font-size:24px}
    .hero-meta-item .lbl{font-size:11px}

    /* WhatsApp floating button: don't cover content */
    .wa-fab{width:54px;height:54px;right:16px;bottom:16px}
    .wa-fab svg{width:26px;height:26px}

    /* Tweaks panel: don't dominate mobile */
    .twk-panel{width:calc(100vw - 32px);max-width:280px}
  }

  /* iOS zoom prevention: form fields must be ≥16px to stop the auto-zoom */
  @media (max-width: 600px){
    .field input,
    .field select,
    .field textarea{
      font-size:16px;
    }
    /* Hide EN / 繁 toggle on small mobile to reduce clutter */
    .topstrip-inner > div:last-child a:last-child{display:none}
    .topstrip-inner > div:last-child .sep:last-of-type{display:none}

    /* Hero meta on small mobile: 2 columns */
    .hero-meta{gap:14px}
    .hero-meta-item{flex:0 0 calc(50% - 7px)}

    /* Reduce nav padding so brand fits */
    .nav-inner{padding:14px 0}
    .brand-logo{height:38px}
    .brand-name{font-size:16px;line-height:1.1}

    /* Footer: clearer touch targets */
    .foot-grid a, .foot-grid p{padding:6px 0}

    /* Page hero (sub-pages): tighter */
    .page-hero{padding:36px 0 24px}
    .page-hero h1{font-size:32px}

    /* Booking grid info-block: less crammed */
    .info-block .big{font-size:24px}

    /* Hero badge: smaller on phone */
    .hero-badge{width:88px;height:88px;top:8px;right:8px}
    .hero-badge b{font-size:18px}
    .hero-badge span{font-size:9px;letter-spacing:.1em}
  }

  /* Tiny phones (iPhone SE etc) */
  @media (max-width: 380px){
    .nav-inner .btn-wa{padding:8px 12px;font-size:12px}
    .nav-inner .btn-wa svg{width:14px;height:14px}
    .hero-meta-item{flex:0 0 100%}
  }


  /* ─────────────────────────────────────────────────────────
   * MOBILE FIX PACK 2 — addresses squished service grid,
   *  brand-name truncation, and other small-screen issues
   * ───────────────────────────────────────────────────────── */

  /* Force services / featured grids to single column much earlier */
  @media (max-width: 820px){
    .svc-grid{grid-template-columns:repeat(2,1fr) !important}
    .featured-svc{grid-template-columns:1fr !important}
    .team-grid{grid-template-columns:1fr !important}
  }
  @media (max-width: 680px){
    .svc-grid{grid-template-columns:1fr !important}
    /* Service card that spans 2 columns should fall back to 1 */
    .svc[style*="grid-column:span 2"],
    .svc[style*="grid-column: span 2"]{grid-column:auto !important}
    .svc[style*="grid-column:span 2"] > div{grid-template-columns:1fr !important;gap:14px !important}
  }

  /* Brand-name was wrapping mid-character on small screens */
  @media (max-width: 600px){
    .brand-name{white-space:nowrap;font-size:15px;line-height:1.15}
    .brand-name small{font-size:10px;letter-spacing:.06em}
    .brand-logo{height:36px}
    .nav-inner{padding:12px 0;gap:8px}
    .nav-inner .btn-wa{padding:9px 14px}
  }
  @media (max-width: 420px){
    .brand-name small{display:none}
    .brand-logo{height:34px}
    .nav-inner .btn-wa{padding:8px 12px;font-size:11px}
  }

  /* Reduce content padding inside service card on very small screens
     (was causing one-character-per-line wrap) */
  @media (max-width: 600px){
    .svc{padding:24px 22px;min-height:auto}
    .svc h3{font-size:20px;line-height:1.3}
    .svc h3 small{font-size:12px}
    .svc p{font-size:14px}
    .svc-ico{width:42px;height:42px}
    .svc-ico svg{width:22px;height:22px}
  }

  /* Page hero / breadcrumb tighter on phone */
  @media (max-width: 600px){
    .page-hero{padding:32px 0 22px}
    .page-hero h1{font-size:28px}
    .breadcrumb{font-size:10px;flex-wrap:wrap}
  }

  /* Hero section: smaller h1 + tighter spacing on small phones */
  @media (max-width: 600px){
    .hero{padding:36px 0 56px}
    .hero h1{font-size:34px;line-height:1.15}
    .hero h1 .en-h{font-size:.42em;margin-top:10px}
    .hero-sub{font-size:15px;margin-top:20px}
    .hero-cta{flex-direction:column;align-items:stretch;margin-top:24px}
    .hero-cta .btn{justify-content:center;width:100%}
  }

  /* Section headings: smaller on phone */
  @media (max-width: 600px){
    .sect-head{margin-bottom:32px}
    .sect-head h2{font-size:26px;line-height:1.2}
    .sect-head h2 .en-h{font-size:.55em;margin-top:8px}
    .sect-head p{font-size:14px;margin-top:14px}
  }

  /* Booking section: full-width form card */
  @media (max-width: 600px){
    .booking-grid{gap:32px}
    .form-card{padding:24px 18px}
    .form-card h3{font-size:20px}
    .hours-row{font-size:13px}
  }

  /* Footer: tighter columns and font */
  @media (max-width: 600px){
    .foot-grid{gap:24px;padding-bottom:28px}
    .foot-grid h5{margin-bottom:10px}
    .foot-grid a, .foot-grid p{font-size:13px;padding:5px 0}
    .foot-bottom{font-size:11px}
  }


  /* ─────────────────────────────────────────────────────────
   * AGGRESSIVE MOBILE FIX — service cards in 2 narrow columns
   * was causing "one character per line" vertical text wrap.
   * Force single column at any tablet/phone width.
   * ───────────────────────────────────────────────────────── */
  @media (max-width: 900px){
    .svc-grid{
      grid-template-columns:1fr !important;
      gap:1px !important;
    }
    .svc{
      padding:28px 24px !important;
      min-height:auto !important;
    }
    .svc h3{
      font-size:22px !important;
      line-height:1.35 !important;
      writing-mode:horizontal-tb !important;
    }
    .svc h3 small{font-size:13px}
    .svc p{font-size:14px;line-height:1.7}
    /* Service card that spans 2 cols on desktop reverts cleanly */
    .svc[style*="grid-column"]{grid-column:auto !important}
    .svc > div[style*="grid-template-columns"]{
      grid-template-columns:auto 1fr !important;
      gap:18px !important;
    }
  }


  /* ── Featured-card icon ──────────────────────────────── */
  .featured-ico{
    width:52px;height:52px;border-radius:14px;
    background:var(--jade-soft);color:var(--jade-deep);
    display:grid;place-items:center;
    margin-bottom:4px;
    transition:background .25s, color .25s;
  }
  .featured-card:hover .featured-ico{
    background:var(--jade);color:#fff;
  }

  /* ─────────────────────────────────────────────────────────
   * MOBILE FONT BUMP — increase readable size on phones
   * ───────────────────────────────────────────────────────── */
  @media (max-width: 600px){
    /* Body base */
    body{font-size:18px;line-height:1.8}

    /* Service / featured card content */
    .svc p, .featured-card p{font-size:17px;line-height:1.8}
    .svc h3{font-size:25px !important}
    .svc h3 small{font-size:15px !important}
    .featured-card h3{font-size:25px}
    .featured-card h3 small{font-size:15px}
    .featured-arrow{font-size:15.5px}
    .svc-link{font-size:15.5px}

    /* Hero body text */
    .hero-sub{font-size:18px !important;line-height:1.85}
    .hero h1{font-size:38px !important;line-height:1.18}
    .hero-meta-item .num{font-size:28px !important}
    .hero-meta-item .lbl{font-size:14px !important}

    /* Section heading + lead text */
    .sect-head h2{font-size:30px !important;line-height:1.25}
    .sect-head h2 .en-h{font-size:.58em !important}
    .sect-head p{font-size:17px !important}

    /* About / generic prose */
    .about-prose p{font-size:17px;line-height:1.85}
    .about-prose p.lead{font-size:20px !important;line-height:1.55}
    .pillar h4{font-size:17px}
    .pillar p{font-size:15px;line-height:1.7}

    /* FAQ */
    .faq-item summary{font-size:18px !important}
    .faq-ans{font-size:17px !important;line-height:1.85}

    /* Team / doctor cards */
    .doctor h3{font-size:23px}
    .doctor h3 small{font-size:14.5px}
    .doctor li{font-size:15.5px;line-height:1.7}
    .doctor-role{font-size:13px}

    /* Page-hero on sub-pages */
    .page-hero h1{font-size:32px !important;line-height:1.2}
    .page-hero .lead{font-size:17.5px;line-height:1.8}

    /* Landing-content (implants/braces/endodontics) */
    .landing-content .content-section h2{font-size:26px !important}
    .landing-content .content-section p{font-size:17px !important;line-height:1.85}
    .feature-list li{font-size:16px}
    .tech-card h3{font-size:19px}
    .tech-card p{font-size:15.5px;line-height:1.7}

    /* Booking */
    .form-card h3{font-size:23px}
    .form-card .hint{font-size:15px}
    .field label{font-size:14px}
    .info-block h4{font-size:13.5px;letter-spacing:.22em}
    .info-block p, .info-block a{font-size:17px;line-height:1.75}
    .info-block .big{font-size:27px}
    .hours-row{font-size:15.5px}

    /* Trust strip */
    .trust-item h4{font-size:17.5px}
    .trust-item p{font-size:15.5px;line-height:1.65}

    /* Footer */
    .foot-grid h5{font-size:12px}
    .foot-grid a, .foot-grid p{font-size:15.5px;line-height:1.75}
    .foot-bottom{font-size:13px}

    /* Top strip */
    .topstrip{font-size:12.5px !important}

    /* Buttons: bigger for finger taps */
    .btn{font-size:16px;padding:14px 24px}
  }

  @media (max-width: 420px){
    body{font-size:17.5px}
    .hero h1{font-size:34px !important}
    .sect-head h2{font-size:27px !important}
    .page-hero h1{font-size:29px !important}
  }


  /* ── Price list ──────────────────────────────────────── */
  .pricelist{padding:clamp(48px,7vw,80px) 0 clamp(64px,9vw,110px);background:var(--cream)}
  .pricelist-updated{
    text-align:center;color:var(--muted);font-size:13px;
    letter-spacing:.04em;margin:0 0 clamp(32px,5vw,48px);
  }
  .price-cols{
    display:grid;grid-template-columns:1fr 1fr;
    gap:clamp(32px,5vw,64px);
    max-width:1040px;margin:0 auto;
  }
  .price-group{margin-bottom:32px}
  .price-group:last-child{margin-bottom:0}
  .price-cat{
    display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    padding-bottom:10px;margin-bottom:6px;
    border-bottom:2px solid var(--jade);
  }
  .price-cat > span:first-child{
    font-family:"Noto Serif TC",serif;font-weight:600;
    font-size:19px;color:var(--jade-deep);
  }
  .price-cat .en{
    font-family:"Cormorant Garamond",serif;font-style:italic;
    color:var(--gold);font-size:14px;letter-spacing:.03em;
  }
  .price-row{
    display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
    padding:11px 0;
    border-bottom:1px solid var(--line-soft);
  }
  .price-row:last-child{border-bottom:none}
  .price-item{
    color:var(--ink);font-size:15px;line-height:1.45;
    display:flex;flex-direction:column;gap:2px;
  }
  .price-item small{
    color:var(--muted);font-size:12px;font-style:italic;
    font-family:"Inter",sans-serif;
  }
  .price-fee{
    color:var(--jade-deep);font-weight:600;font-size:15px;
    white-space:nowrap;font-variant-numeric:tabular-nums;
    flex-shrink:0;text-align:right;
  }
  .price-remarks{
    max-width:1040px;margin:clamp(36px,5vw,52px) auto 0;
    padding:24px 28px;
    background:var(--paper);
    border:1px solid var(--line-soft);
    border-radius:var(--r-md);
  }
  .price-remarks p{
    margin:0 0 8px;color:var(--ink-soft);
    font-size:13px;line-height:1.6;
  }
  .price-remarks p:last-child{margin-bottom:0}
  .price-remarks strong{color:var(--gold)}

  @media (max-width: 760px){
    .price-cols{grid-template-columns:1fr;gap:0}
    .price-col + .price-col .price-group:first-child{margin-top:32px}
  }
  @media (max-width: 600px){
    .price-cat > span:first-child{font-size:18px}
    .price-item{font-size:15px}
    .price-fee{font-size:15px}
  }


  /* ── Case studies (before & after) ───────────────────── */
  .cases{padding:clamp(40px,6vw,72px) 0 clamp(64px,9vw,110px);background:var(--cream)}
  .cases-intro{
    max-width:720px;margin:0 auto clamp(40px,6vw,64px);text-align:center;
  }
  .cases-intro p{color:var(--ink-soft);font-size:16px;line-height:1.8;margin:0}

  /* Treatment-type filter chips (visual only for now) */
  .case-filters{
    display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
    margin-bottom:clamp(36px,5vw,56px);
  }
  .case-chip{
    font-family:"Inter","Noto Sans TC",sans-serif;font-size:13px;
    padding:9px 18px;border-radius:999px;
    border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);
    cursor:default;letter-spacing:.02em;
  }
  .case-chip.active{background:var(--jade-deep);color:#fbf7ee;border-color:var(--jade-deep)}

  .case-list{display:grid;gap:clamp(28px,4vw,44px);max-width:1040px;margin:0 auto}

  .case-card{
    background:var(--paper);
    border:1px solid var(--line-soft);
    border-radius:var(--r-lg);
    overflow:hidden;
    box-shadow:0 18px 50px -34px rgba(10,77,74,.4);
  }
  .case-head{
    display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
    padding:24px clamp(24px,3vw,34px) 18px;
    flex-wrap:wrap;
  }
  .case-title{font-family:"Noto Serif TC",serif;font-weight:600;font-size:21px;color:var(--jade-deep);line-height:1.3;margin:0}
  .case-title small{display:block;font-family:"Cormorant Garamond",serif;font-style:italic;color:var(--gold);font-size:14px;font-weight:400;margin-top:3px}
  .case-tag{
    flex-shrink:0;font-family:"Inter",sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    background:var(--jade-soft);color:var(--jade-deep);
    padding:7px 14px;border-radius:999px;font-weight:600;
  }

  /* Before / After image pair */
  .ba-pair{
    display:grid;grid-template-columns:1fr 1fr;gap:2px;
    background:var(--line);
  }
  .ba-slot{
    position:relative;aspect-ratio:4/3;
    background:
      repeating-linear-gradient(45deg, #eef4f2 0 14px, #e6efec 14px 28px);
    display:grid;place-items:center;
    overflow:hidden;
  }
  .ba-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .ba-slot .ba-ph{
    text-align:center;color:var(--muted);padding:20px;
    font-family:"Inter","Noto Sans TC",sans-serif;
  }
  .ba-slot .ba-ph svg{width:30px;height:30px;color:var(--jade);opacity:.6;margin-bottom:8px}
  .ba-slot .ba-ph b{display:block;font-size:13px;color:var(--ink-soft);font-weight:500}
  .ba-slot .ba-ph span{display:block;font-size:11px;margin-top:3px;opacity:.8}
  .ba-label{
    position:absolute;top:12px;left:12px;z-index:2;
    font-family:"Inter",sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
    background:rgba(15,32,27,.78);color:#fbf7ee;
    padding:5px 12px;border-radius:999px;font-weight:600;
    backdrop-filter:blur(6px);
  }
  .ba-label.after{background:var(--jade)}

  .case-body{padding:18px clamp(24px,3vw,34px) 26px}
  .case-body p{margin:0;color:var(--ink-soft);font-size:14px;line-height:1.75}
  .case-meta{
    display:flex;flex-wrap:wrap;gap:18px;margin-top:16px;padding-top:16px;
    border-top:1px solid var(--line-soft);
  }
  .case-meta div{font-size:12px;color:var(--muted)}
  .case-meta b{display:block;font-size:13px;color:var(--jade-deep);font-weight:600;margin-top:2px;font-family:"Noto Sans TC",sans-serif}

  .cases-disclaimer{
    max-width:1040px;margin:clamp(36px,5vw,52px) auto 0;
    padding:20px 24px;border-radius:var(--r-md);
    background:var(--paper);border:1px solid var(--line-soft);
    font-size:12px;color:var(--muted);line-height:1.65;text-align:center;
  }

  @media (max-width: 600px){
    .ba-pair{grid-template-columns:1fr}
    .ba-slot{aspect-ratio:3/2}
    .case-head{padding:20px 20px 14px}
    .case-body{padding:14px 20px 22px}
  }


  /* ── Orthodontic clinical records (detailed case) ─────── */
  .records{display:grid;gap:clamp(22px,3vw,32px);margin-top:6px}
  .rec-group{}
  .rec-group-title{
    display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
    font-family:"Noto Serif TC",serif;font-weight:600;font-size:16px;color:var(--jade-deep);
    margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid var(--line);
  }
  .rec-group-title .en{font-family:"Cormorant Garamond",serif;font-style:italic;color:var(--gold);font-size:13px;font-weight:400}
  .rec-rows{display:grid;gap:16px}
  .rec-row{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center}
  .rec-name{font-size:13px;color:var(--ink-soft);font-weight:500;line-height:1.4}
  .rec-name small{display:block;color:var(--muted);font-size:11px;font-style:italic;font-family:"Inter",sans-serif;margin-top:2px}
  .rec-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .rec-slot{
    position:relative;border-radius:var(--r-sm);overflow:hidden;
    background:repeating-linear-gradient(45deg,#eef4f2 0 12px,#e6efec 12px 24px);
    display:grid;place-items:center;border:1px solid var(--line-soft);
  }
  .rec-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .rec-slot .rec-ph{text-align:center;color:var(--muted);padding:10px}
  .rec-slot .rec-ph svg{width:22px;height:22px;color:var(--jade);opacity:.55;margin-bottom:4px}
  .rec-slot .rec-ph span{display:block;font-size:10px;line-height:1.4;font-family:"Inter",sans-serif}
  .rec-stage{
    position:absolute;top:7px;left:7px;z-index:2;
    font-family:"Inter",sans-serif;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
    padding:3px 8px;border-radius:999px;
    background:rgba(15,32,27,.75);color:#fbf7ee;backdrop-filter:blur(4px);
  }
  .rec-stage.post{background:var(--jade)}
  /* aspect ratios */
  .rec-slot.portrait{aspect-ratio:3/4}
  .rec-slot.intra{aspect-ratio:4/3}
  .rec-slot.opg{aspect-ratio:2/1}
  .rec-slot.ceph{aspect-ratio:1/1}

  @media (max-width: 600px){
    .rec-row{grid-template-columns:1fr;gap:8px}
    .rec-name{font-weight:600}
  }


  /* ── Orthodontic composite (Initial | Final records) ─── */
  .ortho-composite{
    display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.5vw,28px);
    margin-top:6px;
  }
  .ortho-stage{}
  .ortho-stage-head{
    display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;
    margin-bottom:12px;
  }
  .ortho-stage-head .lbl{
    font-family:"Inter",sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
    color:#fbf7ee;background:var(--jade-deep);padding:6px 14px;border-radius:999px;
  }
  .ortho-stage.final .ortho-stage-head .lbl{background:var(--jade)}
  .ortho-stage-head .date{font-size:12px;color:var(--muted);font-style:italic;font-family:"Cormorant Garamond",serif}
  /* 3x3 grid */
  .ortho-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
  .o-slot{
    position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:5px;
    background:repeating-linear-gradient(45deg,#eef4f2 0 10px,#e6efec 10px 20px);
    display:grid;place-items:center;border:1px solid var(--line-soft);
  }
  .o-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .o-slot .o-ph{text-align:center;color:var(--muted);padding:4px;line-height:1.2}
  .o-slot .o-ph svg{width:16px;height:16px;color:var(--jade);opacity:.5;display:block;margin:0 auto 3px}
  .o-slot .o-ph span{display:block;font-size:8.5px;font-family:"Inter",sans-serif;word-break:break-all}
  .o-center{
    background:var(--cream);border-style:dashed;
    display:grid;place-items:center;text-align:center;padding:6px;
  }
  .o-center b{font-family:"Noto Serif TC",serif;font-size:12px;color:var(--jade-deep);font-weight:600;line-height:1.3}
  .o-center span{display:block;font-size:9px;color:var(--muted);margin-top:3px;font-family:"Inter",sans-serif}

  /* radiograph row under composite */
  .ortho-rads{
    display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
    margin-top:clamp(14px,2vw,20px);
  }
  .ortho-rads .rad-slot{
    position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:6px;
    background:repeating-linear-gradient(45deg,#eef4f2 0 10px,#e6efec 10px 20px);
    display:grid;place-items:center;border:1px solid var(--line-soft);
  }
  .ortho-rads .rad-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .ortho-rads .rad-ph{text-align:center;color:var(--muted);padding:6px}
  .ortho-rads .rad-ph svg{width:18px;height:18px;color:var(--jade);opacity:.5;display:block;margin:0 auto 4px}
  .ortho-rads .rad-ph b{display:block;font-size:10px;color:var(--ink-soft);font-weight:500}
  .ortho-rads .rad-ph span{display:block;font-size:8.5px;margin-top:2px;font-family:"Inter",sans-serif;word-break:break-all}
  .rad-stage{position:absolute;top:6px;left:6px;z-index:2;font-family:"Inter",sans-serif;font-size:9px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding:3px 7px;border-radius:999px;background:rgba(15,32,27,.75);color:#fbf7ee}
  .rad-stage.post{background:var(--jade)}

  @media (max-width: 720px){
    .ortho-composite{grid-template-columns:1fr;gap:24px}
    .ortho-rads{grid-template-columns:1fr 1fr}
  }


  /* ── Single composite-image case slot ────────────────── */
  .case-photo{position:relative;background:var(--paper)}
  .case-photo img{width:100%;height:auto;display:block}
  .case-photo-ph{
    aspect-ratio:16/7;display:none;align-items:center;justify-content:center;flex-direction:column;
    text-align:center;color:var(--muted);padding:24px;
    background:repeating-linear-gradient(45deg,#eef4f2 0 14px,#e6efec 14px 28px);
  }
  .case-photo-ph svg{width:34px;height:34px;color:var(--jade);opacity:.55;margin-bottom:10px}
  .case-photo-ph b{display:block;font-size:14px;color:var(--ink-soft);font-weight:500}
  .case-photo-ph span{display:block;font-size:11px;margin-top:4px;font-family:"Inter",sans-serif}


  /* ── Multi-composite row (orthodontic case) ──────────── */
  .case-photos3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:var(--paper)}
  .case-photos3 .cp{position:relative;background:var(--paper)}
  .case-photos3 .cp img{width:100%;height:auto;display:block}
  .case-photos3 .cp-ph{aspect-ratio:1/1;display:none;align-items:center;justify-content:center;flex-direction:column;
    text-align:center;color:var(--muted);padding:14px;
    background:repeating-linear-gradient(45deg,#eef4f2 0 12px,#e6efec 12px 24px)}
  .case-photos3 .cp-ph svg{width:26px;height:26px;color:var(--jade);opacity:.55;margin-bottom:6px}
  .case-photos3 .cp-ph span{font-size:10px;font-family:"Inter",sans-serif;word-break:break-all}
  @media(max-width:700px){.case-photos3{grid-template-columns:1fr}}