@charset "UTF-8";
/* styles.css */
/* Royal Art Aesthetics v6. Frozen v5 palette and service components, D-C52 scene/menu/materials. */
:root{
  --c0:#F9F6F1;--c1:#F3ECE1;--c2:#E6D8C7;--c3:#CCB6A0;--c4:#6B533E;--c5:#201A17;
  --ink:#1F1A17;--ink-soft:#4A3F38;--por:#F9F6F1;--por-soft:#E6D8C7;
  --serif:"Noto Serif Display",serif;
  --sans:Jost,sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-draw:cubic-bezier(.4,0,.2,1);--ease-eo:cubic-bezier(.165,.84,.44,1);--ease-line:cubic-bezier(.4,0,0,1);--ease-nav:cubic-bezier(.16,1,.3,1);--ease-curtain:cubic-bezier(.76,0,.24,1);--ease-menu:cubic-bezier(.4,0,.2,1);
  --t:1;
  --head-h:64px;
  --gut:clamp(20px,6vw,96px);
  --arch:clamp(72px,11vw,170px);
  --pad-t:clamp(32px,4.8vw,72px);
  --pad-b:clamp(36px,5.2vw,80px);
  --fs-body:clamp(1.0625rem,1.02rem + .12vw,1.125rem);
  --fs-label:.8125rem;
  --fs-h1:2.75rem;
  --fs-h2:3rem;
  --fs-q:2.5rem;
  --fs-row:1.3125rem;
  color-scheme:light;
}
@media (min-width:700px){:root{--fs-h1:clamp(3.5rem,1rem + 6vw,5.25rem);--fs-h2:clamp(3rem,1.3rem + 4.8vw,5rem);--fs-q:clamp(2.5rem,1rem + 3.4vw,4rem);--fs-row:clamp(1.3rem,1rem + .75vw,1.625rem)}}
@media (min-width:960px){:root{--fs-h1:clamp(4rem,5.4vw,5.25rem)}}
html.again{--t:.35}
html.skip{--t:.001}

/* ---------- Steps: each carries its own colours (document root = the step under the header, rail = mid-screen, bar = bottom edge) ---------- */
:root,[data-step="s0"]{--bg:var(--c0);--fg:var(--ink);--fg2:var(--ink-soft);--ln:rgba(31,26,23,.58);--pill-bg:var(--ink);--pill-fg:var(--por);--pill-bg-h:#3A312B}
[data-step="s1"]{--bg:var(--c1);--fg:var(--ink);--fg2:var(--ink-soft);--ln:rgba(31,26,23,.58);--pill-bg:var(--ink);--pill-fg:var(--por);--pill-bg-h:#3A312B}
[data-step="s2"]{--bg:var(--c2);--fg:var(--ink);--fg2:var(--ink-soft);--ln:rgba(31,26,23,.58);--pill-bg:var(--ink);--pill-fg:var(--por);--pill-bg-h:#3A312B}
[data-step="s3"]{--bg:var(--c3);--fg:var(--ink);--fg2:var(--ink-soft);--ln:rgba(31,26,23,.60);--pill-bg:var(--ink);--pill-fg:var(--por);--pill-bg-h:#3A312B}
[data-step="s4"]{--bg:var(--c4);--fg:var(--por);--fg2:var(--por-soft);--ln:rgba(249,246,241,.60);--pill-bg:var(--por);--pill-fg:var(--ink);--pill-bg-h:#FFFDF9}
[data-step="s5"]{--bg:var(--c5);--fg:var(--por);--fg2:var(--por-soft);--ln:rgba(249,246,241,.46);--pill-bg:var(--por);--pill-fg:var(--ink);--pill-bg-h:#FFFDF9}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)}
/* Lenis (MIT, site/vendor/LENIS_LICENSE.txt): its four rules, inlined so the page has one stylesheet */
html.lenis,html.lenis body{height:auto}
html.lenis.lenis-smooth{scroll-behavior:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
html.menu-open{overflow:hidden}
body{margin:0;min-width:320px;font:400 var(--fs-body)/1.65 var(--sans);color:var(--ink);overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
p,h1,h2,h3,figure,ul{margin:0}
ul{padding:0;list-style:none}
em{font-style:normal}
#hero-title em{font-style:italic}
::selection{background:var(--fg);color:var(--bg)}
:focus-visible{outline:2px solid var(--fg);outline-offset:4px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:16px;top:-80px;z-index:100;padding:12px 18px;background:var(--ink);color:var(--por);text-decoration:none;font:500 var(--fs-label)/1 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.skip-link:focus{top:12px;outline-color:var(--por)}
main:focus{outline:none}
.wrap{width:100%;max-width:1560px;margin-inline:auto;padding-inline:max(var(--gut),env(safe-area-inset-left)) max(var(--gut),env(safe-area-inset-right))}

/* ---------- Steps and the arch edge ---------- */
.step{position:relative;background:var(--bg);color:var(--fg)}
.s0{z-index:0}.s1{z-index:1}.s2{z-index:2}.s3{z-index:3}.s4{z-index:4}.s5{z-index:5}
.arch-top{margin-top:calc(var(--arch) * -1);padding-top:calc(var(--arch) + var(--pad-t));padding-bottom:calc(var(--arch) + var(--pad-b));border-top-left-radius:50% var(--arch);border-top-right-radius:50% var(--arch)}
.s3.arch-top{padding-bottom:var(--pad-b)}   /* the hinge follows flush: no arch overlaps this step */

/* ---------- Type ---------- */
.h1{font:300 var(--fs-h1)/1.06 var(--serif);letter-spacing:-.02em}
.h1 em{padding-bottom:.06em}
.ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.li{display:block}
.h2{position:relative;font:300 var(--fs-h2)/1.04 var(--serif);font-size:min(var(--fs-h2),19.4cqi);letter-spacing:-.015em;text-wrap:balance;overflow-wrap:break-word}
.h2 .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .03em .14em;margin:-.04em -.03em -.14em}
.h2 .w>span{display:inline-block}
.h3{font:300 clamp(2rem,1.2rem + 2.2vw,3rem)/1.1 var(--serif);letter-spacing:-.01em}
.rule{display:block;width:clamp(72px,8vw,112px);height:1.5px;margin-top:.32em;background:var(--ln);transform-origin:left}
.lede{max-width:40ch;color:var(--fg2);font-size:var(--fs-body)}
.note{max-width:40ch;margin-top:18px;color:var(--fg2);font-size:.9375rem;line-height:1.55}
.quote{font:300 var(--fs-q)/1.12 var(--serif);letter-spacing:-.015em;text-wrap:balance}

/* ---------- Controls ---------- */
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 calc(34px - .14em) 0 34px;border:0;border-radius:999px;background:var(--pill-bg);color:var(--pill-fg);font:500 .84rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-appearance:none;appearance:none;transition:background-color .22s ease,color .22s ease,transform 110ms var(--ease-out)}
.pill:active{transform:scale(.97)}
.pill-ghost{background:transparent;color:var(--fg);border:1.5px solid var(--ln);transition:background-color .22s ease,color .22s ease,border-color .22s ease,transform 110ms var(--ease-out)}
.text-link{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:inherit;font:500 var(--fs-label)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:underline;text-decoration-color:var(--ln);text-decoration-thickness:1.5px;text-underline-offset:.55em;cursor:pointer;transition:text-decoration-color .22s ease}
.menu-btn{appearance:none;-webkit-appearance:none;display:none;align-items:center;gap:10px;min-height:44px;padding:0 4px;border:0;background:none;color:inherit;font:500 var(--fs-label)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.menu-btn::after{content:"";width:28px;height:1.5px;background:currentColor;transition:transform .3s var(--ease-out)}
@media (max-width:1099px){.menu-btn{display:inline-flex}}
@media (hover:hover) and (pointer:fine){
  .pill:hover{background:var(--pill-bg-h)}
  .pill-ghost:hover{background:transparent;border-color:var(--fg)}
  .text-link:hover{text-decoration-color:var(--fg)}
  .menu-btn:hover::after{transform:scaleX(.7);transform-origin:right}
}

/* ---------- Chrome: header (appears after the hero), rail (desktop), booking bar (phone) ---------- */
.head{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--head-h);display:flex;align-items:center;justify-content:space-between;padding:0 max(var(--gut),calc((100vw - 1560px) / 2 + var(--gut)),env(safe-area-inset-right)) 0 max(var(--gut),calc((100vw - 1560px) / 2 + var(--gut)),env(safe-area-inset-left));color:var(--fg);background:var(--bg);background:color-mix(in srgb,var(--bg) 90%,transparent);transition:transform .45s var(--ease-out),background-color .28s ease,color .28s ease,visibility 0s linear 0s}
.head-mark{display:block;color:inherit}
.head-actions{display:flex;align-items:center;gap:22px}
.mark{display:block;width:44px;aspect-ratio:446/289;background:url("assets/logo-raa-mark.webp") center/contain no-repeat}
[data-step="s4"] .mark,[data-step="s5"] .mark{background-image:url("assets/logo-raa-mark-por.webp")}
.pill-head{min-height:44px;padding:0 calc(24px - .14em) 0 24px}

.rail{position:fixed;right:clamp(4px,.9vw,22px);top:50%;z-index:55;display:none;flex-direction:column;gap:2px;transform:translateY(-50%);color:var(--fg);transition:color .28s ease}
@media (min-width:1100px){.rail{display:flex}}
.rail a{position:relative;display:block;width:34px;height:36px;text-decoration:none;color:inherit}
.tick{position:absolute;left:10px;top:7px;width:14px;height:22px;border:1.5px solid var(--ln);border-bottom:0;border-radius:999px 999px 0 0;background:var(--tc);transition:transform .28s var(--ease-out),background-color .28s ease,border-color .28s ease}
.rail a[data-rail="s0"]{--tc:var(--c0)}.rail a[data-rail="s1"]{--tc:var(--c1)}.rail a[data-rail="s2"]{--tc:var(--c2)}.rail a[data-rail="s3"]{--tc:var(--c3)}.rail a[data-rail="s4"]{--tc:var(--c4)}.rail a[data-rail="s5"]{--tc:var(--c5)}
.rail a[aria-current="true"] .tick{border-color:currentColor;transform:scale(1.22)}
.rail a[aria-current="true"]::before{content:"";position:absolute;left:-12px;top:50%;width:16px;height:1.5px;margin-top:-.75px;background:currentColor}
.rail-label{position:absolute;right:38px;top:50%;padding:9px 14px;border-radius:999px;background:var(--bg);color:var(--fg);font:500 .75rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;opacity:0;pointer-events:none;transform:translateY(-50%) translateX(6px);transition:opacity .22s ease,transform .22s var(--ease-out),background-color .28s ease,color .28s ease}
.rail a:hover .rail-label,.rail a:focus-visible .rail-label{opacity:1;transform:translateY(-50%)}
.rail a:focus-visible{outline-offset:-2px;border-radius:8px}

.bar{display:none}
@media (max-width:699px){
  .bar{display:flex;gap:10px;position:fixed;left:16px;right:16px;max-width:440px;margin-inline:auto;bottom:max(16px,env(safe-area-inset-bottom));z-index:55;opacity:0;visibility:hidden;transform:translateY(24px);transition:opacity .32s ease,transform .32s var(--ease-out),visibility 0s linear .32s}
  .bar.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .pill-bar{flex:1 1 0;min-height:52px;padding-inline:14px;box-shadow:0 10px 28px rgba(31,26,23,.22)}
  .pill-ghost.pill-bar{background:var(--bg);box-shadow:none}
}

/* ---------- Hero (S0) ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:calc(var(--head-h) + 12px) 0 calc(var(--arch) + 20px);overflow:clip}
.hero-grid{position:relative;z-index:1;display:grid;gap:clamp(24px,4vh,36px);align-items:center}
.hero-copy{min-width:0}
.lockup{display:flex;flex-direction:column;align-items:center;width:min(100%,clamp(216px,24vw,330px));margin-bottom:clamp(24px,4.2vh,44px);text-align:center}
.lock-mark{width:46%;height:auto;margin-bottom:9%}
.lock-words{width:100%;height:auto}
.lock-name{margin-top:.95em;font:500 .78rem/1 var(--sans);letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;color:var(--fg2)}
.h1{margin-bottom:clamp(16px,2.6vh,26px)}
.hero-sub{margin-bottom:clamp(18px,2.8vh,26px);color:var(--fg2);font-size:var(--fs-body)}
.hero-cta{margin-bottom:clamp(14px,2vh,20px)}
.proof{max-width:44ch;color:var(--fg2);font-size:.9375rem;line-height:1.5;text-wrap:balance}

/* the arch window: a portrait inside a half-circle top, with a concentric outline arch 14 px outside it */
.portrait{position:relative;margin:0;aspect-ratio:4/5.25}
.arch-line{position:absolute;inset:-14px -14px 0 -14px;border:1.5px solid var(--ln);border-bottom:0;border-radius:999px 999px 0 0;pointer-events:none}
.arch-photo{position:absolute;inset:0;overflow:clip;border-radius:999px 999px 0 0;background:var(--c2)}
.arch-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 14%}
.arch-photo .col{position:absolute;inset:0}
.portrait-hero{justify-self:end;width:min(100%,clamp(204px,56vw,420px))}

/* ---------- The curtain (K1) ---------- */
.curtain{display:none}
.js .curtain{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:var(--c1);pointer-events:none}
.c-in{position:relative;text-align:center;padding:0 20px}
.c-mask{display:block;overflow:hidden;width:clamp(84px,9vw,120px);margin:0 auto 22px}
.c-mask img{display:block;width:100%;height:auto}
.c-sentence{font:300 clamp(1.5rem,1.1rem + 1vw,1.75rem)/1.3 var(--serif);color:var(--ink-soft);text-wrap:balance}
.c-line{position:absolute;left:50%;top:calc(100% + 28px);width:1px;height:34vh;background:rgba(31,26,23,.58);transform-origin:top}

/* ---------- Chapters ---------- */
.split{display:grid;gap:clamp(36px,5vw,64px);align-items:start}
.col-text{min-width:0}
.col-text .lede{margin-top:clamp(22px,2.6vw,30px)}
.chapter-cta{margin-top:clamp(28px,3.4vw,40px)}
.more-wrap{margin-top:8px}

/* rows: one component, used four times on purpose. Name, duration, price; a hairline above each row, drawn in with the text. */
.rows{position:relative;margin-top:clamp(26px,3.2vw,40px)}
.row{position:relative}
.row::before,.rows::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--ln);transform-origin:left}
.row::before{top:0}
.rows::after{bottom:0}
.rows{padding-bottom:1px}
.row-btn{appearance:none;-webkit-appearance:none;display:grid;grid-template-columns:minmax(0,1fr) auto auto 20px;column-gap:clamp(14px,2vw,28px);align-items:baseline;width:100%;min-height:60px;padding:18px 0;border:0;background:none;color:inherit;text-align:left;cursor:pointer}
.row-name{font:500 var(--fs-row)/1.25 var(--serif);letter-spacing:-.003em;overflow-wrap:break-word;transition:color .22s ease}
.row-dur{color:var(--fg2);font-size:.9375rem;line-height:1.2;white-space:nowrap}
.row-price{min-width:3.4ch;font:500 var(--fs-row)/1.25 var(--serif);font-variant-numeric:lining-nums tabular-nums;text-align:right;white-space:nowrap}
.row-plus{position:relative;align-self:center;justify-self:end;width:14px;height:14px}
.row-plus::before,.row-plus::after{content:"";position:absolute;left:0;top:50%;width:14px;height:1.5px;margin-top:-.75px;background:currentColor;transition:transform .3s var(--ease-out)}
.row-plus::after{transform:rotate(90deg)}
.row-btn[aria-expanded="true"] .row-plus::after{transform:rotate(0deg)}
.row-panel{max-width:56ch;padding:0 0 18px;opacity:1;transform:none;transition:opacity .26s var(--ease-out),transform .26s var(--ease-out)}
@starting-style{.row-panel{opacity:0;transform:translateY(-6px)}}
.row-panel p{margin-bottom:6px;color:var(--fg2);font-size:1rem;line-height:1.6}
.row-panel[hidden]{display:none}
html:not(.js) .row-panel[hidden]{display:block}
html:not(.js) .more-wrap,html:not(.js) .more-btn{display:none}
@media (hover:hover) and (pointer:fine){.row-btn[aria-expanded="false"]:hover .row-name{color:var(--fg2)}}
.col-text,.lashes{container-type:inline-size}
@container (max-width:600px){
  .row-btn{grid-template-columns:minmax(0,1fr) auto 20px;grid-template-areas:"name price plus" "dur price plus";row-gap:4px;padding:16px 0}
  .row-name{grid-area:name;font-size:calc(var(--fs-row) * .94)}.row-dur{grid-area:dur}.row-price{grid-area:price;align-self:center;font-size:calc(var(--fs-row) * .94)}.row-plus{grid-area:plus}
}

/* galleries: three frames per chapter on desktop (a cascade), every frame in a swipeable row on a phone. overflow:clip, not hidden: a hidden box is a scroll container and would own the view() timeline */
.gal-scroll{min-width:0}
.g{position:relative;margin:0;overflow:clip;background:var(--c2)}
.g img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;transform-origin:50% 50%}
@media (max-width:959px){
  .gal-scroll{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);scrollbar-width:none;overscroll-behavior-x:contain}
  .gal-scroll::-webkit-scrollbar{display:none}
  .gal,.gal-more,.gal-more[hidden]{display:contents}
  .g{flex:0 0 clamp(220px,74vw,340px);scroll-snap-align:start}
  .more-wrap,.more-btn{display:none}
  .split-flip .col-text{order:-1}
}
.gal-more.is-open{animation:fade-in .4s var(--ease-out)}

/* S1: Anna stands at the right; the next arch rises over her */
.stand-layer{position:relative;margin-bottom:calc(-1 * (var(--arch) + var(--pad-b)));padding-top:clamp(24px,6vw,48px);pointer-events:none;display:flex;justify-content:flex-end}
.stand{--sw:min(62vw,300px);position:relative;width:var(--sw);margin:0 calc(var(--sw) * .07) 0 0}
.stand::before{content:"";position:absolute;z-index:-1;left:-7%;right:-7%;top:9%;bottom:0;border:1.5px solid var(--ln);border-bottom:0;border-radius:999px 999px 0 0}
.stand img{width:100%;height:auto;}

/* S3: the title carries the 18+ note; the trio below; Lashes as a quiet strip */
.lips-head{margin-bottom:clamp(40px,5.5vw,80px)}
.lips-note{margin-top:clamp(22px,2.6vw,30px)}
.lips-note .lede{margin-top:0;text-wrap:balance}
.lips-note p+p{margin-top:6px}
.age{display:inline-block;vertical-align:top;margin:.7rem 0 0 .8rem;padding:.55rem .85rem .5rem;border:1.5px solid var(--ln);border-radius:999px;font:500 var(--fs-label)/1 var(--sans);letter-spacing:.14em;color:var(--fg)}
.lashes{display:grid;gap:8px 56px;align-items:start;margin-top:clamp(64px,8vw,120px)}
.lashes .rows{margin-top:0}
.more-wrap-c{margin-top:6px}

/* S4: the hinge (K6), then the chapter. The photograph is taller than its band by 48 px so the parallax never shows an edge */
.s4{padding-top:0;padding-bottom:calc(var(--arch) + var(--pad-b))}
.hinge{position:relative;height:72vh;min-height:440px;overflow:clip;background:var(--c4)}
.hinge-img{position:absolute;left:0;top:-24px;width:100%;height:calc(100% + 48px);object-fit:cover;object-position:50% 34%}
.hinge::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,var(--c3) 0%,rgba(204,182,160,0) 30%,rgba(107,83,62,0) 50%,var(--c4) 84%,var(--c4) 100%);pointer-events:none}
.still{position:absolute;z-index:2;left:max(var(--gut),env(safe-area-inset-left));right:max(var(--gut),env(safe-area-inset-right));bottom:clamp(28px,5vh,52px);max-width:44ch;color:var(--por);font-size:var(--fs-body);line-height:1.5}
.still b{display:block;margin-bottom:6px;font:300 clamp(1.5rem,1.1rem + 1.4vw,2.125rem)/1.15 var(--serif);letter-spacing:-.01em}
.tattoo-grid{margin-top:clamp(56px,8vw,120px)}

