/* Love Skin With Aydan - site styles. Source of truth: automate/scripts/loveskin_verbatim/static/site.css
   (render.py copies it to mockup/assets/css/). Design base: Lanserhof moves (full-bleed hero, grain gradient
   panels, italic serif + caps lockup, 1/3-2/3 splits, pill buttons, floating desktop nav, mobile booking bar)
   in the Love Skin palette and fonts. Light theme only. */

:root {
  --ink: #5B4F47;          /* brand brown: body text + dark pills (7.7:1 on cream) */
  --ink-2: #6c5f56;        /* secondary text, still 5.6:1 on cream */
  --taupe: #96867C;        /* large text, rules, decoration only */
  --stone: #B0A49C;
  --mist: #E4E2DD;
  --cream: #FDFCF9;
  --blush: #EFE4DD;        /* gradient highlight derived from the palette */
  --sand: #E9E3DD;
  --line: rgba(91, 79, 71, .16);
  --serif: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --sans: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --gutter: clamp(16px, 4vw, 56px);
  --maxw: 1440px;
  --radius: 22px;
  --nav-h: 64px;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 72px; --s7: 112px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font: 400 16px/1.7 var(--sans); letter-spacing: .005em;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
::selection { background: var(--stone); color: #fff; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
button, input, textarea, select { font: inherit; color: inherit; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
li { margin-bottom: .35em; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.12; margin: 0 0 .5em; text-wrap: balance; color: var(--ink); }
h2 { font-size: clamp(30px, 3.4vw, 48px); }
h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 600; }
h4 { font-size: 21px; font-weight: 600; }
strong, b { font-weight: 600; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 30; background: var(--ink); color: var(--cream); padding: 10px 16px; border-radius: 999px; }
.skip:focus { left: 8px; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.measure { max-width: 68ch; }
.prose { max-width: 68ch; }
.prose h2 { margin-top: 1.4em; }
.prose h3 { margin-top: 1.2em; }
.lead { font-size: inherit; line-height: inherit; }   /* John 2026-10-27: one paragraph size across the site */
.muted { color: var(--ink-2); }
.center { text-align: center; }

/* ---------- heading lockup: italic serif line + caps line, one heading element ---------- */
.lk { display: block; }
.lk-i { display: block; font-style: italic; font-weight: 400; font-size: .62em; letter-spacing: 0; line-height: 1.15; padding-bottom: .06em; }
.lk-c { display: block; text-transform: uppercase; font-weight: 500; letter-spacing: .05em; line-height: 1.06; }
h1.lk { font-size: clamp(36px, 5vw, 76px); margin: 0 0 .45em; }
h2.lk { font-size: clamp(30px, 3.6vw, 54px); }
.lk-sm.lk { font-size: clamp(28px, 3vw, 44px); }

/* ---------- buttons: fully rounded pills, one radius system ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 28px; border-radius: 999px; border: 1px solid var(--ink);
  background: var(--ink); color: var(--cream); text-decoration: none; white-space: nowrap;
  font: 500 14px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease;
}
.btn:active { transform: scale(.97); }
.btn--light { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--mist { background: var(--mist); color: var(--ink); border-color: var(--mist); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: #4a3f38; color: var(--cream); }
  .btn--light:hover, .btn--mist:hover { background: #fff; color: var(--ink); }
  .btn--ghost:hover { background: var(--ink); color: var(--cream); }
}
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: var(--s3); }
.textlink { font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-size: 13px; text-decoration: underline; }
.chev { display: inline-block; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); margin-left: 4px; }

/* ---------- grain gradient panels (blush / taupe / stone) ---------- */
.grain {
  background-color: var(--sand);
  background-image:
    url("/assets/img/grain.png"),
    radial-gradient(120% 90% at 18% 12%, #f4ebe5 0%, rgba(244,235,229,0) 60%),
    radial-gradient(90% 80% at 88% 92%, #d8ccc3 0%, rgba(216,204,195,0) 62%),
    radial-gradient(70% 60% at 70% 20%, #ebe1da 0%, rgba(235,225,218,0) 70%);
  background-size: 180px 180px, auto, auto, auto;
}
.grain--deep {
  background-color: #d9cec6;
  background-image:
    url("/assets/img/grain.png"),
    radial-gradient(110% 90% at 20% 15%, #eadfd8 0%, rgba(234,223,216,0) 60%),
    radial-gradient(100% 90% at 85% 95%, #c3b4aa 0%, rgba(195,180,170,0) 65%);
  background-size: 180px 180px, auto, auto;
}

/* ---------- header ---------- */
.site-head { position: sticky; top: 0; z-index: 20; }
.nav-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: var(--nav-h); padding: 0 var(--gutter); background: rgba(253, 252, 249, .94);
  border-bottom: 1px solid var(--line);
}
.logo img { height: 34px; width: auto; }
.nav-desk { display: none; }
.menu-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--cream);
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer;
}
.menu-btn span { width: 16px; height: 1.5px; background: var(--ink); display: block; }
.head-book { display: none; }

@media (min-width: 1240px) {
  .site-head { position: fixed; left: 0; right: 0; top: 14px; padding: 0 16px; }
  .nav-bar {
    max-width: 1400px; margin: 0 auto; border: 1px solid var(--line); border-radius: 999px;
    background: rgba(253, 252, 249, .86); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
    padding: 0 10px 0 26px; box-shadow: 0 8px 30px rgba(91, 79, 71, .08);
  }
  .menu-btn { display: none; }
  .nav-desk { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
  .nav-desk > li { position: relative; margin: 0; }
  .nav-desk > li > a, .nav-desk > li > button {
    display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: 999px;
    border: 0; background: none; cursor: pointer; text-decoration: none;
    font: 500 13px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase;
    transition: background-color 180ms ease;
  }
  .nav-desk > li > a[aria-current="page"], .nav-desk > li.is-current > button { background: var(--mist); }
  .nav-desk > li > a:hover, .nav-desk > li > button:hover { background: var(--mist); }
  .nav-desk .caret { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
  .drop {
    position: absolute; top: calc(100% + 10px); left: 0; min-width: 270px; list-style: none; margin: 0; padding: 10px;
    background: var(--cream); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 40px rgba(91, 79, 71, .12);
    opacity: 0; visibility: hidden; transform: translateY(-4px) scale(.98); transform-origin: top left;
    transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s linear 180ms;
  }
  .drop::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
  .nav-desk > li:hover .drop, .nav-desk > li:focus-within .drop, .nav-desk > li.open .drop {
    opacity: 1; visibility: visible; transform: none; transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s;
  }
  /* pointer over one menu: every other menu stays shut, whatever focus or click state it was left in */
  .nav-desk:hover > li:not(:hover) .drop { opacity: 0; visibility: hidden; transition: none; }
  .drop a { display: block; padding: 10px 14px; border-radius: 12px; text-decoration: none; font-size: 14px; line-height: 1.35; }
  .drop a:hover, .drop a[aria-current="page"] { background: var(--mist); }
  .drop li { margin: 0; }
  .drop .drop-all { font-weight: 600; }
  .head-book { display: inline-flex; min-height: 44px; padding: 10px 22px; font-size: 13px; }
  main { padding-top: 0; }
  .page-top { padding-top: 104px; }
}

/* mobile menu sheet */
.sheet { position: fixed; inset: 0; z-index: 40; background: var(--cream); display: flex; flex-direction: column;
  transform: translateY(100%); visibility: hidden; transition: transform 420ms var(--ease-drawer), visibility 0s linear 420ms; }
.sheet.is-open { transform: none; visibility: visible; transition: transform 420ms var(--ease-drawer), visibility 0s; }
.sheet-top { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); padding: 0 var(--gutter); border-bottom: 1px solid var(--line); }
.sheet-close { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--cream); position: relative; cursor: pointer; }
.sheet-close::before, .sheet-close::after { content: ""; position: absolute; left: 13px; right: 13px; top: 21px; height: 1.5px; background: var(--ink); transform: rotate(45deg); }
.sheet-close::after { transform: rotate(-45deg); }
.sheet-body { overflow-y: auto; padding: 12px var(--gutter) 120px; }
.sheet-body > a, .sheet-body summary { display: flex; justify-content: space-between; align-items: center; min-height: 54px; border-bottom: 1px solid var(--line);
  font: 500 26px/1.1 var(--serif); text-decoration: none; cursor: pointer; list-style: none; }
.sheet-body summary::-webkit-details-marker { display: none; }
.sheet-body summary::after { content: ""; width: 9px; height: 9px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg); transition: transform 200ms var(--ease-out); margin-right: 6px; }
.sheet-body details[open] summary::after { transform: rotate(-135deg); }
.sheet-body details a { display: block; padding: 11px 0 11px 14px; text-decoration: none; font-size: 15px; border-bottom: 1px solid rgba(91,79,71,.08); }
.sheet-cta { margin-top: 24px; display: grid; gap: 10px; }
@media (min-width: 1240px) { .sheet { display: none; } }

/* mobile booking bar (Lanserhof bottom bar) */
.book-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(253, 252, 249, .94); border-top: 1px solid var(--line); }
.book-bar .btn { min-height: 48px; padding: 10px 12px; }
body { padding-bottom: 72px; }
@media (min-width: 1240px) { .book-bar { display: none; } body { padding-bottom: 0; } }

/* ---------- hero (home): full-bleed video, centred lockup ---------- */
.hero-v { position: relative; margin: 10px 12px 0; border-radius: var(--radius); overflow: hidden; min-height: calc(100svh - var(--nav-h) - 96px); display: grid; place-items: end center; background: #3d342e; }
.hero-v video, .hero-v .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-v::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40,33,29,.15) 0%, rgba(40,33,29,.25) 45%, rgba(40,33,29,.62) 100%); }
.hero-v .hero-in { position: relative; z-index: 1; text-align: center; color: var(--cream); padding: 0 20px 56px; max-width: 980px; }
.hero-v h1, .hero-v h1 span { color: var(--cream); }
.hero-v .btn { margin-top: 8px; }
@media (min-width: 1240px) {
  .hero-v { margin: 0; border-radius: 0; min-height: 100svh; place-items: center; }
  .hero-v .hero-in { padding: 120px 24px 40px; }
}
.rise { animation: rise 760ms var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rise { animation: fade 300ms ease both; } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } }

