/* Juliana Farinazzo — black & grey realism, Jacksonville FL
   Cox Technologies demo. Concept: THE TRANSFER (Claude × Codex merge) —
   a violet stencil is lifted from skin under a white task light; what remains
   is a black image with human warmth around it. Light-first canvas interrupted
   by carbon photo fields; stencil violet guides actions, then yields to carbon. */

:root{
  --paper:    #f3f3f0;  /* ring light — main canvas */
  --carbon:   #0b0b0a;  /* photo fields, footer, major type */
  --flash:    #ffffff;  /* input interiors, elevated reading */
  --transfer: #d7d5cf;  /* dividers, inactive */
  --graphite: #43413d;  /* secondary type on light (≥4.5:1 on paper) */
  --stencil:  #6842a0;  /* focus, active step, primary action, live signature */
  --stencil-deep: #563487;
  --stencil-tint: #cdb7ec; /* stencil on carbon */
  --alert: #a3252f;      /* form errors only */
  --paper-dim:#c9c7c1;  /* secondary type on carbon */
  --display:"Krona One",sans-serif;
  --reading:"Literata",Georgia,serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --z-sticky:30; --z-overlay:60; --z-modal:70; --z-toast:90;
}

*{margin:0;padding:0;box-sizing:border-box}
/* The clip has to be on HTML, not just body. body{overflow-x:clip} stops the page
   scrolling sideways, which is what a scrollTo() test measures — but it does not
   remove the overflow from the layout, so on a phone you could still pinch out or
   drag the page across and expose bare background beside the site. The ring's
   side cards bleed 61px past the viewport by design; this is what contains them.
   `clip` first-choice because, unlike `hidden`, it does not make the viewport a
   scroll container (which would put the sticky header at risk); `hidden` is left
   in front of it as the fallback for Safari below 16. */
html{background:var(--paper);color:var(--carbon);scroll-behavior:smooth;
  overflow-x:hidden;overflow-x:clip;overscroll-behavior-x:none}
/* And the exposed colour was WHITE because html keeps the light-theme paper
   background while body carries .ink. Anything that does show — overscroll
   bounce at the top of an iPhone, for one — should be the site's own carbon. */
html:has(body.ink){background:var(--carbon)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--reading);
  font-size:1.0625rem;font-weight:400;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;cursor:pointer}
::selection{background:var(--stencil);color:var(--flash)}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
:focus-visible{outline:3px solid var(--stencil);outline-offset:3px}

.display{font-family:var(--display);font-weight:400;letter-spacing:-.025em;text-transform:uppercase}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--carbon);color:var(--paper);
  padding:.6rem 1rem;z-index:100;font-weight:500}
.skip-link:focus{left:12px;top:12px}

/* ---------- concept bar (house convention) ---------- */
.concept-bar{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  background:var(--carbon);color:var(--paper);
  padding:.55rem clamp(1rem,3vw,2.75rem);font-size:.78rem;line-height:1.35;
  position:relative;z-index:10}
.concept-bar small{color:var(--paper-dim);font-size:.95em}
.concept-bar a{color:var(--paper);font-weight:500;white-space:nowrap;text-underline-offset:.2em}
.concept-bar a:hover{color:var(--stencil-tint)}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:var(--z-sticky);
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:.8rem clamp(1rem,3vw,2.75rem);
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--transfer)}
.head-mark{font-family:var(--display);font-size:.92rem;letter-spacing:.01em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap}
/* margin-left:auto keeps the nav + actions grouped hard right, exactly where the
   single nav block sat before the CTA was lifted out of it. */
.site-nav{display:flex;gap:clamp(.9rem,2.4vw,1.7rem);align-items:center;
  margin-left:auto}
.head-actions{display:flex;align-items:center;gap:.7rem}
.nav-toggle{display:none;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border:0;background:transparent;
  color:var(--carbon)}
/* three bars, becoming a cross when the panel is open */
.nav-bars,.nav-bars::before,.nav-bars::after{
  display:block;width:21px;height:2px;background:currentColor;
  transition:transform 220ms var(--ease),opacity 160ms var(--ease)}
