/* Metric-matched fallbacks. Unbounded is 27% wider than Arial, so when it
   swapped in the bottom-aligned hero copy changed height and jumped — 0.106 CLS.
   These make the fallback occupy exactly the same space.
   Regenerate with: python _scrape/font_metrics.py */
@font-face{font-family:"Unbounded Fallback";src:local("Arial"),local("Helvetica Neue"),local("Roboto"),local("Segoe UI");size-adjust:126.86%;ascent-override:78.83%;descent-override:19.71%;line-gap-override:0%}
@font-face{font-family:"Manrope Fallback";src:local("Arial"),local("Helvetica Neue"),local("Roboto"),local("Segoe UI");size-adjust:99.69%;ascent-override:107.33%;descent-override:30.09%;line-gap-override:0%}
@font-face{font-family:"Heebo Fallback";src:local("Arial"),local("Helvetica Neue"),local("Roboto"),local("Segoe UI");size-adjust:90.48%;ascent-override:116.05%;descent-override:46.42%;line-gap-override:0%}

/* ============ Dvorova Studio — design system ============ */
:root{
  --ink:#191310; --ink-2:#4a3f39; --ink-3:#7d6f66;
  --cream:#fbf8f5; --sand:#f2ebe4; --line:#e3d8ce;
  --clay:#a9765f; --clay-d:#8d5f4a; --clay-soft:#f0e0d7;
  --gold:#c2a06b; --beige:#c3ac93; --beige-ink:#2a1d13;
  --white:#fff; --wa:#25d366;

  --display:"Unbounded","Unbounded Fallback",-apple-system,sans-serif;
  --text:"Manrope","Manrope Fallback",-apple-system,"Segoe UI",Roboto,sans-serif;

  --t-hero:clamp(1.85rem,1.05rem + 3.1vw,3.5rem);
  --t-h1:clamp(1.7rem,1.1rem + 2.4vw,2.9rem);
  --t-h2:clamp(1.35rem,1.05rem + 1.5vw,2.15rem);
  --t-h3:clamp(1.02rem,.96rem + .42vw,1.25rem);
  --t-body:clamp(.98rem,.95rem + .16vw,1.075rem);
  --t-sm:.875rem; --t-xs:.75rem;

  --gap:clamp(1rem,.6rem + 1.6vw,2rem);
  --pad:clamp(1.25rem,.7rem + 2.4vw,3rem);
  --sec:clamp(3.4rem,2rem + 5.4vw,7rem);
  --wrap:78rem; --narrow:46rem;

  --r-btn:5px; --r:12px; --r-lg:18px;
  --shadow:0 1px 2px rgb(25 19 16/.04),0 8px 30px -12px rgb(25 19 16/.16);
  --shadow-lg:0 2px 6px rgb(25 19 16/.05),0 30px 70px -30px rgb(25 19 16/.3);
  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:76px;
}
/* Unbounded has no Hebrew, so the Hebrew pages use Heebo in both roles —
   the closest geometric match to the Latin/Cyrillic display face. */
:root:lang(he){
  --display:"Heebo","Heebo Fallback",-apple-system,sans-serif;
  --text:"Heebo","Heebo Fallback","Manrope",-apple-system,sans-serif;
}

/* past ~1600px the 78rem column leaves 330px of dead margin either side */
@media (min-width:100rem){ :root{ --wrap:88rem; } }
@media (min-width:120rem){ :root{ --wrap:96rem; } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
body{margin:0;background:var(--cream);color:var(--ink);
  font:400 var(--t-body)/1.62 var(--text);letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,picture,video,iframe{max-width:100%;display:block}
/* width/height attributes are present so the browser reserves space; without
   this the attribute height would win over any aspect-ratio we set later */
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:300;line-height:1.16;letter-spacing:-.03em}
h3,h4{font-weight:400;letter-spacing:-.02em}
p{margin:0}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:4px}
::selection{background:var(--clay-soft);color:var(--ink)}

.wrap{width:min(100% - var(--pad)*2,var(--wrap));margin-inline:auto}
.narrow{width:min(100% - var(--pad)*2,var(--narrow));margin-inline:auto}
.section{padding-block:var(--sec)}
.section--tight{padding-block:calc(var(--sec)*.55)}
.bg-sand{background:var(--sand)}
/* parking things at left:-9999px is not direction-safe: under RTL the origin
   flips and that offset becomes real horizontal scroll. Slide it out instead. */
