/* ==========================================================================
   Khan Dental Studio — Design System
   Palette taken from the studio logo: deep navy field (#000342) with a gold
   crown-tooth mark (#f6b756). Editorial zinc-grid structure per DESIGN.md —
   generous 36px card rounding, 1px hairline borders in place of drop shadows,
   a single type family, and gold used strictly as punctuation.
   Container rhythm: .wrap max-width 1875px with --pad: clamp(20px,4.5vw,64px)
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* Brand — sampled directly from the studio logo artwork. */
  --navy:#000342;
  --gold:#f6b756;

  --bg:#ffffff;
  --soft:#f4f4f5;          /* Awesomic canvas — the tinted section band */
  --soft-2:#ececee;
  --ink:#000342;           /* headlines + dominant text */
  --ink-2:#18181b;         /* body copy */
  --muted:#52525b;         /* supporting metadata */

  /* Navy carries every primary action; there is no second interactive hue. */
  --primary:#000342;
  --primary-deep:#000342;
  --primary-lite:#1b2467;
  --primary-soft:#f4f4f5;

  --accent:#f6b756;
  --accent-deep:#d9973a;
  --accent-soft:#fdf4e4;

  --line:#ececee;
  --line-soft:#f1f1f3;
  --card:#ffffff;

  /* Three radii repeat everywhere: 12px chips, 14px controls, 36px surfaces. */
  --radius:36px;
  --radius-lg:36px;
  --radius-sm:14px;
  --radius-chip:12px;

  /* Hairline borders do the elevation work; shadows stay near-invisible. */
  --shadow:0 4px 12px 0 rgba(0,0,0,.04);
  --shadow-lg:0 18px 48px -28px rgba(0,3,66,.28);
  --shadow-soft:0 4px 12px 0 rgba(0,0,0,.04);

  --font:"DM Sans","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"DM Sans","Inter",ui-sans-serif,system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(20px,4.5vw,64px);
  --wrap:1875px;
  --sec:clamp(58px,7vw,110px);
  --header-h:86px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
h1,h2,h3,h4,h5{margin:0;line-height:1.12;letter-spacing:0;font-weight:600}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--primary);color:#fff}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ---------- Layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);width:100%}
.wrap-narrow{max-width:1120px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.section{padding-block:var(--sec);position:relative}
/* position/overflow live here, not on .section — some bands are .section-tight only. */
/* Flat canvas band — the zinc surface that alternates with the white sections. */
.section-soft{position:relative;overflow:hidden;background:var(--soft)}
.section-dark{position:relative;overflow:hidden;background:var(--navy);color:#fff}
/* One restrained gold wash so the dark band doesn't read as a flat slab. */
.section-dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 520px at 88% 0%,rgba(246,183,86,.10),transparent 64%);
}
.section-dark > *,.section-soft > *{position:relative}
.section-tight{padding-block:clamp(44px,5vw,72px)}

/* Quiet hairline chip — no fill weight, no shadow. */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  background:#fff;border:1px solid var(--line);padding:7px 16px;border-radius:999px;
}
.section-soft .eyebrow{background:#fff}
.section-dark .eyebrow{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:var(--accent)}
/* Pulsing dot marker. */
.eyebrow::before{
  content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--accent);box-shadow:0 0 0 0 rgba(246,183,86,.65);animation:dot-pulse 2.4s var(--ease) infinite;
}
@keyframes dot-pulse{70%,100%{box-shadow:0 0 0 8px rgba(246,183,86,0)}}

/* Display steps follow the DESIGN.md scale: 64/1.12, 56/1.28, 40/1.28, 32/1.5
   — all at weight 600, with no tracking adjustments. */
.h1{font-size:clamp(38px,5.2vw,64px);font-weight:600;letter-spacing:0;line-height:1.12}
.h2{font-size:clamp(30px,3.6vw,56px);max-width:22ch;letter-spacing:0;line-height:1.28;font-weight:600}
.h3{font-size:clamp(20px,2.1vw,32px);letter-spacing:0;line-height:1.28;font-weight:600}
.h4{font-size:clamp(17px,1.5vw,20px);letter-spacing:0;line-height:1.5;font-weight:600}
.sub{color:var(--muted);max-width:60ch;margin-top:16px;font-size:clamp(15px,1.35vw,18px);line-height:1.45}
.section-dark .sub{color:rgba(255,255,255,.76)}
.center{text-align:center}
.center .h2,.center .sub{margin-left:auto;margin-right:auto}
.sec-head{margin-bottom:clamp(34px,4vw,58px)}
.sec-head-row{display:flex;gap:40px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
/* Short gold rule that closes off a centred section head. */
.sec-head.center .sub{position:relative;padding-bottom:30px}
.sec-head.center .sub::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:56px;height:3px;border-radius:3px;background:var(--accent);
}
.txt-accent{color:var(--accent-deep)}
.txt-primary{color:var(--ink)}
/* Single-font rule: the old serif italic is now a gold-underscored phrase in
   the same family, so emphasis reads without a second typeface. */
