/* STILLRAUM — one stylesheet, no build step.
   The page is a deep conifer-green room you are inside of, not a white page with
   things placed on it. Every photograph is graded into that green and relit with
   blurred radial gradients, so one set of stock images reads as one lit space.
   One typeface only: Jost, 200–500. Hierarchy comes from size, tracking and
   position — never from a second face, never from bold.
   The signature is still the duration rail: each treatment's bottom hairline is
   filled in amber to the length of the treatment in minutes. Time is the product,
   so time is the graphic — restated here as the rule under the whole row.
   The one bright object in the dark house is the voucher card. It is paper on
   screen because it is paper on the printer. */

/* ── Font ──────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Jost";
  src: url("fonts/jost-var-latin.woff2?v=928f4210") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallback. Jost: upm 1000, asc 1070, desc 375, x-height 460.
   Arial x-height ratio .5186 → size-adjust .460/.5186 = 88.7 %, and the line-box
   overrides are divided by that so the swap does not move a single line. */
@font-face {
  font-family: "Jost-fb";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 88.7%;
  ascent-override: 120.6%;
  descent-override: 42.3%;
  line-gap-override: 0%;
}

/* ── Tokens ────────────────────────────────────────────────────────── */
:root {
  --g-0: #081a14;   /* deepest — under photographs, footer */
  --g-1: #0e2a21;   /* deep band */
  --g-2: #194f3e;   /* the room itself — body */

  --ink: #f4f0e6;   /* 9.1:1 on --g-2 */
  --ink-2: #d8d2c1; /* 6.2:1 on --g-2 */
  --ink-3: #b7c2b2; /* 5.2:1 on --g-2 */
  --amber: #ebbb7c; /* 5.3:1 on --g-2 */

  --hair: rgba(240, 234, 214, .19);
  --hair-2: rgba(240, 234, 214, .40);

  --paper: #f8f4eb;
  --paper-ink: #1a201c;
  --paper-ink-2: #4b5350;
  --paper-hair: #d8d2c4;

  --sans: "Jost", "Jost-fb", "Century Gothic", Arial, sans-serif;

  --gut: clamp(20px, 5vw, 68px);
  --sec: clamp(76px, 11vw, 152px);
  --head-h: 60px;
  --wrap: 1280px;
}
@media (max-width: 700px) { :root { --head-h: 54px; } }

/* ── Base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--g-2); }
body {
  margin: 0;
  background: var(--g-2);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 350;
  line-height: 1.75;
  letter-spacing: .012em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font-family: inherit; }
p { margin: 0 0 1.15em; }
h1, h2, h3, h4 { margin: 0 0 .6em; font-weight: 300; }
a { color: inherit; }
::selection { background: var(--amber); color: var(--g-0); }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--gut); top: -90px; z-index: 90;
  background: var(--amber); color: var(--g-0);
  padding: 13px 22px; text-decoration: none;
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
  transition: top .18s ease;
}
.skip:focus { top: 10px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: 940px; }

/* ── Type ──────────────────────────────────────────────────────────── */
/* Everything above is Jost. What separates a heading from a caption is how much
   air is between the letters and how small it dares to be. */
.eyebrow {
  font-size: .68rem; font-weight: 400;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--amber); margin: 0 0 1.5em;
}
h1, h2 {
  text-transform: uppercase;
  font-weight: 250;
  letter-spacing: .17em;
  line-height: 1.62;
  text-wrap: balance;
}
h1 { font-size: clamp(1.08rem, 1.9vw, 1.62rem); }
h2 { font-size: clamp(1.02rem, 1.7vw, 1.42rem); }
h3 { font-weight: 350; }

.lead {
  font-size: clamp(1.04rem, 1.4vw, 1.22rem);
  font-weight: 300; line-height: 1.72; color: var(--ink-2);
  max-width: 40ch;
}
.centered { text-align: center; }
.centered .lead, .centered .eyebrow { margin-inline: auto; }
.note { font-size: .9rem; color: var(--ink-3); max-width: 44em; margin-top: 2.4em; }
/* The line that says whose phone number this really is. It has to be read, so it
   sits on its own hairline instead of hiding in the small print. */
.disc {
  border-top: 1px solid var(--hair);
  padding-top: 15px; margin-top: 2em; margin-bottom: 1.5em;
  max-width: 34em;
  font-size: .88rem; font-weight: 300; line-height: 1.7;
  color: var(--ink-3); text-wrap: pretty;
}
.disc strong { color: var(--amber); font-weight: 400; }
.tnum { font-variant-numeric: tabular-nums; }

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: .72rem; font-weight: 400;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--g-0); background: var(--amber);
  border: 1px solid var(--amber); border-radius: 0;
  padding: 15px 30px; text-decoration: none; cursor: pointer;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.btn:hover { background: var(--ink); border-color: var(--ink); }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--hair-2); }
.btn--ghost:hover { background: transparent; border-color: var(--amber); color: var(--amber); }

.lnk {
  color: var(--amber); text-decoration: underline;
  text-underline-offset: .34em; text-decoration-thickness: 1px;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  transition: color .3s ease;
}
.lnk:hover { color: var(--ink); }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; margin: 0; }
.centered .acts { justify-content: center; }