.nav-bars::before,.nav-bars::after{content:"";position:absolute}
.nav-bars::before{transform:translateY(-6.5px)}
.nav-bars::after{transform:translateY(6.5px)}
.nav-toggle[aria-expanded="true"] .nav-bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-bars::before{transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-bars::after{transform:rotate(-45deg)}
/* nowrap: without it a two-word label like "The work" breaks mid-label and the
   sticky header grows to two rows. */
.site-nav a{font-size:.92rem;font-weight:500;color:var(--graphite);text-decoration:none;
  white-space:nowrap}
.site-nav a:hover{color:var(--carbon)}
.site-nav a.btn{color:var(--flash)}
.site-nav a.btn:hover{color:var(--flash);background:var(--stencil-deep)}
/* The nav carries six labels plus the CTA. Below ~1040px the "— Jacksonville"
   tail is the cheapest thing to drop to keep it all on one row. */
@media (max-width:1040px){.hm-loc{display:none}}
@media (max-width:780px){
  .nav-toggle{display:inline-flex;position:relative}
  .head-actions .btn{min-height:40px;padding:.5rem .9rem;font-size:.88rem;white-space:nowrap}
  .hm-loc{display:none}
  /* The panel is positioned, so opening it never reflows the sticky header.
     visibility (not display) so the fade can run and so it stays untabbable
     while closed. */
  .site-nav{
    position:absolute;top:100%;left:0;right:0;margin:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:.25rem clamp(1rem,3vw,2.75rem) .9rem;
    background:var(--paper);border-bottom:1px solid var(--transfer);
    box-shadow:0 18px 40px rgb(11 11 10 / .28);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity 200ms var(--ease),transform 200ms var(--ease),visibility 200ms}
  .site-nav.open{opacity:1;visibility:visible;transform:none}
  .site-nav a{padding:.9rem .1rem;font-size:1.05rem;color:var(--carbon);
    border-bottom:1px solid var(--transfer)}
  .site-nav a:last-child{border-bottom:0}
}
@media (max-width:780px) and (prefers-reduced-motion:reduce){
  .site-nav{transition:none;transform:none}
  .nav-bars,.nav-bars::before,.nav-bars::after{transition:none}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:47px;padding:.72rem 1.35rem;border:0;border-radius:0;
  text-decoration:none;font-weight:650;font-size:.98rem;
  background:var(--stencil);color:var(--flash);
  transition:background-color 140ms ease}
.btn:hover{background:var(--stencil-deep)}
.btn-carbon{background:var(--carbon);color:var(--paper)}
.btn-carbon:hover{background:#242220}
.btn-line{background:transparent;color:var(--carbon);box-shadow:inset 0 0 0 1px var(--carbon)}
.btn-line:hover{background:var(--flash)}
.text-link{text-underline-offset:.3em;font-weight:500}

/* ---------- hero : the seam ---------- */
.hero{min-height:calc(100svh - 92px);position:relative;isolation:isolate;
  background:var(--paper);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start}
.hero-image{position:absolute;inset:0 0 0 58%;overflow:hidden;background:var(--carbon);z-index:1}
.hero-image img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.hero-copy{width:min(36rem,54vw);position:relative;z-index:3;
  padding:clamp(2rem,7vh,5.5rem) 2.5rem 2rem clamp(1.25rem,5vw,5.5rem)}
.hero-descriptor{font-size:clamp(1.05rem,1.55vw,1.45rem);line-height:1.4;max-width:26ch;
  font-weight:500}
/* Her single biggest differentiator, and it used to sit here as the dimmest,
   smallest line in the hero — ranked below the Google rating. Promoted by weight
   and space only: the two facts carry the b-accent (house device, same as
   .hero-proof), and the line gets real air above it so it reads as its own claim
   instead of a third line of the descriptor. A rule was tried here and removed —
   a hairline on carbon is invisible at this width, and it chopped the hero stack
   into pieces for no gain. */
/* No max-width: at 32ch this wrapped and orphaned the em-dash onto line two.
   It fits the hero column on one line, and where it can't, text-wrap:pretty
   (global on p) breaks it sensibly. */
.hero-studio{margin-top:1.5rem;
  font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.5;color:var(--graphite)}
/* nowrap so a phone breaks BETWEEN the two facts rather than through one of
   them — "one / client a day" split across lines otherwise. */
.hero-studio b{color:var(--carbon);font-weight:650;white-space:nowrap}
.hero-language{margin-top:.7rem;color:var(--graphite);font-size:.95rem}
.hero-proof{margin-top:1.8rem;font-size:.92rem;color:var(--graphite)}
.hero-proof b{color:var(--carbon);font-weight:650}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:1.1rem;margin-top:1.6rem}
.wordmark{position:absolute;left:clamp(1.25rem,5vw,5.5rem);bottom:clamp(2.25rem,7vh,5rem);
  z-index:2;font-family:var(--display);font-weight:400;
  font-size:clamp(3rem,7.6vw,8.4rem);line-height:.92;letter-spacing:-.025em;
  text-transform:uppercase;white-space:nowrap;pointer-events:none}
.wordmark span{display:block}
.wordmark span:last-child{margin-left:clamp(0rem,6vw,7rem)}
.wordmark-clip{position:absolute;inset:0;z-index:4;pointer-events:none;
  clip-path:inset(0 0 0 58%)}
.wordmark-light{color:var(--paper)}
.seam{width:2px;position:absolute;inset:0 auto 0 58%;z-index:5;
  background:linear-gradient(to bottom,var(--stencil) 0 26%,transparent 26%)}
.js .hero-image{clip-path:inset(0 0 0 100%);transition:clip-path 700ms var(--ease) 80ms}
.js .hero.in .hero-image{clip-path:inset(0)}
@media (max-width:820px){
  .hero{min-height:0;background:var(--carbon);display:block}
  .hero-image{position:relative;inset:auto;aspect-ratio:736/1290;max-height:76svh}
  .hero-image img{object-position:50% 30%}
  .wordmark{position:absolute;left:1rem;right:1rem;top:1.1rem;bottom:auto;
    color:var(--paper);font-size:clamp(2rem,9.4vw,3.4rem);line-height:1.04;white-space:normal;
    text-shadow:0 0 22px rgba(11,11,10,.55)}
  .wordmark span:last-child{margin-left:0}
  .wordmark-clip,.seam{display:none}
  .hero-copy{width:auto;padding:1.4rem 1.1rem 1.9rem;background:var(--paper)}
  .js .hero-image{clip-path:inset(0);transition:none}
}

/* ---------- section scaffolding ---------- */
.section{padding:clamp(3.4rem,9vw,7.5rem) clamp(1rem,4vw,4.5rem)}
.section-inner{max-width:1240px;margin-inline:auto}
.section-title{font-family:var(--display);font-weight:400;letter-spacing:-.025em;
  text-transform:uppercase;font-size:clamp(1.7rem,4.2vw,3.4rem);line-height:1.02}
.section-lede{color:var(--graphite);max-width:56ch;margin-top:1rem;font-size:1.05rem}

/* ---------- the proof wall ---------- */
.movement{margin-top:clamp(2.8rem,6vw,4.8rem)}
.movement-label{font-family:var(--display);font-size:.82rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--graphite);
  border-bottom:1px solid var(--carbon);padding-bottom:.5rem;margin-bottom:clamp(1.4rem,3vw,2.4rem);
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.movement-label i{font-family:var(--reading);font-style:italic;font-size:.85rem;
  letter-spacing:0;text-transform:none;font-weight:400}
.wall{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(1rem,2.8vw,3rem);align-items:start}
.work{position:relative}
.aperture{position:relative;overflow:hidden;background:var(--carbon)}
.aperture img{width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--ease)}
.work:hover img,.work:focus-within img{transform:scale(1.025)}
.work figcaption{padding-top:.75rem;display:flex;justify-content:space-between;gap:1rem;
  border-top:1px solid var(--carbon);font-size:.8rem;line-height:1.45;color:var(--carbon)}
.full-frame{padding:.2rem 0;border:0;background:transparent;color:var(--graphite);
  text-decoration:underline;text-underline-offset:.25em;cursor:pointer;white-space:nowrap;font-size:.8rem}
.full-frame:hover{color:var(--carbon)}
/* movement grid placements */
.m1 .work:nth-child(1){grid-column:1/span 5}
.m1 .work:nth-child(1) .aperture{aspect-ratio:3/4}
.m1 .work:nth-child(2){grid-column:6/span 4;margin-top:9vw}
.m1 .work:nth-child(2) .aperture{aspect-ratio:3/4}
.m1 .work:nth-child(3){grid-column:10/span 3;margin-top:3.5vw}
.m1 .work:nth-child(3) .aperture{aspect-ratio:2/3}
.m2 .work:nth-child(1){grid-column:1/span 4;margin-top:1vw}
.m2 .work:nth-child(1) .aperture{aspect-ratio:9/16}
.m2 .work:nth-child(2){grid-column:5/span 5;margin-top:7vw}
.m2 .work:nth-child(2) .aperture{aspect-ratio:3/4}
.m2 .work:nth-child(3){grid-column:10/span 3;margin-top:2.5vw}
.m2 .work:nth-child(3) .aperture{aspect-ratio:2/3}
.m3 .work:nth-child(1){grid-column:1/span 3;margin-top:2vw}
.m3 .work:nth-child(1) .aperture{aspect-ratio:2/3}
.m3 .work:nth-child(2){grid-column:4/span 4}
.m3 .work:nth-child(2) .aperture{aspect-ratio:9/16}
.m3 .work:nth-child(3){grid-column:8/span 5;margin-top:6vw}
.m3 .work:nth-child(3) .aperture{aspect-ratio:4/5}
/* aperture scroll: opens laterally as a contact slit (visible by default; js-gated) */
.js .work.waiting .aperture{clip-path:inset(0 42%)}
.js .work .aperture{clip-path:inset(0);transition:clip-path 900ms var(--ease)}
.wall-note{margin-top:2.4rem;color:var(--graphite);font-size:.92rem}
@media (max-width:820px){
  .wall{display:block}
  .wall .work{width:88vw;max-width:520px;margin:0 0 3.4rem}
  .wall .work:nth-child(even){margin-left:auto;width:82vw}
  .wall .work:nth-child(3){width:92vw}
  .wall .work .aperture{aspect-ratio:3/4}
  .wall .work:nth-child(even) .aperture{aspect-ratio:9/14}
}

