@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap');

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: 'Jost', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  background: var(--bg-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; list-style: none; }

/* ---------- Tokens ---------- */
:root {
  --bg-cream: #F4EFE6;
  --bg-card:  #FAF6EE;
  --bg-deep:  #EAE2D2;
  --ink:        #1A1715;
  --ink-soft:   #5C544D;
  --ink-muted:  #8B8278;
  --sage:       #7C8266;
  --sage-deep:  #5F6450;
  --gold:       #B7956A;
  --line:       #D9D0BF;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-pill: 2px;

  --shadow-card:
    0 1px 0 rgba(124,130,102,.06),
    0 8px 24px -12px rgba(26,23,21,.18);
  --shadow-card-hover:
    0 1px 0 rgba(124,130,102,.08),
    0 18px 36px -16px rgba(26,23,21,.24);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);

  --dur-fast:   220ms;
  --dur-medium: 360ms;
  --dur-slow:   720ms;
  --dur-luxe:   1100ms;

  --container: 1240px;
  --container-narrow: 880px;
}

/* ---------- Motion: scroll-reveal system ----------
   Styles only apply when JS has tagged the element (.js-reveal).
   Default state (no JS): elements are visible. */
[data-reveal].js-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-slow) var(--ease-out-quart),
    transform var(--dur-slow) var(--ease-out-quart);
  will-change: opacity, transform;
}
[data-reveal].js-reveal.is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Staggered groups: children fade up sequentially when parent enters viewport */
[data-reveal="stagger"].js-reveal > * {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--dur-slow) var(--ease-out-quart),
    transform var(--dur-slow) var(--ease-out-quart);
}
[data-reveal="stagger"].js-reveal { opacity: 1; transform: none; }
[data-reveal="stagger"].js-reveal.is-in > *           { opacity: 1; transform: none; }
[data-reveal="stagger"].js-reveal.is-in > :nth-child(1) { transition-delay:   0ms; }
[data-reveal="stagger"].js-reveal.is-in > :nth-child(2) { transition-delay: 110ms; }
[data-reveal="stagger"].js-reveal.is-in > :nth-child(3) { transition-delay: 220ms; }
[data-reveal="stagger"].js-reveal.is-in > :nth-child(4) { transition-delay: 330ms; }
[data-reveal="stagger"].js-reveal.is-in > :nth-child(5) { transition-delay: 440ms; }
[data-reveal="stagger"].js-reveal.is-in > :nth-child(6) { transition-delay: 550ms; }
[data-reveal="stagger"].js-reveal.is-in > :nth-child(7) { transition-delay: 660ms; }
[data-reveal="stagger"].js-reveal.is-in > :nth-child(8) { transition-delay: 770ms; }

/* Image figures — gentle scale + saturation on reveal ('photograph developing') */
[data-reveal="figure"].js-reveal {
  opacity: 0;
  transform: scale(1.02);
  transition:
    opacity var(--dur-luxe) var(--ease-out-quart),
    transform var(--dur-luxe) var(--ease-out-quart);
}
[data-reveal="figure"].js-reveal img {
  filter: saturate(.6);
  transition: filter var(--dur-luxe) var(--ease-out-quart);
}
[data-reveal="figure"].js-reveal.is-in {
  opacity: 1;
  transform: none;
}
[data-reveal="figure"].js-reveal.is-in img {
  filter: saturate(1);
}

/* ---------- Motion: hero entrance (one-shot on load) ---------- */
@keyframes lift-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes settle-in {
  from { opacity: 0; transform: scale(1.03); filter: saturate(.6); }
  to   { opacity: 1; transform: none; filter: saturate(1); }
}
.is-loaded .hero-anim {
  animation: lift-in var(--dur-luxe) var(--ease-out-quart) both;
}
.is-loaded .hero-anim--1 { animation-delay:   0ms; }
.is-loaded .hero-anim--2 { animation-delay: 120ms; }
.is-loaded .hero-anim--3 { animation-delay: 240ms; }
.is-loaded .hero-anim--4 { animation-delay: 360ms; }
.is-loaded .hero-anim--5 { animation-delay: 480ms; }
.is-loaded .hero-figure-anim {
  animation: settle-in 1400ms var(--ease-out-quart) both;
  animation-delay: 200ms;
}
/* Pre-load state: hide animated hero pieces so they don't flash before is-loaded triggers */
.hero-anim, .hero-figure-anim { opacity: 0; }

/* ---------- Motion: reduced-motion guard ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  [data-reveal].js-reveal,
  [data-reveal="stagger"].js-reveal > *,
  [data-reveal="figure"].js-reveal,
  [data-reveal="figure"].js-reveal img {
    opacity: 1 !important; transform: none !important; filter: none !important;
  }
  .hero-anim, .hero-figure-anim { opacity: 1; }
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--ink);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.h-display {
  font-size: clamp(3rem, 7vw, 5.8rem);
  letter-spacing: -0.022em;
  line-height: 1.02;
  font-weight: 400;
}
.h-section { font-size: clamp(2.2rem, 4.4vw, 3.4rem); font-weight: 400; }
.h-card    { font-size: 1.65rem; font-weight: 500; }
.script-accent {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  color: var(--sage-deep);
  letter-spacing: -0.01em;
}
.eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 400;
}
.eyebrow::after {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--sage);
  margin: 14px auto 0;
}
.eyebrow.left::after { margin-left: 0; margin-right: auto; }

p { color: var(--ink-soft); font-weight: 300; }
.lead { font-size: 1.18rem; color: var(--ink-soft); line-height: 1.65; font-weight: 300; }

/* ---------- Layout primitives ---------- */
.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.container-narrow { width: min(100% - 2.5rem, var(--container-narrow)); margin-inline: auto; }
.section { padding-block: clamp(4rem, 8vw, 7rem); }
.section--deep  { background: var(--bg-deep); }
.section--card  { background: var(--bg-card); }
.stack > * + * { margin-top: var(--stack-gap, 1rem); }

