/* Service pages (#19), built by pages/build.py. The page body is the approved Dermal fillers design
   (design/dermal-fillers.html); the header, mobile menu and footer reproduce the WordPress site's own, so the
   service pages sit in the site unchanged around them. Montserrat for headings and anything scanned, Libre
   Baskerville for the lead and the section introductions; both are variable fonts, one file per subset. */
@font-face { font-family: Montserrat; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/montserrat-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/montserrat-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Libre Baskerville"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/libre-baskerville-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Libre Baskerville"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/libre-baskerville-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --cream: #faf7ec;
  --line: #e6e3da;
  --head: #333;
  --text: #555;
  --muted: #6f6f6f;
  --gold: #ebe085;        /* decoration and button fill only */
  --gold-hover: #e2d566;
  --accent: #6e6628;      /* links, arrows, labels: dark enough to read */
  --sans: Montserrat, system-ui, sans-serif;
  --serif: "Libre Baskerville", Georgia, serif;
  /* the site's own header and footer colours */
  --site-link: #4a4a56;
  --site-blue: #82a1ad;
  --site-blue-line: #b3c6cf;
  --site-foot: #35444a;
  --site-foot-end: #29353a;
  --site-foot-text: #c5ccd0;
}
* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: var(--text); font: 400 15px/1.7 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
h1, h2, h3 { font-family: var(--sans); font-weight: 400; color: var(--head); }
h2 { font-size: 30px; line-height: 1.2; margin: 0 0 12px; }
p { margin: 0 0 16px; }
.intro { font: 400 16px/1.75 var(--serif); color: var(--text); margin: 0 0 32px; max-width: 46em; }
/* Inline links in text: one solid, light underline */
.intro a, .note a, .faq a, .book dd a, .area a, .products dd a { color: var(--head); text-decoration: underline 1px rgba(110, 102, 40, .45); text-underline-offset: 3px; }
.intro a:hover, .note a:hover, .faq a:hover, .book dd a:hover, .area a:hover, .products dd a:hover { text-decoration-color: var(--accent); }
.sec_top { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }

/* Buttons: one height, one padding */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 24px; background: var(--gold); color: #333; font: 600 14px/1 var(--sans); letter-spacing: .04em; text-decoration: none; transition: background .2s; }
.btn:hover { background: var(--gold-hover); }
.btn_line { background: transparent; box-shadow: inset 0 0 0 1px rgba(51, 51, 51, .3); }
.btn_line:hover { background: transparent; box-shadow: inset 0 0 0 1px var(--head); }
.more:hover { color: var(--accent); }
.more { font: 500 14px/1.4 var(--sans); color: var(--head); text-decoration: none; white-space: nowrap; }
.more::after { content: " →"; color: var(--accent); }

/* Header: the site's own. One row on a wide screen, fixed at the top with a shadow once the page scrolls;
   below 1000px the logo centred over the menu button and the language switch, as on the WordPress pages. */
