/* Med Spa Website Template (Rank Boss). Same poster system as getrankboss.com: flat colour panels with one
   28px radius on a dark ground, heavy lower-case headlines, pill buttons, no rules, no gradients, no shadows at rest.
   Brand colours come from site.config.json (--acc, --f2, --f3 are written into every page by build.py). */
@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/b400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/b500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/b800.woff2) format("woff2");font-weight:800;font-display:swap}
:root{
  --acc:#f4b8c4;--f2:#c8d8c3;--f3:#6b1f37;
  --ink:#1c1517;--char:#2e2427;--paper:#f7f1ef;--paper-d:#ece2df;
  --f:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;
  --step-small:clamp(.875rem,.85rem + .1vw,.9375rem);
  --step-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --step-lead:clamp(1.25rem,1.1rem + .7vw,1.625rem);
  --step-head:clamp(2.5rem,1.2rem + 5vw,5.5rem);
  --m:clamp(16px,2.2vw,32px);
  --gap:8px;
  --r:28px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--ink);color:var(--paper);font:400 var(--step-body)/1.55 var(--f);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
fieldset{border:0;margin:0;padding:0;min-width:0}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--m);top:-80px;z-index:4000;background:var(--paper);color:var(--ink);padding:.7em 1em;border-radius:var(--r)}
.skip:focus{top:10px}
.d{font-family:var(--f);font-weight:800;letter-spacing:-.04em;line-height:.92;text-transform:lowercase;text-wrap:balance}
.d .ac{text-transform:none}
.lead{font-size:var(--step-lead);line-height:1.3}
.small{font-size:var(--step-small)}
.sh{font-size:var(--step-head)}