/* ---------- split: 1/3 gradient panel + 2/3 photo; mobile = panel title, photo, then text ---------- */
.split { display: grid; grid-template-columns: 1fr; grid-template-areas: "head" "media" "body"; }
.split > .sp-bg { grid-area: head; }
.split > .sp-head { grid-area: head; position: relative; padding: var(--s5) var(--gutter) var(--s4); }
.split > .sp-media { grid-area: media; position: relative; min-height: 0; }
.split > .sp-body { grid-area: body; padding: var(--s4) var(--gutter) var(--s5); }
.split > .sp-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.split > .sp-media.sq img { aspect-ratio: 1 / 1; }
.split .sp-head > :last-child { margin-bottom: 0; }
.split .sp-body > :last-child { margin-bottom: 0; }
.split--nobody > .sp-head { padding-bottom: var(--s5); }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: auto 1fr; grid-template-areas: "head media" "body media"; min-height: min(92vh, 860px); }
  .split > .sp-bg { grid-area: 1 / 1 / 3 / 2; }
  .split > .sp-head { padding: clamp(56px, 8vw, 120px) clamp(28px, 4vw, 64px) var(--s3); align-self: end; }
  .split > .sp-body { padding: 0 clamp(28px, 4vw, 64px) clamp(48px, 6vw, 96px); position: relative; }
  .split--nobody > .sp-head { align-self: center; padding-bottom: clamp(56px, 8vw, 120px); grid-row: 1 / 3; }
  .split > .sp-media img { aspect-ratio: auto; position: absolute; inset: 0; }
  .split--rev { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: "media head" "media body"; }
  .split--rev > .sp-bg { grid-area: 1 / 2 / 3 / 3; }
  .split--half { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--sm { min-height: 0; }
  .split--sm > .sp-media { min-height: 520px; }
  .split--sqmedia { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .split--sqmedia.split--rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .split--sqmedia > .sp-media img { object-fit: cover; }
}
.split + .split { margin-top: 0; }

/* ---------- plain sections ---------- */
.sec { padding: clamp(56px, 8vw, 120px) 0; }
.sec--tight { padding: clamp(40px, 5vw, 72px) 0; }
.sec--mist { background: var(--mist); }
.sec-head { margin-bottom: var(--s4); }
.sec-head h2 { margin-bottom: .25em; }
.cols-2 { display: grid; gap: var(--s5); }
@media (min-width: 900px) { .cols-2 { grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); } }
.intro-text { max-width: 64ch; }   /* body size, same as every other paragraph (John 2026-10-27) */
.intro-text strong, .intro-text b { font-weight: 600; }