/* S5: Anna, the sentence with three tiles (K4), then Visit */
.anna{padding-bottom:clamp(40px,6vw,80px)}
.anna-grid{position:relative;z-index:1;display:grid;gap:clamp(24px,4vw,40px);align-items:center}
.anna-lede{color:var(--fg2)}
.tile{position:relative;margin:0;overflow:clip;background:#2A2320}
.tile img{width:100%;height:100%;object-fit:cover}
.t-a img,.t-b img{aspect-ratio:3/4}
.portrait-anna{width:min(100%,420px);justify-self:center;background:transparent;overflow:visible}
.portrait-anna .arch-photo{background:var(--c5);}
.portrait-anna .arch-photo img{object-position:50% 18%}
.visit{scroll-margin-top:24px;padding-top:clamp(24px,4vw,56px);padding-bottom:clamp(56px,7vw,104px)}
.hair{display:block;height:1px;background:var(--ln);margin-bottom:clamp(44px,6vw,88px);transform-origin:left}
.visit-grid{display:grid;gap:clamp(36px,5vw,56px);align-items:start}
.visit-addr{max-width:34ch;text-wrap:pretty;margin-top:clamp(22px,2.6vw,30px);font-size:clamp(1.125rem,1.05rem + .3vw,1.3125rem);line-height:1.6}
.visit-choice{max-width:44ch;margin-top:18px;font:400 1.125rem/1.5 var(--sans)}
.visit-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:clamp(24px,3vw,34px)}
.inert-note{flex-basis:100%;max-width:52ch;margin-top:4px;color:var(--fg2);font-size:.9375rem;line-height:1.55}
.know li{position:relative;padding:14px 0 14px 46px;color:var(--fg2);font-size:1rem;line-height:1.55}
.know li::before{content:"";position:absolute;left:0;top:1.45em;width:26px;height:1px;background:var(--ln)}
.foot{padding:0 0 clamp(40px,5vw,72px)}
.foot-grid{display:grid;gap:28px;align-items:center;padding-top:clamp(32px,4vw,56px);border-top:1px solid var(--ln)}
.foot-logo{display:block;width:min(72vw,300px);height:auto}
.foot-line{font:500 var(--fs-row)/1.2 var(--sans)}
.foot-note{max-width:62ch;margin-top:12px;color:var(--fg2);font-size:.9375rem;line-height:1.6;text-wrap:pretty}

/* ---------- The menu sheet (K5) ---------- */
.menu{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--bg);color:var(--fg);overflow:auto}
.menu::backdrop{background:transparent}
.menu[open]{opacity:1;transition:opacity .6s var(--ease-menu)}
@starting-style{.menu[open]{opacity:0}}
.m-bar{height:var(--head-h);display:flex;align-items:center;justify-content:space-between}
.m-bar .menu-btn{display:inline-flex}
.m-in{padding-top:16px;padding-bottom:56px;text-align:center}
.m-arch{width:150px;aspect-ratio:150/185;margin:8px auto 36px;overflow:clip;border-radius:999px 999px 0 0;background:var(--c2)}
.m-arch img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.m-list{margin:0;font:400 1.9375rem/1.3 var(--sans);text-align:left;text-wrap:pretty}
.m-list a{color:inherit;text-decoration:none}
.m-list .dot{display:inline-block;margin:0 .35em;font-style:normal;color:var(--fg2)}
.m-cta{display:flex;flex-direction:column;gap:14px;align-items:stretch;margin-top:40px;text-align:left}
.m-cta .text-link{align-self:flex-start}
.menu[open] .m-enter{opacity:1;transform:none;transition:opacity .5s var(--ease-menu) var(--d,.3s),transform .5s var(--ease-menu) var(--d,.3s)}
@starting-style{.menu[open] .m-enter{opacity:0;transform:translateY(14px)}}
@media (min-width:700px){.m-in{max-width:720px;margin-inline:auto}.m-list{font-size:2.25rem}.m-cta{flex-direction:row;align-items:center;gap:28px}}