/* tones: one flat colour per panel, one text colour on it */
.t-acc{background:var(--acc);color:var(--ink)}
.t-f2{background:var(--f2);color:var(--ink)}
.t-f3{background:var(--f3);color:var(--paper)}
.t-paper{background:var(--paper);color:var(--ink)}
.t-paper-d{background:var(--paper-d);color:var(--ink)}
.t-char{background:var(--char);color:var(--paper)}
.panel{border-radius:var(--r);padding:clamp(28px,4.4vw,80px) var(--m);position:relative;overflow:hidden}
/* artwork palette (art.py) */
.k-a{fill:var(--acc)}.k-2{fill:var(--f2)}.k-3{fill:var(--f3)}.k-i{fill:var(--ink)}.k-p{fill:var(--paper)}
.k-3l{fill:color-mix(in srgb,var(--f3) 80%,var(--paper))}.k-3d{fill:color-mix(in srgb,var(--f3) 72%,#000)}.k-2d{fill:color-mix(in srgb,var(--f2) 82%,var(--ink))}
.art{display:block;width:100%;height:auto}

/* buttons: pill, flat */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:56px;padding:0 1.6em;border-radius:99px;border:0;font:500 var(--step-body)/1 var(--f);text-decoration:none;cursor:pointer;background:var(--ink);color:var(--paper);transition:transform .2s var(--ease),background .2s;white-space:nowrap}
.btn svg{width:1em;height:1em;flex:none;transition:transform .2s var(--ease)}
.btn:hover{transform:translateY(-3px)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:none}
.btn.on-dark,.t-f3 .btn,.t-char .btn{background:var(--acc);color:var(--ink)}
.btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.tlink{display:inline-flex;align-items:center;gap:.5em;font-weight:500;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.tlink svg{width:1em;height:1em}
.tlink:hover{text-decoration-thickness:3px}

main{display:grid;gap:var(--gap);padding:var(--gap)}

/* ===== nav (sits inside the first panel of every page) ===== */
.nav{display:flex;align-items:center;gap:clamp(12px,1.6vw,24px);position:relative;z-index:60}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex:none;color:inherit}
.brand .mk{width:38px;height:38px;flex:none}
.mk-p{fill:var(--acc)}.mk-c{fill:var(--f3)}
.t-acc .mk-p{fill:var(--f3)}.t-acc .mk-c{fill:var(--ink)}
.brand .bn{font-weight:800;letter-spacing:-.03em;font-size:clamp(1.1rem,1rem + .4vw,1.35rem);line-height:1;text-transform:lowercase}
.brand-logo{height:44px;width:auto}
.nav .links{display:flex;align-items:center;gap:clamp(14px,1.8vw,28px);margin:0 auto;font-weight:500;font-size:var(--step-small);white-space:nowrap}
.nav .links>a,.ddb{display:inline-flex;align-items:center;gap:6px;text-decoration:none;padding:.6em 0;position:relative;color:inherit;background:none;border:0;font:inherit;cursor:pointer}
.nav .links>a::after,.ddb::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:3px;border-radius:3px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav .links>a:hover::after,.ddb:hover::after,.nav .links>a[aria-current]::after,.ddb[aria-current]::after{transform:scaleX(1)}
.chev{width:12px;height:12px;transition:transform .25s var(--ease)}
.dd{position:relative}
.dd:hover .chev,.dd:focus-within .chev,.dd.open .chev{transform:rotate(180deg)}
.ddm{position:absolute;top:100%;left:50%;min-width:220px;padding:8px;border-radius:22px;background:var(--ink);color:var(--paper);display:grid;opacity:0;visibility:hidden;transform:translate(-50%,10px);transition:opacity .25s,transform .25s var(--ease),visibility .25s;z-index:70;box-shadow:0 24px 60px rgba(28,21,23,.28)}
.dd:hover .ddm,.dd:focus-within .ddm,.dd.open .ddm{opacity:1;visibility:visible;transform:translate(-50%,0)}
.ddm a{display:flex;align-items:center;gap:8px;padding:11px 16px;border-radius:14px;text-decoration:none;font-weight:500}
.ddm a:hover,.ddm a:focus-visible{background:var(--char);color:var(--acc)}
.ddm a svg{width:14px;height:14px}
/* treatments mega menu: spans the nav, four even columns */
.dd:has(.mg){position:static}
.mg{width:min(100%,1000px);grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:20px;white-space:normal}
.mg-c{display:grid;align-content:start;gap:2px;min-width:0}
.mg-t{font-weight:800;padding:8px 16px 8px;color:var(--acc)}
.mg a{line-height:1.25}
.mg-all{align-content:end;background:var(--char);border-radius:16px;padding:8px}
.mg-all a{justify-content:space-between}
.t-f3 .mg-all,.t-char .mg-all{background:var(--paper-d)}
.ntel{font-weight:500;font-size:var(--step-small);text-decoration:none;white-space:nowrap}
.ntel:hover{text-decoration:underline;text-underline-offset:4px}
.nav>.btn{min-height:48px;flex:none;font-size:var(--step-small)}
.t-f3 .ddm,.t-char .ddm{background:var(--paper);color:var(--ink)}
.t-f3 .ddm a:hover,.t-char .ddm a:hover{background:var(--paper-d);color:var(--f3)}
.t-f3 .mg-t{color:var(--f3)}
.burger{display:none;position:relative;z-index:80;width:48px;height:48px;border:0;border-radius:50%;background:var(--ink);cursor:pointer;margin-left:auto;padding:0;flex:none}
.burger i{position:absolute;left:14px;right:14px;height:3px;border-radius:3px;background:var(--paper);transition:transform .25s var(--ease),opacity .2s}
.burger i:nth-child(1){top:16px}.burger i:nth-child(2){top:22.5px}.burger i:nth-child(3){top:29px}
.burger[aria-expanded=true] i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded=true] i:nth-child(2){opacity:0}
.burger[aria-expanded=true] i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.t-f3 .burger,.t-char .burger{background:var(--acc)}.t-f3 .burger i,.t-char .burger i{background:var(--ink)}
.mp{display:none}
.mp.open{display:grid;align-content:start;gap:2px;position:fixed;inset:0;z-index:70;background:var(--ink);color:var(--paper);padding:96px var(--m) 40px;overflow-y:auto;overscroll-behavior:contain}
.mp a{display:block;padding:10px 0;font-size:clamp(1.6rem,1rem + 2.4vw,2.4rem);font-weight:800;letter-spacing:-.03em;text-decoration:none;line-height:1.1;text-transform:lowercase}
.mp a.sub{padding:6px 0 6px 18px;font-size:var(--step-lead);font-weight:500;text-transform:none;letter-spacing:-.01em;color:rgba(247,241,239,.78)}
.mp-g{padding:14px 0 2px 18px;color:var(--acc);font-weight:800}
.mp a:hover,.mp a:focus-visible{color:var(--acc)}
body.mp-on{overflow:hidden}
@media (max-width:1180px){.nav .links,.nav>.btn,.ntel{display:none}.burger{display:block}}