/* editorial split: 1/3 heading column + 2/3 content (FAQ groups, lists) */
.ed { display: grid; gap: var(--s4); }
@media (min-width: 900px) { .ed { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(40px, 6vw, 96px); } .ed-side { position: sticky; top: 110px; align-self: start; } }
.ed-side img { border-radius: var(--radius); width: 100%; aspect-ratio: 4 / 5; object-fit: cover; margin-top: var(--s3); }

/* numbered options (concern pages: the 2 treatment options) */
.opts { display: grid; gap: var(--s5); counter-reset: opt; }
@media (min-width: 900px) { .opts { grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); } }
.opt { border-top: 1px solid var(--line); padding-top: var(--s4); }
.opt-n { font: italic 400 46px/1 var(--serif); color: var(--taupe); display: block; margin-bottom: 12px; }
.opt h2 { font-size: clamp(26px, 2.4vw, 34px); }

/* numbered list (benefits) */
.nlist { list-style: none; padding: 0; margin: 0; counter-reset: n; display: grid; gap: 0; }
.nlist li { counter-increment: n; display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--line); margin: 0; }
.nlist li::before { content: counter(n, decimal-leading-zero); font: italic 400 34px/1 var(--serif); color: var(--taupe); }
.nlist li h3 { font-size: clamp(20px, 1.8vw, 24px); margin: 0; font-weight: 500; }