/* full-frame dialog */
.lightbox{width:min(92vw,30rem);max-height:94svh;padding:0;border:0;border-radius:0;
  background:var(--carbon);color:var(--paper);margin:auto}
.lightbox::backdrop{background:rgb(11 11 10 / .88)}
.lightbox img{width:100%;max-height:82svh;object-fit:contain}
.lightbox-bar{padding:.75rem 1rem;display:flex;justify-content:space-between;gap:1rem;
  font-size:.88rem;align-items:center}
.lightbox-bar button{border:0;background:transparent;color:inherit;font-size:.95rem;
  text-decoration:underline;text-underline-offset:.25em}

/* ---------- pull quote (carbon band) ---------- */
.pullquote{background:var(--carbon);color:var(--paper)}
.pullquote blockquote{max-width:920px;margin-inline:auto;text-align:left;
  padding:clamp(1rem,3vw,2rem) 0}
.pullquote p{font-size:clamp(1.4rem,3.4vw,2.5rem);line-height:1.32;font-weight:350}
.pullquote footer{margin-top:1.4rem;color:var(--paper-dim);font-size:.92rem}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(1.8rem,5vw,4.5rem);align-items:center}
.about-grid figure{background:var(--carbon);aspect-ratio:3/4;overflow:hidden}
.about-grid figure img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.about-copy p+p{margin-top:1.1rem}
.about-copy .pt-line{margin-top:1.6rem;font-style:italic;color:var(--graphite)}
@media (max-width:820px){.about-grid{grid-template-columns:1fr}
  .about-grid figure{max-width:400px}}

/* ---------- reviews ---------- */
.reviews-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.reviews-score{font-weight:650;font-size:1rem}
.review-list{margin-top:clamp(1.4rem,3vw,2.4rem);max-width:860px}
.review{padding:1.6rem 0;border-top:1px solid var(--transfer)}
.review:last-child{border-bottom:1px solid var(--transfer)}
.review p{max-width:68ch}
.review footer{margin-top:.7rem;font-size:.88rem;color:var(--graphite)}
.review footer b{color:var(--carbon);font-weight:650}

/* ---------- process ---------- */
.steps{max-width:860px}
.step{display:grid;grid-template-columns:4.6rem 1fr;gap:1.2rem;
  padding:1.6rem 0;border-top:1px solid var(--transfer);align-items:baseline}
.step-no{font-weight:650;font-size:1.05rem;color:var(--graphite);letter-spacing:.06em}
.step h3{font-size:1.18rem;font-weight:650;margin-bottom:.35rem}
.step p{color:var(--graphite);max-width:58ch}
@media (max-width:560px){.step{grid-template-columns:2.9rem 1fr;gap:.8rem}}

/* ---------- the private studio ----------
   Deliberately the airiest block on the page: a hairline "room" with one
   statement standing in a lot of space. The layout is the argument — where the
   proof wall is dense, this is quiet. Do not crowd it. */
/* This section has no top padding, so unlike the other nav targets it would land
   under the sticky header. Header is ~3.9rem + breathing room. */
#studio{scroll-margin-top:5.5rem}
.studio-room{border:1px solid var(--transfer);padding:clamp(1.6rem,5vw,4.2rem)}
.studio-eyebrow{font-family:var(--display);font-size:.82rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--graphite)}
.studio-statement{font-size:clamp(2rem,6vw,4.4rem);line-height:1.0;max-width:15ch;
  margin-top:clamp(1.5rem,4vw,3rem)}
.studio-statement em{font-style:normal;color:var(--stencil)}
.studio-copy{margin-top:clamp(1.6rem,3.5vw,2.6rem);max-width:58ch}
.studio-copy p+p{margin-top:1.1rem}
.studio-copy .pt-line{margin-top:1.4rem;font-style:italic;color:var(--graphite)}
.studio-facts{list-style:none;margin-top:clamp(2.2rem,5vw,3.6rem);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,3vw,2.4rem)}
.studio-facts li{border-top:1px solid var(--transfer);padding-top:1rem}
.studio-facts b{display:block;font-weight:650;font-size:1rem}
.studio-facts span{display:block;margin-top:.4rem;color:var(--graphite);font-size:.95rem}
@media (max-width:720px){.studio-facts{grid-template-columns:1fr;gap:1.1rem}}

/* ---------- the work ring (3D coverflow) ----------
   Aaron's call 2026-07-30: the stacked wall was ~2250px of scroll on its own.
   Cards sit on a perspective stage; the focused one is dead flat and full size —
   deliberately NOT a true geometric ring, because on a real ring the front card
   is turned and shrunk by the projection, and this is a realism artist whose
   whole case is fine detail. So: front card flat and unskewed, neighbours angled
   away to give the depth. object-fit is CONTAIN, not cover: these come from D1
   at mixed aspect ratios with no per-image art direction available, and cropping
   a face or a signature to fill a box is not a trade worth making. */
.ring{--card-h:clamp(21rem,54vh,32rem);--card-w:calc(var(--card-h) * .75);
  margin-top:clamp(1.6rem,4vw,2.6rem)}
.ring-stage{
  position:relative;height:var(--card-h);
  perspective:1500px;perspective-origin:50% 50%;
  cursor:grab;touch-action:pan-y;
  -webkit-user-select:none;user-select:none}
.ring-stage.dragging{cursor:grabbing}
.ring-stage:focus-visible{outline:3px solid var(--stencil);outline-offset:6px}
/* pointer-events:none is load-bearing, not tidying. Side cards sit at negative
   translateZ, which puts them BEHIND this element's own plane at z=0 — and since
   3D hit-testing follows paint order, this full-size box then swallowed every
   click meant for them. Measured: only the front card was hittable anywhere on
   the stage. The cards re-enable pointers themselves (see index.html), and empty
   stage area still reaches .ring-stage for dragging. */