.skip{position:absolute;top:0;inset-inline-start:0;z-index:200;
  background:var(--ink);color:var(--cream);padding:.75rem 1.25rem;
  transform:translateY(-130%);transition:transform .2s var(--ease)}
.skip:focus{transform:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap;margin:-1px;padding:0;border:0}

/* ---------- type helpers ---------- */
.kicker{font:500 var(--t-xs)/1 var(--text);letter-spacing:.22em;
  text-transform:uppercase;color:var(--clay)}
.h1{font-size:var(--t-h1)} .h2{font-size:var(--t-h2)}
.h3{font-size:var(--t-h3);line-height:1.2}
.lead{font-size:clamp(1.04rem,.99rem + .42vw,1.25rem);color:var(--ink-2);
  line-height:1.55;letter-spacing:-.015em}
.muted{color:var(--ink-3)}
.prose{color:var(--ink-2);max-width:60ch}
.prose p + p{margin-top:.95em}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.65em;
  padding:1.3em 2.4em;border-radius:var(--r-btn);font:600 .72rem/1 var(--text);
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  border:1px solid transparent;
  position:relative;z-index:0;overflow:hidden;
  transition:color .3s var(--ease),border-color .3s var(--ease)}
/* the hover colour slides up from the bottom edge; a negative-z pseudo element
   paints above the button background but below its label */
.btn::before{content:"";position:absolute;inset:0;z-index:-1;
  transform:translateY(101%);transition:transform .42s var(--ease)}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn svg{width:1.85em;height:1.85em;flex:none;margin-inline-start:-.25em}

/* FaceLab put their beige button over a photograph, where it separates cleanly.
   On our cream sections that same beige lands at 1.8:1 against the background —
   below the 3:1 a control needs — so light sections get the deeper warm tone. */
