/* ANDJI'S BEAUTY — design refinement layer.
 *
 * Loaded last in <head> so it overrides the generated bundles in /_astro and
 * the per-page inline <style> blocks. Those generated rules are scoped with
 * [data-astro-cid-*] attributes; overrides below repeat the matching attribute
 * where needed so specificity ties and source order decides.
 */

/* ── Inter ─────────────────────────────────────────────────────────────── */

@font-face {
  font-family: Inter;
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(/_astro/inter-latin-300-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(/_astro/inter-latin-ext-300-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/inter-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/inter-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/_astro/inter-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/_astro/inter-latin-ext-500-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/_astro/inter-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/_astro/inter-latin-ext-600-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Cormorant Garamond italic — replaces the Italianno script face. */
@font-face {
  font-family: Cormorant Garamond;
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/cormorant-garamond-latin-400-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Cormorant Garamond;
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/cormorant-garamond-latin-ext-400-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Cormorant Garamond;
  font-style: italic;
  font-display: swap;
  font-weight: 500;
  src: url(/_astro/cormorant-garamond-latin-500-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Cormorant Garamond;
  font-style: italic;
  font-display: swap;
  font-weight: 500;
  src: url(/_astro/cormorant-garamond-latin-ext-500-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens ────────────────────────────────────────────────────────────── */

:root {
  --color-ivory: #fbf9f8;
  --color-ivory-deep: #f4efee;
  --color-blush: #f7efe9;

  /* Brand accent. #c3a28d is a light tan: excellent as a filled surface, but on
   * the ivory background it only reaches 2.3:1 — far below the 4.5:1 text needs.
   * So the flat tone is used for fills, borders and decoration, while two
   * darkened siblings of the same hue carry every text use.
   *   #c3a28d on ivory ....... 2.3:1  → fills only
   *   #c3a28d + white text ... 2.4:1  → buttons and active pills, by request
   *   #8a6a54 on ivory ....... 4.7:1  → links, prices, small labels
   *   #6f5340 on ivory ....... 6.7:1  → hover state, darker than the base
   * Filled controls use white labels on the client's instruction. That combination
   * misses AA; darkening --color-accent toward #8a6a54 would clear it at 4.9:1. */
  --color-accent: #c3a28d;
  --color-accent-hover: #b08f79;
  --color-accent-strong: #8a6a54;
  --color-accent-deep: #6f5340;
  --color-accent-muted: #e0cbbb;
  --color-accent-tint: #f7efe9;

  /* The generated bundles hard-code var(--color-rose*) for prices, mega-menu
   * links and icons. Aliasing keeps those rules alive and quietly routes every
   * text use to the readable tone. */
  --color-rose: var(--color-accent-strong);
  --color-rose-hover: var(--color-accent-deep);
  --color-rose-muted: var(--color-accent-muted);
  --color-rose-tint: var(--color-accent-tint);

  --color-ink: #1e1a19;
  --color-body: #443e3b;
  --color-ink-soft: #5a524e;
  --color-bronze: #a2887c;
  --color-white: #fff;
  --color-focus: #8a6a54;

  --font-serif: "Cormorant Garamond", "Times New Roman", Times, serif;
  --font-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-script: var(--font-serif);

  --text-xs: clamp(.72rem, .69rem + .15vw, .78rem);
  --text-sm: clamp(.86rem, .83rem + .18vw, .94rem);
  --text-base: clamp(1rem, .97rem + .2vw, 1.09rem);
  --text-lg: clamp(1.12rem, 1.04rem + .38vw, 1.32rem);
  --text-xl: clamp(1.45rem, 1.2rem + .9vw, 1.95rem);
  --text-2xl: clamp(1.95rem, 1.5rem + 1.7vw, 2.95rem);
  --text-3xl: clamp(2.45rem, 1.75rem + 2.6vw, 4.15rem);
  --text-script: 1em;

  --leading-tight: 1.14;
  --leading-snug: 1.3;
  --leading-normal: 1.65;
  --leading-relaxed: 1.75;

  --tracking-eyebrow: .16em;
  --tracking-nav: .12em;
  --tracking-tight: -.015em;

  /* One vertical rhythm for every band on every page. */
  --section-pad-y: clamp(4.5rem, 8vw, 8rem);
  --hero-pad-y: clamp(4rem, 7vw, 6.75rem);
  --space-stack: var(--space-5);
  --space-stack-lg: var(--space-7);

  --measure-prose: 40rem;
  --measure-longform: 44rem;

  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-btn: 6px;

  --border-subtle: 1px solid rgb(30 26 25 / .11);
  --line-bronze: 1px solid rgb(162 136 124 / .5);
  --shadow-header: none;
  --shadow-panel: 0 12px 32px rgb(30 26 25 / .07);

  /* Only the desktop header needs the extra room for the enlarged logo; on
   * phones a 104px bar would eat too much of a short screen. */
  --header-height: 5.5rem;
}

/* ── Base type ─────────────────────────────────────────────────────────── */

body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-body);
  letter-spacing: -.003em;
}

.headline {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}
.headline--xl { font-size: var(--text-3xl); line-height: var(--leading-tight); }
.headline--lg { font-size: var(--text-2xl); line-height: var(--leading-tight); }
.headline--md { font-size: var(--text-xl); line-height: var(--leading-snug); font-weight: 500; }

/* Accent phrases inside headlines: Cormorant italic at the headline's own size. */
.script-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1em;
  line-height: inherit;
  letter-spacing: var(--tracking-tight);
  color: var(--color-rose);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

/* A hairline replaces the ✦ glyph that preceded section labels. */
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.75rem;
  height: 1px;
  margin-right: .8rem;
  vertical-align: middle;
  background: var(--color-rose-muted);
  opacity: 1;
}
.site-footer .eyebrow::before { display: none; }
.eyebrow > span[aria-hidden="true"]:not([class]) { display: none; }
.section-header__diamond[data-astro-cid-wk2votdk] { display: none; }

.lede {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  color: var(--color-body);
  max-width: var(--measure-prose);
}

/* Running text: darker and roomier than the generated default so it stays
 * comfortable to read on the light marble backgrounds. */
.body-text,
p.body-text {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-body);
  max-width: var(--measure-prose);
}

.body-text + .body-text { margin-top: var(--space-4); }

.body-text a,
.lede a { color: var(--color-rose); text-underline-offset: .2em; }
.body-text a:hover,
.lede a:hover { color: var(--color-rose-hover); }

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

/* ── Buttons ───────────────────────────────────────────────────────────── */

/* Selectors are paired so hand-authored buttons and generated ones
 * (scoped with the astro attribute) share one appearance. */
.btn,
.btn[data-astro-cid-vnzlvqnm] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}
/* White on tan is an explicit design decision. It measures 2.4:1, below the
 * 4.5:1 WCAG AA asks for, so the label is soft rather than crisp — darkening
 * `--color-accent` is the only way to fix that without changing the text colour. */
.btn--primary,
.btn--primary[data-astro-cid-vnzlvqnm] {
  padding: 1.05em 2.1em;
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-white);
}
.btn--primary:hover,
.btn--primary[data-astro-cid-vnzlvqnm]:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-white);
}
.btn--ghost,
.btn--ghost[data-astro-cid-vnzlvqnm] {
  padding: 1em 1.95em;
  border: 1px solid var(--color-accent-muted);
  color: var(--color-accent-strong);
  background: transparent;
}
.btn--ghost:hover,
.btn--ghost[data-astro-cid-vnzlvqnm]:hover {
  background: var(--color-accent-tint);
  border-color: var(--color-accent);
  color: var(--color-accent-deep);
}
.btn--text,
.btn--text[data-astro-cid-vnzlvqnm] {
  color: var(--color-accent-strong);
  border-radius: 0;
}
.btn--text:hover,
.btn--text[data-astro-cid-vnzlvqnm]:hover { color: var(--color-accent-deep); }

/* ── Marble surfaces ───────────────────────────────────────────────────── */