/* ---------- Accessibility ---------- */
:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; border-radius: 2px; }
.skip-link {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--bg-cream);
  padding: 12px 18px; border-radius: var(--radius-sm);
  z-index: 1000;
}
.skip-link:focus { left: 16px; top: 16px; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding-block: 18px;
  transition: background-color 320ms var(--ease), border-color 320ms var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(244, 239, 230, 0.92);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.site-header__logo img { height: 44px; width: auto; }
.site-header__nav {
  display: none;
  gap: 32px;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
}
.site-header__nav a {
  color: var(--ink);
  padding-block: 6px;
  position: relative;
  transition: opacity 200ms var(--ease);
}
.site-header__nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--sage);
  transform: scaleX(0); transform-origin: left;
  transition: transform 280ms var(--ease);
}
.site-header__nav a:hover::after,
.site-header__nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-header__burger {
  display: inline-flex; flex-direction: column; gap: 5px;
  width: 28px; padding: 4px;
}
.site-header__burger span {
  display: block; height: 1.5px; background: var(--ink);
}

@media (min-width: 960px) {
  .site-header__nav { display: flex; }
  .site-header__burger { display: none; }
}

/* ---------- Mobile menu overlay ---------- */
.menu-overlay {
  position: fixed; inset: 0; z-index: 100;
  background:
    radial-gradient(130% 90% at 100% 0%, rgba(250, 246, 238, 0.95), rgba(244, 239, 230, 0) 55%),
    var(--bg-cream);
  transform: translateX(100%);
  opacity: 0;
  transition: transform 440ms var(--ease-out-expo), opacity 260ms var(--ease);
  display: flex; flex-direction: column;
  padding: 24px 28px calc(26px + env(safe-area-inset-bottom));
}
.menu-overlay.is-open { transform: translateX(0); opacity: 1; }

.menu-overlay__top {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 6px;
}
.menu-overlay__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-right: -8px;
  color: var(--ink); border-radius: 50%;
  transition: background-color 220ms var(--ease), color 220ms var(--ease), transform 160ms var(--ease);
}
.menu-overlay__close:hover,
.menu-overlay__close:focus-visible { background: rgba(124, 130, 102, 0.10); color: var(--sage-deep); }
.menu-overlay__close:active { transform: scale(0.93); }

.menu-overlay__nav {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
}
.menu-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 16px;
  padding: 16px 2px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: background-color 240ms var(--ease), padding-left 320ms var(--ease-out-expo);
}
.menu-link:first-child { border-top: 1px solid var(--line); }
.menu-link__num {
  grid-column: 1; grid-row: 1 / span 2; align-self: center;
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300;
  font-size: 0.95rem; color: var(--gold);
}
.menu-link__label {
  grid-column: 2; grid-row: 1;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.55rem; font-weight: 400; letter-spacing: -0.01em; line-height: 1.05;
}
.menu-link__meta {
  grid-column: 2; grid-row: 2;
  font-family: 'Jost', sans-serif; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-muted); margin-top: 5px;
}
.menu-link__arrow {
  grid-column: 3; grid-row: 1 / span 2; align-self: center;
  color: var(--sage); font-size: 1rem;
  opacity: 0.35; transform: translateX(0);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease-out-expo);
}
.menu-link:active { background: rgba(124, 130, 102, 0.05); padding-left: 8px; }
.menu-link:active .menu-link__arrow,
.menu-link:focus-visible .menu-link__arrow { opacity: 1; transform: translateX(3px); }
.menu-link[aria-current="page"] .menu-link__label { color: var(--sage-deep); }
.menu-link[aria-current="page"] .menu-link__num { color: var(--sage-deep); }
.menu-link[aria-current="page"] .menu-link__arrow { opacity: 1; }

.menu-overlay__foot {
  display: flex; flex-direction: column; gap: 18px;
  padding-top: 24px;
}
.menu-overlay__meta-info {
  display: flex; flex-direction: column; gap: 4px;
  font-family: 'Jost', sans-serif; font-size: 0.74rem; color: var(--ink-muted);
  font-weight: 300; letter-spacing: 0.02em;
}
.menu-overlay__cta { margin-top: 0; }

/* Staggered entrance when the menu opens */
.menu-overlay__nav .menu-link,
.menu-overlay__foot > * {
  opacity: 0; transform: translateY(14px);
  transition:
    opacity 560ms var(--ease-out-quart),
    transform 560ms var(--ease-out-quart),
    background-color 240ms var(--ease),
    padding-left 320ms var(--ease-out-expo);
}
.menu-overlay.is-open .menu-link,
.menu-overlay.is-open .menu-overlay__foot > * { opacity: 1; transform: none; }
.menu-overlay.is-open .menu-link:nth-child(1) { transition-delay: 90ms; }
.menu-overlay.is-open .menu-link:nth-child(2) { transition-delay: 160ms; }
.menu-overlay.is-open .menu-link:nth-child(3) { transition-delay: 230ms; }
.menu-overlay.is-open .menu-link:nth-child(4) { transition-delay: 300ms; }
.menu-overlay.is-open .menu-overlay__meta-info { transition-delay: 370ms; }
.menu-overlay.is-open .menu-overlay__cta { transition-delay: 430ms; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: var(--bg-cream);
  padding-block: 72px 32px;
  margin-top: 0;
}
.site-footer a { color: var(--bg-cream); opacity: 0.78; transition: opacity 200ms var(--ease); }
.site-footer a:hover { opacity: 1; }
.site-footer__grid {
  display: grid; gap: 48px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
.site-footer h4 {
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--bg-cream); opacity: 0.6; margin-bottom: 18px; font-weight: 400;
}
.site-footer__brand .wordmark {
  font-family: 'Cormorant Garamond', serif; font-size: 1.75rem;
  letter-spacing: 0.12em; margin-bottom: 14px;
  font-weight: 400;
}
.site-footer__list { font-weight: 300; }
.site-footer__list { display: flex; flex-direction: column; gap: 10px; font-size: 0.95rem; }
.site-footer__bottom {
  margin-top: 56px; padding-top: 24px;
  border-top: 1px solid rgba(244,239,230,0.14);
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  font-size: 0.8rem; opacity: 0.7;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 17px 34px;
  font-family: 'Jost', sans-serif;
  font-size: 0.76rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 400;
  border-radius: var(--radius-sm);
  transition: transform 220ms var(--ease), background-color 220ms var(--ease),
              color 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease);
  will-change: transform;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--sage); color: var(--bg-cream); }
