/* ==========================================================================
   DrShin Dental — v2
   Ivory · charcoal · warm gold. Editorial, restrained, motion-driven.
   ========================================================================== */

:root{
  --ivory:#faf8f4;
  --ivory-2:#f3efe7;
  --paper:#ffffff;
  --ink:#14110e;
  --ink-2:#3a352e;
  --muted:#6f665b;
  --gold:#a8874f;
  --gold-deep:#8a6c39;
  --gold-soft:#f4ecdc;
  --line:#e6dfd3;
  --line-2:#d8cfbe;
  --char:#1b1713;
  --char-2:#26211b;
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-weight:400;font-size:16px;line-height:1.7;
  background:var(--ivory);color:var(--ink-2);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;line-height:1.14;color:var(--ink);letter-spacing:-.01em}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 2rem}
.narrow{max-width:760px;margin:0 auto;padding:0 2rem}

/* ---------- typographic scale ---------- */
.display{font-size:clamp(2.6rem,6vw,4.6rem);font-weight:400;line-height:1.05}
.h2{font-size:clamp(1.9rem,3.6vw,3rem)}
.h3{font-size:clamp(1.35rem,2vw,1.7rem)}
.eyebrow{
  font-family:'Inter',sans-serif;font-size:.68rem;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold-deep);
  display:block;margin-bottom:1.4rem
}
.eyebrow.on-dark{color:var(--gold)}
.lede{font-size:1.06rem;color:var(--muted);font-weight:300;line-height:1.85}
.rule{width:38px;height:1px;background:var(--gold);margin:1.5rem 0}
.rule.center{margin:1.5rem auto}

