/* Petalline, design concept. 2026-10-07 FINAL ART-DIRECTION PASS (research/pmu-final/BEAUTY-DIRECTION.md).
   Beauty editorial + cosmetic results + precision mapping. The mapping marks and their animation are unchanged;
   the world around them moved from "measured document" to "beauty editorial".
   TYPE: Noto Serif Display (light, high contrast, fashion-magazine display serif; italic only for the second half of a
   heading and for quotes) + Host Grotesk (quiet humanist sans for body, labels, buttons and the map labels, tabular figures).
   PALETTE "skin and rouge": warm cream paper, a nude second surface, deep cocoa ink, one rouge accent (pen dot, focus,
   active states; never a headline fill). Mapping lines stay a warm white with a 1px cocoa halo so they read on any skin.
   LAYOUT: phone designed first at 390. One container (.wrap): min(100% - 2 gutters, 1680px), growing to 88vw at 1600+. */
:root{
  --bg:#FBF7F3; --alt:#F1E6DD; --ink:#2B1D1C; --muted:#76625C; --rule:#E4D7CD; --mark:#FFFAF5; --accent:#8E3B3F;
  --serif:"Noto Serif Display",Georgia,"Times New Roman",serif; --sans:"Host Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:clamp(16px,4vw,64px); --max:1680px; --hdr:52px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:16.5px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:300;letter-spacing:-.01em;line-height:1.06}
h3{font-weight:400}
em{font-style:italic}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{width:min(100% - 2 * var(--gut), var(--max));margin-inline:auto}
.body{color:var(--muted);max-width:38ch}
.note{color:var(--muted);font-size:14px;margin-top:1rem}
section{scroll-margin-top:var(--hdr)}
h2{font-size:clamp(32px,1.3rem + 2.2vw,64px);max-width:20ch}
h2 em{display:block;font-style:normal}

/* buttons: soft rectangles, sans 500 (Rare Beauty / Westman: quiet, tactile, never shouting) */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 1.5rem;background:var(--ink);color:var(--bg);border:1px solid var(--ink);font-family:var(--sans);font-weight:500;font-size:15px;letter-spacing:.005em;text-decoration:none;border-radius:2px;cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:#45302e}
.btn--line{background:transparent;color:var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--bg)}
.btn--wide{width:100%}
.link{font-weight:500;font-size:15px;text-underline-offset:5px;text-decoration-thickness:1px}