/* ── Demo notice ───────────────────────────────────────────────────── */
.demo-note {
  position: relative; z-index: 50;
  background: var(--g-0);
  display: flex; align-items: center; gap: 14px;
  padding: 9px var(--gut);
}
.demo-note p { margin: 0; font-size: .74rem; letter-spacing: .06em; line-height: 1.5; color: var(--ink-3); }
.demo-note strong { font-weight: 500; color: var(--ink); letter-spacing: .14em; text-transform: uppercase; font-size: .7rem; }
.demo-note a { color: var(--amber); text-underline-offset: .22em; }
.demo-note__x {
  margin-left: auto; flex: none;
  width: 28px; height: 28px; display: grid; place-items: center;
  background: none; border: 1px solid var(--hair); color: var(--ink-3);
  cursor: pointer; transition: color .25s ease, border-color .25s ease;
}
.demo-note__x:hover { color: var(--amber); border-color: var(--amber); }

/* ── Header ────────────────────────────────────────────────────────── */
/* Height is fixed so the hero can slide under it without a single pixel of shift. */
.head {
  position: sticky; top: 0; z-index: 40;
  height: var(--head-h);
  background: rgba(8, 26, 20, .58);
  backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 1px solid rgba(240, 234, 214, .12);
}
.head__in { display: flex; align-items: center; gap: 22px; height: 100%; }
.brand {
  font-size: .86rem; letter-spacing: .42em; text-transform: uppercase;
  font-weight: 400; text-decoration: none; color: var(--ink);
}
.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(14px, 2.4vw, 32px); }
.nav a {
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-3);
  transition: color .3s ease;
}
.nav a:hover { color: var(--ink); }
.nav__cta { color: var(--amber) !important; border: 1px solid rgba(235, 187, 124, .5); padding: 7px 14px; }
.nav__cta:hover { border-color: var(--amber); background: rgba(235, 187, 124, .12); }
/* Language — host for the dropdown js/i18n.js injects (button + listbox). The
   box is reserved here, matching the injected control, so filling it after load
   costs no layout shift. The four --wdm-lang-* variables are the only thing the
   control reads from us: the deepest green, the room's ink, an amber hairline
   like the CTA next to it. */
.lang-host {
  display: flex; align-items: center; flex: 0 0 auto;
  min-width: 47px; min-height: 30px;
  --wdm-lang-font: var(--sans);
  --wdm-lang-bg: var(--g-0);
  --wdm-lang-fg: var(--ink);
  --wdm-lang-border: rgba(235, 187, 124, .5);
}
@media (max-width: 760px) { .nav--wide { display: none; } }
@media (max-width: 420px) {
  .brand { font-size: .74rem; letter-spacing: .28em; }
  .nav a { font-size: .62rem; letter-spacing: .14em; }
  .nav__cta { padding: 6px 10px; }
}

:target { scroll-margin-top: calc(var(--head-h) + 20px); }

/* ══════════════════════════════════════════════════════════════════════
   The room: graded photography + fake volumetric relight
   ══════════════════════════════════════════════════════════════════ */
/* One photograph, three layers: the picture desaturated and darkened, a flat
   green pass so it belongs to the room, and a depth gradient so the type has
   somewhere dark to sit. No canvas, no WebGL, no GPU risk.
   The green pass is deliberately a plain alpha fill and not `mix-blend-mode`:
   a blend mode over a full-bleed photograph forces its own compositing surface,
   which measured as the single most expensive thing on the page under software
   rasterisation. Desaturating the photograph first gets the same cast for free. */
.frame { position: relative; overflow: hidden; background: var(--g-0); }
.frame > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.4) contrast(1.05) brightness(1.02);
}
.frame::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(21, 74, 57, .44);
}
.frame::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(to bottom, rgba(8, 26, 20, .62) 0%, rgba(8, 26, 20, .14) 34%, rgba(8, 26, 20, .55) 74%, rgba(8, 26, 20, .92) 100%);
}
.frame > .relight { z-index: 3; }
.frame > .frame__in { position: relative; z-index: 4; }

/* Fake volumetric mood-light — a tinted radial gradient sitting behind the copy,
   so one stock photograph looks lit for this room. The recipe reaches for
   `filter: blur(80px)` over a two-stop gradient; a hand-shaped multi-stop
   gradient lands in the same place for free, and a full-viewport blur on an
   animated element is the one thing here that would actually cost a frame. */
.relight { position: absolute; pointer-events: none; border-radius: 50%; }
.relight--warm {
  width: 96vw; height: 96vw; max-width: 1180px; max-height: 1180px;
  left: -18%; bottom: -38%;
  background: radial-gradient(circle closest-side,
    rgba(240, 196, 133, .30) 0%, rgba(238, 190, 126, .22) 22%,
    rgba(232, 176, 108, .13) 44%, rgba(226, 166, 96, .05) 66%,
    rgba(220, 160, 90, .015) 82%, rgba(220, 160, 90, 0) 100%);
}
.relight--cool {
  width: 84vw; height: 84vw; max-width: 1000px; max-height: 1000px;
  right: -22%; top: -34%;
  background: radial-gradient(circle closest-side,
    rgba(108, 208, 166, .20) 0%, rgba(88, 186, 148, .14) 24%,
    rgba(56, 140, 108, .08) 48%, rgba(40, 112, 86, .03) 70%,
    rgba(33, 96, 73, .01) 86%, rgba(33, 96, 73, 0) 100%);
}
.js .relight--warm { animation: breathe 13s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }

/* ── Hero: the whole first screen is one photograph ────────────────── */
.hero {
  position: relative; overflow: hidden;
  margin-top: calc(-1 * var(--head-h));
  min-height: calc(100svh - 44px);
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: var(--head-h);
}
/* Framed so the band runs from the middle of the back down to the hands. Higher
   and it is an empty sheet, lower and it is disembodied fingers — the crop still
   has to say "someone is being worked on" at 1440 as well as at 390. */