.serif-i{font-family:var(--font);font-style:normal;font-weight:600;letter-spacing:0;color:var(--ink);box-shadow:inset 0 -.14em 0 var(--accent)}
.section-dark .serif-i{color:#fff}

/* ---------- Buttons ---------- */
/* 14px radius on inline actions — precise and contained against 36px cards. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:12px 24px;border-radius:var(--radius-sm);font-weight:500;font-size:15px;
  letter-spacing:0;transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .3s,color .3s,border-color .3s;
  position:relative;overflow:hidden;white-space:nowrap;border:1px solid transparent;
}
.btn svg{width:18px;height:18px;flex:none;transition:transform .45s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:translateY(0)}
/* The system's single most important control: near-black navy fill with a
   hairline ring and an inset highlight instead of a drop shadow. */
.btn-primary{
  background:var(--navy);color:#fff;
  box-shadow:inset 0 .5px 0 0 rgba(255,255,255,.5),0 0 0 1.5px #1b2467,0 4px 6px 0 rgba(0,0,0,.14);
}
.btn-primary:hover{background:#0b1257}
.btn-accent{background:var(--accent);color:var(--navy);font-weight:600}
.btn-accent:hover{background:#ffc873}
.btn-ghost{border-color:var(--line);color:var(--ink);background:#fff}
.btn-ghost:hover{border-color:var(--ink);background:var(--soft)}
.btn-light{background:#fff;color:var(--navy)}
.btn-light:hover{background:var(--accent-soft)}
.btn-outline-light{border-color:rgba(255,255,255,.4);color:#fff}
.btn-outline-light:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn-sm{min-height:42px;padding:10px 18px;font-size:14px}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.center .btn-row{justify-content:center}

.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--primary);font-size:15px}
.link-arrow svg{width:17px;height:17px;transition:transform .4s var(--ease)}
.link-arrow:hover svg{transform:translateX(5px)}

/* ---------- Reveal animation ---------- */
.fade-up{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.fade-up.in-view{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
.d4{transition-delay:.32s}.d5{transition-delay:.4s}.d6{transition-delay:.48s}
.clip-reveal{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease)}
.clip-reveal.in-view{clip-path:inset(0 0 0 0)}
/* Directional variants — same observer, different starting transform. */
.fade-in{opacity:0;transition:opacity 1s var(--ease)}
.fade-left{opacity:0;transform:translateX(-38px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.fade-right{opacity:0;transform:translateX(38px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.zoom-in{opacity:0;transform:scale(.93);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.fade-in.in-view,.fade-left.in-view,.fade-right.in-view,.zoom-in.in-view{opacity:1;transform:none}
/* Small screens only have a 20px gutter, so a 38px sideways slide pokes past the
   viewport and creates a horizontal scrollbar. Slide up instead. */
@media (max-width:640px){
  .fade-left,.fade-right{transform:translateY(28px)}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .fade-up,.fade-in,.fade-left,.fade-right,.zoom-in{opacity:1;transform:none}
}

/* ==========================================================================
   HEADER
   ========================================================================== */
/* Flat navy utility bar — the logo's field colour, edge to edge. */
.topbar{
  position:relative;color:rgba(255,255,255,.82);font-size:13px;overflow:hidden;
  background:var(--navy);
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:46px;position:relative;z-index:1}
.topbar-left{display:flex;align-items:center;gap:14px;min-width:0}
.topbar-left > *{display:inline-flex;align-items:center;gap:8px}
/* Hairline dividers instead of plain gaps. */
.topbar-left > * + *{padding-left:14px;border-left:1px solid rgba(255,255,255,.18)}
.topbar a{display:inline-flex;align-items:center;gap:8px;transition:color .3s}
.topbar a:hover{color:var(--accent)}
.topbar svg{width:15px;height:15px;opacity:.85}
.topbar-rating{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;color:#fff;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);
  padding:5px 14px;border-radius:999px;backdrop-filter:blur(6px);
}
.stars{display:inline-flex;gap:2px}
.stars svg{width:14px;height:14px;fill:var(--accent);opacity:1}
.topbar-rating{white-space:nowrap;flex:none}
@media (max-width:1100px){.topbar-left .tb-hide:last-child{display:none}}
@media (max-width:860px){.topbar-left .tb-hide{display:none}}
@media (max-width:700px){.topbar{display:none}}

/* Hidden until the header sticks to the top on scroll — sits right after the
   logo (left side) so the weekend-hours differentiator follows you into the
   nav once the matching .hero-badge scrolls out of view with the hero. */
.header-badge{
  display:inline-flex;align-items:center;gap:8px;padding:6px 6px 6px 14px;border-radius:999px;
  background:#fff;border:1px solid var(--line);font-size:13px;font-weight:400;color:var(--ink-2);white-space:nowrap;
  opacity:0;transform:translateX(-8px);pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.header-badge b{background:var(--accent);color:var(--navy);padding:4px 11px;border-radius:var(--radius-chip);font-size:11.5px;font-weight:600}
.site-header.is-stuck .header-badge{opacity:1;transform:translateX(0);pointer-events:auto}
/* The badge adds ~180px to the left track, which is exactly the width the nav
   needs to stay uncompressed and centred — so it only earns its place once the
   row is wide enough to absorb it. At a 17.5px menu the nav alone is 502px, so
   that threshold is now 1500px: at 1440 with the badge in, the nav gets
   squeezed to 475 and the labels start closing up. */
@media (max-width:1500px){.header-badge{display:none}}

.site-header{
  position:sticky;top:0;z-index:900;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .4s var(--ease),background .4s,border-color .4s;
}
/* Gold hairline that only lights up once the header sticks. */
.site-header::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease);
}
.site-header.is-stuck{background:rgba(255,255,255,.95)}
.site-header.is-stuck::after{transform:scaleX(1)}
/* Three tracks with matched 1fr flanks: the centre column is sized to the nav
   and the equal side columns push it to the true centre of the header, however
   wide the lockup on the left or the CTA group on the right get. A flex row with
   auto margins would only centre the nav in the leftover space, which drifts
   left as soon as the phone number appears. */
/* minmax(max-content,1fr), not a bare 1fr: when there is spare room the two fr
   shares exceed both flanks' content and the tracks come out equal, so the nav
   lands dead centre. When the row tightens, each flank falls back to its own
   content width instead of crushing it — the nav drifts a few px off centre
   rather than wrapping the phone number onto two lines. */
.header-inner{
  display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);
  align-items:center;gap:26px;
  min-height:var(--header-h);transition:min-height .4s var(--ease)
}
.site-header.is-stuck .header-inner{min-height:calc(var(--header-h) - 10px)}
.header-left{display:flex;align-items:center;gap:18px;min-width:0}
.header-inner > nav{justify-self:center}
.header-inner > .header-cta{justify-self:end}

/* Lockup follows the supplied artwork: gold crown-tooth mark to the left of a
   wide-tracked navy wordmark, with "STUDIO" as a gold tail beneath. */
.logo{display:flex;align-items:center;gap:13px;flex:none;position:relative}
/* The mark is a gold hairline outline, which only reaches 1.78:1 against white
   and disappears on a light header. The client artwork always sets it on navy,
   so on light surfaces it gets its own navy tile; on dark surfaces (footer,
   drawer) the tile is dropped and the gold sits straight on the background. */
.logo-mark{
  width:30px;height:34px;flex:none;color:var(--accent);
  padding:7px 9px;background:var(--navy);border-radius:12px;box-sizing:content-box;
  transition:transform .5s var(--ease);
}
.logo:hover .logo-mark{transform:translateY(-2px) scale(1.04)}
.logo-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.logo-txt b{
  font-size:18px;font-weight:600;letter-spacing:.14em;white-space:nowrap;
  color:var(--navy);text-transform:uppercase;
}
.logo-txt b i,.logo-txt b em{font-style:normal;color:inherit}
.logo-txt > span{
  margin-top:5px;font-size:10px;font-weight:500;letter-spacing:.42em;
  text-transform:uppercase;color:var(--accent-deep);
}
/* Inverted lockup for navy surfaces (footer, drawer head on dark). */
.section-dark .logo-txt b,.footer .logo-txt b{color:#fff}
.section-dark .logo-txt > span,.footer .logo-txt > span{color:var(--accent)}

/* Nav sits in a hairline rail so the links read as one deliberate control. */
/* Plain editorial menu — no container box, no pills, no shadow. A gold rule
   under the label is the only indicator. */
.nav{display:flex;align-items:center;gap:clamp(4px,1.1vw,14px)}
.nav > li{position:relative}
/* No font-weight and no colour of its own: both inherit from body, so the menu
   is 400 weight at full --ink. That means hover and .current can no longer
   signal themselves by darkening the label — the gold rule underneath is now
   the only indicator, which is what the plain-menu brief asked for anyway. */
.nav > li > a,.nav > li > button{
  position:relative;display:inline-flex;align-items:center;gap:6px;padding:10px 4px;
  font-size:17.5px;white-space:nowrap;
  transition:color .3s var(--ease);
}
/* Gold rule wipes out from the centre on hover. */
.nav > li > a::after,.nav > li > button::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px;background:var(--accent);
  transform:scaleX(0);opacity:0;transition:transform .4s var(--ease),opacity .3s;
}
.nav > li > a:hover::after,.nav > li > button:hover::after,
.nav > li:focus-within > a::after{transform:scaleX(1);opacity:1}
.nav > li > a:hover,.nav > li > button:hover{color:var(--ink)}
/* Current page keeps the rule permanently and darkens to full navy ink. */
.nav > li.current > a{color:var(--ink);font-weight:500}
.nav > li.current > a::after{transform:scaleX(1);opacity:1}
.nav .caret{width:11px;height:11px;transition:transform .4s var(--ease);opacity:.6}
.nav > li:hover .caret{transform:rotate(180deg)}

.drop{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%,12px);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:12px;min-width:262px;opacity:0;visibility:hidden;
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;z-index:20;
}
.nav > li:hover .drop,.nav > li:focus-within .drop{opacity:1;visibility:visible;transform:translate(-50%,0)}
.drop::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
/* Pointer that ties the panel back to its nav pill. */
.drop::after{
  content:"";position:absolute;top:-7px;left:50%;width:14px;height:14px;background:#fff;
  border-left:1px solid var(--line);border-top:1px solid var(--line);
  transform:translateX(-50%) rotate(45deg);border-radius:3px 0 0 0;
}
.drop a{
  display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:var(--radius-chip);font-size:14px;
  font-weight:500;color:var(--ink-2);transition:background .3s,color .3s,transform .3s var(--ease);
}
.drop a:hover{background:var(--soft);color:var(--ink);transform:translateX(4px)}
.drop a i{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}

/* Mega menu */
.nav > li.has-mega{position:static}
.mega{
  position:absolute;top:calc(100% + 10px);left:var(--pad);right:var(--pad);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:clamp(22px,2.4vw,34px);opacity:0;visibility:hidden;
  transform:translateY(12px);transition:opacity .38s var(--ease),transform .38s var(--ease),visibility .38s;z-index:20;
  max-width:calc(var(--wrap) - var(--pad) * 2);margin-inline:auto;
}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
/* Gold strip across the top edge of the panel. */
.mega::after{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  background:var(--accent);
}
/* Links cascade in once the panel is open. Opacity only, so the
   translateX hover state below is left untouched. */
.mega-col a{opacity:0}
.has-mega:hover .mega-col a,.has-mega:focus-within .mega-col a{opacity:1;transition-delay:var(--d,0s)}
.mega-col a:nth-child(2){--d:.04s} .mega-col a:nth-child(3){--d:.08s}
.mega-col a:nth-child(4){--d:.12s} .mega-col a:nth-child(5){--d:.16s}
.mega-col a:nth-child(6){--d:.2s}  .mega-col a:nth-child(7){--d:.24s}
.mega-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) .95fr;gap:clamp(18px,2vw,32px)}
.mega-col h5{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:12px}
.mega-col a{
  display:flex;gap:12px;align-items:flex-start;padding:9px 12px;border-radius:13px;
  transition:opacity .4s var(--ease),background .3s,transform .35s var(--ease),box-shadow .3s;
}
.mega-col a:hover{background:var(--soft);transform:translateX(5px)}
.mega-ico{
  width:34px;height:34px;border-radius:var(--radius-chip);background:var(--soft);color:var(--ink);
  border:1px solid var(--line);
  display:grid;place-items:center;flex:none;
  transition:background .3s,color .3s,border-color .3s
}
.mega-ico svg{width:18px;height:18px}
.mega-col a:hover .mega-ico{background:var(--navy);border-color:var(--navy);color:var(--accent)}
.mega-col a b{display:block;font-size:14px;font-weight:600;letter-spacing:0}
.mega-col a small{display:block;color:var(--muted);font-size:12.5px;line-height:1.45}
.mega-promo{
  border-radius:28px;padding:24px;color:#fff;position:relative;overflow:hidden;
  background:var(--navy);
  display:flex;flex-direction:column;justify-content:space-between;gap:16px;
}
.mega-promo::after{
  content:"";position:absolute;width:210px;height:210px;border-radius:50%;right:-70px;bottom:-80px;
  background:radial-gradient(circle,rgba(246,183,86,.22),transparent 70%);
}
.mega-promo h6{font-size:20px;margin:0;font-weight:600;letter-spacing:0;position:relative}
.mega-promo p{font-size:13.5px;color:rgba(255,255,255,.8);position:relative;margin-top:6px}
.mega-promo .btn{position:relative;align-self:flex-start}

.header-cta{display:flex;align-items:center;gap:14px;flex:none}
/* nowrap because the header row is a grid now, not a flex line: without an
   explicit flex:none the CTA column will happily shrink to its min-content
   width, and the first thing that gives is the phone number breaking onto a
   second line and pushing the header taller. */
.header-phone{
  display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;color:var(--ink);
  white-space:nowrap;
  padding:5px 16px 5px 5px;border-radius:999px;border:1px solid transparent;
  transition:background .35s,border-color .35s;
}
.header-phone:hover{background:var(--soft);border-color:var(--line)}
.header-phone .ph-ico{
  position:relative;width:40px;height:40px;border-radius:50%;
  background:var(--navy);color:var(--accent);
  display:grid;place-items:center;transition:transform .5s var(--ease);
}
/* Quiet pulse so the phone number reads as the live action. */
.header-phone .ph-ico::after{
  content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);
  animation:ph-pulse 2.6s var(--ease) infinite;
}
@keyframes ph-pulse{0%{transform:scale(1);opacity:.65}70%,100%{transform:scale(1.5);opacity:0}}
.header-phone:hover .ph-ico{transform:rotate(12deg) scale(1.05)}
.header-phone svg{width:17px;height:17px}
.header-phone small{display:block;font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.04em}

/* place-items only sets align-items on a flex container, not justify-content —
   without it explicitly the 3 bars stack at the top of the box instead of
   centering vertically, since flex-direction is column here. */
.burger{width:46px;height:46px;border-radius:13px;border:1px solid var(--line);display:none;place-items:center;justify-content:center;gap:5px;flex-direction:column}
.burger span{width:19px;height:2px;background:var(--ink);border-radius:2px;transition:transform .4s var(--ease),opacity .3s}
body.nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Measured budget for the header row (see the three grid tracks above):
     lockup 210 + nav 469 + CTA 380 + 2x26 gap + 64 gutter = 1175px
   with the badge hidden, and 1355px once the badge adds 180px to the lockup.
   So the badge cannot appear until ~1400px, and below ~1340px the nav has to
   give back the few pixels it grew by. Anything tighter than that is the
   burger. */
@media (max-width:1340px){
  .nav > li > a,.nav > li > button{padding:10px 3px;font-size:16.5px}
  .header-phone small{display:none}
}
@media (max-width:1100px){
  .nav,.header-phone{display:none}
  .burger{display:flex}
  .header-cta .btn{display:none}
}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:1000;pointer-events:none;
}
.drawer-bg{position:absolute;inset:0;background:rgba(0,3,66,.5);opacity:0;transition:opacity .45s var(--ease);backdrop-filter:blur(3px)}
.drawer-panel{
  position:absolute;top:0;right:0;height:100%;width:min(420px,90vw);background:#fff;
  transform:translateX(102%);transition:transform .55s var(--ease);display:flex;flex-direction:column;
  box-shadow:var(--shadow-lg);
}
body.nav-open .drawer{pointer-events:auto}
body.nav-open .drawer-bg{opacity:1}
body.nav-open .drawer-panel{transform:none}
body.nav-open{overflow:hidden}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px var(--pad);border-bottom:1px solid var(--line)}
.drawer-close{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center}
.drawer-close svg{width:18px;height:18px}
.drawer-body{overflow-y:auto;padding:14px var(--pad) 28px;flex:1}
.m-item{border-bottom:1px solid var(--line)}
.m-item > a,.m-item > button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;padding:15px 2px;font-weight:600;font-size:16.5px;text-align:left}
.m-item > button svg{width:16px;height:16px;transition:transform .4s var(--ease);color:var(--primary)}
.m-item.open > button svg{transform:rotate(180deg)}
.m-sub{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.m-sub a{display:block;padding:11px 14px;font-size:14.5px;color:var(--muted);border-left:2px solid var(--line);margin-left:2px}
.m-sub a:hover{color:var(--primary);border-color:var(--primary)}
.m-sub h6{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);margin:14px 0 4px;font-weight:600}
.drawer-foot{padding:20px var(--pad) 26px;border-top:1px solid var(--line);display:grid;gap:10px}

/* ==========================================================================
   HERO — custom-built banner
   ========================================================================== */
/* overflow:hidden lives on .hero-fx (the decorative background layer only),
   not on .hero itself — an overflow:hidden ancestor clips position:sticky's
   containing block, which would stop .hero-badge from sticking below. */
.hero{position:relative;background:var(--navy);color:#fff;isolation:isolate}
.hero-fx{position:absolute;inset:0;overflow:hidden;z-index:-2}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg svg{width:100%;height:100%;object-fit:cover}
/* Gold is punctuation, not atmosphere — the glows stay barely perceptible. */
.hero-glow{
  position:absolute;z-index:-1;border-radius:50%;filter:blur(80px);opacity:.4;pointer-events:none;
  animation:float 16s ease-in-out infinite;
}
.hero-glow.g1{width:520px;height:520px;background:rgba(246,183,86,.20);top:-140px;left:-120px}
.hero-glow.g2{width:440px;height:440px;background:rgba(246,183,86,.14);bottom:-160px;right:12%;animation-delay:-6s}
.hero-glow.g3{width:340px;height:340px;background:rgba(27,36,103,.9);top:30%;right:-90px;animation-delay:-11s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(34px,-28px) scale(1.07)}66%{transform:translate(-26px,22px) scale(.95)}}

.hero-inner{
  display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(28px,4vw,72px);align-items:center;
  padding-block:clamp(56px,6.4vw,104px);
}
.hero-badge{
  display:inline-flex;align-items:center;gap:10px;padding:6px 6px 6px 16px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);font-size:13px;font-weight:400;
  backdrop-filter:blur(6px);
}
.hero-badge b{background:var(--accent);color:var(--navy);padding:4px 12px;border-radius:var(--radius-chip);font-size:12px;font-weight:600;letter-spacing:0}
/* Editorial display step — 64px at weight 600, line-height 1.12. */
.hero-h{font-size:clamp(40px,5.4vw,72px);font-weight:600;letter-spacing:0;line-height:1.12;margin-top:22px;max-width:16ch}
.hero-h em{font-style:normal;font-weight:600;color:var(--accent);letter-spacing:0}
.hero-sub{margin-top:20px;font-size:clamp(15px,1.5vw,18px);line-height:1.45;color:rgba(255,255,255,.72);max-width:52ch}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.hero-facts{
  display:flex;gap:clamp(18px,3vw,46px);margin-top:clamp(34px,4vw,54px);flex-wrap:wrap;
  padding-top:clamp(24px,3vw,34px);border-top:1px solid rgba(255,255,255,.16);
}
.hero-fact b{display:block;font-size:clamp(26px,3vw,40px);font-weight:600;letter-spacing:0;line-height:1.28;white-space:nowrap}
/* Direct child only — the counter <span> lives inside <b> and must inherit its size. */
.hero-fact > span{display:block;font-size:13px;color:rgba(255,255,255,.62);margin-top:7px;letter-spacing:0}