.ring-spin{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
/* Fixed HEIGHT, natural width. Her photos arrive from D1 at mixed aspect ratios
   (some near 0.46, some 0.75), so a uniform box either crops her art or frames it
   in a slab of black — the first version letterboxed the front piece badly. Cards
   sized to their own image do neither, and prints of differing widths hung at one
   height is what a real gallery wall looks like anyway. index.html re-renders on
   image load, since intrinsic width is unknown until then. */
.ring-card{
  position:absolute;top:0;left:50%;margin:0;
  height:var(--card-h);width:auto;
  transform-style:preserve-3d;
  will-change:transform,opacity;
  transition:transform 620ms var(--ease),opacity 620ms var(--ease)}
.ring-face{
  display:block;height:100%;width:auto;padding:0;border:0;
  background:#111110;overflow:hidden;
  -webkit-tap-highlight-color:transparent}
.ring-face img{height:100%;width:auto;max-width:none;display:block}
/* Only the front card is a real target; the rest are scenery until they arrive. */
.ring-card[data-front="false"] .ring-face{cursor:pointer}
.ring-card[data-front="true"] .ring-face{box-shadow:0 34px 70px rgb(0 0 0 / .55)}
.ring-face:focus-visible{outline:3px solid var(--stencil);outline-offset:3px}

/* capped and centred, or the flexible caption throws the arrows out to the far
   edges of a wide page, miles from the thing they control */
.ring-hud{display:flex;align-items:center;justify-content:center;
  gap:clamp(.8rem,2.5vw,1.6rem);margin-top:clamp(1.2rem,3vw,1.9rem);
  max-width:34rem;margin-inline:auto}
.ring-cap{min-width:0;flex:1 1 auto;text-align:center;font-size:.98rem;
  color:var(--graphite);line-height:1.4}
.ring-cap b{display:block;font-weight:650;font-size:1.02rem;color:var(--carbon)}
.ring-nav{flex:0 0 auto;width:46px;height:46px;padding:0;border:0;
  background:transparent;color:var(--graphite);font-size:1.9rem;line-height:1;
  transition:color 200ms var(--ease)}
.ring-nav:hover{color:var(--carbon)}
.ring-dots{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;
  margin-top:clamp(.9rem,2vw,1.2rem)}
.ring-dot{width:1.5rem;height:2px;padding:0;border:0;background:var(--transfer);
  transition:background 350ms var(--ease),transform 350ms var(--ease)}
.ring-dot:hover{background:var(--graphite)}
.ring-dot[aria-current="true"]{background:var(--stencil);transform:scaleY(2.5)}

@media (max-width:720px){
  .ring{--card-w:min(70vw,19rem);--card-h:calc(var(--card-w) / .75)}
  .ring-stage{perspective:1000px}
  .ring-nav{width:42px;height:42px}
}
/* Without JS the cards never get positioned, so un-stack them into a plain
   column rather than leaving nine absolute cards piled on one spot. */
body:not(.js) .ring-stage{height:auto;perspective:none}
body:not(.js) .ring-spin{position:static}
body:not(.js) .ring-card{position:static;margin:0 auto 1.5rem;transform:none}
body:not(.js) .ring-hud,body:not(.js) .ring-dots{display:none}
@media (prefers-reduced-motion:reduce){
  .ring-card,.ring-dot,.ring-nav{transition:none}
}

/* ---------- the room sweep ----------
   Her six studio photos, panned left to right across one small room. The plates
   bleed to the panel border (negative margin cancels .studio-room padding) so the
   panel reads as a window frame, and the strip runs off the right edge to say
   there is more room to pan. The 1px seam between plates is deliberate: these
   were shot from different standing positions, so they cannot be stitched into a
   true panorama, and an honest strip beats a broken seam. Native overflow scroll
   does the panning, so trackpad, touch, arrow keys and Tab all work for free;
   pointer-drag is layered on top for mouse users only. */
/* Square plates, not the source 3:4. The photos carry a lot of ceiling tile and
   epoxy floor that the room does not need, and squaring them puts ~2.4 plates in
   view instead of 3.5 — big enough to read as a room rather than a thumbnail row,
   and the strip as a whole then reads landscape. */
.room{--plate-h:clamp(19rem,56vh,34rem);--plate-w:var(--plate-h);
  margin-top:clamp(2.4rem,5vw,3.8rem)}
.room-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;margin-bottom:clamp(1rem,2.4vw,1.6rem)}
.room-title{font-size:clamp(1.05rem,2.1vw,1.4rem);line-height:1.15}
.room-lede{margin-top:.5rem;color:var(--graphite);font-size:.98rem;max-width:42ch}
/* The hint teaches the affordance, then gets out of the way for good once the
   visitor has panned even once (.panned is set on first interaction). It fades on
   opacity only — never an animated height, which would thrash layout — and
   index.html then pulls it out of flow, so on a phone, where it wraps to its own
   row, it does not leave an empty row behind. */
.room-hint{color:var(--graphite);font-size:.88rem;white-space:nowrap;
  transition:opacity 450ms var(--ease)}
.room-hint::before{content:"↔";margin-right:.45em}
.room.panned .room-hint{opacity:0}
/* "Drag" for a mouse, "Swipe" for a finger — the second span wins on touch. */
.room-hint span+span{display:none}
@media (hover:none){
  .room-hint span{display:none}
  .room-hint span+span{display:inline}
}

.room-strip{
  /* position:relative makes this the offsetParent for the plates, so plate
     offsetLeft shares a coordinate space with scrollLeft — the current-view
     maths in index.html depends on it. */
  position:relative;
  margin-inline:calc(clamp(1.6rem,5vw,4.2rem) * -1);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  background:var(--carbon);
  cursor:grab;
  /* Soft edge where the strip continues, so a half-scrolled plate and its label
     dissolve instead of being sliced mid-word — and it says "there is more this
     way". The two widths are driven from index.html as you reach either end. */
  --fade-l:0px;--fade-r:5rem;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fade-l),
    #000 calc(100% - var(--fade-r)),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 var(--fade-l),
    #000 calc(100% - var(--fade-r)),transparent 100%)}
.room-strip::-webkit-scrollbar{display:none}
.room-strip.dragging{cursor:grabbing}
/* Snap has to be off while a drag or the intro pan is driving scrollLeft, or the
   snap engine fights the assignment. */
.room-strip.dragging,.room-strip.tweening{scroll-snap-type:none}
.room-strip:focus-visible{outline:3px solid var(--stencil);outline-offset:-3px}
/* 1px of track background shows between items as the seam, and it runs down
   through the label strip too, so the whole thing reads as a contact sheet. */
