/* Calm Dental — one stylesheet for the whole site.
   FONTS: swap the two families below for your Squarespace Site Styles fonts. */
:root{
  --ink:oklch(0.24 0.018 55);
  --ink-2:oklch(0.32 0.018 55);
  --ink-3:oklch(0.45 0.015 60);
  --ink-4:oklch(0.55 0.012 60);
  --paper:oklch(0.985 0.005 85);
  --paper-2:oklch(0.965 0.008 85);
  --line:oklch(0.89 0.008 85);
  --forest:#2a392e;            /* logo green */
  --tan:#b49b85;               /* logo tan */
  --green:oklch(0.41 0.042 155);
  --green-2:#2a392e;
  --lime:var(--tan);
  --lime-ink:oklch(0.24 0.025 60);
  --tint:oklch(0.945 0.014 155);
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Libre Franklin",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink-2);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--green-2);text-decoration:underline}
h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--ink);letter-spacing:-0.01em;text-wrap:balance;margin:0}
h1{font-size:clamp(31px,6vw,52px);line-height:1.06}
h2{font-size:clamp(24px,3.4vw,34px);line-height:1.15}
h3{font-family:var(--sans);font-weight:600;font-size:16px;line-height:1.4;letter-spacing:0}
p{margin:0;text-wrap:pretty}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
@media(min-width:900px){.wrap{padding:0 40px}}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:var(--paper);padding:12px 16px;border:2px solid var(--green)}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:oklch(0.985 0.005 85 / .96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
/* Nothing in the header may shrink below its own content: a shrunk nav
   overflows leftwards and lands on top of the wordmark. The ladder of
   breakpoints below is what keeps the row inside the container instead. */
.hdr-in>*{flex:none}
.logo{font-family:var(--serif);font-size:21px;color:var(--ink);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:baseline}
.logo-mark{display:inline-block;width:17px;height:15px;flex:none;opacity:.92;margin-left:9px;vertical-align:baseline}
.logo:hover{text-decoration:none;color:var(--ink)}
.nav{display:none}
.nav a{font-size:15px;font-weight:500;color:var(--ink-2);white-space:nowrap}
.nav a[aria-current]{color:var(--green);text-decoration:underline;text-underline-offset:4px}
@media(min-width:610px){
  .nav{display:flex;align-items:center;gap:12px}
  .nav .nav-x,.nav .nav-b,.nav .nav-c{display:none}
}
@media(min-width:800px){.nav .nav-c{display:inline-block}}
@media(min-width:900px){.nav .nav-b{display:inline-block}}
@media(min-width:1060px){.nav{gap:13px}.nav .nav-x{display:inline-block}.hdr-in{gap:28px}}
@media(max-width:999px){.hdr-btns .mini:not(.go){display:none}}
@media(min-width:1290px){.nav{gap:17px}}
@media(min-width:1400px){.nav{gap:22px}}

/* compact menu, below 980px only */
.menu{position:relative}
.menu summary{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 15px;border-radius:12px;border:1px solid var(--line);font-size:14px;font-weight:500;color:var(--ink-2);cursor:pointer;list-style:none;white-space:nowrap}
.menu summary::-webkit-details-marker{display:none}
.menu summary::after{content:"";width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.menu[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.menu summary:hover{border-color:var(--ink-4);color:var(--ink)}
.menu-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:60;min-width:270px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:8px;box-shadow:0 18px 40px -18px oklch(0.24 0.018 55 / .28);display:grid;gap:2px}
.menu-panel a{display:block;padding:11px 12px;border-radius:12px;font-size:15.5px;font-weight:500;color:var(--ink-2)}
.menu-panel a:hover{background:var(--paper-2);color:var(--ink);text-decoration:none}
.menu-panel a[aria-current]{color:var(--green)}
.menu-panel .sep{height:1px;background:var(--line);margin:6px 4px}
.menu-panel .go{background:var(--tan);color:var(--lime-ink);text-align:center;font-weight:600}
.menu-panel .go:hover{background:oklch(0.82 0.035 70);color:var(--lime-ink)}
@media(min-width:1060px){.menu{display:none}}
.hdr-btns{display:flex;gap:8px}
.nav a.hdr-cta{display:none;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:12px;background:var(--tan);color:var(--lime-ink);font-size:15px;font-weight:600}
.nav a.hdr-cta:hover{background:oklch(0.82 0.035 70);color:var(--lime-ink);text-decoration:none}
.mini{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 15px;border-radius:12px;border:1px solid var(--line);font-size:14px;font-weight:500;color:var(--ink-2)}
.mini:hover{text-decoration:none;border-color:var(--ink-4);color:var(--ink)}
.mini.go{background:var(--tan);border-color:var(--tan);color:var(--lime-ink);font-weight:600}
.mini.go:hover{background:oklch(0.82 0.035 70);border-color:oklch(0.82 0.035 70);color:var(--lime-ink)}
/* Raised from 1200px when the language tab was added: at 1200 the CTA plus
   the tab left no gap at all between the wordmark and "Philosophy". */
@media(min-width:1290px){.mini{display:none}.nav a.hdr-cta{display:inline-flex}}
/* Language toggle. Styled like .mini but deliberately outside the rules that
   hide .mini below 930px and above 1200px — the switch has to be reachable at
   every width, so it is the one header button that never disappears. */
.lang{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 13px;border-radius:12px;border:1px solid var(--line);font-size:14px;font-weight:500;color:var(--ink-2);white-space:nowrap}
/* Measured, not guessed: with the language tab the header needs 395px, so it
   does not fit a 360, 375 or 390px phone alongside the wordmark, Book and
   Menu. Below 410px the tab moves into the Menu panel instead, where it is
   the first item. Above that it stays in the header. */
.menu-panel .lang-menu{display:none}
@media(max-width:409px){
  .lang{display:none}
  .menu-panel .lang-menu{display:block;color:var(--green);font-weight:600}
}
/* 320px devices were 11px over even before any of this — the wordmark, Book and
   Menu alone did not fit. Tightened just enough, only at that size. */
@media(max-width:359px){
  .logo{font-size:19px}
  .mini,.menu summary{padding:0 12px}
}
.lang:hover{text-decoration:none;border-color:var(--ink-4);color:var(--ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 24px;border-radius:12px;font-size:16.5px;font-weight:600;text-align:center;border:1px solid transparent;cursor:pointer}
.btn:hover{text-decoration:none}
.btn-1{background:var(--lime);color:var(--lime-ink)}
.btn-1:hover{background:oklch(0.82 0.035 70);color:var(--lime-ink)}
.btn-2{background:transparent;border-color:oklch(0.44 0.02 60);color:oklch(0.93 0.008 85);font-weight:500;font-size:15.5px;min-height:48px}
.btn-3{background:var(--lime);color:var(--lime-ink)}
.btn-3:hover{background:oklch(0.82 0.035 70);color:var(--lime-ink)}
.btn-4{background:var(--paper);border-color:var(--line);color:var(--ink-2);font-weight:500;min-height:48px}
.btn-4:hover{border-color:var(--ink-4);color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:10px}
.btn-col{display:flex;flex-direction:column;gap:9px}
/* The form is still there, just no longer the loudest thing on the page:
   WhatsApp is the route the clinic prefers, and this is the way back to a
   form for anyone who would rather not message. */
.rail-note{margin:10px 0 0;font-size:14px;line-height:1.5;text-align:center;color:oklch(0.80 0.012 85)}
.rail-alt{margin:7px 0 0;font-size:14.5px;text-align:center}
.rail-alt a{color:oklch(0.86 0.012 85);text-decoration:underline;text-underline-offset:3px}
.rail-alt a:hover{color:#fff}

/* breadcrumb */
.crumb{font-family:var(--mono);font-size:12px;color:var(--ink-4);padding-top:16px}
.crumb a{color:var(--ink-4)}

/* sections */
.sec{padding:46px 0}
@media(min-width:900px){.sec{padding:66px 0}}
.sec-quiet{padding:74px 0}
@media(min-width:900px){.sec-quiet{padding:124px 0}}
.statement{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:46px 0}
@media(min-width:900px){.statement{padding:68px 0}}
.stmt-in{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:900px){.stmt-in{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:58px;align-items:center}}
.stmt-lead{font-family:var(--serif);font-weight:300;font-size:clamp(25px,3.6vw,40px);line-height:1.2;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.stmt-sub{font-size:17.5px;line-height:1.7;color:var(--ink-3);max-width:48ch}
.sec-tint{background:var(--paper-2)}
.sec-dark{background:var(--ink);color:oklch(0.85 0.012 75)}
.sec-dark h1,.sec-dark h2,.sec-dark h3{color:oklch(0.96 0.008 85)}
.stack{display:flex;flex-direction:column;gap:14px}
.stack-lg{display:flex;flex-direction:column;gap:22px}
.lede{font-size:19px;line-height:1.6;color:var(--ink-2)}
.lede strong{font-weight:600}
.muted{font-size:14px;line-height:1.55;color:var(--ink-4)}

/* answer block — the paragraph AI answers lift */
.answer{padding:18px 20px;border:1px solid oklch(0.88 0.022 155);background:oklch(0.962 0.012 155);border-radius:12px;display:flex;flex-direction:column;gap:12px}
.answer-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:oklch(0.42 0.04 155)}
.answer p{font-size:17.5px;line-height:1.6;color:oklch(0.26 0.018 155)}

/* facts */
.facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
@media(min-width:760px){.facts{grid-template-columns:repeat(4,1fr)}}
.fact{background:var(--paper-2);padding:14px 16px;display:flex;flex-direction:column;gap:3px}
.fact dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);margin:0}
.fact dd{margin:0;font-size:16px;font-weight:600;color:var(--ink)}

/* rows / lists */
.rows{display:flex;flex-direction:column;gap:1px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;padding:12px 16px;background:var(--paper-2);font-size:16px;font-weight:500;color:var(--ink-2)}
.row:hover{background:var(--tint);text-decoration:none;color:var(--ink)}
.row span{color:var(--green);flex:none}
.defs{display:flex;flex-direction:column;gap:11px;margin:0}
.def{display:flex;gap:12px;align-items:baseline}
/* Fixed at 78px this overflowed on any label longer than about twelve
   characters — "Undergraduate awards" ran underneath the value beside it. */
.def dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--green);flex:0 0 118px;width:118px;margin:0;line-height:1.45;overflow-wrap:break-word}
@media(max-width:559px){.def{flex-direction:column;gap:3px}.def dt{flex:none;width:auto}}
.def dd{margin:0;font-size:16px;line-height:1.5;color:var(--ink-2)}
.steps{display:flex;flex-direction:column;gap:13px;margin:0;padding:0;list-style:none;counter-reset:s}
.steps li{display:flex;gap:13px;align-items:flex-start;counter-increment:s}
.steps li::before{content:"0" counter(s);font-family:var(--mono);font-size:12px;color:var(--green);flex:none;width:20px;padding-top:4px}
.steps p{font-size:16.5px;line-height:1.6}
.bullets{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:9px}
.bullets li{font-size:16.5px;line-height:1.6;color:var(--ink-2)}