.hero > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 46% 58%;
  filter: saturate(.5) contrast(1.1) brightness(.9);
}
.hero__wash {
  position: absolute; inset: 0;
  background: rgba(21, 74, 57, .5);
}
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(8, 26, 20, .80) 0%, rgba(8, 26, 20, .34) 22%, rgba(8, 26, 20, .46) 48%, rgba(8, 26, 20, .84) 78%, rgba(8, 26, 20, .97) 100%),
    radial-gradient(ellipse 62% 46% at 50% 74%, rgba(8, 26, 20, .40) 0%, rgba(8, 26, 20, 0) 100%);
}
/* On a narrow screen the same crop keeps almost none of the picture, and the
   desktop veil then turns the whole first screen into a flat green panel. Narrow
   viewports get a different frame and a lighter veil so the flames still read. */
@media (max-width: 700px) {
  .hero { min-height: calc(100svh - 84px); }
  .hero > img { object-position: 33% 54%; filter: saturate(.55) contrast(1.08) brightness(1.02); }
  .hero__wash { background: rgba(21, 74, 57, .42); }
  .hero__veil {
    background:
      linear-gradient(to bottom, rgba(8, 26, 20, .74) 0%, rgba(8, 26, 20, .3) 18%, rgba(8, 26, 20, .5) 46%, rgba(8, 26, 20, .88) 84%, rgba(8, 26, 20, .97) 100%),
      radial-gradient(ellipse 104% 40% at 50% 56%, rgba(8, 26, 20, .58) 0%, rgba(8, 26, 20, .34) 58%, rgba(8, 26, 20, 0) 92%);
  }
}
/* The copy sits in the lower third, the way a fashion spread sets a caption
   under the picture rather than across the middle of it. */
.hero__mid {
  position: relative; z-index: 4;
  align-self: end;
  text-align: center;
  padding-inline: var(--gut);
  padding-bottom: clamp(24px, 5vh, 56px);
  max-width: 940px; margin-inline: auto;
}
.hero__eyebrow {
  font-size: .64rem; letter-spacing: .42em; text-transform: uppercase;
  color: var(--amber); margin: 0 0 clamp(26px, 4vh, 44px);
}
.hero__h {
  font-size: clamp(1.02rem, 1.85vw, 1.58rem);
  letter-spacing: .22em; line-height: 2.1; font-weight: 250;
  text-transform: uppercase; margin: 0 auto;
  max-width: 22ch;
}
.hero__h b { font-weight: 250; color: var(--amber); }
.hero__sub {
  margin: clamp(24px, 3.6vh, 40px) auto 0;
  max-width: 46ch; font-size: 1.02rem; font-weight: 300;
  color: var(--ink-2); line-height: 1.75;
}
.hero__acts { margin-top: clamp(28px, 4vh, 44px); }

/* The bottom rail: what the first screen owes a stranger — hours, rooms, what is
   actually free tonight. Restraint upstairs, facts along the floor. */
.hero__foot {
  position: relative; z-index: 4;
  border-top: 1px solid var(--hair);
  margin-top: clamp(22px, 3.5vh, 44px);
}
.hero__facts {
  display: grid; gap: 0;
  max-width: var(--wrap); margin-inline: auto;
  padding-inline: var(--gut);
  list-style: none;
  margin-block: 0;
}
.hero__facts li {
  padding-block: 15px;
  border-bottom: 1px solid var(--hair);
  display: flex; align-items: baseline; gap: 12px;
  font-size: .78rem; letter-spacing: .1em; color: var(--ink-2);
}
.hero__facts li:last-child { border-bottom: 0; }
.hero__facts b {
  font-weight: 400; color: var(--amber);
  font-size: .66rem; letter-spacing: .26em; text-transform: uppercase;
  flex: none; min-width: 6.6em;
}
@media (min-width: 820px) {
  .hero__facts { grid-template-columns: repeat(3, 1fr); column-gap: clamp(24px, 4vw, 60px); }
  .hero__facts li { border-bottom: 0; padding-block: 20px; display: block; }
  .hero__facts b { display: block; margin-bottom: 6px; min-width: 0; }
}
#nextfree { min-height: 1.6em; }


/* ── Section shells ────────────────────────────────────────────────── */
.sec { padding-block: var(--sec); position: relative; }
.sec--deep { background: var(--g-1); }
.sec--darkest { background: var(--g-0); }
.sec__head { max-width: 780px; margin-inline: auto; text-align: center; }
.sec__head .lead { margin-inline: auto; }
.sec__act { margin-top: clamp(36px, 5vw, 60px); }

/* A room you walk into: full-bleed photograph carrying the section title. */
.room {
  position: relative;
  height: clamp(340px, 62svh, 620px);
  display: grid; place-items: center;
}
/* The picture stays as bright as it wants to be; the copy carries its own pool of
   shade, so the contrast under the words does not depend on which photograph the
   section happens to hold. */
.room::after {
  background:
    linear-gradient(to bottom, rgba(8, 26, 20, .58) 0%, rgba(8, 26, 20, .16) 26%, rgba(8, 26, 20, .28) 62%, rgba(8, 26, 20, .74) 100%),
    radial-gradient(ellipse 48% 56% at 50% 50%, rgba(8, 26, 20, .80) 0%, rgba(8, 26, 20, .54) 46%, rgba(8, 26, 20, 0) 82%);
}
/* gesicht.webp is two stops under everything else in the set. */
.room--lift > img { filter: saturate(.44) contrast(1.02) brightness(1.62); }
.room__in { text-align: center; padding-inline: var(--gut); max-width: 720px; }
.room__in h2 { margin-bottom: .8em; }
.room__in p { margin: 0; color: var(--ink-2); font-size: .98rem; font-weight: 300; max-width: 44ch; margin-inline: auto; }
.room__no {
  display: block; font-size: .64rem; letter-spacing: .4em;
  text-transform: uppercase; color: var(--amber); margin-bottom: 1.6em;
}