/* ===== home hero: a moving line over one square ===== */
.hero{margin:var(--gap) var(--gap) 0;border-radius:var(--r);min-height:min(calc(100svh - 16px),1000px);display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto;padding:clamp(16px,2vw,28px) var(--m) clamp(20px,2.4vw,32px);overflow:hidden;position:relative;isolation:isolate;
  --sq:clamp(230px,21vw,340px);--fs:clamp(112px,15.4vw,236px)}
.has-demo .hero{min-height:min(calc(100svh - 56px),1000px)}
.mq-band{position:relative;height:var(--sq);align-self:center;margin:clamp(24px,5vh,64px) calc(-1 * var(--m)) 0;font-size:var(--fs);font-weight:800}
.mq-sq{position:absolute;left:50%;top:0;width:var(--sq);height:var(--sq);transform:translateX(-50%);border-radius:var(--r);overflow:hidden;background:var(--f3)}
.mq-sq .art,.mq-sq .ph{width:100%;height:100%;object-fit:cover}
.mq-sq .ph{filter:brightness(.62)}
.mq-sq .art{display:block}
.mq{position:absolute;inset:0;display:flex;align-items:center;overflow:hidden;white-space:nowrap;letter-spacing:-.045em;line-height:1;text-transform:lowercase;padding-bottom:.08em}
.mq-ink{color:var(--ink)}
.mq-lt{color:var(--paper);clip-path:inset(0 calc(50% - var(--sq) / 2) round var(--r))}
.mq-tr{display:flex;width:max-content;animation:mq 70s linear infinite;will-change:transform}
.mq-g{display:flex}
.mq-u{display:inline-flex;align-items:center;gap:.32em;padding-right:.32em}
.dot{display:inline-block;width:.16em;height:.16em;border-radius:50%;background:currentColor;font-style:normal}
@keyframes mq{to{transform:translateX(-50%)}}
.hero-c{text-align:center;margin-top:clamp(36px,7vh,110px);display:grid;gap:18px;justify-items:center}
.hero-s{font-size:clamp(1.2rem,1rem + .7vw,1.45rem);line-height:1.32;font-weight:500;max-width:38ch;text-wrap:balance}
.hero-f{font-size:var(--step-body);font-weight:500}
.hero-f::before{content:"";display:inline-block;width:.6em;height:.6em;border-radius:50%;background:var(--f3);margin-right:.5em;vertical-align:.05em}
.hero-b{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:clamp(28px,4vh,48px);font-weight:500}
.hero-b .btn{min-height:60px}

/* ===== section headings on the dark ground ===== */
.treat>.sh,.tsec>.sh{color:var(--paper);padding:clamp(48px,8vw,120px) var(--m) clamp(20px,3vw,44px)}

/* ===== treatment families: stacked colour sheets ===== */
.sheets{display:grid;gap:var(--gap)}
.sheet{border-radius:var(--r);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);padding:clamp(18px,1.6vw,24px) var(--m) clamp(28px,4vw,56px);min-height:min(84svh,780px)}
.sheets.sticky .sheet{position:sticky;top:calc(var(--gap) + var(--i) * 76px)}
.has-demo .sheets.sticky .sheet{top:calc(var(--gap) + var(--i) * 76px)}
.sh-t{display:grid;grid-template-rows:auto auto 1fr;gap:clamp(16px,2vw,28px);align-content:start}
.sh-n{font-size:clamp(2rem,1rem + 3vw,3.25rem);min-height:44px;display:flex;align-items:center}
.sh-t>p{font-size:var(--step-lead);line-height:1.3;max-width:34ch}
.sh-l{display:grid;gap:6px;align-content:end}
.sh-l a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 18px;border-radius:18px;text-decoration:none;font-weight:600;font-size:var(--step-body);background:color-mix(in srgb,currentColor 7%,transparent);transition:background .2s,transform .2s var(--ease)}
.sh-l a:hover,.sh-l a:focus-visible{background:color-mix(in srgb,currentColor 16%,transparent);transform:translateX(4px)}
.sh-l .pr{font-weight:500;white-space:nowrap}
.sh-p{border-radius:calc(var(--r) - 6px);overflow:hidden;align-self:center;justify-self:end;width:min(100%,560px);aspect-ratio:1;margin-top:clamp(52px,5vw,64px)}
.sh-p .art{width:100%;height:100%}
.sh-p .ph{width:100%;height:100%;object-fit:cover}