/* cards */
.grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:640px){.grid-2{grid-template-columns:1fr 1fr}}
@media(min-width:860px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--paper-2);color:var(--ink-2)}
.card:hover{text-decoration:none;border-color:var(--ink-4);box-shadow:0 16px 34px -22px oklch(0.24 0.018 55 / .40)}
.card img{transition:transform .55s cubic-bezier(.2,.6,.2,1)}
.card:hover img{transform:scale(1.035)}
.card img,.card .ph{width:100%;height:190px;object-fit:cover;background:oklch(0.92 0.008 85)}
/* staff & dentist portraits: 4:5 portrait box so faces are not cropped */
.card img.portrait{height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 22%}
.card-b{display:flex;flex-direction:column;gap:7px;padding:16px 18px 20px}
.card-b b{font-family:var(--serif);font-weight:400;font-size:22px;color:var(--ink)}
.card-b em{font-style:normal;font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--green)}
.card-b i{font-style:normal;font-size:15.5px;line-height:1.55;color:var(--ink-3)}
.ph{display:flex;align-items:flex-end;padding:12px;background:repeating-linear-gradient(135deg,oklch(0.9 0.01 85) 0 7px,oklch(0.94 0.008 85) 7px 14px)}
.ph small{font-family:var(--mono);font-size:11px;line-height:1.4;color:var(--ink-3)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:9px}
@media(min-width:760px){.tiles{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.tiles{grid-template-columns:repeat(6,1fr)}}
.tile{display:flex;align-items:center;justify-content:center;text-align:center;min-height:62px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--paper-2);font-size:15px;font-weight:500;line-height:1.3;color:var(--ink-2)}
.tile:hover{background:var(--tint);text-decoration:none;color:var(--ink)}