/* A 44 %-wide pool of shade covers a centred line at 1440 and misses it entirely
   at 390, where the same copy runs the full width. Widen it, don't darken the page. */
@media (max-width: 820px) {
  .room::after {
    background:
      linear-gradient(to bottom, rgba(8, 26, 20, .6) 0%, rgba(8, 26, 20, .26) 24%, rgba(8, 26, 20, .4) 60%, rgba(8, 26, 20, .8) 100%),
      radial-gradient(ellipse 96% 44% at 50% 50%, rgba(8, 26, 20, .82) 0%, rgba(8, 26, 20, .6) 54%, rgba(8, 26, 20, 0) 90%);
  }
}

/* ── Das Prinzip: four things that do not happen here ──────────────── */
.facts { margin: clamp(48px, 6vw, 82px) 0 0; display: grid; gap: 0; }
.facts > div { padding-block: clamp(22px, 2.8vw, 32px); border-top: 1px solid var(--hair); }
.facts > div:last-child { border-bottom: 1px solid var(--hair); }
.facts dt {
  font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink); margin-bottom: .8em; font-weight: 400;
}
.facts dd { margin: 0; color: var(--ink-3); max-width: 42em; font-size: .96rem; font-weight: 300; }
@media (min-width: 820px) {
  .facts > div { display: grid; grid-template-columns: 19rem minmax(0, 1fr); column-gap: clamp(30px, 5vw, 72px); }
  .facts dt { margin-bottom: 0; padding-top: .2em; }
}

/* ── Treatments: the duration rail ─────────────────────────────────── */
/* The bottom rule of every row is the treatment's length. 90 minutes is the full
   width of the row; a 45-minute treatment fills exactly half of it in amber.
   You can read the price list by squinting at the floor. */
.txlist { list-style: none; margin: clamp(38px, 5vw, 60px) 0 0; padding: 0; }
.tx {
  position: relative;
  display: grid; gap: 6px;
  padding-block: clamp(22px, 3vw, 34px);
  border-bottom: 1px solid var(--hair);
}
.tx::after {
  content: ""; position: absolute; left: 0; bottom: -1px;
  height: 1px; width: var(--w); background: var(--amber);
  transform-origin: left center;
}
.tx__min {
  font-size: clamp(2.4rem, 5.2vw, 4.2rem); font-weight: 200;
  line-height: .9; letter-spacing: -.02em; color: var(--amber);
  font-variant-numeric: tabular-nums; margin: 0;
}
.tx__min small { display: block; font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-3); margin-top: 1.1em; font-weight: 400; }
.tx__name { font-size: clamp(1.05rem, 1.7vw, 1.32rem); font-weight: 350; letter-spacing: .1em; margin: 0 0 .5em; color: var(--ink); }
.tx__desc { color: var(--ink-3); max-width: 46em; margin: 0; font-size: .94rem; font-weight: 300; }
.tx__price { font-size: 1.28rem; font-weight: 300; margin: 0; font-variant-numeric: tabular-nums; color: var(--ink); }
.tx__price span { font-size: .88rem; color: var(--ink-3); }
.tx__dur { font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-3); margin: .5em 0 0; }
@media (min-width: 860px) {
  .tx {
    grid-template-columns: clamp(6rem, 9vw, 8.4rem) minmax(0, 1fr) clamp(8rem, 12vw, 11rem);
    column-gap: clamp(26px, 4vw, 56px);
    align-items: start;
  }
  .tx__min { grid-column: 1; grid-row: 1; }
  .tx__main { grid-column: 2; grid-row: 1; padding-top: .3em; }
  .tx__meta { grid-column: 3; grid-row: 1; text-align: right; padding-top: .3em; }
  .tx__dur { white-space: nowrap; }
}
@media (max-width: 859px) {
  .tx__min { display: flex; align-items: baseline; gap: 12px; font-size: 2.2rem; }
  .tx__min small { margin-top: 0; }
  .tx__meta { margin-top: 10px; display: flex; align-items: baseline; gap: 16px; }
  .tx__dur { margin-top: 0; }
}

/* ── Two pictures, edge to edge, caption inside the picture ────────── */
/* The one place the room lets colour through. Nail work is sold on colour, and a
   caption that says "kräftiges Pink" over a maroon-graded photograph would be a
   lie. So these two come up out of the green almost ungraded. */
.duo { display: grid; gap: 2px; margin-top: clamp(44px, 6vw, 78px); }
.duo figure { margin: 0; height: clamp(300px, 58vw, 560px); }
.duo .frame > img { filter: saturate(1) contrast(1.02) brightness(1.06); }
.duo .frame::before { background: rgba(21, 74, 57, .1); }
.duo .frame::after {
  background: linear-gradient(to bottom, rgba(8, 26, 20, .3) 0%, rgba(8, 26, 20, .04) 26%, rgba(8, 26, 20, .34) 62%, rgba(8, 26, 20, .9) 100%);
}
.duo figure:last-child > img { filter: saturate(.95) contrast(1.08) brightness(1.14); }
.duo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  padding: 22px clamp(18px, 2.6vw, 32px);
  font-size: .8rem; color: var(--ink-2); font-weight: 300; line-height: 1.55; max-width: 42ch;
}
@media (min-width: 820px) { .duo { grid-template-columns: 1.35fr 1fr; } .duo figure { height: clamp(360px, 40vw, 560px); } }
/* Narrow: the caption stacks to three lines and needs a deeper foot than the
   desktop crop does. Declared after the base rule, or it never wins. */