.btn--primary:hover { background: var(--sage-deep); box-shadow: 0 12px 28px -16px rgba(95,100,80,.6); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--sage); }
.btn--ghost:hover { background: var(--sage); color: var(--bg-cream); }

.btn--dark { background: var(--ink); color: var(--bg-cream); }
.btn--dark:hover { background: #2a2624; }

.btn--sm { padding: 12px 24px; font-size: 0.72rem; }

/* ---------- Card ---------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow: var(--shadow-card);
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }

.service-card {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow: var(--shadow-card);
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease);
  text-decoration: none;
  color: inherit;
}
.service-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.service-card__icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  color: var(--sage);
}
.service-card__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.65rem; color: var(--ink); margin-bottom: 4px;
  font-weight: 500; letter-spacing: -0.005em;
}
.service-card__desc { font-size: 0.95rem; font-weight: 300; line-height: 1.65; }
.service-card__foot {
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.92rem; color: var(--ink-muted);
}
.service-card__price { color: var(--ink); font-weight: 500; }
.service-card__more { color: var(--sage-deep); font-weight: 500; letter-spacing: 0.04em; }

/* ---------- Price list rows ---------- */
.price-list { display: flex; flex-direction: column; gap: 0; }
.price-list__group + .price-list__group { margin-top: 32px; }
.price-list__group-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem; color: var(--ink);
  padding-bottom: 10px; border-bottom: 1px solid var(--sage);
  margin-bottom: 16px;
  font-weight: 500; letter-spacing: -0.005em;
}
.price-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: baseline;
  padding-block: 14px;
  border-bottom: 1px dashed var(--line);
}
.price-row:last-child { border-bottom: 0; }
.price-row__name { color: var(--ink); font-weight: 400; }
.price-row__meta { color: var(--ink-muted); font-size: 0.82rem; display: block; margin-top: 5px; font-weight: 300; line-height: 1.5; }
.price-row__price { color: var(--sage-deep); font-weight: 500; white-space: nowrap; letter-spacing: 0.02em; }

/* ---------- CTA banner ---------- */
.cta-banner {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(40px, 6vw, 64px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner h2 { margin-bottom: 14px; }
.cta-banner p { max-width: 52ch; margin-inline: auto; margin-bottom: 28px; }

/* ---------- FAQ accordion ---------- */
.faq { display: flex; flex-direction: column; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }
.faq__q {
  width: 100%; display: flex; justify-content: space-between; gap: 24px; align-items: center;
  padding: 24px 4px;
  text-align: left;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem;
  color: var(--ink);
  font-weight: 500; letter-spacing: -0.005em;
  position: relative;
  padding-right: 32px;
}
/* +/− icon built from two thin sage bars centered on the same point;
   vertical bar collapses on open. */
.faq__q::before,
.faq__q::after {
  content: '';
  position: absolute;
  top: 50%;
  background: var(--sage);
  transition: transform 360ms var(--ease-out-quart);
}
.faq__q::before { /* horizontal — anchored 11px from right edge of button */
  right: 4px;
  width: 14px; height: 1px;
  transform: translateY(-50%);
}
.faq__q::after { /* vertical — same center as horizontal (right: 4+7 - 0.5 = 10.5px) */
  right: 10.5px;
  width: 1px; height: 14px;
  transform: translateY(-50%) scaleY(1);
  transform-origin: center;
}
.faq__item.is-open .faq__q::after {
  transform: translateY(-50%) scaleY(0);
}
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms var(--ease-out-quart);
  padding: 0 4px;
}
.faq__a > * {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transition: opacity 260ms var(--ease-out-quart), padding-bottom 420ms var(--ease-out-quart);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__item.is-open .faq__a > * { opacity: 1; padding-bottom: 24px; }

/* ---------- Ornaments ---------- */
.ornament-sparkle { color: var(--gold); display: inline-block; vertical-align: middle; }
.ornament-leaf    { color: var(--sage); display: inline-block; }

/* Reusable bullet list with sparkle markers */
.feature-list { display: flex; flex-direction: column; gap: 14px; }
.feature-list li {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px;
  align-items: start; color: var(--ink-soft);
}
.feature-list li::before {
  content: '';
  width: 14px; height: 14px; margin-top: 6px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C8266' stroke-width='1.6'><path d='M9 12l2 2 4-4'/><circle cx='12' cy='12' r='10'/></svg>");
  background-repeat: no-repeat; background-size: contain;
}

/* Numbered step row */
.steps { display: grid; gap: 20px; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { display: flex; flex-direction: column; gap: 8px; }
.step__num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300;
  color: var(--gold);
  font-size: 2.6rem; line-height: 1;
  letter-spacing: -0.01em;
}
.step__title { font-family: 'Cormorant Garamond', serif; color: var(--ink); font-size: 1.4rem; font-weight: 500; letter-spacing: -0.005em; }

/* Push main content below fixed header */
main { padding-top: 84px; }

/* ---------- Homepage hero ---------- */
.hero {
  padding-block: clamp(96px, 14vw, 160px) clamp(48px, 8vw, 96px);
  position: relative;
  overflow: hidden;
}
.hero__grid {
  display: grid; gap: 48px;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: 1.1fr 0.9fr; gap: 64px; }
}
.hero__title { margin-block: 18px 12px; }
.hero__title .script-accent { display: block; font-size: 0.82em; margin-top: 4px; color: var(--sage-deep); }
.hero__lead { max-width: 46ch; margin-bottom: 32px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__images {
  display: grid; gap: 16px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
}
.hero__images > * { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 1; }
.hero__images > :nth-child(1) { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: 3 / 4; }
.hero__images img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-luxe) var(--ease-out-quart);
}
.hero__images > *:hover img { transform: scale(1.04); }