/* Marble photographs per band. Selectors carry two classes to outrank the
 * per-page inline rules (including their @supports fallback).
 *
 * HOW STRONG THE TEXTURE ACTUALLY LANDS
 * Two layers stack: the veil holds the photo, its ::after lays a white wash over
 * it, and the veil's own opacity fades the pair onto the ivory background. So the
 * share of marble you actually see is `opacity × (1 − wash)` — which is why the
 * bands drifted apart. Before this pass the hero sat at .8 × .42 = 34% while the
 * USP bar (no wash at all) sat at 50%, and the hero looked flat next to it.
 *
 * Everything now runs at full veil opacity and the wash alone sets the strength,
 * so one number per band controls the result:
 *
 *   Hero .......... no wash → 100% marble   (leads, most texture)
 *   Feature bands . wash .18 → 82%          (page hero, Make-Up, contact CTA)
 *   ::before bands  opacity .82 → 82%       (see the block further down)
 *
 * Those are high numbers, and they can be: the filter below lands the marble's
 * *field* at roughly the ivory of the page, so a band at full strength does not
 * read as a grey block — only the veins darken. Body copy keeps plenty of
 * headroom, #443e3b over a vein still measures about 6:1. Small accent text is
 * the tight spot: #8a6a54 dips near 3:1 on a vein, which is why
 * `.service-teaser__link` was moved to the deeper #6f5340. Recheck it before
 * raising any of these further. */
.marble-surface { background-color: var(--color-ivory); }

/* THE FILTER — darken first, raise contrast second. This order matters.
 *
 * All three photographs are near-white marble: the field sits around 0.97
 * luminance and the veins only drop to roughly 0.80. CSS `contrast()` pivots
 * around mid grey, so applied straight to a 0.97 field it pushes it past 1.0 and
 * clips everything to flat white — the veining disappears. An earlier pass here
 * ran `brightness(1.06) contrast(1.1)` and did exactly that.
 *
 * So: `brightness(.9)` first pulls the field down to ~0.87, where contrast has
 * something to work with. `contrast(1.3)` then lifts the field back to ~0.985 —
 * near enough to the ivory page that band edges stay invisible — while pressing
 * the veins down to ~0.79, where they finally read. */
.marble-surface .marble-surface__veil {
  background-image: url(/textures/marble-warm.jpg);
  background-size: cover;
  background-position: center;
  filter: saturate(.55) brightness(.9) contrast(1.3);
  opacity: 1;
}

/* The white wash used to be the contrast safeguard, but on a near-white texture
 * it only erases the little veining there is. It is nearly gone now; the field
 * already matches the page, so there is nothing left to soften. */
.marble-surface .marble-surface__veil::after {
  background: rgb(251 249 248 / .18);
}

/* `marble-warm` has the most defined veining of the three, so it goes where the
 * texture should carry the most: the hero and the closing CTA. */
.home-hero .marble-surface__veil   { background-image: url(/textures/marble-warm.jpg); }
.cta-band .marble-surface__veil    { background-image: url(/textures/marble-warm.jpg); }
.page-hero .marble-surface__veil   { background-image: url(/textures/marble-veined.jpg); }
.home-makeup .marble-surface__veil { background-image: url(/textures/marble-veined.jpg); }

/* The `--soft` / `--medium` modifiers in the markup no longer decide anything —
 * neutralised here so a band's strength is set in one place, by its wash. */
.marble-surface--soft .marble-surface__veil,
.marble-surface--medium .marble-surface__veil { opacity: 1; }

/* The hero is the first thing anyone sees: no wash at all, full texture. */
.marble-surface.home-hero .marble-surface__veil::after {
  background: transparent;
}

/* ── Header ────────────────────────────────────────────────────────────── */

.site-header[data-astro-cid-3ef6ksr2] {
  background: rgb(250 248 246 / .9);
  backdrop-filter: blur(10px);
  border-bottom: var(--border-subtle);
}
/* The generated grid is `auto 1fr auto`, which centres the nav inside whatever
 * space the brand and the right-hand cluster leave over — so it drifts off the
 * optical centre. Equal side tracks pin the nav to the middle of the viewport. */
.site-header__inner[data-astro-cid-3ef6ksr2] {
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-5);
}

/* `.brand` carries `min-width: 0` inside the header grid, so the logo can get
 * squeezed and letterboxed by `object-fit: contain` at tight widths. Opting the
 * brand column out of shrinking keeps the lockup whole. */
.brand[data-astro-cid-3ef6ksr2] {
  flex: none;
  min-width: max-content;
  justify-self: start;
}

/* The logo file is a square canvas and the artwork only covers the middle ~55–60%
 * of it — the rest is transparent padding baked into the PNG. A plain `height`
 * therefore sizes the *canvas*, and the visible lockup ends up looking roughly
 * half as big as the space it takes up.
 *
 * Until a tightly cropped file exists, the image is deliberately oversized and
 * the surplus is pulled back out of the layout with negative margins. Because the
 * surplus is fully transparent it simply overflows without showing anything, so
 * the header keeps its height while the artwork nearly doubles.
 *
 * The 20% is an estimate of the padding — it degrades safely in both directions.
 * Too small and a little empty margin remains; too large and the artwork spills a
 * few pixels past its box, which is harmless since nothing clips it. Swap in a
 * cropped logo and this whole block collapses back to a plain `height`. */
.brand-logo--header[data-astro-cid-anndpidy] {
  --brand-logo-canvas: clamp(6.5rem, 9.5vw, 10rem);
  height: var(--brand-logo-canvas);
  width: auto;
  max-width: none;
  flex: none;
  margin: calc(var(--brand-logo-canvas) * -.2) calc(var(--brand-logo-canvas) * -.21);
}

/* Right-hand cluster reads CTA → language, but the markup emits language first.
 * Reordering here avoids rewriting the header on all 24 generated pages; the two
 * controls sit side by side, so the focus order stays intuitive. */
.site-header__end[data-astro-cid-3ef6ksr2] { gap: var(--space-4); }
.site-header__cta[data-astro-cid-3ef6ksr2] { order: 1; }
.site-header__lang[data-astro-cid-3ef6ksr2] { order: 2; }
.nav-toggle[data-astro-cid-3ef6ksr2] { order: 3; }
.brand-logo--stack[data-astro-cid-anndpidy] { height: clamp(6rem, 14vw, 8.25rem); }

.nav__list[data-astro-cid-3ef6ksr2] { gap: var(--space-6); }
.nav__link[data-astro-cid-3ef6ksr2] {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-nav);
  color: var(--color-ink-soft);
  padding-block: .35em;
  border-bottom: 1px solid transparent;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.nav__link[data-astro-cid-3ef6ksr2]:hover,
.nav__link[data-astro-cid-3ef6ksr2].is-active {
  color: var(--color-ink);
  border-bottom-color: var(--color-ink);
}

/* Mega panel: flat ivory, no marble photograph. */
.nav-mega[data-astro-cid-3ef6ksr2] {
  background: var(--color-ivory);
  border-bottom: var(--border-subtle);
  box-shadow: var(--shadow-panel);
}
.nav-mega__veil[data-astro-cid-3ef6ksr2] { display: none; }
.nav-mega__name[data-astro-cid-3ef6ksr2] { font-weight: 400; }

/* The mega-menu title is a link in its own right, so a click anywhere on the
 * column's headline reaches the subpage. It keeps the generated typography and
 * the column's shared hover underline; only the browser link defaults go, plus
 * a colour shift so the title also answers a hover of its own. */
.nav-mega__name--link {
  text-decoration: none;
  cursor: pointer;
}
.nav-mega__name--link:hover,
.nav-mega__name--link:focus-visible {
  color: var(--color-accent-deep);
  border-bottom-color: var(--color-accent);
}

/* The title link is stretched over its whole column, so the treatment can be
 * reached by clicking the name, the description or the space around them —
 * "Mehr erfahren" is no longer the only target. The overlay is a pseudo-element
 * of the title, so the markup on all 24 pages stays as the build emitted it.
 *
 * `Mehr erfahren` points at the same page but must stay a link of its own:
 * positioning it puts it in the same paint layer as the overlay and later in
 * tree order, so it keeps receiving its own clicks and its own hover. */
.nav-mega__col[data-astro-cid-3ef6ksr2] {
  position: relative;
  cursor: pointer;
}
.nav-mega__name--link::after {
  content: "";
  position: absolute;
  inset: -.6rem -.9rem;
  border-radius: var(--radius-sm);
}
.nav-mega__link[data-astro-cid-3ef6ksr2] { position: relative; }

/* The overlay would otherwise swallow the focus ring of the title itself. */
.nav-mega__name--link:focus-visible { outline-offset: 4px; }

/* ── Language switch ───────────────────────────────────────────────────── */

/* Flags stay hidden: a flag is a country, not a language, and the two-letter
 * codes carry the meaning on their own. */