@media (max-width: 819px) {
  .duo .frame::after {
    background: linear-gradient(to bottom, rgba(8, 26, 20, .3) 0%, rgba(8, 26, 20, .05) 18%, rgba(8, 26, 20, .74) 40%, rgba(8, 26, 20, .94) 62%, rgba(8, 26, 20, .97) 100%);
  }
}

/* ── People ────────────────────────────────────────────────────────── */
.people { display: grid; gap: clamp(40px, 5vw, 68px); margin-top: clamp(44px, 5vw, 70px); }
@media (min-width: 820px) { .people { grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 6vw, 90px); } }
.person { border-top: 1px solid var(--hair); padding-top: clamp(22px, 3vw, 30px); }
.person h3 { font-size: 1.02rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 350; margin: 0 0 .4em; }
.person__role { font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; color: var(--amber); margin-bottom: 1.6em; }
.person p:last-child { color: var(--ink-3); margin-bottom: 0; font-size: .94rem; font-weight: 300; }

/* ── Kontakt ───────────────────────────────────────────────────────── */
.kontakt { display: grid; gap: clamp(40px, 6vw, 76px); margin-top: clamp(40px, 5vw, 60px); }
@media (min-width: 820px) { .kontakt { grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 6vw, 90px); } }
.kontakt address {
  font-style: normal; font-size: 1.05rem; line-height: 1.9; margin-bottom: 1.4em;
  letter-spacing: .1em; color: var(--ink);
}
.kontakt__how { color: var(--ink-3); max-width: 36em; font-size: .94rem; font-weight: 300; }
.hours { margin: 0 0 1.8em; }
.hours > div { display: flex; justify-content: space-between; gap: 20px; padding-block: 13px; border-bottom: 1px solid var(--hair); max-width: 28rem; font-size: .88rem; }
.hours dt { color: var(--ink-2); letter-spacing: .1em; }
.hours dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--ink); }
.hours--off dt, .hours--off dd { color: var(--ink-3); }
.h-label { font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--amber); margin: 0 0 1.6em; font-weight: 400; }

/* ── Studio CTA (outside the fiction) ──────────────────────────────── */
.wdm { background: var(--g-0); padding-block: clamp(60px, 8vw, 104px); }
.wdm .eyebrow { color: var(--ink-3); }
.wdm h2 { max-width: 24ch; margin-inline: auto; }
.wdm p { max-width: 46em; color: var(--ink-3); margin-inline: auto; font-size: .96rem; font-weight: 300; }
.wdm .acts { margin-top: 2.4em; }

/* ── Footer ────────────────────────────────────────────────────────── */
.foot { background: var(--g-0); color: var(--ink-3); padding-block: clamp(34px, 4vw, 52px); font-size: .78rem; letter-spacing: .08em; border-top: 1px solid var(--hair); }
.foot__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; }
.foot p { margin: 0; }
.foot__brand { color: var(--ink-2); letter-spacing: .16em; text-transform: uppercase; font-size: .7rem; }
.foot a { color: var(--amber); text-decoration: underline; text-underline-offset: .28em; }
.foot a:hover { color: var(--ink); }

/* ══════════════════════════════════════════════════════════════════════
   BUCHEN — configurator, booking, voucher.
   Same room, but nothing here may be atmospheric at the cost of being read.
   ══════════════════════════════════════════════════════════════════ */
.bh {
  position: relative; overflow: hidden;
  margin-top: calc(-1 * var(--head-h));
  padding-top: calc(var(--head-h) + clamp(56px, 12vh, 128px));
  padding-bottom: clamp(44px, 7vh, 84px);
  background: var(--g-0);
  text-align: center;
}
.bh__in { position: relative; z-index: 4; max-width: 760px; margin-inline: auto; padding-inline: var(--gut); }
.bh h1 { margin-bottom: 1.1em; }
.bh .lead { margin-inline: auto; }

.resume {
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  padding: 16px 0; margin: clamp(34px, 5vw, 54px) 0 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px;
}
.resume p { margin: 0; font-size: .92rem; color: var(--ink-2); }
.resume p b { font-weight: 400; color: var(--ink); }
.resume__k { font-size: .64rem; letter-spacing: .28em; text-transform: uppercase; color: var(--amber); }
.resume__act { margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px 20px; }
button.lnk { background: none; border: 0; padding: 0; font: inherit; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; color: var(--amber); text-decoration: underline; text-underline-offset: .34em; }

.plan { display: grid; gap: clamp(48px, 7vw, 78px); padding-block: clamp(44px, 6vw, 72px) var(--sec); }
@media (min-width: 1080px) {
  .plan { grid-template-columns: minmax(0, 1fr) 20rem; column-gap: clamp(44px, 5vw, 78px); align-items: start; }
  .plan__cfg { grid-column: 1; grid-row: 1; }
  .plan__sum { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: calc(var(--head-h) + 24px); }
  .plan__exit { grid-column: 1; grid-row: 2; }
}

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
.step { margin-bottom: clamp(52px, 7vw, 84px); }
.step__h {
  font-size: clamp(1.02rem, 1.7vw, 1.34rem); text-transform: uppercase;
  letter-spacing: .17em; font-weight: 250; line-height: 1.5; margin: 0 0 .7em;
}
.step__hint { color: var(--ink-3); font-size: .93rem; font-weight: 300; margin: 0 0 1.8em; max-width: 44em; }
.step__n {
  display: block; font-size: .64rem; font-weight: 400;
  letter-spacing: .32em; text-transform: uppercase; color: var(--amber); margin-bottom: 1.1em;
}