.head { position: sticky; top: 0; z-index: 30; background: #fff; transition: box-shadow .2s; }
.head.is_scrolled { box-shadow: 0 2px 10px rgba(0, 0, 0, .2); }
.head_in { display: flex; align-items: center; height: 126px; padding: 0 42px; }
.head_logo img { width: 219px; height: auto; }
.head_nav { margin-left: auto; }
.head_nav ul { display: flex; margin: 0; padding: 0; list-style: none; }
.head_nav li { position: relative; }
.head_nav a { display: block; padding: 14px 21.7px; font: 500 14px/21px var(--sans); text-transform: uppercase; text-decoration: none; color: var(--site-link); transition: color .2s; }
.head_nav a:hover, .head_nav .is_current > a { color: var(--site-blue); }
.head_nav ul ul { display: none; position: absolute; top: 100%; left: 0; width: 224px; padding: 30.8px 0; background: #f0f4f6; box-shadow: 1px 1px 2px rgba(0, 0, 0, .2); flex-direction: column; }
.head_nav li:hover > ul, .head_nav li:focus-within > ul { display: flex; }
.head_nav ul ul a { padding: 12.6px 23.3px 11.2px; text-transform: none; color: #7e7d89; }
.head_nav ul ul a:hover, .head_nav ul ul a[aria-current] { color: var(--site-blue); }
.head_lang { margin-left: 25px; padding: 6px 12px; border: 1px solid var(--site-blue-line); border-radius: 999px; font: 600 12px/14.4px var(--sans), "PingFang SC", "Microsoft YaHei", sans-serif; letter-spacing: .72px; color: var(--site-link); text-decoration: none; transition: border-color .2s; }
.head_lang:hover { border-color: var(--site-blue); }
.head_burger { display: none; width: 36px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--site-blue); }
.head_burger span, .head_burger span::before, .head_burger span::after { display: block; width: 18px; height: 2px; margin: 0 auto; background: currentColor; position: relative; }
.head_burger span::before, .head_burger span::after { content: ""; position: absolute; left: 0; }
.head_burger span::before { top: -6px; }
.head_burger span::after { top: 6px; }

/* Mobile menu: full screen and dark, as the site's own */
.mmenu { position: fixed; inset: 0; z-index: 50; overflow-y: auto; padding: 60px 36px 40px; background: #1e1e24; color: #9d9da6; }
.mmenu[hidden] { display: none; }
.mmenu_close { position: absolute; top: 0; right: 0; width: 64px; height: 64px; border: 0; background: none; cursor: pointer; color: var(--gold); }
.mmenu_close::before, .mmenu_close::after { content: ""; position: absolute; top: 31px; left: 22px; width: 20px; height: 2px; background: currentColor; transform: rotate(45deg); }
.mmenu_close::after { transform: rotate(-45deg); }
.mmenu_name { margin: 0; font: 400 24px/1.3 var(--sans); color: #fff; text-align: center; }
.mmenu_tag { margin: 4px 0 40px; font: 400 14px/1.4 var(--serif); text-align: center; }
.mmenu_nav { margin: 0 auto; padding: 0; max-width: 360px; list-style: none; }
.mmenu_nav a { display: block; padding: 4px 0; font: 400 20px/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: #9d9da6; }
.mmenu_nav a:hover, .mmenu_nav a[aria-current] { color: #fff; }
.mmenu_nav ul { margin: 2px 0 10px; padding: 0 0 0 16px; list-style: none; }
.mmenu_nav ul a { font: 400 15px/1.4 var(--serif); letter-spacing: 0; text-transform: none; }
.mmenu_search { display: flex; max-width: 360px; margin: 36px auto 0; background: #2a2a32; }
.mmenu_search input { flex: 1; min-width: 0; height: 52px; padding: 0 18px; border: 0; background: none; font: 400 15px var(--sans); color: #fff; }
.mmenu_search input::placeholder { color: #9d9da6; }
.mmenu_search button { width: 52px; border: 0; background: none; color: #9d9da6; cursor: pointer; }
.mmenu_search svg { width: 16px; height: 16px; }
body.is_menu_open { overflow: hidden; }

/* Opening: text and photo, then the key facts in the same band */
.hero { background: var(--cream); padding: 44px 0 0; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 440px; grid-template-areas: "text photo" "facts facts"; column-gap: 56px; }
.hero_text { grid-area: text; align-self: center; }
.hero_photo { grid-area: photo; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; align-self: center; }
.crumbs { font: 400 14px/1 var(--sans); color: var(--muted); margin: 0 0 18px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--head); }
.crumbs span { margin: 0 8px; color: #c5ccd0; }
h1 { font-size: 42px; line-height: 1.15; margin: 0 0 16px; }
.lead { font: 400 18px/1.7 var(--serif); margin: 0 0 26px; max-width: 30em; }
.hero_cta { display: flex; flex-wrap: wrap; gap: 12px; }
.team { display: flex; flex-wrap: wrap; gap: 14px 32px; margin: 32px 0 0; padding: 0; list-style: none; }
.team li { display: flex; align-items: center; gap: 16px; }
.team img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }
.team a { text-decoration: none; }
.team strong { display: block; font: 500 16px/1.3 var(--sans); color: var(--head); }
.team span { display: block; font: 400 14px/1.4 var(--sans); color: var(--muted); }
.team a:hover strong { color: var(--accent); }
.facts { grid-area: facts; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 32px; margin: 40px 0 0; padding: 20px 0 28px; border-top: 1px solid var(--line); }
.facts dt { font: 400 14px/1.4 var(--sans); color: var(--muted); margin-bottom: 2px; }
.facts dd { margin: 0; font: 500 17px/1.4 var(--sans); color: var(--head); }

/* Sections */
.sec { padding: 60px 0; scroll-margin-top: 126px; }
.sec + .sec { border-top: 1px solid var(--line); }

/* What it treats */
.areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 40px; }
.area h3, .steps h3 { font-size: 17px; font-weight: 500; line-height: 1.3; margin: 0 0 4px; }
.area p, .steps p { margin: 0; }
.note { font-size: 14px; color: var(--muted); margin: 24px 0 0; }

/* Our cases: the one visual block */
.cases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.case { text-decoration: none; }
.case_img { position: relative; overflow: hidden; }
/* contain, not cover: a side-by-side photo cropped to a square would lose the outer part of each half */
.case_img { background: var(--cream); }
.case_img img { width: 100%; aspect-ratio: 1; object-fit: contain; transition: transform .4s; }
.case:hover .case_img img { transform: scale(1.03); }
.case_img i { position: absolute; left: 8px; padding: 5px 8px; background: rgba(255,255,255,.92); font: 500 13px/1 var(--sans); font-style: normal; color: var(--head); }
.case_img i:first-of-type { top: 8px; }
.case_img i:last-of-type { top: calc(50% + 8px); }
/* side by side: the labels on the two halves, in the photo's own order */
.case_img.lr i:last-of-type { top: 8px; left: calc(50% + 8px); }
/* a single case: one wider card at the photo's own shape */
.cases_one { grid-template-columns: minmax(0, 560px); }
.cases_one .case_img img { aspect-ratio: auto; }
.case h3 { font-size: 17px; font-weight: 500; margin: 12px 0 0; }
.case h3::after, .rel h3::after { content: " →"; color: var(--accent); }
.case:hover h3 { color: var(--accent); }

/* Your visit: the number at the left, the title centred on it, the text under the title */
.steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; counter-reset: step; }
.steps li { position: relative; padding-left: 50px; counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--accent); border-radius: 50%; font: 500 15px/1 var(--sans); color: var(--accent); background: #fff; }
.steps h3 { line-height: 34px; margin: 0; }

/* What we use: a light list */
.products { margin: 0; border-top: 1px solid var(--line); }
.products > div { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.products dt { font: 500 16px/1.5 var(--sans); color: var(--head); }
.products dt small { font: 400 14px var(--sans); color: var(--muted); margin-left: 6px; }
.products dd { margin: 0; color: var(--head); }

/* Questions */
.faq { border-top: 1px solid var(--line); margin-top: 24px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 18px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: 17px; font-weight: 500; margin: 0; }
.faq summary::after { content: "+"; flex: none; font: 400 24px/1 var(--sans); color: var(--accent); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 20px; max-width: 46em; }

/* Consultation and booking */
.book { background: var(--cream); padding: 52px 0; scroll-margin-top: 126px; }
.book .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; align-items: center; }
.book .intro { margin-bottom: 24px; }
.book dl { margin: 0; }
.book dl > div { display: grid; grid-template-columns: 80px 1fr; gap: 16px; padding: 12px 0; }
.book dl > div + div { border-top: 1px solid var(--line); }
.book dt { font: 400 14px/1.7 var(--sans); color: var(--muted); padding-top: 1px; }
.book dd { margin: 0; color: var(--head); }

/* Other treatments: every other service, one line each, and a last card for the services page */
.related { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; }
.rel { display: block; padding: 20px 22px; border: 1px solid var(--line); text-decoration: none; transition: border-color .2s; }
.rel:hover { border-color: var(--accent); }
.rel_all { background: var(--cream); border-color: var(--cream); }
.rel h3 { font-size: 17px; font-weight: 500; margin: 0 0 4px; }
.rel p { margin: 0; font-size: 14px; color: var(--muted); }

/* The services page: no facts under the opening, then one grid five cards wide. A group spans as many columns as
   it has services and shares the grid's columns and rows (subgrid), so every card lines up with the cards above
   and beside it, and the cards of a row are one height. */
.hero_list { padding-bottom: 56px; }
.svc_grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 48px 12px; }
.svc_group { display: grid; grid-column: span var(--span); grid-row: span 2; grid-template-columns: subgrid; grid-template-rows: subgrid; row-gap: 16px; }
.svc_group_head { grid-column: 1 / -1; }
.svc_group h2 { font-size: 24px; margin: 0 0 4px; }
.svc_intro { font: 400 15px/1.6 var(--serif); color: var(--muted); margin: 0; }
.svc_list { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; margin: 0; padding: 0; list-style: none; }
.svc_list li { display: flex; }
.svc { display: flex; flex-direction: column; width: 100%; padding: 20px 18px 18px; background: var(--cream); text-decoration: none; transition: background .2s; }
.svc:hover { background: #f4eed8; }
.svc h3 { font-size: 17px; font-weight: 500; line-height: 1.3; margin: 0 0 8px; transition: color .2s; }
.svc:hover h3 { color: var(--accent); }
.svc_line { font: 400 14px/1.55 var(--serif); color: var(--head); margin-bottom: 14px; }
.svc_treats { margin-top: auto; padding-top: 12px; border-top: 1px solid #ebe5cf; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
/* Wide screens: a card's name, line and tags are rows shared with the cards beside it, so the lines under the
   names and the rules above the tags run straight across */
@media (min-width: 961px) {
  .svc_list { grid-template-rows: repeat(3, auto); }
  .svc_list li { display: contents; }
  .svc { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  .svc_treats { margin-top: 0; }
}

/* Footer: the site's own, dark, with the menu and the social links */
.foot { background: var(--site-foot); color: var(--site-foot-text); }
.foot_in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 227px; gap: 40px; max-width: 1000px; margin: 0 auto; padding: 80px 0 70px; }
.foot h2 { margin: 0 0 30px; font: 400 24px/30px var(--sans); letter-spacing: -.35px; color: #fff; }
.foot ul { margin: 0; padding: 0 0 0 12px; list-style: none; }
.foot ul a { font: 400 15px/30px var(--serif); color: var(--site-foot-text); text-decoration: none; transition: color .2s; }
.foot ul a:hover { color: #fff; }
.foot_social { display: flex; gap: 10px; margin: 0; }
.foot_social a { display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; background: rgba(240, 244, 246, .08); color: #e3d87a; transition: background .2s; }
.foot_social a:hover { background: rgba(240, 244, 246, .16); }
.foot_social svg { width: 16px; height: 16px; }
.foot_end { background: var(--site-foot-end); }
.foot_end p { max-width: 1000px; margin: 0 auto; padding: 27px 0; font: 400 11px/17.6px var(--serif); }
.bar { display: none; }

/* Header and footer below the site's own breakpoint */
@media (max-width: 999px) {
  .head { position: static; box-shadow: none; }
  .head.is_scrolled { box-shadow: none; }
  .head_in { flex-wrap: wrap; justify-content: center; gap: 22px 12px; height: auto; padding: 36px 24px 32px; }
  .head_logo { flex: 0 0 100%; display: flex; justify-content: center; }
  .head_logo img { width: 203px; }
  .head_nav { display: none; }
  .head_burger { display: block; }
  .head_lang { margin-left: 0; }
  .sec, .book { scroll-margin-top: 0; }
  .foot_in { padding: 60px 24px 50px; }
  .foot_end p { padding: 27px 24px; }
}

/* Tablet */
@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr) 320px; column-gap: 36px; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .areas { grid-template-columns: repeat(2, 1fr); }
  .cases { grid-template-columns: repeat(2, 1fr); }
  .book .wrap { grid-template-columns: 1fr; gap: 28px; }
  .related { grid-template-columns: repeat(2, 1fr); }
  .svc_grid { display: block; }
  .svc_group { display: block; }
  .svc_group + .svc_group { margin-top: 40px; }
  .svc_group_head { margin-bottom: 16px; }
  .svc_list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; }
}

/* Phone: text, then the facts, then the photo; booking stays at hand in a bar */
@media (max-width: 680px) {
  body { padding-bottom: 72px; }
  .wrap { padding: 0 16px; }
  .hero { padding: 24px 0 28px; }
  .hero .wrap { grid-template-columns: 1fr; grid-template-areas: "text" "facts" "photo"; }
  h1 { font-size: 32px; margin-bottom: 12px; }
  .lead { font-size: 16.5px; margin-bottom: 22px; }
  .hero_cta .btn { flex: 1 1 100%; }
  .team { gap: 14px 20px; }
  .facts { gap: 14px 16px; margin: 28px 0 24px; padding: 18px 0 0; }
  .facts dd { font-size: 16px; }
  .hero_photo { aspect-ratio: 16 / 9; }
  h2 { font-size: 25px; }
  .intro { font-size: 15.5px; margin-bottom: 24px; }
  .sec { padding: 44px 0; }
  .sec_top { display: block; }
  .sec_top .more { display: inline-block; margin-bottom: 12px; }
  .areas { grid-template-columns: 1fr; gap: 16px; }
  .cases { gap: 16px 12px; }
  .steps { grid-template-columns: 1fr; gap: 24px; margin-top: 20px; }
  .steps li:not(:last-child)::after { content: ""; position: absolute; top: 42px; bottom: -16px; left: 17px; width: 1px; background: var(--line); }
  .products > div { grid-template-columns: 1fr; gap: 2px; }
  .hero_list .hero_photo { margin-top: 28px; }
  .svc_list { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 10px; }
  .svc { padding: 16px 16px 14px; }
  .svc_treats { padding-top: 10px; }
  .book { padding: 40px 0; }
  .related { grid-template-columns: 1fr; gap: 10px; }
  .rel { padding: 16px 18px; }
  .foot_in { grid-template-columns: 1fr; gap: 36px; padding: 48px 16px 40px; }
  .foot_end p { padding: 24px 16px; }
  .bar { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); }
  .bar .btn { flex: 1; }
  .bar .btn_line { flex: none; }
}