.room-track{display:flex;gap:1px;background:var(--transfer);width:max-content;
  user-select:none;-webkit-user-select:none}
/* snap-align:start, not center: the first item can actually reach the reading
   position without the track needing to be padded out with empty carbon. */
.plate-item{flex:0 0 auto;width:var(--plate-w);background:var(--carbon);
  scroll-snap-align:start}
.plate{
  position:relative;display:block;width:100%;padding:0;border:0;
  height:var(--plate-h);
  background:var(--carbon);overflow:hidden;
  -webkit-tap-highlight-color:transparent}
.plate img{width:100%;height:100%;object-fit:cover;
  transition:transform 700ms var(--ease)}
/* No dimming of the off-plates. These photos are already near-black, a scrim
   turns them to mud, and it is one continuous room — you should see all of it. */
.room-strip:not(.dragging) .plate:hover img{transform:scale(1.035)}
.plate:focus-visible{outline:3px solid var(--stencil);outline-offset:-3px}
/* Every view carries its own label, so all 2-3 plates in shot are named at once —
   a single rolling caption could not say which of them it meant. Each one leads
   with the reason it matters to someone deciding whether to book, then the detail
   that backs it up; same b + span pattern as .studio-facts above. */
.plate-cap{padding:.9rem clamp(.7rem,1.6vw,1.05rem) 1.15rem}
.plate-cap b{display:block;font-weight:650;font-size:.98rem;line-height:1.3;
  color:var(--carbon)}
.plate-cap span{display:block;margin-top:.4rem;font-size:.89rem;line-height:1.45;
  color:var(--graphite)}

.room-foot{margin-top:clamp(1rem,2.2vw,1.4rem)}
/* The scale is a field-of-view readout, not decoration: one segment per view, and
   every segment currently on screen is lit — so it says where in the room you are
   looking and how much of it you can see. */
.room-scale{display:flex;gap:6px;align-items:center}
.room-tick{width:1.6rem;height:2px;padding:0;border:0;background:var(--transfer);
  transition:background 400ms var(--ease),transform 400ms var(--ease)}
.room-tick:hover{background:var(--graphite)}
.room-tick[data-inview="true"]{background:var(--stencil);transform:scaleY(2.5)}

@media (max-width:720px){
  /* On a phone the plate has to be sized off the viewport WIDTH, not the height —
     a square plate driven by 56vh came out wider than the strip, so no single view
     of the room was ever fully visible. Back to the source 3:4 portrait here.
     At 80vw with snap-align:start the focused photo sat hard against the left
     edge with all the slack on one side, which read as "not centred, almost cut
     off"; 74vw + centre snap puts an even sliver of the neighbouring view on both
     sides. index.html pads the track so views 1 and 5 can reach the middle too. */
  .room{--plate-w:min(74vw,21rem);--plate-h:calc(var(--plate-w) * 4 / 3)}
  .plate-item{scroll-snap-align:center}
  .room-head{align-items:flex-start}
  .room-hint{font-size:.82rem}
  .plate-cap b{font-size:.94rem}
  .plate-cap span{font-size:.86rem}
}
@media (prefers-reduced-motion:reduce){
  .plate img,.room-hint,.room-tick{transition:none}
  .room-strip:not(.dragging) .plate:hover img{transform:none}
  .room-tick[data-inview="true"]{transform:none;height:4px}
}

/* ---------- waiver callout ---------- */
.waiver-callout{background:var(--carbon);color:var(--paper);
  padding:clamp(2rem,5vw,3.4rem);display:grid;grid-template-columns:1fr auto;
  gap:1.8rem;align-items:center;max-width:1080px;margin-inline:auto}
.waiver-callout h2{font-family:var(--display);font-weight:400;letter-spacing:-.02em;
  text-transform:uppercase;font-size:clamp(1.35rem,3vw,2.1rem);line-height:1.05}
.waiver-callout p{color:var(--paper-dim);margin-top:.8rem;max-width:50ch}
@media (max-width:720px){.waiver-callout{grid-template-columns:1fr}}

/* ---------- visit / contact ---------- */
.visit-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start}
.visit-facts{display:grid;gap:1.6rem;align-content:start}
.visit-facts h3{font-weight:650;font-size:.95rem;letter-spacing:.02em;
  text-transform:uppercase;margin-bottom:.4rem}
.visit-facts p{color:var(--graphite)}
.visit-facts a{color:var(--carbon)}
@media (max-width:820px){.visit-grid{grid-template-columns:1fr}}

/* form */
.form{display:grid;gap:1.1rem;margin-top:1.8rem}
.form label{display:grid;gap:.4rem;font-size:.9rem;font-weight:500;color:var(--graphite)}
.form input,.form select,.form textarea{
  background:var(--flash);border:1px solid var(--transfer);border-radius:0;
  color:var(--carbon);padding:.72rem .85rem;font:inherit;font-size:1rem;width:100%}
.form input::placeholder,.form textarea::placeholder{color:#6d6a64}
.form input:focus,.form select:focus,.form textarea:focus{outline:3px solid var(--stencil);outline-offset:0;border-color:transparent}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:560px){.form-row{grid-template-columns:1fr}}
.form-note{font-size:.88rem;color:var(--graphite)}
.notice{display:none;background:var(--flash);border:1px solid var(--carbon);
  padding:1rem 1.1rem;font-size:.95rem}
.notice.show{display:block}

/* ---------- footer ---------- */
.site-foot{background:var(--carbon);color:var(--paper-dim);
  padding:3rem clamp(1rem,4vw,4.5rem) 7.5rem;font-size:.92rem}
.foot-inner{max-width:1240px;margin-inline:auto;display:grid;gap:1.6rem}
.foot-top{display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;align-items:baseline}
.foot-mark{font-family:var(--display);font-size:1rem;letter-spacing:0;
  text-transform:uppercase;color:var(--paper)}
.site-foot a{color:var(--paper-dim);text-decoration:none}
.site-foot a:hover{color:var(--paper)}
/* Social row. The glyphs are strokes so they sit at the same weight as the
   footer's hairlines rather than blobbing out as solid shapes; TikTok's mark only
   reads as itself when filled, so that one is the exception. */
/* Contact block: one channel per line, each with its own mark. Phone and
   WhatsApp are the two her clients actually reach for, so they must be
   identifiable at a glance rather than three near-identical text links. */
.contact-lines{display:flex;flex-direction:column;gap:.55rem;align-items:flex-start}

/* Same glyph inline in running UI (the hero action row), where the handle alone
   was invisible among the words around it. */