/* hero */
.hero{position:relative;background:var(--ink);display:flex;align-items:center;min-height:400px}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.hero-in{position:relative;padding:44px 0;display:flex;flex-direction:column;gap:20px;max-width:44ch}
.hero h1{color:oklch(0.98 0.005 85)}
.hero p{font-size:19px;line-height:1.55;color:oklch(0.92 0.01 80)}
@media(min-width:900px){.hero{min-height:520px}.hero-in{padding:60px 0}.hero p{font-size:21px}}

/* two-column page body with sticky rail */
.body-2{display:grid;grid-template-columns:1fr;gap:36px;padding-top:22px;padding-bottom:52px}
@media(min-width:1000px){.body-2{grid-template-columns:1fr 350px;gap:52px;align-items:start}
  .rail{position:sticky;top:88px}}
.rail{display:flex;flex-direction:column;gap:14px}
.rail-card{padding:20px;border-radius:12px;background:var(--ink);display:flex;flex-direction:column;gap:14px}
.rail-card b{font-family:var(--serif);font-weight:400;font-size:23px;color:oklch(0.96 0.008 85)}
.rail-k{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:oklch(0.82 0.018 80)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--lime);flex:none}
.rail-nap{display:flex;flex-direction:column;gap:6px;padding-top:12px;border-top:1px solid oklch(0.36 0.02 60)}
.rail-nap span{font-size:14.5px;line-height:1.5;color:oklch(0.78 0.012 60)}
.rail-box{padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--paper-2);display:flex;flex-direction:column;gap:11px}
.rail-box b{font-family:var(--serif);font-weight:400;font-size:20px;color:var(--ink)}