/* hero media collage */
.hero-media{position:relative;min-height:clamp(400px,46vw,600px)}
.hero-shape{
  position:absolute;inset:0;border-radius:160px 160px 36px 36px;overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.75);border:1px solid rgba(255,255,255,.16);
}
.hero-shape img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.6s var(--ease)}
.hero-shape:hover img{transform:scale(1.1)}
.hero-shape::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,3,66,.55));pointer-events:none}

/* Hero slideshow — crossfades between three studio photos */
.hs-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--ease),transform 8s linear}
.hs-slide.on{opacity:1;transform:scale(1.1)}
.hs-dots{position:absolute;left:0;right:0;bottom:20px;z-index:2;display:flex;justify-content:center;gap:9px}
.hs-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.45);transition:width .45s var(--ease),background .35s;padding:0}
.hs-dot.on{width:28px;border-radius:999px;background:var(--accent)}
.hs-dot:hover{background:#fff}

/* Hero banner motion */
.hero-wave{transform-origin:center bottom;animation:swell 13s ease-in-out infinite}
.hero-wave.w2{animation-duration:17s;animation-direction:reverse}
@keyframes swell{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-16px) scaleY(1.05)}}
.hero-lines{animation:drift 22s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translateX(0)}50%{transform:translateX(46px)}}
.hero-orbit{transform-origin:1290px 200px;animation:spin 90s linear infinite}
.hero-chip{
  position:absolute;background:#fff;color:var(--ink);border-radius:20px;padding:14px 18px;
  box-shadow:0 4px 12px 0 rgba(0,0,0,.06);border:1px solid var(--line);display:flex;align-items:center;gap:12px;
  backdrop-filter:blur(8px);animation:bob 6s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.hero-chip .ci{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--navy);color:var(--accent)}