/* filter row */
.filter { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(28px, 4vw, 42px); }
.filter input { position: absolute; opacity: 0; pointer-events: none; }
.filter label {
  display: inline-block; padding: 9px 16px; cursor: pointer;
  border: 1px solid var(--hair); font-size: .68rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2);
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.filter label:hover { color: var(--ink); border-color: var(--hair-2); }
.filter input:checked + label { background: var(--amber); border-color: var(--amber); color: var(--g-0); }
.filter input:focus-visible + label { outline: 2px solid var(--amber); outline-offset: 3px; }

/* treatment options */
.grp { margin-bottom: clamp(32px, 4vw, 48px); }
.grp__h {
  font-size: .64rem; font-weight: 400;
  letter-spacing: .32em; text-transform: uppercase; color: var(--amber);
  margin: 0 0 .8em;
}
.opt { border-top: 1px solid var(--hair); position: relative; }
.grp .opt:last-of-type { border-bottom: 1px solid var(--hair); }
.opt > input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
  top: 26px; left: 2px; margin: 0;
}
.opt__lb {
  display: grid; gap: 5px;
  padding: clamp(18px, 2.4vw, 25px) 0 clamp(18px, 2.4vw, 25px) 34px;
  cursor: pointer;
}
.opt__lb::before {
  content: ""; position: absolute; left: 2px; top: calc(clamp(18px, 2.4vw, 25px) + .5em);
  width: 13px; height: 13px; border: 1px solid var(--ink-3); border-radius: 50%;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.opt > input:checked + .opt__lb::before { border-color: var(--amber); box-shadow: inset 0 0 0 3px var(--amber); }
.opt > input:focus-visible + .opt__lb::before { outline: 2px solid var(--amber); outline-offset: 3px; }
.opt > input:checked ~ .opt__lb .opt__name { color: var(--amber); }
.opt__name { font-size: 1.02rem; letter-spacing: .1em; font-weight: 350; transition: color .25s ease; }
.opt__desc { color: var(--ink-3); font-size: .9rem; font-weight: 300; max-width: 44em; }
.opt__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 6px; }
.opt__price { font-size: 1.06rem; font-variant-numeric: tabular-nums; }
.opt__dur { font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-3); }
.opt__bar { display: block; height: 1px; background: var(--hair); margin-top: 14px; max-width: 12rem; }
.opt__bar i { display: block; height: 100%; width: var(--w); background: var(--amber); transform-origin: left center; }

/* duration chips */
.vars { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0 0 0 34px; }
.vars input { position: absolute; opacity: 0; pointer-events: none; }
.vars label {
  display: inline-block; padding: 8px 14px; cursor: pointer;
  border: 1px solid var(--hair); font-size: .78rem;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.vars label:hover { color: var(--ink); border-color: var(--hair-2); }
.vars input:checked + label { border-color: var(--amber); color: var(--amber); background: rgba(235, 187, 124, .05); }
/* Each treatment keeps its own default duration, but only the chosen treatment is
   allowed to look chosen. Otherwise four rows appear selected at once. */
.opt > input:not(:checked) ~ .vars input:checked + label {
  border-color: var(--hair); color: var(--ink-3); background: transparent;
}
.vars input:focus-visible + label { outline: 2px solid var(--amber); outline-offset: 3px; }

/* add-ons */
.adds { display: grid; gap: 0; }
.add { border-top: 1px solid var(--hair); position: relative; }
.adds .add:last-child { border-bottom: 1px solid var(--hair); }
.add > input { position: absolute; opacity: 0; width: 1px; height: 1px; top: 22px; left: 2px; margin: 0; }
.add__lb { display: grid; gap: 3px; padding: 18px 0 18px 34px; cursor: pointer; }
.add__lb::before {
  content: ""; position: absolute; left: 2px; top: 23px;
  width: 13px; height: 13px; border: 1px solid var(--ink-3);
  transition: background .2s ease, border-color .2s ease;
}
.add > input:checked + .add__lb::before { background: var(--amber); border-color: var(--amber); }
.add > input:focus-visible + .add__lb::before { outline: 2px solid var(--amber); outline-offset: 3px; }
.add__name { font-size: .98rem; letter-spacing: .06em; }
.add__name b { font-weight: 400; }
.add__meta { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--amber); }
.add__desc { font-size: .9rem; color: var(--ink-3); font-weight: 300; max-width: 42em; }

/* summary */
.plan__sum { border-top: 1px solid var(--amber); padding-top: 22px; }
.sum__h { font-size: .64rem; font-weight: 400; letter-spacing: .32em; text-transform: uppercase; color: var(--amber); margin: 0 0 1.4em; }
.sum__what { font-size: 1.14rem; letter-spacing: .1em; line-height: 1.4; margin: 0 0 .45em; min-height: 1.4em; color: var(--ink); font-weight: 350; }
.sum__sub { font-size: .84rem; color: var(--ink-3); margin: 0 0 1.5em; min-height: 1.5em; font-weight: 300; }
.sum__lines { list-style: none; margin: 0 0 1.5em; padding: 0; font-size: .88rem; }
.sum__lines li { display: flex; justify-content: space-between; gap: 16px; padding-block: 8px; border-bottom: 1px solid var(--hair); color: var(--ink-2); font-weight: 300; }
.sum__tot { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-top: 1px solid var(--hair-2); padding-top: 16px; margin: 0; }
.sum__tot dt { font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-3); }
.sum__tot dd { margin: 0; font-size: 1.9rem; font-weight: 200; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.sum__time { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--amber); margin-top: .9em; font-variant-numeric: tabular-nums; min-height: 1.5em; }
.sum__note { font-size: .82rem; color: var(--ink-3); margin-top: 1.6em; font-weight: 300; }