.hero__sprig {
  position: absolute; pointer-events: none;
  color: var(--sage); opacity: 0.55;
}
.hero__sprig--tl { top: 80px; left: -20px; width: 160px; transform: rotate(-15deg); }
.hero__sprig--br { bottom: 40px; right: -20px; width: 180px; transform: rotate(165deg); }
@media (max-width: 720px) { .hero__sprig { width: 110px; opacity: 0.4; } }

/* ---------- Leistungen grid ---------- */
.leistungen { background: var(--bg-deep); }
.leistungen__header {
  text-align: center; margin-bottom: 56px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.leistungen__intro { max-width: 56ch; }
.leistungen__grid {
  display: grid; gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .leistungen__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .leistungen__grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- About teaser ---------- */
.about-teaser__grid {
  display: grid; gap: 40px;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 960px) { .about-teaser__grid { grid-template-columns: 0.9fr 1.1fr; gap: 64px; } }
.about-teaser__img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--bg-card);
}
.about-teaser__img img { width: 100%; height: 100%; object-fit: cover; }
.about-teaser__copy h2 { margin: 14px 0 18px; }
.about-teaser__copy p + p { margin-top: 16px; }
.about-teaser__more {
  display: inline-block; margin-top: 28px; padding-bottom: 4px;
  color: var(--sage-deep); border-bottom: 1px solid var(--sage);
  font-size: 0.92rem; letter-spacing: 0.06em;
}

/* ---------- Warum Yeliz ---------- */
.warum { background: var(--bg-cream); }
.warum__grid {
  display: grid; gap: 32px;
  grid-template-columns: 1fr;
  margin-top: 48px;
}
@media (min-width: 720px) { .warum__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .warum__grid { grid-template-columns: repeat(4, 1fr); } }
.pillar { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pillar__icon {
  width: 56px; height: 56px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  color: var(--sage);
  margin-bottom: 6px;
}
.pillar__title { font-family: 'Cormorant Garamond', serif; color: var(--ink); font-size: 1.35rem; font-weight: 500; letter-spacing: -0.005em; }
.pillar__desc { font-size: 0.92rem; max-width: 28ch; margin-inline: auto; font-weight: 300; line-height: 1.6; }

/* ---------- Beauty Academy band ---------- */
.academy {
  background: var(--sage-deep);
  color: var(--bg-cream);
  position: relative; overflow: hidden;
}
.academy h2 { color: var(--bg-cream); }
.academy p  { color: rgba(244,239,230,0.82); }
.academy .eyebrow { color: rgba(244,239,230,0.7); }
.academy .eyebrow::after { background: rgba(244,239,230,0.45); }
.academy__grid {
  display: grid; gap: 40px;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 960px) { .academy__grid { grid-template-columns: 1.2fr 1fr; gap: 72px; } }
.academy__cta { margin-top: 28px; }
.academy__img {
  border-radius: var(--radius-lg);
  overflow: hidden; aspect-ratio: 4 / 5;
}
.academy__img { overflow: hidden; border-radius: var(--radius-sm); }
.academy__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-luxe) var(--ease-out-quart);
}
.academy__img:hover img { transform: scale(1.035); }

/* ---------- Galerie teaser ---------- */
.gallery-teaser__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 220px);
  gap: 14px;
  margin: 48px 0 32px;
}
@media (min-width: 720px) {
  .gallery-teaser__grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 240px);
  }
  .gallery-teaser__grid > :nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
}
.gallery-teaser__grid > * {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-card);
}
.gallery-teaser__grid img { width: 100%; height: 100%; object-fit: cover; }
.gallery-teaser__foot { text-align: center; }

/* ---------- Final CTA band ---------- */
.final-cta { background: var(--bg-deep); }

/* ---------- Service landing page ---------- */
.service-hero {
  padding-block: clamp(96px, 14vw, 140px) clamp(40px, 6vw, 72px);
  position: relative; overflow: hidden;
}
.service-hero__grid {
  display: grid; gap: 48px;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 960px) {
  .service-hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: 64px; }
}
.service-hero__copy h1 { margin-block: 14px 16px; }
.service-hero__lead { max-width: 46ch; margin-bottom: 28px; }
.service-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.service-hero__img {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  position: relative;
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}
.service-hero__img img { width: 100%; height: 100%; object-fit: cover; }

.service-intro { background: var(--bg-cream); }
.service-intro p { font-size: 1.125rem; line-height: 1.8; }

.section-head { text-align: center; margin-bottom: 48px; }
.section-head .eyebrow { display: inline-block; }
.section-head h2 { margin-top: 14px; }
.section-head .lead { margin-top: 16px; max-width: 56ch; margin-inline: auto; }

.highlight-grid {
  display: grid; gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .highlight-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .highlight-grid { grid-template-columns: repeat(4, 1fr); } }
.highlight {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 26px;
  display: flex; flex-direction: column; gap: 10px;
}
.highlight__mark {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  color: var(--gold);
}
.highlight__title { font-family: 'Cormorant Garamond', serif; color: var(--ink); font-size: 1.35rem; font-weight: 500; letter-spacing: -0.005em; }
.highlight__desc { font-size: 0.93rem; font-weight: 300; line-height: 1.65; }

.preisliste { max-width: 720px; margin-inline: auto; }

.aftercare {
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
  max-width: 760px; margin-inline: auto;
}
@media (min-width: 720px) { .aftercare { grid-template-columns: 1fr 1fr; } }