.btn--p,.btn--wa{background:var(--clay-d);color:#fff}
.btn--p::before,.btn--wa::before{background:var(--ink)}
.btn--p:hover,.btn--wa:hover{color:var(--cream)}

.hero .btn--p,.hero .btn--wa,
.promo .btn--p,.promo .btn--wa{background:var(--beige);color:var(--beige-ink)}
.hero .btn--p::before,.hero .btn--wa::before,
.promo .btn--p::before,.promo .btn--wa::before{background:#fff}
.hero .btn--p:hover,.hero .btn--wa:hover,
.promo .btn--p:hover,.promo .btn--wa:hover{color:var(--beige-ink)}

.btn--g{border-color:currentColor;color:var(--ink)}
.btn--g::before{background:var(--ink)}
.btn--g:hover{color:var(--cream);border-color:var(--ink)}

.btn--l{border-color:rgb(255 255 255/.45);color:#fff}
.btn--l::before{background:#fff}
.btn--l:hover{color:var(--ink);border-color:#fff}

.btn--sm{padding:.95em 1.5em;font-size:.66rem;letter-spacing:.12em}

.link{display:inline-flex;align-items:center;gap:.5em;font:500 var(--t-sm)/1 var(--text);
  letter-spacing:.06em;text-transform:uppercase;color:var(--clay);transition:gap .3s var(--ease)}
.link::after{content:"";width:1.4em;height:1px;background:currentColor}
.link:hover{gap:.9em}
[dir=rtl] .link::after{transform:scaleX(-1)}

/* ---------- header ---------- */
/* above the drawer, so the burger stays reachable as the close button */
.hdr{position:fixed;inset-block-start:0;inset-inline:0;z-index:120;
  transition:transform .45s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease)}
.hdr__in{display:flex;align-items:center;gap:var(--gap);height:var(--header-h)}
.hdr__logo{font-family:var(--display);font-weight:400;font-size:1.05rem;
  letter-spacing:.01em;line-height:1;
  margin-inline-end:auto}
.hdr__logo span{display:block;font:500 .5rem/1 var(--text);letter-spacing:.3em;
  text-transform:uppercase;opacity:.65;margin-block-start:.4em}
.nav{display:flex;align-items:center;gap:clamp(1rem,2vw,2.1rem)}
.nav a{font:500 var(--t-sm)/1 var(--text);letter-spacing:.03em;position:relative;padding-block:.4em}
.nav a::after{content:"";position:absolute;inset-block-end:0;inset-inline-start:0;
  width:0;height:1px;background:currentColor;transition:width .35s var(--ease)}
.nav a:hover::after,.nav a[aria-current]::after{width:100%}
.hdr__act{display:flex;align-items:center;gap:.85rem}
.hdr--top{color:#fff}
.hdr--solid{background:color-mix(in oklab,var(--cream) 88%,transparent);
  backdrop-filter:saturate(1.6) blur(14px);box-shadow:0 1px 0 var(--line);color:var(--ink)}
.hdr--solid .btn--l{border-color:var(--ink);color:var(--ink)}
.hdr--solid .btn--l::before{background:var(--ink)}
.hdr--solid .btn--l:hover{color:var(--cream)}
.hdr--hide{transform:translateY(-100%)}

.lang{display:flex;gap:.7rem;align-items:center;font:600 .72rem/1 var(--text);letter-spacing:.08em}
.lang a{padding:.45em .35em;opacity:.5;transition:.3s;position:relative}
.lang a[lang=he]{font-family:"Heebo",sans-serif}
.lang a:hover{opacity:1}
.lang a[aria-current]{opacity:1}
.lang a[aria-current]::after{content:"";position:absolute;inset-inline:.35em;
  inset-block-end:0;height:1.5px;background:currentColor}

.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;
  margin-inline-end:-10px;position:relative;z-index:120}
.burger i{display:block;width:22px;height:1.5px;background:currentColor;position:relative;
  transition:.35s var(--ease)}
.burger i::before,.burger i::after{content:"";position:absolute;inset-inline-start:0;
  width:100%;height:100%;background:currentColor;transition:.35s var(--ease)}
.burger i::before{top:-7px} .burger i::after{top:7px}
.burger[aria-expanded=true] i{background:transparent}
.burger[aria-expanded=true] i::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded=true] i::after{top:0;transform:rotate(-45deg)}

.drawer{position:fixed;inset:0;z-index:110;background:var(--cream);color:var(--ink);
  display:grid;align-content:center;justify-items:center;
  grid-template-columns:minmax(0,1fr);gap:.35rem;text-align:center;
  padding-inline:var(--pad);
  clip-path:circle(0% at 90% 3%);transition:clip-path .7s var(--ease);pointer-events:none}
/* the header floats over the open drawer, so force it onto the light background */
.menu-open .hdr{background:none;box-shadow:none;color:var(--ink);transform:none}
[dir=rtl] .drawer{clip-path:circle(0% at 10% 3%)}
.drawer.open{clip-path:circle(150% at 90% 3%);pointer-events:auto}
/* navigating away: the 0.7s wipe would be caught half-done in the
   outgoing view-transition snapshot and flash */
.drawer--instant{transition:none}
[dir=rtl] .drawer.open{clip-path:circle(150% at 10% 3%)}
.drawer a{font-family:var(--display);font-weight:300;
  font-size:clamp(1.3rem,3.8vw,2rem);line-height:1.45;letter-spacing:-.02em;
  opacity:0;transform:translateY(14px);transition:.5s var(--ease)}
.drawer.open a{opacity:1;transform:none}
.drawer.open a:nth-child(1){transition-delay:.14s}
.drawer.open a:nth-child(2){transition-delay:.20s}
.drawer.open a:nth-child(3){transition-delay:.26s}
.drawer.open a:nth-child(4){transition-delay:.32s}
.drawer.open a:nth-child(5){transition-delay:.38s}
.drawer.open a:nth-child(6){transition-delay:.44s}
.drawer__foot{margin-block-start:2.5rem;display:flex;flex-direction:column;gap:1rem;
  align-items:center;max-width:100%}
.drawer .btn{max-width:100%}
@media (max-width:940px){ .nav,.hdr__act .btn{display:none} .burger{display:flex} }

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;isolation:isolate;color:#fff}
.hero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
/* <picture> is an inline box by default and would collapse the 100%-height image */
.hero__bg picture{display:block;width:100%;height:100%}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 32%;
  animation:kb 24s var(--ease) both}
@keyframes kb{from{transform:scale(1.06)}to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgb(20 14 11/.5) 0,rgb(20 14 11/.12) 30%,rgb(20 14 11/.7) 100%)}
/* The hero photograph is lit with the subject on the left and deliberate black
   copy space on the right, so the headline sits in that empty half. Hebrew is
   right-aligned already; only LTR needs pushing across. */
.hero__copy{max-width:40rem}
/* bottom-aligned copy left a lot of dead space above it on a wide screen;
   centring lines the block up with the subject's face instead */
@media (min-width:52rem){
  .hero{align-items:center}
  .hero__in{padding-block:var(--header-h) 0}
}
@media (min-width:52rem){ [dir=ltr] .hero__copy{margin-left:auto} }
@media (max-width:52rem){
  .hero__bg img{object-position:22% 50%}
  /* the whole frame height is visible on a phone, so the crop cannot be nudged —
     the only way to uncover the face is to shorten the copy block, which is
     bottom-aligned and grows upwards. The same paragraph repeats in the section
     directly below, so nothing is lost. */
  .hero__sub{display:none}
  .hero__cta{margin-block-start:1.6rem}
  .hero::after{background:linear-gradient(180deg,rgb(20 14 11/.3) 0,rgb(20 14 11/.08) 24%,rgb(20 14 11/.85) 78%)}
}
.hero__in{padding-block:clamp(3rem,10vh,7rem) clamp(3rem,8vh,5.5rem)}
.hero h1{font-size:var(--t-hero);max-width:13ch;text-wrap:balance;
  text-shadow:0 2px 40px rgb(0 0 0/.3)}
.hero .kicker{color:#fff;opacity:.85;display:block;margin-block-end:1.4rem}
.hero__sub{margin-block-start:1.4rem;max-width:42ch;
  font-size:clamp(1rem,.96rem + .32vw,1.14rem);line-height:1.58;opacity:.92}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-block-start:2.4rem}
/* physical insets on purpose: vertical-rl flips this element's own logical axes */
.cue{position:absolute;bottom:1.6rem;right:var(--pad);writing-mode:vertical-rl;
  font:500 var(--t-xs)/1 var(--text);letter-spacing:.25em;text-transform:uppercase;
  opacity:.7;display:flex;align-items:center;gap:.9rem}
[dir=rtl] .cue{right:auto;left:var(--pad)}
.cue::after{content:"";width:1px;height:54px;background:currentColor;
  transform-origin:top;animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0)}45%{transform:scaleY(1)}
  100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:640px){.cue{display:none}}

