/* /skinpen-microneedling/ - page-specific styles, ported from the 2026-09 redesign mock.
   Loaded only by that page. The site header, nav, drawer and footer are styled by the
   inline block in the page itself, exactly as on every other page.

   Palette: --gold and --ink are NOT defined here. The page's chrome block defines the
   site-wide values (#A78F5C / #1a1a1a) and the mock's components pick them up. The
   remaining variables are the mock's own. */

/* Self-hosted fonts (latin subsets, variable weight). Served from /fonts/ - see _headers
   for the cache rule. The three files replace the Google Fonts call in the mock. */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/cormorant-garamond-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:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/cormorant-garamond-italic-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:Inter;font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/inter-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}
/* DM Sans is used only by the site chrome (nav, drawer, footer, cookie banner). */
@font-face{font-family:"DM Sans";font-style:normal;font-weight:300 500;font-display:swap;src:url(/fonts/dm-sans-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{--ivory:#F8F6F1;--sand:#EFEAE0;--gold-deep:#8B6F3D;--grey:#5E5A54;--line:#DDD7CB;--ok:#2F6B4F;--ok-bg:#E6F1EA;--warn:#8A5A1E;--warn-bg:#FBF1E3;--r:12px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.65;color:var(--ink);background:var(--ivory)}
h1,h2,h3,.serif{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;margin:0;line-height:1.08}
h1{font-size:58px;letter-spacing:-.01em}h2{font-size:40px;margin-bottom:12px;max-width:640px}h3{font-size:24px}
p{margin:0 0 14px;color:var(--grey);max-width:62ch}
a{color:var(--gold-deep)}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.eyebrow{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:18px}
.eyebrow::after{content:"";flex:0 0 40px;height:1px;background:var(--gold)}
.btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 22px;border-radius:6px;background:var(--gold-deep);color:#fff;font-weight:500;font-size:15px;text-decoration:none;border:0;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .15s}
.btn:hover{background:#6F5830}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.wa{background:transparent;color:var(--ink);border:1px solid var(--ink)}.btn.wa:hover{background:var(--ink);color:#fff}
.btn.sm{height:38px;padding:0 16px;font-size:14px}
.btn.link{background:none;color:var(--gold-deep);padding:0;height:auto;text-decoration:underline;text-underline-offset:3px}
.btn.link:hover{background:none;color:var(--ink)}
section{padding:88px 0}
/* The site nav declares position:sticky but its <header> wrapper is only as tall as the nav, so on every
   page it scrolls away (same on /emface/, /exion/). The jump bar therefore pins to the viewport top,
   not 68px below it as in the mock, and the side panel and anchor offsets follow the 44px jump bar. */
section[id],#slots{scroll-margin-top:56px}
.hero{background:#fff;padding:72px 0 56px}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.hero p.lead{font-size:19px;margin:20px 0 22px;color:var(--ink)}
.hero ul{list-style:none;padding:0;margin:0 0 28px;color:var(--grey)}
.hero li{padding:6px 0 6px 22px;position:relative}
.hero li::before{content:"";position:absolute;left:0;top:16px;width:12px;height:1px;background:var(--gold)}
.hero img{width:100%;border-radius:var(--r);display:block;aspect-ratio:4/4.2;object-fit:cover}
.season{display:inline-block;background:var(--warn-bg);color:var(--warn);font-size:13px;padding:6px 12px;border-radius:6px;margin-bottom:18px}
.cta-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.consult{font-size:14px;color:var(--grey);margin-top:16px}
.jump{position:sticky;top:0;z-index:19;background:#fff;border-bottom:1px solid var(--line)}
.jump .wrap{display:flex;align-items:center;gap:22px;padding:0 32px;height:44px;overflow-x:auto;font-size:13px}
.jump span{color:var(--grey);white-space:nowrap}
.jump a{white-space:nowrap;color:var(--grey);text-decoration:none;height:44px;display:inline-flex;align-items:center;border-bottom:2px solid transparent}
.jump a.cur{color:var(--ink);border-color:var(--gold)}
.stats{background:var(--ink);color:#fff}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.stats div{padding:24px 16px;border-right:1px solid #3a3733;text-align:center}
.stats div:last-child{border:0}
.stats small{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#b8b2a8;margin-bottom:4px}
.stats b{font-family:"Cormorant Garamond",serif;font-size:30px;font-weight:500}
.concerns{background:#fff;border-bottom:1px solid var(--line)}
.concerns .wrap{display:grid;grid-template-columns:repeat(6,1fr);gap:0}
/* Scoped to the six cells: the mock's bare ".concerns div" also matched the .wrap container (a div and the
   last child of .concerns), which zeroed its auto margin and padding and pushed the strip to the left edge. */
.concerns .wrap>div{padding:22px 18px 22px 0;border-right:1px solid var(--line);margin-right:18px}
.concerns .wrap>div:last-child{border:0;margin:0}
.concerns b{font-family:"Cormorant Garamond",serif;font-size:20px;font-weight:500;display:block;margin-bottom:4px}
.concerns small{font-size:14px;color:var(--grey);line-height:1.5;display:block}
.concerns a{font-size:14px}
.layout{display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start}
.side{position:sticky;top:60px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px}
.side .price{font-family:"Cormorant Garamond",serif;font-size:40px;line-height:1}
.side .row{display:flex;justify-content:space-between;font-size:14px;padding:10px 0;border-top:1px solid var(--line)}
/* .slot is kept for the Pabau next-available feed (see the TODO in the side panel). */
.slot{display:flex;justify-content:space-between;font-size:14px;padding:9px 12px;border:1px solid var(--line);border-radius:6px;margin-top:8px;cursor:pointer}
.slot:hover{border-color:var(--gold)}
.side .btn{width:100%;margin-top:12px}
.builder{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:32px}
.lab{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin-bottom:10px}
.opts{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.chip{border:1px solid var(--line);border-radius:6px;height:40px;padding:0 14px;font-size:14px;cursor:pointer;background:#fff;font-family:inherit;color:var(--ink);display:inline-flex;align-items:center;gap:8px}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip em{font-style:normal;opacity:.6;font-size:13px}
.summary{font-family:"Cormorant Garamond",serif;font-size:26px;line-height:1.3;border-top:1px solid var(--line);padding-top:22px;margin-bottom:6px}
.summary b{font-weight:500;color:var(--gold-deep)}
.summary-sub{font-size:14px;color:var(--grey)}
.free4{background:var(--ok-bg);color:var(--ok);padding:14px 18px;border-radius:8px;font-size:14px;margin-top:22px;display:flex;gap:12px;align-items:flex-start}
.free4::before{content:"";flex:0 0 18px;height:18px;border-radius:50%;background:var(--ok);margin-top:2px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='3' d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='3' d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center/contain no-repeat}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;min-height:280px}
.plan.rec{border:2px solid var(--gold);padding:23px}
.plan .tag{display:inline-block;align-self:flex-start;background:var(--gold);color:#fff;font-size:11px;line-height:1;padding:5px 9px;border-radius:4px;margin-bottom:10px}
.plan h3{margin-bottom:4px}
.plan .p{font-family:"Cormorant Garamond",serif;font-size:36px;line-height:1;margin:14px 0 6px}
.plan small{color:var(--grey);font-size:14px;display:block}
.plan .btn{margin-top:auto;width:100%}
.plan .fill{flex:1 0 12px}
.single{margin-top:18px;border-top:1px solid var(--line);padding-top:18px;font-size:14px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.lunch{background:var(--gold);color:#fff;border-radius:var(--r);padding:24px 28px;display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:36px}
.lunch b{font-family:"Cormorant Garamond",serif;font-size:26px;font-weight:500;display:block;margin-bottom:4px}
.lunch .btn{background:#fff;color:var(--ink)}.lunch .btn:hover{background:var(--ivory)}
.note{background:#fff;border-left:3px solid var(--ink);padding:26px 30px;margin:28px 0;max-width:820px}
.note .nl{font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.08em;color:var(--gold-deep);margin-bottom:10px}
.note p{color:var(--ink);font-family:"Cormorant Garamond",serif;font-size:22px;line-height:1.45;margin:0 0 12px;max-width:none}
.note .sig{font-size:14px;color:var(--grey)}
.data{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:28px 0}
.data div{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px}
.data b{font-family:"Cormorant Garamond",serif;font-size:44px;font-weight:500;line-height:1;display:block;color:var(--gold-deep);margin-bottom:8px}
.data small{color:var(--grey);font-size:14px;display:block;line-height:1.5}
.depth .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center}
.depth svg{width:100%;height:auto}
.tl{position:relative;margin-top:36px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.tl::before{content:"";position:absolute;left:0;right:0;top:19px;height:1px;background:var(--line)}
.tl .t{font-family:"Cormorant Garamond",serif;font-size:20px;color:var(--gold-deep);background:var(--ivory);display:inline-block;padding-right:12px;position:relative;line-height:38px}
.tl b{font-family:"Cormorant Garamond",serif;font-size:21px;font-weight:500;display:block;margin:8px 0 4px}
.tl small{color:var(--grey);font-size:14px;display:block;line-height:1.55}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
.box{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px}
.box h3{margin-bottom:10px}
.box ul{margin:0;padding:0 0 0 18px;font-size:16px;color:var(--grey)}
.box li{margin:5px 0}
.check label{display:flex;gap:10px;font-size:14px;color:var(--grey);padding:5px 0;cursor:pointer}
.box details summary{cursor:pointer;font-size:14px;font-weight:500;padding:10px 0;border-top:1px solid var(--line);margin-top:14px;list-style:none;display:flex;justify-content:space-between}
.box details summary::after{content:"+";color:var(--gold)}
.box details[open] summary::after{content:"–"}
.downtime{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0}
.dt{padding:16px;border-radius:8px;font-size:14px;line-height:1.5}
.dt b{display:block;font-family:"Cormorant Garamond",serif;font-size:22px;font-weight:500;margin-bottom:4px}
.days{display:flex;gap:6px;flex-wrap:wrap}
.days button{border:1px solid var(--line);background:#fff;border-radius:6px;height:36px;padding:0 14px;font-size:13px;cursor:pointer;font-family:inherit}
.days button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;padding:0 22px}
.faq summary{cursor:pointer;padding:16px 0;font-family:"Cormorant Garamond",serif;font-size:21px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";color:var(--gold);flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq details p{font-size:15px;padding-bottom:16px;margin:0;max-width:none}
.ev{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.ev ol{padding-left:18px;font-size:14px;color:var(--grey)}
.ev li{margin:8px 0}
abbr{text-decoration:underline dotted var(--gold);cursor:help}
.final{background:var(--ink);text-align:center;color:#fff;padding:88px 0}
.final h2{color:#fff;margin:0 auto 14px}.final p{color:#cfc9be;margin:0 auto 28px}
.mob{display:none}
.rv{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
@media(max-width:900px){h1{font-size:40px}h2{font-size:31px}section{padding:60px 0}.hero .wrap,.layout,.depth .wrap,.ev,.plans,.two,.data,.concerns .wrap{grid-template-columns:1fr}.concerns .wrap>div{border:0;margin:0;padding:12px 0}.side{position:static}.stats .wrap{grid-template-columns:1fr 1fr}.tl{grid-template-columns:1fr;gap:18px}.tl::before{display:none}.mob{display:flex;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);padding:10px 16px;gap:10px;align-items:center;z-index:30;font-size:14px}.mob .btn{margin-left:auto}body{padding-bottom:70px}.downtime{grid-template-columns:1fr 1fr}.lunch,.single{flex-direction:column;align-items:flex-start}}