/* ---------- Über uns page ---------- */
.about-hero { padding-block: clamp(96px, 14vw, 140px) clamp(40px, 6vw, 72px); }
.about-hero__grid {
  display: grid; gap: 48px;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 960px) {
  .about-hero__grid { grid-template-columns: 1fr 1fr; gap: 72px; }
}
.about-hero__img {
  aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-card);
}
.about-hero__img img { width: 100%; height: 100%; object-fit: cover; }
.about-hero__role { color: var(--ink-muted); font-size: 0.95rem; margin-bottom: 6px; }

.pullquote {
  background: var(--bg-card); border-left: 3px solid var(--sage);
  padding: 40px clamp(28px, 5vw, 56px);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  max-width: 760px; margin: 0 auto;
}
.pullquote blockquote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem); line-height: 1.35;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
}
.pullquote cite {
  display: block; margin-top: 20px;
  font-family: 'Jost', sans-serif; font-style: normal;
  font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 400;
}

.studio-grid {
  display: grid; gap: 14px;
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 720px) { .studio-grid { grid-template-columns: repeat(4, 1fr); } }
.studio-grid > * { aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; }
.studio-grid img { width: 100%; height: 100%; object-fit: cover; }

.values-grid {
  display: grid; gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .values-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- FAQ page ---------- */
.faq-page__filter {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-bottom: 48px;
}
.faq-pill {
  padding: 10px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  font-size: 0.82rem; letter-spacing: 0.06em;
  color: var(--ink-soft);
  transition: background-color 220ms var(--ease), color 220ms var(--ease), border-color 220ms var(--ease);
}
.faq-pill:hover { border-color: var(--sage); }
.faq-pill.is-active { background: var(--sage); color: var(--bg-cream); border-color: var(--sage); }
.faq__item[hidden] { display: none; }

/* ---------- Galerie page ---------- */
.gallery-page__grid {
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .gallery-page__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .gallery-page__grid { grid-template-columns: repeat(3, 1fr); } }
.gallery-tile {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.gallery-tile__img { aspect-ratio: 4 / 5; overflow: hidden; }
.gallery-tile__img img { width: 100%; height: 100%; object-fit: cover; }
.gallery-tile__caption {
  padding: 16px 20px;
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.86rem;
}
.gallery-tile__cat { color: var(--ink-muted); letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.74rem; }
.gallery-tile__title { color: var(--ink); font-weight: 500; }
.gallery-tile[hidden] { display: none; }

/* ---------- Editorial utilities ---------- */

/* Subtle paper grain (printed feel, not digital) */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.45;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.5  0 0 0 0 0.42  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}
main, .site-footer { position: relative; z-index: 2; }

/* Section index — small italic numeral + label in the gutter */
/* Section kicker — short, customer-focused subheadline above a section title */
.section-kicker {
  display: flex; align-items: center; gap: 14px;
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sage-deep); font-weight: 500;
  margin-bottom: clamp(16px, 2.4vw, 22px);
}
.section-kicker::before {
  content: ''; flex: 0 0 auto;
  width: 26px; height: 1px; background: var(--gold);
}
/* Dark Academy section variant */
.academy .section-kicker { color: rgba(244, 239, 230, 0.82); }
.academy .section-kicker::before { background: var(--gold); }

/* Italic editorial caption (image meta, dates, byline) */
.caption {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 400;
  font-size: 0.92rem; color: var(--ink-muted);
  letter-spacing: 0.01em;
  display: flex; align-items: baseline; gap: 10px;
}
.caption::before {
  content: ''; width: 18px; height: 1px;
  background: var(--sage); flex: 0 0 18px;
  transform: translateY(-4px);
}

/* Drop cap on lead paragraphs */
.dropcap::first-letter {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400; font-style: italic;
  font-size: 3.8em;
  float: left;
  line-height: 0.82;
  padding: 8px 14px 0 0;
  color: var(--ink);
}

/* Editorial numbered list (Roman numerals, no boxes) */
.editorial-list {
  display: grid; gap: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}
@media (min-width: 720px) { .editorial-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .editorial-list--four { grid-template-columns: repeat(4, 1fr); } }
.editorial-list__item {
  padding: 36px 28px 36px 0;
  border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 64px 1fr; gap: 18px;
  align-items: start;
}
@media (min-width: 720px) {
  .editorial-list--four > .editorial-list__item:nth-last-child(-n+1) { border-bottom: 0; }
}
@media (min-width: 1024px) {
  .editorial-list--four > .editorial-list__item:nth-last-child(-n+4) { border-bottom: 0; }
}
.editorial-list__num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300;
  font-size: 2.4rem; line-height: 0.9;
  color: var(--gold);
  letter-spacing: -0.01em;
}
.editorial-list__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem; font-weight: 500;
  color: var(--ink); margin-bottom: 8px;
  letter-spacing: -0.005em; line-height: 1.2;
}
.editorial-list__desc {
  font-size: 0.94rem; color: var(--ink-soft);
  font-weight: 300; line-height: 1.65;
  max-width: 32ch;
}