.social-inline{display:inline-flex;align-items:center;gap:.45rem}
.social-inline svg{width:18px;height:18px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.social-inline .sf-dot{fill:currentColor;stroke:none}

.foot-social{display:flex;gap:clamp(1.1rem,3vw,2.2rem);flex-wrap:wrap;align-items:center}
.foot-social a{display:inline-flex;align-items:center;gap:.55rem;
  font-size:.92rem;min-height:44px}
.foot-social svg{width:20px;height:20px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform 240ms var(--ease)}
.foot-social .sf-dot{fill:currentColor;stroke:none}
.foot-social .sf-fill{fill:currentColor;stroke:none}
.foot-social a:hover svg{transform:translateY(-2px)}
.foot-social i{font-style:normal;opacity:.62;font-size:.85em}
@media (prefers-reduced-motion:reduce){.foot-social a:hover svg{transform:none}}
@media (max-width:560px){
  .foot-social{gap:.35rem 1.4rem;flex-direction:column;align-items:flex-start}
}
.footer-credit{display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid rgba(243,243,240,.3);border-radius:999px;padding:.45rem .95rem;font-size:.8rem}
.footer-credit img{width:18px;height:16px}

/* ---------- reveal (soft, sections only) ---------- */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(14px);
  transition:opacity .65s var(--ease),transform .65s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .js .reveal{opacity:1;transform:none}
  .js .work.waiting .aperture{clip-path:inset(0)}
  .js .hero-image{clip-path:inset(0)}
}

/* =========================================================
   WAIVER — the consent record
   ========================================================= */
.waiver-wrap{max-width:720px;margin-inline:auto;
  padding:clamp(1.6rem,5vw,3.6rem) clamp(1rem,4vw,2.2rem) 7rem}
.waiver-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;flex-wrap:wrap}
.waiver-head h1{font-family:var(--display);font-weight:400;letter-spacing:-.02em;
  text-transform:uppercase;font-size:clamp(1.5rem,4.4vw,2.4rem);line-height:1.05}
.waiver-head>p{color:var(--graphite);margin-top:.8rem;max-width:56ch}
.lang-toggle{display:flex;border:1px solid var(--carbon)}
.lang-toggle button{background:transparent;border:0;padding:.45rem .9rem;font-weight:650;
  font-size:.88rem;color:var(--graphite)}
.lang-toggle button[aria-pressed="true"]{background:var(--carbon);color:var(--paper)}

/* stencil progress rail */
.rail{display:flex;gap:.4rem;margin:2rem 0 1.6rem}
.rail span{height:3px;flex:1;background:var(--transfer);transition:background-color .4s ease}
.rail span.active{background:var(--stencil)}
.rail span.done{background:var(--carbon)}
.rail-label{font-size:.85rem;color:var(--graphite);margin-bottom:1.4rem}

.doc{background:var(--flash);border:1px solid var(--transfer);
  padding:clamp(1.3rem,4vw,2.4rem)}
.doc-step{display:none}
.doc-step.current{display:block}
.doc-step h2{font-family:var(--display);font-weight:400;font-size:1.05rem;
  letter-spacing:.02em;text-transform:uppercase;margin-bottom:.5rem}
.doc-step .step-why{color:var(--graphite);font-size:.95rem;margin-bottom:1.4rem;max-width:58ch}
.doc-step .form{margin-top:0}
.hs-row{display:grid;grid-template-columns:1fr auto;gap:.6rem 1.2rem;align-items:center;
  padding:.9rem 0;border-top:1px solid var(--transfer);border-inline:0;border-bottom:0;min-inline-size:0}
.hs-row legend{display:contents}
.hs-row p{font-size:.98rem;max-width:52ch}
.hs-row .yn{display:flex;border:1px solid var(--transfer)}
.hs-row .yn label{display:block}
.hs-row .yn input{position:absolute;opacity:0;pointer-events:none}
.hs-row .yn span{display:inline-block;padding:.4rem .95rem;font-size:.9rem;font-weight:500;
  color:var(--graphite);cursor:pointer}
.hs-row .yn input:checked+span{background:var(--carbon);color:var(--paper)}
.hs-row .yn input:focus-visible+span{outline:3px solid var(--stencil);outline-offset:-3px}
.hs-detail{grid-column:1/-1;display:none}
.hs-detail.show{display:block}
.consent-group{padding:1.15rem 0;border-top:1px solid var(--transfer);
  display:grid;grid-template-columns:1fr 5rem;gap:.4rem 1.2rem}
.consent-group h3{font-size:1rem;font-weight:650;grid-column:1}
.consent-group p{font-size:.95rem;color:var(--graphite);max-width:56ch}
.consent-group details{grid-column:1;font-size:.9rem;color:var(--graphite)}
.consent-group details summary{cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
.consent-group details p{margin-top:.5rem}
.consent-group .ini{grid-column:2;grid-row:1/span 3;align-self:start;
  display:grid;gap:.3rem;font-size:.75rem;color:var(--graphite);text-align:center}
.consent-group .ini input{width:100%;text-align:center;text-transform:uppercase;
  background:var(--flash);border:1px solid var(--carbon);color:var(--carbon);
  padding:.55rem .2rem;font-family:var(--display);font-size:.95rem;letter-spacing:.08em}
.sig-pad{background:var(--flash);border:1px solid var(--carbon);width:100%;
  touch-action:none;display:block;cursor:crosshair}
.sig-pad.settled{border-color:var(--transfer)}
.sig-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:.5rem;flex-wrap:wrap}
.sig-row small{color:var(--graphite);font-size:.85rem}
.sig-clear{background:none;border:0;color:var(--graphite);text-decoration:underline;
  text-underline-offset:.2em;font-size:.88rem}
.review-box{border:1px solid var(--transfer);padding:1rem 1.2rem;margin-bottom:1.4rem;
  font-size:.95rem;display:grid;gap:.35rem}
.review-box b{font-weight:650}
.review-box .edit{color:var(--stencil);font-weight:500;text-decoration:underline;
  text-underline-offset:.2em;background:none;border:0;justify-self:start;font-size:.88rem}
.doc-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:2rem;flex-wrap:wrap}
.doc-nav .back{background:none;border:0;color:var(--graphite);text-decoration:underline;
  text-underline-offset:.25em;font-size:.95rem}
.field-error{color:var(--alert);font-size:.88rem;display:none;margin-top:.4rem}
.field-error.show{display:block}
.demo-note{background:var(--paper);border:1px solid var(--carbon);padding:.9rem 1rem;
  font-size:.88rem;margin-bottom:1.6rem}
.demo-note b{font-weight:650}

/* dob typed fields */
.dob-group{display:grid;gap:.4rem}
.dob-label{font-size:.9rem;font-weight:500;color:var(--graphite)}
.dob-fields{display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:.7rem}
.dob-fields label{display:grid;gap:.3rem;font-size:.75rem;font-weight:500;color:var(--graphite)}
.dob-fields input{text-align:center}

/* confirmation */
.record{display:none;background:var(--carbon);color:var(--paper);
  padding:clamp(2rem,6vw,3.4rem);text-align:center;margin-top:2rem}