/* ---------- Desktop layouts ---------- */
@media (min-width:960px){
  .hero-grid{grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:clamp(24px,3vw,56px)}
  .portrait-hero{width:100%;max-width:480px}
  .split{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
  .gal-scroll{display:contents}
  .s1 .col-text{grid-column:1/8;grid-row:1}
  .stand-layer{position:absolute;inset:0;margin:0;padding:0 var(--gut);max-width:1560px;margin-inline:auto;align-items:flex-end}
  .stand{--sw:min(30vw,440px)}
  .s2 .gal-a{grid-column:1/8;grid-row:1;position:relative;margin-left:calc(var(--gut) * -1);aspect-ratio:1/1.07}
  .s2 .col-text{grid-column:9/13;grid-row:1}
  .gal-a .g{position:absolute}
  .gal-a .g1{left:0;top:0;width:56%}
  .gal-a .g3{right:0;top:1%;width:28%}
  .gal-a .g2{right:0;top:45%;width:42%}
  .gal-b{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
  .gal-b .g1{grid-column:1/6}
  .gal-b .g2{grid-column:6/10;margin-top:clamp(40px,7vw,100px)}
  .gal-b .g3{grid-column:10/13;margin-top:clamp(12px,2.4vw,36px)}
  .lashes{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
  .s4 .col-text{grid-column:1/5;grid-row:1}
  .s4 .gal-c{grid-column:6/13;grid-row:1;position:relative;aspect-ratio:1/1.24}
  .gal-c .g{position:absolute}
  .gal-c .g1{left:0;top:0;width:50%}
  .gal-c .g2{right:0;top:8%;width:42%}
  .gal-c .g3{left:11%;top:60%;width:34%}
  .gal-more{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px;margin-top:clamp(16px,2vw,32px)}
  .gal-more[hidden]{display:none}
  html:not(.js) .gal-more[hidden]{display:grid}
  .s3 .gal-more{grid-template-columns:minmax(0,3fr) minmax(0,9fr);margin-top:clamp(24px,3vw,40px)}
  .s3 .gal-scroll{display:block}
  .anna-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:0}
  .anna-grid .quote{grid-column:1/8;grid-row:1;align-self:end}
  .anna-lede{grid-column:1/7;grid-row:2;margin-top:clamp(22px,2.6vw,30px);align-self:start}
  .portrait-anna{grid-column:8/13;grid-row:1/3;justify-self:end;width:100%;max-width:470px}
  .t-a{grid-column:2/5;grid-row:3;width:auto;margin-top:clamp(24px,4vw,56px)}
  .t-b{grid-column:7/10;grid-row:3;width:auto;margin-top:clamp(110px,13vw,190px)}
  .visit-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:48px}
  .foot-grid{grid-template-columns:auto minmax(0,1fr);column-gap:clamp(40px,6vw,96px)}
  .hinge{height:80vh;min-height:560px}
}
@media (max-width:959px){
  .anna-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .anna-grid .quote,.anna-lede,.portrait-anna{grid-column:1/-1}
  .t-a{justify-self:start;width:min(100%,220px)}.t-b{justify-self:end;width:min(100%,220px);margin-top:40px}
}
@media (min-width:1280px){
  .hero-grid{grid-template-columns:minmax(0,1fr) clamp(400px,34vw,500px)}
  .portrait-hero{max-width:none;margin-right:clamp(0px,1.4vw,24px);width:min(100%,calc((100svh - var(--head-h) - 12px - var(--arch) - 20px) * .762))}
}
@media (max-width:699px){
  .pill-head{display:none}
  .hero{padding-top:max(28px,env(safe-area-inset-top))}
  .lockup{width:min(100%,208px);margin-bottom:22px}
  .portrait-hero{width:min(100%,clamp(190px,52vw,300px))}
  .foot{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
  .visit-actions .pill{width:100%}
  .age{margin-left:.5rem}
  .hinge{height:62vh;min-height:380px}
  .hinge-img{object-position:50% 30%}
}

/* ---------- Preferences ---------- */
@supports not (background:color-mix(in srgb,red 50%,transparent)){.head{background:var(--bg)}}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.head{background:var(--bg)}}
@media (prefers-reduced-transparency:reduce){.head{background:var(--bg)}}
@media (prefers-contrast:more){
  [data-step="s0"],[data-step="s1"],[data-step="s2"],[data-step="s3"]{--ln:var(--ink);--fg2:var(--ink)}
  [data-step="s4"],[data-step="s5"]{--ln:var(--por);--fg2:var(--por)}
}

/* ---------- Reduced motion: the finished page, still ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .curtain{display:none}
  .js .portrait-hero .arch-line,.js .portrait-anna .arch-line,.js .stand::before,.js .col-l,.js .col-r{clip-path:none}
  .js .lockup,.js .li,.js .open-f,.js .rail,.js [data-reveal],.js .rows .row-btn,.js .know li,.js .stand,.js .c-sentence{opacity:1;transform:none;}
  .js .h2 .w>span,.js .rule,.js .hair,.js .rows .row::before,.js .rows::after,.js .c-mask img,.js .c-line{transform:none}
}
/**
 * ek-reviews.css — styles for the "Trusted by 100+ customers" homepage carousel.
 *
 * 2026-09-17 owner correction: rebuilt as a native horizontal carousel (structure borrowed from
 * the owner's Uptown reference — big statement headline, one prominent centered ivory card,
 * partially-visible neighbors, edge-fade/depth — NOT its teal accent, avatar photos, or invented
 * job titles). Royal Art type: Noto Serif Display headline, existing brass/charcoal palette, the site's
 * actual card material (`border-radius: 18px`, the same `--cohesion-shadow` treatment used
 * elsewhere), same focus-outline and reduced-motion conventions as the rest of the site.
 *
 * The carousel itself is native CSS scroll-snap (`overflow-x:auto; scroll-snap-type:x
 * mandatory`) — no JS animation library, no layout-shifting clones. The section background is a
 * neutral warm ambient gradient built from the existing charcoal/brass variables, not a photo —
 * the only candidate photo on this site (`house.webp`) is labelled an architectural
 * visualisation, not a real customer photo, and is deliberately not repurposed here.
 */

.reviews {
  --reviews-bg: var(--bg, #1c1d1a);
  --reviews-chalk: var(--chalk, #ece8db);
  --reviews-muted: var(--muted, #b9b4a4);
  --reviews-brass: var(--brass, #ccb480);
  --reviews-line: var(--line, #ece8db30);
  --reviews-panel: var(--panel, #282a25);
  --reviews-ease: var(--ease, cubic-bezier(.19, 1, .22, 1));
  --reviews-gutter: var(--gutter, clamp(22px, 4.5vw, 78px));
  --reviews-shadow: var(--cohesion-shadow, 0 16px 42px rgba(0, 0, 0, .18));
  /* Warm ivory card material — dark, legible text on a light surface (the carousel's one
     deliberate light panel against the site's otherwise dark section). */
  --reviews-ivory: #f6f1e2;
  --reviews-ivory-text: #2a2620;
  --reviews-ivory-muted: #6b6355;

  position: relative;
  overflow: hidden;
  color: var(--reviews-chalk);
  /* Neutral warm ambient backdrop — no photo, no provenance claim. Two soft radial glows (brass,
     very low alpha) over the site's own dark panel tone, matching the "layered depth against EK
     charcoal/gold" brief without pretending to be a real background photograph. */
  background:
    radial-gradient(120% 90% at 15% -10%, rgba(204, 180, 128, .10), transparent 55%),
    radial-gradient(120% 90% at 85% 110%, rgba(204, 180, 128, .07), transparent 55%),
    var(--reviews-bg);
}

.reviews-intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(36px, 5vw, 64px);
}

.reviews-eyebrow {
  margin: 0 0 12px;
  font: 600 12px/1.4 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--reviews-brass);
}

.reviews h2 {
  font-family: var(--serif);
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--reviews-chalk);
}

.reviews-synthetic-banner {
  margin: 0 auto 24px;
  padding: 10px 16px;
  border: 1px dashed var(--reviews-brass);
  color: var(--reviews-brass);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  max-width: 620px;
  text-align: center;
}

/* ---- Carousel shell ------------------------------------------------------------------- */

.reviews-carousel {
  position: relative;
}

.reviews-track {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Edge fade/depth: the track's own content fades toward the section background at both
     horizontal edges, revealing partial neighboring cards without any hard clip line. Sized to
     a fixed 64px max on wide viewports, where the peek around each side of the centered card is
     comfortably larger than that (root visually confirmed this on desktop). Deliberately
     disabled below 641px (see the mobile media query) rather than scaled down proportionally —
     at narrow widths the peek shrinks enough that any fade zone risks bleeding onto the ACTIVE
     card's own edge, which root's visual review caught as a real defect ("active card edges
     shaded by dark stripes"); the fade must never touch the active card. */
  
  
}

.reviews-track::-webkit-scrollbar {
  display: none;
}

.reviews-track:focus-visible {
  outline: 2px solid var(--reviews-brass);
  outline-offset: 6px;
}

.reviews-list {
  list-style: none;
  margin: 0;
  display: flex;
  gap: clamp(18px, 2.4vw, 32px);
  /* Half-empty inline padding either side lets the first/last card still center under
     scroll-snap, and is exactly what reveals the partial neighboring card at each edge —
     no clones needed. */
  padding-inline: calc((100% - min(640px, 78vw)) / 2);
  padding-block: 6px; /* room for the focus outline / active-card lift without clipping */
}

.review-card {
  flex: 0 0 min(640px, 78vw);
  scroll-snap-align: center;
  background: var(--reviews-ivory);
  color: var(--reviews-ivory-text);
  border: 1px solid rgba(42, 38, 32, .08);
  border-radius: 18px;
  box-shadow: 0 20px 46px rgba(20, 16, 8, .28);
  padding: clamp(28px, 3vw, 44px);
  min-width: 0;
  /* Dimming uses opacity/shadow only — deliberately NOT transform:scale(). A scale transform
     changes the element's rendered getBoundingClientRect, which would skew the
     IntersectionObserver-ratio math this carousel's active-slide detection depends on (verified:
     it was the actual cause of an edge-case mis-detection at the last slide during testing). */
  opacity: .55;
  transition: opacity .4s var(--reviews-ease), box-shadow .4s var(--reviews-ease);
}

.review-card--active {
  opacity: 1;
  box-shadow: 0 28px 60px rgba(20, 16, 8, .36);
}

.review-synthetic-badge {
  margin: 0 0 16px;
  padding: 3px 10px;
  display: inline-block;
  border: 1px solid #a8813f;
  border-radius: 999px;
  color: #7a5e2c;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.review-figure {
  margin: 0;
  min-width: 0;
}

.review-stars {
  display: flex;
  gap: 3px;
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1;
}

.review-star {
  color: rgba(42, 38, 32, .18);
}

.review-star--filled {
  /* Restrained gold, not the loud saturated gold a raw brand hex would give — kept close to the
     site's own --brass tone so it reads as EK gold, not a generic 5-star badge color. */
  color: #a8813f;
}

.review-quote {
  margin: 0 0 20px;
  font: 19px/1.6 var(--sans);
  color: var(--reviews-ivory-text);
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.review-quote p {
  margin: 0 0 1em;
}

.review-quote p:last-child {
  margin-bottom: 0;
}

.review-quote::before {
  content: '\201C';
  font-family: var(--serif);
  font-size: 1.4em;
  color: #a8813f;
  line-height: 0;
  vertical-align: -0.05em;
  margin-right: 2px;
}

.review-quote--clamped:not(.review-quote--expanded) {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.review-attribution {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--reviews-ivory-muted);
}

.review-attribution cite {
  font-style: normal;
  color: var(--reviews-ivory-text);
  font-weight: 600;
}

.review-source-link,
.review-expand-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: #8a6a30;
  border-bottom: 1px solid rgba(42, 38, 32, .2);
  cursor: pointer;
  min-height: 32px;
  transition: color 0.2s var(--reviews-ease), border-color 0.2s var(--reviews-ease);
}

.review-source-link:hover,
.review-expand-toggle:hover {
  color: var(--reviews-ivory-text);
  border-color: var(--reviews-ivory-text);
}

.review-expand-toggle {
  margin-top: 4px;
}

.review-card a:focus-visible,
.review-card button:focus-visible {
  outline: 2px solid #8a6a30;
  outline-offset: 3px;
}

/* ---- Controls: prev/next, current-index text, play/pause (no dot pagination) ----------- */

.reviews-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 28px);
  margin-top: clamp(24px, 3vw, 40px);
  flex-wrap: wrap;
}

.reviews-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid var(--reviews-line);
  background: var(--reviews-panel);
  color: var(--reviews-chalk);
  cursor: pointer;
  transition: background .2s var(--reviews-ease), border-color .2s var(--reviews-ease), transform .15s var(--reviews-ease);
}

.reviews-arrow svg {
  width: 20px;
  height: 20px;
}

.reviews-arrow:hover {
  border-color: var(--reviews-brass);
  background: #32342d;
}

.reviews-arrow:active {
  transform: scale(.96);
}

.reviews-index {
  margin: 0;
  min-width: 52px;
  text-align: center;
  font: 12px/1 var(--sans);
  letter-spacing: 0.04em;
  color: var(--reviews-muted);
}

.reviews-playpause {
  border: 1px solid var(--reviews-line);
  background: var(--reviews-panel);
  color: var(--reviews-chalk);
  border-radius: 999px;
  padding: 0 18px;
  min-height: 44px;
  font: 12px/1 var(--sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s var(--reviews-ease), border-color .2s var(--reviews-ease);
}

.reviews-playpause:hover {
  border-color: var(--reviews-brass);
  background: #32342d;
}

/* Truthful disabled state under prefers-reduced-motion: reduce — see ek-reviews.js
   setPlayPauseLabel(). Dimmed and non-interactive rather than offering a "Play" that can never
   actually run. */
.reviews-playpause:disabled {
  opacity: .5;
  cursor: default;
}

.reviews-playpause:disabled:hover {
  border-color: var(--reviews-line);
  background: var(--reviews-panel);
}

.reviews-arrow:focus-visible,
.reviews-playpause:focus-visible {
  outline: 2px solid var(--reviews-brass);
  outline-offset: 3px;
}

@media (max-width: 1024px) {
  .review-card {
    flex-basis: min(560px, 82vw);
  }
}

@media (max-width: 640px) {
  .reviews h2 {
    font-size: 30px;
  }

  /* Root visual review (390px): 84vw left too little room for a visible neighbor peek once the
     site's own inherited section gutter (clamp(22px,4.5vw,78px) on each side) is subtracted from
     the actual scrollable track width — the peek came out at ~9px, which the inter-card gap then
     ate entirely, so no neighbor showed at all. 72vw against the real (gutter-narrowed) track
     width leaves a clearly visible ~20-30px peek on both sides at 320-640px, while the card
     itself stays comfortably legible. */
  .review-card {
    flex-basis: 72vw;
    padding: clamp(22px, 6vw, 30px);
  }

  .reviews-list {
    padding-inline: calc((100% - 72vw) / 2);
    gap: 14px;
  }

  .review-quote {
    font-size: 17px;
  }

  .reviews-controls {
    gap: 12px;
  }

  /* Root visual review (390px): the desktop fade zone (up to 64px) was wider than the actual
     peek at this card size, so it bled onto the ACTIVE card's own edges — a real defect ("active
     card edges shaded by dark stripes"). Disabling the mask below 641px is the fix root
     explicitly named as acceptable; the still-visible partial neighbor peek plus each card's own
     opacity dimming already carries the "layered depth" look without any fade-onto-active risk. */
  .reviews-track {
    
    
  }
}

@media (prefers-reduced-motion: reduce) {
  .reviews-track {
    scroll-behavior: auto;
  }

  .review-card {
    transition: none;
  }

  .reviews-arrow,
  .reviews-playpause {
    transition: none;
  }

  .review-source-link,
  .review-expand-toggle {
    transition: none;
  }
}

/* D-C52 v6: quiet architecture, full-width chapters, layered functional glass. */
:root{--spring:cubic-bezier(.22,1,.36,1);--ease-menu:var(--spring)}
html.again{--t:.15}
html.skip{--t:0}
.hero{min-height:900px;min-height:max(850px,100svh);padding:64px 0 130px;isolation:isolate}
.hero-scene{position:absolute;inset:0;z-index:-3;overflow:hidden}
.hero-scene img{width:100%;height:100%;object-fit:cover;object-position:65% center}
.hero-wash{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(249,246,241,.96) 0%,rgba(249,246,241,.90) 28%,rgba(249,246,241,.75) 43%,rgba(249,246,241,.05) 64%),linear-gradient(0deg,var(--c0),transparent 22%);pointer-events:none}
.hero-grid{display:block;width:100%}
.hero-copy{width:min(52%,650px)}
.hero .lockup{align-items:flex-start;width:290px;margin:0 0 24px}
.lock-name{font-size:.72rem;letter-spacing:.23em;text-indent:0}
.hero .h1{font-size:clamp(2.8rem,3.55vw,3.8rem);line-height:1.13;margin-bottom:16px}
.hero-sub{margin-bottom:22px}
.hero-interim{position:absolute;z-index:-2;left:55.5%;top:19%;width:27%;height:65%;pointer-events:none;}
.hero-interim img{width:100%;height:100%;object-fit:contain;opacity:.8;}
.signature{position:absolute;z-index:2;top:73%;left:54%;width:31%;text-align:center;pointer-events:none;color:#F9F6F1;font:400 clamp(3rem,4.7vw,5rem)/1.5 'Ms Madi',cursive;letter-spacing:0;text-shadow:0 2px 16px #201a17}
.signature span{display:inline-block;padding:.08em .16em;background:radial-gradient(ellipse,rgba(32,26,23,.86),rgba(32,26,23,.7) 45%,transparent 73%);border-radius:50%}
.glass,.head,.bar,.menu,.review-card{background:var(--bg);background:color-mix(in srgb,var(--bg) 88%,transparent);border:1px solid rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.72),inset 0 -1px 0 rgba(255,255,255,.12),0 12px 36px rgba(31,26,23,.08)}
.head{border-width:0 0 1px;transition-timing-function:var(--spring);height:68px}
.services-menu{border-radius:22px;padding:8px 24px;max-width:560px;color:var(--ink);--bg:var(--c0);background:rgba(249,246,241,.88)}
.services-menu a{display:grid;grid-template-columns:22px 1fr 20px;gap:14px;align-items:center;min-height:54px;text-decoration:none;font:300 clamp(1.4rem,1.7vw,1.75rem)/1.2 var(--serif);border-bottom:1px solid rgba(31,26,23,.3);transition:background-color .3s,transform .3s var(--spring);border-radius:3px}
.services-menu a:last-child{border:0}
.service-number{font:500 .72rem/1 var(--sans);letter-spacing:.08em;color:var(--ink-soft)}
.services-menu a>span:last-child{font:400 1.15rem var(--sans)}
.services-menu a:hover{background:rgba(249,246,241,.75);transform:translateX(3px)}
.services-menu a:active{transform:scale(.99)}
.hero-bottom{display:flex;align-items:center;gap:20px;margin-top:20px;flex-wrap:wrap}
.hero-bottom .proof{font-size:.8rem}
.bar{padding:8px;border-radius:36px;gap:8px}
.bar .pill{box-shadow:none;min-height:48px;padding-inline:12px}
.pill-ghost.pill-bar{background:transparent}
.menu{inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);border-radius:24px;transform-origin:top right}
.menu::backdrop{background:rgba(20,16,12,.3);}
.m-in{padding-top:40px}
.m-list{display:flex;flex-direction:column;font-size:clamp(1.8rem,5vh,2.8rem);line-height:1.35}
.m-list a{display:flex;align-items:center;min-height:48px;padding:6px 0;border-bottom:1px solid var(--ln)}
.m-list .dot{display:none}
.m-cta{margin-top:28px}
.menu-btn{display:inline-flex}
.head-mark{min-height:44px;display:flex;align-items:center}
.rail a{height:44px;width:44px}
.tick{top:11px;left:15px}
.rail{right:4px}
.chapter-art{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;border-radius:inherit}
.chapter-art img{width:100%;height:100%;object-fit:contain;opacity:.13;}
.step>.wrap{position:relative;z-index:1}
.art-skin img{object-position:85% center}
.art-studio img{object-position:20% center;opacity:.075}
.art-anna img{object-position:85% center;opacity:.16}
.s1 .split{display:block;max-width:1200px}
.s1 .col-text{width:100%}
.s1 .lede{max-width:50ch}
.s1 .rows{max-width:none}
.s1 .row-panel{max-width:65ch}
.s1{padding-top:calc(var(--arch) + 28px);padding-bottom:calc(var(--arch) + 40px)}
.s4{padding-top:72px}
.tattoo-grid{margin-top:0}
.anna-grid{display:block;max-width:1200px;padding-top:16px;padding-bottom:32px}
.anna-grid .quote{max-width:19ch}
.anna-lede{max-width:46ch;margin-top:28px}
.anna{padding-bottom:48px}
.lashes{scroll-margin-top:90px;margin-top:48px}
.lips-head{margin-bottom:36px}
.reviews-chapter{padding:0 0 56px}
.reviews-summary{margin-bottom:28px;color:var(--fg2);font-size:.95rem}
.reviews{padding:0;background:none;overflow:visible;color:var(--fg);--reviews-chalk:var(--por);--reviews-muted:var(--por-soft);--reviews-brass:var(--por);--reviews-ease:var(--spring)}
.reviews-intro{text-align:left;margin:0 0 32px}
.reviews-intro h2{font:300 clamp(2.6rem,4.5vw,4.5rem)/1.08 var(--serif);color:var(--por);letter-spacing:-.02em}
.reviews-track{position:relative;overscroll-behavior-x:contain}
.review-card{--bg:#342c27;color:var(--por);background:rgba(52,44,39,.88);border-color:rgba(249,246,241,.35);border-radius:24px;opacity:1;padding:32px;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 16px 35px rgba(0,0,0,.14)}
.review-card--active{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 18px 40px rgba(0,0,0,.2)}
.review-quote{font:400 clamp(1.45rem,2vw,1.8rem)/1.42 var(--sans);color:var(--por);hyphens:none}
.review-quote::before{content:none}
.review-attribution,.review-attribution cite,.review-date,.review-source-label{color:var(--por-soft);font:400 .9rem/1.5 var(--sans)}
.review-attribution cite{font-weight:500;color:var(--por)}
.review-star--filled{color:var(--por)}
.reviews-arrow,.reviews-playpause{color:var(--por);background:rgba(249,246,241,.07);border:1px solid rgba(249,246,241,.6);min-width:44px;min-height:44px}
.reviews-index,.review-expand-toggle{color:var(--por)}
.reviews-arrow:hover,.reviews-playpause:hover{background:rgba(249,246,241,.16);color:var(--por)}
.review-expand-toggle{margin-top:12px}
/* First logo is geometrically centred; the scene follows, then individual service choices. */
.c-in{padding:0}
.c-mask{width:clamp(130px,13vw,180px);margin:0}
.js .curtain{background:var(--c0)}
.js .c-mask img{opacity:0;transform:translateY(8px)}
.js .hero-scene,.js .hero-interim,.js .hero-wash,.js .lockup{opacity:0}
.js .li{opacity:0;transform:translateY(18px)}
.js .open-f{opacity:0}
.js .services-menu{opacity:0}
.js .services-menu a{opacity:0;transform:translateY(16px);visibility:hidden}
.js .signature span{clip-path:inset(0 100% 0 0)}
.js .rail{opacity:0}
.js.go .c-mask img{animation:v6-logo calc(1.2s * var(--t)) var(--spring) calc(.15s * var(--t)) both}
.js.go .curtain{animation:v6-curtain calc(1.1s * var(--t)) ease calc(1.3s * var(--t)) both}
.js.go .hero-scene,.js.go .hero-interim,.js.go .hero-wash{animation:fade-in calc(1.6s * var(--t)) ease calc(1.4s * var(--t)) both}
.js.go .lockup{animation:fade-in calc(.9s * var(--t)) ease calc(1.9s * var(--t)) both}
.js.go .li{animation:v6-enter calc(1.1s * var(--t)) var(--spring) calc((2s + var(--k) * .12s) * var(--t)) both}
.js.go .services-menu{animation:fade-in calc(.8s * var(--t)) ease calc(2.6s * var(--t)) both}
.js.go .services-menu a{animation:v6-menu calc(.9s * var(--t)) var(--spring) calc((3s + var(--n) * .36s) * var(--t)) both}
.js.go .signature span{animation:v6-sign calc(1.6s * var(--t)) cubic-bezier(.35,0,.65,1) calc(3.9s * var(--t)) both}
.js.go .open-f{animation:fade-in calc(.7s * var(--t)) ease calc((2.9s + var(--k) * .5s) * var(--t)) both}
.js.go .rail{animation:fade-in calc(.6s * var(--t)) ease calc(4.8s * var(--t)) both}
@keyframes v6-logo{to{opacity:1;transform:none}}
@keyframes v6-curtain{to{opacity:0;visibility:hidden}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes v6-enter{to{opacity:1;transform:none}}
@keyframes v6-menu{0%{opacity:0;transform:translateY(16px);visibility:visible}100%{opacity:1;transform:none;visibility:visible}}
@keyframes v6-sign{to{clip-path:inset(0 0 0 0)}}
.js.skip .curtain{display:none}
.js.skip .hero-scene,.js.skip .hero-interim,.js.skip .hero-wash,.js.skip .lockup,.js.skip .li,.js.skip .open-f,.js.skip .services-menu,.js.skip .services-menu a,.js.skip .signature span,.js.skip .rail{animation:none;opacity:1;transform:none;clip-path:none;visibility:visible}
/* Work images retain their clarity; a close grid replaces the tall, empty cascades. */
@media(min-width:960px){
  .s2 .col-text{grid-column:7/13}.s2 .gal-a{grid-column:1/6;margin:0;aspect-ratio:auto}
  .s4 .col-text{grid-column:1/7}.s4 .gal-c{grid-column:8/13;aspect-ratio:auto}
  .gal-a,.gal-c{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
  .gal-a .g,.gal-c .g{position:relative;left:auto;right:auto;top:auto;width:100%;margin:0}
  .gal-a .g1,.gal-c .g1{grid-column:1/-1}
  .gal-a .g1 img,.gal-c .g1 img{aspect-ratio:4/3;object-position:center}
  .gal-b{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
  .gal-b .g1,.gal-b .g2,.gal-b .g3{grid-column:auto;margin:0}
  .gal-b .g img{aspect-ratio:1/1}
  .s2 .col-text,.s4 .col-text{align-self:center}
}
@media(min-width:700px) and (max-width:959px){.hero-copy{width:64%}.hero-interim{left:61%;width:34%}.signature{left:62%;width:35%;font-size:3rem}.hero .h1{font-size:3rem}}
@media(max-width:699px){
  :root{--arch:65px}
  .hero{display:block;min-height:1180px;padding:36px 0 130px}
  .hero-grid{padding-inline:24px}.hero-copy{width:100%}
  .hero .lockup{width:245px;margin:0 0 22px}.lock-name{font-size:.65rem}
  .hero .h1{font-size:clamp(2rem,8.2vw,2.7rem);max-width:20ch}
  .hero-sub{font-size:1rem;margin-bottom:300px}
  .hero-scene{top:210px;bottom:auto;height:470px}
  .hero-scene img{object-position:75% center}
  .hero-wash{background:linear-gradient(0deg,var(--c0) 0%,transparent 12%,transparent 65%,var(--c0) 83%);top:210px;bottom:auto;height:470px}
  .hero-interim{top:270px;left:30%;width:46%;height:265px}
  .signature{top:505px;left:20%;width:66%;font-size:3.2rem;line-height:1.4}
  .services-menu{padding:8px 18px;border-radius:20px}.services-menu a{font-size:1.55rem;min-height:52px;gap:10px}
  .hero-bottom{gap:8px;margin-top:14px}.hero-bottom .proof{width:100%}
  .hero .lock-words{max-width:100%}
  .art-skin img{object-position:center;opacity:.10}.art-anna img{opacity:.12}
  .s1 .split{padding-inline:24px}.s1{padding-bottom:calc(var(--arch) + 32px)}
  .review-card{padding:24px;flex-basis:86vw}.reviews-list{padding-inline:calc((100% - 86vw)/2);gap:14px}
  .reviews-track{}
  .reviews-chapter>.wrap{padding-inline:0}.reviews-intro,.reviews-summary{padding-inline:24px}
  .reviews-intro h2{font-size:2.65rem}
  .review-quote{font-size:1.45rem}
  .m-in{padding-top:12px}.m-list{font-size:1.7rem}.m-list a{padding:3px 0;min-height:44px}.m-cta{margin-top:20px}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass,.head,.bar,.menu,.review-card{background:var(--bg)}}
@media(prefers-reduced-transparency:reduce){.glass,.head,.bar,.menu,.review-card{background:var(--bg);}.menu::backdrop{}}
@media(prefers-contrast:more){.glass,.head,.bar,.menu,.review-card{background:var(--bg);border-color:var(--fg);}.chapter-art{display:none}.hero-wash{background:rgba(249,246,241,.95)}.signature{color:var(--ink);text-shadow:none}.signature span{background:var(--c0)}}
@media(prefers-reduced-motion:reduce){
  .js .curtain{display:none}
  .js .hero-scene,.js .hero-interim,.js .hero-wash,.js .lockup,.js .li,.js .open-f,.js .services-menu,.js .services-menu a,.js .signature span,.js .rail{opacity:1;transform:none;clip-path:none;visibility:visible}
  .reviews-track{scroll-behavior:auto}
}

/* Generated image availability */
@media (min-width:700px){.hero-interim{display:none}}
@media (max-width:699px){.hero-interim{display:none}}

/* ANNA-V6-SECTIONS-1. Decisions: ../SECTION_DESIGN_LOG.md, 2026-10-14.
   Hero swaps: change one URL per device below, then rebuild the artifact. */
:root{
  --hero-doorway-desktop:none;
  --hero-doorway-phone:none;
  --head-h:68px;
  --arch:24px;
}
/* 0. Keep the authored 5.6s opening; sections are readable without scroll reveals. */
.step.arch-top{margin-top:0;border-radius:0;padding-block:48px;animation:none;transform:none}

.g[data-frame],.g[data-frame] img{animation:none;clip-path:none;transform:none}
.step[id],#lashes{scroll-margin-top:84px}
.h2{font-size:clamp(2.6rem,4.5vw,4rem)}
.col-text .lede{margin-top:20px}
.chapter-cta{margin-top:24px}
.rows{margin-top:24px}
.row-btn{column-gap:16px}
.row-name{overflow-wrap:anywhere}
.row-panel{padding-bottom:16px}
.row-panel p{max-width:60ch}
.step .wrap,.split>*,.visit-grid>*{min-width:0}

/* 1. Full scene, selectable menu and a signature with its own space. */
.hero{min-height:800px;min-height:max(780px,100svh);padding:48px 0 72px;align-items:center}
.hero-scene{background-image:var(--hero-doorway-desktop);background-size:cover;background-position:65% center;background-repeat:no-repeat}
.hero-copy{width:51%;max-width:650px}
.hero .h1{font-size:clamp(2.6rem,3.45vw,3.6rem)}
.hero .signature{top:auto;bottom:8px;left:46%;width:38%;white-space:nowrap;font-size:clamp(2.6rem,3.4vw,3.5rem);line-height:1.2}
.signature span{padding:.12em .28em;background:rgba(32,26,23,.82);border-radius:12px}
.hero-wash{background:linear-gradient(90deg,rgba(249,246,241,.98),rgba(249,246,241,.94) 30%,rgba(249,246,241,.76) 47%,transparent 64%),linear-gradient(0deg,var(--c0),transparent 10%)}

/* Shared content material: one translucent surface over each soft background. */
.section-surface,.s1 .rows,.lashes,.visit-grid{
  border:1px solid rgba(255,255,255,.38);border-radius:22px;
  background:var(--bg);background:color-mix(in srgb,var(--bg) 97%,transparent);
  
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 32px rgba(31,26,23,.06);
}
.chapter-art img{object-fit:contain;object-position:78% center;opacity:.12;}
.chapter-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg),transparent 58%)}

/* 2. Six Kobido choices use the width as a single two-column menu. */
.s1 .split{max-width:1560px}
.s1 .lede{max-width:64ch}
.s1 .rows{padding:10px 24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.s1 .rows::after{display:none}
.s1 .row-btn{grid-template-columns:minmax(0,1fr) auto 20px;grid-template-areas:"name price plus" "dur price plus";row-gap:5px;min-height:96px;padding-block:16px}
.s1 .row-name{grid-area:name;font-size:1.4rem}
.s1 .row-dur{grid-area:dur}
.s1 .row-price{grid-area:price;align-self:center}
.s1 .row-plus{grid-area:plus}
.s1 .row:nth-child(-n+2)::before{display:none}
.s1 .chapter-cta{margin-top:20px}

/* 3. Text and sharp work images share the first view, with no empty grid column. */
#makeup .split,#tattoo .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
#makeup .col-text,#tattoo .col-text{grid-column:1;grid-row:1;align-self:start;padding:24px}
#makeup .gal-scroll,#tattoo .gal-scroll{display:block;grid-column:2;grid-row:1;margin:0;padding:0;overflow:visible}
.gal-a,.gal-c,.gal-b{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:10px;aspect-ratio:auto;margin:0}
.gal-a .g,.gal-c .g,.gal-b .g{position:relative;inset:auto;width:100%;margin:0;grid-column:auto;grid-row:auto;border-radius:12px}
.gal-a .g1,.gal-c .g1,.gal-b .g1{grid-column:1;grid-row:1/3;align-self:stretch}
.gal-a .g2,.gal-c .g2,.gal-b .g2{grid-column:2;grid-row:1}
.gal-a .g3,.gal-c .g3,.gal-b .g3{grid-column:2;grid-row:2}
.gal .g img{width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;object-position:center}
#makeup .gal-a,#tattoo .gal-c{margin:0;aspect-ratio:auto}
#makeup .row-btn{grid-template-columns:minmax(0,1fr) auto 20px;grid-template-areas:"name price plus" "dur price plus";row-gap:5px}
#makeup .row-name{grid-area:name;font-size:1.32rem}
#makeup .row-dur{grid-area:dur}#makeup .row-price{grid-area:price;align-self:center}#makeup .row-plus{grid-area:plus}
#makeup .note{max-width:none}
.gal-more,.gal-more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.gal-more[hidden]{display:none}
.gal-more .g{border-radius:12px}
.more-wrap,.more-btn{display:block}
.more-btn{display:inline-flex}

/* 4. Lip information and works sit beside each other, followed directly by Lashes. */
#lips>.wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px 32px;align-items:start}
.lips-head{grid-column:1;grid-row:1;margin:0;padding:24px}
#lips .h2 .t{display:block}
#lips .age{margin:14px 0 0;vertical-align:middle}
.lips-note{margin-top:20px}
#lips .gal-scroll{grid-column:2;grid-row:1;display:block;margin:0;padding:0;overflow:visible}
#lips .gal-more{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:12px}
#lips .more-wrap{grid-column:2;grid-row:2;margin:0}

/* 5. A quiet service strip, no separate empty chapter. */
#lips .lashes{grid-column:1/-1;grid-row:3;margin-top:8px;padding:16px 24px;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px;align-items:center}
.lashes .rows{margin:0}.lashes .row::before,.lashes .rows::after{display:none}
.lashes .row-btn{padding-block:8px}

/* 6. Authentic studio photo remains a soft layer under the compact composition. */
#tattoo{padding-block:48px}
#tattoo .tattoo-grid{margin-top:0}
.art-studio img{object-position:18% center;opacity:.1}
#tattoo .section-surface{background:rgba(107,83,62,.97)}

/* 7. Quote, note and typographic signature read as one composition. */
#anna{padding-block:48px}
.anna-grid{max-width:1560px;padding-top:0;padding-bottom:0}
.anna-grid .quote{max-width:22ch;font-size:clamp(2.6rem,4.1vw,3.8rem)}
.anna-lede{margin-top:20px;max-width:54ch}
.anna-signature{margin-top:18px;color:var(--por);font:400 2.6rem/1.3 'Ms Madi',cursive}
.art-anna img{object-position:86% center;opacity:.14}

/* 8. Original carousel mechanics and provenance; tighter reading rhythm. */
.reviews-chapter{padding:32px 0}
.reviews-summary{margin-bottom:18px}
.reviews-intro{margin-bottom:22px;max-width:none}
.reviews-intro h2{font-family:var(--serif);font-size:clamp(2.6rem,4.1vw,3.8rem)}
.reviews-controls{margin-top:24px}
.reviews-playpause:disabled{opacity:1;color:var(--por-soft);border-color:rgba(249,246,241,.5)}
.review-quote{overflow-wrap:anywhere}

/* 9. Compact address and practical information; preview actions stay inert. */
#visit{padding:28px 0 36px;scroll-margin-top:84px}
#visit .hair{margin-bottom:24px}
.visit-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;padding:28px}
.visit-addr{margin-top:20px}
.visit-actions{gap:12px;margin-top:22px}
.visit-actions .pill{padding-inline:22px}
.know li{padding:12px 0 12px 32px}
.know li:first-child{padding-top:0}.know li:first-child::before{top:.8em}
.know li::before{width:18px}
.foot{padding-bottom:40px}
.foot-grid{padding-top:28px;gap:36px;grid-template-columns:minmax(180px,1fr) minmax(0,2fr)}
.foot-note{max-width:76ch}

/* 10. Header, menu and phone controls share contrast, focus and safe-area rules. */
:focus-visible{outline-width:3px;outline-offset:4px}
a,button,[tabindex]{scroll-margin-top:88px;scroll-margin-bottom:100px}
.menu .m-list a{padding-inline:4px}
.menu .m-in{padding-bottom:max(32px,env(safe-area-inset-bottom))}
.head,.bar,.menu{background:var(--bg);background:color-mix(in srgb,var(--bg) 97%,transparent)}
@media(min-width:700px) and (max-width:959px){
  .hero-copy{width:60%}.hero .h1{font-size:2.7rem}
  #makeup .split,#tattoo .split{gap:20px}
  #makeup .col-text,#tattoo .col-text,.lips-head{padding:18px}
  .s1 .row-name{font-size:1.2rem}
}
@media(max-width:699px){
  :root{--gut:24px}
  .step.arch-top,#anna,#tattoo{padding-block:32px}
  .h2{font-size:2.7rem}
  .hero{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:32px 24px;overflow:clip}
  .hero-grid,.hero-copy{display:contents}
  .hero .lockup{order:0;width:245px;margin-bottom:20px}
  .hero .h1{order:1;font-size:clamp(1.9rem,8.2vw,2.4rem);margin-bottom:14px}
  .hero-sub{order:2;margin-bottom:16px}
  .hero-scene{position:relative;inset:auto;z-index:0;order:3;flex:none;height:420px;margin-inline:-24px;
    background-image:var(--hero-doorway-phone);background-size:auto 100%;background-position:center;
    }
  .hero-wash{display:none}
  .hero .signature{position:relative;inset:auto;z-index:1;order:4;width:100%;margin:8px 0 18px;font-size:2.65rem;line-height:1.2;white-space:nowrap;color:var(--ink);text-shadow:none}
  .signature span{background:none;padding:0}
  .services-menu{order:5;width:100%;max-width:none;padding:6px 16px}
  .services-menu a{font-size:1.4rem;min-height:50px;gap:8px}
  .hero-bottom{order:6;margin-top:12px;gap:0 12px}
  .hero-bottom .proof{width:100%}
  .s1 .rows{grid-template-columns:minmax(0,1fr);padding:4px 16px;gap:0}
  .s1 .row:nth-child(2)::before{display:block}
  .s1 .row-btn{min-height:80px;column-gap:12px}
  .s1 .row-name{font-size:1.25rem}
  .s1 .row-price{font-size:1.25rem}
  .chapter-art img{object-position:center;opacity:.1}
  .chapter-art::after{background:linear-gradient(90deg,var(--bg),transparent 80%);opacity:.35}
  #makeup .split,#tattoo .split{grid-template-columns:minmax(0,1fr);gap:18px}
  #makeup .col-text,#tattoo .col-text{display:contents}
  #makeup .h2,#tattoo .h2{grid-row:1}
  #makeup .lede,#tattoo .lede{grid-row:2;margin:0}
  #makeup .gal-scroll,#tattoo .gal-scroll{grid-column:1;grid-row:3}
  #makeup .rows,#tattoo .rows{grid-row:4;margin:0}
  #makeup .note{grid-row:5;margin:0}
  #makeup .chapter-cta{grid-row:6;margin:0}
  #tattoo .chapter-cta{grid-row:5;margin:0}
  #tattoo .more-wrap{grid-row:6;margin:0}
  .gal-scroll{scroll-snap-type:none}
  .gal-a,.gal-b,.gal-c{display:grid;gap:8px}
  .gal .g{flex:none;scroll-snap-align:none}
  .gal-more,.gal-more[hidden]{display:grid}
  .js .gal-more[hidden]{display:none}
  #lips>.wrap{grid-template-columns:minmax(0,1fr);gap:18px}
  .lips-head{grid-column:1;grid-row:1;padding:0;background:none;border:0;border-radius:0;box-shadow:none;}
  #lips .h2 .t{display:inline}
  #lips .age{margin:10px 0 0 8px;vertical-align:middle}
  .lips-note{margin-top:18px}
  #lips .gal-scroll{grid-column:1;grid-row:2}
  #lips .more-wrap{grid-column:1;grid-row:3}
  #lips .lashes{grid-column:1;grid-row:4;grid-template-columns:minmax(0,1fr);gap:8px;margin:0;padding:16px}
  .lashes .h3{font-size:2rem}
  .anna-grid .quote{font-size:2.55rem}
  .anna-signature{font-size:2.4rem}
  .reviews-chapter{padding-block:24px}
  .reviews-intro{margin-bottom:18px}
  .reviews-controls{margin-top:20px;gap:12px}
  .review-card{padding:22px;flex-basis:86vw}
  #visit{padding-block:24px 28px}
  #visit .hair{margin-bottom:20px}
  .visit-grid{grid-template-columns:minmax(0,1fr);padding:20px 16px;gap:24px}
  .visit-actions{flex-direction:column;align-items:stretch}
  .visit-actions .pill{white-space:normal;line-height:1.25;text-align:center}
  .know li{padding-left:26px}
  .foot-grid{grid-template-columns:minmax(0,1fr);gap:22px;padding-top:24px}
  .foot{padding-bottom:88px}
  .menu{height:calc(100dvh - 24px)}
  .m-cta .pill{white-space:normal;line-height:1.3}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .section-surface,.s1 .rows,.lashes,.visit-grid,.glass,.head,.bar,.menu,.review-card{background:var(--bg)}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
  .section-surface,.s1 .rows,.lashes,.visit-grid,.glass,.head,.bar,.menu,.review-card{background:var(--bg);}
}
@media(prefers-reduced-motion:reduce){
  .js .hero-scene{animation:none;opacity:1;transform:none}
  .step.arch-top,.g[data-frame],.g[data-frame] img{animation:none;transform:none;clip-path:none}
}

/* ANNA-V6-SECTIONS-2 — CEO60's five screenshot corrections, 2026-10-14.
   The phone composition stays intact; only section-top clearance is shared. */
.head{height:var(--head-h)}
section[id],.step[id],#lashes,#visit{scroll-margin-top:calc(var(--head-h) + 16px)}
/* ANNA-V6-SECTIONS-3 / 1: anchor clearance belongs to scroll-margin only.
   Bound both sides of each content boundary; retain the hero's scene geometry. */
main>section.step[id]:not(.hero),#anna,#tattoo,#visit{padding-block:24px}
@media(max-width:699px){
  main>section.step[id]:not(.hero),#anna,#tattoo,#visit{padding-block:16px}
}
/* The Visit panel's border replaces its separate divider: avoid stacking two
   decorative gaps above its heading after reserving fixed-header clearance. */
#visit .hair{display:none}

@media(min-width:1024px){
  /* 1. Ink on the scene. The final menu item finishes at 5.34s. */
  .hero .signature{
    bottom:14px;color:var(--ink);font-size:clamp(34px,2.6vw,38px);line-height:1.1;
    text-shadow:0 0 5px rgba(249,246,241,.8),0 1px 10px rgba(249,246,241,.45);
  }
  .hero .signature span{padding:0;background:none;border:0;border-radius:0;box-shadow:none}
  .js.go:not(.skip) .hero .signature span{
    animation:v6-sign 1.8s ease-out calc(5.4s * var(--t)) both;
  }

  /* 2. Three equally sized works beside a vertically centred information card.
     Expanded work gets its own full-width row, never a tall empty text column. */
  #lips>.wrap{align-items:center}
  #lips .lips-head{align-self:center}
  #lips .gal-scroll{display:contents}
  #lips .gal-b{
    grid-column:2;grid-row:1;grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:minmax(0,1fr);align-items:stretch;height:min(42vh,360px);
  }
  #lips .gal-b .g{grid-column:auto;grid-row:1;min-height:0}
  #lips .gal-b .g img{position:absolute;inset:0;aspect-ratio:auto}
  #lips .gal-more{grid-column:1/-1;grid-row:3;margin-top:0}
  #lips .lashes{grid-row:auto;margin-top:0}

  /* 3. The card defines the row height; image intrinsic sizes cannot enlarge it.
     Opening More work adds a separate row beneath both balanced columns. */
  #tattoo .split{align-items:center}
  #tattoo .col-text{align-self:center}
  #tattoo .gal-scroll{display:contents}
  #tattoo .gal-c{
    grid-column:2;grid-row:1;align-self:stretch;height:100%;min-height:0;
    contain:size;grid-template-rows:repeat(2,minmax(0,1fr));align-items:stretch;
  }
  #tattoo .gal-c .g{min-height:0}
  #tattoo .gal-c .g img{position:absolute;inset:0;aspect-ratio:auto}
  #tattoo .gal-more{grid-column:1/-1;grid-row:2;margin-top:0}

  /* 4. Active review starts at the content edge; only the next card peeks.
     Trailing space permits the last card to reach the same left-hand position. */
  .reviews-list{
    --review-card-width:clamp(640px,64vw,960px);
    padding-inline:0 calc(100% - var(--review-card-width));
  }
  .review-card{flex-basis:var(--review-card-width);scroll-snap-align:start}
  .reviews-track{
    
    
  }
  #visit .visit-grid{padding-top:24px}
}
@media(min-width:1024px) and (prefers-reduced-motion:reduce){
  .js.go:not(.skip) .hero .signature span,.js.go .hero .signature span{animation:none;clip-path:inset(0);opacity:1}
}