/* Editorial service rows (large serif name, price, hover-reveal arrow) */
.service-rows {
  border-top: 1px solid var(--line);
}
.service-row {
  display: grid;
  grid-template-columns: 52px 1fr auto 24px;
  gap: 28px;
  padding: 23px 4px;
  border-bottom: 1px solid var(--line);
  align-items: center;
  color: inherit;
  position: relative;
  transition: padding-left 320ms var(--ease), background-color 320ms var(--ease);
}
.service-row:hover {
  padding-left: 18px;
  background: rgba(124, 130, 102, 0.04);
}
.service-row::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--sage);
  transform: scaleY(0); transform-origin: top;
  transition: transform 380ms var(--ease);
}
.service-row:hover::before { transform: scaleY(1); }
.service-row__num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300;
  font-size: 1.15rem; color: var(--gold);
}
.service-row__name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.45rem, 1.85vw, 1.8rem);
  font-weight: 500; color: var(--ink);
  letter-spacing: -0.005em; line-height: 1.15;
}
.service-row__meta {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem; color: var(--ink-muted);
  letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 400; margin-top: 7px;
}
.service-row__price {
  font-family: 'Jost', sans-serif;
  font-size: 0.88rem; color: var(--sage-deep);
  font-weight: 500; letter-spacing: 0.06em;
  white-space: nowrap;
}
.service-row__arrow {
  color: var(--sage); font-size: 1.2rem;
  opacity: 0; transform: translateX(-8px);
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.service-row:hover .service-row__arrow { opacity: 1; transform: translateX(0); }
@media (max-width: 720px) {
  .service-row { grid-template-columns: 36px 1fr; gap: 16px; }
  .service-row__name { font-size: 1.65rem; }
  .service-row__price, .service-row__arrow { grid-column: 2; }
  .service-row__price { margin-top: 4px; }
  .service-row__arrow { display: none; }
}

/* Big asymmetric CTA */
.cta-editorial {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding: clamp(56px, 8vw, 96px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  align-items: end;
}
@media (min-width: 880px) {
  .cta-editorial { grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: end; }
}
.cta-editorial__title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300;
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  line-height: 1.04; color: var(--ink);
  letter-spacing: -0.022em;
}
.cta-editorial__title em {
  font-style: normal; color: var(--sage-deep);
}
.cta-editorial__side {
  display: flex; flex-direction: column; gap: 18px;
  padding-bottom: 6px;
}
.cta-editorial__note {
  font-size: 0.88rem; color: var(--ink-muted);
  font-weight: 300; line-height: 1.6; max-width: 32ch;
}

/* Signature mark (italic, sage) */
.signature {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300;
  font-size: 1.5rem; color: var(--sage-deep);
  margin-top: 22px;
  display: inline-block;
}

/* ---------- Homepage editorial refactor ---------- */

/* Hero — editorial composition */
.hero { padding-block: clamp(96px, 11vw, 132px) clamp(64px, 9vw, 120px); }
.hero__grid {
  display: grid; gap: 56px;
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: 1.2fr 0.8fr; gap: 88px; }
}
.hero__copy { display: flex; flex-direction: column; gap: 0; }
.hero__title { margin-block: 22px 20px; }
.hero__title .script-accent {
  display: block; font-size: 0.78em; margin-top: 8px;
  letter-spacing: -0.015em;
}
.hero__lead { max-width: 46ch; margin-bottom: 38px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 40px; }
.hero__caption { margin-top: 8px; }

/* ---------- Hero CTAs — refined editorial pair ---------- */
.hero__ctas .btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  gap: 9px;
  padding: 14px 28px;
  font-size: 0.72rem;
}

/* Shared forward-arrow signature — nudges on hover/focus */
.hero__ctas .btn::after {
  content: "\2192";
  font-size: 1em;
  line-height: 1;
  transform: translateX(-3px);
  opacity: 0.7;
  transition: transform var(--dur-medium) var(--ease-out-expo),
              opacity var(--dur-medium) var(--ease);
}
.hero__ctas .btn:hover::after,
.hero__ctas .btn:focus-visible::after {
  transform: translateX(3px);
  opacity: 1;
}

/* Primary — floats on a soft sage-tinted shadow, light sheen sweeps across */
.hero__ctas .btn--primary {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 2px 6px -3px rgba(95, 100, 80, .42),
    0 16px 32px -18px rgba(95, 100, 80, .55);
}
.hero__ctas .btn--primary::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg,
    transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform var(--dur-slow) var(--ease-out-expo);
  z-index: -1;
}
.hero__ctas .btn--primary:hover,
.hero__ctas .btn--primary:focus-visible {
  background: var(--sage-deep);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 6px 14px -6px rgba(95, 100, 80, .5),
    0 24px 46px -20px rgba(95, 100, 80, .6);
}
.hero__ctas .btn--primary:hover::before,
.hero__ctas .btn--primary:focus-visible::before {
  transform: translateX(130%);
}

/* Ghost — sage fill wipes in from the left, text fades to cream */
.hero__ctas .btn--ghost {
  border-color: var(--sage);
  color: var(--ink);
}
.hero__ctas .btn--ghost::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--sage);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-medium) var(--ease-out-expo);
  z-index: -1;
}
.hero__ctas .btn--ghost:hover,
.hero__ctas .btn--ghost:focus-visible {
  background: transparent;
  color: var(--bg-cream);
  border-color: var(--sage);
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -20px rgba(26, 23, 21, .4);
}
.hero__ctas .btn--ghost:hover::before,
.hero__ctas .btn--ghost:focus-visible::before {
  transform: scaleX(1);
}

/* Press */
.hero__ctas .btn:active {
  transform: translateY(0);
  transition-duration: 90ms;
}

/* Keyboard focus ring */
.hero__ctas .btn:focus-visible {
  outline: 2px solid var(--sage-deep);
  outline-offset: 3px;
}

/* Mobile — equal, full-width buttons with comfortable touch targets.
   640px chosen so the stack engages before the side-by-side pair would
   wrap to ragged auto-widths (container content < ~536px below ~580px). */
@media (max-width: 640px) {
  .hero__ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
  }
  .hero__ctas .btn {
    width: 100%;
    padding-block: 15px;
  }
}