/* ---------- inner page header ---------- */
/* The studio shoots portraits. A full-bleed banner cropped them to a slit, so
   the title sits beside the photograph instead, in its own proportion. */
.phead{background:var(--ink);color:var(--cream);padding-block-start:var(--header-h)}
.phead__wrap{width:min(100% - var(--pad)*2,var(--wrap));margin-inline:auto;
  display:grid;gap:clamp(1.8rem,3.5vw,3.5rem);align-items:center;
  padding-block:clamp(1.8rem,3.2vw,3rem)}
@media (min-width:64rem){
  .phead__wrap{grid-template-columns:1fr minmax(0,31%)}
  .phead__wrap--solo{grid-template-columns:1fr}
}
.phead h1{font-size:var(--t-h1);max-width:16ch;text-wrap:balance}
.phead .kicker{color:var(--gold);display:block;margin-block-end:1rem}
.phead__sub{margin-block-start:1.1rem;max-width:52ch;color:rgb(251 248 245/.78);
  font-size:clamp(1rem,.96rem + .3vw,1.12rem);line-height:1.6}
.phead__media{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
/* Studio photographs are shot on pure black and the panel matches at #000.
   build_images.py fades their outer border to true black, so the picture merges
   into the page with no frame and no visible seam. */
.phead--blend{background:#000}
.phead--blend .phead__media{border-radius:0;overflow:visible;box-shadow:none;border:0}
/* shown whole, not cropped to 4/5: cropping cut straight through the subject's
   arm, and fading that edge out only smeared a shadow across it */
/* the box reserves the picture's own proportions before it arrives, otherwise
   the copy below jumps down by ~300px when it lands */
.phead--blend .phead__media{aspect-ratio:var(--shot,4/5)}
.phead--blend .phead__media img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;
  /* only the bottom: that is where the sitter runs off the frame. Fading the
     sides too smeared a shadow across her arm. */
  -webkit-mask-image:linear-gradient(to bottom,#000 76%,transparent 99%);
  mask-image:linear-gradient(to bottom,#000 76%,transparent 99%)}
@media (min-width:64rem){
  .phead--blend .phead__wrap{grid-template-columns:1fr minmax(0,42%)}
}

@media (max-width:64rem){
  /* portrait first on a phone: below the title it sat half off-screen */
  .phead--blend .phead__media{order:-1}
  .phead--blend .phead__wrap{gap:1rem;padding-block-start:1rem}
}
.phead__media img,.phead__media iframe{width:100%;aspect-ratio:4/5;
  object-fit:cover;border:0;display:block}
/* the embed is a bright light-mode map; desaturating it keeps the dark header calm */
.phead__media iframe{filter:grayscale(1) contrast(.92);transition:filter .5s var(--ease)}
.phead__media:hover iframe{filter:none}
@media (max-width:64rem){
  /* the wider mobile crop would slice the top of a head off centre */
  .phead__media img,.phead__media iframe{aspect-ratio:3/2}
  .phead__media img{object-position:50% 28%}
}
.crumbs{display:flex;gap:.5rem;flex-wrap:wrap;font:400 var(--t-xs)/1.6 var(--text);
  color:rgb(251 248 245/.55);margin-block-end:1.5rem;list-style:none;padding:0}
.crumbs li{display:flex;gap:.5rem}
.crumbs li:not(:last-child)::after{content:"/";opacity:.5}
.crumbs a:hover{color:var(--gold)}

/* ---------- layout blocks ---------- */
.split{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.split__media{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.split__media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.split--alt .split__media{order:2}
@media (max-width:52rem){.split--alt .split__media{order:0}}

.head{max-width:52rem;margin-block-end:clamp(2rem,4vw,3.5rem)}
.head--c{margin-inline:auto;text-align:center}
.head .kicker{display:block;margin-block-end:1rem}
.head h2{font-size:var(--t-h2);text-wrap:balance}
.head p{margin-block-start:1.1rem}

.grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
/* before/after pairs: two per row on desktop so a set of four makes a clean 2x2 */
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,30rem),1fr))}

.card{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--sand);
  isolation:isolate;display:grid;min-height:26rem;align-content:end;color:#fff;
  padding:clamp(1.4rem,2.5vw,2rem);transition:.5s var(--ease)}
.card img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease)}
.card::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgb(20 14 11/.05) 30%,rgb(20 14 11/.78) 100%)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.card:hover img{transform:scale(1.07)}
.card h3{font-size:var(--t-h3)}
.card p{margin-block-start:.65rem;font-size:.9rem;opacity:.9;line-height:1.55}
.card .link{margin-block-start:1.2rem;color:#fff}

.tile{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.4rem,2.4vw,2rem);transition:.4s var(--ease)}
.tile:hover{border-color:var(--clay);transform:translateY(-4px);box-shadow:var(--shadow)}
.tile h3{font-size:1.02rem;font-family:var(--text);font-weight:600;letter-spacing:-.01em;line-height:1.4}
.tile p{margin-block-start:.55rem;color:var(--ink-2);font-size:.9rem;line-height:1.6}
.tile__n{font:400 .7rem/1 var(--display);letter-spacing:.06em;color:var(--clay);
  display:block;margin-block-end:1rem;opacity:.85}