/* identity block */
/* Dentist page portrait. Sized from the 4:5 source rather than fixed pixels, and
   deliberately WIDER than the 336px card on /dentists/ — the individual page is
   where a patient goes to look at the face of the person treating them, so the
   portrait leads and the name sits beneath it. */
.ident{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.ident img{width:190px;aspect-ratio:4/5;height:auto;flex:none;object-fit:cover;object-position:center 18%;border-radius:12px}
@media(min-width:760px){.ident{gap:26px}.ident img{width:min(100%,400px)}}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:13px;font-weight:500;padding:5px 10px;border-radius:6px;background:var(--tint);color:var(--green-2)}

/* fees */
.fee-t{width:100%;border-collapse:collapse;font-size:16px}
.fee-t caption{text-align:left;font-family:var(--serif);font-size:23px;color:var(--ink);padding:22px 0 10px}
.fee-t th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);padding:8px 10px 8px 0;border-bottom:1.5px solid var(--ink)}
.fee-t th:last-child,.fee-t td:last-child{text-align:right;padding-right:0}
.fee-t td{padding:12px 10px 12px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
.fee-t td small{display:block;font-size:14px;color:var(--ink-4);margin-top:2px}
.fee-t td:last-child{font-weight:600;color:var(--ink);white-space:nowrap}
.note{padding:16px 18px;border-left:2px solid var(--green);background:var(--paper-2);border-radius:0 12px 12px 0}
.note p+p{margin-top:8px}

/* faq */
.faqs{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:820px){.faqs{grid-template-columns:1fr 1fr;gap:26px 40px}}
.faq{display:flex;flex-direction:column;gap:5px}
.faq p{font-size:16px;line-height:1.6;color:var(--ink-3)}

/* form */
form{display:flex;flex-direction:column;gap:18px;max-width:620px}
.fld{display:flex;flex-direction:column;gap:6px}
.fld label{font-size:15px;font-weight:600;color:var(--ink)}
.fld small{font-size:14px;color:var(--ink-4)}
input,select,textarea{font:400 16.5px/1.5 var(--sans);color:var(--ink);background:var(--paper);border:1px solid oklch(0.82 0.01 85);border-radius:12px;padding:13px 14px;min-height:52px;width:100%}
textarea{min-height:120px;resize:vertical}
input:focus,select,textarea:focus{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green)}
select{outline:none}
select:focus{outline:2px solid var(--green)}
.hp{position:absolute;left:-9999px}
fieldset{border:1px solid var(--line);border-radius:12px;padding:16px;margin:0;display:flex;flex-direction:column;gap:10px}
legend{font-size:15px;font-weight:600;color:var(--ink);padding:0 6px}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.check{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:var(--paper);font-size:15.5px;cursor:pointer}
.check input{width:20px;height:20px;min-height:20px;margin:0;flex:none;accent-color:var(--green)}
.req{color:var(--green);font-weight:400}