.lang-switch__flag[data-astro-cid-64r42zdf] { display: none; }
.lang-switch[data-astro-cid-64r42zdf] {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-nav);
}
.lang-switch[data-astro-cid-64r42zdf] a[data-astro-cid-64r42zdf].is-active {
  color: var(--color-ink);
  border-bottom-color: transparent;
}

@media (min-width: 1200px) {
  :root { --header-height: 6.5rem; }
}

/* Desktop: the current language is a rounded trigger, the alternative slides out
 * of a small card beneath it. The wrapper keeps generous vertical padding so the
 * pointer can travel from trigger to panel without crossing dead space. */
@media (min-width: 1200px) {
  .site-header__lang .lang-switch[data-astro-cid-64r42zdf] {
    position: relative;
    padding-block: 1.15rem;
  }
  .site-header__lang .lang-switch__rule[data-astro-cid-64r42zdf] { display: none; }

  .site-header__lang .lang-switch[data-astro-cid-64r42zdf] a[data-astro-cid-64r42zdf] {
    padding-bottom: 0;
    border-bottom: 0;
    border-radius: 999px;
  }

  .site-header__lang .lang-switch[data-astro-cid-64r42zdf] a[data-astro-cid-64r42zdf].is-active {
    gap: .5em;
    padding: .5rem .5rem .5rem .95rem;
    border: 1px solid var(--color-accent-muted);
    background: transparent;
    color: var(--color-ink);
    transition: background-color var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
  }

  /* Chevron drawn from two borders — no extra glyph or asset. */
  .site-header__lang .lang-switch[data-astro-cid-64r42zdf] a[data-astro-cid-64r42zdf].is-active::after {
    content: "";
    width: .32rem;
    height: .32rem;
    margin-right: .3em;
    border-right: 1.5px solid var(--color-accent-strong);
    border-bottom: 1.5px solid var(--color-accent-strong);
    transform: translateY(-.12em) rotate(45deg);
    transition: transform var(--duration-base) var(--ease-out);
  }

  .site-header__lang .lang-switch[data-astro-cid-64r42zdf] a[data-astro-cid-64r42zdf]:not(.is-active) {
    position: absolute;
    top: calc(100% - .55rem);
    right: 0;
    z-index: 60;
    min-width: 100%;
    justify-content: center;
    padding: .6rem 1rem;
    background: var(--color-white);
    border: 1px solid var(--color-accent-muted);
    border-radius: 12px;
    box-shadow: 0 12px 28px -14px rgb(46 34 26 / .32);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-.4rem) scale(.96);
    transform-origin: top right;
    transition: opacity var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out),
                visibility var(--duration-base) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out);
  }

  .site-header__lang .lang-switch[data-astro-cid-64r42zdf]:hover a[data-astro-cid-64r42zdf].is-active,
  .site-header__lang .lang-switch[data-astro-cid-64r42zdf]:focus-within a[data-astro-cid-64r42zdf].is-active {
    background: var(--color-accent-tint);
    border-color: var(--color-accent);
  }
  .site-header__lang .lang-switch[data-astro-cid-64r42zdf]:hover a[data-astro-cid-64r42zdf].is-active::after,
  .site-header__lang .lang-switch[data-astro-cid-64r42zdf]:focus-within a[data-astro-cid-64r42zdf].is-active::after {
    transform: translateY(.08em) rotate(-135deg);
  }

  .site-header__lang .lang-switch[data-astro-cid-64r42zdf]:hover a[data-astro-cid-64r42zdf]:not(.is-active),
  .site-header__lang .lang-switch[data-astro-cid-64r42zdf]:focus-within a[data-astro-cid-64r42zdf]:not(.is-active) {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
  }
  .site-header__lang .lang-switch[data-astro-cid-64r42zdf] a[data-astro-cid-64r42zdf]:not(.is-active):hover {
    color: var(--color-ink);
    background: var(--color-accent-tint);
    border-color: var(--color-accent);
  }
}

/* ── Mobile navigation ─────────────────────────────────────────────────── */

/* The panel is toggled through the `hidden` attribute, but the generated rule
 * `.mobile-nav { display: grid }` outranks the UA `[hidden] { display: none }`,
 * so the menu never collapsed. Restore it. */
.mobile-nav[data-astro-cid-3ef6ksr2][hidden],
.mobile-nav__sub[data-astro-cid-3ef6ksr2][hidden] { display: none; }

.nav-toggle[data-astro-cid-3ef6ksr2] { gap: 5px; }
.nav-toggle[data-astro-cid-3ef6ksr2] span[data-astro-cid-3ef6ksr2]:not(.sr-only) {
  width: 1.35rem;
  transition: transform var(--duration-base) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}
/* The first span in the button is the screen-reader label, so the two bars
 * are the second and third of type. */
.nav-toggle[data-astro-cid-3ef6ksr2][aria-expanded="true"] span[data-astro-cid-3ef6ksr2]:nth-of-type(2) {
  transform: translateY(3px) rotate(45deg);
}
.nav-toggle[data-astro-cid-3ef6ksr2][aria-expanded="true"] span[data-astro-cid-3ef6ksr2]:nth-of-type(3) {
  transform: translateY(-3px) rotate(-45deg);
}

/* The panel has no surface of its own — it sits on the header's 90% translucent
 * background, so whatever the page scrolls underneath tints the open menu and
 * makes it read grey and busy. Both the bar and the panel go solid and a shade
 * lighter than the ivory page while the menu is open, so the overlay is calm and
 * clearly separated from the content behind it. */
@media (max-width: 1199px) {
  .site-header[data-astro-cid-3ef6ksr2]:has(.mobile-nav[data-astro-cid-3ef6ksr2]:not([hidden])),
  .mobile-nav[data-astro-cid-3ef6ksr2] {
    background: #fefdfd;
  }
}

.mobile-nav[data-astro-cid-3ef6ksr2] {
  gap: var(--space-6);
  padding-block: var(--space-6) var(--space-7);
}
.mobile-nav[data-astro-cid-3ef6ksr2] ul[data-astro-cid-3ef6ksr2] { gap: 0; }
.mobile-nav[data-astro-cid-3ef6ksr2] > ul[data-astro-cid-3ef6ksr2] > li[data-astro-cid-3ef6ksr2] {
  border-bottom: var(--border-subtle);
}
.mobile-nav[data-astro-cid-3ef6ksr2] a[data-astro-cid-3ef6ksr2] {
  display: flex;
  align-items: center;
  min-height: 3rem;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-nav);
  color: var(--color-ink);
}
.mobile-nav__sub[data-astro-cid-3ef6ksr2] { margin-top: 0; }
.mobile-nav__sub[data-astro-cid-3ef6ksr2] ul[data-astro-cid-3ef6ksr2] {
  margin-left: 0;
  padding-left: var(--space-4);
  border-left: var(--border-subtle);
  margin-bottom: var(--space-4);
}
.mobile-nav__sub[data-astro-cid-3ef6ksr2] a[data-astro-cid-3ef6ksr2] {
  min-height: 2.5rem;
  color: var(--color-ink-soft);
}

/* ── Footer ────────────────────────────────────────────────────────────── */

.site-footer[data-astro-cid-sz7xmlte] {
  padding-block: var(--space-9) var(--space-7);
  background: var(--color-ivory);
  border-top: var(--border-subtle);
}
.site-footer__inner[data-astro-cid-sz7xmlte] { gap: var(--space-8); }
.site-footer[data-astro-cid-sz7xmlte] a[data-astro-cid-sz7xmlte] {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-nav);
}
.site-footer__nav[data-astro-cid-sz7xmlte] ul[data-astro-cid-sz7xmlte],
.site-footer__legal[data-astro-cid-sz7xmlte] ul[data-astro-cid-sz7xmlte] { gap: var(--space-4); }

/* ── Contact form ──────────────────────────────────────────────────────── */