/* ---------- pricing ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;
  margin-block-end:clamp(1.8rem,3vw,2.8rem)}
.tab{padding:.85em 1.4em;border-radius:var(--r-btn);border:1px solid var(--line);
  font:500 .82rem/1 var(--text);transition:.3s var(--ease);color:var(--ink-3);
  background:color-mix(in oklab,var(--white) 60%,transparent)}
.tab:hover{border-color:var(--clay);color:var(--ink)}
.tab[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.panel[hidden]{display:none}
.panel{animation:fade .5s var(--ease) both}
@keyframes fade{from{opacity:0;transform:translateY(10px)}}

.price{list-style:none;margin:0;padding:0;max-width:46rem;margin-inline:auto}
.price li{display:flex;align-items:baseline;gap:1rem;padding-block:1.1rem;
  border-block-end:1px solid var(--line)}
.price li:last-child{border:0}
.price .n{font-size:clamp(.98rem,.94rem + .25vw,1.12rem);font-family:var(--text);font-weight:500}
.price .d{flex:1;border-block-end:1px dotted var(--line);translate:0 -.25em;min-width:1.5rem}
.price .p{font:600 clamp(1.05rem,1rem + .4vw,1.35rem)/1 var(--text);
  color:var(--clay);white-space:nowrap}
.price__note{margin-block-start:1.4rem;font-size:var(--t-sm);color:var(--ink-3);text-align:center}

/* ---------- treatments accordion ---------- */
.acc{max-width:56rem;margin-inline:auto;border-block-start:1px solid var(--line)}
.acc details{border-block-end:1px solid var(--line)}
.acc summary{display:flex;align-items:center;gap:1rem;padding-block:1.5rem;
  cursor:pointer;list-style:none;transition:.3s}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--clay)}
