/* Sophie's Soft Touch — direction A
   Six rules do the work: no containers, no shadows, radius 0 except buttons,
   photography bleeds to an edge, scale contrast carries hierarchy, brown is an
   accent and never a field. */

@font-face{font-family:"Instrument Sans";src:url("fonts/instrument-sans.woff2") format("woff2");
  font-weight:400 600;font-display:swap}
/* Instrument Sans covers 0 of 96 Armenian codepoints, so every Armenian
   character would render as a tofu box. Declared under the SAME family name and
   scoped by unicode-range, Latin keeps coming from Instrument Sans and Armenian
   comes from Noto, with no JavaScript and no class switching. A browser only
   fetches a face whose range is actually used, so English visitors never
   download it. */
@font-face{font-family:"Instrument Sans";
  src:url("fonts/noto-sans-armenian.woff2") format("woff2");
  unicode-range:U+0308, U+0530-058F, U+2010, U+2024, U+25CC, U+FB13-FB17;
  font-weight:400 600;font-display:swap}

:root{
  --bg:#F7F6F3; --ink:#171614; --ink2:#57534E; --ink3:#746F68;
  --line:#E4E1DA; --warm:#8A5A32; --warm-deep:#6E4828;
  --dark:#14130F;--dim:#837E76;
  --f:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* viewport-fit=cover is set in the head, so the page draws under the notch
     and the home indicator. Text has to pay for that. Folding the inset into
     --gutter carries it into --edge and --wrap too, so every text container
     inherits it; full bleed photography deliberately does not. */
  --safe:max(env(safe-area-inset-left,0px), env(safe-area-inset-right,0px));
  --gutter:calc(clamp(22px,4vw,60px) + var(--safe));
  --wrap:min(1320px, 100% - (2 * var(--gutter)));
  /* The space between the viewport edge and --wrap. --wrap contains a 100%,
     which resolves against whatever element reads it, so deriving a bleed
     margin from it inside a grid column gives the column's inset, not the
     page's. Use this for anything that bleeds to a viewport edge. */
  --edge:max(var(--gutter), (100vw - 1320px) / 2);
  --sec:clamp(72px,9vw,150px);
  --logo-h:clamp(40px,3.6vw,56px);
  --nav-h:calc(24px + var(--logo-h) + 24px);
  --ease:cubic-bezier(.2,.7,.25,1);
  --ease-out:cubic-bezier(.32,.72,0,1);
}
*,*::before,*::after{box-sizing:border-box}
/* Touch gets no hover, and the whole hover system is inside (hover:hover), so
   without this a tap on a 346x143 service row produced iOS's default grey
   rectangle and nothing else. */
/* every element, not just links and buttons: a tap that lands on a container
   was still getting iOS's default grey plate */
*{-webkit-tap-highlight-color:transparent}
/* the dialog takes focus programmatically and must never draw a ring for it */
.menu-panel:focus,.menu-panel:focus-visible{outline:none}
.no-ring .menu-btn:focus-visible,.no-ring .menu-panel :focus-visible{outline:none}
html{-webkit-text-size-adjust:100%;background:var(--bg);
  overflow-x:hidden;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:#E8DCC8;color:var(--ink)}
:focus-visible{outline:2px solid var(--warm);outline-offset:3px}
.dark :focus-visible{outline-color:#F7F6F3}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);
  color:var(--bg);padding:12px 20px;font-size:13px}
.skip:focus{left:env(safe-area-inset-left,0px);top:env(safe-area-inset-top,0px)}
.wrap{width:var(--wrap);margin-inline:auto}
section{scroll-margin-top:80px}

/* ---------------------------------------------------------------- type -- */
.label{font-size:.9375rem;font-weight:500;letter-spacing:-.005em;line-height:1.3;color:var(--warm)}
.label--mute{color:var(--ink3)}
.display{font-weight:500;font-size:clamp(2.25rem,4.4vw,3.75rem);line-height:1.03;
  letter-spacing:-.035em;text-wrap:balance}
.lead{color:var(--ink2);font-size:clamp(1.0625rem,1.35vw,1.1875rem);text-wrap:pretty}

/* ------------------------------------------------------------- buttons -- */
/* Every button GAINS weight on hover. The previous version inverted, so
   hovering the primary call to action turned it from a solid pill into a thin
   outline, which drains the thing you are trying to press. Two stacked fill
   layers do the work instead: a resting fill and a hover fill that wipes up
   from the bottom. The label never moves and the hairline never moves.

   Both layers are pseudo elements at negative z-index inside an isolated
   stacking context, so the button itself must stay background:transparent or
   its own background would cover them. */
/* A colour change, eased. No wipe, no layers, no pseudo elements.
   No border either: in the same colour as the fill it compounds with the fill's
   own antialiasing around a 999px radius and draws a visible darker rim, which
   reads as the shadow this design does not have. The ghost's hairline is an
   inset keyline, which also leaves `outline` free for the focus ring. */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;
  padding:0 34px;border:0;border-radius:999px;
  background:var(--warm);color:#fff;font-size:13px;letter-spacing:.06em;
  white-space:nowrap;
  transition:background-color .22s var(--ease),color .22s var(--ease),
             box-shadow .22s var(--ease),transform .12s var(--ease)}