/* exit switch */
.exits { border-top: 1px solid var(--hair); padding-top: clamp(40px, 5vw, 60px); }
.switch { position: relative; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(32px, 4vw, 46px); }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch label {
  display: block; padding: 17px 24px; cursor: pointer; min-width: 15rem; flex: 1 1 15rem;
  border: 1px solid var(--hair);
  transition: border-color .25s ease, background .25s ease;
}
.switch label b { display: block; font-weight: 400; font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; line-height: 1.5; }
.switch label span { display: block; font-size: .84rem; color: var(--ink-2); font-weight: 300; }
.switch input:checked + label { border-color: var(--amber); background: rgba(235, 187, 124, .05); }
.switch input:checked + label b { color: var(--amber); }
.switch input:focus-visible + label { outline: 2px solid var(--amber); outline-offset: 3px; }

/* date strip + slots */
.days { min-height: 5.4rem; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 28px; scrollbar-width: thin; }
.days > span { position: relative; flex: none; }
.days input { position: absolute; opacity: 0; pointer-events: none; }
.days label {
  display: grid; gap: 3px; justify-items: center; cursor: pointer;
  width: 4.7rem; padding: 12px 4px; border: 1px solid var(--hair);
  transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.days label small { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.days label b { font-weight: 250; font-size: 1.45rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.days label i { font-style: normal; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.days label:hover { border-color: var(--hair-2); }
.days input:checked + label { background: var(--amber); border-color: var(--amber); color: var(--g-0); }
.days input:checked + label small, .days input:checked + label i { color: #4a3a22; }
.days input:focus-visible + label { outline: 2px solid var(--amber); outline-offset: 3px; }
.days input:disabled + label { opacity: .42; cursor: not-allowed; }
.days input:disabled + label:hover { border-color: var(--hair); }

.slots { min-height: 3rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: 8px; margin-bottom: 8px; }
.slots > span { position: relative; }
.slots input { position: absolute; opacity: 0; pointer-events: none; }
.slots label {
  display: block; text-align: center; cursor: pointer;
  padding: 12px 4px; border: 1px solid var(--hair);
  font-variant-numeric: tabular-nums; font-size: .92rem; color: var(--ink);
  transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.slots label:hover { border-color: var(--hair-2); }
.slots input:checked + label { background: var(--amber); border-color: var(--amber); color: var(--g-0); }
.slots input:focus-visible + label { outline: 2px solid var(--amber); outline-offset: 3px; }
.slots input:disabled + label {
  color: var(--ink-3); border-style: dashed; cursor: not-allowed;
  text-decoration: line-through; text-decoration-thickness: 1px; opacity: .7;
}
.slots input:disabled + label:hover { border-color: var(--hair); }
.slots__note { font-size: .84rem; color: var(--ink-3); margin-top: 15px; font-weight: 300; }
.slots__empty { font-size: .94rem; color: var(--amber); margin: 0 0 1em; font-weight: 300; }

/* forms */
.fields { display: grid; gap: clamp(20px, 3vw, 28px); margin-top: clamp(30px, 4vw, 42px); }
@media (min-width: 700px) { .fields--2 { grid-template-columns: 1fr 1fr; } .fields .span2 { grid-column: 1 / -1; } }
/* Scoped to the text-field wrappers on purpose: an unscoped `.f label` also hits
   the day cells, the slot grid and the radio cards, which live inside the same form. */
.f .fields label, .f > .lb { display: block; font-size: .64rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 9px; }
.f input[type="text"], .f input[type="email"], .f input[type="tel"], .f input[type="number"], .f textarea {
  width: 100%; font-family: var(--sans); font-size: 1rem; color: var(--ink);
  background: rgba(8, 26, 20, .35); border: 1px solid var(--hair);
  padding: 12px 14px; border-radius: 0;
  transition: border-color .25s ease, background .25s ease;
}
.f textarea { resize: vertical; min-height: 5.5em; line-height: 1.6; }
.f input::placeholder, .f textarea::placeholder { color: var(--ink-3); }
.f input:hover, .f textarea:hover { border-color: var(--hair-2); }
.f input:focus, .f textarea:focus { outline: none; border-color: var(--amber); background: rgba(8, 26, 20, .55); }
.f input:focus-visible, .f textarea:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.f input[aria-invalid="true"], .f textarea[aria-invalid="true"] { border-color: var(--amber); border-width: 2px; }
.err { display: block; font-size: .84rem; color: var(--amber); margin-top: 8px; }
.hint { display: block; font-size: .82rem; color: var(--ink-3); margin-top: 8px; font-variant-numeric: tabular-nums; font-weight: 300; }
.submit { margin-top: clamp(30px, 4vw, 44px); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }
.submit p { margin: 0; font-size: .82rem; color: var(--ink-3); max-width: 26em; font-weight: 300; }

/* voucher kind + delivery radios */
.pick { display: grid; gap: 0; margin-bottom: clamp(26px, 3vw, 34px); }
.pick > span { position: relative; border-top: 1px solid var(--hair); }
.pick > span:last-child { border-bottom: 1px solid var(--hair); }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; top: 20px; left: 2px; }
.pick label { display: grid; gap: 3px; padding: 17px 0 17px 34px; cursor: pointer; }
.pick label::before {
  content: ""; position: absolute; left: 2px; top: 22px;
  width: 13px; height: 13px; border: 1px solid var(--ink-3); border-radius: 50%;
}
.pick input:checked + label::before { border-color: var(--amber); box-shadow: inset 0 0 0 3px var(--amber); }
.pick input:focus-visible + label::before { outline: 2px solid var(--amber); outline-offset: 3px; }
.pick label b { font-weight: 400; letter-spacing: .06em; }
.pick input:checked + label b { color: var(--amber); }
.pick label small { font-size: .86rem; color: var(--ink-3); font-weight: 300; }
.pick input:disabled + label { opacity: .5; cursor: not-allowed; }

/* confirmation */
.done { border: 1px solid var(--amber); padding: clamp(26px, 4vw, 44px); margin-top: clamp(30px, 4vw, 44px); background: var(--g-1); }
.done:focus { outline: none; }
.done:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.done__h { font-size: clamp(1.02rem, 1.8vw, 1.4rem); text-transform: uppercase; letter-spacing: .18em; font-weight: 250; margin: 0 0 .7em; }
.done > p.done__code { font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--amber); margin-bottom: 1.8em; }
.done__list { list-style: none; margin: 0 0 1.6em; padding: 0; }
.done__list li { display: flex; justify-content: space-between; gap: 20px; padding-block: 10px; border-bottom: 1px solid var(--hair); font-size: .92rem; color: var(--ink-3); font-weight: 300; }
.done__list b { font-weight: 350; color: var(--ink); text-align: right; }
/* Direct children only. `.done p` also hits the voucher card that gets injected
   inside it, and would paint pale grey text onto cream paper. */
.done > p { color: var(--ink-3); font-size: .92rem; font-weight: 300; }
.done__act { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-top: 1.8em; }

/* ── Voucher card: the one piece of paper in the house ─────────────── */
/* It is light on screen because it is light on the printer. Nothing about it
   changes between the two, so what you see is what comes out. */
.gs {
  background: var(--paper);
  color: var(--paper-ink);
  border: 1px solid var(--paper-hair);
  padding: clamp(26px, 4.4vw, 46px);
  max-width: 40rem;
  margin-top: 1.6em;
  font-weight: 300;
}
.gs__top { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; border-bottom: 1px solid var(--paper-hair); padding-bottom: 18px; }
.gs__brand { font-size: .86rem; letter-spacing: .42em; text-transform: uppercase; font-weight: 400; }
.gs__kind { font-size: .64rem; letter-spacing: .32em; text-transform: uppercase; color: #7a5a2c; }
.gs__value { font-size: clamp(2.8rem, 8vw, 4.6rem); line-height: 1; margin: .5em 0 .16em; font-variant-numeric: tabular-nums; font-weight: 200; letter-spacing: -.02em; }
.gs__what { font-size: .92rem; color: var(--paper-ink-2); margin: 0 0 2em; }
.gs__who { display: grid; gap: 16px 40px; margin: 0 0 1.8em; }
@media (min-width: 560px) { .gs__who { grid-template-columns: 1fr 1fr; } }
.gs__who dt { font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--paper-ink-2); margin-bottom: 5px; }
.gs__who dd { margin: 0; font-size: 1.06rem; line-height: 1.4; overflow-wrap: anywhere; letter-spacing: .06em; }
.gs__msg {
  margin: 0 0 2em; padding: 0 0 0 20px; border-left: 1px solid #b8862f;
  font-size: 1.02rem; line-height: 1.6; overflow-wrap: anywhere; color: var(--paper-ink);
}
.gs__foot { border-top: 1px solid var(--paper-hair); padding-top: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: .74rem; color: var(--paper-ink-2); }
.gs__code { letter-spacing: .22em; text-transform: uppercase; color: var(--paper-ink); }

/* ── Reveal (media only; text never waits for JS) ──────────────────── */
.js [data-reveal] { opacity: 0; transform: translateY(16px); }
.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity .9s ease, transform .9s cubic-bezier(.16, 1, .3, 1); }
.js .tx[data-reveal] { opacity: 1; transform: none; }
.js .tx[data-reveal]::after { transform: scaleX(0); }
.js .tx[data-reveal].is-in::after { transform: scaleX(1); transition: transform 1.25s cubic-bezier(.16, 1, .3, 1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .001ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .tx[data-reveal]::after { transform: scaleX(1); }
}

/* ── Print: the voucher card, alone, on one page, on white paper ───── */
/* The screen is saturated. The printer is not. Everything below forces the card
   back to ink on white so it does not empty a cartridge or come out unreadable. */
#print-root { display: none; }
@media print {
  @page { size: A4 portrait; margin: 16mm; }
  html, body { background: #fff !important; color: #000; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .js .tx[data-reveal]::after { transform: scaleX(1) !important; }
  .relight, .hero__wash, .hero__veil, .scroll-cue { display: none !important; }
  body.has-voucher > *:not(#print-root) { display: none !important; }
  body.has-voucher #print-root { display: block; }
  #print-root .gs {
    max-width: none; width: 100%;
    background: #fff; color: #14100a;
    border: 1px solid #14100a;
    padding: 14mm;
    page-break-inside: avoid; break-inside: avoid;
  }
  #print-root .gs__top, #print-root .gs__foot { border-color: #9a948a; }
  #print-root .gs__kind, #print-root .gs__what, #print-root .gs__who dt, #print-root .gs__foot { color: #4a453d; }
  #print-root .gs__msg { border-left-color: #14100a; color: #14100a; }
  #print-root .gs__code { color: #14100a; }
  #print-root .gs__value { font-size: 46pt; }
  #print-root .gs__brand { font-size: 15pt; }
  #print-root .gs__msg { font-size: 13pt; }
  #print-root .gs__who dd { font-size: 13pt; }
  #print-root .gs__cut { display: block; margin-top: 10mm; font-size: 8pt; color: #4a453d; }
}
.gs__cut { display: none; }