.contact-form {
  position: relative;
  display: grid;
  gap: var(--space-6);
  width: 100%;
  max-width: 38rem;
}
.contact-form__grid {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 640px) {
  .contact-form__grid--split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.field { display: grid; gap: .5rem; }
.field__label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.field__control {
  width: 100%;
  padding: .85rem 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgb(30 26 25 / .18);
  border-radius: 0;
  transition: border-color var(--duration-base) var(--ease-out);
}
.field__control:hover { border-bottom-color: rgb(30 26 25 / .35); }
.field__control:focus {
  outline: none;
  border-bottom-color: var(--color-rose);
}
.field__control::placeholder { color: rgb(110 101 97 / .55); }
textarea.field__control { min-height: 8rem; resize: vertical; line-height: var(--leading-relaxed); }
select.field__control {
  appearance: none;
  cursor: pointer;
  padding-right: 1.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236e6561' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .1rem center;
}

.field--consent {
  grid-template-columns: auto 1fr;
  gap: .75rem;
  align-items: start;
}
.field--consent input {
  width: 1rem;
  height: 1rem;
  margin-top: .3rem;
  accent-color: var(--color-rose);
}
.field--consent .field__note {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-ink-soft);
}

/* Honeypot — hidden from people, visible to naive bots. */
.field--trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.contact-form__submit { justify-self: start; }
.contact-form__note {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

/* Google allows hiding the floating v3 badge when the attribution line below
 * the form is present (see contact-form__recaptcha on both contact pages). */
.grecaptcha-badge { visibility: hidden; }

.contact-form__recaptcha {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--color-ink-soft);
}
.contact-form__recaptcha a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .15em;
}
.contact-form__recaptcha a:hover { color: var(--color-ink); }

.contact-book {
  display: grid;
  gap: var(--space-4);
  justify-items: stretch;
  text-align: center;
  width: 100%;
  max-width: 38rem;
  padding: var(--space-7);
  background: var(--color-ivory-deep);
  border-radius: var(--radius-sm);
}
.contact-book .headline { margin: 0; }
.contact-book .body-text { margin: 0 auto; max-width: none; text-align: center; }
.contact-book .btn { margin-top: var(--space-2); justify-self: center; }

body:has(.contact-page) .page-hero__inner[data-astro-cid-s5hxusys] {
  text-align: center;
}
body:has(.contact-page) .page-hero__inner[data-astro-cid-s5hxusys] > .lede {
  justify-self: stretch;
  text-align: center;
  margin-inline: auto;
}

.contact-page[data-astro-cid-ilz5uget] #anfrage {
  padding-top: var(--space-8);
  border-top: 1px solid rgb(30 26 25 / .1);
}

.form-status {
  padding: var(--space-4) var(--space-5);
  border-left: 2px solid var(--color-rose);
  background: var(--color-ivory-deep);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-ink);
}
.form-status--error { border-left-color: #a8443f; }

.contact-details {
  display: grid;
  gap: var(--space-5);
  padding-top: var(--space-6);
  border-top: var(--border-subtle);
}
@media (min-width: 640px) {
  .contact-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.contact-details__item { display: grid; gap: .35rem; }
.contact-details__label {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.contact-details__value {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  color: var(--color-ink);
  text-decoration: none;
}
a.contact-details__value:hover { color: var(--color-rose); }

/* ── Vertical rhythm & alignment ───────────────────────────────────────── */

/* Every band uses the same padding scale, and every block of copy starts on
 * the same left edge inside the centred container. */
.section { padding-block: var(--section-pad-y); }

.stack { gap: var(--space-stack); }
.stack--lg { gap: var(--space-stack-lg); }

.section-header[data-astro-cid-wk2votdk] {
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  max-width: var(--measure-prose);
}

/* Heroes: a slight breath above and below the content, and clear of the
 * sticky header. */
/* These blocks also carry `.container`, which centres them. Capping their own
 * width would pull the left edge inwards, so the elements stay full container
 * width and only the typography inside is measured. */
.page-hero__inner[data-astro-cid-s5hxusys] {
  padding-block: var(--hero-pad-y);
  gap: var(--space-5);
  justify-items: start;
}
.page-hero__title[data-astro-cid-s5hxusys] { max-width: 18ch; }
.page-hero__inner[data-astro-cid-s5hxusys] .btn { margin-top: var(--space-3); }

/* CTA band: left aligned like every other block instead of centring at 768px. */
.cta-band__inner[data-astro-cid-kokrr3jq] {
  padding-block: var(--section-pad-y);
  gap: var(--space-5);
  max-width: none;
  text-align: left;
  justify-items: start;
}
.cta-band__inner[data-astro-cid-kokrr3jq] .btn { margin-top: var(--space-3); }

/* Content pages share one measure and one gap. */
.service-page[data-astro-cid-xfc3i37n] {
  gap: var(--space-8);
  max-width: none;
}
.service-page__copy[data-astro-cid-xfc3i37n],
.service-page__block[data-astro-cid-xfc3i37n] { max-width: var(--measure-longform); }

.simple-page[data-astro-cid-d4xlr7qi] {
  display: grid;
  gap: var(--space-6);
  justify-items: start;
  max-width: none;
}
.simple-page[data-astro-cid-d4xlr7qi] > * { max-width: var(--measure-longform); }

.about-portrait {
  width: min(18rem, 100%);
  margin-block: var(--space-2);
}
.about-portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 52% 12%;
  background: var(--color-ivory-deep);
  border: var(--border-subtle);
}
.about-portrait figcaption {
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-bronze);
  text-align: center;
}

.simple-page__gallery[data-astro-cid-d4xlr7qi] {
  width: 100%;
  margin-top: var(--space-3);
  background: var(--color-blush);
  border-radius: var(--radius-sm);
}

/* Long-form legal copy stays left-aligned for reading, even when subpages centre. */
.simple-page--legal[data-astro-cid-d4xlr7qi] {
  gap: var(--space-5);
  justify-items: stretch;
  text-align: left;
}
/* Never hide legal copy behind the scroll-reveal fade (opacity: 0 until JS). */
.simple-page--legal.reveal,
.simple-page--legal.reveal.is-inview {
  opacity: 1;
  transform: none;
}
.simple-page--legal[data-astro-cid-d4xlr7qi] > .headline {
  margin-top: var(--space-4);
  color: var(--color-ink);
}
.simple-page--legal[data-astro-cid-d4xlr7qi] > .body-text {
  max-width: var(--measure-longform);
  color: var(--color-ink);
}

.sitemap-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: 1.1em;
  max-width: var(--measure-longform);
}
.sitemap-list a {
  color: var(--color-rose);
  text-underline-offset: .2em;
}
.sitemap-list a:hover { color: var(--color-rose-hover); }

/* Price lists */
.price-list[data-astro-cid-os7f7dgy] { width: 100%; margin-top: var(--space-4); }
.price-list[data-astro-cid-os7f7dgy] + .price-list[data-astro-cid-os7f7dgy] { margin-top: var(--space-7); }
.price-list__row[data-astro-cid-os7f7dgy] { padding-block: var(--space-4); }
.price-list__name[data-astro-cid-os7f7dgy] { font-size: var(--text-lg); color: var(--color-ink); }
.price-list__note[data-astro-cid-os7f7dgy] { color: var(--color-ink-soft); }
.price-list__price[data-astro-cid-os7f7dgy] { color: var(--color-rose); font-weight: 500; }
.price-list__caption[data-astro-cid-os7f7dgy] { margin-bottom: var(--space-3); }

/* Intro copy added below page heroes. Spacing comes from the parent grid. */
.page-intro {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  max-width: var(--measure-longform);
}
.page-intro > .headline:not(:first-child) {
  margin-top: var(--space-5);
}
.page-note {
  margin-top: var(--space-2);
  padding: var(--space-5) var(--space-6);
  background: var(--color-rose-tint);
  border-radius: var(--radius-sm);
  max-width: var(--measure-longform);
}
.page-note > .eyebrow { margin-bottom: var(--space-3); }
.page-note .body-text { max-width: none; }

/* Expandable FAQ on service pages (native details/summary). */
.service-faq {
  display: grid;
  gap: var(--space-3);
  width: 100%;
  max-width: var(--measure-longform);
  margin-top: var(--space-2);
}
.service-faq__item {
  display: block;
  width: 100%;
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  overflow: hidden;
}
.service-faq__item[open] { border-color: var(--color-accent-muted); }
.service-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: var(--leading-snug);
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
}
.service-faq__question::-webkit-details-marker { display: none; }
.service-faq__question::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: 1;
  color: var(--color-rose);
  transition: transform var(--duration-fast) var(--ease-out);
}
.service-faq__item[open] .service-faq__question::after {
  content: "−";
}
.service-faq__answer {
  display: grid;
  gap: var(--space-3);
  padding: 0 var(--space-5) var(--space-5);
}
.service-faq__answer .body-text { max-width: none; }