.hero-chip .ci svg{width:20px;height:20px}
.hero-chip b{display:block;font-size:14.5px;font-weight:600;letter-spacing:0;line-height:1.4}
.hero-chip small{display:block;font-size:12px;color:var(--muted)}
.chip-a{left:-4%;top:16%}
.chip-b{right:-6%;bottom:22%;animation-delay:-2.5s}
.chip-c{left:6%;bottom:-4%;animation-delay:-4s}
.hero-ring{
  position:absolute;right:-10%;top:-8%;width:230px;height:230px;border-radius:50%;
  border:1.5px dashed rgba(255,255,255,.3);animation:spin 34s linear infinite;pointer-events:none
}
@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width:1040px){
  .hero-inner{grid-template-columns:1fr;gap:44px}
  .hero-media{min-height:420px;max-width:560px;margin-inline:auto;width:100%}
  .chip-a{left:0}.chip-b{right:0}.chip-c{left:8%}
}
@media (max-width:560px){
  .hero-chip{padding:11px 14px}
  .hero-chip .ci{width:34px;height:34px}
  .chip-c{display:none}
  .hero-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .hero-fact b{font-size:21px}
  .hero-fact > span{font-size:11.5px;margin-top:5px}
}

/* ---------- Trust marquee ---------- */
.marquee{background:var(--ink);color:#fff;overflow:hidden;padding:16px 0}
.marquee-track{display:flex;gap:56px;width:max-content;animation:slide 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee-item{display:flex;align-items:center;gap:12px;font-size:14.5px;font-weight:600;white-space:nowrap;color:rgba(255,255,255,.82)}
.marquee-item svg{width:17px;height:17px;color:var(--accent);flex:none}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */

/* Feature / value cards */
.grid{display:grid;gap:clamp(18px,2vw,26px)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1040px){.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.g-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

/* 36px surfaces on a 1px hairline — the border is the elevation, not a shadow. */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(24px,2.4vw,28px);position:relative;overflow:hidden;
  transition:transform .55s var(--ease),border-color .4s;
}
/* Gold rule that draws across the top edge on hover. */
.card::after{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);
}
.card > *{position:relative}
.card:hover{transform:translateY(-6px);border-color:var(--mist,#d4d4d8)}
.card:hover::after{transform:scaleX(1)}
.card-ico{
  width:56px;height:56px;border-radius:16px;display:grid;place-items:center;margin-bottom:20px;
  background:var(--navy);color:var(--accent);
  transition:transform .55s var(--ease),border-radius .5s;
}
.card-ico svg{width:26px;height:26px}
.card:hover .card-ico{transform:translateY(-3px);border-radius:50%}
.card-ico.alt{background:var(--accent);color:var(--navy)}
.card p{color:var(--muted);margin-top:11px;font-size:15px;line-height:1.45}
.card-num{
  position:absolute;top:14px;right:22px;font-size:56px;font-weight:600;line-height:1;letter-spacing:0;
  color:var(--accent);opacity:.28;transition:opacity .5s var(--ease),transform .6s var(--ease);
}
.card:hover .card-num{opacity:.5;transform:translateY(-4px)}

/* Service cards with image */
.svc-card{
  border-radius:var(--radius-lg);overflow:hidden;background:#fff;border:1px solid var(--line);
  transition:transform .55s var(--ease),border-color .4s;display:flex;flex-direction:column;
}
.svc-card:hover{transform:translateY(-6px);border-color:#d4d4d8}
.svc-media{position:relative;aspect-ratio:4/3;overflow:hidden}
.svc-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.svc-card:hover .svc-media img{transform:scale(1.09)}
.svc-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,3,66,.65))}
/* Tag pill: hairline treatment keeps category labels quiet. */
.svc-tag{
  position:absolute;left:16px;top:16px;z-index:2;background:#fff;color:var(--ink-2);
  font-size:12px;font-weight:500;letter-spacing:0;padding:5px 10px;border-radius:var(--radius-chip);
}
.svc-body{padding:clamp(20px,2vw,28px);display:flex;flex-direction:column;flex:1}
.svc-body h3{font-size:20px;letter-spacing:0;font-weight:600;line-height:1.5}
.svc-body p{color:var(--muted);font-size:14.6px;margin-top:10px;flex:1;line-height:1.45}
.svc-body .link-arrow{margin-top:18px}
.svc-card .svc-media .svc-float{
  position:absolute;right:16px;bottom:16px;z-index:2;width:44px;height:44px;border-radius:50%;background:#fff;
  color:var(--primary);display:grid;place-items:center;transform:translateY(12px);opacity:0;
  transition:transform .5s var(--ease),opacity .5s var(--ease)
}
.svc-card:hover .svc-float{transform:none;opacity:1}
.svc-float svg{width:18px;height:18px}

/* Icon variant of the service card — homepage "Sixteen treatments" grid only.
   Reuses .svc-card/.svc-body as-is; swaps the photo for an icon tile so
   .svc-tag needs a static (non-overlay) restyle here instead of the absolute
   positioning it gets over a photo above. */
.svc-card-icon{border:1px solid var(--line)}
.svc-icon-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:clamp(22px,2.2vw,28px) clamp(20px,2vw,28px) 4px}
.svc-icon{
  width:56px;height:56px;border-radius:16px;background:var(--soft);border:1px solid var(--line);color:var(--ink);
  display:grid;place-items:center;flex:none;transition:transform .5s var(--ease),background .5s var(--ease),color .5s var(--ease),border-color .5s;
}
.svc-icon svg{width:26px;height:26px}
.svc-card-icon:hover .svc-icon{background:var(--navy);border-color:var(--navy);color:var(--accent);transform:translateY(-4px)}
.svc-card-icon .svc-tag{
  position:static;background:transparent;border:1px solid var(--line);color:var(--ink-2);font-size:12px;font-weight:400;
  letter-spacing:0;text-transform:none;padding:4px 8px;border-radius:var(--radius-chip);
}