/* ---------- header ---------- */
.hd{position:sticky;top:0;z-index:40;background:rgba(251,247,243,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.hd__in{width:min(100% - 2 * var(--gut), var(--max));margin-inline:auto;height:var(--hdr);display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.hd__menu{justify-self:start;display:flex;align-items:center;gap:.55rem;background:none;border:0;font-family:var(--sans);font-weight:500;font-size:15px;color:var(--ink);padding:12px 12px 12px 0;cursor:pointer}
.hd__menu::before{content:"";width:18px;height:7px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transition:transform .2s}
.hd__menu[aria-expanded="true"]::before{height:0;border-bottom:0;transform:rotate(0)}
.hd__mark{grid-column:2;font-family:var(--serif);font-size:25px;font-weight:400;letter-spacing:-.005em;text-decoration:none;line-height:1}
.hd__book{justify-self:end;grid-column:3;display:inline-flex;align-items:center;min-height:36px;padding:0 .95rem;border:1px solid var(--ink);border-radius:2px;font-weight:500;font-size:14px;text-decoration:none}
.hd__nav{display:none}
.menu{position:fixed;inset:var(--hdr) 0 0 0;z-index:39;background:var(--bg);overflow:auto;padding:1.2rem var(--gut) 2.5rem}
.menu[hidden]{display:none}
.menu__in{display:flex;flex-direction:column;min-height:100%}
.menu__big{font-family:var(--serif);font-weight:300;font-size:36px;line-height:1.1;text-decoration:none;padding:.5rem 0;border-bottom:1px solid var(--rule)}
.menu__sub{display:flex;flex-wrap:wrap;gap:.4rem;padding:.8rem 0 .9rem;border-bottom:1px solid var(--rule)}
.menu__sub a{font-size:14px;font-weight:500;text-decoration:none;padding:.45rem .75rem;background:var(--alt);border-radius:2px}
.menu__book{margin-top:auto;padding-top:0}
.menu__in .menu__book{margin-top:1.8rem}
.menu__note{color:var(--muted);font-size:14px;margin-top:.8rem;text-align:center}
body.menu-open{overflow:hidden}
@media(min-width:1024px){
  :root{--hdr:68px}
  .hd__in{grid-template-columns:auto 1fr auto;gap:2rem}
  .hd__menu{display:none}
  .hd__mark{grid-column:1;font-size:30px}
  .hd__nav{display:flex;justify-content:center;gap:clamp(1.4rem,2.4vw,3rem);font-size:15px}
  .hd__nav a{text-decoration:none;color:var(--muted);padding:.3rem 0;border-bottom:1px solid transparent}
  .hd__nav a:hover,.hd__nav a.is-on{color:var(--ink);border-bottom-color:var(--accent)}
  .hd__book{grid-column:3;min-height:42px;padding:0 1.2rem;background:var(--ink);color:var(--bg)}
}

/* ---------- the mapping marks (approved; only the halo and the label face are new) ---------- */
.fig{position:relative}
.fig__frame{position:relative;overflow:hidden;background:#d8c3b6;aspect-ratio:5/4}
.fig__frame > img,.zoom > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.zoom{position:absolute;inset:0;transform:scale(var(--s,2));transform-origin:var(--ox,52%) var(--oy,54%)}
.map{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;transition:opacity .3s}
.map--photo{filter:drop-shadow(0 0 1px rgba(43,29,28,.45))}
.map .g{fill:none;stroke:var(--mark);stroke-width:calc(1 * var(--u,1));stroke-opacity:.85}
.map .g--sym{stroke-dasharray:calc(4 * var(--u,1)) calc(4 * var(--u,1))}
.map .s{fill:none;stroke:var(--mark);stroke-width:calc(1.6 * var(--u,1));stroke-linecap:round}
.map .d path,.map .a path{fill:none;stroke:var(--mark);stroke-width:calc(1 * var(--u,1))}
.map .p circle{fill:var(--mark)}
.map text{font-family:var(--sans);font-weight:500;font-size:calc(11px * var(--u,1));letter-spacing:.01em;fill:var(--mark);font-variant-numeric:tabular-nums}
.map .d text{text-anchor:middle}
.map .pen{fill:var(--accent);stroke:var(--mark);stroke-width:calc(1.5 * var(--u,1));opacity:0}
.map--paper{position:relative;display:block}
.map--paper .g{stroke:var(--ink);stroke-opacity:.4}
.map--paper .s{stroke:var(--ink);stroke-width:calc(1.6 * var(--u,1))}
.map--paper .s--lo{stroke-width:calc(1.1 * var(--u,1));stroke-opacity:.5}
.map--paper .g--sym{stroke-opacity:.55}
.map--paper .d path{stroke:var(--ink)}
.map--paper .p circle{fill:var(--ink)}
.map--paper text{fill:var(--muted);font-size:calc(10.5px * var(--u,1))}
.map--paper .pen{stroke:var(--bg)}
.maptg{position:absolute;right:8px;bottom:8px;z-index:2;min-height:30px;padding:0 .65rem;background:rgba(251,247,243,.92);border:0;border-radius:2px;font-family:var(--sans);font-weight:500;font-size:12.5px;color:var(--ink);cursor:pointer}
.maptg::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:.4rem;vertical-align:1px}
.maptg[aria-pressed="false"]::before{background:transparent;box-shadow:inset 0 0 0 1px var(--ink)}
.fig.is-off .map{opacity:0}
.tag{position:absolute;left:8px;top:8px;z-index:2;padding:.2rem .55rem;background:rgba(251,247,243,.92);border-radius:2px;font-size:12.5px;font-weight:500;line-height:1.5;color:var(--ink)}

/* ---------- hero ---------- */
/* phone (Rare Beauty / Victoria Beckham Beauty): a face fills most of the first screen and the pen maps the brow on it;
   below it the name of the promise, one line and the booking. Nothing above the face but the header. */
.hero__photo,#heroPlan,.legend{display:none}
.hero__face{position:relative;overflow:hidden;height:clamp(400px,57svh,620px);background:#d8c3b6}
/* the map svg crops with xMidYMid slice: the photo must crop from the same centre or the marks drift off the brow */
.face__stage{position:absolute;inset:0}
.hero__face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.note--ph{display:none}
.hero__side{width:min(100% - 2 * var(--gut), var(--max));margin-inline:auto}
.hero__text{padding:1.15rem 0 2.6rem}
.hero h1{font-size:clamp(38px,10.8vw,46px)}
.hero h1 em{display:block}
.hero .lead{margin-top:.7rem;color:var(--muted);max-width:32ch}
.hero__act{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem;margin-top:1.1rem}
.hero .note{margin-top:.8rem}
/* tablet: face and words side by side */
@media(min-width:640px) and (max-width:1023px){
  .hero{width:min(100% - 2 * var(--gut), var(--max));margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:2rem;align-items:end;padding-top:1.2rem}
  .hero__face{height:auto;aspect-ratio:1331/2000;max-height:80svh}
  .hero__side{width:auto}
  .hero__text{padding:0 0 .4rem}
  .hero h1{font-size:clamp(38px,5.4vw,56px)}
}
/* desktop: the approved diptych, photo 7 / drawing + legend + words 5, one pen for both */
@media(min-width:1024px){
  .hero__face{display:none}
  .hero{width:min(100% - 2 * var(--gut), var(--max));margin-inline:auto;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(2rem,4vw,5rem);padding:clamp(1.2rem,2.2vw,2.4rem) 0 clamp(3rem,6vw,6rem);align-items:stretch}
  .hero__photo{display:block;position:relative;overflow:hidden;background:#d8c3b6;height:min(calc(100svh - var(--hdr) - 4rem), 1080px);min-height:520px}
  .hero__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
  .hero__side{width:auto;margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:1.4rem;min-width:0}
  #heroPlan{display:block;width:100%;max-width:520px;height:auto;max-height:min(30svh,380px);aspect-ratio:240/236}
  .legend{display:none}
  .legend li{padding:.6rem 0;border-top:1px solid var(--rule);font-size:13.5px;color:var(--muted);opacity:.35;transition:opacity .4s}
  .legend li.is-on{opacity:1}
  .legend li.is-now{border-top-color:var(--accent)}
  .legend span{display:block;font-family:var(--serif);font-size:20px;color:var(--ink);line-height:1.2}
  .hero__text{padding:0;order:-1}
  .hero__side{justify-content:flex-start;gap:clamp(1.6rem,3svh,2.8rem)}
  #heroPlan{max-height:min(24svh,300px)}
  .hero h1{font-size:clamp(46px,1.5rem + 3.4vw,104px)}
  .hero .lead{font-size:clamp(17px,.9rem + .3vw,20px);max-width:30ch}
}
@media(min-width:1600px){#heroPlan{max-width:760px;max-height:min(40svh,620px)}.legend{max-width:760px}}

/* ---------- results: lookbook (phone: swipe; desktop: three staggered columns of unequal width) ---------- */
.results{padding:clamp(3rem,8vw,7rem) 0}
.results__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.results__note{font-size:13.5px;color:var(--muted)}
.look{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-top:1.4rem;padding:0 var(--gut);scroll-padding:0 var(--gut);overscroll-behavior-x:contain}
.look::-webkit-scrollbar{display:none}
.look__col{display:contents}
.lk{flex:none;width:80vw;max-width:420px;scroll-snap-align:start}
.lk img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:var(--px,50%) var(--py,50%);background:#d8c3b6;filter:saturate(.92)}
.lk figcaption{margin-top:.55rem;font-family:var(--serif);font-size:20px}
.lk figcaption a{text-decoration:none}
.look__bar{width:min(100% - 2 * var(--gut), var(--max));margin:1rem auto 0;height:1px;background:var(--rule)}
.look__bar span{display:block;height:1px;width:20%;background:var(--ink);transform-origin:0 0;transition:transform .15s}
@media(min-width:1024px){
  .look{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:clamp(12px,1.2vw,24px);overflow:visible;padding:0;
    width:min(100% - 2 * var(--gut), var(--max));margin:2rem auto 0}
  .look__col{display:flex;flex-direction:column;gap:clamp(12px,1.2vw,24px)}
  .look__col--low{padding-top:clamp(8rem,11vw,14rem)}
  .lk{width:auto;max-width:none}
  .lk--wide img{aspect-ratio:3/2}
  .lk--tall img{aspect-ratio:4/5}
  .look__col:nth-child(2) .lk--wide img{aspect-ratio:16/10}
  .look__bar{display:none}
  .results{position:relative}
  .results__head{position:absolute;z-index:1;top:clamp(3rem,8vw,7rem);right:calc((100vw - min(100vw - 2 * var(--gut), var(--max))) / 2);
    width:calc((min(100vw - 2 * var(--gut), var(--max)) - 2 * clamp(12px,1.2vw,24px)) * .25);display:block}
  .results__note{margin-top:.6rem}
  .look{margin-top:0}
}

/* ---------- the method: face > analyze > map > adjust > approve > pigment on one face ---------- */
.pre{padding:clamp(3.5rem,9vw,8rem) 0;background:var(--alt)}
.pre__h{max-width:14ch}
.pre__fig{position:relative;overflow:hidden;margin:1.6rem calc(-1 * var(--gut)) 0;aspect-ratio:4/5;background:#d8c3b6}
.pre__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.pre__fig .map .s{stroke-width:calc(1.8 * var(--u,1))}
.pre__fig .pre__an,.pre__fig .pre__first,.pre__fig .pre__alt,.pre__fig .pre__fill,.pre__fig .pre__ok{transition:opacity .5s}
.pre__fig[data-now="4"] .pre__first{opacity:.35}
.pre__fig[data-now="5"] .pre__first,.pre__fig[data-now="6"] .pre__first{opacity:0}
.pre__fig[data-now="5"] .pre__an,.pre__fig[data-now="6"] .pre__an{opacity:0}
.pre__fig[data-now="6"] .pre__alt .l,.pre__fig[data-now="5"] .pre__alt .l{opacity:0}
.pre__ok circle{fill:var(--accent);stroke:var(--mark);stroke-width:calc(1 * var(--u,1))}
.pre__ok path{fill:none;stroke:var(--mark);stroke-width:calc(1.4 * var(--u,1));stroke-linecap:round;stroke-linejoin:round}
.pre__ok text{text-anchor:end}
/* pigment = the powder stipple a machine lays along the approved line, drawn in the map's own white */
.pre__fill path{fill:url(#preDots);stroke:none}
#preDots circle{fill:var(--mark)}
.pre__fig[data-now="4"] .pre__an .l{opacity:0}
.pre__fig[data-now="4"] .pre__an{opacity:.4}
.pre__steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 .5rem;margin-top:1rem}
.pre__steps button{display:block;width:100%;text-align:left;background:none;border:0;border-top:2px solid var(--rule);padding:.55rem 0 .5rem;font:inherit;font-size:0;color:var(--muted);cursor:pointer;transition:border-color .3s,color .3s}
.pre__steps span{display:block;font-family:var(--serif);font-size:19px;color:var(--muted);transition:color .3s}
.pre__steps li.is-on button{border-top-color:var(--ink)}
.pre__steps li.is-on span{color:var(--ink)}
.pre__steps li.is-now button{border-top-color:var(--accent)}
.pre__say{min-height:3.2em;margin-top:.6rem;font-size:16.5px}
.pre__time{margin-top:1.2rem;font-size:14px;color:var(--muted)}
@media(min-width:640px){.pre__fig{margin-inline:0}}
@media(min-width:1024px){
  .pre__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:clamp(2.5rem,5vw,6rem);grid-template-rows:auto auto 1fr auto;align-items:start}
  .pre__fig{grid-column:1;grid-row:1 / span 4;margin:0;aspect-ratio:auto;height:min(calc(100svh - var(--hdr) - 6rem), 1000px);min-height:560px}
  .pre__h{grid-column:2;grid-row:1;align-self:start}
  .pre__steps{grid-column:2;grid-row:2;grid-template-columns:1fr;margin-top:2.2rem}
  .pre__steps button{font-size:15px;line-height:1.45;padding:.8rem 0 .9rem;border-top-width:1px}
  .pre__steps span{font-size:24px;margin-bottom:.15rem}
  .pre__steps li.is-now button{border-top-width:1px;color:var(--ink)}
  .pre__say{display:none}
  .pre__time{grid-column:2;grid-row:4}
}

/* ---------- PHONE composition (max 639px; Max 2026-10-07: desktop approved, phone designed on its own) ----------
   Sequence: hero (face + brow map + identity + action) > the method (why the map matters, with a real Adjust) >
   Results > Treatments > reviews > prices > book. Desktop DOM order stays hero > Results > Treatments > method.
   Hero: one full portrait screen. The face fills the screen under the header; the stage box keeps the photo's own
   aspect (img + map share it, so the marks stay on the brow) and is framed on the brow line (both arches and the
   tail inside the frame); name, promise and the one action sit on a soft shade at the bottom, over the chin. */
@media(max-width:1023px){
  main{display:flex;flex-direction:column}
  main > .hero{order:0} main > .pre{order:1} main > .results{order:2} main > .tx{order:3}
  main > .reviews{order:4} main > .prices{order:5} main > .book{order:6}
}
@media(max-width:639px){
  .hero{position:relative}
  .hero__face{height:calc(100svh - var(--hdr));min-height:560px;max-height:900px}
  .face__stage{inset:auto;top:-5%;height:105%;aspect-ratio:1331/2000;left:50%;transform:translateX(-45%)}
  .hero__side{position:absolute;left:0;right:0;bottom:0;width:auto;margin:0;padding:5.5rem var(--gut) 1.4rem;
    background:linear-gradient(180deg,rgba(30,20,19,0) 0,rgba(30,20,19,.5) 38%,rgba(30,20,19,.78) 100%);color:#FBF7F3}
  .hero__text{padding:0}
  .hero h1{color:#FBF7F3;font-size:clamp(40px,11.4vw,48px);text-shadow:0 1px 18px rgba(30,20,19,.35)}
  .hero .lead,.hero .link{display:none}
  .hero__act{margin-top:1.1rem}
  .hero .btn{background:#FBF7F3;color:var(--ink);border-color:#FBF7F3;min-height:52px;padding:0 1.6rem}
  .hero .note{margin-top:.75rem;color:rgba(251,247,243,.82);font-size:13.5px}
  .note--dt{display:none}.note--ph{display:inline}
  /* the method follows the hero directly: no tinted band seam, the face card starts under the heading */
  .pre{padding-top:3rem}
}

/* ---------- ADJUST: the visitor drags the arch (mouse + touch); everything else follows ---------- */
.adj{opacity:0;transition:opacity .4s}
.pre__fig[data-now="4"] .adj,.pre__fig[data-now="5"] .adj,.pre__fig[data-now="6"] .adj{opacity:1}
.adj__guide{stroke-dasharray:calc(3 * var(--u,1)) calc(3 * var(--u,1))}
.adj__h,.adj__read{opacity:0;transition:opacity .3s}
.pre__fig[data-now="4"] .adj__h,.pre__fig[data-now="4"] .adj__read{opacity:1}
.pre__fig:not([data-now="4"]) .adj__guide{opacity:0}
.adj__h{pointer-events:none;cursor:grab;touch-action:none;outline:none}
.pre__fig[data-now="4"] .adj__h{pointer-events:auto}
.adj__h.is-drag{cursor:grabbing}
.adj__hit{fill:transparent}
.adj__ring{fill:rgba(255,250,245,.18);stroke:var(--mark);stroke-width:calc(1.2 * var(--u,1));transform-box:fill-box;transform-origin:center}
.adj__dot{fill:var(--accent);stroke:var(--mark);stroke-width:calc(1.2 * var(--u,1))}
.pre__fig:not(.is-touched)[data-now="4"] .adj__ring{animation:adjPulse 1.6s ease-in-out infinite}
@keyframes adjPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.45);opacity:.55}}
.adj__h:focus-visible .adj__ring{stroke:var(--accent)}
.adj__read{text-anchor:middle;font-weight:500}
.pre__approve{position:absolute;left:50%;bottom:16px;transform:translate(-50%,8px);z-index:3;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;
  min-height:46px;padding:0 1.3rem;border:0;border-radius:2px;background:rgba(251,247,243,.95);color:var(--ink);font-family:var(--sans);font-weight:500;font-size:15px;cursor:pointer;box-shadow:0 6px 24px rgba(30,20,19,.18)}
.pre__fig[data-now="4"] .pre__approve{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.pre__approve::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:.5rem;vertical-align:1px}
@media(prefers-reduced-motion:reduce){.pre__fig .adj__ring{animation:none!important}}

/* ---------- treatments: result + map + words ---------- */
.tx{padding:clamp(3.5rem,9vw,8rem) 0;background:var(--alt)}
.chips{display:flex;gap:.45rem;overflow-x:auto;scrollbar-width:none;margin:1.4rem calc(-1 * var(--gut)) 0;padding:0 var(--gut);
  -webkit-mask:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:none;min-height:40px;padding:0 .95rem;background:var(--bg);border:1px solid transparent;border-radius:999px;font-family:var(--sans);font-weight:500;font-size:14px;color:var(--ink);cursor:pointer}
.chips button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.plates{display:grid;gap:3.6rem;margin-top:2rem}
.plate{transition:opacity .2s}
.plate.is-dim{opacity:.35}
/* the pair: the result photo leads; the map is pinned on its corner like a proof print */
.pair{position:relative}
.res{position:relative;overflow:hidden;aspect-ratio:1/1;background:#d8c3b6}
.res img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:saturate(.92)}
.pair .fig{width:68%;margin:-26% 0 0 auto;border:5px solid var(--alt);background:var(--alt);z-index:1}
.pair .fig > .tag{top:8px;left:8px}
.plate:nth-child(even) .pair .fig{margin-left:0;margin-right:auto}
.fig__frame img{filter:saturate(.86) sepia(.08)}
#t-lash .fig__frame img{filter:saturate(.62) sepia(.2) hue-rotate(-8deg)}
.plate__txt{margin-top:1.2rem}
.plate h3{font-size:32px;font-weight:300}
.plate h3 em{display:block;font-size:20px;color:var(--muted);margin-top:.3rem;letter-spacing:0}
.plate .body{margin-top:.7rem}
.facts{margin-top:.8rem;font-size:14.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.facts b{font-weight:500;color:var(--ink)}
.tlink{display:inline-block;margin-top:.9rem;font-weight:500;font-size:15px;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;padding:.35rem 0}
.tlink:hover{color:var(--accent)}
.tx__stage{display:none}
@media(min-width:640px) and (max-width:1023px){
  .plate{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:1.8rem;align-items:center}
  .plate__txt{margin-top:0}
}
/* desktop: sticky stage + scrolling texts; the stage shows the active plate's pair and draws its map once */
@media(min-width:1024px){
  .tx__head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
  .chips{margin:0;padding:0;overflow:visible;flex-wrap:wrap;-webkit-mask:none;mask:none;max-width:64rem;justify-content:flex-end}
  .tx__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(2rem,4vw,5rem);margin-top:2.6rem;align-items:start;
    --sh:min(calc(100svh - var(--hdr) - 48px), 1080px)}
  .tx__stage{display:block;position:sticky;top:calc(var(--hdr) + 24px);height:var(--sh)}
  .tx__stage .pair{position:absolute;inset:0;opacity:0;transition:opacity .45s;pointer-events:none;
    width:min(100%, calc(var(--sh) / 1.048))}
  .tx__stage .pair.is-on{opacity:1;pointer-events:auto}
  .tx__stage .res{aspect-ratio:5/4}
  .tx__stage .pair .fig{width:56%;margin-top:-20%}
  .tx__stage .pair:nth-child(even) .fig{margin-left:0}
  .plates{margin-top:0;gap:0}
  .plate{min-height:max(560px,64svh);padding:1.6rem 0 3rem;border-top:1px solid var(--rule);opacity:.45;transition:opacity .3s}
  .plate.is-on{opacity:1}
  .plate.is-on.is-dim,.plate.is-dim{opacity:.25}
  .plate.is-on:not(.is-dim){opacity:1}
  .plate .pair{display:none}
  .plate__txt{margin-top:0;max-width:34rem}
  .plate h3{font-size:clamp(34px,1.2rem + 1.6vw,56px)}
  .plate h3 em{font-size:clamp(20px,.9rem + .4vw,24px)}
  .plate:last-child{min-height:0}
}

/* ---------- reviews (sample, labelled) ---------- */
.reviews{padding:clamp(3rem,8vw,7rem) 0}
.reviews__label{font-size:14px;color:var(--muted)}
.quotes{display:grid;gap:1.6rem;margin-top:1.2rem}
.q{padding-top:1.4rem;border-top:1px solid var(--rule)}
.q blockquote{font-family:var(--serif);font-style:italic;font-weight:300;font-size:25px;line-height:1.22}
.q figcaption{margin-top:.6rem;font-size:14px;color:var(--muted)}
/* one pull quote leads, the other two sit beside it smaller (no equal three-up testimonial row) */
.q--big{border-top:0;padding-top:0}
.q.q--big blockquote{font-size:clamp(32px,8.6vw,40px);line-height:1.12}
@media(min-width:900px){
  .quotes{grid-template-columns:minmax(0,7fr) minmax(0,4fr);column-gap:clamp(3rem,7vw,9rem);row-gap:1.8rem;margin-top:1.8rem;align-items:start}
  .q--big{grid-row:span 2}
  .q.q--big blockquote{font-size:clamp(40px,1.2rem + 2.6vw,76px);line-height:1.08;max-width:16ch}
  .q blockquote{font-size:clamp(22px,.9rem + .6vw,28px)}
}

/* ---------- prices ---------- */
.prices{padding:clamp(3.5rem,9vw,8rem) 0}
.ptable{width:100%;max-width:1400px;border-collapse:collapse;margin-top:1.8rem}
.ptable thead{display:none}
.ptable tr{display:grid;grid-template-columns:1fr auto;padding:.9rem 0;border-top:1px solid var(--rule)}
.ptable th[scope="row"]{font-family:var(--serif);font-weight:300;font-size:25px;text-align:left}
.ptable th a{text-decoration:none}
.ptable td{font-size:14px;color:var(--muted);grid-column:1;padding-top:.1rem;font-variant-numeric:tabular-nums}
.ptable td::before{content:attr(data-l) " ";color:var(--ink);font-weight:500}
.ptable td[data-l="From"]{grid-column:2;grid-row:1;align-self:center;color:var(--ink);font-size:17px;font-weight:500;text-align:right}
.ptable td[data-l="From"]::before{content:none}
@media(max-width:899px){.ptable td[data-l="Session"],.ptable td[data-l="Touch-up"]{display:none}}
@media(min-width:900px){
  .ptable thead{display:table-header-group}
  .ptable tr{display:table-row}
  .ptable thead th{font-weight:500;font-size:13.5px;color:var(--muted);text-align:left;padding:0 1rem .7rem 0}
  .ptable thead th:last-child,.ptable td[data-l="From"]{text-align:right;padding-right:0}
  .ptable th[scope="row"],.ptable td{padding:1.1rem 1rem 1.1rem 0;border-top:1px solid var(--rule)}
  .ptable th[scope="row"]{font-size:clamp(25px,1.1rem + .8vw,36px)}
  .ptable td::before{content:none}
  .ptable td{font-size:15px}
  .ptable td[data-l="From"]{font-size:18px}
}

/* ---------- book ---------- */
.book{padding:clamp(3rem,7vw,6rem) 0;background:var(--alt)}
.book .body{margin-top:.8rem}
.book__incl{margin-top:1rem;font-size:14.5px;font-weight:500}
.form{margin-top:2rem;display:grid;gap:1rem}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.choice button{min-height:52px;background:var(--bg);border:1px solid var(--rule);font-family:var(--sans);font-weight:500;font-size:15px;color:var(--ink);cursor:pointer;border-radius:2px;padding:0 .8rem}
.choice button[aria-checked="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.fld{display:grid;gap:.35rem;font-size:14px;font-weight:500;color:var(--muted)}
.fld input,.fld select{min-height:50px;padding:0 .9rem;background:var(--bg);border:1px solid var(--rule);border-radius:2px;font-family:var(--sans);font-size:16.5px;color:var(--ink);width:100%;-webkit-appearance:none;appearance:none}
.fld input:focus,.fld select:focus{border-color:var(--ink);outline:none}
.fld select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 19px) 22px,calc(100% - 14px) 22px;background-size:5px 5px;background-repeat:no-repeat}
.form__msg{margin-top:.2rem}
.form.is-sent .form__msg{color:var(--ink)}
@media(min-width:900px){
  .book__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,1fr) minmax(0,6fr)}
  .book__head{grid-column:1}
  .form{grid-column:3;margin-top:.4rem;grid-template-columns:1fr 1fr;align-content:start}
  .choice{grid-column:1 / -1}
  .fld--t,.form .btn--wide,.form__msg{grid-column:1 / -1}
}

/* ---------- footer: compact, ink band, clearly the end of the page ---------- */
.ft{background:var(--ink);color:#E9DED6;padding:2rem 0 calc(60px + 1.6rem)}
.ft a{color:inherit;text-decoration:none}
.ft a:hover{text-decoration:underline;text-underline-offset:4px}
.ft__grid{display:grid;gap:1rem}
.ft__mark{font-family:var(--serif);font-size:26px;line-height:1;color:var(--bg)}
.ft__links{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;font-size:14.5px}
.ft__info{font-size:14.5px;line-height:1.7}
.ft__info a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.ft__legal{font-size:13px;color:#B9A9A0;border-top:1px solid rgba(233,222,214,.18);padding-top:.9rem}
@media(min-width:1024px){
  .ft{padding:2.2rem 0 1.6rem}
  .ft__grid{grid-template-columns:auto minmax(0,1fr) auto;column-gap:clamp(2rem,4vw,5rem);row-gap:1.4rem;align-items:start}
  .ft__links{gap:.3rem 1.4rem;padding-top:.35rem}
  .ft__info{text-align:right}
  .ft__legal{grid-column:1 / -1}
}

/* ---------- phone booking bar ---------- */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:35;height:60px;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 8px 0 var(--gut);background:rgba(251,247,243,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--rule);transform:translateY(100%);transition:transform .2s ease}
.bar.is-on{transform:none}
#barLabel{font-family:var(--serif);font-size:18px}
.bar .btn{min-height:44px;min-width:112px}
@media(min-width:1024px){.bar{display:none}}

@media(min-width:1600px){:root{--gut:clamp(64px,5vw,140px);--max:min(88vw,2120px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}