/* ── Subpages: one centred column on desktop ───────────────────────────── */

/* Head and body used to disagree. The page hero sits in a 40rem column, the
 * content below in a 44rem one (or the full 80rem container on the Make-Up
 * overview), so their left edges never lined up — the hero read as "centred"
 * against a "left" body. From tablet width up every subpage block now shares one
 * measure and centred text. Mobile is left as it is: there the columns already
 * coincide, and centred body copy costs more in readability than it gains.
 * `:has()` scopes this to subpages — neither homepage has a `.page-hero`. */
@media (min-width: 768px) {
  body:has(.page-hero) .page-hero__inner[data-astro-cid-s5hxusys],
  body:has(.page-hero) .cta-band__inner[data-astro-cid-kokrr3jq] {
    max-width: var(--measure-longform);
  }

  body:has(.page-hero) .page-hero__inner[data-astro-cid-s5hxusys],
  body:has(.page-hero) .service-page[data-astro-cid-xfc3i37n],
  body:has(.page-hero) .simple-page[data-astro-cid-d4xlr7qi],
  body:has(.page-hero) .contact-page[data-astro-cid-ilz5uget],
  body:has(.page-hero) .cta-band__inner[data-astro-cid-kokrr3jq],
  body:has(.page-hero) .section-header[data-astro-cid-wk2votdk],
  /* The gallery header borrows `.services-all__header` from the homepage, where
   * that class pins its rows to the left edge. On a subpage it has to follow the
   * centred column like every block around it — the `:has()` scope leaves the two
   * homepages, which have no `.page-hero`, left-aligned as before. */
  body:has(.page-hero) .services-all__header {
    text-align: center;
    justify-items: center;
  }

  body:has(.page-hero) .simple-page--legal[data-astro-cid-d4xlr7qi],
  body:has(.page-hero) .simple-page--legal[data-astro-cid-d4xlr7qi] > * {
    text-align: left;
    justify-items: stretch;
    justify-self: stretch;
  }
  body:has(.page-hero) .simple-page--legal[data-astro-cid-d4xlr7qi] {
    margin-inline: auto;
  }

  /* Blocks that carry their own max-width would otherwise stay pinned to the
   * left edge of whatever container they sit in. */
  body:has(.page-hero) .page-intro,
  body:has(.page-hero) .page-note,
  body:has(.page-hero) .service-faq,
  body:has(.page-hero) .makeup-infos,
  body:has(.page-hero) .section-header[data-astro-cid-wk2votdk],
  body:has(.page-hero) .service-page__block[data-astro-cid-xfc3i37n],
  body:has(.page-hero) .service-page__copy[data-astro-cid-xfc3i37n],
  body:has(.page-hero) .simple-page[data-astro-cid-d4xlr7qi] > *,
  body:has(.page-hero) .price-list[data-astro-cid-os7f7dgy] {
    margin-inline: auto;
  }
  body:has(.page-hero) .page-intro,
  body:has(.page-hero) .page-note { justify-items: center; }

  /* Two structures stay left-aligned inside their centred column. A price row
   * pairs a name with its price across the line, and a form label belongs above
   * its control — centring either would break the reading relationship. */
  body:has(.page-hero) .price-list[data-astro-cid-os7f7dgy] {
    max-width: var(--measure-longform);
    text-align: left;
  }
  body:has(.page-hero) .price-list__caption[data-astro-cid-os7f7dgy] { text-align: center; }

  body:has(.page-hero) .contact-form {
    text-align: left;
    justify-items: stretch;
    margin-inline: auto;
  }
  body:has(.page-hero) .contact-book {
    margin-inline: auto;
  }

  /* Contact details are self-contained label/value pairs rather than a reading
   * line, so they follow the centred column instead of opting out of it. */
  body:has(.page-hero) .contact-details {
    margin-inline: auto;
    text-align: center;
  }
}

/* ── Home: hero ────────────────────────────────────────────────────────── */

/* The hero fills the first screen: viewport height minus the sticky header, so
 * its lower edge lands exactly on the fold instead of pushing past it. `svh`
 * measures the *small* viewport, which keeps mobile browsers from cutting the
 * bottom off while their address bar is expanded. `min-height` rather than
 * `height` so the content can still grow past the fold on short screens. */
.home-hero[data-astro-cid-f2t6dg3d] {
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100svh - var(--header-height));
  display: grid;
  padding-block: 0;
}
/* The veil is absolutely positioned, so the content wrapper is the only grid
 * item and stretches full height — centring happens inside it. */
.home-hero[data-astro-cid-f2t6dg3d] > .marble-surface__content {
  display: grid;
  align-content: center;
  width: 100%;
}
/* Padding lives on the inner block so the copy keeps breathing room top and
 * bottom even when the viewport is too short to centre anything. */
.home-hero__inner[data-astro-cid-f2t6dg3d] {
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

/* On phones copy and portrait stack, and together they are taller than the
 * fold — so `min-height` on the section never kicks in and centring it has no
 * effect. Instead the copy alone claims the first screen and centres itself in
 * it; the portrait starts below the fold and is reached by scrolling. */
@media (max-width: 767px) {
  .home-hero[data-astro-cid-f2t6dg3d] > .marble-surface__content {
    align-content: start;
  }
  /* Top padding would push the copy out of its own screen; the bottom keeps the
   * portrait off the section edge. */
  .home-hero__inner[data-astro-cid-f2t6dg3d] {
    padding-block: 0 clamp(3.5rem, 7vw, 6rem);
  }
  /* Symmetric padding leaves the centring exact while still keeping the copy
   * off the header and off the portrait on screens too short to centre in. */
  .home-hero__copy[data-astro-cid-f2t6dg3d] {
    min-height: calc(100vh - var(--header-height));
    min-height: calc(100svh - var(--header-height));
    align-content: center;
    padding-block: var(--space-6);
  }
}

/* Wide enough for "Andji's Beauty Studio" to hold one line on desktop; it wraps
 * on its own once the column gets narrower. */
.home-hero__title[data-astro-cid-f2t6dg3d] {
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  max-width: 24ch;
}
/* The title is now the brand name alone, set in the serif italic accent. */
.home-hero__title[data-astro-cid-f2t6dg3d] .script-accent {
  display: block;
  margin-top: 0;
}
/* The hero paragraph uses the page body font rather than the serif lede. */
.home-hero__text[data-astro-cid-f2t6dg3d] {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-body);
  max-width: var(--measure-prose);
}
.home-hero__portrait[data-astro-cid-f2t6dg3d] { max-width: 24rem; }

/* Image placeholders read as calm reserved space, not decorative gradients. */
.home-hero__portrait[data-astro-cid-f2t6dg3d] {
  background: var(--color-ivory-deep);
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
}
.home-hero__portrait[data-astro-cid-f2t6dg3d]::after { display: none; }
.home-hero__portrait-label[data-astro-cid-f2t6dg3d] {
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-bronze);
}

/* ── Home: marble on the remaining bands ───────────────────────────────── */

/* Hero, Make-Up and CTA already carry the `.marble-surface` veil markup. These
 * three sections don't, so the texture is layered in with a pseudo-element
 * instead of editing the build output. `isolation` gives each section its own
 * stacking context, so the negative z-index lands above the section's own
 * background but still behind its content — no content wrappers needed. */
.home-services,
.home-about,
.services-all,
.usp-bar {
  position: relative;
  isolation: isolate;
}
.home-services::before,
.home-about::before,
.services-all::before,
.usp-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Same darken-then-contrast treatment as the veil bands. */
  filter: saturate(.55) brightness(.9) contrast(1.3);
  /* No white wash on this variant, so the opacity *is* the strength. Held a
   * little below the feature bands: these three carry small accent-coloured text
   * (`.service-teaser__link`), which needs the veins to stay lighter. */
  opacity: .82;
}
.home-services::before { background-image: url(/textures/marble-veined.jpg); }
.home-about::before    { background-image: url(/textures/marble-warm.jpg); }
.services-all::before  { background-image: url(/textures/marble-light.jpg); }
.usp-bar::before       { background-image: url(/textures/marble-light.jpg); }

/* ── Marble on narrow screens ──────────────────────────────────────────── */