.hero__figure { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.hero__figure img {
  width: 100%; aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
}

/* Leistungen — editorial head + service rows */
.leistungen__editorial-head {
  display: grid; gap: 32px;
  grid-template-columns: 1fr;
  margin-bottom: 64px;
  align-items: end;
}
@media (min-width: 880px) {
  .leistungen__editorial-head { grid-template-columns: 1.4fr 1fr; gap: 56px; }
}
.leistungen__editorial-title {
  font-size: clamp(1.9rem, 3.3vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.018em;
  font-weight: 400;
}
.leistungen__editorial-title em {
  font-style: italic; font-weight: 400; color: var(--sage-deep);
}
.leistungen__editorial-intro {
  max-width: 38ch;
  padding-bottom: 8px;
}

/* Italic-emphasis pattern for section headlines */
.h-section em, .cta-editorial__title em {
  font-style: italic; font-weight: 400; color: var(--sage-deep);
}

/* About teaser — editorial */
.about-teaser__grid {
  display: grid; gap: 48px;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 960px) {
  .about-teaser__grid { grid-template-columns: 5fr 7fr; gap: 88px; align-items: start; }
}
.about-teaser__img {
  position: relative;
}
.about-teaser__img img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
}
.about-teaser__caption { margin-top: 14px; }
.about-teaser__copy { display: flex; flex-direction: column; gap: 22px; }
.about-teaser__copy h2 { margin-bottom: 6px; }
.about-teaser__copy p { max-width: 60ch; }
.about-teaser__title { letter-spacing: -0.018em; }
.about-teaser__more {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sage-deep); font-weight: 400;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--sage);
  margin-top: 8px;
  transition: color 220ms var(--ease), border-color 220ms var(--ease);
}
.about-teaser__more:hover { color: var(--ink); border-color: var(--ink); }

/* Warum — editorial head */
.warum__editorial-head {
  margin-bottom: 56px; max-width: 38ch;
}
.warum__editorial-head h2 { letter-spacing: -0.018em; }

/* Academy — editorial layout */
.academy { background: var(--ink); color: var(--bg-cream); }
.academy h2, .academy p { color: inherit; }
.academy p { color: rgba(244,239,230,0.74); font-weight: 300; }
.academy__title em { color: var(--gold); font-style: italic; font-weight: 400; }
.academy__list {
  list-style: none; padding: 0; margin: 32px 0 36px;
  display: grid; gap: 14px;
  border-top: 1px solid rgba(244,239,230,0.16);
  padding-top: 28px;
}
.academy__list li {
  display: grid; grid-template-columns: 40px 1fr; gap: 14px;
  align-items: baseline;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem; font-weight: 400;
  color: var(--bg-cream);
  letter-spacing: -0.005em;
}
.academy__list li span {
  font-style: italic; font-weight: 300;
  color: var(--gold); font-size: 1.15rem;
}
.academy__cta {
  border-color: rgba(244,239,230,0.4); color: var(--bg-cream);
}
.academy__cta:hover { background: var(--bg-cream); color: var(--ink); border-color: var(--bg-cream); }
.academy__caption { margin-top: 14px; color: rgba(244,239,230,0.5); }
.academy__caption::before { background: rgba(183,149,106,0.6); }
.academy__img img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius-sm);
}

/* Galerie teaser — editorial (interactive before/after) */
.galerie-teaser__head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
  margin-bottom: 36px;
}
.galerie-teaser__head h2 { max-width: 18ch; }
.galerie-teaser__lede {
  font-size: 1.05rem; letter-spacing: 0;
  align-self: end; padding-bottom: 8px;
}

/* Pills — editorial section chips, not balloons */
.galerie-pills-wrap { position: relative; margin-bottom: 48px; }
.galerie-pills {
  display: flex; flex-wrap: wrap;
  gap: 8px 28px;
  align-items: center;
  padding: 20px 0 18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* Right-edge swipe affordance — hidden by default, JS toggles .has-more-right */
.galerie-pills-wrap::after {
  content: '';
  position: absolute; top: 1px; bottom: 1px; right: 0;
  width: 60px;
  background: linear-gradient(to right, rgba(244, 239, 230, 0), var(--bg-cream) 72%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 280ms var(--ease);
}
.galerie-pills__hint {
  position: absolute; top: 50%; right: 4px;
  transform: translateY(-50%);
  z-index: 2;
  font-family: 'Jost', sans-serif;
  font-size: 1.5rem; line-height: 1; font-weight: 300;
  color: var(--sage-deep);
  pointer-events: none;
  opacity: 0;
  transition: opacity 280ms var(--ease);
  animation: pillHintNudge 1.7s var(--ease) infinite;
  display: none;
}
.galerie-pills-wrap.has-more-right::after { opacity: 1; }
.galerie-pills-wrap.has-more-right .galerie-pills__hint { opacity: 1; }
@keyframes pillHintNudge {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50% { transform: translateY(-50%) translateX(4px); }
}
.galerie-pill {
  font-family: 'Jost', sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 400;
  padding: 6px 2px;
  position: relative;
  transition: color 280ms var(--ease);
}
.galerie-pill::after {
  content: '';
  position: absolute; left: 2px; right: 2px; bottom: 0;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 360ms var(--ease);
}
.galerie-pill:hover { color: var(--ink); }
.galerie-pill:hover::after { transform: scaleX(0.4); }
.galerie-pill.is-active { color: var(--ink); }
.galerie-pill.is-active::after { transform: scaleX(1); }
.galerie-pill:focus-visible { outline: 2px solid var(--sage); outline-offset: 4px; }

/* Stage — single image carousel */
.galerie-stage {
  display: flex; flex-direction: column; align-items: center;
  gap: 22px;
}

/* Before/after slider — magazine plate with a tactile ruler */
.ba-slider {
  position: relative; margin: 0;
  width: 100%; max-width: 880px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg-deep);
  box-shadow:
    0 1px 0 rgba(124,130,102,.06),
    0 24px 60px -28px rgba(26,23,21,.30);
  user-select: none;
  isolation: isolate;
}
@media (min-width: 720px) {
  .ba-slider { aspect-ratio: 3 / 4; }
}
@media (min-width: 1024px) {
  .ba-slider { aspect-ratio: 16 / 11; }
}
.ba-slider__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  filter: saturate(.78) contrast(.98) brightness(1);
}
/* Layout: BEFORE on LEFT, AFTER on RIGHT.
   AFTER sits on top; clip from the LEFT based on --pos so AFTER lives at the right half.
   Drag handle LEFT  → --pos decreases → AFTER expands leftward → more AFTER visible. ✓
   Drag handle RIGHT → --pos increases → AFTER shrinks         → 'profile' BEFORE returns. ✓ */