/* footer */
.ftr{background:var(--forest);color:oklch(0.87 0.012 80);padding:40px 0 32px;text-align:center}
.ftr h2{font-size:24px;margin-bottom:4px;color:oklch(0.96 0.008 85)}
/* Every page in one place. The header nav can only carry seven links, and
   the overflow Menu is hidden from 1060px up — which left Emergency,
   Sterilisation and the Knowledge base unreachable on a desktop. */
.ftr-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:9px 20px;
  margin:22px auto 4px;max-width:60rem;padding-bottom:22px;
  border-bottom:1px solid oklch(0.42 0.02 155)}
.ftr-nav a,.ftr-nav span{font-size:15px;color:oklch(0.87 0.012 80)}
.ftr-nav a:hover{color:#fff}
.ftr-nav span[aria-current]{color:var(--tan)}
.ftr-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:700px){.ftr-grid{grid-template-columns:repeat(3,1fr)}}
.ftr-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tan);display:block;margin-bottom:6px}
.ftr p,.ftr li{font-size:15px;line-height:1.6;color:oklch(0.87 0.012 80)}
.ftr a{color:oklch(0.9 0.012 80)}
.ftr ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;align-items:center}
.ftr ul a{display:inline-flex;align-items:center;min-height:32px}
.ftr .ftr-close{margin-top:38px;padding-top:28px;border-top:1px solid oklch(0.42 0.02 155);display:flex;flex-direction:column;align-items:center;gap:14px}
.ftr .ftr-close img{width:40px;height:35px;flex:none;filter:brightness(0) invert(1);opacity:.72}
.ftr .ftr-close p{font-family:var(--serif);font-weight:300;font-size:clamp(20px,2.8vw,29px);line-height:1.22;letter-spacing:-.015em;color:oklch(0.95 0.008 85);max-width:26ch;margin:0 auto}
.ftr-fine{margin-top:26px;padding-top:18px;border-top:1px solid oklch(0.42 0.02 155);font-size:13px;color:oklch(0.70 0.015 80)}

/* motion */
a,.btn,.card,.tile,.row,.mini,.hdr-cta,.menu summary,.chip,.ftr a{transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .24s ease}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* sticky mobile cta */
.sticky{position:sticky;bottom:0;z-index:40;display:flex;gap:9px;padding:10px 20px;background:oklch(0.985 0.005 85 / .96);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
.sticky .btn{flex:1;min-height:50px;font-size:16px}
.sticky .tel{flex:none;width:50px;padding:0}
@media(min-width:1200px){.sticky{display:none}}