/* The textures are landscape (1024 × 576 and 1024 × 682). Inside a narrow, tall
 * band `cover` has to scale by height, so on a 390 px phone the photo is blown up
 * to roughly 1240 px wide and only about a third of its width is on screen — far
 * less veining reaches the eye, and that third is slightly upscaled on top.
 *
 * There is no geometric fix with these files: shrinking the texture to fit the
 * width would leave it repeating vertically, and a tiled marble photo shows hard
 * seams. So the strength is raised instead, and the extra contrast pulls what
 * little veining is visible further forward. Portrait-format source images would
 * solve this properly — noted in the TODO list.
 *
 * Placed after the base rules so the equal-specificity overrides win on order. */
@media (max-width: 767px) {
  .marble-surface .marble-surface__veil,
  .home-services::before,
  .home-about::before,
  .services-all::before,
  .usp-bar::before {
    filter: saturate(.55) brightness(.87) contrast(1.4);
  }
  .marble-surface .marble-surface__veil::after {
    background: rgb(251 249 248 / .1);
  }
  .home-services::before,
  .home-about::before,
  .services-all::before,
  .usp-bar::before { opacity: .9; }
}

/* ── Home: all services with category filter ───────────────────────────── */

.services-all__header { margin-bottom: var(--space-6); }

.service-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
}
.filter-pill {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  padding: .8em 1.6em;
  border: 1px solid var(--color-accent-muted);
  border-radius: 999px;
  background: transparent;
  color: var(--color-accent-strong);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}
.filter-pill:hover {
  background: var(--color-accent-tint);
  border-color: var(--color-accent);
}
.filter-pill.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

.service-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.service-item { display: flex; }
/* `display: flex` above would beat the UA rule for the hidden attribute the
 * filter sets, so restore it explicitly. */
.service-item[hidden] { display: none; }

.service-item__link {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--color-white);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.service-item__link:hover {
  border-color: var(--color-rose-muted);
  box-shadow: var(--shadow-panel);
  transform: translateY(-2px);
}
.service-item__cat {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-rose);
}
.service-item__name {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-ink);
}
.service-item__note {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-ink-soft);
}
.service-item__price {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: var(--border-subtle);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--color-rose);
}
.service-grid__empty { margin-top: var(--space-6); }

@media (min-width: 640px) {
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Home: services ────────────────────────────────────────────────────── */

.service-teaser[data-astro-cid-sx3xgput] { gap: var(--space-4); }

/* Auf dem Handy stehen die drei Leistungen untereinander statt nebeneinander,
 * und der einspaltige Fluss lässt die 4rem unter „Deine Schönheit. Mein
 * Handwerk.“ wie einen Bruch wirken. Nur hier verkürzt — die übrigen
 * `.section-header` behalten ihren Abstand. */
@media (max-width: 767px) {
  .home-services .section-header[data-astro-cid-wk2votdk] {
    margin-bottom: var(--space-6);
  }
}
.service-teaser__link[data-astro-cid-sx3xgput],
.home-services__all[data-astro-cid-uy4qcwxg],
.makeup-card__link[data-astro-cid-z6ptjhws] {
  letter-spacing: var(--tracking-nav);
  padding-bottom: .25em;
  border-bottom: 1px solid transparent;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.service-teaser__link[data-astro-cid-sx3xgput]:hover,
.makeup-card__link[data-astro-cid-z6ptjhws]:hover {
  border-bottom-color: var(--color-rose-muted);
}

/* The section ends after "Mehr erfahren". Each column used to continue with a
 * single teased price and an "Alle Preise" link, which duplicated a route the
 * teaser link already covers and made the three columns bottom-heavy.
 *
 * Hidden rather than deleted because the markup is Astro build output: the next
 * rebuild would bring it straight back, and `display: none` also drops it from
 * the accessibility tree, so nothing is left announced. Remove the components
 * from the source templates when the project is rebuilt. */
.price-preview[data-astro-cid-cdjkeebx],
.home-services__all[data-astro-cid-uy4qcwxg] { display: none; }

/* Small accent text sits directly on the veining now. The default accent
 * (#8a6a54) drops to roughly 3:1 over a dark vein; the deeper tone holds above
 * 4.5:1 while staying in the same brand family. */
.service-teaser__link[data-astro-cid-sx3xgput] { color: var(--color-accent-deep); }

/* ── Home: make-up cards ───────────────────────────────────────────────── */

.makeup-card__media[data-astro-cid-z6ptjhws] {
  border: var(--border-subtle);
  background: var(--color-ivory-deep);
}
.makeup-card--tages[data-astro-cid-z6ptjhws] .makeup-card__media[data-astro-cid-z6ptjhws] { background: #f4efeb; }
.makeup-card--glam[data-astro-cid-z6ptjhws] .makeup-card__media[data-astro-cid-z6ptjhws] { background: #ebe0df; }
.makeup-card--braut[data-astro-cid-z6ptjhws] .makeup-card__media[data-astro-cid-z6ptjhws] { background: #f7f3ef; }

/* ── Make-Up: info grid (appointment, deposit, preparation …) ──────────── */

.makeup-infos {
  display: grid;
  gap: var(--space-stack);
  width: 100%;
  max-width: none;
}
.makeup-infos__head {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  max-width: var(--measure-prose);
  margin-bottom: var(--space-5);
}
.makeup-infos__columns {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  width: 100%;
}
.makeup-infos__col {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: var(--space-6);
}
@media (min-width: 768px) {
  .makeup-infos__col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: 3rem auto 1fr;
    grid-auto-flow: column;
    column-gap: var(--space-6);
    row-gap: var(--space-3);
    align-items: start;
  }
  .makeup-infos__col + .makeup-infos__col {
    position: relative;
    border-top: var(--line-bronze);
    padding-top: var(--space-5);
  }
  .makeup-infos__col + .makeup-infos__col::after {
    content: "✦";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-inline: var(--space-2);
    font-size: .5rem;
    line-height: 1;
    color: var(--color-bronze);
    background: var(--color-ivory);
  }
}
.makeup-info {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: start;
  gap: var(--space-3);
  height: 100%;
  padding-block: var(--space-4);
  text-align: center;
}
.makeup-info + .makeup-info {
  position: relative;
  border-top: var(--line-bronze);
}
.makeup-info + .makeup-info::after {
  content: "✦";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-inline: var(--space-2);
  font-size: .5rem;
  line-height: 1;
  color: var(--color-bronze);
  background: var(--color-ivory);
}
@media (min-width: 768px) {
  .makeup-info + .makeup-info {
    border-top: none;
    padding-top: 0;
  }
  .makeup-info + .makeup-info::after {
    content: none;
  }
}
.makeup-info__icon {
  display: grid;
  place-content: center;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--color-blush);
  border: var(--border-subtle);
  color: var(--color-accent-strong);
}
.makeup-info__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
.makeup-info__body {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  justify-items: center;
  text-align: center;
}
.makeup-info__title {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  line-height: var(--leading-snug);
  color: var(--color-ink);
}
.makeup-info__body .body-text,
.makeup-info__list {
  max-width: none;
  margin: 0;
  font-size: var(--text-xs);
}
.makeup-info__list {
  display: grid;
  gap: var(--space-1);
  padding: 0;
  list-style: none;
}
.makeup-info__list li {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  color: var(--color-body);
}

@media (min-width: 768px) {
  .makeup-info,
  .makeup-info__body {
    display: contents;
  }
  .makeup-info__icon {
    justify-self: center;
    align-self: start;
  }
  .makeup-info__title,
  .makeup-info__body .body-text,
  .makeup-info__list {
    align-self: start;
    justify-self: center;
  }
}

/* ── Home: about ───────────────────────────────────────────────────────── */

.home-about__figure[data-astro-cid-ykppucms] {
  background: var(--color-ivory-deep);
  border: var(--border-subtle);
}
.home-about__figure[data-astro-cid-ykppucms]::before { display: none; }
.home-about__figure-label[data-astro-cid-ykppucms] {
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-bronze);
}
.home-about__location[data-astro-cid-ykppucms] {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-bronze);
}

/* ── Home: USP bar ─────────────────────────────────────────────────────── */

.usp-bar[data-astro-cid-whga67wq] {
  padding-block: clamp(3rem, 6vw, 4.5rem);
  background: var(--color-ivory-deep);
  border-block: var(--border-subtle);
}
/* The label above the list is dropped visually, but it is the section's only
 * heading and `aria-labelledby` points at it — so it stays in the accessibility
 * tree instead of being removed from the markup. */
.usp-bar__title[data-astro-cid-whga67wq] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.usp-bar[data-astro-cid-whga67wq] li[data-astro-cid-whga67wq] {
  letter-spacing: var(--tracking-nav);
  color: var(--color-ink-soft);
}
/* Icons show the flat brand accent — they are decorative (aria-hidden) and
 * always paired with a text label, so the softer tone is fine here. Larger than
 * the generated defaults (2rem / 2.5rem). */
.usp-bar__icon[data-astro-cid-whga67wq] { color: var(--color-accent); }
.usp-bar__icon[data-astro-cid-whga67wq] .icon { width: 2.6rem; height: 2.6rem; }
.service-teaser__icon[data-astro-cid-sx3xgput] {
  width: 3.15rem;
  height: 3.15rem;
  color: var(--color-accent);
}

/* ── Eyebrow: one distance to the heading, everywhere ──────────────────────
 *
 * The "above title" line lives in five different containers, each a grid with
 * its own gap, so the distance to the heading drifted between 0 and 1.5rem.
 * The reference is `Meine Leistungen` — a `.section-header` at
 * `gap: var(--space-4)` (1rem).
 *
 * A grid gap cannot be set for a single row, so instead of touching the gap
 * (which also spaces heading → lede → button) each eyebrow is nudged by the
 * difference. Everything below the heading keeps its original rhythm. */
.home-hero__copy[data-astro-cid-f2t6dg3d] > .eyebrow,
.home-about__copy[data-astro-cid-ykppucms] > .eyebrow,
.cta-band__inner[data-astro-cid-kokrr3jq] > .eyebrow,
.page-hero__inner[data-astro-cid-s5hxusys] > .eyebrow {
  margin-bottom: calc(var(--space-4) - var(--space-stack));
}

/* The overview header carries the `.section-header` class but not the build's
 * `data-astro-cid`, so none of the generated layout applied and its eyebrow sat
 * flush against the title. Restated here to match the reference exactly. */
.services-all__header {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}

/* ── Centred headings on the service pages ─────────────────────────────────
 *
 * `Preise` and `Weitere Angebote` sit in a `.service-page__copy`, which is also
 * a `.stack`. The subpage rule centres the block itself, but `.stack`'s
 * `justify-items: start` shrink-wraps each row to its content, so the inherited
 * `text-align: center` had no width to work with and the headings stayed left.
 * Centring the grid item is what actually moves them. */
@media (min-width: 768px) {
  body:has(.page-hero) .service-page__copy[data-astro-cid-xfc3i37n] > .headline {
    justify-self: center;
    text-align: center;
  }

  body:has(.page-hero) .makeup-infos__head {
    justify-self: center;
    justify-items: center;
    text-align: center;
  }
  body:has(.page-hero) .makeup-infos__head > .headline {
    justify-self: center;
    text-align: center;
  }

  /* `Mehr erfahren` under the make-up cards was pinned to the start of its
   * column for the same reason. */
  body:has(.page-hero) .makeup-card__link[data-astro-cid-z6ptjhws] {
    justify-self: center;
  }

  /* The enquiry heading and its intro sit in a `.stack`, whose `justify-items:
   * start` shrink-wraps every row to its content — so the inherited
   * `text-align: center` had nothing to centre within. Stretching the rows back
   * to full width lets the text centre, and leaves the form grid intact. */
  body:has(.page-hero) .contact-page[data-astro-cid-ilz5uget] > .container {
    justify-items: stretch;
    text-align: center;
  }

  /* `.body-text` carries `max-width: var(--measure-prose)`. Under `stretch` that
   * caps the box and leaves the leftover space on the right, so the paragraph
   * still reads as left-aligned. Pinning it (and the heading above it) to the
   * centre axis is what actually centres the copy under the form heading. */
  body:has(.page-hero) .contact-page[data-astro-cid-ilz5uget] #termin > .contact-book,
  body:has(.page-hero) .contact-page[data-astro-cid-ilz5uget] #anfrage > .headline,
  body:has(.page-hero) .contact-page[data-astro-cid-ilz5uget] #anfrage > .body-text {
    justify-self: center;
    text-align: center;
  }

  /* Submit and its note close the form, so they follow the page's centre axis
   * rather than the left edge of the fields above them. */
  body:has(.page-hero) .contact-form__submit { justify-self: center; }
  body:has(.page-hero) .contact-form__note,
  body:has(.page-hero) .contact-form__recaptcha { text-align: center; }
}