/* Homepage treatments slider — swaps the old 16-up static grid for a
   data-carousel track (same wiring as .rev-track/.rev-nav) so 4 icon cards
   show at a time on desktop instead of one long scroll. Breakpoints (1000px/
   680px) must match the perView() defaults the carousel JS falls back to
   when no data-per-view override changes them. */
.svc-viewport{overflow:hidden;padding:6px}
.svc-track{display:flex;gap:22px;transition:transform .7s var(--ease)}
.svc-track .svc-card{flex:0 0 calc((100% - 66px)/4)}
@media (max-width:1000px){.svc-track .svc-card{flex-basis:calc((100% - 22px)/2)}}
@media (max-width:680px){.svc-track .svc-card{flex-basis:100%}}
.svc-carousel .rev-nav{margin-top:30px}

/* Tabs / filter */
.tabs{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-bottom:clamp(28px,3vw,42px)}
.tab{
  padding:10px 20px;border-radius:999px;border:1px solid var(--line);font-weight:400;font-size:14px;
  color:var(--muted);transition:all .4s var(--ease);background:#fff;
}
.tab:hover{border-color:var(--ink);color:var(--ink)}
.tab.active{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:500}
.tab-hidden{display:none !important}

/* Split media block */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.2vw,80px);align-items:center}
.split.rev .split-media{order:2}
@media (max-width:960px){.split{grid-template-columns:1fr}.split.rev .split-media{order:0}}
.media-frame{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.media-frame img{width:100%;aspect-ratio:5/4;object-fit:cover;transition:transform 1.4s var(--ease)}
.media-frame:hover img{transform:scale(1.06)}
/* Tall studio portraits sitting in a landscape frame: crop from the top so the
   face stays in shot instead of being cut off by the default centre crop. */
.img-portrait{object-position:50% 8%}
.media-stack{position:relative}
.media-stack .media-frame:nth-child(2){
  position:absolute;right:-8%;bottom:-12%;width:46%;border:6px solid #fff;border-radius:var(--radius);
}
.media-stack .media-frame:nth-child(2) img{aspect-ratio:1}
@media (max-width:640px){.media-stack .media-frame:nth-child(2){right:0;bottom:-8%;width:44%}}
.media-badge{
  position:absolute;left:-4%;top:8%;background:var(--accent);color:var(--navy);border-radius:20px;padding:16px 20px;
  text-align:center;animation:bob 7s ease-in-out infinite
}
.media-badge b{display:block;font-size:28px;font-weight:600;letter-spacing:0;line-height:1.28}
.media-badge span{font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}

.check-list{display:grid;gap:14px;margin-top:26px}
.check-list li{display:flex;gap:13px;align-items:flex-start;font-size:15.4px;color:var(--ink-2)}
.check-list li b{font-weight:600}
.check-list li p{color:var(--muted);font-size:14.2px;margin-top:2px}
.check-ico{
  width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent-deep);
  display:grid;place-items:center;flex:none;margin-top:2px
}
.check-ico svg{width:14px;height:14px}
.section-dark .check-ico{background:rgba(255,255,255,.14);color:var(--accent)}
.section-dark .check-list li{color:rgba(255,255,255,.86)}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px)}
@media (max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}
/* Headline metrics: large navy number, quiet steel descriptor beneath. */
.stat{
  position:relative;overflow:hidden;
  background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:clamp(22px,2.2vw,28px);
  transition:transform .5s var(--ease),border-color .4s;text-align:center
}
.stat > *{position:relative}
.stat:hover{transform:translateY(-6px);border-color:#d4d4d8}
.stat b{
  display:block;font-size:clamp(38px,4.2vw,64px);font-weight:600;letter-spacing:0;line-height:1.22;
  color:var(--ink);
}
/* Child combinator, not a descendant one: the number itself is markup like
   <b><span data-count="12">…</span></b> so the count-up target is a span too.
   A plain ".stat span" caught it as well and rendered every headline metric at
   label size. */
.stat > span{display:block;color:var(--muted);font-size:15.5px;margin-top:10px;line-height:1.45}
.section-dark .stat{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.section-dark .stat b{color:#fff}
.section-dark .stat > span{color:rgba(255,255,255,.66)}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2vw,26px);counter-reset:s;position:relative}
@media (max-width:1000px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding-top:56px}
.step::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  position:absolute;top:0;left:0;width:44px;height:44px;border-radius:50%;background:var(--navy);color:var(--accent);
  display:grid;place-items:center;font-weight:600;font-size:14px;
  transition:transform .5s var(--ease),background .4s,color .4s
}
.step:hover::before{transform:scale(1.1);background:var(--accent);color:var(--navy)}
.step::after{content:"";position:absolute;top:21px;left:56px;right:-14px;height:1.5px;background:repeating-linear-gradient(90deg,var(--line) 0 7px,transparent 7px 14px)}
.step:last-child::after{display:none}
@media (max-width:1000px){.step:nth-child(2n)::after{display:none}}
@media (max-width:560px){.step::after{display:none}}
.step h4{margin-bottom:9px}
.step p{color:var(--muted);font-size:14.6px}
.section-dark .step p{color:rgba(255,255,255,.72)}
.section-dark .step::after{background:repeating-linear-gradient(90deg,rgba(255,255,255,.24) 0 7px,transparent 7px 14px)}