.btn:active{transform:scale(.96)}
.btn--ghost{background:transparent;color:var(--warm);
  box-shadow:inset 0 0 0 1px var(--warm)}
.dark .btn{background:#F5F3EF;color:var(--dark)}
@media (hover:hover){
  /* every :hover on the page lives in here. Outside it they stick on iOS after
     a tap with no way to dismiss, which has been the recurring bug in this file. */
  .alt:hover{color:var(--ink);text-decoration-color:var(--ink)}
  .nav__links a:not(.btn):hover{color:var(--ink)}
  .contact a:hover{background:#FCFBF8}
  .foot__meta a:not(.btn):hover{color:var(--ink)}
  .btn:hover{background:var(--warm-deep)}
  .btn--ghost:hover{background:var(--warm);color:#fff}
  .lang a:not([aria-current]):hover{color:var(--ink)}
  .dark .btn:hover{background:var(--warm);color:#fff}
}
.btn--sm{min-height:46px;padding:0 26px;font-size:12px}
.no-motion .btn{transition:none}
/* Touch has no hover, so these are the only feedback a thumb ever gets. */
.svc__a:active{background:#F1EDE6}
.contact a:active{background:#F1EDE6}
.alt:active{color:var(--ink)}
.nav__links a:active{color:var(--ink)}
.alt{display:inline-flex;align-items:center;min-height:44px;
  font-size:15px;color:var(--ink2);white-space:nowrap;
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.3em;text-decoration-color:var(--line);
  transition:color .18s var(--ease),text-decoration-color .18s var(--ease)}


/* ----------------------------------------------------------------- nav -- */
.nav{position:absolute;inset:0 0 auto 0;z-index:20;
  padding:calc(24px + env(safe-area-inset-top,0px)) 0 24px}
.nav__in{width:var(--wrap);margin-inline:auto;display:flex;align-items:center;
  justify-content:space-between;gap:20px}
.nav__lead{display:flex;align-items:center;gap:clamp(22px,3vw,46px)}
/* space-between pushed the language toggle to the far right, where it lands on
   the hero photograph: measured 3.79:1 against the dark pixels there. Above the
   phone breakpoint everything clusters on the cream column instead, which is
   the same fix the nav links needed. */
@media(min-width:640px){
  .nav__in{justify-content:flex-start;gap:clamp(22px,3vw,44px)}
}
.nav__lead>a:first-child{display:inline-flex;align-items:center;
  min-height:max(44px,var(--logo-h))}
.wm{height:var(--logo-h);width:auto;color:var(--warm)}
.nav__links{display:flex;align-items:center;gap:clamp(18px,2vw,26px);
  font-size:13.5px;color:var(--ink2)}
.nav__links a:not(.btn){display:inline-flex;align-items:center;min-height:44px;
  transition:color .18s var(--ease)}

@media (max-width:639px){.js .nav .nav__links a:not(.btn){display:none}}



/* --------------------------------------------------------------- lang -- */
.lang{display:flex;align-items:center;gap:7px;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
.lang a{display:inline-flex;align-items:center;min-height:44px;padding-inline:2px;
  transition:color .18s var(--ease)}
.lang a[aria-current]{color:var(--ink)}
.lang__sep{color:var(--line)}

/* --------------------------------------------------------------- menu -- */
.menu-btn{display:none;border:0;background:transparent;cursor:pointer;
  min-height:44px;padding:0 2px;font:inherit;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
  align-items:center;gap:9px}
.menu-btn span{display:block}
/* two rules that become an X. No icon font, no svg, no library. */
.menu-btn::after{content:"";width:18px;height:9px;
  border-top:1px solid currentColor;border-bottom:1px solid currentColor;
  transition:transform .3s var(--ease-out)}
.menu-panel{position:fixed;inset:0;z-index:30;background:var(--bg);
  padding:calc(var(--nav-h) + 18px) var(--gutter)
          calc(26px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;justify-content:space-between;
  gap:clamp(14px,2vh,20px);
  /* a fixed element with visible overflow cannot scroll, and in phone
     landscape the content is taller than the viewport. contain stops a flick
     inside the panel from chaining to the document behind it. */
  overflow-y:auto;overscroll-behavior:contain;
  opacity:1;transition:opacity .3s var(--ease-out)}
.menu-panel[hidden]{display:none}
.menu-panel.is-shut{opacity:0}
.menu-panel__in{flex:1;display:flex;flex-direction:column;min-height:0}
.menu-panel__nav{display:flex;flex-direction:column;margin-top:14px;
  border-top:1px solid var(--line)}
.menu-panel__nav a{display:flex;align-items:center;
  min-height:0;padding-block:clamp(15px,2.1vh,21px);
  border-bottom:1px solid var(--line)}
.menu-panel__t{font-size:clamp(2.125rem,10.4vw,2.875rem);letter-spacing:-.035em;
  line-height:1.05}
.menu-panel__foot{display:flex;flex-direction:column;gap:18px;
  padding-top:clamp(20px,3vh,30px);border-top:1px solid var(--line)}
.menu-panel__foot .btn{align-self:flex-start}
.menu-panel__note{margin-top:auto;padding-top:clamp(24px,4vh,44px);
  padding-bottom:0;color:var(--ink2);
  font-size:clamp(1.0625rem,4.6vw,1.1875rem);line-height:1.5;text-wrap:pretty}
.menu-panel__meta{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink3)}
/* the items rise as the panel fades, staggered the same way .rv is */
.menu-panel__nav a,.menu-panel__foot>*{transition:opacity .34s var(--ease-out),
  transform .34s var(--ease-out)}
.menu-panel.is-shut .menu-panel__nav a,
.menu-panel.is-shut .menu-panel__foot>*{opacity:0;transform:translateY(10px)}
.menu-panel__nav a:nth-child(2){transition-delay:.04s}
.menu-panel__nav a:nth-child(3){transition-delay:.08s}
.menu-panel__nav a:nth-child(4){transition-delay:.12s}
.menu-panel__foot>*{transition-delay:.14s}
.no-motion .menu-panel,.no-motion .menu-btn::after,
.no-motion .menu-panel__nav a,.no-motion .menu-panel__foot>*{transition:none}

/* ---------------------------------------------------------------- hero -- */
.hero{position:relative;min-height:100svh;display:grid;grid-template-columns:1fr}
.hero__pane{position:relative;display:flex;flex-direction:column;isolation:isolate;
  padding:var(--nav-h) var(--edge) 40px}
.field{position:absolute;inset:0;z-index:-1;overflow:hidden;
  background:radial-gradient(120% 85% at 6% 98%, #EADCC6 0%, rgba(234,220,198,0) 58%),
             radial-gradient(90% 70% at 92% 4%, #EFE6DA 0%, rgba(239,230,218,0) 60%)}
.hero__body{margin-top:auto;padding-block:clamp(36px,7svh,80px) 0}
.hero__body .display{margin-top:22px;max-width:13ch}
.hero__body .lead{margin-top:20px;max-width:34ch}
.hero__cta{display:flex;align-items:center;gap:24px;margin-top:34px;flex-wrap:wrap}
.hero__meta{margin-top:auto;padding-top:38px;display:flex;gap:22px;flex-wrap:wrap}
.hero__meta .label--mute{color:var(--ink2)}
.hero__shot{position:relative;min-height:56svh;overflow:hidden;background:#E9E6E0}
.hero__shot img{width:100%;height:100%;object-fit:cover;object-position:52% 56%}
@media(min-width:900px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,44vw)}
  .hero__shot{min-height:100svh}
  .hero__pane{padding-right:clamp(40px,5vw,80px)}
}

/* ------------------------------------------------------------ services -- */
.svcs{padding-block:var(--sec)}
.svcs__head{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.svcs__head .display{margin-top:14px}
.menu{margin-top:clamp(28px,3.4vw,44px);border-top:1px solid var(--line)}
.svc{border-bottom:1px solid var(--line)}
.svc__a{display:grid;grid-template-columns:minmax(0,1fr) auto;
  column-gap:clamp(16px,2.4vw,40px);row-gap:0;align-items:baseline;
  padding:clamp(20px,2.2vw,28px) clamp(10px,1.2vw,16px);
  box-shadow:inset 0 0 0 0 rgba(138,90,50,0);
  transition:background-color .16s var(--ease),box-shadow .26s var(--ease-out)}
.svc__name{font-weight:500;font-size:clamp(1.25rem,2vw,1.625rem);
  letter-spacing:-.02em;line-height:1.2}
.svc__right{display:flex;align-items:baseline;gap:clamp(16px,2.4vw,38px)}
.svc__dur{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.svc__price{font-weight:500;font-size:clamp(1.125rem,1.6vw,1.375rem);
  font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em;color:var(--warm)}
.svc__desc{grid-column:1 / -1;color:var(--ink2);font-size:1rem;
  line-height:1.5;margin-top:7px;max-width:60ch}
@media (hover:hover){
  .svc__a:hover{background:#FCFBF8;box-shadow:inset 2px 0 0 0 var(--warm)}
  .svc__a:hover .svc__dur{color:var(--ink2)}
}
.svc--ask .svc__name{color:var(--ink2)}

/* -------------------------------------------------------------- studio -- */
.studio{padding-block:var(--sec);display:grid;grid-template-columns:1fr;
  gap:clamp(30px,4vw,56px);align-items:center}
.studio__shot{overflow:hidden;background:#E9E6E0}
.studio__shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:18/25}
.studio__body{width:var(--wrap);margin-inline:auto}
.studio__body p{color:var(--ink2);margin-top:18px;max-width:46ch}
.studio__body .display{margin-top:20px}
.studio__body .lead{margin-top:16px}
.studio__deck{margin-top:clamp(20px,2.2vw,30px)}
@media(min-width:900px){
  /* The section had no inline-start padding, so a bleed of --edge started the
     plate 204px OFF SCREEN on a 1728 display and a fifth of the portrait was
     gone. With padding on both sides the same bleed lands exactly on the
     viewport edge and nothing is lost, and every edge in the section now sits
     on the page grid: --wrap left, --wrap right, plate flush to the edge. */
  .studio{padding-inline:var(--edge);
    grid-template-columns:minmax(0,min(32%,380px)) minmax(0,1fr);
    column-gap:clamp(40px,5vw,80px);row-gap:0;align-items:center}
  /* The plate carries the photograph's own aspect so the whole frame shows
     instead of a crop of it. A bleeding plate is as wide as its column plus the
     page inset, and --edge reaches 300px at 1920, which at 0.72 would make the
     plate 970px tall against 270px of copy. So the bleed is capped: full bleed
     to the viewport edge up to about 1440, and inside the margin beyond that,
     which keeps the portrait a sane height at every width. */
  .studio__shot{position:relative;grid-area:1/1;
    margin-inline:calc(-1 * min(var(--edge),96px)) 0;
    aspect-ratio:0.667;height:auto;min-height:0}
  .studio__shot img{position:absolute;inset:-3% 0;width:100%;height:106%;
    object-fit:cover;object-position:50% 50%;aspect-ratio:auto}
  .studio__body{grid-area:1/2;width:auto;margin:0}
  .studio__deck{display:grid;grid-template-columns:1fr 1fr;
    column-gap:clamp(28px,3vw,48px)}
  .studio__deck p{margin-top:0;max-width:none}
}

/* ---------------------------------------------------------------- dark -- */
.dark{background:var(--dark);color:#F5F3EF;padding-block:clamp(70px,9vw,140px)}
.dark .label{color:#A7A29A}
.dark .lead{color:#A7A29A}
.dark__head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:26px;flex-wrap:wrap;margin-top:16px}
.dark__price{font-weight:500;font-size:clamp(1.25rem,1.8vw,1.5rem);
  font-variant-numeric:lining-nums tabular-nums;color:#C9A272}
.dark .lead{margin-top:22px;max-width:46ch}
/* "What it helps" and "The machine". This was .phases, a three column list of
   the seven step protocol, which described the Platinum tier Sophie is unlikely
   to run and which named the steps wrongly besides. */
.dark__cols{display:grid;grid-template-columns:1fr;column-gap:clamp(30px,4vw,72px);
  row-gap:clamp(28px,3vw,38px);margin-top:clamp(48px,5.4vw,80px)}
.dark__col h3,.hf__label{font-weight:500;font-size:clamp(1.5rem,2.4vw,2rem);
  letter-spacing:-.025em;line-height:1.15;color:#F5F3EF}
.dark__col ul{margin-top:18px;display:grid;row-gap:9px}
.dark__col li{font-size:1.0625rem}
.dark__col p{margin-top:18px;color:#A7A29A;font-size:1rem;line-height:1.55;max-width:44ch}
.dark .btn{background:#F5F3EF;color:var(--dark);margin-top:clamp(30px,3.4vw,42px)}
.dark__fine{margin-top:18px;font-size:.9375rem;color:var(--dim)}
@media(min-width:760px){.dark__cols{grid-template-columns:1fr 1fr}}
/* Tiers and packages. The tier rows ARE the services menu, so they keep its
   type, its phone layout and its large tier growth; only the ground changes. */
.hf{margin-top:clamp(36px,4.4vw,62px)}
.hf__note{margin-top:12px;color:#A7A29A;font-size:1rem;line-height:1.5}
.menu--dark{margin-top:clamp(8px,1vw,14px);border-top:0}
.menu--dark .svc:last-child{border-bottom:0}
.menu--dark .svc{border-bottom-color:#2C2A27}
.menu--dark .svc__price{color:#C9A272}
/* a step under the Single visit heading, so the tiers read as its items */
.menu--dark .svc__name{font-size:clamp(1.125rem,1.6vw,1.375rem)}
.menu--dark .svc__desc{color:#A7A29A}
.menu--dark .svc__a:active{background:#1D1B17}
@media (hover:hover){
  .menu--dark .svc__a:hover{background:#1B1A16;box-shadow:inset 2px 0 0 0 #C9A272}
}
/* Every tier takes the same 10/15/20%, so the saving belongs to the row and
   each cell only has to say what you pay. Rules sit only under the tier names
   and between the rows: none over the table, none under its last row. */
.pack{width:100%;margin-top:clamp(6px,.8vw,12px);border-collapse:collapse;table-layout:fixed}
.pack th,.pack td{text-align:left;vertical-align:baseline;font-weight:400;
  padding:clamp(18px,2vw,26px) clamp(10px,1.2vw,16px);border-bottom:1px solid #2C2A27}
.pack thead th{padding-block:clamp(14px,1.4vw,18px);font-size:1.0625rem;color:#F5F3EF}
.pack thead td{width:28%}
.pack tbody tr:last-child>*{border-bottom:0}
.pack__n,.pack__total{display:block;font-weight:500;font-size:clamp(1.125rem,1.6vw,1.375rem);
  font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em;line-height:1.2}
.pack__n{color:#F5F3EF}
.pack__total{color:#C9A272}
.pack__save{display:block;margin-top:8px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:#A7A29A}
.pack__each{display:block;margin-top:6px;color:#A7A29A;font-size:.9375rem;
  font-variant-numeric:lining-nums tabular-nums}
/* Point at a price and the rest of the grid falls away, leaving the price, its
   tier and its pack size: $1,377 reads as Platinum, 6 visits, with nothing to
   cross-reference. A tap lights it on touch screens, a pointer or the keyboard
   lights it everywhere else, and only brightness changes, so nothing moves. */
.pack th,.pack td{transition:opacity .22s var(--ease)}
.pack .pack__each{transition:color .22s var(--ease)}
.pack td{cursor:default}
.pack td:focus{outline:none}
.pack td:focus-visible{outline:2px solid #F7F6F3;outline-offset:-2px}
/* a tap focuses the cell, and tapping anywhere else clears it */
@media (hover:none){
  .pack:has(tbody td:focus) :is(th,td){opacity:.35}
  .pack:has(tbody td:focus) tbody td:focus,
  .pack:has(td:focus) tr:has(td:focus) th[scope=row],
  .pack:has(td:nth-child(2):focus) thead th:nth-child(2),
  .pack:has(td:nth-child(3):focus) thead th:nth-child(3),
  .pack:has(td:nth-child(4):focus) thead th:nth-child(4){opacity:1}
  .pack td:focus .pack__each{color:#F5F3EF}
}
/* a mouse click must not leave a second price lit, so only keyboard focus */
@media (hover:hover){
  .pack:has(tbody td:hover) :is(th,td){opacity:.35}
  .pack:has(tbody td:hover) tbody td:hover,
  .pack:has(td:hover) tr:has(td:hover) th[scope=row],
  .pack:has(td:nth-child(2):hover) thead th:nth-child(2),
  .pack:has(td:nth-child(3):hover) thead th:nth-child(3),
  .pack:has(td:nth-child(4):hover) thead th:nth-child(4){opacity:1}
  .pack td:hover .pack__each{color:#F5F3EF}
  .pack:has(tbody td:focus-visible) :is(th,td){opacity:.35}
  .pack:has(tbody td:focus-visible) tbody td:focus-visible,
  .pack:has(td:focus-visible) tr:has(td:focus-visible) th[scope=row],
  .pack:has(td:nth-child(2):focus-visible) thead th:nth-child(2),
  .pack:has(td:nth-child(3):focus-visible) thead th:nth-child(3),
  .pack:has(td:nth-child(4):focus-visible) thead th:nth-child(4){opacity:1}
  .pack td:focus-visible .pack__each{color:#F5F3EF}
}
.no-motion .pack th,.no-motion .pack td,.no-motion .pack .pack__each{transition:none}

/* --------------------------------------------------------------- visit -- */
.visit{padding-block:var(--sec)}
.flow{display:grid;grid-template-columns:1fr;column-gap:clamp(24px,3vw,48px);
  row-gap:clamp(26px,3vw,34px);margin-top:clamp(28px,3.4vw,44px);
  padding-top:clamp(24px,2.8vw,34px);border-top:1px solid var(--line)}
.flow h3{font-size:1.0625rem;font-weight:500;letter-spacing:-.01em}
.flow p{color:var(--ink2);font-size:.9375rem;line-height:1.5;margin-top:7px;max-width:30ch}
@media(min-width:820px){.flow{grid-template-columns:repeat(4,1fr)}}

/* -------------------------------------------------------------- book -- */
.book{padding-block:var(--sec)}
.book .lead{margin-top:16px;max-width:38ch}
.book__cta{display:flex;gap:16px;margin-top:clamp(28px,3.2vw,38px);flex-wrap:wrap}
.contact{margin-top:clamp(38px,4.4vw,60px);max-width:min(560px,100%);
  border-top:1px solid var(--line)}
.contact a,.contact div.row{display:flex;align-items:center;justify-content:space-between;
  gap:20px;min-height:56px;border-bottom:1px solid var(--line);
  padding-inline:2px;transition:background-color .16s var(--ease),padding-inline .16s var(--ease)}

.contact .k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.contact .v{font-size:1.0625rem;overflow-wrap:anywhere;text-align:right}
@media(min-width:900px){
  /* Two columns. The contact rows are capped at a readable measure, which left
     the right 60% of the section empty when everything stacked. */
  .book .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,min(46%,500px));
    column-gap:clamp(48px,6vw,110px);align-items:start}
  .contact{margin-top:0}
}

/* ------------------------------------------------------------- footer -- */
.foot{padding-block:clamp(50px,6vw,90px)
  calc(clamp(40px,5vw,64px) + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line)}
.logo{width:clamp(150px,17vw,230px);height:auto;color:var(--warm)}
.foot__row>a:first-child{display:inline-flex;min-height:44px;align-items:flex-end}
.foot__row{display:flex;align-items:flex-end;justify-content:space-between;
  gap:28px;flex-wrap:wrap}
.foot__meta{color:var(--ink2);font-size:.9375rem;text-align:right}

.foot__c{margin-top:26px;color:var(--ink3);font-size:.875rem}

/* ------------------------------------------------------------- motion -- */
.rv{opacity:0;transform:translateY(16px);
  transition:opacity .66s var(--ease-out),transform .66s var(--ease-out)}
.rv.in,.no-motion .rv{opacity:1;transform:none}
.rv-2{transition-delay:.08s} .rv-3{transition-delay:.16s}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .rv{opacity:1;transform:none}
  .field canvas{display:none}
}

/* Capture only. A 100svh hero fills a 7000px tall screenshot window, so full
   page captures need the hero pinned to a realistic viewport height. */
/* A capture must not depend on an observer having fired, and lazy images must
   not depend on a scroll that never happens in a single tall screenshot. */
.capture .rv{opacity:1;transform:none}
.capture .hero{min-height:840px}
.capture .hero__shot{min-height:min(62vw,420px)}
@media(min-width:900px){.capture .hero__shot{min-height:840px}}

/* The studio copy ran edge to edge with NO gutter at every width
   below 900, because .studio only gets padding-inline inside the 900px block.
   "Glendale, CA" was clipped against the screen edge on a tablet as well as a
   phone. Padding moves onto the section and the plate bleeds back out of it,
   which also gives the portrait the full bleed it should always have had. */
@media (max-width:899px){
  .studio{padding-inline:var(--edge)}
  .studio__body{width:auto;margin:0}
  .studio__shot{margin-inline:calc(-1 * var(--edge))}
}

/* Rotating a phone crosses 640 and drops the display from 48px to 36px while
   the measure grows, which is backwards. max-height keeps this to real phones
   in landscape: no tablet or desktop window is ever this short. */
@media (min-width:640px) and (max-width:899px) and (max-height:520px){
  .display{font-size:clamp(2rem,5.6vw,2.75rem);line-height:1.06}
  .lead{font-size:1.1875rem}
  .menu-panel__nav a{min-height:48px}
  .menu-panel__t{font-size:1.5rem}
  .menu-panel{gap:18px}
}
@media (max-height:520px){
  .menu-panel__nav a{min-height:48px;padding-block:8px}
  .menu-panel__t{font-size:1.5rem}
  .menu-panel{gap:16px}
}

/* ------------------------------------------------------------- phone -- */
/* Everything above this point is desktop CSS with min-width blocks layered on,
   so a phone was getting the residue rather than a design. Measured at 390,
   35 of 36 clamp() values sat on their floor and NOT ONE token changed value
   between a 320 SE and a 430 Pro Max: same 22px gutter, same 36px display,
   same 72px section padding. This block gives phones their own scale and
   their own layouts. */
@media (max-width:639px){
  :root{
    /* --nav-h measured the wordmark, but the tallest thing in the bar is a
       44px tap target, and the fixed nav needs the notch inset too */
    --nav-h:calc(env(safe-area-inset-top,0px) + 24px
             + max(var(--logo-h), 44px) + 24px);
    /* proportional to the device instead of frozen at a floor until 550px */
    --gutter:calc(clamp(18px,5.4vw,26px) + var(--safe));
    /* --sec is applied to both neighbours, so 72 meant 144px between every
       pair of sections: 694px of dead band down the page */
    --sec:clamp(48px,12vw,72px);
  }
  /* display was 36px on every phone because 4.4vw does not reach the floor
     until 818px. 10vw gives a real ramp: 32 at 320, 39 at 390, 43 at 430. */
  .display{font-size:clamp(2rem,10vw,3rem);line-height:1.06}
  /* .lead computed to exactly body size on a phone, so it was not a lead */
  .lead{font-size:clamp(1.125rem,4.9vw,1.3125rem)}
  .svc__name{font-size:clamp(1.25rem,5.4vw,1.5rem)}

  /* Services. The desktop grid pins the price to the FIRST line of the name,
     so a name that wraps to three lines at 320 left the price floating with
     48px of empty gutter under it. display:contents promotes the duration and
     price to grid items so they can be placed independently:
        name .......... price
        60 MIN
        description                                          */
  .svc__a{grid-template-columns:minmax(0,1fr) auto;
    column-gap:16px;row-gap:0;align-items:baseline;padding-inline:0}
  .svc__right{display:contents}
  .svc__price{grid-column:2;grid-row:1}
  .svc__dur{grid-column:2;grid-row:1}
  .svc__desc{grid-column:1 / -1;grid-row:3;margin-top:8px}
  /* the head collided at 320: no flex-wrap and 125px of label in 124px */
  .svcs__head{flex-wrap:wrap;row-gap:6px}


  /* The band is its own ground, so its closing group centres without competing
     with the two centred zones at the end of the page. */
  .dark .btn{display:flex;width:fit-content;margin:clamp(40px,10vw,52px) auto 0}
  .dark__fine{margin-top:24px;text-align:center}

  /* space-between flex rows with nowhere to go */
  .dark__head{flex-direction:column;align-items:flex-start;gap:10px}
  /* Four columns do not fit a phone. Each row's name takes its own line and
     the three tiers sit under it:
        4 visits              SAVE 10%
        $720      $900      $972
        $180      $225      $243
        a visit   a visit   a visit                                  */
  .pack,.pack thead,.pack tbody{display:block}
  .pack tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:14px;
    padding-block:18px 20px;border-bottom:1px solid #2C2A27}
  .pack thead tr{padding-block:14px}
  .pack tbody tr:last-child{border-bottom:0;padding-bottom:0}
  .pack th,.pack td{padding:0;border:0}
  .pack thead td{display:none}
  .pack thead th{padding:0;font-size:1rem}
  .pack th[scope=row]{grid-column:1 / -1;display:flex;align-items:baseline;
    justify-content:space-between;gap:12px;margin-bottom:10px}
  .pack__save{margin-top:0}
  .pack__each{font-size:.875rem}
  .pack__each span{display:block}
  /* Left aligned it clustered in the left 45% with the right half empty, and it
     followed a centred call to action, so the page ended by drifting off the
     grid. Centred it closes the same way it signs off. */
  .foot{text-align:center}
  .foot__row{flex-direction:column;align-items:center;gap:22px}
  .foot__row>a:first-child{align-items:center}
  .foot__meta{text-align:center}
  .logo{width:min(54vw,208px)}

  .js .menu-btn{display:inline-flex}
  /* Fixed so the menu is reachable on a 7 viewport page. Transparent only at
     the very top, where the hero sits under it; it solidifies as soon as you
     scroll, because a transparent fixed bar would otherwise overlap whatever
     text is passing beneath it. */
  .nav{position:fixed;transform:translateZ(0);
       transition:background-color .3s var(--ease),border-color .3s var(--ease)}
  .nav.is-stuck{background:var(--bg);border-bottom:1px solid var(--line)}
  /* The panel is a sibling of the header now, so a plain z-index works and the
     bar keeps the button that opened it reachable. It used to be a CHILD of
     the header, where .nav's own translateZ(0) made it the containing block
     for position:fixed and sized the overlay to a 92px bar. */
  .nav{z-index:40}
  /* open state says Close and drops the rules: two horizontal lines cannot
     rotate into an X independently, and a word is quieter than a bad icon */
  .menu-btn[aria-expanded="true"]::after{display:none}

  /* Desktop keeps its own values for all three of these. */
  /* the nav is fixed on phones, so anchors need to clear it */
  section{scroll-margin-top:calc(var(--nav-h) + 12px)}
  /* 19px tall, and it is the phone number */
  .foot__meta a{display:inline-flex;align-items:center;min-height:44px}
  /* restated "by appointment" from the lead 180px above it */
  .hero__meta{display:none}

  /* Centred hero, on trial. The logo goes with it: a centred headline under a
     left logo makes the top of the page argue with itself. space-between will
     not centre the middle of three unequal children, so the bar becomes a grid
     with an auto middle column. */
  .nav__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
  .js .nav__links{display:none}
  .lang{grid-area:1/1;justify-self:start}
  .nav__lead{grid-area:1/2;justify-self:center}
  .menu-btn{grid-area:1/3;justify-self:end}
  .hero .label,.hero .display,.hero .lead{text-align:center;margin-inline:auto}
  .hero .lead{max-width:32ch;text-wrap:balance}
  .hero__cta{justify-content:center}

  /* three items in the bar now, and Armenian labels run longer than English */
  .nav__in{gap:12px}
  .lang{gap:5px}

  /* the contact list already closes with a hairline, so the footer's own rule
     put two of them within one section gap */
  .foot{border-top:0}

  /* The one place centring earns it. This is the closing moment: a two line
     headline, one line of lead and two buttons, which is exactly the short
     symmetric content centring suits. The contact list under it stays on the
     left/right grid, because a label paired with a value only reads as a rule
     when it is anchored. */
  .book .display,.book .lead{text-align:center;margin-inline:auto}
  .book .lead{max-width:26ch}
  .book__cta{justify-content:center}

  /* Menu only. Text and Call are one decision there, so they are one segmented
     control rather than a solid pill above a ghost pill. The booking section
     keeps its own pair as it was. */
  .cta-pair{display:grid;grid-template-columns:1fr;gap:0;
    border:1px solid var(--warm);border-radius:22px;overflow:hidden}
  .cta-pair .btn{width:100%;border-radius:0;background:transparent;
    color:var(--warm);box-shadow:none;min-height:54px}
  .cta-pair .btn + .btn{border-top:1px solid var(--warm)}
  .cta-pair .btn:active{background:var(--warm);color:#fff;transform:none}

}

/* ------------------------------------------------- large screens (1728+) -- */
/* Every clamp on this page tops out by 1667px, so a 27" monitor was drawing the
   1440 design inside 1240px of empty margin: same 1320px column, same 60px
   headline, 48% of the screen given over to cream. This is the mirror image of
   the phone problem, where 35 of 36 clamps sat on their floor.

   --over is exactly 0px at 1728 (a 16" MacBook Pro, and every width below it)
   and 832px at 2560, so every value here IS today's value at 1728 and grows
   from there. Writing it as an offset rather than a wider clamp(min,Nvw,max)
   is the whole trick: a vw coefficient lands a fraction of a pixel off at the
   boundary, which shifts the content column half a pixel and re-rasters every
   glyph on the page. Measured, that version differed by 31,363 pixels at 1728.
   This one differs by none.

   It sits at the end of the stylesheet because it overrides rules inside the
   (min-width:900px) blocks at equal specificity, where source order decides. */
@media (min-width:1728px){
  :root{
    --over:clamp(0px, calc(100vw - 1728px), 832px);
    --gutter:calc(60px + var(--over) * 0.03846 + var(--safe));
    --wrap-max:calc(1320px + var(--over) * 0.28846);
    --wrap:min(var(--wrap-max), 100% - (2 * var(--gutter)));
    --edge:max(var(--gutter), (100vw - var(--wrap-max)) / 2);
    --sec:calc(150px + var(--over) * 0.06010);
    --logo-h:calc(56px + var(--over) * 0.01202);
  }
  body{font-size:calc(17px + var(--over) * 0.002404)}
  .display{font-size:calc(3.75rem + var(--over) * 0.01923)}
  .lead{font-size:calc(1.1875rem + var(--over) * 0.003606)}
  .svc__name{font-size:calc(1.625rem + var(--over) * 0.007212)}
  .svc__price{font-size:calc(1.375rem + var(--over) * 0.004808)}
  .svc__desc{font-size:calc(1rem + var(--over) * 0.002404)}
  .dark__price{font-size:calc(1.5rem + var(--over) * 0.004808)}
  .label{font-size:calc(.9375rem + var(--over) * 0.002404)}
  .dark__col h3,.hf__label{font-size:calc(2rem + var(--over) * 0.007212)}
  .menu--dark .svc__name{font-size:calc(1.375rem + var(--over) * 0.004808)}
  .pack__n,.pack__total{font-size:calc(1.375rem + var(--over) * 0.004808)}
  .pack__each{font-size:calc(.9375rem + var(--over) * 0.002404)}
  .hf__note{font-size:calc(1rem + var(--over) * 0.002404)}
  .pack thead th{font-size:calc(1.0625rem + var(--over) * 0.002404)}
  .dark{padding-block:calc(140px + var(--over) * 0.06010)}
  .logo{width:calc(230px + var(--over) * 0.06010)}

  /* The pane is 1440px tall on a 27" and the two auto margins split that free
     space evenly, which parked the headline 604px down with nothing but cream
     above it. Growing the body's bottom margin shrinks the space the split
     divides, so the type lifts by half of it while the meta line stays pinned
     to the foot of the pane. The photograph stops at 960 instead of running on
     to 44vw = 1126px, which also crops less of the frame. */
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,min(44vw,960px))}
  .hero__pane{padding-right:calc(80px + var(--over) * 0.04808)}
  .hero__body{margin-bottom:calc(var(--over) * 0.2524)}

  /* The plate's bleed was capped at 96px, so above 1512 it reached neither the
     viewport edge nor the page grid: it hung 96px off the copy column, aligned
     to nothing. The bleed now winds down to zero as the plate itself grows, so
     it lands flush on --wrap. */
  .studio{--bleed:calc(96px - var(--over) * 0.11538);
    --plate:calc(476px + var(--over) * 0.10096);
    grid-template-columns:minmax(0,calc(var(--plate) - var(--bleed))) minmax(0,1fr)}
  .studio__shot{margin-inline:calc(-1 * var(--bleed)) 0}
}