/* ANNA-V6-SECTIONS-3 / 2: keep the carousel/controls stable while short reviews
   fill their cards with a larger, vertically centred statement. */
.review-card--short{display:flex;flex-direction:column;justify-content:center}
.review-card--short .review-quote{font-size:clamp(1.8rem,3vw,2.8rem);line-height:1.3}

/* ANNA-V6-HERO-RETURN — 14 October 2026. Hero/opening only.
   SECTIONS-3 above is retained verbatim. The v2 scenes are existing assets.
   Desktop returns to the v5 lockup and typography; narrow widths get their own
   compact composition. No frame, ellipse, line art or second portrait. */
#top.hero{
  min-height:100svh;display:flex;flex-direction:column;align-items:stretch;
  padding:clamp(40px,7svh,64px) 0 50px;isolation:isolate;overflow:clip;
}
#top .hero-grid{display:block;position:relative;z-index:1;width:100%}
#top .hero-copy{display:block;width:66%;max-width:790px;min-width:0}
#top .lockup{
  display:flex;align-items:center;width:clamp(260px,24vw,330px);
  margin:0 0 26px;text-align:center;opacity:1;transform:none;animation:none;
}
#top .lock-mark{
  flex:none;height:clamp(76px,10svh,92px);width:auto;max-width:none;
  aspect-ratio:446/289;margin:0 0 14px;transform-origin:center;
}
#top .lock-words{width:100%;height:auto}
#top .lock-name{
  margin-top:10px;font:500 .75rem/1.2 var(--sans);letter-spacing:.34em;
  text-indent:.34em;text-transform:uppercase;color:var(--ink-soft);
}
#top .h1{
  max-width:none;font:300 clamp(48px,4.85vw,72px)/1.08 var(--serif);
  letter-spacing:-.02em;margin:0 0 18px;
}
#top .ln{overflow:visible}
#top .li{}
#top .hero-sub{font-size:17px;line-height:1.5;margin:0 0 20px;color:var(--ink-soft)}
#top .hero-cta{margin:0 0 12px}
#top .hero-cta .pill{min-height:50px}
#top .proof{font-size:14px;line-height:1.5;margin:0;color:var(--ink-soft);max-width:none}
#top .services-menu{
  display:flex;flex-wrap:nowrap;gap:8px;width:max-content;max-width:100%;
  margin:20px 0 0;padding:0;border:0;border-radius:0;box-shadow:none;
  background:none;
  opacity:1;transform:none;animation:none;
}
#top .services-menu a{
  display:flex;align-items:center;justify-content:center;gap:0;flex:none;
  min-height:44px;padding:9px 12px;border:1px solid rgba(255,255,255,.9);
  border-radius:999px;background:rgba(249,246,241,.84);color:var(--ink);
  font:400 13px/1.2 var(--sans);white-space:nowrap;text-decoration:none;
  
  box-shadow:inset 0 1px 0 #fff,0 4px 14px rgba(31,26,23,.06);
  transition:background-color .2s ease,border-color .2s ease;
}
#top .services-menu a em{font-style:normal}
#top .services-menu .service-number,#top .services-menu a>span:last-child{display:none}
#top .services-menu a:hover{background:#fffdf9;border-color:rgba(31,26,23,.24);transform:none}
#top .services-menu a:active{background:var(--c1);transform:none}
#top .services-menu a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
#top .hero-scene{
  position:absolute;inset:0;z-index:-3;height:auto;margin:0;order:0;
  background-image:var(--hero-doorway-desktop);background-size:cover;
  background-position:center bottom;background-repeat:no-repeat;
  
  opacity:1;transform:none;animation:none;pointer-events:none;
}
#top .hero-wash{
  display:block;position:absolute;inset:0;z-index:-1;height:auto;
  background:linear-gradient(90deg,rgba(249,246,241,.98) 0%,rgba(249,246,241,.94) 32%,rgba(249,246,241,.88) 49%,rgba(249,246,241,.58) 70%,rgba(249,246,241,.66) 100%),
    linear-gradient(0deg,var(--c0),transparent 16%);
  opacity:1;animation:none;pointer-events:none;
}
#top .signature{
  position:absolute;top:auto;bottom:22px;left:64%;width:280px;z-index:1;
  transform:translateX(-50%);margin:0;text-align:center;white-space:nowrap;
  color:var(--ink);font:400 38px/1.2 'Ms Madi',cursive;letter-spacing:0;
  text-shadow:none;pointer-events:none;
}
#top .signature span{padding:0;background:none;border:0;border-radius:0;box-shadow:none}