/* Before / After slider */
.ba{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:16/10;
  box-shadow:var(--shadow);cursor:ew-resize;user-select:none;background:var(--soft)
}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba-after{clip-path:inset(0 0 0 50%)}
.ba-handle{
  position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;transform:translateX(-50%);
  box-shadow:0 0 24px rgba(0,0,0,.4);pointer-events:none
}
.ba-handle::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;
  border-radius:50%;background:#fff;box-shadow:0 10px 26px rgba(0,0,0,.35);
}
.ba-handle span{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;color:var(--primary);
  font-size:19px;font-weight:600;letter-spacing:-2px
}
.ba-label{
  position:absolute;bottom:16px;padding:7px 15px;border-radius:999px;background:rgba(0,3,66,.72);color:#fff;
  font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;backdrop-filter:blur(6px);pointer-events:none
}
.ba-label.l{left:16px}.ba-label.r{right:16px;background:rgba(0,3,66,.9)}

/* Smile gallery */
.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(22px,2.4vw,32px)}
@media (max-width:900px){.case-grid{grid-template-columns:1fr}}
.case{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .5s var(--ease),transform .5s var(--ease)
}
.case:hover{border-color:#d4d4d8;transform:translateY(-5px)}
/* The intraoral pairs are cropped to a flat 2:1, so the slider has to drop the
   default 16/10 or object-fit:cover would shave the outer teeth off each arch.
   Corners and shadow come from .case instead, otherwise they double up. */
.case .ba{aspect-ratio:2/1;border-radius:0;box-shadow:none}
.case-body{padding:clamp(20px,2vw,26px);display:flex;flex-direction:column;gap:10px;flex:1}
.case-body h3{font-size:20px;letter-spacing:0;font-weight:600;line-height:1.5}
.case-body p{font-size:14.8px;color:var(--muted);line-height:1.55;flex:1}
/* The one filled gold badge — reserved for the treatment category. */
.case-tag{
  align-self:flex-start;background:var(--accent);color:var(--navy);border-radius:var(--radius-chip);
  padding:4px 8px;font-size:12px;font-weight:500;letter-spacing:0;text-transform:none
}
.case-facts{display:flex;flex-wrap:wrap;gap:8px;padding-top:4px}
.case-facts span{
  background:transparent;color:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-chip);
  padding:4px 8px;font-size:12.5px;font-weight:400
}
/* Featured case: two stills side by side. These carry BEFORE/AFTER burned into
   the photo itself, so they deliberately skip the .ba slider and its labels. */
.case-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,18px)}
.case-two img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius);display:block}
@media (max-width:520px){.case-two{grid-template-columns:1fr}}
/* Consent/authenticity note under the grid. */
.case-note{
  margin-top:clamp(28px,3vw,40px);padding:18px 22px;border-radius:var(--radius);
  background:var(--soft);border:1px solid var(--line);font-size:13.6px;color:var(--muted);line-height:1.7
}

/* Video testimonials — source clips are 9:16, so the shells lock to that ratio
   and the pair sits centred rather than stretching across the full width. */