.record.show{display:block}
.record .seal{width:80px;height:80px;margin:0 auto 1.4rem;border:1.5px solid var(--paper);
  border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-size:1.3rem;letter-spacing:.04em;transform:rotate(-7deg)}
.record h2{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:1.4rem;letter-spacing:0}
.record .rec-no{font-family:var(--display);font-size:1rem;color:var(--stencil-tint);
  letter-spacing:.12em;margin-top:.9rem}
.record p{color:var(--paper-dim);margin-top:1rem;max-width:48ch;margin-inline:auto;font-size:.98rem}
.record a{color:var(--paper)}

/* =========================================================
   DASHBOARD — one noun: Waivers
   ========================================================= */
body.dash{background:var(--paper)}
.dash-login{min-height:78vh;display:grid;place-items:center;padding:2rem 1rem}
.login-card{width:min(94vw,400px);background:var(--flash);border:1px solid var(--transfer);
  padding:2.2rem}
.login-card h1{font-family:var(--display);font-weight:400;font-size:1.15rem;
  text-transform:uppercase;letter-spacing:0;margin-bottom:.4rem}
.login-card>p{color:var(--graphite);font-size:.9rem;margin-bottom:1.5rem}
.dash-shell{display:none;max-width:960px;margin-inline:auto;
  padding:1.2rem clamp(.8rem,3vw,2rem) 7.5rem}
.dash-shell.show{display:block}
.dash-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding-bottom:1rem;border-bottom:1px solid var(--carbon);margin-bottom:1.2rem}
.dash-top h1{font-family:var(--display);font-weight:400;font-size:1.05rem;
  text-transform:uppercase;letter-spacing:0}
.dash-top .top-actions{display:flex;gap:1rem;align-items:center;font-size:.9rem}
.dash-top button{background:none;border:0;color:var(--graphite);text-decoration:underline;
  text-underline-offset:.25em;font-size:.9rem}
.share-bar{position:sticky;top:0;z-index:var(--z-sticky);display:flex;gap:.8rem;align-items:center;
  background:var(--paper);padding:.6rem 0 1rem;flex-wrap:wrap}
.share-bar input[type="search"]{flex:1;min-width:180px;background:var(--flash);
  border:1px solid var(--transfer);padding:.68rem .9rem;font:inherit;font-size:.98rem;color:var(--carbon)}
.share-bar input:focus{outline:3px solid var(--stencil);outline-offset:0}
.wv-list{border-top:1px solid var(--carbon)}
.wv-row{display:grid;grid-template-columns:1fr auto;gap:.15rem 1rem;text-align:left;width:100%;
  background:none;border:0;border-bottom:1px solid var(--transfer);
  padding:1rem .2rem;color:inherit;font:inherit}
.wv-row:hover{background:var(--flash)}
.wv-row .nm{grid-column:1;grid-row:1;font-weight:650;font-size:1.02rem}
.wv-row .mt{grid-column:1;grid-row:2;color:var(--graphite);font-size:.86rem}
.wv-row .chip{grid-column:2;align-self:center;grid-row:1/3;font-size:.78rem;font-weight:650;
  border:1px solid var(--carbon);border-radius:999px;padding:.28rem .8rem;color:var(--carbon)}
.wv-row .chip.new{border-color:var(--stencil);color:var(--stencil)}
.wv-row .chip.review{background:var(--carbon);color:var(--paper)}
.wv-empty{padding:2.4rem .2rem;color:var(--graphite)}
.wv-detail{border:0;padding:0;background:var(--flash);color:var(--carbon);
  width:min(96vw,540px);max-height:92svh;margin:auto}
.wv-detail::backdrop{background:rgb(11 11 10 / .55)}
.wv-detail-in{padding:1.8rem;display:grid;gap:1.15rem}
.wv-detail h2{font-family:var(--display);font-weight:400;font-size:1.15rem;
  text-transform:uppercase;letter-spacing:0}
.wv-detail .rec-tag{font-size:.82rem;letter-spacing:.1em;color:var(--stencil);
  font-family:var(--display)}
.wv-detail dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.2rem;font-size:.95rem}
.wv-detail dt{color:var(--graphite)}
.wv-detail details{border:1px solid var(--transfer);padding:.7rem .9rem;font-size:.92rem}
.wv-detail details summary{cursor:pointer;font-weight:650}
.wv-detail details .hs-answers{margin-top:.7rem;display:grid;gap:.4rem}
.wv-detail img.sig{background:var(--flash);border:1px solid var(--transfer);
  width:100%;max-height:110px;object-fit:contain}
.wv-detail-actions{display:flex;gap:1.1rem;justify-content:flex-end;flex-wrap:wrap;align-items:center}
.wv-detail-actions .text-btn{background:none;border:0;color:var(--graphite);
  text-decoration:underline;text-underline-offset:.25em;font-size:.92rem}
.dash-note{margin-top:1.8rem;font-size:.88rem;color:var(--graphite);max-width:68ch}
.toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%) translateY(16px);
  background:var(--carbon);color:var(--paper);padding:.8rem 1.3rem;
  font-weight:500;font-size:.95rem;opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);z-index:var(--z-toast)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}


/* print: isolate the waiver-detail record */
@media print{
  body.dash .concept-bar,body.dash .dash-shell,body.dash .dash-login,
  body.dash .toast,body.dash .cx-demo-badge{display:none!important}
  .wv-detail{position:static;width:100%;max-height:none;border:0}
  .wv-detail::backdrop{background:none}
  .wv-detail-actions{display:none}
}


/* =========================================================
   INK MODE — the public page goes carbon (Aaron: make it pop
   and read TATTOO). Waiver + dashboard stay paper: the studio
   is dark, the paperwork is daylight.
   ========================================================= */