.acc__t{flex:1;font-family:var(--display);font-weight:300;
  font-size:clamp(1rem,.94rem + .5vw,1.3rem);line-height:1.35;letter-spacing:-.02em}
.acc__p{font:600 var(--t-sm)/1 var(--text);color:var(--clay);white-space:nowrap}
.acc__i{width:1.4rem;height:1.4rem;flex:none;position:relative}
.acc__i::before,.acc__i::after{content:"";position:absolute;inset-block-start:50%;
  inset-inline-start:0;width:100%;height:1.5px;background:currentColor;transition:.4s var(--ease)}
.acc__i::after{rotate:90deg}
details[open] .acc__i::after{rotate:0deg;opacity:0}
.acc__b{padding-block-end:1.7rem;color:var(--ink-2);max-width:64ch;
  font-size:var(--t-sm);line-height:1.7}
.acc__meta{display:flex;gap:1.2rem;flex-wrap:wrap;margin-block-start:1.1rem;
  font:500 var(--t-xs)/1 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- before / after ---------- */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:3px;background:var(--line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);
  transition:.45s var(--ease)}
.pair:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.pair figure{margin:0;position:relative;cursor:zoom-in;background:var(--sand);overflow:hidden}
.pair img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .7s var(--ease)}
.pair figure:hover img{transform:scale(1.05)}
.pair figcaption{position:absolute;inset-block-start:.65rem;inset-inline-start:.65rem;
  padding:.4em .75em;border-radius:6px;background:rgb(251 248 245/.82);
  backdrop-filter:blur(10px) saturate(1.4);color:var(--ink-2);
  font:600 .68rem/1 var(--text);letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 2px 10px rgb(25 19 16/.12)}
.pair figcaption.is-after{background:var(--clay-d);color:#fff;box-shadow:none}
.ba__hint{text-align:center;margin-block-start:1rem;font-size:var(--t-xs);
  color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase}

/* ---------- gallery + lightbox ---------- */
.gal{columns:3;column-gap:var(--gap)}
@media (max-width:900px){.gal{columns:2}}
@media (max-width:520px){.gal{columns:1}}
.gal figure{margin:0 0 var(--gap);border-radius:var(--r);overflow:hidden;
  break-inside:avoid;cursor:zoom-in;background:var(--sand)}
.gal img{width:100%;transition:transform .7s var(--ease)}
.gal figure:hover img{transform:scale(1.05)}

.lb{position:fixed;inset:0;z-index:200;background:rgb(16 11 9/.94);display:grid;
  place-items:center;padding:var(--pad);opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease)}
.lb.open{opacity:1;pointer-events:auto}
.lb img{max-width:100%;max-height:88svh;border-radius:var(--r);object-fit:contain}
.lb__x{position:absolute;inset-block-start:1rem;inset-inline-end:1rem;width:48px;height:48px;
  border-radius:10px;background:rgb(255 255 255/.12);color:#fff;display:grid;
  place-content:center;font-size:1.5rem}
.lb__nav{position:absolute;inset-block-start:50%;translate:0 -50%;width:52px;height:52px;
  border-radius:10px;background:rgb(255 255 255/.12);color:#fff;display:grid;
  place-content:center;font-size:1.6rem}
.lb__nav--p{inset-inline-start:1rem} .lb__nav--n{inset-inline-end:1rem}
.lb__x:hover,.lb__nav:hover{background:rgb(255 255 255/.26)}

/* ---------- promo ---------- */
.promo{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-lg);
  background:var(--ink);color:var(--cream);padding:clamp(2.4rem,6vw,4.5rem);text-align:center}
.promo::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background:radial-gradient(80% 130% at 15% 0,var(--clay-d) 0,transparent 60%),
             radial-gradient(70% 120% at 90% 100%,var(--gold) 0,transparent 55%)}
.promo h2{font-size:var(--t-h2);max-width:22ch;margin-inline:auto;text-wrap:balance}
.promo .btn{margin-block-start:2rem}
.promo__big{font-family:var(--display);font-weight:300;
  font-size:clamp(3rem,10vw,6.5rem);line-height:.95;letter-spacing:-.04em;
  display:block;color:var(--gold);margin-block-end:.6rem}