.vid-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,320px));
  gap:clamp(20px,3vw,40px);justify-content:center;margin-top:clamp(30px,4vw,52px);
}
.vid-card{margin:0;display:flex;flex-direction:column;gap:18px}
.vid-shell{
  position:relative;aspect-ratio:9/16;border-radius:var(--radius);overflow:hidden;
  background:var(--navy);border:1px solid var(--line);
}
.vid-el{width:100%;height:100%;object-fit:cover;display:block;background:var(--navy)}
/* Gold disc, navy glyph — the one accent, consistent with every other CTA. */
.vid-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:66px;height:66px;border-radius:50%;border:0;cursor:pointer;
  background:var(--accent);color:var(--navy);
  display:grid;place-items:center;
  transition:transform .4s var(--ease),background .3s;
}
.vid-play svg{width:24px;height:24px;fill:currentColor;stroke:none;margin-left:3px}
.vid-play:hover{transform:translate(-50%,-50%) scale(1.08);background:var(--accent-deep)}
.vid-play:focus-visible{outline:3px solid #fff;outline-offset:3px}
.vid-len{
  position:absolute;right:14px;bottom:14px;padding:5px 11px;border-radius:var(--radius-chip);
  background:rgba(0,3,66,.72);color:#fff;font-size:12.5px;font-weight:500;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
/* Once playing, the poster furniture gets out of the way. */
.vid-shell.is-playing .vid-play,.vid-shell.is-playing .vid-len{opacity:0;pointer-events:none}
.vid-play,.vid-len{transition:opacity .3s}
.vid-cap{display:flex;flex-direction:column;gap:10px;padding:0 4px}
.vid-quote{font-size:16.5px;font-weight:500;color:var(--ink);line-height:1.45;margin:0}
.vid-who{display:flex;flex-direction:column;gap:2px}
.vid-who b{font-size:14.5px;font-weight:600;color:var(--ink)}
.vid-who span{font-size:13.5px;color:var(--muted)}
/* Arrows and dots are a mobile-only affordance — on desktop both cards are
   already side by side, so there is nothing to page through. */
.vid-nav{display:none}

/* ---- Mobile: horizontal scroll-snap slider ----
   Native overflow scrolling rather than a JS transform, so the swipe keeps the
   platform's own momentum and rubber-banding. The track bleeds to both screen
   edges and the cards snap to centre, which leaves a sliver of the next clip
   showing — that peek is what tells you there is a second one. */
@media (max-width:720px){
  .vid-slider{position:relative}
  .vid-grid{
    display:flex;justify-content:flex-start;   /* centring would strand the first card */
    gap:14px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    /* Full-bleed out of .wrap, then padded back in so card one still lines up
       with the body copy above it. */
    margin-inline:calc(var(--pad) * -1);
    /* Exactly half the leftover width, so card one is already centred at
       scrollLeft 0 and the last card can still reach the centre. */
    padding:0 calc(50vw - min(37vw,150px)) 4px;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .vid-grid::-webkit-scrollbar{display:none}
  .vid-card{flex:0 0 min(74vw,300px);scroll-snap-align:center;scroll-snap-stop:always}
  .vid-cap{text-align:center;align-items:center}

  /* ‹ · · › — the arrows reuse .rev-btn so they match the reviews carousel
     exactly, including the disabled treatment at either end of the track. */
  .vid-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:24px}
  .vid-nav .rev-btn{width:44px;height:44px}
  .vid-nav .rev-btn svg{width:16px;height:16px}
  .vid-dots{display:flex;justify-content:center;gap:9px}
  .vid-dot{
    width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
    background:#d4d4da;transition:width .35s var(--ease),background .35s
  }
  .vid-dot.active{width:24px;border-radius:10000px;background:var(--accent)}
  .vid-dot:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
}
/* Someone who prefers reduced motion still gets the slider, just without the
   smooth scroll animation when a dot is pressed. */
@media (prefers-reduced-motion:reduce){
  .vid-grid{scroll-behavior:auto}
}

/* Reviews */
.rev-track{display:flex;gap:22px;transition:transform .7s var(--ease)}
.rev-viewport{overflow:hidden;padding:6px}
.rev-card{
  flex:0 0 calc((100% - 44px)/3);background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(24px,2.4vw,34px);display:flex;flex-direction:column;gap:16px;
  transition:box-shadow .5s var(--ease),transform .5s var(--ease)
}
.rev-card:hover{box-shadow:var(--shadow);transform:translateY(-6px)}
@media (max-width:1000px){.rev-card{flex-basis:calc((100% - 22px)/2)}}
@media (max-width:680px){.rev-card{flex-basis:100%}}
.rev-quote{font-size:16px;color:var(--ink-2);line-height:1.7;flex:1}
.rev-person{display:flex;align-items:center;gap:13px;padding-top:16px;border-top:1px solid var(--line)}
.rev-person img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.rev-person b{display:block;font-size:15px;font-weight:600}
.rev-person span{font-size:12.8px;color:var(--muted)}
.rev-nav{display:flex;gap:10px;justify-content:center;margin-top:34px}
.rev-btn{
  width:50px;height:50px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  transition:all .4s var(--ease);background:#fff
}
.rev-btn:hover{background:var(--navy);border-color:var(--navy);color:#fff;transform:translateY(-3px)}
.rev-btn svg{width:18px;height:18px}
.rev-btn[disabled]{opacity:.35;pointer-events:none}

/* Team */
.team-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--soft)}
.team-media{aspect-ratio:3/4;overflow:hidden;position:relative}
.team-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s}
.team-card:hover .team-media img{transform:scale(1.07)}
.team-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(0,3,66,.86));opacity:.9;transition:opacity .5s}
.team-info{position:absolute;left:0;right:0;bottom:0;padding:24px;color:#fff;z-index:2}
.team-info b{display:block;font-size:19px;font-weight:600;letter-spacing:0}
.team-info span{font-size:13px;color:rgba(255,255,255,.78)}
.team-info p{
  font-size:13.6px;color:rgba(255,255,255,.82);margin-top:0;max-height:0;overflow:hidden;opacity:0;
  transition:max-height .55s var(--ease),opacity .45s,margin-top .5s
}
.team-card:hover .team-info p{max-height:130px;opacity:1;margin-top:11px}

/* Accordion */
.acc{max-width:900px;margin-inline:auto}
.acc-item{border:1px solid var(--line);border-radius:20px;margin-bottom:12px;background:#fff;overflow:hidden;transition:box-shadow .45s,border-color .4s}
.acc-item.open{box-shadow:var(--shadow-soft);border-color:transparent}
.acc-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 24px;
  text-align:left;font-weight:600;font-size:16.5px;letter-spacing:0
}
.acc-q .ai{
  width:34px;height:34px;border-radius:50%;background:var(--primary-soft);color:var(--primary);flex:none;
  display:grid;place-items:center;transition:transform .5s var(--ease),background .4s,color .4s
}
.acc-q .ai svg{width:15px;height:15px}
.acc-item.open .ai{background:var(--navy);color:var(--accent);transform:rotate(135deg)}
.acc-a{max-height:0;overflow:hidden;transition:max-height .55s var(--ease)}
.acc-a p{padding:0 24px 24px;color:var(--muted);font-size:15.2px;max-width:70ch}

/* CTA band */
.cta-band{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);color:#fff;
  background:var(--navy);
  padding:clamp(38px,5vw,74px);display:grid;grid-template-columns:1.25fr .75fr;gap:36px;align-items:center;
}
@media (max-width:900px){.cta-band{grid-template-columns:1fr;text-align:center}.cta-band .btn-row{justify-content:center}}
.cta-band::before{
  content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-90px;top:-160px;
  background:radial-gradient(circle,rgba(246,183,86,.16),transparent 70%)
}
.cta-band::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);background-size:26px 26px;opacity:.5
}
.cta-band > *{position:relative;z-index:2}
.cta-band h2{font-size:clamp(28px,3.4vw,46px);letter-spacing:0;line-height:1.28}
.cta-band p{color:rgba(255,255,255,.72);margin-top:14px;max-width:52ch}
.cta-side{display:grid;gap:12px;justify-items:start}
@media (max-width:900px){.cta-side{justify-items:center}}
.cta-phone{display:flex;align-items:center;gap:14px;font-size:clamp(24px,2.6vw,34px);font-weight:600;letter-spacing:0}
.cta-phone svg{width:26px;height:26px;color:var(--accent)}

/* Insurance logos */
.logo-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media (max-width:1000px){.logo-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.logo-grid{grid-template-columns:repeat(2,1fr)}}
.logo-cell{
  background:#fff;border:1px solid var(--line);border-radius:20px;min-height:104px;
  display:grid;place-items:center;padding:18px;font-weight:500;font-size:15.5px;color:var(--ink-2);
  letter-spacing:0;text-align:center;transition:all .45s var(--ease)
}
.logo-cell:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft);color:var(--primary);border-color:transparent}

/* Insurance band — the carriers sit over two transparent background layers:
   a reception photograph faded almost out, and an oversized gold watermark of
   the studio mark bled off the left edge. Both are decorative, so the markup
   is aria-hidden and everything here is purely presentational. */
.section-insurance{position:relative;isolation:isolate}
.ins-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
/* Very low opacity plus desaturation keeps the photo as texture, never as a
   picture competing with the copy — headline contrast stays well past AA. */
.ins-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.15;filter:grayscale(1) contrast(.9);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
}
/* Watermark: large and translucent, but small enough that the crown and roots
   still read as the studio mark rather than as abstract stripes. Bled slightly
   off the left edge so it feels like a print watermark, not a logo parked in
   the background. */
.ins-mark{
  position:absolute;left:-4%;top:50%;transform:translateY(-50%);
  width:auto;height:86%;opacity:.08
}
@media (max-width:900px){.ins-mark{left:-16%;height:66%;opacity:.06}}
/* Frosted carriers so the artwork behind reads through them. */
.section-insurance .logo-cell{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)
}
.section-insurance .logo-cell:hover{
  background:rgba(255,255,255,.13);border-color:var(--accent);color:#fff;box-shadow:none
}
.ins-note{
  margin:clamp(26px,3vw,38px) auto 0;max-width:64ch;text-align:center;
  font-size:15px;color:rgba(255,255,255,.68)
}
.ins-note a{
  display:inline-flex;align-items:center;gap:7px;color:var(--accent);font-weight:500;
  white-space:nowrap
}
.ins-note a svg{width:16px;height:16px;transition:transform .35s var(--ease)}
.ins-note a:hover svg{transform:translateX(4px)}

/* Page hero (inner pages) */
.page-hero{
  position:relative;overflow:hidden;background:var(--primary-deep);color:#fff;
  padding-block:clamp(56px,6.5vw,104px);isolation:isolate
}
.page-hero .hero-glow.g1{width:420px;height:420px;top:-160px;left:-100px}
.page-hero .hero-glow.g2{width:360px;height:360px;bottom:-190px;right:6%}
.page-hero-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(26px,4vw,64px);align-items:center}
@media (max-width:960px){.page-hero-inner{grid-template-columns:1fr}}
.crumbs{display:flex;gap:9px;align-items:center;font-size:13.5px;color:rgba(255,255,255,.62);flex-wrap:wrap;margin-bottom:20px}
.crumbs a:hover{color:var(--accent)}
.crumbs svg{width:13px;height:13px;opacity:.5}
.page-hero h1{font-size:clamp(34px,4.6vw,64px);letter-spacing:0;max-width:17ch}
.page-hero .sub{color:rgba(255,255,255,.76);max-width:56ch}
.page-hero-media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.14)}
.page-hero-media img{width:100%;aspect-ratio:16/11;object-fit:cover}