/* two-column list (who should avoid etc.) */
.list-2 { columns: 1; column-gap: 40px; }
@media (min-width: 700px) { .list-2 { columns: 2; } }
.list-2 li { break-inside: avoid; }

/* ---------- FAQ accordion (native details) ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 22px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3, .faq summary h2 { margin: 0; font-size: clamp(20px, 1.7vw, 24px); font-weight: 500; }
.faq summary::after { content: ""; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line);
  background: linear-gradient(var(--ink), var(--ink)) center / 11px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 11px no-repeat; transition: transform 200ms var(--ease-out); }
.faq details[open] summary::after { background: linear-gradient(var(--ink), var(--ink)) center / 11px 1.5px no-repeat; transform: rotate(180deg); }
.faq .ans { padding: 0 0 22px; max-width: 68ch; }
.faq .ans > :last-child { margin-bottom: 0; }
.faq-group + .faq-group { margin-top: var(--s6); }

/* ---------- statement / pull quote ---------- */
.statement { padding: clamp(80px, 12vw, 180px) var(--gutter); text-align: center; }
.statement blockquote { margin: 0 auto; max-width: 26ch; font: italic 400 clamp(30px, 3.6vw, 54px)/1.18 var(--serif); }
.statement blockquote p { margin: 0; }
.statement figcaption { margin-top: 22px; font: 500 12px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.statement h2 { max-width: 22ch; margin: 0 auto .6em; }

/* ---------- photo tiles (what we do best, treatments hub) ---------- */
.tiles { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter) 8px; scrollbar-width: thin; }
.tile { position: relative; display: block; border-radius: var(--radius); overflow: hidden; text-decoration: none; scroll-snap-align: start; background: var(--mist); }
.tile img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 600ms var(--ease-out); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40,33,29,0) 45%, rgba(40,33,29,.6) 100%); }
.tile-cap { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 1; color: var(--cream); }
.tile-cap h2, .tile-cap h3 { color: var(--cream); font: italic 400 clamp(26px, 2.4vw, 36px)/1.1 var(--serif); margin: 0; }
.tile-cap span { display: block; margin-top: 6px; font: 500 12px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) { .tile:hover img { transform: scale(1.03); } }
@media (min-width: 900px) {
  .tiles { grid-auto-flow: row; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); overflow: visible; padding: 0; }
  .tiles--4 { --cols: 4; }
}
.tile-ph { aspect-ratio: 4 / 5; display: grid; place-items: center; padding: 24px; }

/* concern grid (hub): photo tiles 3 across, 2 on phones */
.cgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 900px) { .cgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.cgrid .tile img { aspect-ratio: 1 / 1; }
.cgrid .tile-cap { left: 14px; right: 14px; bottom: 12px; }
.cgrid .tile-cap h2 { font-size: clamp(20px, 2.2vw, 32px); }
.cgrid .tile-cap p { margin: 6px 0 0; font-size: 13px; line-height: 1.45; display: none; }
@media (min-width: 900px) { .cgrid .tile-cap p { display: block; } }

/* ---------- horizontal strips: before/after + reviews ---------- */
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--gutter) 14px; scroll-padding: 0 var(--gutter); scrollbar-width: thin; scrollbar-color: var(--stone) transparent; }
.strip > * { scroll-snap-align: start; }
@media (min-width: 700px) { .strip { grid-auto-columns: 42%; } }
@media (min-width: 1240px) { .strip { grid-auto-columns: calc((100% - 2 * var(--gutter) - 36px) / 4); } }
.strip img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; background: var(--mist); }
.strip-nav { display: none; gap: 8px; }
@media (min-width: 1240px) { .strip-nav { display: flex; } }
.strip-nav button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--cream); cursor: pointer; display: grid; place-items: center; transition: transform 160ms var(--ease-out); }
.strip-nav button:active { transform: scale(.95); }
.strip-nav button span { width: 9px; height: 9px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(135deg); margin-left: 4px; }
.strip-nav button + button span { transform: rotate(-45deg); margin: 0 4px 0 0; }
.strip-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: var(--s3); }