body.ink{background:var(--carbon);color:var(--paper)}
.ink ::selection{background:var(--stencil);color:var(--flash)}
.ink .concept-bar{border-bottom:1px solid #2b2823}
.ink .site-head{background:color-mix(in srgb,#0b0b0a 86%,transparent);border-bottom:1px solid #242220}
.ink .site-nav a{color:var(--paper-dim)}
.ink .site-nav a:hover{color:var(--paper)}
.ink .nav-toggle{color:var(--paper)}
@media (max-width:780px){
  .ink .site-nav{background:#141311;border-bottom-color:#2c2925}
  .ink .site-nav a{color:var(--paper);border-bottom-color:#2c2925}
}
.ink .site-nav a.btn,.ink .site-nav a.btn:hover{color:var(--flash)}

/* hero: the piece melts into the page; the name owns the room */
.ink .hero{background:var(--carbon)}
.ink .hero-image{inset:0 0 0 44%;background:var(--carbon)}
.ink .hero-image img{object-position:50% 38%;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%);
          mask-image:linear-gradient(to right,transparent 0,#000 16%)}
.ink .hero-copy{color:var(--paper)}
.ink .hero-descriptor{color:var(--paper)}
.ink .hero-studio{color:var(--paper-dim)}
.ink .hero-studio b{color:var(--paper)}
.ink .hero-language{color:var(--paper-dim)}
.ink .hero-proof{color:var(--paper-dim)}
.ink .hero-proof b{color:var(--paper)}
.ink .text-link{color:var(--paper)}
.ink .wordmark{color:var(--paper);z-index:4;
  text-shadow:0 2px 40px rgba(11,11,10,.6)}
.ink .wordmark-clip{display:none}
.ink .seam{background:linear-gradient(to bottom,var(--stencil) 0 34%,transparent 34%);inset:0 auto 0 44%}
@media (max-width:820px){
  .ink .hero-copy{background:transparent}
  .ink .hero-image{position:relative;inset:auto}
  .ink .hero-image img{-webkit-mask-image:none;mask-image:none;object-position:50% 30%}
}

/* sections on carbon */
.ink .section-lede{color:#b5b2ab}
.ink .movement-label{color:var(--paper-dim);border-bottom-color:#3a3733}
.ink .work figcaption{color:var(--paper);border-top-color:#3a3733}
.ink .full-frame{color:#b5b2ab}
.ink .full-frame:hover{color:var(--paper)}
.ink .wall-note{color:#b5b2ab}
.ink .wall-note a{color:var(--paper)}

/* inverse pop moments */
.ink .pullquote{background:var(--paper);color:var(--carbon);border-block:0}
.ink .pullquote footer{color:var(--graphite)}
.ink .waiver-callout{background:var(--stencil);color:var(--flash)}
.ink .waiver-callout p{color:#e9e0f6}
.ink .waiver-callout .btn{background:var(--carbon);color:var(--paper)}
.ink .waiver-callout .btn:hover{background:#242220}

/* about / reviews / steps */
.ink .about-copy .pt-line{color:#b5b2ab}
.ink .review{border-top-color:#2c2925}
.ink .review:last-child{border-bottom-color:#2c2925}
.ink .review footer{color:#b5b2ab}
.ink .review footer b{color:var(--paper)}
.ink .reviews-score{color:var(--paper)}
/* the studio room. --stencil is too dark to read on carbon; the tint is the
   on-carbon variant of the same accent. */
.ink .studio-room{border-color:#2c2925}
.ink .studio-eyebrow{color:var(--paper-dim)}
.ink .studio-statement em{color:var(--stencil-tint)}
.ink .studio-copy .pt-line{color:#b5b2ab}
.ink .studio-facts li{border-top-color:#2c2925}
.ink .studio-facts b{color:var(--paper)}
.ink .studio-facts span{color:#b5b2ab}
/* Room sweep on carbon. The seam has to be lighter than the photos or it
   disappears into them, so it steps up from the panel hairline. */
.ink .ring-cap{color:#b5b2ab}
.ink .ring-cap b{color:var(--paper)}
.ink .ring-nav{color:#8d8a83}
.ink .ring-nav:hover{color:var(--paper)}
.ink .ring-dot{background:#3a3630}
.ink .ring-dot:hover{background:#6f6a61}
.ink .ring-dot[aria-current="true"]{background:var(--stencil-tint)}
.ink .room-title{color:var(--paper)}
.ink .room-lede,.ink .room-hint{color:#b5b2ab}
.ink .plate-cap b{color:var(--paper)}
.ink .plate-cap span{color:#b5b2ab}
.ink .room-track{background:#3a3630}
.ink .room-tick{background:#3a3630}
.ink .room-tick:hover{background:#6f6a61}
/* Must carry the .ink prefix too: .ink .room-tick and .room-tick[data-inview] have
   equal specificity, so the unprefixed lit rule loses to whichever comes last. */
.ink .room-tick[data-inview="true"]{background:var(--stencil-tint)}
.ink .step{border-top-color:#2c2925}
.ink .step-no{color:#b5b2ab}
.ink .step p{color:#b5b2ab}

/* visit + form */
.ink .visit-facts h3{color:var(--paper)}
.ink .visit-facts p{color:#b5b2ab}
.ink .visit-facts a{color:var(--paper)}
.ink .form label{color:var(--paper-dim)}
.ink .form input,.ink .form select,.ink .form textarea{
  background:#161412;border-color:#3a3733;color:var(--paper)}
.ink .form input::placeholder,.ink .form textarea::placeholder{color:#8a857c}
.ink .form-note{color:#b5b2ab}
.ink .form-note a{color:var(--paper)}
.ink .notice{background:#161412;border-color:var(--paper);color:#c9c7c1}
.ink .notice a{color:var(--paper)}
.ink .site-foot{border-top:1px solid #242220}


/* dynamic wall (production) — repeating 6-slot rhythm */
.wall-dyn .work:nth-child(6n+1){grid-column:1/span 5}
.wall-dyn .work:nth-child(6n+1) .aperture{aspect-ratio:3/4}
.wall-dyn .work:nth-child(6n+2){grid-column:6/span 4;margin-top:7vw}
.wall-dyn .work:nth-child(6n+2) .aperture{aspect-ratio:3/4}
.wall-dyn .work:nth-child(6n+3){grid-column:10/span 3;margin-top:3vw}
.wall-dyn .work:nth-child(6n+3) .aperture{aspect-ratio:2/3}
.wall-dyn .work:nth-child(6n+4){grid-column:1/span 4;margin-top:2vw}
.wall-dyn .work:nth-child(6n+4) .aperture{aspect-ratio:9/16}
.wall-dyn .work:nth-child(6n+5){grid-column:5/span 5;margin-top:6vw}
.wall-dyn .work:nth-child(6n+5) .aperture{aspect-ratio:3/4}
.wall-dyn .work:nth-child(6n){grid-column:10/span 3;margin-top:1.5vw}
.wall-dyn .work:nth-child(6n) .aperture{aspect-ratio:2/3}
@media (max-width:820px){
  .wall-dyn .work{width:88vw}
  .wall-dyn .work:nth-child(even){margin-left:auto;width:82vw}
}

/* consult availability chips */
.avail-row{display:flex;flex-wrap:wrap;gap:.6rem}
.avail input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.avail span{display:inline-block;border:1px solid var(--transfer);padding:.45rem 1rem;
  font-size:.9rem;font-weight:500;color:var(--graphite);cursor:pointer}
.ink .avail span{border-color:#3a3733;color:#b5b2ab}
.avail input:checked+span{background:var(--stencil);border-color:var(--stencil);color:var(--flash)}
.avail input:focus-visible+span{outline:3px solid var(--stencil);outline-offset:2px}