/* ===== treatment finder (the live thing) ===== */
.finder{display:grid;gap:clamp(20px,2.4vw,36px)}
.fd-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:end}
.fd-f{display:grid;gap:20px}
legend{font-weight:800;font-size:var(--step-body);margin-bottom:12px;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border-radius:99px;background:var(--paper-d);font-weight:500;transition:background .2s,color .2s,transform .2s var(--ease);cursor:pointer}
.chip:hover span{transform:translateY(-2px)}
.chip input:checked+span{background:var(--ink);color:var(--paper)}
.chip input:focus-visible+span{outline:3px solid var(--ink);outline-offset:3px}
.seg{display:inline-flex;gap:4px;padding:4px;border-radius:99px;background:var(--paper-d)}
.seg label{position:relative;display:inline-flex}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:99px;font-weight:500;cursor:pointer;transition:background .2s,color .2s}
.seg input:checked+span{background:var(--ink);color:var(--paper)}
.seg input:focus-visible+span{outline:3px solid var(--ink);outline-offset:2px}
.fd-n{font-weight:800;font-size:var(--step-lead);letter-spacing:-.02em}
.fd-r{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:var(--gap)}
.fr{border-radius:22px}
.fr[hidden]{display:none}
.fr a{display:grid;gap:8px;height:100%;padding:22px 24px;border-radius:22px;text-decoration:none;transition:transform .25s var(--ease)}
.fr a:hover,.fr a:focus-visible{transform:translateY(-4px)}
.fr-n{font-weight:800;font-size:clamp(1.35rem,1.1rem + .8vw,1.75rem);letter-spacing:-.03em;line-height:1.05}
.fr-c{font-weight:500}
.fr-m{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px}
.fr-m span{font-size:var(--step-small);padding:5px 12px;border-radius:99px;background:color-mix(in srgb,currentColor 10%,transparent)}
.fr.pop a{animation:pop .4s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.fd-go{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.fd-go .small{max-width:44ch}
.fd-none a{font-weight:600}

/* ===== approach: two giant words compared ===== */
.appr{display:grid;gap:12vh;padding-bottom:0}
.ap-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:start}
.ap-top .sh{font-size:clamp(1.9rem,1.2rem + 1.6vw,2.6rem)}
.ap-w{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,32px);height:calc(13.6vw * .62 + 44px);overflow:hidden;margin:0 calc(-1 * var(--m) + 8px)}
.ap-w figure{display:grid;align-content:start;gap:8px;min-width:0}
.ap-w figcaption{font-weight:500;font-size:var(--step-lead);padding-left:.2em}
.spec{font-size:13.6vw;line-height:.8;letter-spacing:-.05em;text-transform:lowercase;white-space:nowrap}
.spec-a{font-weight:800}
.spec-b{font-weight:400;letter-spacing:.02em}

/* ===== how a visit works: one verb at a time ===== */
.verbs{display:grid;gap:var(--gap)}
.vb{border-radius:var(--r);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;gap:clamp(32px,5vw,72px);padding:clamp(28px,4vw,56px) var(--m) var(--m);position:relative}
.vb-w{grid-column:1/-1;text-align:center;font-size:clamp(96px,17vw,300px);line-height:.85;padding-bottom:.06em}
.vb-t{grid-row:2;align-self:end;display:grid;gap:8px;max-width:34ch}
.vb-t h3{font-size:var(--step-lead);letter-spacing:-.02em}
.vb-t p{font-size:var(--step-body)}
.vb-a{grid-row:2;grid-column:2;justify-self:end;align-self:end;width:clamp(150px,22vw,320px);aspect-ratio:1;border-radius:22px;overflow:hidden}
.vb-a .art{width:100%;height:100%}