.ba-slider__img--before {
  z-index: 1;
}
.ba-slider__img--after {
  z-index: 2;
  clip-path: inset(0 0 0 var(--pos));
}

/* Corner tags */
.ba-slider__tag {
  position: absolute; top: 18px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 400;
  font-size: 0.92rem;
  color: var(--bg-cream);
  letter-spacing: 0.04em;
  padding: 4px 10px 4px 0;
  z-index: 4;
  text-shadow: 0 1px 6px rgba(26,23,21,.45);
}
.ba-slider__tag::before {
  content: '';
  display: inline-block;
  width: 14px; height: 1px;
  background: rgba(244,239,230,.7);
  vertical-align: middle;
  margin-right: 8px;
  transform: translateY(-2px);
}
.ba-slider__tag--before { left: 22px; }
.ba-slider__tag--after  { right: 22px; padding: 4px 0 4px 10px; }
.ba-slider__tag--after::before {
  margin-right: 0; margin-left: 8px;
  float: right; margin-top: 10px;
}

/* The vertical divider line + grabber */
.ba-slider__divider {
  position: absolute; top: 0; bottom: 0;
  left: var(--pos);
  width: 1px;
  background: rgba(244,239,230,.85);
  box-shadow: 0 0 0 1px rgba(26,23,21,.08), 0 0 24px rgba(26,23,21,.18);
  z-index: 3;
  pointer-events: none;
  transform: translateX(-0.5px);
}
.ba-slider__handle {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg-cream);
  color: var(--ink);
  border: 1px solid var(--gold);
  box-shadow:
    0 1px 0 rgba(26,23,21,.06),
    0 10px 24px -10px rgba(26,23,21,.45);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.ba-slider:hover .ba-slider__handle,
.ba-slider:focus-within .ba-slider__handle {
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow:
    0 1px 0 rgba(26,23,21,.06),
    0 14px 30px -12px rgba(26,23,21,.55);
}
.ba-slider.is-dragging .ba-slider__handle {
  transform: translate(-50%, -50%) scale(1.12);
}

/* The native range fills the figure, invisible — gives keyboard + a11y */
.ba-slider__range {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 5;
  touch-action: none;
}
.ba-slider__range:focus-visible + * { outline: none; }
.ba-slider__range:focus-visible ~ .ba-slider__divider .ba-slider__handle,
.ba-slider:focus-within .ba-slider__handle {
  outline: 2px solid var(--sage);
  outline-offset: 3px;
}

/* Caption under the figure */
.galerie-stage__caption {
  text-align: center;
  justify-content: center;
}
.galerie-stage__caption::before { transform: translateY(-4px); }

/* Nav row — calm */
.galerie-stage__nav {
  display: flex; align-items: center;
  gap: 22px;
  margin-top: 4px;
}
.galerie-stage__arrow {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: transparent;
  transition: border-color 240ms var(--ease), color 240ms var(--ease),
              background-color 240ms var(--ease), transform 240ms var(--ease);
}
.galerie-stage__arrow:hover {
  border-color: var(--sage);
  color: var(--sage-deep);
  transform: translateY(-1px);
}
.galerie-stage__arrow:active { transform: translateY(0); }
.galerie-stage__arrow:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }
.galerie-stage__count {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 400;
  font-size: 1.1rem;
  color: var(--ink-muted);
  letter-spacing: 0.05em;
  min-width: 56px; text-align: center;
}

/* Mobile pills — single swipeable row (overflow to the right is intentional) */
@media (max-width: 600px) {
  .galerie-pills {
    flex-wrap: nowrap;
    gap: 26px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
  }
  .galerie-pills::-webkit-scrollbar { display: none; }
  .galerie-pill {
    font-size: 0.72rem;
    letter-spacing: 0.17em;
    flex: 0 0 auto;
    white-space: nowrap;
    padding-bottom: 7px;
  }
  .galerie-pills__hint { display: block; }
  .ba-slider__tag { font-size: 0.82rem; top: 14px; }
  .ba-slider__tag--before { left: 16px; }
  .ba-slider__tag--after  { right: 16px; }
}

/* ---------- Service page editorial polish ---------- */

/* Service hero — figure with caption */
.service-hero__figure { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.service-hero__title em {
  font-style: italic; font-weight: 400;
  color: var(--sage-deep);
}

/* Service intro — asymmetric with section index */
.service-intro__inner { margin-top: clamp(20px, 3vw, 32px); }
.service-intro__title em {
  font-style: italic; font-weight: 400;
  color: var(--sage-deep);
}

/* Section head left-aligned variant */
.section-head--left { text-align: left; margin-bottom: 40px; }
.section-head--left .lead { margin-inline: 0; max-width: 56ch; }

/* Reset center-alignment on Vorteile head when using editorial pattern */
.section .warum__editorial-head { margin-top: 0; }

/* ---------- About page editorial polish ---------- */
.about-hero__img { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.about-hero__img figcaption { margin-top: 12px; }

/* Studio grid with figcaption (override original) */
.studio-grid figure { margin: 0; display: flex; flex-direction: column; gap: 10px; aspect-ratio: auto; border-radius: 0; overflow: visible; }
.studio-grid figure img { aspect-ratio: 1; border-radius: var(--radius-sm); object-fit: cover; }

/* Editorial-list 3-column variant (for Werte) */
@media (min-width: 1024px) {
  .editorial-list:not(.editorial-list--four) { grid-template-columns: repeat(3, 1fr); }
  .editorial-list:not(.editorial-list--four) > .editorial-list__item:nth-last-child(-n+3) { border-bottom: 0; }
}