/* Tablet: preserve the left-hand hierarchy without inheriting the old 699px split. */
@media(min-width:768px) and (max-width:1023px){
  #top .hero-copy{width:74%;max-width:670px}
  #top .h1{font-size:clamp(40px,5vw,50px)}
  #top .services-menu{display:grid;grid-template-columns:repeat(3,max-content)}
  #top .signature{left:70%;font-size:34px}
}


/* PHONE-MOTION final — D-C54, 14 October 2026. Source for the final stylesheet block. */
:root{--motion-ease:cubic-bezier(.16,1,.3,1)}
/* Desktop v5 geometry, with a prepared alpha print instead of a live SVG filter. */
#top .lock-mark{height:96px}
#top .hero-scene{inset:14px 2% 56px auto;width:48%;height:auto;z-index:-3;background:none;overflow:visible}
#top .hero-scene::before{content:none}
#top .hero-scene picture{display:block;width:100%;height:100%}
#top .hero-scene img{width:100%;height:100%;object-fit:contain;object-position:center bottom}
#top .hero-wash{background:linear-gradient(90deg,var(--c0),rgba(249,246,241,.98) 40%,rgba(249,246,241,.85) 54%,transparent 66%)}
#top .signature{left:74%}
#top .ln{overflow:hidden}
#top .services-menu a{background:rgba(249,246,241,.84)}

/* Phone: a single, unoccluded reading order. Header stays off while at the hero. */
@media(max-width:767px){
  #top.hero{min-height:0;padding:8px 18px 22px;display:flex;align-items:center;gap:0;overflow:clip}
  #top .hero-grid,#top .hero-copy{display:contents}
  #top .lockup{order:0;flex:none;width:250px;max-width:100%;margin:0 auto 6px;align-items:center}
  #top .lock-mark{height:56px;width:auto;margin:0 0 6px}
  #top .lock-words{width:250px;height:13.5px;object-fit:contain}
  #top .lock-name{font-size:10px;line-height:1.2;letter-spacing:.3em;text-indent:.3em;margin-top:4px}
  #top .hero-scene{order:1;position:relative;inset:auto;z-index:0;flex:none;width:100%;height:clamp(300px,calc(35svh + 44px),340px);margin:0;background:none}
  #top .hero-scene img{object-position:center}
  #top .hero-wash{display:none}
  #top .signature{order:2;position:relative;inset:auto;z-index:0;width:100%;transform:none;margin:2px 0 6px;font-size:32px;line-height:1.1;text-align:center}
  #top .h1{order:3;width:100%;font-size:clamp(28px,8.46vw,34px);line-height:1.06;letter-spacing:-.02em;text-align:center;margin:0 0 8px}
  #top .hero-sub{order:4;font-size:13px;line-height:1.4;text-align:center;margin:0 0 3px}
  #top .proof{order:5;font-size:12px;line-height:1.4;text-align:center;margin:0}
  #top .hero-cta,#top .services-menu{display:none}
  /* Keep the boundary to the next chapter compact; the fixed bar floats over scroll. */
  #top.hero{padding-bottom:40px}
}