.rv { background: var(--cream); border: 1px solid var(--line); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; }
.rv-text { margin: 0; font-size: 15px; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.rv.is-open .rv-text { -webkit-line-clamp: unset; display: block; }
.rv-more { align-self: start; margin-top: 10px; background: none; border: 0; padding: 6px 0; cursor: pointer; font: 500 12px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; text-decoration: underline; text-underline-offset: .25em; }
.rv-who { margin-top: auto; padding-top: 18px; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; border-top: 1px solid var(--line); margin-top: 18px; }
.rv-name { font: 600 15px/1.3 var(--sans); }
.rv-src { font: 500 11px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.rv-strip { grid-auto-columns: 86%; }
@media (min-width: 700px) { .rv-strip { grid-auto-columns: 46%; } }
@media (min-width: 1240px) { .rv-strip { grid-auto-columns: calc((100% - 2 * var(--gutter) - 24px) / 3); } }

/* gallery grid */
.ggrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 900px) { .ggrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.ggrid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; background: var(--mist); }
.ggrid figure { margin: 0; }
.ggrid figcaption { font: 500 11px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-top: 8px; }
/* gallery groups by concern + treatment filter (2026-10-27) */
.gfilter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: var(--s5); }
.gfilter .label { margin: 0 8px 0 0; }
.gfilter .btn { min-height: 40px; padding: 8px 18px; font-size: 12px; }
.gfilter .btn[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.gsec + .gsec { margin-top: var(--s6); }
.gsec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 18px; }
.gsec-head h2 { margin: 0; }
.gsec-n { font: 500 13px/1 var(--sans); letter-spacing: .1em; color: var(--ink-2); vertical-align: middle; margin-left: 6px; }

/* pricing table */
.price { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.price th { text-align: left; font: 500 12px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); padding: 0 12px 12px 0; border-bottom: 1px solid var(--ink); }
.price td { padding: 18px 12px 18px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.price td:first-child { font: 500 clamp(19px, 1.6vw, 23px)/1.25 var(--serif); }
.price td:last-child, .price th:last-child { text-align: right; padding-right: 0; white-space: nowrap; }
.price td:nth-child(2) { white-space: nowrap; color: var(--ink-2); }

/* related row */
.related { display: flex; flex-wrap: wrap; gap: 10px; }
.related a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 20px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; font-size: 14px; background: var(--cream); transition: background-color 180ms ease; }
.related a:hover { background: var(--mist); }