.stats{display:grid;text-align:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}
.stats > div{padding:clamp(1.2rem,2.4vw,2.2rem) 1rem;position:relative}
.stats > div + div::before{content:"";position:absolute;inset-block:18%;
  inset-inline-start:0;width:1px;background:var(--line)}
.stats b{display:block;font-family:var(--display);font-size:clamp(1.7rem,3.2vw,2.5rem);
  line-height:1.1;color:var(--clay);font-weight:300;letter-spacing:-.03em}
.stats span{display:block;margin-block-start:.5rem;font-size:var(--t-sm);color:var(--ink-3)}

.certs{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr))}
.certs figure{margin:0;border-radius:var(--r);overflow:hidden;background:var(--white);
  border:1px solid var(--line);cursor:zoom-in;padding:.5rem;transition:.4s var(--ease)}
.certs figure:hover{border-color:var(--clay);transform:translateY(-4px);box-shadow:var(--shadow)}
/* documents, not photographs — show the whole page rather than cropping it */
.certs img{width:100%;aspect-ratio:3/4;object-fit:contain}

/* ---------- contact ---------- */
.cts{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.ct{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.3rem,2.4vw,1.9rem);display:grid;gap:.5rem;align-content:start;
  transition:.4s var(--ease)}
.ct:hover{border-color:var(--clay);transform:translateY(-4px);box-shadow:var(--shadow)}
.ct svg{width:1.5rem;height:1.5rem;color:var(--clay)}
.ct dt{font:500 var(--t-xs)/1 var(--text);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.ct dd{margin:0;font-size:1.05rem}
.map{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  filter:grayscale(1) contrast(.95);transition:filter .5s}
.map:hover{filter:none}
.map iframe{width:100%;height:clamp(300px,52vh,560px);border:0}

.form{display:grid;gap:1.1rem}
.field{position:relative}
.field input,.field textarea{width:100%;padding:1.35rem 1.1rem .6rem;
  border:1px solid var(--line);border-radius:var(--r);background:var(--white);
  font:inherit;color:var(--ink);transition:.3s}
.field textarea{min-height:8rem;resize:vertical}
.field label{position:absolute;inset-block-start:1.05rem;inset-inline-start:1.1rem;
  color:var(--ink-3);font-size:var(--t-sm);pointer-events:none;transition:.25s var(--ease)}
.field input:focus,.field textarea:focus{border-color:var(--clay);outline:none}
.field input:focus + label,.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label{
  inset-block-start:.4rem;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--clay)}

/* ---------- footer ---------- */
/* no top margin: sections already carry their own bottom padding, and the
   gap let the page background show as a pale band above the dark footer */
.ftr{background:var(--ink);color:var(--sand);
  padding-block:clamp(3rem,6vw,5rem) 2rem}