/* 0-7.6 seconds. Repeat visits have the same pace. No blur animation. */
.js #top .lock-mark{opacity:0}
.js #top .lock-words,.js #top .lock-name,.js #top .li,.js #top .open-f,.js #top .hero-portrait{opacity:0}
.js #top .signature span{clip-path:inset(0 100% 0 0)}
.js.go #top .lock-words,.js.go #top .lock-name{animation:motion-fade 1s var(--motion-ease) 2.7s both}
.js.go #top .hero-portrait{animation:motion-portrait 1.6s var(--motion-ease) 2.8s both}
.js.go:not(.skip) #top .signature span{animation:motion-sign 1.8s linear 4s both}
.js.go #top .li{animation:motion-line 1s var(--motion-ease) calc(5.2s + var(--k)*.2s) both}
.js.go #top .open-f{animation:motion-fade .6s var(--motion-ease) 6.4s both;transform:none}
.js.go #top .hero-cta{animation:motion-up .9s var(--motion-ease) 6.2s both}
.js.go #top .services-menu a{animation:motion-up .8s var(--motion-ease) calc(6.45s + var(--n)*.08s) both;visibility:visible}
.js.go .rail{animation:motion-fade .6s var(--motion-ease) 7s both}
@keyframes motion-fade{from{opacity:0}to{opacity:1}}
@keyframes motion-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes motion-line{from{opacity:0;transform:translateY(110%)}to{opacity:1;transform:none}}
@keyframes motion-portrait{from{opacity:0;transform:translateY(16px) scale(1.02)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes motion-sign{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
.js.skip #top .lock-mark,.js.skip #top .lock-words,.js.skip #top .lock-name,.js.skip #top .li,.js.skip #top .open-f,
.js.skip #top .services-menu a,.js.skip #top .signature span,.js.skip #top .hero-portrait{animation:none;opacity:1;transform:none;clip-path:none;visibility:visible}
.js.skip .rail{animation:none;opacity:1}

/* Chapter entry is opt-in only after the IO exists; unenhanced content is complete. */
.motion-ready .h2 .w>span{transform:translateY(110%);transition:transform 1.1s var(--motion-ease) calc(var(--w,0)*75ms)}
.motion-ready .h2.is-in .w>span{transform:none}
.motion-ready .rule,.motion-ready .hair{transform:scaleX(0);transform-origin:left;transition:transform 1s var(--motion-ease) .15s}
.motion-ready .is-in .rule,.motion-ready .hair.is-in{transform:scaleX(1)}
.motion-ready [data-reveal]:not(.h2){opacity:0;transform:translateY(16px);transition:opacity 1s var(--motion-ease) var(--reveal-delay,0ms),transform 1s var(--motion-ease) var(--reveal-delay,0ms)}
.motion-ready [data-reveal].is-in:not(.h2){opacity:1;transform:none}
.motion-ready [data-stagger]>.row .row-btn,.motion-ready .know[data-stagger]>li{opacity:0;transform:translateY(16px);transition:opacity 1s var(--motion-ease) calc(var(--i,0)*75ms),transform 1s var(--motion-ease) calc(var(--i,0)*75ms)}
.motion-ready [data-stagger].is-in>.row .row-btn,.motion-ready .know[data-stagger].is-in>li{opacity:1;transform:none}
.motion-ready .rows .row::before,.motion-ready .rows::after{transform:scaleX(0);transform-origin:left;transition:transform 1s var(--motion-ease) calc(var(--i,0)*75ms)}
.motion-ready .rows.is-in .row::before,.motion-ready .rows.is-in::after{transform:scaleX(1)}
.motion-ready [data-work-image]{transform:none}
.motion-ready [data-work-image] img{transform:scale(1.04);transition:transform 1.2s var(--motion-ease)}
.motion-ready [data-work-image].is-in img{transform:scale(1)}
.lashes .h2.h3{font:300 clamp(2rem,1.2rem + 2.2vw,3rem)/1.1 var(--serif);letter-spacing:-.01em}
@media(max-width:767px){.lashes .h2.h3{font-size:2rem}}

/* Prepared chapter layers: grayscale, blur and feather are in the WebP alpha. */
.chapter-art img,.art-skin img,.art-studio img,.art-anna img{opacity:1}
.chapter-art::after{content:none}
.section-surface,.s1 .rows,.lashes,.visit-grid{background:color-mix(in srgb,var(--bg) 97%,transparent)}

/* Edek's floating material, tinted by the existing independent top/bottom bands. */
.head,.bar,.menu{--glass-fill:rgba(249,246,241,.76);background:var(--glass-fill);color:var(--fg);border:1px solid rgba(255,255,255,.62);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 28px rgba(24,18,14,.13);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)}
html[data-step="s4"] .head,html[data-step="s5"] .head,html[data-step="s4"] .menu,html[data-step="s5"] .menu,
.bar[data-step="s4"],.bar[data-step="s5"]{--glass-fill:rgba(32,26,23,.76);border-color:rgba(249,246,241,.48)}
.head{top:12px;left:12px;right:12px;border-radius:999px;height:60px;padding-inline:20px;transition:transform .6s var(--motion-ease),opacity .6s var(--motion-ease)}
.head{transform:translateY(calc(-100% - 14px));opacity:0;visibility:hidden;pointer-events:none}
html.hero-lockup-passed .head{opacity:1;transform:none;visibility:visible;pointer-events:auto}
.bar{left:12px;right:12px;border-radius:999px;max-width:440px;bottom:max(12px,env(safe-area-inset-bottom));padding:7px;gap:8px}
.menu::backdrop{background:rgba(20,16,12,.3)}
@media(max-width:767px){
  .bar{display:flex;position:fixed;z-index:55;margin-inline:auto;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(24px);transition:transform .6s var(--motion-ease),opacity .6s var(--motion-ease)}
  .bar .pill{flex:1;min-width:0;min-height:46px;font-size:12px;padding-inline:10px}
  .bar.is-on{opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .opening-interrupted .bar{transition:none}
  .head .pill-head{display:none}
}
/* Without JS the two Visit links remain in flow, so they never cover Visit/footer. */
html:not(.js) .head{display:none}
html:not(.js) .bar{position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;margin:12px auto}

/* A separate portrait column keeps every word away from Anna's face. */
#anna{display:grid;grid-template-columns:1fr 1fr;align-items:center;column-gap:24px;padding-inline:var(--gut)}
#anna .art-anna{position:relative;inset:auto;grid-column:2;grid-row:1;width:100%;height:min(52vw,480px);overflow:hidden;z-index:0}
#anna .art-anna img{object-fit:contain;object-position:center}
#anna .anna-grid{grid-column:1;grid-row:1;width:100%;padding:0;max-width:none}
#anna .quote{max-width:20ch}
#anna .anna-lede{color:var(--por-soft)}
@media(max-width:767px){
  #anna{grid-template-columns:minmax(0,1fr);gap:16px;padding-inline:24px}
  #anna .art-anna{grid-column:1;grid-row:1;height:300px}
  #anna .anna-grid{grid-column:1;grid-row:2}
  #anna .quote{font-size:clamp(32px,8.6vw,40px)}
  #anna .anna-lede{margin-top:16px}
  #anna .anna-signature{margin-top:12px}
}

/* Ivory centre card, both neighbours, short cards fit their own content. */
#reviews>.wrap{max-width:none;padding-inline:0}
.reviews-summary,.reviews-intro{text-align:center;margin-inline:auto;padding-inline:24px}
.reviews-summary{margin-bottom:12px}
.reviews-intro{margin-bottom:24px}
.reviews-intro .rule{margin-inline:auto;transform-origin:center}
.reviews-carousel{--review-card-width:min(640px,56vw);--review-gap:28px}
.reviews-track{position:relative;scroll-padding-inline:0}
.reviews-list{--review-card-width:inherit;align-items:flex-start;gap:var(--review-gap);padding-inline:calc((100% - var(--review-card-width))/2);padding-block:6px}
.review-card{flex:0 0 var(--review-card-width);scroll-snap-align:center;height:auto;min-height:0;align-self:flex-start;padding:28px 32px;border-radius:18px;border:1px solid rgba(76,60,39,.12);background:#F5F0E2;color:#2A2620;opacity:.48;box-shadow:none;transition:opacity .9s var(--motion-ease)}
.review-card--active{opacity:1;box-shadow:none}
.motion-ready .review-card[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity 1s var(--motion-ease) var(--reveal-delay,0ms),transform 1s var(--motion-ease) var(--reveal-delay,0ms)}
.motion-ready .review-card[data-reveal].is-in{opacity:.48;transform:none}
.motion-ready .review-card[data-reveal].is-in.review-card--active{opacity:1}
.review-card--short{display:block}
.review-quote,.review-card--short .review-quote{font:400 18px/1.55 var(--sans);color:#2A2620;white-space:pre-line;margin:0 0 20px}
.review-quote::before{content:'“';display:block;font:500 26px/1 var(--serif);color:#936F32;margin-bottom:8px}
.review-stars{font-size:14px;color:#936F32;margin-bottom:12px}
.review-star--filled{color:#936F32}
.review-attribution,.review-attribution cite,.review-date,.review-source-label{color:#51493D;font:400 12px/1.5 var(--sans)}
.review-attribution cite{font-weight:500;color:#2A2620}
.review-expand-toggle{color:#665025;font-size:11px;margin:0}
.review-card--peek{pointer-events:none;user-select:none;scroll-snap-align:none}
.reviews-controls{margin-top:20px;margin-bottom:0}
.reviews-playpause{font-family:var(--sans)}
/* Static gradients replace compositing masks and never fade the centre card. */
.reviews-carousel::before,.reviews-carousel::after{content:'';position:absolute;z-index:2;top:0;bottom:64px;width:min(7vw,80px);pointer-events:none}
.reviews-carousel::before{left:0;background:linear-gradient(90deg,var(--c5),transparent)}
.reviews-carousel::after{right:0;background:linear-gradient(270deg,var(--c5),transparent)}
.reviews-static-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:20px var(--gut)}
.reviews-static-list .review-card{width:100%;opacity:1}
.reviews-fallback>.h2{text-align:center}
@media(max-width:767px){
  .reviews-carousel{--review-card-width:82vw;--review-gap:12px}
  .review-card{padding:24px}
  .review-quote,.review-card--short .review-quote{font-size:17px;line-height:1.5}
  .reviews-carousel::before,.reviews-carousel::after{width:4vw}
  .reviews-static-list{grid-template-columns:minmax(0,1fr)}
}
/* Only transform and opacity animate in page UI; signature is the sole clip exception. */
.pill,.pill-ghost,.tick,.menu-btn::after,.row-plus::before,.row-plus::after{transition:transform .25s var(--motion-ease)}
.text-link,.row-name,.rail,#top .services-menu a,.review-source-link,.review-expand-toggle,.reviews-playpause{transition:none}
.rail-label{transition:opacity .25s var(--motion-ease),transform .25s var(--motion-ease)}
.reviews-arrow{transition:transform .2s var(--motion-ease)}

/* ANNA-V6-POLISH-2: translucent bars, with local contrast backing on text controls. */
.head,.bar{--glass-fill:rgba(249,246,241,.42);--control-fill:rgba(249,246,241,.55);background:var(--glass-fill);border:1px solid rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 8px 28px rgba(24,18,14,.13);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%)}
html[data-step="s4"] .head,html[data-step="s5"] .head,.bar[data-step="s4"],.bar[data-step="s5"]{--glass-fill:rgba(32,26,23,.45);--control-fill:rgba(32,26,23,.55)}
.head .menu-btn,.bar .pill-ghost{background:var(--control-fill)}
.head .menu-btn{padding-inline:12px;border-radius:999px}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.head,.bar,.menu{background:var(--bg)}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.head,.bar,.menu{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js #top .lock-mark,.js #top .lock-words,.js #top .lock-name,.js #top .li,.js #top .open-f,.js #top .services-menu a,.js #top .hero-portrait,.js #top .signature span{opacity:1;transform:none;clip-path:none;visibility:visible}
  .motion-ready [data-reveal],.motion-ready .h2 .w>span,.motion-ready [data-work-image] img,.motion-ready [data-stagger] .row-btn,.motion-ready .know li{opacity:1!important;transform:none!important}
  .motion-ready .rule,.motion-ready .hair,.motion-ready .row::before,.motion-ready .rows::after{transform:none!important}
}

/* CEO60 14.10: the opening owns the screen (D-C54: logo alone first); the page below fades in when it ends. */
.js #main>section:not(#top),.js .foot{transition:opacity .9s cubic-bezier(.16,1,.3,1)}
.js:not(.skip) #main>section:not(#top),.js:not(.skip) .foot{opacity:0}
@media(prefers-reduced-motion:reduce){.js #main>section:not(#top),.js .foot{opacity:1;transition:none}}

/* ANNA-V6-POLISH-2 — D-C55. Photos have dedicated space, never a text backdrop. */
.print-filters{position:absolute;pointer-events:none}
#skin .split{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);gap:24px;align-items:center}
#skin .col-text{grid-column:1;grid-row:1;min-width:0;width:100%}
#skin .art-skin{position:relative;inset:auto;grid-column:2;grid-row:1;width:100%;height:clamp(400px,48vw,640px);overflow:hidden;z-index:0}
#skin .art-skin img{object-fit:contain;object-position:center}
#skin .rows{grid-template-columns:minmax(0,1fr);gap:0}
#skin .row:nth-child(2)::before{display:block}
#tattoo .col-text{padding:0}
#tattoo .tattoo-copy{padding:24px}
#tattoo .art-studio{position:relative;inset:auto;height:clamp(240px,24vw,280px);width:100%;margin-top:16px;overflow:hidden;z-index:0}
#tattoo .art-studio img{object-fit:contain;object-position:center}
.h2:not(.h3),#anna .quote,.reviews-intro h2{font:300 clamp(2.6rem,4.5vw,4rem)/1.08 var(--serif);letter-spacing:-.015em}
@media(min-width:768px){
  #top .hero-copy{width:54%;max-width:none}
  #top .hero-scene{right:var(--gut);width:40%;bottom:76px}
  #top .hero-wash{display:none}
  #top .signature{left:calc(80% - var(--gut));width:40%}
  #top .services-menu{display:flex;flex-wrap:wrap;width:100%}
}
@media(max-width:767px){
  #skin .split{grid-template-columns:minmax(0,1fr);gap:16px}
  #skin .col-text{display:contents}
  #skin .h2{grid-row:1}
  #skin .lede{grid-row:2;margin:0}
  #skin .art-skin{grid-column:1;grid-row:3;height:clamp(240px,32svh,280px)}
  #skin .rows{grid-row:4;margin:0;padding:4px 16px}
  #skin .chapter-cta{grid-row:5;margin:0}
  #skin .row-btn{min-height:80px;column-gap:12px}
  #tattoo .split{grid-template-columns:minmax(0,1fr);gap:18px}
  #tattoo .col-text,#tattoo .tattoo-copy{display:contents}
  #tattoo .h2{grid-row:1}
  #tattoo .lede{grid-row:2;margin:0}
  #tattoo .gal-scroll{grid-column:1;grid-row:3}
  #tattoo .rows{grid-row:4;margin:0}
  #tattoo .chapter-cta{grid-row:5;margin:0}
  #tattoo .more-wrap{grid-row:6;margin:0}
  #tattoo .art-studio{grid-column:1;grid-row:7;margin:0;height:240px}
  .h2:not(.h3),#anna .quote,.reviews-intro h2{font-size:clamp(32px,8.6vw,40px)}
}
/* Keep chapter-spacing limits unchanged and retain the high-contrast art fallback. */
@media(prefers-contrast:more){.chapter-art{display:none}}

/* premium.css */
/* Additive atelier treatment. Existing page and assets remain intact. */
:root{--atelier-ease:cubic-bezier(.16,1,.3,1)}
#top.hero{min-height:100svh;padding-top:clamp(78px,10vh,120px);padding-bottom:100px;background:#f8f4ef}
#top .hero-copy{width:65%;max-width:860px}
#top .hero-grid{margin-block:auto}
#top .lockup{width:260px;margin-bottom:clamp(28px,5vh,55px)}
#top .lock-mark{height:66px}
#top .lock-name{font-size:10px;letter-spacing:.3em}
#top .h1{font-size:clamp(44px,4.85vw,78px);line-height:1.08;letter-spacing:-.035em;max-width:11.5em}
#top .hero-sub{font-size:16px;margin:24px 0;color:#655345;letter-spacing:.015em}
#top .hero-cta{display:flex;align-items:center;gap:30px;margin:24px 0 32px;flex-wrap:wrap}
#top .hero-cta .pill{min-height:54px;letter-spacing:.1em;gap:30px;font-size:12px;box-shadow:0 10px 22px #3c251214}
.atelier-ask{display:inline-flex;gap:22px;align-items:center;min-height:48px;padding:5px 0;border:0;border-bottom:1px solid #8c756060;background:transparent;font:400 15px var(--sans);cursor:pointer;text-align:left}
.atelier-ask:hover{border-color:#201a17}
.atelier-ask:active{transform:translateY(1px)}
.atelier-meta{position:absolute;left:var(--gut);right:var(--gut);top:28px;display:flex;justify-content:space-between;font:400 10px/1.4 var(--sans);letter-spacing:.19em;text-transform:uppercase;color:#766352;z-index:3}
.atelier-meta::after{content:"";position:absolute;top:30px;left:0;right:0;height:1px;background:linear-gradient(90deg,#9b816045,transparent 70%)}
#top .services-menu{gap:0;margin-top:26px;width:auto;max-width:650px;flex-wrap:wrap}
#top .services-menu a{justify-content:flex-start;min-height:46px;padding:10px 17px 10px 0;margin-right:17px;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:13px;color:#554638}
#top .services-menu a:not(:last-child)::after{content:"";width:1px;height:10px;background:#9f8b734d;margin-left:17px}
#top .services-menu a:hover{background:transparent;color:#201a17;text-decoration:underline;text-underline-offset:7px}
#top .hero-scene{width:48%;right:0;top:6%;bottom:40px;perspective:1200px}
#top .hero-scene picture{transform:translate3d(var(--portrait-x,0px),var(--portrait-y,0px),0);transition:transform 1.2s var(--atelier-ease)}
#top .hero-scene img{object-position:55% bottom}
#top .hero-wash{background:linear-gradient(90deg,#f8f4ef 0%,#f8f4efee 31%,#f8f4ef77 47%,transparent 63%)}
#top .signature{bottom:44px;left:75%;font-size:35px;color:#594536}
.atelier-light{position:absolute;inset:0 0 0 48%;pointer-events:none;z-index:-4;overflow:hidden;background:radial-gradient(ellipse at 77% 32%,#f0dfc6 0%,#eee1d242 34%,transparent 65%)}
#atelier-sculpture{width:100%;height:100%;opacity:.65;display:block;mask-image:linear-gradient(0deg,transparent 2%,#000 35%,#000 85%,transparent);-webkit-mask-image:linear-gradient(0deg,transparent 2%,#000 35%,#000 85%,transparent)}
.atelier-bottom{position:absolute;left:var(--gut);bottom:35px;display:flex;align-items:center;gap:40px;z-index:2}
.atelier-discover{display:flex;gap:12px;align-items:center;text-decoration:none;font:400 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#665242;min-height:44px}
.atelier-scroll{border:1px solid #94775b4d;border-radius:50%;width:32px;height:42px;display:grid;place-content:center;font-size:18px}
#atelier-motion{min-height:44px;border:0;background:transparent;padding:5px 0;font:400 11px var(--sans);letter-spacing:.04em;color:#665242;cursor:pointer;text-decoration:underline;text-underline-offset:5px}
/* Actions are available during the opening. No loading curtain captures input. */
.js.go #top .lock-words,.js.go #top .lock-name{animation:motion-fade .65s var(--atelier-ease) .55s both}
.js.go #top .hero-portrait{animation:motion-portrait 1.45s var(--atelier-ease) .35s both}
.js.go:not(.skip) #top .signature span{animation:motion-sign 1.2s linear .65s both}
.js.go #top .li{animation:motion-line .95s var(--atelier-ease) calc(.6s + var(--k)*.11s) both}
.js.go #top .open-f,.js.go #top .hero-cta{animation:none;opacity:1;transform:none}
.js.go #top .services-menu a{animation:motion-up .65s var(--atelier-ease) calc(.9s + var(--n)*.06s) both}
.js.go .rail{animation:motion-fade .5s var(--atelier-ease) 1.4s both}
.bar{transition-duration:.25s!important}
.step .h2{letter-spacing:-.035em}
.motion-ready [data-reveal]:not(.h2){transition-duration:.8s}
.head{left:max(22px,3vw);right:max(22px,3vw);top:16px;height:60px;box-shadow:inset 0 1px 0 #ffffffb0,0 7px 30px #3a241a13}
.row-btn{transition:background-color .25s,transform .25s var(--atelier-ease)}
@media(hover:hover) and (pointer:fine){.row-btn:hover{background:color-mix(in srgb,var(--fg) 4%,transparent)}.row-btn:active{transform:translateY(1px)}}
.step .work img{transition:transform 1s var(--atelier-ease)}
@media(min-width:1100px){.step .work:hover img{transform:scale(1.035)}}
/* A small label keeps the local preview honest without interrupting the design. */
.atelier-preview-note{font-size:12px;color:var(--fg2);line-height:1.5;margin-top:14px;max-width:48ch}
@media(min-width:768px) and (max-width:1099px){
 #top .hero-copy{width:73%}#top .h1{font-size:clamp(40px,5.4vw,58px)}
 #top .hero-scene{right:-8%;width:57%}#top .hero-wash{background:linear-gradient(90deg,#f8f4ef,#f8f4efea 28%,#f8f4ef88 49%,transparent 68%)}
 #top .hero-cta{gap:20px}#top .services-menu a{font-size:12px;margin-right:8px;padding-right:8px}
 #top .signature{left:79%}.atelier-bottom{gap:20px}
}
@media(max-width:767px){
 #top.hero{min-height:0;padding:58px 22px 110px;gap:0}
 .atelier-meta{left:22px;right:22px;top:18px;font-size:8px;letter-spacing:.16em}
 .atelier-meta::after{top:23px}
 #top .hero-copy,#top .hero-grid{display:contents}
 #top .lockup{order:0;width:208px;margin:0 auto 5px}
 #top .lock-mark{height:48px;margin-bottom:6px}
 #top .lock-words{width:208px;height:auto}
 #top .lock-name{font-size:8px;margin-top:6px}
 #top .hero-scene{position:relative;order:1;inset:auto;z-index:0;width:100%;height:clamp(230px,33svh,310px);margin:5px 0 0}
 #top .hero-scene img{object-position:center}
 #top .hero-wash{display:none}
 #top .signature{order:2;position:relative;inset:auto;width:100%;transform:none;margin:-7px 0 20px;font-size:29px}
 #top .h1{order:3;font-size:clamp(28px,8.2vw,36px);line-height:1.08;max-width:14em;margin:0 0 12px;text-align:center}
 #top .hero-sub{order:4;font-size:12px;text-align:center;margin:0 0 18px}
 #top .hero-cta{display:flex;order:5;justify-content:center;margin:0;gap:15px;flex-wrap:wrap}
 #top .hero-cta .pill{min-height:46px;font-size:10px;padding-inline:22px;gap:15px}
 #top .hero-cta .atelier-ask{font-size:12px;gap:8px;min-height:44px}
 #top .services-menu{display:none}
 .atelier-light{inset:50px -10% 24% 0;z-index:-1;opacity:.65}
 #atelier-sculpture{opacity:.45}
 .atelier-bottom{left:22px;right:22px;bottom:60px;justify-content:space-between;gap:20px}
 .atelier-discover{font-size:9px;letter-spacing:.09em;gap:9px}.atelier-scroll{width:25px;height:32px;font-size:15px}
 #atelier-motion{font-size:10px}
 .head{left:12px;right:12px;top:12px;height:54px}
}
@media(max-width:359px){#top.hero{padding-inline:15px}#top .hero-cta{gap:12px}#top .hero-cta .pill{padding-inline:18px}#top .h1{font-size:27px}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}
 #top *,#top *::before,#top *::after{animation:none!important;transition:none!important}
 .js #top .lock-mark,.js #top .lock-words,.js #top .lock-name,.js #top .li,.js #top .open-f,.js #top .hero-portrait{opacity:1;transform:none;clip-path:none}
 #top .signature span{clip-path:none}
 #top .hero-scene picture{transform:none}
 #atelier-motion{display:none}
}
html.atelier-paused #top .hero-scene picture{transform:none}
/* Completed/repeat visits render immediately, including after the additive motion sheet. */
.js.skip #top .lock-mark,.js.skip #top .lock-words,.js.skip #top .lock-name,.js.skip #top .li,.js.skip #top .open-f,.js.skip #top .hero-portrait,.js.skip #top .hero-cta,.js.skip #top .services-menu a,.js.skip #top .signature span,.js.skip .rail{animation:none!important;opacity:1;transform:none;clip-path:none;visibility:visible}

/* opening.css */
/* A single, interruptible sequence. The portrait stays authentic; light and pace do the work. */
.opening-veil{display:none}
.js:not(.skip):not(.again) .opening-veil{display:block;position:absolute;inset:0;z-index:4;background:#f8f4ef;pointer-events:none}
.js:not(.skip):not(.again) #top .hero-grid{z-index:6}
.js:not(.skip):not(.again) #top .lock-mark{filter:none}
.js:not(.skip):not(.again) #top .hero-portrait,.js:not(.skip):not(.again) #top .lock-words,.js:not(.skip):not(.again) #top .lock-name,.js:not(.skip):not(.again) #top .li,.js:not(.skip):not(.again) #top .open-f{opacity:0}
.js.go:not(.skip):not(.again) .opening-veil{animation:opening-light 2.1s cubic-bezier(.4,0,.2,1) 3.1s both}
.js.go:not(.skip):not(.again) #top .hero-scene,.js.go:not(.skip):not(.again) #top .hero-wash,.js.go:not(.skip):not(.again) #top .lockup{animation:none;opacity:1}
.js.go:not(.skip):not(.again) #top .hero-portrait{animation:opening-portrait 3.5s cubic-bezier(.2,.65,.3,1) 3.6s both}
.js.go:not(.skip):not(.again) #top .lock-words,.js.go:not(.skip):not(.again) #top .lock-name{animation:motion-fade 1.3s ease 4.65s both}
.js.go:not(.skip):not(.again) #top .li{animation:opening-copy 1.9s cubic-bezier(.2,.65,.3,1) calc(5.15s + var(--k)*.35s) both}
.js.go:not(.skip):not(.again) #top .hero-sub{animation:motion-fade 1.5s ease 6.5s both}
.js.go:not(.skip):not(.again) #top .hero-proof{animation:motion-fade 1.5s ease 7.1s both}
.js.go:not(.skip):not(.again) #top .hero-cta{animation:motion-up 1.5s var(--atelier-ease) 7.25s both}
/* R3.12: Owner-selected Ms Madi glyph masks write in sequence, followed by one drawn flourish.
   2.045s of ink; stroke paint is intentional, with no layout or frame loop. */
#top .signature-ink{display:block;width:280px;max-width:100%;height:auto;margin:0 auto;overflow:visible}
#top .signature-stroke{stroke-dasharray:1;stroke-dashoffset:0;opacity:1}
#top .signature-flourish{stroke-width:1.4}
.js:not(.skip):not(.again) #top .signature-stroke{stroke-dashoffset:1;opacity:0}
.js.go:not(.skip):not(.again) #top .signature-stroke{animation:opening-ink var(--duration) linear calc(8.9s + var(--at)) both}
@media(max-width:767px){#top .signature-ink{width:245px}}
.js.go:not(.skip):not(.again) #top .atelier-bottom,.js.go:not(.skip):not(.again) #top .atelier-location,.js.go:not(.skip):not(.again) .rail{animation:motion-fade 1.2s ease 9.65s both}
@keyframes opening-light{from{opacity:1}to{opacity:0;visibility:hidden}}
@keyframes opening-portrait{from{opacity:0;transform:translateY(12px) scale(1.025)}to{opacity:1;transform:none}}
@keyframes opening-copy{from{opacity:0;transform:translateY(55%)}to{opacity:1;transform:none}}
@keyframes opening-ink{0%{stroke-dashoffset:1;opacity:0}1%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
.js.skip #top .hero-proof,.js.skip #top .atelier-bottom,.js.skip #top .atelier-location{animation:none!important;opacity:1}
@media(prefers-reduced-motion:reduce){
 .opening-veil{display:none!important}
 .js #top .hero-portrait,.js #top .lock-mark,.js #top .lock-words,.js #top .lock-name,.js #top .li,.js #top .open-f,.js #top .hero-proof{opacity:1!important;transform:none!important}
 .js #top .signature-stroke{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}
}

/* R3.13: the authentic RA alpha is the aperture; no logo redraw or WebGL loop. */
.opening-brand,.opening-skip{display:none}
.js:not(.skip):not(.again) .opening-brand{display:block;position:absolute;inset:0;z-index:8;pointer-events:none;overflow:clip}
.opening-emblem{position:absolute;transform-origin:50% 50%;will-change:transform}
.opening-emblem-mask{position:absolute;inset:0;background:#3f332b;mask:url('assets/logo-raa-mark.webp') center/100% 100% no-repeat;-webkit-mask:url('assets/logo-raa-mark.webp') center/100% 100% no-repeat;overflow:hidden}
.opening-emblem-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 37%;opacity:.18}
.opening-emblem-ink{position:absolute;inset:0;background:#211b17}
.opening-emblem-light{position:absolute;inset:-25% -35%;background:linear-gradient(110deg,transparent 32%,#f7ede166 48%,#fffaf4aa 51%,#f7ede133 57%,transparent 69%);opacity:0}
.js.go:not(.skip):not(.again) .opening-brand{animation:opening-brand-exit .18s linear 4.7s both}
.js.go:not(.skip):not(.again) #top .lock-mark{animation:opening-mark-arrive .18s linear 4.7s both;transform:none}
.js:not(.skip):not(.again) .opening-skip{display:inline-flex;align-items:center;gap:16px;position:absolute;right:var(--gut);top:18px;z-index:10;min-height:44px;border:0;border-bottom:1px solid #8c79665e;background:#f8f4ef;color:#574a3f;padding:6px 0;font:400 13px var(--sans);cursor:pointer}
.opening-skip:focus-visible{outline:2px solid currentColor;outline-offset:5px}
/* Hold the hidden state before the endpoint: fractional CSS animation clocks may stop just below 1. */
@keyframes opening-brand-exit{from{opacity:1}99%,100%{opacity:0;visibility:hidden}}
@keyframes opening-mark-arrive{from{opacity:0}to{opacity:1}}
@media(max-width:767px){.js:not(.skip):not(.again) .opening-skip{top:8px;right:22px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.opening-brand,.opening-skip{display:none!important}}

.js.go:not(.skip):not(.again) .opening-skip{animation:opening-brand-exit .18s linear 4.7s both}

/* sections.css */
/* Anna private preview — additive section composition, 14 October 2026.
 * Load after styles.css and premium.css. No image/content/price changes.
 * The desktop chapter is compact by layout, never by cropping review content. */

/* Keep a linked disclosure and its focus target clear of the fixed navigation. */
#booking-terms { scroll-margin-top:110px; }

/* A photograph has a place to sit: two fine arches, warm light, a shallow base. */
#skin .art-skin {
  position:relative;
  inset:auto;
  width:min(100%,500px);
  height:clamp(430px,44vw,610px);
  justify-self:center;
  align-self:center;
  overflow:visible;
  isolation:isolate;
}
#skin .art-skin::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:12% 8% 5%;
  border:1px solid #ad906c75;
  border-radius:49% 49% 4px 4px / 39% 39% 4px 4px;
  background:radial-gradient(ellipse at 50% 27%,#faf4e6 0%,#e9d7bd80 48%,#c3a77d18 100%);
  box-shadow:0 0 0 12px var(--c1,#f3ece1),0 0 0 13px #b49b7b50;
  pointer-events:none;
}
#skin .art-skin::after {
  content:"";
  position:absolute;
  z-index:2;
  left:2%;
  right:2%;
  bottom:1.5%;
  top:auto;
  transform:none;
  height:3.5%;
  border:1px solid #a58a6447;
  border-radius:50%;
  background:linear-gradient(180deg,#eee1ce55,#ddc7a67d);
  box-shadow:0 13px 22px -15px #74583e66;
  pointer-events:none;
}
#skin .art-skin img {
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
}
/* Optional authored caption, kept outside the photograph and added by root. */
#skin .skin-caption {
  position:absolute;
  right:-15px;
  top:41%;
  z-index:2;
  color:#75644f;
  font:400 11px/1.5 var(--sans,Jost,sans-serif);
  letter-spacing:.16em;
  text-transform:uppercase;
  writing-mode:vertical-rl;
  white-space:nowrap;
}
#skin .skin-caption::before {
  content:"";
  display:inline-block;
  width:1px;
  height:42px;
  margin-bottom:14px;
  background:#ad906c75;
}

/* Anna and client words use the same dark paper, without a second chapter break. */
#anna,#reviews {
  background-color:var(--c5,#201a17);
  scroll-margin-top:90px;
}
#anna .art-anna {
  isolation:isolate;
  justify-self:center;
  width:min(100%,300px);
  overflow:visible;
}
#anna .art-anna img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  border-radius:46% 46% 3px 3px / 30% 30% 3px 3px;
}
#anna .art-anna::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:8px -14px -12px;
  border:1px solid #baa17b60;
  border-radius:48% 48% 3px 3px / 31% 31% 3px 3px;
  pointer-events:none;
}
#anna .art-anna::after {
  content:"";
  position:absolute;
  z-index:-2;
  inset:-10% -15%;
  background:radial-gradient(ellipse at center,#a5875b12,transparent 69%);
  pointer-events:none;
}
#anna .anna-grid { display:block; }
#anna .quote { margin:0; text-wrap:balance; }
#anna .anna-signature { margin:20px 0 0; }
#anna .anna-lede { font-size:17px; line-height:1.55; }

/* Preserve all twelve records, their full text and the native carousel controls. */
#reviews .reviews { padding:0; overflow:visible; }
#reviews .reviews-summary { font-size:16px; line-height:1.5; }
#reviews .reviews-carousel { --review-gap:24px; }
#reviews .reviews-list { align-items:flex-start; padding-block:10px; }
/* Adjacent cards are the swipe cue, even before enough of them enters the viewport. */
.motion-ready #reviews .review-card[data-reveal] { opacity:.48; transform:none; transition:opacity .3s ease; }
.motion-ready #reviews .review-card[data-reveal].review-card--active { opacity:1; }
#reviews .review-card {
  position:relative;
  height:auto;
  max-height:none;
  min-height:0;
  padding:22px 30px;
  border-radius:14px;
}
#reviews .review-quote,
#reviews .review-card--short .review-quote {
  display:block;
  margin:0 0 14px;
  font:400 17px/1.5 var(--sans,Jost,sans-serif);
  white-space:normal;
  overflow:visible;
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:none;
}
#reviews .review-quote--clamped:not(.review-quote--expanded) {
  display:block;
  -webkit-line-clamp:unset;
  -webkit-box-orient:unset;
  overflow:visible;
}
#reviews .review-quote p { margin:0 0 .6em; }
#reviews .review-quote p:last-child { margin-bottom:0; }
#reviews .review-quote::before {
  content:"“";
  position:absolute;
  right:26px;
  top:17px;
  display:block;
  margin:0;
  font:400 30px/1 var(--serif,serif);
  color:#936f32;
}
#reviews .review-stars { margin-bottom:14px; }
#reviews .review-attribution,
#reviews .review-attribution cite,
#reviews .review-date,
#reviews .review-source-label { font-size:16px; line-height:1.45; }
#reviews .review-attribution { gap:6px 14px; }
#reviews .reviews-controls {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px;
  margin:14px 0 0;
  padding-inline:24px;
}
#reviews .reviews-arrow,
#reviews .reviews-playpause,
#reviews .review-expand-toggle { min-height:44px; }
#reviews .reviews-index { font-size:16px; }
#reviews .review-expand-toggle { margin:6px 0 0; font-size:13px; }
#reviews .reviews-carousel::before,#reviews .reviews-carousel::after { bottom:60px; }

@media (min-width:960px) {
  #anna {
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:clamp(36px,5vw,76px);
    padding:38px max(var(--gut),calc((100vw - 1380px)/2)) 22px;
  }
  #anna .art-anna {
    width:min(100%,calc(clamp(285px,36svh,340px) * .8));
    height:clamp(285px,36svh,340px);
  }
  #anna .anna-grid { max-width:700px; justify-self:end; }
  #anna .quote { max-width:22ch; font-size:clamp(42px,3.8vw,56px); line-height:1.12; }
  #anna .anna-signature { font-size:38px; line-height:1.25; margin-top:14px; }
  #reviews { padding:0 0 36px; }
  #reviews .reviews-summary { margin:0 0 8px; }
  #reviews .reviews-intro { margin:0 0 14px; padding-inline:24px; }
  #reviews .reviews-intro h2,
  #reviews .reviews-fallback > .h2 { font-size:32px; line-height:1.12; }
  #reviews .reviews-intro .rule { width:60px; margin-top:12px; }
  #reviews .reviews-carousel { --review-card-width:min(840px,68vw); }
  #reviews .review-card { padding-block:20px; }
}

@media (min-width:768px) and (max-width:959px) {
  #anna { padding-block:32px 22px; }
  #anna .art-anna { width:240px; height:300px; }
  #anna .quote { font-size:38px; line-height:1.12; }
  #reviews { padding:12px 0 32px; }
  #reviews .reviews-carousel { --review-card-width:76vw; }
  #reviews .reviews-intro h2 { font-size:34px; }
}

/* Native page scrolling on phones. No viewport-height caps or nested text scroll. */
@media (max-width:767px) {
  #skin .art-skin {
    width:min(82%,330px);
    height:clamp(300px,86vw,380px);
    margin:4px auto 12px;
  }
  #skin .art-skin::before { inset:13% 8% 5%; box-shadow:0 0 0 9px var(--c1,#f3ece1),0 0 0 10px #b49b7b50; }
  #skin .skin-caption { right:-20px; font-size:10px; }
  #skin .lede { font-size:17px; }
  #anna { padding-block:32px 24px; gap:30px; }
  #anna .art-anna { width:min(78%,256px); height:320px; }
  #anna .quote { font-size:clamp(32px,8.6vw,40px); line-height:1.12; }
  #anna .anna-signature { font-size:36px; line-height:1.3; margin-top:16px; }
  #reviews { padding:12px 0 32px; }
  #reviews .reviews-summary { margin-bottom:10px; }
  #reviews .reviews-intro { margin-bottom:18px; }
  #reviews .reviews-intro h2 { font-size:32px; }
  #reviews .reviews-carousel { --review-card-width:min(440px,calc(100vw - 96px)); --review-gap:14px; }
  #reviews .review-card { padding:22px; }
  #reviews .review-quote { font-size:17px; line-height:1.5; }
  #reviews .review-attribution { font-size:16px; }
  #reviews .reviews-controls { gap:10px; padding-inline:20px; }
}

@media (prefers-reduced-motion:reduce) {
  #skin .art-skin,#anna .art-anna,#reviews .review-card,#reviews .reviews-track {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}
@media (prefers-contrast:more) {
  #skin .art-skin::before,#skin .art-skin::after,
  #anna .art-anna::before,#anna .art-anna::after { content:none; }
  #reviews .review-card { border:2px solid #2a2620; }
}

/* refinement.css */
/* R3 — quiet portrait, readable hierarchy and controls in the document flow. */
#top.hero{background:#f8f4ef;padding-top:82px;padding-bottom:26px;min-height:100svh}
#top .hero-grid{margin:auto 0;padding-block:28px 12px}
#top .hero-copy{width:61%;max-width:1040px}
#top .lockup{width:clamp(320px,27vw,430px);margin:0 0 clamp(26px,4svh,44px)}
#top .lock-mark{height:clamp(104px,8.8vw,146px);margin-bottom:17px}
#top .lock-name{font-size:clamp(12px,1vw,16px);letter-spacing:.29em;margin-top:12px}
#top .h1{font-size:clamp(66px,7.25vw,132px);line-height:1.02;letter-spacing:-.045em;margin:0 0 24px}
#top .hero-sub{font-size:clamp(18px,1.5vw,24px);line-height:1.5;margin:0 0 24px;color:#685b50}
#top .hero-scene{inset:9% 1% 11% auto;width:47%;z-index:-2}
#top .hero-scene picture{transform:none}
#top .hero-wash{background:linear-gradient(90deg,#f8f4ef 0%,#f8f4ef 31%,#f8f4ef88 43%,transparent 58%)}
.hero-atmosphere{position:absolute;inset:0;z-index:-4;pointer-events:none;background:radial-gradient(ellipse at 78% 40%,#dfd4c44d,transparent 56%)}
.atelier-location{position:absolute;top:28px;left:var(--gut);margin:0;font:400 clamp(12px,1vw,15px)/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#78695b}
#top .hero-proof{display:flex;align-items:center;gap:12px 22px;flex-wrap:wrap;margin:24px 0 30px;font:400 clamp(16px,1.25vw,20px)/1.5 var(--sans);color:#594d42}
#top .hero-proof[hidden]{display:none}
.hero-proof a{color:inherit;text-decoration:none;text-underline-offset:4px}
.hero-proof a:hover{text-decoration:underline}
.hero-stars{display:inline-flex;gap:3px;letter-spacing:.14em;color:#7a684d;font-size:clamp(24px,2vw,30px);line-height:1}
#top .hero-cta{margin:0;gap:0}
#top .hero-cta .pill{box-shadow:none;min-height:62px;padding-inline:32px;font-size:14px;gap:34px}
#top .signature{left:75%;bottom:40px;width:clamp(280px,26vw,420px);padding:0;line-height:1.3}
#top .signature-ink{width:100%}
.atelier-bottom{position:relative;inset:auto;margin:16px var(--gut) 0;display:flex;justify-content:flex-start;gap:0}
#opening-replay{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#76695e;min-height:44px;padding:4px 0;border:0;background:none;font-family:var(--sans);cursor:pointer}
#opening-replay span{font-size:18px;line-height:1}
#opening-replay:hover{text-decoration:underline;text-underline-offset:5px}
#opening-replay:focus-visible{outline:2px solid currentColor;outline-offset:4px}
#skin .art-skin::before,#skin .art-skin::after,#anna .art-anna::before,#anna .art-anna::after{content:none}
#skin .art-skin{width:min(100%,520px);height:clamp(440px,46vw,650px)}
#anna .art-anna img{border-radius:0}
@media(min-width:768px) and (max-width:1099px){
 #top.hero{min-height:0}
 #top .hero-grid{margin:0}
 #top .hero-copy{width:65%}#top .h1{font-size:clamp(58px,7.1vw,78px)}
 #top .hero-scene{right:-5%;width:51%}#top .lockup{width:300px}
 #top .lock-mark{height:100px}#top .hero-sub{max-width:30ch}
 #top .signature{left:77%;width:250px}
 #top .hero-proof{max-width:420px;gap:10px 18px}
}
@media(max-width:767px){
 #top.hero{min-height:0;padding:48px 22px 32px;gap:0}
 .atelier-location{top:17px;left:0;right:0;text-align:center;font-size:11px}
 #top .hero-grid,#top .hero-copy{display:contents}
 #top .lockup{order:0;width:min(100%,290px);margin:8px auto 12px}
 #top .lock-mark{height:88px;margin-bottom:13px}
 #top .lock-words{width:100%;height:auto}
 #top .lock-name{font-size:11px;margin-top:10px}
 #top .hero-scene{order:1;position:relative;inset:auto;z-index:0;width:min(100%,440px);height:clamp(190px,26svh,270px);margin:0}
 #top .hero-scene img{object-position:center bottom}
 #top .signature{order:2;position:relative;inset:auto;transform:none;width:100%;margin:0 0 20px;font-size:30px;line-height:1.2}
 #top .h1{order:3;margin:0;font-size:clamp(44px,11vw,76px);line-height:1.02;letter-spacing:-.045em}
 #top .hero-sub{order:4;font-size:16px;line-height:1.5;margin:18px 0 0;max-width:30ch}
 #top .hero-proof{order:5;flex-direction:column;justify-content:center;gap:10px;margin:22px 0 0;font-size:15px}
 .hero-stars{font-size:25px}
 #top .signature-ink{width:260px}
 #top .hero-cta{display:none}
 .atelier-bottom{order:6;position:relative;inset:auto;margin:16px 0 0;justify-content:center}
 #opening-replay{font-size:12px}
 #skin .art-skin{width:min(100%,360px);height:390px;margin:0 auto}
}
@media(prefers-reduced-motion:reduce){#opening-replay{display:none}}
/* Keep the monogram above the pale opening on the mobile display:contents layout. */
.js:not(.skip):not(.again) #top .lockup{position:relative;z-index:6}
.hero-service-nav{position:absolute;right:var(--gut);top:19px;z-index:7;display:flex;align-items:center;gap:32px;font:400 clamp(15px,1.15vw,18px) var(--sans);color:#574a3f}
.hero-service-nav button,.hero-service-nav a{min-height:44px;display:inline-flex;align-items:center;gap:13px;border:0;background:none;padding:6px 0;color:inherit;font:inherit;text-decoration:none;cursor:pointer}
.hero-service-nav a{border-bottom:1px solid #8c79665e}
.hero-service-nav button:hover,.hero-service-nav a:hover{text-decoration:underline;text-underline-offset:5px}
.hero-service-nav :focus-visible{outline:2px solid currentColor;outline-offset:5px}
.js.go:not(.skip):not(.again) .hero-service-nav{animation:motion-fade 1.2s ease 8.5s both}
.treatment-more{margin-top:16px;border-block:1px solid color-mix(in srgb,var(--fg) 18%,transparent)}
.treatment-more summary{cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:18px 2px;min-height:52px;font:400 14px/1.5 var(--sans);list-style:none}
.treatment-more summary::-webkit-details-marker{display:none}
.treatment-more[open]>summary>span{transform:rotate(45deg)}
.treatment-more .rows{background:none;border:0;padding:0;border-radius:0;box-shadow:none}
.catalog-source{font:400 11px/1.6 var(--sans);opacity:.8;max-width:46ch;margin:15px 0 0}
.catalog-source a{color:inherit;text-underline-offset:3px}
.row-price small{display:block;font:400 10px/1.5 var(--sans);letter-spacing:.02em}
#skin .row-name,#makeup .row-name,#tattoo .row-name{font-size:clamp(18px,1.6vw,25px)}
#skin .row-price,#makeup .row-price,#tattoo .row-price{font-size:clamp(20px,2vw,30px)}
@media(max-width:767px){.hero-service-nav{display:none}.catalog-source{font-size:11px}.treatment-more summary{font-size:13px}}
/* The existing studio photograph supplies its own setting; no cutout or added ornaments. */
#skin .art-skin{height:auto;width:min(100%,440px);margin:0;overflow:visible;align-self:center}
#skin .art-skin img{height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 39%;opacity:1;filter:none;mask-image:none;-webkit-mask-image:none;border-radius:3px}
#skin .art-skin figcaption{display:flex;justify-content:space-between;gap:14px;margin:14px 0 0;font:400 12px/1.5 var(--sans);color:#5e5145}
#skin .art-skin figcaption span{font-size:10px;text-align:right;max-width:18ch;color:#807161}
@media(max-width:767px){#skin .art-skin{width:min(100%,350px);height:auto;margin:6px auto 14px}#skin .art-skin img{height:280px;aspect-ratio:auto;object-fit:cover;object-position:50% 37%}#skin .art-skin figcaption{margin-top:10px;font-size:11px}}

/* R3.11: size the composition against the available window height.
   The final autograph owns a real flow row instead of the overflowing hero edge. */
@media(min-width:768px){
 #top.hero{min-height:100svh;padding-top:72px;padding-bottom:22px}
 #top .hero-grid{margin:auto 0;padding-block:8px 0}
 #top .lockup{width:clamp(260px,min(27vw,44svh),430px);margin-bottom:clamp(18px,3svh,36px)}
 #top .lock-mark{height:clamp(76px,min(8.8vw,14svh),146px);margin-bottom:clamp(10px,1.6svh,17px)}
 #top .lock-name{margin-top:9px;font-size:clamp(11px,min(1vw,1.6svh),16px)}
 #top .h1{font-size:clamp(54px,min(7.25vw,12.6svh),132px);margin-bottom:clamp(12px,1.8svh,24px)}
 #top .hero-sub{font-size:clamp(16px,min(1.5vw,2.5svh),24px);margin-bottom:0}
 #top .hero-proof{margin:clamp(14px,2.4svh,24px) 0 clamp(16px,2.5svh,30px)}
 #top .hero-cta .pill{min-height:clamp(48px,6.5svh,62px)}
 #top .signature{position:relative;inset:auto;transform:none;align-self:flex-end;flex:none;width:clamp(270px,25vw,420px);margin:16px 12% 0 0;line-height:0}
 #top .hero-scene{inset:72px 1% 110px auto}
 #top .atelier-bottom{position:absolute;left:var(--gut);right:auto;bottom:22px;margin:0;max-width:36%}
}
@media(min-width:768px) and (max-width:1099px){
 #top .hero-copy{width:65%}
 #top .h1{font-size:clamp(50px,min(6.7vw,10.5svh),72px)}
 #top .signature{width:250px;margin-right:5%}
}
@media(min-width:768px) and (max-height:660px){
 #top.hero{padding-top:66px;padding-bottom:16px}
 #top .lockup{margin-bottom:16px}
 #top .h1{font-size:clamp(46px,min(6.8vw,11svh),72px);margin-bottom:10px}
 #top .hero-proof{margin:12px 0 14px;font-size:16px}
 #top .hero-stars{font-size:25px}
 #top .signature{width:clamp(250px,24vw,340px);margin-top:12px}
 #top .hero-scene{top:58px;bottom:92px}
}
@media(max-width:767px){
 #top.hero{min-height:100svh;padding-bottom:90px}
 #top .signature{margin:0 0 16px;line-height:0}
 #top .signature-ink{width:min(100%,290px)}
}

/* R3.12: the same signature artwork on cream and dark chapters. */
#anna .anna-signature{width:clamp(250px,23vw,340px);max-width:100%;line-height:0}
#anna .anna-signature .signature-ink{display:block;width:100%;height:auto;overflow:visible}
@media(max-width:767px){#anna .anna-signature{width:260px}}

/* R3.18: warm satin light, with the portrait and typography sharing one surface. */
#top.hero{background:#e6d9c9}
#top .hero-atmosphere{z-index:-3;background:
 radial-gradient(ellipse at 18% 38%,#f6eee3 0%,#f2e9dc99 26%,transparent 58%),
 radial-gradient(ellipse at 72% 35%,#fff5e480 0%,transparent 49%),
 linear-gradient(118deg,#d7c5b2 0%,#ece2d4 27%,#e9ddcd 53%,#cbb59b 100%)}
#top .hero-atmosphere::after{content:"";position:absolute;inset:0;background:
 linear-gradient(114deg,transparent 42%,#fff8ed38 50%,transparent 61%),
 radial-gradient(ellipse at 100% 100%,#88705a26,transparent 65%);pointer-events:none}
#top .hero-scene{mix-blend-mode:multiply}
#top .hero-wash{display:none}
#top .hero-sub,#top .hero-proof{color:#534539}
#top .atelier-location,#top #opening-replay{color:#665443}
@media(min-width:1100px){
 #top .hero-grid{max-width:1680px}
 #top .hero-copy{width:63%}
 #top .hero-scene{width:53%;right:0;top:60px;bottom:96px}
 #top .lockup{width:clamp(310px,min(29vw,47svh),460px);margin-bottom:clamp(18px,2.7svh,30px)}
 #top .lock-mark{height:clamp(92px,min(10vw,15.5svh),160px)}
 #top .h1{font-size:clamp(64px,min(7.6vw,12.6svh),138px)}
 #top .signature{margin-right:11%;margin-top:10px}
}
@media(min-width:1100px) and (max-height:660px){
 #top .lock-mark{height:80px}
 #top .lockup{width:300px;margin-bottom:14px}
 #top .h1{font-size:clamp(46px,min(6.8vw,11svh),72px)}
 #top .hero-scene{top:54px;bottom:88px}
}
@media(max-width:767px){
 #top .hero-atmosphere{background:radial-gradient(ellipse at 32% 30%,#f4ebde,transparent 70%),linear-gradient(135deg,#dbcbb8,#e9ddce 55%,#cdb89e)}
}

/* photo-viewer.css */
/* Quiet, native-dialog viewer for the existing authentic gallery. */
figure[data-work-image].has-photo-viewer { position: relative; }
.photo-open {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  border: 0;
  padding: 12px;
  background: transparent;
  color: inherit;
  cursor: zoom-in;
}
.photo-open:focus-visible { outline: 2px solid #f8f3eb; outline-offset: -4px; }
.photo-open-mark {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(249,246,241,.72);
  border-radius: 50%;
  background: rgba(32,26,23,.62);
  color: #f9f6f1;
  opacity: .94;
  transition: opacity 180ms ease, transform 180ms ease, background-color 180ms ease;
}
.photo-open-mark svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
@media (hover:hover) and (pointer:fine) {
  .photo-open-mark { opacity: 0; transform: translateY(3px); }
  .photo-open:hover .photo-open-mark,
  .photo-open:focus-visible .photo-open-mark { opacity: 1; transform: none; }
}

.photo-viewer {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: clamp(10px, 2vw, 28px);
  border: 0;
  overflow: hidden;
  background: #201a17;
  color: #f9f6f1;
  overscroll-behavior: contain;
}
.photo-viewer::backdrop { background: rgba(22,18,16,.88); }
.photo-viewer-shell {
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto;
  width: min(100%, 1500px);
  height: 100%;
  min-height: 0;
  margin-inline: auto;
}
.photo-viewer-top {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto 44px;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  border-bottom: 1px solid rgba(249,246,241,.16);
}
.photo-viewer-group,.photo-viewer-count {
  margin: 0;
  color: #e7d8c5;
  font: 500 12px/1.4 var(--sans, Jost, sans-serif);
  letter-spacing: .11em;
  text-transform: uppercase;
}
.photo-viewer-count { color: rgba(249,246,241,.72); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.photo-viewer-close,.photo-viewer-nav {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(249,246,241,.42);
  border-radius: 50%;
  background: rgba(249,246,241,.06);
  color: #f9f6f1;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.photo-viewer-close span { font: 300 30px/1 var(--sans, Jost, sans-serif); transform: translateY(-1px); }
.photo-viewer-close:hover,.photo-viewer-nav:hover { background: rgba(249,246,241,.15); border-color: rgba(249,246,241,.8); }
.photo-viewer button:focus-visible,.photo-viewer a:focus-visible { outline: 2px solid #dfc5a2; outline-offset: 3px; }
.photo-viewer-stage {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) 52px;
  align-items: center;
  gap: clamp(4px, 1.4vw, 20px);
  min-height: 0;
  padding-block: 10px;
}
.photo-viewer-image-wrap {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  place-items: center;
}
.photo-viewer-image-wrap img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  object-fit: contain;
  user-select: none;
}
.photo-viewer-image-wrap img[hidden] { display: none; }
.photo-viewer-loading {
  width: min(28vw, 210px);
  aspect-ratio: 3 / 4;
  max-height: 65vh;
  border: 1px solid rgba(249,246,241,.1);
  background: linear-gradient(110deg,rgba(249,246,241,.025) 25%,rgba(249,246,241,.085) 44%,rgba(249,246,241,.025) 63%);
  background-size: 220% 100%;
  animation: photo-viewer-shimmer 1.5s ease-in-out infinite;
}
.photo-viewer-loading[hidden] { display: none; }
@keyframes photo-viewer-shimmer { to { background-position-x: -220%; } }
.photo-viewer-error {
  display: grid;
  justify-items: center;
  gap: 12px;
  color: #f9f6f1;
  font: 400 15px/1.5 var(--sans, Jost, sans-serif);
  text-align: center;
}
.photo-viewer-error[hidden] { display: none; }
.photo-viewer-error p { margin: 0; }
.photo-viewer-error button,.photo-viewer-error a { border: 0; padding: 6px 0; background: none; color: #e7d8c5; font: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.photo-viewer-nav { position: relative; z-index: 1; }
.photo-viewer-next span,.photo-viewer-prev span { font: 300 30px/1 var(--sans, Jost, sans-serif); }
.photo-viewer-next span { transform: translateX(1px); }
.photo-viewer-prev span { transform: translateX(-1px); }
.photo-viewer-bottom {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 10px;
  border-top: 1px solid rgba(249,246,241,.16);
  text-align: center;
}
.photo-viewer-bottom p {
  max-width: 70ch;
  margin: 0;
  color: rgba(249,246,241,.84);
  font: 400 14px/1.5 var(--sans, Jost, sans-serif);
}
@media (max-width:600px) {
  .photo-viewer { padding: 8px; }
  .photo-viewer-top { grid-template-columns: minmax(0,1fr) auto 44px; gap: 8px; min-height: 50px; }
  .photo-viewer-group,.photo-viewer-count { font-size: 10px; }
  .photo-viewer-stage { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0,1fr) 44px; gap: 10px 12px; padding-block: 8px; }
  .photo-viewer-image-wrap { grid-area: 1 / 1 / 2 / 3; }
  .photo-viewer-prev { grid-area: 2 / 1; justify-self: end; }
  .photo-viewer-next { grid-area: 2 / 2; justify-self: start; }
  .photo-viewer-nav { width: 44px; height: 44px; }
  .photo-viewer-loading { width: min(50vw,210px); max-height: 58vh; }
  .photo-viewer-bottom { min-height: 60px; padding-top: 8px; }
  .photo-viewer-bottom p { font-size: 13px; line-height: 1.42; }
}
@media (prefers-reduced-motion:reduce) {
  .photo-open-mark,.photo-viewer-close,.photo-viewer-nav { transition: none; }
  .photo-viewer-loading { animation: none; }
}

/* anna-composition.css */
/* R3.14: one photographic field for Anna's promise and her clients' words. */
.anna-composition{position:relative;isolation:isolate;z-index:5;background:var(--c5);overflow:clip;--anna-scene-height:clamp(280px,40svh,440px)}
.anna-backdrop{position:absolute;pointer-events:none;z-index:0;top:90px;right:max(4vw,calc((100vw - 1560px)/2));width:calc((var(--anna-scene-height) + 210px)*.8);max-width:53%;height:calc(var(--anna-scene-height) + 210px);overflow:hidden;mix-blend-mode:luminosity;mask-image:linear-gradient(90deg,transparent 0%,#000 23%,#000 82%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 5%,#000 58%,transparent 100%);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 23%,#000 82%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 5%,#000 58%,transparent 100%);-webkit-mask-composite:source-in}
.anna-backdrop img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;opacity:.9}
.anna-composition #anna,.anna-composition #reviews{background:transparent;z-index:1}
.anna-composition #anna{display:flex;align-items:center;min-height:calc(var(--anna-scene-height) + 90px);padding:122px var(--gut) 20px;gap:0;scroll-margin-top:0}
.anna-composition #anna .anna-grid{max-width:none;margin:0;width:54%;padding:0}
.anna-composition #anna .quote{max-width:22ch;font-size:clamp(44px,4.05vw,76px);line-height:1.1;text-wrap:balance}
.anna-composition #anna .anna-signature{margin-top:22px;width:clamp(260px,24vw,360px)}
.anna-composition #reviews{padding:0 0 28px}
.anna-composition #reviews .reviews-summary,.anna-composition #reviews .reviews-intro{width:54%;padding-inline:0;margin:0 0 14px var(--gut);text-align:left}
.anna-composition #reviews .reviews-summary{display:flex;align-items:flex-start;flex-direction:column;gap:9px;font-size:17px;line-height:1.45;color:var(--por-soft)}
.reviews-summary a{text-decoration:none;text-underline-offset:4px}
.reviews-summary a:hover{text-decoration:underline}
.reviews-summary strong{font-weight:500;color:var(--por)}
.anna-rating-stars{display:inline-grid;font-size:31px;line-height:1.1;letter-spacing:5px;white-space:nowrap;position:relative}
.anna-stars-base,.anna-stars-fill{grid-area:1/1;display:block}
.anna-stars-base{color:#786650}
.anna-stars-fill{color:#d7ba87;clip-path:inset(0 2% 0 0)}
.anna-composition #reviews .reviews-intro h2{font-size:clamp(30px,2.5vw,44px);line-height:1.15}
.anna-composition #reviews .reviews-intro .rule{display:none}
.anna-composition #reviews .reviews-carousel{position:relative;z-index:1;--review-card-width:min(900px,68vw)}
.anna-composition #reviews .review-stars{font-size:17px;letter-spacing:2px}
.anna-composition #reviews .review-card{background:#f5f0e2}
.anna-composition #reviews .reviews-static-list{padding-inline:var(--gut)}
.anna-composition #reviews .reviews-fallback>.h2{text-align:left;margin:0 var(--gut) 16px}
@media(min-width:960px) and (max-height:700px){
 .anna-composition{--anna-scene-height:220px}
 .anna-composition #anna{padding-block:110px 16px}
 .anna-composition #anna .quote{font-size:40px;max-width:25ch}
 .anna-composition #anna .anna-signature{width:250px;margin-top:12px}
 .anna-composition #reviews .reviews-summary{flex-direction:row;align-items:center;gap:16px;margin-bottom:10px;font-size:16px}
 .anna-rating-stars{font-size:27px;letter-spacing:3px}
 .anna-composition #reviews .reviews-intro{margin-bottom:8px}
 .anna-composition #reviews .reviews-intro h2{font-size:29px}
 .anna-composition #reviews .review-card{padding-block:16px}
 .anna-composition #reviews .review-stars{margin-bottom:10px}
 .anna-composition #reviews .reviews-controls{margin-top:8px}
 .anna-composition #reviews{padding-bottom:20px}
}
@media(min-width:768px) and (max-width:959px){
 .anna-composition{--anna-scene-height:320px}
 .anna-backdrop{width:400px;height:500px;right:0}
 .anna-composition #anna .anna-grid{width:56%}
 .anna-composition #anna .quote{font-size:40px}
 .anna-composition #anna .anna-signature{width:260px}
 .anna-composition #reviews .reviews-summary,.anna-composition #reviews .reviews-intro{width:65%}
}
@media(max-width:767px){
 .anna-composition{--anna-scene-height:0px}
 .anna-backdrop{width:100%;max-width:none;height:430px;right:0;top:78px;mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 55%,transparent 98%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 55%,transparent 98%)}
 .anna-backdrop img{object-fit:contain;object-position:center top}
 .anna-composition #anna{display:block;padding:400px 24px 24px}
 .anna-composition #anna .anna-grid{width:100%}
 .anna-composition #anna .quote{max-width:22ch;font-size:clamp(32px,8.7vw,43px);line-height:1.12}
 .anna-composition #anna .anna-signature{width:270px;margin-top:18px}
 .anna-composition #reviews .reviews-summary,.anna-composition #reviews .reviews-intro{width:auto;margin:0 24px 18px}
 .anna-composition #reviews .reviews-summary{font-size:16px;gap:9px}
 .anna-rating-stars{font-size:30px;letter-spacing:4px}
 .anna-composition #reviews .reviews-intro h2{font-size:32px}
 .anna-composition #reviews .reviews-carousel{--review-card-width:min(440px,calc(100vw - 64px));--review-gap:16px}
 .anna-composition #reviews .review-card{padding:22px}
 .anna-composition #reviews{padding-bottom:88px}
}
/* R3.18: the client rating belongs to the full-width carousel, not the quote column. */
.anna-composition #reviews .reviews-summary,
.anna-composition #reviews .reviews-intro{width:auto;margin-inline:var(--gut);text-align:center}
.anna-composition #reviews .reviews-summary{align-items:center;justify-content:center}
.anna-composition #reviews .reviews-intro{margin-bottom:24px}
.anna-composition #reviews .reviews-intro h2{margin-inline:auto}
@media(min-width:768px){
 .anna-composition #reviews .reviews-summary{flex-direction:column;gap:8px}
 .anna-composition #reviews .reviews-intro{margin-top:14px}
}
@media(min-width:960px) and (max-height:700px){
 .anna-composition #reviews .reviews-intro{margin-top:8px;margin-bottom:14px}
}
@media(prefers-contrast:more){.anna-backdrop{display:none}.anna-stars-base{color:#ac967c}.anna-stars-fill{color:#ffe0a5}}

/* anna-depth.css */
/* R3.17: the photograph remains the fallback; depth is a progressive enhancement. */
.anna-depth-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center top;opacity:0;pointer-events:none}
.anna-backdrop.depth-ready .anna-depth-canvas{opacity:1}
.anna-composition[data-anna-depth] #anna{touch-action:pan-y pinch-zoom}
.anna-depth-controls{position:relative;z-index:3;display:flex;align-items:center;flex-wrap:wrap;gap:4px 16px;margin-top:8px;min-height:44px;color:var(--por-soft)}
.anna-depth-controls[hidden]{display:none}
.anna-depth-toggle{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:120px;min-height:44px;padding:8px 0;border:0;border-bottom:1px solid #a99a864d;background:transparent;color:var(--por);font:inherit;font-size:14px;line-height:1.4;cursor:pointer;text-align:left}
.anna-depth-toggle svg{width:21px;height:21px;flex:none;stroke:currentColor;fill:none;stroke-width:1;opacity:.8}
.anna-depth-toggle[hidden]{display:none}
.anna-depth-toggle:focus-visible{outline:2px solid #d7ba87;outline-offset:5px;border-radius:3px}
.anna-depth-toggle:disabled{cursor:default;color:var(--por-soft)}
.anna-depth-status{flex:1 1 150px;max-width:35ch;font-size:13px;line-height:1.45;color:var(--por-soft)}
@media(hover:hover) and (pointer:fine){.anna-depth-toggle:hover:not(:disabled){color:#e6cfaa;border-color:#e6cfaa}}
@media(max-width:767px){
 .anna-depth-canvas{object-fit:contain}
 .anna-depth-controls{gap:4px 12px;margin-top:4px}
 .anna-depth-status{font-size:13px;max-width:28ch}
}
@media(prefers-reduced-motion:reduce){.anna-backdrop.depth-ready .anna-depth-canvas{opacity:0}}
@media(prefers-contrast:more){.anna-depth-controls{display:none}}

/* treatment-links.css */
/* Links to the service guide follow each chapter's own light/dark colour scheme. */
.treatment-guides { display: flex; flex-wrap: wrap; gap: .65rem 1.5rem; margin: 1.25rem 0 1.8rem; }
.treatment-guides a { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; gap: .55rem; color: inherit; font: 400 clamp(16px, 1.2vw, 20px)/1.4 Jost, sans-serif; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.treatment-guides a:focus-visible, .treatment-selection button:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.treatment-selection { padding: 1.5rem 0 2rem; margin-bottom: 1.5rem; border-bottom: 1px solid currentColor; }
.treatment-selection > p { margin: 0 0 .6rem; }
.treatment-selection-name { font-size: clamp(22px, 2.5vw, 32px); }
.treatment-selection button { margin-top: .8rem; }

/* studio-links.css */
.studio-directory{display:flex;flex-wrap:wrap;gap:8px 28px;margin:14px 0 24px}
.studio-directory a{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px;text-decoration:none;border-bottom:1px solid currentColor;font-size:16px}
.studio-directory a:focus-visible{outline:2px solid currentColor;outline-offset:5px}
#makeup .gal-scroll>.more-wrap{margin:24px 0 0}
@media(max-width:600px){.studio-directory{display:grid;grid-template-columns:1fr;gap:5px}.studio-directory a{width:100%;padding:7px 0}}

/* anna-blend.css */
/* R3.18b, Konrad 16.10: "nie było żadnych ramek na zdjęciu Ani, ma być jakby wtopiona w grafikę".
   Only change against the accepted R3.18: Anna's first-screen portrait melts into the page.
   multiply lets the photo's light ground take the page colour; the mask fades every edge to nothing. */
#top .hero-scene{mix-blend-mode:multiply;background:none}
#top .hero-scene img,#top .hero-portrait{
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 60%,transparent 100%);
          mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 60%,transparent 100%);
}

/* anna-panels.css */
/* Wall panels from Anna's salon (Konrad 16.10 ~21:00: „Ania chce takie panele w salonie… na hero… delikatnie w tle wkomponowane”).
   Only change against the live booking site: one quiet background layer in the hero, behind the logo, Anna and the text.
   Classic moulded wall panels drawn as hairlines (light on the top-left edge, shade on the bottom-right), fading out at top and bottom. */
#top .hero-atmosphere::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 800' preserveAspectRatio='none'%3E%3Cg fill='none' vector-effect='non-scaling-stroke'%3E%3Cpath d='M34 798 V2 H326' stroke='rgba(255,252,246,0.95)' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M326 2 V798 H34' stroke='rgba(120,92,66,0.22)' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M46 786 V14 H314' stroke='rgba(120,92,66,0.18)' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M314 14 V786 H46' stroke='rgba(255,252,246,0.9)' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-size:clamp(150px,22vw,280px) 64%;
  background-position:center 78%;
  opacity:.9;
  /* Konrad 16.10 ~21:15: „panel prześwituje przez Anię”. Anna's portrait multiplies with what is under it,
     so the panels are cut out around her: a soft hole where she stands, lines only on the wall beside her. */
  --hx:74%;--hy:48%;--hw:15%;--hh:50%;
  -webkit-mask-image:linear-gradient(to bottom,transparent 22%,#000 36%,#000 84%,transparent 98%),radial-gradient(ellipse var(--hw) var(--hh) at var(--hx) var(--hy),transparent 72%,#000 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to bottom,transparent 22%,#000 36%,#000 84%,transparent 98%),radial-gradient(ellipse var(--hw) var(--hh) at var(--hx) var(--hy),transparent 72%,#000 100%);
          mask-composite:intersect;
}
@media(max-width:767px){
  #top .hero-atmosphere::before{background-size:50% 60%;background-position:center 75%;--hx:50%;--hy:35%;--hw:35%;--hh:22%}
  /* Konrad 16.10 ~21:28: „może trochę ją powiększyć”. Visual scale only (no layout shift), from just below her centre. */
  #top .hero-scene{scale:1.14;transform-origin:50% 58%}
}

/* Konrad 16.10 ~21:28: „za Anią jest taka ciemniejsza poświata trzeba ją zlikwidować”.
   The portrait's own backdrop is a shade darker than the page, and multiply turned it into a halo.
   Lifting the light tones to white makes the backdrop vanish under multiply; her face and suit keep their tones. */
#top .hero-portrait{filter:contrast(1.12) brightness(1.08)}
@media (prefers-contrast:more){#top .hero-atmosphere::before{display:none}}

/* opening-guard.css */
/* Kit item B3.3. The opening hides the hero's "Ask a question / Plan a visit" links and the rating line only once site.js has
   started it (the .go class, animation fill-mode both). Until that moment they are visible above the opening veil. With the
   render-blocking files in one stylesheet the first paint can come before site.js has run, and these two showed for a moment on a
   fast first visit. This keeps them hidden until the opening's own rules take over. It never matches in a visit that skips the
   opening (.skip, .again), so those visits are unchanged. */
.js:not(.go):not(.skip):not(.again) .hero-service-nav,
.js:not(.go):not(.skip):not(.again) #top .hero-proof{opacity:0}

/* D-C135 W02-W03: quiet reduced-motion presentation; no change to movement preference. */
@media(prefers-reduced-motion:reduce){#anna-depth-controls{display:none!important}.reviews-playpause{display:none!important}}
.reviews-playpause{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;padding:0;border-radius:50%;letter-spacing:normal;text-transform:none;line-height:1}
.reviews-playpause svg{width:18px;height:18px;fill:currentColor;stroke:none}

/* N4b: keep the two existing short lines balanced, without changing their words. */
.hero-sub,.anna-depth-status{text-wrap:balance}