/* Forms */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(26px,3vw,42px);box-shadow:var(--shadow-soft)}
.field{display:grid;gap:7px;margin-bottom:16px}
.field label{font-size:13.2px;font-weight:600;color:var(--ink-2);letter-spacing:.01em}
.field input,.field select,.field textarea{
  border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:#fff;font-size:15px;
  transition:border-color .35s,box-shadow .35s;width:100%
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-soft)
}
.field textarea{min-height:130px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.form-row{grid-template-columns:1fr}}
.form-note{font-size:12.8px;color:var(--muted);margin-top:12px}

/* Info tiles */
.info-tile{display:flex;gap:16px;align-items:flex-start;padding:22px;border-radius:24px;background:#fff;border:1px solid var(--line);transition:all .45s var(--ease)}
.info-tile:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft)}
.info-tile .ti{width:46px;height:46px;border-radius:14px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;flex:none}
.info-tile .ti svg{width:21px;height:21px}
.info-tile b{display:block;font-size:15.5px;font-weight:600}
.info-tile p,.info-tile a{color:var(--muted);font-size:14.4px;margin-top:4px;display:block}
.info-tile a:hover{color:var(--primary)}

/* Pricing */
.price-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(26px,2.6vw,38px);
  display:flex;flex-direction:column;transition:all .5s var(--ease);position:relative;overflow:hidden
}
.price-card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.price-card.feat{background:var(--primary-deep);color:#fff;border-color:transparent;box-shadow:var(--shadow-lg)}
.price-card.feat p,.price-card.feat .price-list li{color:rgba(255,255,255,.8)}
.price-flag{position:absolute;top:22px;right:-38px;transform:rotate(38deg);background:var(--accent);color:#000342;font-size:11px;font-weight:600;letter-spacing:.1em;padding:6px 44px;text-transform:uppercase}
.price-amt{display:flex;align-items:baseline;gap:6px;margin:16px 0 6px}
.price-amt b{font-size:clamp(38px,4vw,54px);font-weight:600;letter-spacing:0;line-height:1}
.price-amt span{color:var(--muted);font-size:14px}
.price-card.feat .price-amt span{color:rgba(255,255,255,.7)}
.price-list{display:grid;gap:12px;margin:24px 0;flex:1}
.price-list li{display:flex;gap:11px;font-size:14.8px;color:var(--ink-2);align-items:flex-start}
.price-list svg{width:18px;height:18px;color:var(--primary);flex:none;margin-top:3px}
.price-card.feat .price-list svg{color:var(--accent)}

/* Blog */
.post-card{border-radius:var(--radius-lg);overflow:hidden;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;transition:all .5s var(--ease)}
.post-card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.post-media{aspect-ratio:16/10;overflow:hidden}
.post-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.post-card:hover .post-media img{transform:scale(1.08)}
.post-body{padding:26px;display:flex;flex-direction:column;flex:1}
.post-meta{display:flex;gap:12px;align-items:center;font-size:12.5px;color:var(--muted);margin-bottom:12px}
.post-meta b{color:var(--primary);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:11.5px}
.post-body h3{font-size:19.5px;letter-spacing:0}
.post-body p{color:var(--muted);font-size:14.6px;margin-top:10px;flex:1}

/* Map */
.map-frame{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-soft);min-height:420px;background:var(--soft)}
.map-frame iframe{width:100%;height:100%;min-height:420px;border:0;display:block;filter:saturate(.9)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--navy);color:rgba(255,255,255,.72);padding-top:clamp(54px,6vw,88px);position:relative;overflow:hidden}
.site-footer::before{
  content:"";position:absolute;width:640px;height:640px;border-radius:50%;left:-220px;top:-320px;
  background:radial-gradient(circle,rgba(246,183,86,.08),transparent 70%)
}
.site-footer .wrap{position:relative}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.25fr;gap:clamp(26px,3vw,52px)}
@media (max-width:1000px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.foot-grid{grid-template-columns:1fr}}
/* On the navy footer the lockup matches the supplied artwork exactly: gold
   mark, white wordmark, gold "STUDIO" tail. */
.foot-brand .logo-mark{color:var(--accent);background:none;padding:0;border-radius:0}
.foot-brand .logo-txt b{color:#fff}
.foot-brand .logo-txt > span{color:var(--accent)}
.foot-brand p{margin-top:18px;font-size:14.6px;max-width:38ch}
.foot h5{color:#fff;font-size:13px;letter-spacing:.15em;text-transform:uppercase;margin-bottom:18px;font-weight:600}
.foot li{margin-bottom:10px}
.foot li a{font-size:14.6px;transition:color .3s,padding-left .35s var(--ease);display:inline-block}
.foot li a:hover{color:var(--accent);padding-left:6px}
.foot-contact li{display:flex;gap:11px;align-items:flex-start;font-size:14.6px}
.foot-contact svg{width:17px;height:17px;color:var(--accent);flex:none;margin-top:4px}
.socials{display:flex;gap:10px;margin-top:22px}
.socials a{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;transition:all .45s var(--ease)}
.socials a:hover{background:var(--accent);border-color:var(--accent);color:var(--navy);transform:translateY(-4px)}
.socials svg{width:17px;height:17px}
.foot-bottom{
  margin-top:clamp(40px,4.4vw,64px);padding:24px 0;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13.5px
}
.foot-bottom a:hover{color:var(--accent)}
.hours-list li{display:flex;justify-content:space-between;gap:16px;font-size:14.4px;padding:7px 0;border-bottom:1px dashed rgba(255,255,255,.1)}
.hours-list li b{color:#fff;font-weight:500}

/* Floating helpers */
.to-top{
  position:fixed;right:22px;bottom:22px;width:50px;height:50px;border-radius:50%;background:var(--primary);color:#fff;
  display:grid;place-items:center;box-shadow:var(--shadow);z-index:800;opacity:0;visibility:hidden;transform:translateY(14px);
  transition:all .45s var(--ease)
}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--accent);color:var(--navy);transform:translateY(-4px)}
.to-top svg{width:19px;height:19px}
.mobile-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:850;background:#fff;border-top:1px solid var(--line);
  display:none;grid-template-columns:1fr 1fr;gap:10px;padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom))
}
@media (max-width:700px){
  .mobile-bar{display:grid}
  body{padding-bottom:78px}
  .to-top{bottom:88px}
}
.scroll-progress{position:fixed;top:0;left:0;height:3px;background:var(--accent);z-index:1200;width:0;transition:width .1s linear}

/* Utilities */
.mt-0{margin-top:0}.mt-s{margin-top:14px}.mt-m{margin-top:26px}.mt-l{margin-top:clamp(30px,4vw,52px)}
.divider{height:1px;background:var(--line-soft);margin-block:clamp(34px,4vw,56px)}
.prose p{color:var(--muted);font-size:16px;margin-bottom:18px;max-width:72ch}
.prose h3{margin:32px 0 12px}
.prose ul{display:grid;gap:11px;margin-bottom:20px}
.prose ul li{display:flex;gap:11px;color:var(--muted);font-size:15.4px}
.prose ul li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;margin-top:9px}
.pill-note{display:inline-flex;gap:9px;align-items:center;background:var(--accent-soft);color:var(--accent-deep);border-radius:999px;padding:9px 18px;font-size:13.5px;font-weight:600}
.pill-note svg{width:16px;height:16px}