/* team */
.team { display: grid; gap: var(--s5); }
@media (min-width: 900px) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }
.member img, .member .ph { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.member h2 { font-size: clamp(30px, 2.6vw, 40px); margin: 18px 0 2px; }
.member .role { font: 500 12px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 14px; }

/* ASK AYDAN placeholder: visible on purpose until the client supplies the content */
.ask { border: 1.5px dashed var(--taupe); background: repeating-linear-gradient(135deg, #f6f1ec 0 12px, #f1ebe5 12px 24px); border-radius: 16px; padding: 18px 20px; color: var(--ink); font: 600 13px/1.5 var(--sans); letter-spacing: .04em; margin: 0 0 16px; }
.ask::before { content: "Placeholder"; display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 4px; font-weight: 500; }
.ph { display: grid; place-items: center; padding: 24px; }
.ph .ask { margin: 0; max-width: 34ch; }

/* contact */
.form { display: grid; gap: 14px; }
.form .row2 { display: grid; gap: 14px; }
@media (min-width: 640px) { .form .row2 { grid-template-columns: 1fr 1fr; } }
.form label { display: grid; gap: 6px; font: 500 13px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.form input, .form textarea { width: 100%; border: 1px solid var(--stone); background: #fff; border-radius: 14px; padding: 14px 16px; font-size: 16px; text-transform: none; letter-spacing: 0; }
.form textarea { min-height: 150px; resize: vertical; }
.form input:focus, .form textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.form .note { font-size: 13px; color: var(--ink-2); margin: 0; }
.cinfo { list-style: none; padding: 0; margin: 0; }
.cinfo li { padding: 18px 0; border-top: 1px solid var(--line); margin: 0; }
.cinfo span { display: block; font: 500 12px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 4px; }
.cinfo a { font: 500 clamp(20px, 1.8vw, 26px)/1.3 var(--serif); text-decoration: none; overflow-wrap: anywhere; }
.cinfo a:hover { text-decoration: underline; }

/* blog cards + article */
.posts { display: grid; gap: var(--s5); }
@media (min-width: 900px) { .posts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }
.post-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); }
.post-card h2, .post-card h3 { font-size: clamp(24px, 2vw, 30px); margin: 18px 0 10px; }
.post-card h2 a, .post-card h3 a { text-decoration: none; }
.article-hero img { width: 100%; max-height: 640px; object-fit: cover; border-radius: var(--radius); }
.article { padding-top: var(--s5); }
.article .prose { margin: 0 auto; }   /* body size (John 2026-10-27) */
.article-nav { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; max-width: 68ch; margin: var(--s5) auto 0; padding-top: var(--s3); border-top: 1px solid var(--line); }
.legal h3 { font-size: 24px; margin-top: 1.6em; }

/* breadcrumbs */
.crumbs { font: 500 12px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 18px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--stone); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ---------- footer (compact on mobile) ---------- */
.foot { background: var(--mist); padding: clamp(48px, 6vw, 88px) 0 28px; margin-top: 0; }
.foot-grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 56px; } }
.foot-logo img { height: 40px; width: auto; }
.foot-title { font: 500 24px/1.2 var(--serif); margin: 18px 0 8px; }
.foot-blurb { font-size: 14px; max-width: 52ch; }
.foot h2 { font: 500 12px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 10px; }
.foot-links { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }
.foot-links li { margin: 0; }
.foot-links a, .foot-contact a { display: inline-block; padding: 7px 0; text-decoration: none; font-size: 14px; }
.foot-links a:hover, .foot-contact a:hover { text-decoration: underline; }
.foot-contact { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.foot-contact li { margin: 0; }
.foot-base { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; font-size: 12.5px; color: var(--ink-2); }
.foot-base nav { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-base a { text-decoration: none; padding: 6px 0; display: inline-block; }
.foot-base a:hover { text-decoration: underline; }

/* ads landing chrome (monthly offers + Socials): the site header with logo + one booking pill, slim footer.
   Below 520px the pill hides and the mobile booking bar (Call + Book now) carries the booking. */
.site-head--land .head-book { display: inline-flex; min-height: 44px; padding: 10px 20px; font-size: 12px; }
@media (max-width: 520px) { .site-head--land .head-book { display: none; } }
@media (min-width: 1240px) { .site-head--land .head-book { padding: 10px 22px; font-size: 13px; } }
.foot--slim { padding-top: 36px; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 40px; }
.foot--slim .foot-logo img { height: 30px; }
.foot--slim .foot-contact { display: flex; flex-wrap: wrap; gap: 0 28px; }
.foot--slim .foot-base { margin-top: 20px; }
@media (max-width: 899px) { .foot--slim { padding-top: 32px; } .foot--slim .foot-contact { flex-direction: column; } }

/* 404 */
.nf { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 120px var(--gutter) 80px; }

/* ---------- round-1 fixes ---------- */
@media (max-width: 560px) { .btn { white-space: normal; text-align: center; } }
.hero-v video { opacity: 0; transition: opacity 600ms ease; }
.hero-v video.is-playing { opacity: 1; }
.sp-media.contain img { object-fit: contain; background: var(--cream); }
@media (max-width: 1239px) { body { padding-bottom: 0; } .foot { padding-bottom: calc(28px + 72px + env(safe-area-inset-bottom)); } }
.clamp4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 900px) { .split--hero { min-height: min(86vh, 760px); } }
/* ---------- round-2 fixes ---------- */
@media (min-width: 900px) { .tiles { padding: 0 var(--gutter); } }
@media (max-width: 899px) {
  .cgrid > .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cgrid > .tile:last-child:nth-child(odd) img { aspect-ratio: 16 / 9; }
  .member .ph { aspect-ratio: 3 / 2 !important; }
  .foot-links { grid-template-columns: 1fr 1fr 1fr; }
}

/* ---------- footer, mobile tidy (John 2026-10-20) ---------- */
.foot .foot-follow { margin-top: 22px; }
.foot-social { display: flex; gap: 10px; }
.foot-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); }
.foot-social a:hover { background: var(--cream); }
@media (max-width: 1239px) { .foot-cta { display: none; } }
@media (max-width: 899px) {
  .foot { padding-top: 40px; }
  .foot-grid { gap: 22px; }
  .foot-logo img { height: 30px; }
  .foot-title { font-size: 20px; margin: 14px 0 6px; }
  .foot-blurb { font-size: 13px; line-height: 1.6; margin: 0; }
  .foot h2 { margin-bottom: 4px; }
  .foot-links a, .foot-contact a { padding: 5px 0; font-size: 13.5px; }
  .foot-grid > div:last-child { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; align-items: start; }
  .foot-grid > div:last-child > h2:first-child { grid-column: 1 / -1; }
  .foot-grid > div:last-child > .foot-contact { grid-column: 1; }
  .foot-follow { display: none; }
  .foot-social { grid-column: 2; grid-row: 2; flex-direction: column; }
  .foot-base { margin-top: 22px; padding-top: 14px; font-size: 12px; flex-direction: column; gap: 4px; }
  .foot-base nav { gap: 16px; }
}

/* ---------- ads landing pages: copy roles + components (2026-10-20). The section labels, badges and trust
   lines are John's locked ad copy, so they stay; they get one quiet role each instead of the old landing CSS. ---------- */