/* ── Footer: reachable contact routes ──────────────────────────────────────
 * Phone and address as real markup rather than script output — this is exactly
 * the content crawlers and assistive tech should find without running JS. */
.site-footer__reach {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
  list-style: none;
  padding: 0;
}
/* The build styles footer links through `.site-footer a[data-astro-cid-sz7xmlte]`
 * — the scoping attribute sits on every generated anchor. These two links were
 * added by hand and never got it, so they fell through to body typography and
 * stood out next to the navigation. Restated here so every link in the footer
 * reads the same: same size, same tracking, same colour. */
.site-footer__reach a {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-ink-soft);
  transition: color var(--duration-fast) var(--ease-out);
}
.site-footer__reach a:hover { color: var(--color-ink); }
/* An address is case-sensitive for reading; leave it in its natural form. */
.site-footer__reach a[href^="mailto:"] {
  text-transform: none;
  letter-spacing: -.003em;
}

/* ── Footer contact widgets ────────────────────────────────────────────────
 *
 * Injected by `/scripts/site.js` into the footer's brand column: WhatsApp,
 * Instagram, phone and mail as a row of round icon buttons. White discs on the
 * footer's deeper ivory, filling with the brand accent on hover — the same
 * treatment the floating launcher uses, so the two read as one system.
 */
.footer-reach {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: 0;
  list-style: none;
}
.footer-reach__link {
  display: grid;
  place-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: var(--border-subtle);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-accent-deep);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.footer-reach__link:hover,
.footer-reach__link:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

/* ── Contact / socials launcher ────────────────────────────────────────────
 *
 * Injected by `/scripts/site.js`. Pinned bottom right; the four routes fan out
 * above the button on hover, focus or tap.
 */
.reach-fab {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  /* Below the sticky header (50) and its mega menu (49): when the mobile nav
   * drops open it should cover the launcher, not sit behind it. */
  z-index: 45;
  display: grid;
  justify-items: center;
  gap: .625rem;
}

.reach-fab__menu {
  display: grid;
  justify-items: center;
  gap: .625rem;
  margin: 0;
  padding: 0;
  list-style: none;
  /* `visibility` rather than `display` so the items can transition, and so they
   * drop out of the tab order while the menu is closed. */
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out),
              visibility var(--duration-fast) var(--ease-out);
}
.reach-fab.is-open .reach-fab__menu {
  visibility: visible;
  opacity: 1;
}