/* ---------- header ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:200;transition:background .45s var(--ease),border-color .45s var(--ease),padding .45s var(--ease);border-bottom:1px solid transparent;background:transparent}
.hdr.solid{background:rgba(250,248,244,.94);backdrop-filter:saturate(180%) blur(14px);border-bottom-color:var(--line)}
.hdr-in{max-width:var(--maxw);margin:0 auto;padding:1.5rem 2rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2rem;transition:padding .45s var(--ease)}
.hdr.solid .hdr-in{padding:1rem 2rem}
.brand{text-decoration:none;display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;justify-self:start}
.brand-mark{width:30px;height:30px;flex-shrink:0}
.brand-logo{height:26px;width:auto;display:block;transition:height .45s var(--ease)}
.hdr.solid .brand-logo{height:23px}
.brand-sub{display:block;margin-left:.1rem;font-family:'Inter',sans-serif;font-size:.48rem;font-weight:400;letter-spacing:.24em;text-indent:.24em;text-transform:uppercase;color:var(--muted);margin-top:.62rem}
.nav{display:flex;align-items:center;gap:2.2rem;justify-self:center}
.hdr-right{display:flex;align-items:center;gap:1rem;justify-self:end}
.nav a{text-decoration:none;font-size:.88rem;font-weight:400;letter-spacing:.015em;color:var(--ink-2);position:relative;padding:.3rem 0;transition:color .3s}
.nav a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);transition:width .4s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{width:100%}
.dd{position:relative}
.dd-panel{position:absolute;top:calc(100% + .9rem);left:50%;transform:translateX(-50%) translateY(-6px);background:var(--paper);border:1px solid var(--line);padding:.5rem;min-width:230px;opacity:0;visibility:hidden;transition:all .32s var(--ease);box-shadow:0 24px 60px rgba(20,17,14,.09)}
.dd:hover .dd-panel,.dd:focus-within .dd-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dd-panel a{display:block;padding:.7rem .95rem;font-size:.85rem;white-space:nowrap;transition:background .25s,padding-left .25s}
.dd-panel a::after{display:none}
.dd-panel a:hover{background:var(--ivory-2);padding-left:1.25rem}
.lang{position:relative;flex:none}
.lang-btn{display:inline-flex;align-items:center;gap:.44rem;background:transparent;
  border:1px solid var(--line-2);border-radius:999px;padding:.44rem .82rem;font-family:'Inter',sans-serif;
  font-size:.6rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  cursor:pointer;white-space:nowrap;transition:border-color .3s,background .3s}
.lang-btn:hover{border-color:var(--ink)}
.lang-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.lang-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.35;
  stroke-linecap:round;flex:none}
.lang-menu{position:absolute;top:calc(100% + .6rem);right:0;min-width:11.5rem;background:#fff;
  border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 44px rgba(20,17,14,.15);
  padding:.42rem;z-index:300;opacity:0;visibility:hidden;transform:translateY(-5px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}
.lang.open .lang-menu{opacity:1;visibility:visible;transform:none}
.lang-menu a{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;
  padding:.68rem .82rem;border-radius:7px;font-family:'Inter',sans-serif;font-size:.84rem;
  font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink);text-decoration:none;
  transition:background .2s}
.lang-menu a:hover{background:var(--cream)}
.lang-menu a:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.lang-menu .tick{width:15px;height:15px;stroke:var(--gold-deep);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;opacity:0;flex:none}
.lang-menu a.on .tick{opacity:1}
@media(max-width:1080px){.hdr-right{gap:.7rem}.lang-btn{padding:.4rem .62rem;font-size:.56rem;letter-spacing:.1em}}
@media(max-width:620px){.hdr-right{gap:.45rem}.lang-btn{padding:.36rem .5rem;gap:.32rem}.lang-btn svg{width:12px;height:12px}}
.hdr-cta{font-family:'Inter',sans-serif;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;background:var(--ink);color:var(--ivory);padding:.85rem 1.6rem;text-decoration:none;transition:background .35s var(--ease)}
.hdr-cta:hover{background:var(--gold-deep)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:.4rem;width:34px}
.burger span{display:block;height:1px;background:var(--ink);margin:6px 0;transition:transform .4s var(--ease),opacity .3s}
.burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile drawer */
.drawer{position:fixed;inset:0;background:var(--ivory);z-index:190;transform:translateX(100%);transition:transform .55s var(--ease);display:flex;flex-direction:column;justify-content:center;padding:5rem 2.4rem 3rem;overflow-y:auto}
.drawer.open{transform:translateX(0)}
.drawer a{display:block;text-decoration:none;font-family:'Cormorant Garamond',Georgia,serif;font-size:2rem;color:var(--ink);padding:.55rem 0;border-bottom:1px solid var(--line);opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.drawer.open a{opacity:1;transform:none}
.drawer a.sub{font-size:1.15rem;padding-left:1.2rem;color:var(--muted)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.7rem;font-family:'Inter',sans-serif;font-size:.76rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;text-decoration:none;padding:1.1rem 2.1rem;border:1px solid transparent;cursor:pointer;transition:all .4s var(--ease);position:relative;overflow:hidden}
.btn-dark{background:var(--ink);color:var(--ivory)}
.btn-dark:hover{background:var(--gold-deep)}
.btn-line{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-line:hover{background:var(--ink);color:var(--ivory)}
.btn-light{background:var(--ivory);color:var(--ink)}
.btn-light:hover{background:var(--gold-soft)}
.btn-gold{background:var(--gold-deep);color:#fff}
.btn-gold:hover{background:var(--ink)}
.btn .ar{transition:transform .4s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}

/* ---------- hero ---------- */
.hero{padding:13rem 0 6rem;position:relative;background:linear-gradient(180deg,var(--ivory-2) 0%,var(--ivory) 62%)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:4.5rem;align-items:center}
.hero .display em{font-style:italic;color:var(--gold-deep)}
.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.4rem}
.hero-center{text-align:center;max-width:900px;margin:0 auto}
.hero-center .eyebrow,.hero-center .rule{margin-left:auto;margin-right:auto}
.hero-center .hero-ctas{justify-content:center}
.motto-line{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:clamp(1.1rem,2vw,1.45rem);color:var(--gold-deep);margin-top:1.3rem}

/* stat card */
.stat-card{background:var(--paper);border:1px solid var(--line);padding:2.8rem 2.2rem;text-align:center}
.stat-num{font-family:'Cormorant Garamond',Georgia,serif;font-size:4.6rem;font-weight:400;color:var(--ink);line-height:1}
.stat-num sup{font-size:1.5rem;vertical-align:super;color:var(--gold)}
.stat-lbl{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-top:.7rem}
.stat-note{font-size:.85rem;color:var(--muted);margin-top:1.3rem;font-weight:300;line-height:1.7}
.stat-note a{color:var(--gold-deep);text-decoration:none;border-bottom:1px solid var(--line-2)}

/* ---------- sections ---------- */
section{padding:6.5rem 0}
.sec-sm{padding:4.5rem 0}
.on-paper{background:var(--paper)}
.on-ivory2{background:var(--ivory-2)}
.on-dark{background:var(--char);color:#cfc7bb}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:#f5f1ea}
.sec-head{max-width:680px;margin-bottom:3.6rem}
.sec-head.center{text-align:center;margin-left:auto;margin-right:auto}
.sec-head.center .rule{margin-left:auto;margin-right:auto}
.sec-head p{color:var(--muted);font-weight:300;margin-top:1.2rem}
.on-dark .sec-head p{color:#a89e91}

/* ---------- index gateway ---------- */
.gate{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
.gate a{background:var(--paper);padding:4.5rem 3rem;text-decoration:none;display:flex;flex-direction:column;align-items:flex-start;position:relative;overflow:hidden;transition:background .5s var(--ease)}
.gate a::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold);transform:scaleY(0);transform-origin:top;transition:transform .55s var(--ease)}
.gate a:hover{background:var(--ivory-2)}
.gate a:hover::before{transform:scaleY(1)}
.gate .n{display:block;font-family:'Inter',sans-serif;font-size:.68rem;font-weight:500;color:var(--gold);letter-spacing:.22em;text-transform:uppercase}
.gate h3{font-size:1.9rem;margin:1.1rem 0 1rem}
.gate p{color:var(--muted);font-weight:300;font-size:.95rem;max-width:34ch}
.gate .go{display:inline-flex;align-items:center;gap:.6rem;margin-top:auto;padding-top:1.8rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.gate .go .ar{transition:transform .4s var(--ease)}
.gate a:hover .go .ar{transform:translateX(6px)}

/* ---------- marks / pillars ---------- */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(255,255,255,.13)}
.pillar{padding:3rem 1.8rem;border-right:1px solid rgba(255,255,255,.13);text-align:center}
.pillar:last-child{border-right:0}
.pillar svg{margin:0 auto 1.2rem;stroke:var(--gold);fill:none;stroke-width:1.1}
.pillar b{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.28rem;font-weight:500;color:#f5f1ea;margin-bottom:.45rem}
.pillar span{font-size:.8rem;color:#a89e91;font-weight:300}
/* pillars() is built for a row of any length — the 4-column track above only
   reads as centered when all 4 slots are filled. The Insurance page passes
   just 2, so pillars() tags the wrapper with a count class and this keeps a
   short row centered in the section instead of pinned to the left half. */
.pillars.pillars-2{grid-template-columns:repeat(2,1fr);max-width:760px;margin:0 auto}

/* ---------- service cards ---------- */
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
.svc-grid.c3{grid-template-columns:repeat(3,1fr)}
.svc{background:var(--paper);padding:3.2rem 2.6rem;display:flex;flex-direction:column;transition:background .5s var(--ease)}
.svc:hover{background:var(--ivory-2)}
.svc .idx{font-family:'Cormorant Garamond',Georgia,serif;font-size:.85rem;color:var(--gold);letter-spacing:.2em;margin-bottom:1.4rem}
.svc h3{font-size:1.5rem;margin-bottom:1rem}
.svc>p{color:var(--muted);font-weight:300;font-size:.95rem;margin-bottom:1.6rem}
.svc ul{list-style:none;margin-bottom:1.8rem;border-top:1px solid var(--line);padding-top:1.2rem}
.svc li{position:relative;padding:.5rem 0 .5rem 1.4rem;font-size:.9rem;color:var(--muted);font-weight:300}
.svc li::before{content:'';position:absolute;left:0;top:1.05rem;width:5px;height:5px;background:var(--gold);border-radius:50%}
/* Opening hours inside a practice card. Two aligned columns rather than a
   sentence, because nobody reads opening hours — they look for their own day
   and the time beside it. The gap is tighter than the standalone .hrs block,
   which has a whole section's width to spend. */
.svc .hrs{grid-template-columns:auto 1fr;gap:.45rem 1.2rem;max-width:none;
  font-size:.92rem;margin-bottom:1.6rem}
.svc .hrs b{font-weight:300;color:var(--muted);white-space:nowrap}
.svc .hrs span{color:var(--muted);font-weight:300}
@media(max-width:1080px){.svc .hrs{grid-template-columns:1fr;gap:.1rem 0}
  .svc .hrs b{margin-top:.7rem}.svc .hrs b:first-child{margin-top:0}}
.price{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.15rem 0;margin-bottom:1.8rem;font-size:.9rem;color:var(--ink-2);font-weight:300}
.price b{font-weight:500;color:var(--ink);letter-spacing:.01em}
.svc .btn,.svc .more{align-self:flex-start;margin-top:auto}
.svc .more{text-decoration:none;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);display:inline-flex;gap:.55rem;align-items:center;border-bottom:1px solid var(--line-2);padding-bottom:.35rem;transition:border-color .35s}
.svc .more:hover{border-color:var(--gold)}
.svc .more .ar{transition:transform .4s var(--ease)}
.svc .more:hover .ar{transform:translateX(5px)}

/* ---------- warranty ---------- */
.panel,.warranty{background:var(--paper);border:1px solid var(--line);border-top:2px solid var(--gold);padding:3.4rem 3.2rem;max-width:840px;margin:0 auto}
.panel h3,.warranty h3{font-size:1.6rem;margin-bottom:1.4rem}
.panel p,.warranty p{color:var(--muted);font-weight:300;margin-bottom:1.2rem}
.warranty strong{color:var(--ink);font-weight:500}
.fineprint{font-size:.78rem;line-height:1.75;color:var(--muted);border-top:1px solid var(--line);padding-top:1.4rem;margin-top:2rem;font-weight:300}

/* ---------- gallery ---------- */
.ba-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem}
.ba-grid.two{grid-template-columns:repeat(2,1fr)}
.ba{background:var(--paper);border:1px solid var(--line)}
.ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.ba-shot{position:relative;overflow:hidden;background:var(--ivory-2);cursor:zoom-in}
.ba-shot img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.1s var(--ease)}
.ba-shot:hover img{transform:scale(1.06)}
/* A case photographed wider than the 4:5 window the gallery normally crops to.
   The card takes the photograph's own shape instead, because a 4:5 centre crop
   would cut the ends off the arch, which is the one thing a full-arch before
   and after has to show. */
.ba-shot.fit img{aspect-ratio:6/5}
.ba-shot .tag{position:absolute;top:0;left:0;background:rgba(27,23,19,.86);color:#f5f1ea;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;padding:.42rem .8rem;z-index:2}
.ba-solo{overflow:hidden;cursor:zoom-in;background:var(--ivory-2)}
.ba-solo img{width:100%;max-height:460px;object-fit:contain;transition:transform 1.1s var(--ease)}
.ba-solo:hover img{transform:scale(1.03)}
/* A single frame holding the before shot above the after shot. The labels have
   to hang off the picture rather than the box, because a square photograph in a
   wide column is letterboxed — so .ba-frame shrinks to the rendered image and
   the tags are positioned against that. */
.ba-solo.split{display:flex;justify-content:center}
.ba-frame{position:relative;max-width:100%}
.ba-solo.split img{display:block;width:auto;max-width:100%;max-height:460px}
.ba-frame .tag{position:absolute;left:0;z-index:2;background:rgba(27,23,19,.86);
  color:#f5f1ea;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.42rem .8rem}
.ba-frame .t-before{top:0}
.ba-frame .t-after{top:var(--ba-split,50%)}
.ba-tags{display:flex;gap:.4rem;padding:.9rem 1.4rem 0}
.ba-tags span{font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);border:1px solid var(--line-2);padding:.32rem .7rem}
.ba figcaption{padding:1.5rem 1.6rem 1.7rem;font-size:.88rem;color:var(--muted);font-weight:300;line-height:1.75}
.ba figcaption b{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.18rem;font-weight:500;color:var(--ink);margin-bottom:.5rem;letter-spacing:.005em}
.consent{text-align:center;font-size:.78rem;color:var(--muted);font-weight:300;margin-top:2.6rem;font-style:italic}

/* lightbox */
.lb{position:fixed;inset:0;background:rgba(20,17,14,.96);z-index:900;display:flex;align-items:center;justify-content:center;padding:3rem;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s}
.lb.open{opacity:1;visibility:visible}
.lb img{max-width:92vw;max-height:88vh;object-fit:contain;transform:scale(.96);transition:transform .5s var(--ease)}
.lb.open img{transform:scale(1)}
.lb-x{position:absolute;top:2rem;right:2.4rem;z-index:2;background:none;border:0;color:#f5f1ea;font-size:2rem;cursor:pointer;line-height:1;font-family:'Inter',sans-serif;font-weight:200}

/* ---------- testimonial carousel ---------- */
.tcar{position:relative;max-width:860px;margin:0 auto;text-align:center;min-height:290px}
.tslide{position:absolute;inset:0;opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease);pointer-events:none}
.tslide.on{opacity:1;transform:none;pointer-events:auto;position:relative}
.tstars{color:var(--gold);letter-spacing:.42em;font-size:.82rem;margin-bottom:1.8rem}
.tquote{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(1.3rem,2.6vw,1.95rem);font-weight:400;font-style:italic;line-height:1.5;color:#f5f1ea;margin-bottom:2rem}
.tmeta{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.tsrc{font-size:.72rem;color:#8b8175;margin-top:.5rem;font-weight:300;letter-spacing:.06em}
.tdots{display:flex;gap:.7rem;justify-content:center;margin-top:2.8rem}
.tdots button{width:26px;height:1px;background:rgba(255,255,255,.26);border:0;cursor:pointer;padding:0;transition:background .4s}
.tdots button.on{background:var(--gold)}

/* ---------- FAQ ---------- */
.faq-filters{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-bottom:3.4rem}
.faq-filters button{font-family:'Inter',sans-serif;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;background:transparent;border:1px solid var(--line-2);color:var(--muted);padding:.7rem 1.5rem;cursor:pointer;transition:all .4s var(--ease)}
.faq-filters button:hover{border-color:var(--ink);color:var(--ink)}
.faq-filters button.on{background:var(--ink);border-color:var(--ink);color:var(--ivory)}
.faq-list{max-width:820px;margin:0 auto}
.faq{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:1.7rem 3rem 1.7rem 0;list-style:none;position:relative;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.28rem;color:var(--ink);transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold-deep)}
.faq summary::after,.faq summary::before{content:'';position:absolute;right:.4rem;top:50%;background:var(--gold);transition:transform .4s var(--ease)}
.faq summary::after{width:13px;height:1px;margin-top:0}
.faq summary::before{width:1px;height:13px;right:.9rem;margin-top:-6px}
.faq[open] summary::before{transform:rotate(90deg)}
.faq .ans{padding:0 3rem 1.9rem 0;color:var(--muted);font-weight:300;font-size:.95rem;line-height:1.85;animation:fadeDown .5s var(--ease)}
@keyframes fadeDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.faq .cat{display:inline-block;font-family:'Inter',sans-serif;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);margin-left:1rem;vertical-align:middle}


.faq-more{display:flex;width:-moz-fit-content;width:fit-content;align-items:center;gap:.6rem;margin-top:1.6rem;font-family:'Inter',sans-serif;font-size:.68rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:.4rem;transition:border-color .35s var(--ease),color .35s}
.faq-more:hover{border-color:var(--gold);color:var(--gold-deep)}
.faq-more .ar{transition:transform .4s var(--ease)}
.faq-more:hover .ar{transform:translateX(5px)}

/* ---------- form ---------- */
.form-wrap{max-width:660px;margin:0 auto}
.form-wrap label{display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:#a89e91;margin:1.7rem 0 .6rem}
.form-wrap input,.form-wrap select,.form-wrap textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.22);
  padding:.85rem 0;font-family:'Inter',sans-serif;font-size:.98rem;color:#f5f1ea;font-weight:300;transition:border-color .4s
}
.form-wrap input::placeholder,.form-wrap textarea::placeholder{color:#6f665b}
.form-wrap input:focus,.form-wrap select:focus,.form-wrap textarea:focus{outline:none;border-bottom-color:var(--gold)}
.form-wrap select option{background:var(--char);color:#f5f1ea}
.form-wrap button{margin-top:2.6rem;width:100%;justify-content:center}
.form-note{font-size:.76rem;color:#8b8175;margin-top:1.4rem;text-align:center;font-weight:300}
.form-2{display:grid;grid-template-columns:1fr 1fr;gap:0 2rem}

/* ---------- cta band ---------- */
.cta{text-align:center;max-width:760px;margin:0 auto}
.cta h3{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:1.1rem}
.cta p{color:#a89e91;font-weight:300;margin-bottom:2.4rem}
.cta .btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* motto band */
.motto-band{background:var(--char);padding:5.5rem 0;text-align:center}
.motto-band p{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:clamp(1.5rem,3.4vw,2.5rem);font-weight:300;color:#f5f1ea;max-width:760px;margin:0 auto;line-height:1.35}
.motto-band em{font-style:italic;color:var(--gold)}

/* ---------- about ---------- */
.doc-intro{display:grid;grid-template-columns:.82fr 1.18fr;gap:4.2rem;align-items:center}
.doc-intro .txt p{font-size:1rem;font-weight:300;line-height:1.9;color:var(--ink-2);margin-bottom:1.3rem}
.doc-creds{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:1.9rem 0 2.2rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.doc-creds span{font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.doc-photo{width:100%;display:block}
.bio p{font-size:1.04rem;font-weight:300;line-height:1.95;color:var(--ink-2);margin-bottom:1.6rem}
.creds{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
.cred{background:var(--paper);padding:2.4rem 2.2rem}
.cred .yr{font-family:'Cormorant Garamond',Georgia,serif;font-size:.82rem;color:var(--gold);letter-spacing:.2em;margin-bottom:.9rem}
.cred b{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.28rem;font-weight:500;color:var(--ink);margin-bottom:.5rem}
.cred span{font-size:.88rem;color:var(--muted);font-weight:300;line-height:1.75}
.creds.one{grid-template-columns:1fr}
.hrs{display:grid;grid-template-columns:auto 1fr;gap:.5rem 2.6rem;align-items:baseline;max-width:460px}
.hrs b{margin-bottom:0}
.hrs span{line-height:1.5}
@media(max-width:520px){.hrs{grid-template-columns:1fr;gap:.15rem 0}
  .hrs b{margin-top:.9rem}.hrs b:first-child{margin-top:0}}

/* ---------- articles ---------- */
.post-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
.post-card{background:var(--paper);padding:3rem 2.6rem;text-decoration:none;display:flex;flex-direction:column;transition:background .5s var(--ease)}
.post-card:hover{background:var(--ivory-2)}
.post-cat{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:1.2rem}
.post-card h3{font-size:1.6rem;margin-bottom:1rem;transition:color .35s}
.post-card:hover h3{color:var(--gold-deep)}
.post-card p{color:var(--muted);font-weight:300;font-size:.93rem;flex:1}
.post-date{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:1.8rem;padding-top:1.2rem;border-top:1px solid var(--line)}

.prog{position:fixed;top:0;left:0;height:2px;background:var(--gold);z-index:300;width:0}
article.post{padding:11rem 0 5rem}
article.post h1{font-size:clamp(2.1rem,4.4vw,3.3rem);margin-bottom:1.6rem;font-weight:400}
.byline{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding-bottom:2.4rem;border-bottom:1px solid var(--line);margin-bottom:3rem}
article.post h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:3.4rem 0 1.3rem}
article.post p{margin-bottom:1.4rem;font-weight:300;line-height:1.95;color:var(--ink-2)}
article.post ol,article.post ul{margin:0 0 1.6rem 1.3rem;color:var(--ink-2);font-weight:300}
article.post li{margin-bottom:.7rem;line-height:1.85;padding-left:.4rem}
article.post strong{font-weight:500;color:var(--ink)}
/* booking calendar embed
   The frame is Google's own booking page, so its contents cannot be styled from
   here. --cal-crop scrolls it up behind a clipping box to hide the avatar and
   owner-name row at the top; --cal-h is the visible height. If Google ever
   changes that page's layout, --cal-crop is the one number to re-tune. */
/* --cal-crop scrolls Google's page up behind the clipping box. It is 0 now:
   cropping hid the avatar row on the landing view, but when a patient picks a
   slot Google opens its contact-details panel pinned to the frame's own top
   edge, and the crop sliced that panel's heading off. Showing the page from
   its true top costs one row of Google's chrome and keeps every later step
   whole. --cal-pt and --cal-pb are white gutters inside the frame, so nothing
   Google draws ever sits hard against the border. */
.cal-embed{--cal-h:688px;--cal-crop:0px;--cal-pt:26px;--cal-pb:26px;
  box-sizing:border-box;padding:var(--cal-pt) 0 var(--cal-pb);
  max-width:900px;margin:0 auto;background:#fff;border:1px solid var(--line);
  height:var(--cal-h);overflow:hidden}
/* The clipping has to happen on an inner box: overflow:hidden clips at the
   padding edge, so a negatively-offset iframe would otherwise show through
   the gutters we just made for it. */
.cal-clip{height:calc(var(--cal-h) - var(--cal-pt) - var(--cal-pb) - 2px);overflow:hidden}
.cal-embed iframe{display:block;width:100%;border:0;
  height:calc(var(--cal-h) + var(--cal-crop) - var(--cal-pt) - var(--cal-pb));
  margin-top:calc(-1 * var(--cal-crop))}
/* On narrow screens Google's own page already leaves room above the title, so
   the top gutter goes back to zero. A fixed-height window onto someone else's
   page always cuts something at the bottom edge — a half-drawn chip, a column
   rule stopping in mid-air — so instead of a plain gutter the last stretch is
   faded to white. Whatever the cut lands on dissolves rather than ending
   abruptly, and it reads as "there is more below", which is true. */
/* Google stacks the month and the slot list on a phone, so the page is roughly
   twice as tall there as on a desktop. The frame is sized to hold all of it:
   cutting it leaves the slot card's side rules ending in mid-air, which reads
   as broken, whereas trailing white space on a quiet day just reads as calm.
   No fade here — there should be nothing left to hide. */
@media(max-width:760px){.cal-embed{--cal-h:1140px;--cal-pt:0px;--cal-pb:24px}}
@media(max-width:420px){.cal-embed{--cal-h:1160px;--cal-pt:0px;--cal-pb:24px}}

.callout{background:var(--gold-soft);border-left:2px solid var(--gold);padding:2rem 2.2rem;margin:2.4rem 0;font-size:.96rem;font-weight:300;line-height:1.85}
.callout b{font-weight:500;color:var(--ink)}
.callout p{margin-bottom:1.1rem}
.art-cta{background:var(--char);padding:3.4rem 2.6rem;text-align:center;margin:3.4rem 0}
.art-cta h3{font-size:1.7rem;color:#f5f1ea;margin-bottom:.9rem}
.art-cta p{color:#a89e91;font-weight:300;margin-bottom:2rem}
.disclaimer{font-size:.8rem;color:var(--muted);font-style:italic;font-weight:300;border-top:1px solid var(--line);padding-top:1.6rem;margin-top:3rem}

.cmp{width:100%;border-collapse:collapse;margin:2rem 0;font-size:.9rem}
.cmp th,.cmp td{border:1px solid var(--line);padding:1.1rem 1.2rem;text-align:left;vertical-align:top;font-weight:300;color:var(--muted)}
.cmp thead th{background:var(--char);color:#f5f1ea;font-family:'Inter',sans-serif;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.cmp tbody th{background:var(--ivory-2);font-family:'Cormorant Garamond',Georgia,serif;font-size:1.05rem;font-weight:500;color:var(--ink);width:24%}
.cmp td strong{color:var(--ink);font-weight:500}
.tscroll{overflow-x:auto}

/* ---------- footer ---------- */
.ftr{background:var(--char);color:#8b8175;padding:5.5rem 0 2.5rem;font-size:.88rem;font-weight:300}
.ftr-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:3rem}
.ftr-logo{height:22px;width:auto;display:block;margin-bottom:1.2rem}
.ftr-motto{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;color:var(--gold);font-size:1rem;margin-bottom:1.7rem;display:block}
/* Title case, like the top nav. Dropping the uppercase means dropping the
   wide tracking and small size that went with it, or it reads as a label
   rather than a heading. */
.ftr h5{font-family:'Inter',sans-serif;font-size:.84rem;letter-spacing:.02em;color:#f5f1ea;margin-bottom:1.4rem;font-weight:500}
.ftr ul{list-style:none}
.ftr li{margin-bottom:.85rem}
.ftr a{color:#8b8175;text-decoration:none;transition:color .35s}
.ftr a:hover{color:var(--gold)}
.ftr .ln{display:block;margin-bottom:.4rem;line-height:1.8}
.ftr-base{border-top:1px solid rgba(255,255,255,.1);margin-top:4rem;padding-top:2rem;font-size:.72rem;line-height:1.85;color:#6f665b}

/* mobile sticky call */
.mcall{display:none;position:fixed;left:0;right:0;bottom:0;z-index:150;background:var(--ink);color:var(--ivory);text-align:center;padding:1.1rem;text-decoration:none;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase}

/* ---------- motion ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.09s}.rv-d2{transition-delay:.18s}.rv-d3{transition-delay:.27s}.rv-d4{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .nav{display:none}
  .hdr-in{grid-template-columns:1fr auto;gap:1rem}
  .hdr-cta{display:none}
  .burger{display:block}
  .hero{padding:9rem 0 4rem}
  .hero-grid{grid-template-columns:1fr;gap:3rem}
  .doc-intro{grid-template-columns:1fr;gap:2.6rem}
  .doc-intro .ph{max-width:420px}
  .gate,.svc-grid,.svc-grid.c3,.post-grid,.creds{grid-template-columns:1fr}
  .ba-grid,.ba-grid.two{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr 1fr}
  .pillar{border-bottom:1px solid rgba(255,255,255,.13)}
  .pillar:nth-child(2n){border-right:0}
  .ftr-grid{grid-template-columns:1fr;gap:2.4rem}
  .form-2{grid-template-columns:1fr}
  section{padding:4.5rem 0}
  .wrap,.narrow{padding:0 1.5rem}
  .panel,.warranty{padding:2.4rem 1.7rem}
  .svc{padding:2.4rem 1.8rem}
  .gate a{padding:3rem 1.8rem}
  .mcall{display:block}
  body{padding-bottom:3.4rem}
  article.post{padding:8rem 0 3rem}
}
@media (max-width:560px){
  /* Tighter side margins in the header on phones. The solid rule needs saying
     twice because its shorthand is more specific than a bare .hdr-in here. */
  .hdr-in,.hdr.solid .hdr-in{padding-left:1.25rem;padding-right:1.25rem}
  .stat-num{font-size:3.6rem}
  .pillars{grid-template-columns:1fr}
  .pillars.pillars-2{grid-template-columns:1fr;max-width:none}
  .pillar{border-right:0}
  .brand-logo{height:23px}
  .brand-sub{font-size:.46rem;letter-spacing:.22em;text-indent:.22em}
}
@media (max-width:380px){
  .brand-logo{height:20px}
}

body.lb-on .hdr{opacity:0;pointer-events:none;transition:opacity .3s}
body.lb-on .mcall{opacity:0}


/* ── Simplified Chinese ─────────────────────────────────────────────────── */
html[lang^="zh"] body{font-family:'Inter','Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif}
html[lang^="zh"] h1,html[lang^="zh"] h2,html[lang^="zh"] h3,html[lang^="zh"] h4,
html[lang^="zh"] .display,html[lang^="zh"] .h2,html[lang^="zh"] .h3,
html[lang^="zh"] .tquote{font-family:'Cormorant Garamond','Noto Serif SC','Songti SC',serif;letter-spacing:0}
html[lang^="zh"] .display em,html[lang^="zh"] .tquote{font-style:normal}
html[lang^="zh"] .lede,html[lang^="zh"] p{letter-spacing:.01em}
html[lang^="zh"] .eyebrow,html[lang^="zh"] .stat-lbl,html[lang^="zh"] .idx,
html[lang^="zh"] .nav a,html[lang^="zh"] .hdr-cta,html[lang^="zh"] .btn{letter-spacing:.12em}

/* ── Insurance page ───────────────────────────────────────────────────────
   Real carrier logos (see ins_card() in build.py), not artwork of our own —
   which means ten different brand colors and ten different aspect ratios
   landing in one grid. A soft grayscale treatment is what makes that read as
   one considered row instead of a clash: every mark sits at the same visual
   weight, sized to a shared box with object-fit so none of them crop or
   stretch, and full color only arrives as a hover reward on devices that can
   hover. Touch devices get a lighter desaturation by default (no hover to
   reveal color on), so the marks stay legible without ever fighting the
   page's ivory-and-gold palette. Card heights shrink hard on small screens —
   a logo needs far less room than the wordmark text this replaced, and that
   is exactly the space a phone's scroll position can't afford to waste. */
.ins-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin:2.6rem 0 1.6rem}
.ins-card{background:var(--paper);padding:1.3rem 1.1rem;display:flex;align-items:center;
  justify-content:center;min-height:4.6rem;transition:background .4s var(--ease)}
.ins-card:hover{background:var(--ivory-2)}
.ins-card img{max-width:100%;height:30px;width:auto;object-fit:contain;
  filter:grayscale(.55) opacity(.82);transition:filter .35s var(--ease),opacity .35s var(--ease)}
@media (hover:hover){
  .ins-card img{filter:grayscale(1) opacity(.62)}
  .ins-card:hover img{filter:none;opacity:1}
}
.ins-note{font-size:.86rem;color:var(--muted);font-weight:300;margin-bottom:3rem}

/* A hover-to-reveal explainer: hover on anything that can hover, a tap
   toggles it where nothing can (phones, and any hover-capable device too,
   since the two are not mutually exclusive). */
.info{position:relative;display:inline-block}
.info-btn{background:none;border:0;padding:0;font:inherit;cursor:help;color:var(--muted);
  font-size:.84rem;font-weight:300;border-bottom:1px dotted var(--line-2);
  transition:color .3s,border-color .3s}
.info-btn:hover,.info.open .info-btn{color:var(--ink);border-color:var(--muted)}
.info-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.info-card{position:absolute;left:0;top:calc(100% + .7rem);width:19rem;max-width:78vw;
  background:#fff;border:1px solid var(--line-2);box-shadow:0 18px 40px rgba(20,17,14,.12);
  padding:1.3rem 1.5rem;font-size:.86rem;font-weight:300;line-height:1.7;color:var(--ink-2);
  z-index:5;opacity:0;visibility:hidden;transform:translateY(4px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
.info.open .info-card{opacity:1;visibility:visible;transform:none}
@media (hover:hover){.info:hover .info-card{opacity:1;visibility:visible;transform:none}}

/* Ten logos in a 3-wide grid leaves the last row with one lone card (10 ÷ 3
   = 3 full rows, 1 left over). Left as a normal grid cell it sits pinned to
   the left edge with two empty, divider-colored cells beside it. Spanning it
   across all 3 columns turns that into one full-width row, and .ins-card's
   own justify-content:center puts the logo — Principal, currently last in
   INSURERS — in the middle of it instead. */
@media(max-width:900px){.ins-grid{grid-template-columns:repeat(3,1fr)}
  .ins-card{min-height:4.2rem}.ins-card img{height:27px}
  .ins-card:last-child{grid-column:1/-1}}
@media(max-width:560px){.ins-grid{grid-template-columns:repeat(3,1fr)}
  .ins-card{padding:.85rem .6rem;min-height:3.2rem}.ins-card img{height:20px}
  .ins-card:last-child{grid-column:1/-1}}

/* ── Enquiry confirmation modal ───────────────────────────────────────────
   Shown after the call-back form is sent. The wording lives in the HTML that
   contact_form() emits, not in its JavaScript, because build_i18n.py does not
   translate anything inside a <script> block. Appended at the end of the file
   so its own breakpoints are not undone by the ones interleaved above. */
.enq-modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;
  justify-content:center;padding:1.5rem}
.enq-modal[hidden]{display:none}
.enq-back{position:absolute;inset:0;background:rgba(20,17,14,.58)}
.enq-card{position:relative;background:var(--ivory);border:1px solid var(--line);
  width:100%;max-width:30rem;padding:3rem 2.6rem 2.2rem;text-align:center;
  box-shadow:0 30px 70px rgba(20,17,14,.3);animation:enqRise .38s var(--ease)}
@keyframes enqRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.enq-card h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:1.9rem;line-height:1.18;letter-spacing:-.01em;color:var(--ink);margin:0}
.enq-card .rule{margin:1.1rem auto 1.2rem}
.enq-card p{font-size:.98rem;font-weight:300;line-height:1.75;color:var(--ink-2);margin:0}
.enq-card .btn{margin-top:2rem;width:100%;justify-content:center}
.enq-x{position:absolute;top:.7rem;right:.9rem;background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:1.6rem;line-height:1;color:var(--muted);
  padding:.2rem .45rem;transition:color .3s}
.enq-x:hover{color:var(--ink)}
.enq-x:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.enq-card{animation:none}}
@media (max-width:560px){
  .enq-card{padding:2.4rem 1.5rem 1.8rem}
  .enq-card h3{font-size:1.55rem}
}

/* Phone and text shortcuts in the mobile header, beside the language pill.
   Same pill treatment as .lang-btn so the three read as one set. Mobile only:
   on desktop the nav and the Book a Consultation button already cover this. */
.hdr-ico{display:none;align-items:center;justify-content:center;flex:none;
  width:30px;height:30px;border:1px solid var(--line-2);border-radius:999px;
  color:var(--ink);text-decoration:none;transition:border-color .3s}
.hdr-ico svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.35;
  stroke-linecap:round;stroke-linejoin:round}
.hdr-ico:hover{border-color:var(--ink)}
.hdr-ico:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (max-width:900px){.hdr-ico{display:inline-flex}}
@media (max-width:620px){
  .hdr-ico{width:27px;height:27px}
  .hdr-ico svg{width:13px;height:13px}
}