.ftr a:hover{color:var(--gold)}
.ftr__top{display:grid;gap:clamp(2rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.ftr h4{font:500 var(--t-xs)/1 var(--text);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-block-end:1.2rem}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;font-size:var(--t-sm)}
.ftr__logo{font-family:var(--display);font-weight:400;font-size:1.2rem;line-height:1.2}
.ftr__logo span{display:block;font:500 .5rem/1 var(--text);letter-spacing:.3em;
  text-transform:uppercase;opacity:.6;margin-block-start:.5em}
.ftr__bot{margin-block-start:clamp(2.4rem,5vw,3.5rem);padding-block-start:1.5rem;
  border-block-start:1px solid rgb(255 255 255/.12);display:flex;flex-wrap:wrap;
  gap:1rem;justify-content:space-between;font-size:var(--t-xs);color:rgb(255 255 255/.5)}
.soc{display:flex;gap:.7rem}
.soc a{width:42px;height:42px;border-radius:10px;border:1px solid rgb(255 255 255/.18);
  display:grid;place-content:center;transition:.35s var(--ease)}
.soc a:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.soc svg{width:1.15rem;height:1.15rem}

.fab{position:fixed;inset-block-end:1.25rem;inset-inline-end:1.25rem;z-index:90;
  width:56px;height:56px;border-radius:16px;background:var(--wa);color:#fff;
  display:grid;place-content:center;box-shadow:0 10px 28px -6px rgb(37 211 102/.45);
  transition:.4s var(--ease);opacity:0;translate:0 14px;pointer-events:none}
.fab.on{opacity:1;translate:0;pointer-events:auto}
.fab:hover{filter:brightness(1.08);box-shadow:0 14px 34px -6px rgb(37 211 102/.55)}
.fab svg{width:30px;height:30px}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.09s} .rv-d2{transition-delay:.18s} .rv-d3{transition-delay:.27s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

@view-transition{navigation:auto}


/* ---------- ticker strip ---------- */
.marquee{overflow:hidden;background:var(--ink);color:var(--cream);
  padding-block:1.15rem;display:flex;gap:0;user-select:none}
.marquee__row{display:flex;flex:none;gap:2.5rem;padding-inline-end:2.5rem;
  align-items:center;animation:slide 38s linear infinite;will-change:transform}
/* RTL needs its own keyframes, not `reverse`: reversing this animation starts
   the row at -100% of its own width, which in RTL is already off the left edge */
[dir=rtl] .marquee__row{animation-name:slide-rtl}
.marquee:hover .marquee__row{animation-play-state:paused}
.marquee span{font:400 clamp(.95rem,.85rem + .5vw,1.35rem)/1 var(--display);
  letter-spacing:-.02em;white-space:nowrap;opacity:.92}
.marquee i{width:6px;height:6px;border-radius:50%;background:var(--clay);
  flex:none;display:block}
@keyframes slide{to{transform:translateX(-100%)}}
@keyframes slide-rtl{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){
  .marquee__row{animation:none}
  .marquee{justify-content:center}
  .marquee__row + .marquee__row{display:none}
}

/* ---------- work carousel ---------- */
/* Scroll-snap does the work; the arrows only nudge the same scroller, so touch,
   trackpad, keyboard and mouse all behave the same and nothing needs a library. */
.carousel{position:relative}
.carousel__track{display:flex;gap:clamp(.5rem,1vw,1rem);overflow-x:auto;
  /* no snap: the track drifts continuously, and snapping would fight it */
  scroll-behavior:auto;
  padding-inline:var(--pad);scroll-padding-inline:var(--pad);
  scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__track::after{content:"";flex:0 0 calc(var(--pad) - clamp(.5rem,1vw,1rem))}
.carousel__track figure{margin:0;flex:0 0 clamp(15rem,26vw,22rem);
  border-radius:var(--r);overflow:hidden;cursor:zoom-in;background:var(--sand)}
.carousel__track img{width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 38%;
  transition:transform .7s var(--ease)}
.carousel__track figure:hover img{transform:scale(1.06)}
@media (max-width:52rem){
  .carousel__track figure{flex:0 0 min(62vw,17rem)}
}

.carousel__nav{position:absolute;inset-block-start:50%;translate:0 -50%;z-index:2;
  width:46px;height:46px;border-radius:10px;color:var(--ink);
  background:color-mix(in oklab,var(--cream) 90%,transparent);
  backdrop-filter:blur(10px) saturate(1.4);border:1px solid var(--line);
  display:grid;place-content:center;box-shadow:var(--shadow);
  transition:opacity .3s var(--ease),background .3s var(--ease)}
.carousel__nav svg{width:1.15rem;height:1.15rem}
.carousel__nav:hover{background:var(--cream)}
.carousel__nav--prev{inset-inline-start:.75rem}
.carousel__nav--prev svg{transform:rotate(180deg)}
.carousel__nav--next{inset-inline-end:.75rem}
[dir=rtl] .carousel__nav--prev svg{transform:none}
[dir=rtl] .carousel__nav--next svg{transform:rotate(180deg)}
.carousel__nav[disabled]{opacity:0;pointer-events:none}
@media (max-width:52rem){.carousel__nav{display:none}}

/* ---------- price laid out beside a photograph ---------- */
.price-split{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center;
  grid-template-columns:1fr}
@media (min-width:64rem){ .price-split{grid-template-columns:1.05fr .95fr} }
.price-split__media{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.price-split__media img{width:100%;aspect-ratio:3/4;object-fit:cover}
@media (min-width:64rem){ .price-split .price{margin-inline:0} }

/* two-column reading text instead of one narrow ribbon on wide screens */
@media (min-width:64rem){
  .prose--2col{max-width:none;columns:2;column-gap:clamp(2rem,4vw,3.5rem)}
  .prose--2col p{break-inside:avoid}
}