/* ===== menu: consultation field + the list ===== */
.mnu{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.mn-c{grid-column:span 5;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.mn-c .d,.mn-l>.d{font-size:clamp(2.4rem,1rem + 4vw,5rem)}
.mn-c>p:not(.big){font-size:var(--step-lead);line-height:1.3;max-width:26ch}
.mn-c .big{font-size:clamp(2.6rem,.4rem + 4.3vw,6rem);overflow-wrap:anywhere;margin-top:auto;padding-top:clamp(32px,6vh,80px)}
.mn-c .btn{justify-self:start}
.mn-l{grid-column:span 7;display:grid;gap:28px;align-content:start}
.mn-g{display:grid;gap:6px}
.mn-g h3{font-size:var(--step-lead);letter-spacing:-.02em;margin-bottom:6px;color:var(--acc)}
.t-paper .mn-g h3{color:var(--f3)}
.mn-g a{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:12px 16px;border-radius:16px;text-decoration:none;background:color-mix(in srgb,currentColor 6%,transparent);transition:background .2s}
.mn-g a:hover,.mn-g a:focus-visible{background:color-mix(in srgb,currentColor 14%,transparent)}
.mn-n{font-weight:600}
.mn-u{font-size:var(--step-small);opacity:.8}
.mn-p{font-weight:500;text-align:right}
.demo-note{padding:12px 16px;border-radius:16px;background:#ffd54a;color:#151100;font-size:var(--step-small)}

/* ===== areas ===== */
.areas{display:grid;gap:clamp(24px,3vw,44px)}
.ar-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:end}
.ar-l{display:grid;gap:var(--gap)}
.ar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,3vw,48px);align-items:center;padding:clamp(18px,2vw,28px) clamp(20px,2.4vw,36px);border-radius:22px;background:var(--paper-d);text-decoration:none;transition:background .25s,transform .25s var(--ease)}
.ar:hover,.ar:focus-visible{background:var(--acc);transform:translateX(6px)}
.ar-n{font-size:clamp(2.6rem,1rem + 6vw,7rem)}
.ar-t{font-size:var(--step-body);max-width:46ch}
.areas>p a{font-weight:600}

/* ===== FAQ: a band per question ===== */
.fbs{padding:0;display:grid}
.fb-h{min-height:min(40svh,380px);display:flex;align-items:flex-end;padding:clamp(28px,4vw,64px) var(--m)}
.fb-h .d{font-size:clamp(3rem,1rem + 6vw,8rem)}
.fb{display:grid;grid-template-columns:5fr 1fr 6fr;padding:clamp(32px,4vw,56px) var(--m);background:var(--paper);color:var(--ink)}
.fb:nth-child(odd){background:var(--paper-d)}
.fb h3{grid-column:1;font-size:clamp(1.4rem,1.1rem + 1vw,2rem);letter-spacing:-.03em;line-height:1.1}
.fb p{grid-column:3;font-size:var(--step-body);line-height:1.55}
.fb a{font-weight:600}

/* ===== close ===== */
.cta{display:grid;gap:clamp(64px,10vw,180px)}
.cta-h{font-size:clamp(3.2rem,1rem + 9vw,10rem);line-height:.9;letter-spacing:-.05em;font-weight:800;text-transform:lowercase;max-width:12ch;text-wrap:balance}
.cta-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:wrap}
.cta-row>p{font-size:var(--step-lead);line-height:1.3;max-width:30ch}
.cta-b{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}

/* ===== inner page header ===== */
.pkh{margin:var(--gap) var(--gap) 0;border-radius:var(--r);padding:clamp(16px,2vw,28px) var(--m) clamp(28px,4vw,64px);position:relative;isolation:isolate;z-index:50}
.pkh-g{display:grid;grid-template-columns:minmax(0,1fr) clamp(200px,24vw,340px);gap:clamp(24px,4vw,64px);align-items:end;margin-top:clamp(36px,7vw,110px)}
.pkh-g.noart{grid-template-columns:minmax(0,1fr)}
.pkh-t{display:grid;gap:clamp(16px,2vw,26px);justify-items:start;min-width:0}
.pkh h1{font-size:clamp(2.1rem,.8rem + 4.8vw,6rem);max-width:18ch}
.pkh.sm h1{font-size:clamp(2.1rem,.8rem + 4vw,5rem)}
.pkh .lead{max-width:44ch}
.pkh-art{border-radius:calc(var(--r) - 4px);overflow:hidden;aspect-ratio:1}
.pkh-art .art{width:100%;height:100%}
.pkh-art .ph{width:100%;height:100%;object-fit:cover}
.btns{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin-top:6px}
.bc ol{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:var(--step-small);font-weight:500}
.bc li+li::before{content:"/";margin-right:10px;opacity:.55}
.bc a{text-underline-offset:3px}