.reach-fab__link,
.reach-fab__toggle {
  display: grid;
  place-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: transform var(--duration-base) var(--ease-out),
              opacity var(--duration-base) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.reach-fab__link {
  position: relative;
  width: 2.875rem;
  height: 2.875rem;
  background: var(--color-white);
  border: var(--border-subtle);
  color: var(--color-accent-deep);
  box-shadow: var(--shadow-panel);
  /* Closed state: tucked down behind the button and scaled back, so opening
   * reads as the routes rising out of it rather than simply appearing. */
  transform: translateY(.75rem) scale(.85);
  opacity: 0;
  transition-delay: 0ms;
}
.reach-fab.is-open .reach-fab__link {
  transform: none;
  opacity: 1;
  transition-delay: var(--reach-delay, 0ms);
}
.reach-fab__link:hover,
.reach-fab__link:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

/* The label rides along to the left of its icon. Hidden until the row is
 * hovered or focused so the closed column stays a clean stack of circles. */
.reach-fab__label {
  position: absolute;
  right: calc(100% + .5rem);
  padding: .35em .75em;
  border-radius: var(--radius-btn);
  background: var(--color-ink);
  color: var(--color-white);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-nav);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(.25rem);
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.reach-fab__link:hover .reach-fab__label,
.reach-fab__link:focus-visible .reach-fab__label {
  opacity: 1;
  transform: none;
}

.reach-fab__toggle {
  width: 3.5rem;
  height: 3.5rem;
  border: 0;
  background: var(--color-accent);
  color: var(--color-white);
  box-shadow: 0 10px 24px rgb(30 26 25 / .18);
}
.reach-fab__toggle:hover { background: var(--color-accent-hover); }
.reach-fab__toggle svg {
  transition: transform var(--duration-base) var(--ease-out);
}
/* The plus turns into a close cross — same glyph, no icon swap. */
.reach-fab.is-open .reach-fab__toggle svg { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .reach-fab__link,
  .reach-fab__toggle svg { transition-duration: .01ms; }
  .reach-fab__link { transform: none; }
}

/* ── Reference gallery ─────────────────────────────────────────────────────
 *
 * Filter pills reuse `.filter-pill` from the services overview so the two
 * controls stay identical; only the layout below them is new.
 * Top spacing comes from `.section` — do not zero out padding-top here.
 */

.gallery__filter { justify-content: center; }

.gallery__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 600px) {
  .gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.gallery-item { display: flex; }
/* `display: flex` above outranks the UA rule behind the `hidden` attribute the
 * filter and the pager set, so it has to be restored explicitly. */
.gallery-item[hidden] { display: none; }

.gallery-item__figure {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  background: var(--color-white);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.gallery-item__figure:hover {
  border-color: var(--color-accent-muted);
  box-shadow: var(--shadow-panel);
  transform: translateY(-2px);
}

/* Portrait frame — beauty work is shot vertically, and a fixed ratio keeps the
 * grid even while the tiles are still placeholders. Swapping in a photo means
 * replacing the div with an `<img>` carrying the same class. */
.gallery-item__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  display: grid;
  place-content: center;
  gap: var(--space-2);
  background: var(--color-ivory-deep);
  background-image: url(/textures/marble-light.jpg);
  background-size: cover;
  background-position: center;
  color: var(--color-accent-strong);
  text-align: center;
}
.gallery-item__mark {
  font-size: var(--text-xl);
  line-height: 1;
}
.gallery-item__pending {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.gallery-item__caption {
  display: grid;
  gap: .3rem;
  padding: var(--space-4) var(--space-5) var(--space-5);
}
.gallery-item__cat {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent-strong);
}
.gallery-item__name {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  color: var(--color-ink);
}
.gallery-item__note {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

.gallery__empty {
  margin-top: var(--space-6);
  text-align: center;
  color: var(--color-ink-soft);
}

.gallery__status {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-nav);
  text-align: center;
  color: var(--color-ink-soft);
}

.gallery__pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.gallery__gap {
  padding: 0 .25em;
  color: var(--color-ink-soft);
}
.gallery__page,
.gallery__step {
  display: grid;
  place-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 1em;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  border: 1px solid var(--color-accent-muted);
  border-radius: 999px;
  background: transparent;
  color: var(--color-accent-strong);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}
.gallery__page:hover:not(.is-active),
.gallery__step:hover:not(:disabled) {
  background: var(--color-accent-tint);
  border-color: var(--color-accent);
}
.gallery__page.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}
.gallery__step:disabled {
  opacity: .35;
  cursor: default;
}

/* The pager is empty until the script fills it, so it ships with `hidden`.
 * `display: flex` above outranks the UA rule for that attribute — the same trap
 * the mobile navigation and the service filter already hit. */
.gallery__pagination[hidden] { display: none; }

/* ── Image slider ──────────────────────────────────────────────────────────
 *
 * A scroll-snap track rather than a transform carousel: swiping, trackpad
 * gestures and keyboard scrolling all come from the browser, and the script
 * only has to move the scroll position and mirror it back into the dots. If the
 * script never runs the slides stay swipeable — only the arrows and dots, which
 * are script-built, are missing.
 *
 * Slides are placeholders until the photographs arrive; swapping one in means
 * replacing the inner div with an `<img class="slider__media">`.
 */
.slider {
  display: grid;
  gap: var(--space-4);
  width: 100%;
}
.slider__frame { position: relative; }

.slider__viewport {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  border-radius: var(--radius-md);
  /* The dots carry the position, so the scrollbar would only add noise. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.slider__viewport::-webkit-scrollbar { display: none; }

.slider__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.slider__media {
  display: grid;
  place-content: center;
  gap: var(--space-2);
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--color-ivory-deep);
  background-image: url(/textures/marble-light.jpg);
  background-size: cover;
  background-position: center;
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--color-accent-strong);
  text-align: center;
}
.slider__mark {
  font-size: var(--text-xl);
  line-height: 1;
}
.slider__pending {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: var(--border-subtle);
  border-radius: 50%;
  background: rgb(255 255 255 / .88);
  color: var(--color-accent-deep);
  box-shadow: var(--shadow-panel);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.slider__arrow:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}
.slider__arrow--prev { left: clamp(.5rem, 2vw, 1rem); }
.slider__arrow--next { right: clamp(.5rem, 2vw, 1rem); }

/* The dot itself is drawn in a pseudo-element so the button can stay large
 * enough to hit on a phone while the mark stays small. */
.slider__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .25rem;
}
.slider__dot {
  position: relative;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.slider__dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: .5rem;
  height: .5rem;
  border: 1px solid var(--color-accent-muted);
  border-radius: 999px;
  background: transparent;
  transition: width var(--duration-base) var(--ease-out),
              background-color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}
.slider__dot:hover::before { border-color: var(--color-accent); }
.slider__dot[aria-current="true"]::before {
  width: 1.5rem;
  background: var(--color-accent);
  border-color: var(--color-accent);
}

/* Admin-managed photos: the frame size stays fixed; the image covers it.
 * PNG/WebP alpha is kept — once a photo is in, the placeholder fill goes away. */
[data-media-slot],
[data-media-slot-host] .makeup-card__media[data-astro-cid-z6ptjhws] {
  position: relative;
  overflow: hidden;
}
img.media-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--media-pos, 50% 50%);
  display: block;
  background: transparent;
  border: 0;
}
.has-media {
  background-color: transparent !important;
  background-image: none !important;
}

/* Hide admin-managed placeholders until site.js marks a slot with .has-media.
 * About slider slides (.slider__slide) stay visible — placeholders only there. */
[data-media-slot]:not(.has-media):not(.slider__slide),
.home-hero__portrait[data-astro-cid-f2t6dg3d]:not(.has-media),
[data-media-slot-host]:not(.has-media) .makeup-card__media,
[data-media-slot-host] .makeup-card__media:not(.has-media),
[data-media-slot-host]:not(.has-media) .makeup-card__media[data-astro-cid-z6ptjhws],
[data-media-slot-host] .makeup-card__media[data-astro-cid-z6ptjhws]:not(.has-media) {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  background: none !important;
}
.home-hero__media[data-astro-cid-f2t6dg3d]:not(:has(.has-media)) {
  display: none !important;
}

/* Desktop without admin hero portrait: fill the fold below the header. */
@media (min-width: 900px) {
  .home-hero.home-hero--no-portrait[data-astro-cid-f2t6dg3d] {
    min-height: calc(100vh - var(--header-height));
    min-height: calc(100svh - var(--header-height));
    grid-template-rows: minmax(0, 1fr);
  }
  .home-hero.home-hero--no-portrait[data-astro-cid-f2t6dg3d] > .marble-surface__content {
    min-height: calc(100vh - var(--header-height));
    min-height: calc(100svh - var(--header-height));
    display: grid;
    align-content: center;
    align-self: stretch;
  }
  .home-hero.home-hero--no-portrait[data-astro-cid-f2t6dg3d] .home-hero__inner[data-astro-cid-f2t6dg3d] {
    width: 100%;
    align-items: center;
  }
  .home-hero.home-hero--no-portrait[data-astro-cid-f2t6dg3d] .home-hero__media[data-astro-cid-f2t6dg3d] {
    display: block !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 100%;
    max-width: 26rem;
    margin-inline: 0 0 auto;
    justify-self: end;
    aspect-ratio: 4 / 5;
    height: auto !important;
    min-height: 0 !important;
    background: none !important;
    border: 0 !important;
    overflow: hidden !important;
  }
}
[data-media-slot]:not(.has-media):not(.slider__slide)::before,
[data-media-slot]:not(.has-media):not(.slider__slide)::after,
.home-hero__portrait[data-astro-cid-f2t6dg3d]:not(.has-media)::before,
.home-hero__portrait[data-astro-cid-f2t6dg3d]:not(.has-media)::after {
  display: none !important;
  content: none !important;
}

.has-media .gallery-item__pending,
.has-media .gallery-item__mark,
.has-media .slider__pending,
.has-media .slider__mark,
.has-media .home-hero__portrait-label,
.has-media .home-about__figure-label {
  display: none;
}