.label { font: 500 12px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 14px; }
.badge { display: inline-block; font: 500 11.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--ink-2); border-radius: 999px; padding: 8px 16px; margin: 0 0 22px; }
.trust { font-size: 13px; line-height: 1.5; color: var(--ink-2); margin: 14px 0 0; }
.btn-row .trust { margin: 0; flex: 1 1 220px; }
.hx em { display: block; font-weight: 400; color: var(--ink-2); padding-bottom: .06em; }
.grain--deep .label, .grain--deep .trust, .grain--deep .hx em, .grain--deep .meta3 span { color: var(--ink); }
.split--hero .lead { margin-top: 4px; }
.statement--text h2 { max-width: 24ch; }
.statement .measure { margin: 0 auto; }
.statement .btn { margin-top: 30px; }
.statement .trust { margin-top: 14px; }
.sec-head .measure { margin: 0; }

/* three pathways / treatment areas: equal columns because the three options are equal; the first is the featured one */
.paths { display: grid; gap: var(--s5); }
@media (min-width: 900px) { .paths { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 56px); } }
.path { border-top: 1px solid var(--ink); padding-top: var(--s3); display: flex; flex-direction: column; }
@supports (grid-template-rows: subgrid) { @media (min-width: 900px) { .path { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; } .path > * { justify-self: start; } .path .path-ideal { margin-top: 0; justify-self: stretch; } } }   /* tag, title, quote, text and 'Common for' line up across the three columns */
.path-tag { align-self: start; font: 500 11.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 16px; padding: 7px 0; }
.path--feat .path-tag { background: var(--ink); color: var(--cream); border-radius: 999px; padding: 7px 14px; }
.path h3 { margin-bottom: .25em; }
.path-sit { font: italic 400 clamp(21px, 1.9vw, 26px)/1.3 var(--serif); margin-bottom: .7em; }
.path-ideal { margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; }

/* condition lists */
.tlist { list-style: none; padding: 0; margin: 0; }
.tlist li { position: relative; padding: 5px 0 5px 22px; margin: 0; break-inside: avoid; }
.tlist li::before { content: ""; position: absolute; left: 0; top: calc(5px + .85em); width: 10px; height: 1px; background: var(--taupe); }
@media (min-width: 700px) { .tlist--2 { columns: 2; column-gap: 32px; } }

/* numbered protocol steps (the order is the protocol, so the numbers carry information) */
.steps { list-style: none; padding: 0; margin: var(--s4) 0 0; counter-reset: st; display: grid; }
.steps li { counter-increment: st; display: grid; align-content: start; grid-template-columns: 52px 1fr; column-gap: 12px; padding: 20px 0; border-top: 1px solid var(--line); margin: 0; }
.steps li::before { content: counter(st); grid-row: 1 / 3; font: italic 400 34px/1 var(--serif); color: var(--taupe); }
.steps h3 { font-size: clamp(20px, 1.8vw, 24px); font-weight: 500; margin: 0 0 4px; }
.steps p { margin: 0; }
@media (min-width: 900px) {
  .steps--row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 56px); }
  .steps--row li { grid-template-columns: 1fr; padding-top: 24px; }
  .steps--row li::before { grid-row: auto; margin-bottom: 16px; font-size: 44px; }
}
.early { display: grid; gap: var(--s5); }
@media (min-width: 900px) { .early { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; } .callout { position: sticky; top: 110px; } }
.callout { border-radius: var(--radius); padding: clamp(28px, 4vw, 52px); }
.callout blockquote { margin: 0 0 20px; font: italic 400 clamp(26px, 2.6vw, 38px)/1.2 var(--serif); }
.callout blockquote p { margin: 0; }
.callout .badge { margin: 8px 0 0; }

/* offer pricing table: name + note in one cell; stacks on phones */
.price--offer tbody th { text-align: left; font: 400 16px/1.5 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); padding: 18px 16px 18px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.pn { display: block; font: 500 clamp(19px, 1.6vw, 23px)/1.25 var(--serif); }
.ps { display: block; font-size: 14px; line-height: 1.55; color: var(--ink-2); margin-top: 4px; }
.price--offer td:nth-child(2) { font-weight: 600; white-space: nowrap; color: var(--ink); }
.price--offer td:last-child { color: var(--ink-2); font-weight: 400; }
.price--offer .is-free td:nth-child(2) { text-transform: uppercase; letter-spacing: .1em; font-size: 14px; }
.price-note { font-size: 14px; margin: 18px 0 0; }
@media (max-width: 639px) {
  .price--offer thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .price--offer tr { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .price--offer tbody th { grid-column: 1 / -1; border: 0; padding: 0 0 8px; }
  .price--offer td { border: 0; padding: 0; }
}

/* final CTA contact row */
.meta3 { list-style: none; padding: 0; margin: 44px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 48px; }
.meta3 li { margin: 0; display: grid; gap: 2px; }
.meta3 span { font: 500 11.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.meta3 a { font: 500 20px/1.3 var(--serif); text-decoration: none; padding: 4px 0; }
.meta3 a:hover { text-decoration: underline; }

/* monthly offers hub: two large offer tiles */
.tiles--2 { grid-auto-flow: row; grid-template-columns: 1fr; overflow: visible; gap: 16px; }
.tiles--2 .tile-cap p { margin: 4px 0 0; font: italic 400 clamp(18px, 1.6vw, 22px)/1.3 var(--serif); color: var(--cream); }
@media (min-width: 900px) { .tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tiles--2 .tile img { aspect-ratio: 4 / 3; } }

/* 2026-10-26: three-up option rows (concern treatments, gift voucher steps, treatments hub) + home hero sub line */
@media (min-width: 1100px) { .opts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 64px); } }
.hero-v .hero-sub { color: var(--cream); margin: 14px auto 26px; max-width: 46ch; }
.nav-desk > li.nav-wide { display: none; }
@media (min-width: 1440px) { .nav-desk > li.nav-wide { display: list-item; } .nav-desk > li > a { white-space: nowrap; } }
.tile--text::after { display: none; }   /* photo-less tiles: no dark fade over the grain */