/* ===== content panel ===== */
.svb{padding:clamp(28px,5vw,88px) var(--m)}
.svg2{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:clamp(32px,5vw,72px);align-items:start;max-width:1240px;margin:0 auto}
.solo{max-width:1240px;margin:0 auto}
.prose{max-width:760px;line-height:1.62}
.prose.narrow{max-width:820px;margin:0 auto}
.prose h2{font-size:clamp(1.8rem,1.2rem + 2vw,2.9rem);margin:56px 0 18px;line-height:1;letter-spacing:-.04em;font-weight:800;text-transform:lowercase;text-wrap:balance}
.prose>h2:first-child,.prose>.gl+h2{margin-top:0}
.prose h3{font-size:var(--step-lead);margin:28px 0 10px;letter-spacing:-.02em;line-height:1.15}
.prose p{margin:0 0 18px}
.prose ul,.prose ol{margin:0 0 22px;display:grid;gap:10px}
.prose ol{counter-reset:o}
.prose li{position:relative;padding-left:28px}
.prose ul>li::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:12px;border-radius:50%;background:var(--f3)}
.prose ol>li{counter-increment:o}
.prose ol>li::before{content:counter(o);position:absolute;left:0;top:.15em;width:1.45em;height:1.45em;border-radius:50%;background:var(--acc);display:grid;place-items:center;font-size:.8em;font-weight:800}
.prose a{font-weight:600;text-decoration:underline;text-decoration-color:var(--f3);text-decoration-thickness:2px;text-underline-offset:3px}
.prose a:hover{background:var(--acc)}
.prose strong{font-weight:800}
.prose .prov{font-size:var(--step-small);margin-top:32px;padding:16px 20px;border-radius:18px;background:var(--paper-d)}
.gl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 40px}
.gl div{padding:16px 18px;border-radius:18px;background:var(--paper-d);display:grid;gap:4px;align-content:start}
.gl dt{font-size:var(--step-small);font-weight:500;opacity:.8}
.gl dd{font-weight:800;line-height:1.25}
.faq{display:grid;gap:6px;margin:0 0 24px}
.faq details{border-radius:18px;background:var(--paper-d)}
.faq summary{cursor:pointer;list-style:none;padding:18px 56px 18px 22px;font-weight:800;font-size:var(--step-body);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-weight:500;transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-a{padding:0 22px 20px}
.faq-a p{margin:0}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.pills a{display:inline-flex;min-height:44px;align-items:center;padding:0 18px;border-radius:99px;background:var(--f2);color:var(--ink);text-decoration:none;font-weight:600}
.prose .pills a:hover{background:var(--acc)}
.aside{position:sticky;top:24px;display:grid;gap:var(--gap)}
.as{border-radius:22px;padding:26px;display:grid;gap:14px;justify-items:start}
.as h2{font-size:clamp(1.6rem,1.2rem + 1vw,2.1rem);line-height:1;text-transform:lowercase;letter-spacing:-.04em;font-weight:800}
.as ul{display:grid;gap:2px;width:100%}
.as li a{display:block;padding:8px 0;font-weight:600;text-decoration:none}
.as li a:hover,.as li a[aria-current]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.as .btn{width:100%}
.cl{display:grid;gap:14px}
.cl span{display:block;font-size:var(--step-small);font-weight:500;opacity:.8}
.cl a{font-weight:800;font-size:var(--step-lead);text-decoration:none;overflow-wrap:anywhere;letter-spacing:-.02em}
.cl a:hover{text-decoration:underline}
.nx{display:grid;gap:12px;counter-reset:n}
.nx li{position:relative;padding-left:36px;counter-increment:n}
.nx li::before{content:counter(n);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:.8em;font-weight:800}
.tsec{display:grid;gap:var(--gap)}
.gal .wrap{max-width:1240px;margin:0 auto}
.gal-h{margin-bottom:24px}
.gal-h h2{font-size:var(--step-head);font-weight:800;letter-spacing:-.04em;text-transform:lowercase}
@media (max-width:980px){.svg2{grid-template-columns:1fr}.aside{position:static}.gl{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== booking form ===== */
.sh2{font-size:clamp(2rem,1.2rem + 2.4vw,3.2rem);font-weight:800;letter-spacing:-.04em;text-transform:lowercase;margin-bottom:20px}
.cform{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:clamp(22px,3vw,40px);border-radius:var(--r);background:var(--paper-d);color:var(--ink);position:relative}
.cform .full,.cform .cf-status{grid-column:1/-1}
.field{display:grid;gap:8px;min-width:0;align-content:start}
.field>label{font-weight:600;font-size:var(--step-small)}
.field legend{font-size:var(--step-small);font-weight:600}
.req{color:var(--f3)}
.opt{font-weight:400;opacity:.75}
.cform input:not([type=checkbox]):not([type=radio]),.cform textarea{width:100%;min-height:54px;padding:12px 18px;border-radius:18px;border:2px solid transparent;background:#fff;color:var(--ink);font:500 var(--step-body)/1.4 var(--f)}
.cform textarea{resize:vertical;min-height:130px}
.cform input:focus-visible,.cform textarea:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.cform [aria-invalid=true]{border-color:#a3122c!important}
.cform .chip span{background:#fff}
.cform .chip input:checked+span{background:var(--ink);color:var(--paper)}
.hint{font-size:var(--step-small);opacity:.85}
.err{font-size:var(--step-small);font-weight:600;color:#a3122c;min-height:0}
.err:empty{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cf-note{font-size:var(--step-small);opacity:.85}
.cf-note a{font-weight:600}
.cf-status{font-weight:600}
.cf-status:empty{display:none}
.cf-status.err{color:#a3122c}
.cform .btn[disabled]{opacity:.6;cursor:wait}
@media (max-width:640px){.cform{grid-template-columns:1fr}}

/* ===== footer tiles (no giant name) ===== */
footer.foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);padding:0 var(--gap) var(--gap)}
.ft{border-radius:var(--r);padding:clamp(22px,2.4vw,32px);min-height:300px;display:flex;flex-direction:column;gap:14px}
.ft.f1{grid-column:span 3;background:var(--char);color:var(--paper);justify-content:space-between}
.ft.f2{grid-column:span 3;background:var(--paper);color:var(--ink)}
.ft.f3{grid-column:span 3;background:var(--acc);color:var(--ink)}
.ft.f4{grid-column:span 3;background:var(--f2);color:var(--ink)}
.ft .h{font-size:var(--step-lead);font-weight:800;letter-spacing:-.02em}
.ft .say{font-size:var(--step-lead);font-weight:500;line-height:1.2;max-width:22ch}
.ft .legal{font-size:var(--step-small);opacity:.85}
.fl{display:grid;gap:4px;font-size:var(--step-small)}
.fl.legal{margin-top:auto;padding-top:10px}
.ft a{text-decoration:none}.ft a:hover,.ft a:focus-visible{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.ft .ph2{font-size:var(--step-lead);font-weight:800;letter-spacing:-.02em}
.ft .mail{font-weight:600;overflow-wrap:anywhere}
.ft p{font-size:var(--step-small)}
.ft .say{font-size:var(--step-lead)}
@media (max-width:1000px){.ft.f1,.ft.f2,.ft.f3,.ft.f4{grid-column:span 6}}
@media (max-width:640px){.ft.f1,.ft.f2,.ft.f3,.ft.f4{grid-column:1/-1;min-height:0}}

/* ===== demo banner and mobile call bar ===== */
.demo-bar{background:#ffd54a;color:#151100;font-size:var(--step-small);font-weight:500;text-align:center;padding:9px var(--m);line-height:1.35}
.callbar{display:none}
@media (max-width:760px){
  .callbar{display:grid;grid-template-columns:1fr 1.4fr;gap:8px;position:fixed;left:8px;right:8px;bottom:8px;z-index:90;padding:8px;border-radius:99px;background:var(--ink);box-shadow:0 10px 30px rgba(0,0,0,.35)}
  .callbar .btn{min-height:50px;padding:0 1em}
  .callbar .btn:not(.ghost){background:var(--acc);color:var(--ink)}
  .callbar .ghost{color:var(--paper)}
  body{padding-bottom:76px}
}

/* ===== reveal on scroll ===== */
@media (prefers-reduced-motion:no-preference){.js .r{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .r.in{opacity:1;transform:none}}

/* ===== OPENING ANIMATION: the bloom ===== */
.intro{position:fixed;inset:0;z-index:3000;background:var(--f3);color:var(--paper);display:grid;place-content:center;justify-items:center;gap:18px;animation:intro-out .8s 2.5s var(--ease) forwards;cursor:pointer}
.no-intro .intro,.no-js .intro{display:none}
.intro-bloom{width:clamp(150px,22vw,250px);height:auto;overflow:visible}
.intro-bloom circle{transform-box:fill-box;transform-origin:center;animation:bloom .75s var(--d) cubic-bezier(.3,1.5,.5,1) both}
.intro-name{font-size:clamp(2.2rem,1rem + 5vw,5.5rem);font-weight:800;letter-spacing:-.045em;line-height:1;text-transform:lowercase;display:flex;flex-wrap:wrap;justify-content:center;overflow:hidden;padding:0 16px .08em;text-align:center}
.intro-name span{display:inline-block;animation:rise .7s calc(1s + var(--i) * 35ms) var(--ease) both}
.intro-sub{font-weight:500;animation:fade .6s 1.7s var(--ease) both}
@keyframes bloom{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes rise{from{transform:translateY(110%)}to{transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes intro-out{to{transform:translateY(-100%);visibility:hidden}}
html.intro-on{overflow:hidden}

/* ===== responsive ===== */
@media (max-width:980px){
  .fd-top,.ap-top,.ar-top{grid-template-columns:1fr}
  .mn-c,.mn-l{grid-column:1/-1}
  .sheet{grid-template-columns:1fr}
  .sh-p{margin-top:0;min-height:0;order:-1;aspect-ratio:4/3}
  .sh-p .art{width:min(100%,360px)}
  .sheets.sticky .sheet{position:relative;top:auto}
  .fb{grid-template-columns:1fr;gap:12px}.fb p{grid-column:1}
}
@media (max-width:760px){
  .hero{--sq:46vw;--fs:34vw;grid-template-rows:auto minmax(0,1fr) auto auto auto}
  .hero-b{flex-direction:column;align-items:stretch;text-align:center}
  .hero-b .btn{width:100%}
  .pkh-g{grid-template-columns:1fr}
  .pkh-art{display:none}
  .ap-w{grid-template-columns:1fr;height:auto;overflow:visible;gap:var(--gap);margin:0 calc(-1 * var(--m) + 8px)}
  .ap-w figure{height:calc(26vw * .64 + 48px);overflow:hidden}
  .spec{font-size:26vw}
  .vb{grid-template-columns:1fr;min-height:70svh}
  .vb-w{font-size:24vw;position:static}
  .vb-a{grid-column:1;grid-row:3;justify-self:start;margin-top:20px;width:120px}
  .ar{grid-template-columns:1fr}
  .mn-g a{grid-template-columns:1fr auto}.mn-u{display:none}
  .cta-row{flex-direction:column;align-items:stretch}.cta-b .btn{width:100%}
  .hero-b p{display:none}
}
@media (max-width:420px){.brand .bn{font-size:1rem}.nav{gap:10px}}
@media (prefers-reduced-motion:reduce){
  .mq-tr{animation:none;transform:translateX(calc(50vw - 50%))}
  .js .r{opacity:1;transform:none;transition:none}
  .btn,.sh-l a,.ar,.fr a{transition:none}
  .fr.pop a{animation:none}
}
/* ---- client work photos (added by _build/photos.py; shared across Rank Boss templates) ---- */
.work-section{padding:clamp(48px,7vw,88px) 0}
.work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.work-photo{margin:0;border:1px solid var(--line,#2a2f38);border-radius:var(--r,14px);overflow:hidden;background:var(--card,#12151b)}
.work-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.work-photo figcaption{padding:10px 14px;font-size:.92rem;color:var(--muted,#9aa3b0)}
@media (max-width:1100px){.work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.work-grid{grid-template-columns:1fr}}
/* ---- end client work photos ---- */
@media (prefers-reduced-motion:reduce){
  .mq{justify-content:center}
  .mq-tr{transform:none!important;width:auto}
  .mq-g+.mq-g,.mq-u+.mq-u{display:none}
  .mq-u{padding-right:0}.mq-u .dot{display:none}
}