/* page balance (2026-10-27): photo on top of a card; numbered step cards */
.opt > .opt-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); margin: 0 0 var(--s3); }
.steps-grid { margin-top: var(--s5); }
.steps-grid .opt h3 { font-size: clamp(22px, 2vw, 26px); margin: 0 0 10px; }
.step > summary { list-style: none; }
.step > summary::-webkit-details-marker { display: none; }
@media (max-width: 899px) {
  .step > summary { cursor: pointer; position: relative; padding-right: 36px; }
  .step > summary::after { content: "+"; position: absolute; right: 0; bottom: 12px; font: 300 26px/1 var(--sans); color: var(--ink-2); }
  .step[open] > summary::after { content: "–"; }
  .steps-grid { gap: var(--s3); }
}

/* go-live sweep (2026-10-27): customer-eye review fixes */
/* carousels line up with the page column on wide screens instead of starting at the window edge */
@media (min-width: 1240px) {
  .strip { padding-inline: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
           scroll-padding-inline: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
           grid-auto-columns: calc((min(100%, var(--maxw)) - 2 * var(--gutter) - 36px) / 4); }
}
.tiles { scroll-padding-inline: var(--gutter); }
/* card rows: buttons line up along the bottom whatever the text length */
.opts--3 .opt { display: flex; flex-direction: column; }
.opts--3 .opt > .btn:last-child, .opts--3 .opt > .btn-row:last-child { margin-top: auto; align-self: flex-start; }
/* two grey sections in a row read as one band, not a double gap */
.sec--mist + .sec--mist { padding-top: 0; }
/* team members without a photo yet: name cards, no empty frame */
.member--text { border-top: 1px solid var(--line); padding-top: var(--s3); align-self: start; }
.member--text h2 { margin-top: 0; }
/* FAQ beside a photo: the photo never towers over a closed accordion */
@media (min-width: 900px) { .ed-side img { max-height: 520px; } }
/* phones: the page title already names the page, so the last breadcrumb is dropped (no lone "/" on a second line) */
@media (max-width: 599px) { .crumbs li:last-child { display: none; } }
.nowrap { white-space: nowrap; }
@media (min-width: 900px) {
  .team:has(.member--lead) { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s5); }
  .member--lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
  .member--lead h2 { margin-top: 0; }
}

/* stacked strips (John 2026-10-27): on desktop the before/afters sit in a grid and the reviews in a stacked wall; phones keep the swipe */
.strip-more, .strip-more-row { display: none; }
@media (min-width: 900px) {
  .strip.strip--stack { grid-auto-flow: row; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 16px; overflow: visible; scroll-snap-type: none;
                        max-width: var(--maxw); margin: 0 auto; padding: 4px var(--gutter) 0; }
  .strip--stack > .more { display: none; }
  .strip--stack.is-all > .more { display: block; }
  .strip.rv-strip--stack { display: block; columns: 2; column-gap: 16px; overflow: visible; max-width: var(--maxw); margin: 0 auto; padding: 4px var(--gutter) 0; }
  .rv-strip--stack > .rv { break-inside: avoid; margin-bottom: 16px; }
  .rv-strip--stack > .rv.more { display: none; }
  .rv-strip--stack.is-all > .rv.more { display: flex; }
  .rv-strip--stack .rv-text { -webkit-line-clamp: 9; }
  .strip-nav--swipe { display: none; }
  .strip-more { display: inline-flex; }
  .strip-more-row { display: flex; }
  .strip-more[hidden] { display: none; }
  .strip.rv-strip--stack.is-masonry { display: grid; columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-rows: 4px; gap: 0 16px; }
  .rv-strip--stack.is-masonry > .rv { align-self: start; }
}
@media (min-width: 1200px) {
  .strip.rv-strip--stack { columns: 3; }
  .strip.rv-strip--stack.is-masonry { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}