/* Self-hosted fonts — upload the /fonts/ folder alongside index.html */
  @font-face {
    font-family: 'Cormorant Garamond';
    src: url('/fonts/CormorantGaramond-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Cormorant Garamond';
    src: url('/fonts/CormorantGaramond-LightItalic.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: 'Cormorant Garamond';
    src: url('/fonts/CormorantGaramond-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Cormorant Garamond';
    src: url('/fonts/CormorantGaramond-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  /* ── LANGUAGE DROPDOWN (all devices) ── */
  .lang-dropdown { position: relative; }
  .lang-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: 1px solid rgba(196,151,90,0.3);
    border-radius: 4px;
    color: rgba(232,220,200,0.8);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    padding: 0.35rem 0.55rem;
    cursor: pointer;
  }
  .lang-dropdown-toggle:hover { border-color: rgba(196,151,90,0.6); color: var(--gold); }
  #langDropdownCurrentFlag, .lang-flag { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,0.15); vertical-align: middle; }
  .lang-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--teal-deeper);
    border: 1px solid rgba(196,151,90,0.3);
    border-radius: 6px;
    min-width: 150px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    z-index: 250;
    overflow: hidden;
  }
  .lang-dropdown-menu.open { display: block; }
  .lang-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: rgba(232,220,200,0.8);
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    font-family: 'Montserrat', sans-serif;
    padding: 0.7rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid rgba(196,151,90,0.12);
  }
  .lang-dropdown-item:last-child { border-bottom: none; }
  .lang-dropdown-item:hover, .lang-dropdown-item.active { color: var(--gold); background: rgba(196,151,90,0.08); }

  @media (max-width: 480px) {
    .nav-right { gap: 0.8rem; }
  }

  /* ── FORCE LIGHT MODE — prevent dark mode overrides on Android ── */
  /* This site is designed as light-on-dark and dark-on-light in
     specific places, not a theme that should follow the visitor's OS
     dark-mode preference — this block pins colours to their intended
     values regardless. IMPORTANT: there is deliberately no
     .accordion-title h3 / .accordion-body p override here. Earlier
     versions had one forcing dark teal text — but several accordions
     (FAQ, "Read more", Legal, "More reviews") use their own protected
     dark backgrounds, and that forced text colour happened to exactly
     match one of those backgrounds, making the text invisible under
     dark mode. Only add per-element overrides back if you've verified
     they can't collide with a background colour used elsewhere. */
  @media (prefers-color-scheme: dark) {
    :root {
      color-scheme: light;
    }
    body {
      background-color: #faf6ef !important;
      color: #1a3a39 !important;
    }
    .tagline-strip {
      background-color: #e8dcc8 !important;
    }
    .tagline-strip p {
      color: #1a5c5a !important;
    }
    .philosophy {
      background-color: #faf6ef !important;
    }
    .philosophy blockquote {
      color: #1a5c5a !important;
    }
    .give-section {
      background-color: #e8dcc8 !important;
    }
    .give-card {
      background-color: #faf6ef !important;
    }
    .give-card h3 { color: #1a5c5a !important; }
    .give-card p { color: #2e5554 !important; }
    .services {
      background-color: #faf6ef !important;
    }
    .service-card {
      background-color: #ffffff !important;
    }
    .service-card h3 { color: #1a5c5a !important; }
    .service-card p { color: #2e5554 !important; }
    .contact {
      background-color: #faf6ef !important;
    }
    .contact h2 { color: #1a5c5a !important; }
    .hours {
      background-color: #1a5c5a !important;
    }
    .accordion-item {
      background-color: #ffffff !important;
    }
    .session-options {
      background-color: #faf6ef !important;
    }
    .session-option strong { color: #1a5c5a !important; }
    .session-option p { color: #2e5554 !important; }
    .testimonials {
      background-color: #133f3e !important;
    }
    .testimonial {
      background-color: rgba(19,63,62,0.5) !important;
    }
    .testimonial p { color: rgba(232,220,200,0.85) !important; }
    .footer-top { background-color: #0e2c2b !important; }
    footer { background-color: #0e2c2b !important; }
  }


  /* ── SESSION BOOK BUTTONS ── */
  .session-book-btn {
    display: inline-block;
    margin-top: 0.8rem;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-deep);
    text-decoration: none;
    border-bottom: 1px solid var(--gold-deep);
    padding-bottom: 2px;
    transition: opacity 0.3s;
  }
  .session-book-btn:hover { opacity: 0.65; }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    color-scheme: light !important;
    forced-color-adjust: none !important;
    --teal:            #1a5c5a;
    --teal-dark:       #133f3e;
    --teal-deeper:     #0e2c2b;
    --champagne:       #e8dcc8;
    --champagne-light: #f2ece0;
    --champagne-pale:  #faf6ef;
    --gold:            #c4975a;
    --gold-deep:       #735022;
    --gold-light:      #d4a96a;
    --gold-bright:     #f2c788;
    --text-dark:       #1a3a39;
    --text-mid:        #2e5554;
  }

  html { scroll-behavior: smooth; }

  body {
    background-color: #faf6ef !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    color: var(--text-dark);
    background: var(--champagne-pale);
    line-height: 1.7;
  }

  /* ── UTILITIES ── */
  .section-label {
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin-bottom: 1rem;
    display: block;
  }
  /* On pale backgrounds, the standard gold fails contrast guidelines
     (measured ~2:1–2.5:1). Use a deeper, more legible gold instead —
     dark teal sections keep the original brighter gold, which already
     reads clearly there. */
  .philosophy .section-label,
  .give-section .section-label,
  .services .section-label,
  .contact .section-label,
  #book .section-label,
  .pale-bg .section-label {
    color: var(--gold-deep);
  }
  .gold-line {
    width: 36px;
    height: 1px;
    background: var(--gold);
    margin: 0 auto 1.8rem;
  }
  .gold-line.left { margin-left: 0; }
  .gold-dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold);
    vertical-align: middle;
    margin: 0 0.8rem;
  }
  .btn {
    display: inline-block;
    padding: 0.85rem 2.2rem;
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s;
    cursor: pointer;
    border: none;
  }
  .btn-outline-gold {
    border: 1px solid var(--gold);
    color: var(--gold);
    background: transparent;
  }
  .btn-outline-gold:hover { background: var(--gold); color: var(--teal-dark); }
  .btn-outline-champagne {
    border: 1px solid var(--champagne);
    color: var(--champagne);
    background: transparent;
  }
  .btn-outline-champagne:hover { background: var(--champagne); color: var(--teal-dark); }
  .btn-teal {
    border: 1px solid var(--teal);
    color: var(--teal);
    background: transparent;
  }
  .btn-teal:hover { background: var(--teal); color: var(--champagne); }

  /* ── CONCENTRIC CIRCLES ── */

  /* ── NAV ── */
  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    background: var(--teal-dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 2rem;
    box-shadow: 0 1px 0 rgba(0,0,0,0.2);
  }
  .nav-ripple {
    position: absolute;
    top: 0;
    left: 0;
    /*width: 62px;*/
    width: 124px;
    aspect-ratio: 375.5 / 240.5;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
  }
  .nav-ripple img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top left;
    transform: scaleY(-1) scaleX(-1);
    /*transform: scaleX(-1)  rotate(90deg);*/

  }
  .nav-logo {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    line-height: 1;
  }
  /* letter-spacing adds a gap after the LAST letter too, which visually
     shifts centred text off-centre. margin-right: -[same value] cancels
     that trailing gap so the visible letters end up truly centred. */
  .nav-logo-main {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    letter-spacing: 0.24em;
    margin-right: -0.24em;
    text-transform: uppercase;
    text-align: center;
    color: var(--champagne);
  }
  .nav-logo-sub {
    font-size: 0.52rem;
    letter-spacing: 0.28em;
    margin-right: -0.28em;
    text-transform: uppercase;
    text-align: center;
    color: var(--gold);
    opacity: 0.85;
  }
  .hero-berlin-sub {
    font-size: 0.52rem;
    text-transform: uppercase;
  }
  .nav-right {
    display: flex;
    align-items: center;
    gap: 2rem;
  }
  .nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
  }
  .nav-links a {
    text-decoration: none;
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(232,220,200,0.7);
    transition: color 0.3s;
  }
  .nav-links a:hover { color: var(--gold); }
  .nav-book {
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.55rem 1.4rem;
    border: 1px solid var(--gold);
    color: var(--gold);
    text-decoration: none;
    transition: all 0.3s;
    white-space: nowrap;
  }
  .nav-book:hover { background: var(--gold); color: var(--teal-dark); }

  /* Hamburger */
  .hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 4px;
    background: none;
    border: none;
  }
  .hamburger span {
    display: block;
    width: 24px;
    height: 1.5px;
    background: var(--champagne);
    transition: all 0.3s;
  }
  .hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .hamburger.open span:nth-child(2) { opacity: 0; }
  .hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  /* Mobile menu */
  .mobile-menu {
    display: none;
    position: fixed;
    top: 62px; left: 0; right: 0;
    background: var(--teal-dark);
    z-index: 199;
    flex-direction: column;
    padding: 1.5rem 2rem 2rem;
    gap: 0;
    border-top: 1px solid rgba(196,151,90,0.2);
    max-height: calc(100vh - 62px);
    overflow-y: auto;
  }
  .mobile-menu.open { display: flex; }
  .mobile-menu a {
    text-decoration: none;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(232,220,200,0.75);
    padding: 1rem 0;
    border-bottom: 1px solid rgba(196,151,90,0.1);
    transition: color 0.3s;
  }
  .mobile-menu a:hover { color: var(--gold); }
  .mobile-menu .mobile-book {
    margin-top: 1.5rem;
    text-align: center;
    border: 1px solid var(--gold);
    color: var(--gold);
    padding: 0.9rem;
    border-bottom: 1px solid var(--gold);
  }

  /* ── HERO ── */
  .hero {
    background: var(--teal-dark);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8rem 2rem 5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .hero-content {
    position: relative;
    max-width: 700px;
    z-index: 1;
  }
  .hero h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 5vw, 3.6rem);
    font-weight: 300;
    line-height: 1.28;
    color: var(--champagne);
    letter-spacing: 0.03em;
    margin-bottom: 0.8rem;
  }
  .hero h1 em {
    font-style: italic;
    color: var(--gold-light);
  }
  .hero-sub {
    font-size: clamp(0.8rem, 2vw, 0.9rem);
    color: rgba(232,220,200,0.65);
    max-width: 440px;
    margin: 1.4rem auto 2.6rem;
    line-height: 2;
    letter-spacing: 0.03em;
  }

  /* ── HERO AWARD LINE + STARS ──
     Sentence and star row centered together beneath the hero CTA
     button. Stars are a flat gold-light PNG (transparent background)
     rather than the unicode ★ glyphs used in .stars elsewhere, since
     this needed to match the version already used on the temporary
     landing page. */
  .hero-award {
    margin-top: 1.4rem;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    color: rgba(232,220,200,0.75);
  }
  .hero-award-stars {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4em;
    margin-top: 0.5em;
  }
  .hero-award-stars img {
    height: 1.3em;
    width: auto;
    border: none;
  }

  /* ── HERO RIPPLE IMAGE ──
     Fluid width (vw-based) so it expands/contracts continuously as the
     window is resized, with distinct sizing/opacity tiers for phones,
     tablets, laptops and large desktop monitors. Aspect ratio locked to
     the source SVG (375.5 × 240.5) so it never distorts. */
  .hero-ripple {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 0;
    pointer-events: none;
    aspect-ratio: 375.5 / 240.5;
    width: clamp(260px, 82vw, 410px);
    opacity: 0.5;
  }
  .hero-ripple img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom right;
  }
  /* Small phones */
  @media (max-width: 420px) {
    .hero-ripple {
      width: clamp(220px, 84vw, 320px);
      opacity: 0.55;
    }
  }
  /* Tablets / phablets */
  @media (min-width: 600px) and (max-width: 1023px) {
    .hero-ripple {
      width: clamp(330px, 48vw, 500px);
      opacity: 0.55;
    }
  }
  /* Laptops */
  @media (min-width: 1024px) and (max-width: 1439px) {
    .hero-ripple {
      width: clamp(440px, 42vw, 610px);
      opacity: 0.42;
    }
  }
  /* Large desktop / PC monitors */
  @media (min-width: 1440px) {
    .hero-ripple {
      width: clamp(520px, 36vw, 780px);
      opacity: 0.38;
    }
  }

  /* ── TAGLINE ── */
  .tagline-strip {
    background-color: #e8dcc8 !important;
    background: #e8dcc8 !important;
    text-align: center;
    padding: 2rem 1.5rem;
  }
  .tagline-strip p {
    color: #1a5c5a;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1rem, 3vw, 1.5rem);
    font-style: italic;
    font-weight: 300;
    color: var(--teal);
    letter-spacing: 0.03em;
    line-height: 1.6;
  }
  /* Two lines on narrow screens, one flowing sentence on wider ones */
  .tagline-break { display: none; }
  @media (max-width: 640px) {
    .tagline-break { display: block; }
  }

  /* ── WELCOME ── */
  .welcome {
    background: var(--teal);
    padding: 5rem 2rem;
    position: relative;
    overflow: hidden;
  }
  .welcome-inner {
    max-width: 680px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
  /* Sits behind the H2, spanning the gap between the divider above
     and the body paragraphs below. Negative z-index keeps it behind
     the in-flow text regardless of DOM order. */
  .welcome-ripple {
    position: absolute;
    left: 0;
    top: 1.6rem;
    width: 150px;
    height: 100px;
    opacity: 0.16;
    z-index: -1;
    pointer-events: none;
  }
  .welcome-ripple img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .welcome h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.7rem, 4vw, 2.2rem);
    font-weight: 300;
    line-height: 1.3;
    color: var(--champagne);
    letter-spacing: 0.03em;
    margin-bottom: 1.4rem;
  }
  .welcome p {
    color: rgba(232,220,200,0.75);
    font-size: clamp(0.82rem, 2vw, 0.9rem);
    line-height: 2;
    margin-bottom: 1rem;
    letter-spacing: 0.02em;
  }
  .welcome p:last-of-type { margin-bottom: 2rem; }

  /* ── PHILOSOPHY ── */
  .philosophy {
    background-color: #faf6ef !important;
    background: #faf6ef !important;
    padding: 5rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .philosophy blockquote {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    font-style: italic;
    font-weight: 300;
    line-height: 1.65;
    max-width: 680px;
    margin: 0 auto 1.6rem;
    color: var(--teal);
    letter-spacing: 0.02em;
  }
  .philosophy-statement {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.1rem, 2.7vw, 1.6rem);
    font-style: normal;
    font-weight: 300;
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto;
    color: var(--teal);
    letter-spacing: 0.02em;
  }

  /* ── GIVE YOURSELF ── */
  .give-section {
    background-color: #e8dcc8 !important;
    background: #e8dcc8 !important;
    padding: 5rem 2rem;
  }
  .give-section-header {
    text-align: center;
    margin-bottom: 3rem;
  }
  .give-section-header h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.6rem, 4vw, 2rem);
    font-weight: 300;
    color: var(--teal);
    letter-spacing: 0.05em;
  }
  .give-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
  }
  .give-card {
    background: var(--champagne-pale);
    padding: 2.2rem 2rem;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
  }
  .give-icon {
    width: 44px;
    height: 44px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--gold);
  }
  .give-card h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--teal);
    margin-bottom: 0.5rem;
    letter-spacing: 0.03em;
  }
  .give-card p {
    font-size: 0.82rem;
    color: var(--text-mid);
    line-height: 1.9;
  }

  /* ── TRADITIONS ── */
  .traditions {
    background: var(--teal-dark);
    padding: 5rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  /* Same asset as .hero-ripple, flipped vertically (scaleY(-1), with
     object-position: top right) so the pattern anchors the top-left
     corner instead of the hero's bottom-right, while keeping the
     artwork's frayed brush-stroke texture pointing the natural way
     (a full 180° rotation flips that texture downward — confirmed
     wrong via direct screenshot from the person testing this). */
  .traditions-ripple {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
    aspect-ratio: 375.5 / 240.5;
    width: clamp(260px, 82vw, 410px);
    opacity: 0.3;
  }
  .traditions-ripple img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top right;
    transform: scaleX(-1) scaleY(-1);
  }
  @media (min-width: 600px) and (max-width: 1023px) {
    .traditions-ripple { width: clamp(330px, 48vw, 500px); }
  }
  @media (min-width: 1024px) and (max-width: 1439px) {
    .traditions-ripple { width: clamp(440px, 42vw, 610px); opacity: 0.22; }
  }
  @media (min-width: 1440px) {
    .traditions-ripple { width: clamp(520px, 36vw, 780px); opacity: 0.2; }
  }
  .traditions > *:not(.traditions-ripple) { position: relative; z-index: 1; }
  .traditions h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.6rem, 4vw, 2rem);
    font-weight: 300;
    color: var(--champagne);
    margin-bottom: 1rem;
    letter-spacing: 0.04em;
  }
  .traditions-intro {
    max-width: 520px;
    margin: 0 auto 3rem;
    font-size: 0.83rem;
    color: rgba(232,220,200,0.6);
    line-height: 2;
  }
  .traditions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    max-width: 800px;
    margin: 0 auto;
  }
  .tradition-item {
    padding: 1.8rem 1.4rem;
    border: 1px solid rgba(196,151,90,0.2);
    text-align: left;
    transition: border-color 0.3s;
  }
  .tradition-item:hover { border-color: rgba(196,151,90,0.6); }
  .tradition-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    font-weight: 400;
    color: var(--gold-bright);
    margin-bottom: 0.5rem;
    letter-spacing: 0.03em;
  }
  .tradition-item p {
    font-size: 0.75rem;
    color: rgba(232,220,200,0.85);
    line-height: 1.7;
  }
  .tradition-item.full-width {
    grid-column: auto;
  }

  /* ── SERVICES ── */
  .services {
    background-color: #faf6ef !important;
    background: #faf6ef !important;
    padding: 5rem 2rem;
    position: relative;
    overflow: hidden;
  }
  .services-header {
    text-align: center;
    margin-bottom: 3rem;
  }
  .services-header h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.6rem, 4vw, 2rem);
    font-weight: 300;
    color: var(--teal);
    letter-spacing: 0.04em;
  }
  .services-header p {
    margin-top: 0.8rem;
    font-size: 0.82rem;
    color: var(--text-mid);
  }
  .services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
    max-width: 900px;
    margin: 0 auto;
  }
  .service-card {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1px solid rgba(196,151,90,0.2);
    padding: 2.4rem 2rem;
    position: relative;
    transition: border-color 0.3s, box-shadow 0.3s;
  }
  .service-card:hover {
    border-color: rgba(196,151,90,0.5);
    box-shadow: 0 6px 30px rgba(26,92,90,0.07);
  }
  .service-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transition: transform 0.3s;
    transform-origin: left;
  }
  .service-card:hover::before { transform: scaleX(1); }
  .service-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
  }
  .service-duration {
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-deep);
  }
  .service-card h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.35rem;
    font-weight: 400;
    color: var(--teal);
    letter-spacing: 0.03em;
    margin-bottom: 0.8rem;
  }
  .service-card p {
    font-size: 0.82rem;
    color: var(--text-mid);
    line-height: 1.9;
    margin-bottom: 1.4rem;
  }
  .service-divider {
    width: 28px;
    height: 1px;
    background: var(--gold);
    margin-bottom: 1.2rem;
    opacity: 0.5;
  }
  .price-amount {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.7rem;
    font-weight: 300;
    color: var(--teal);
  }
  .price-unit {
    font-size: 0.68rem;
    color: var(--gold-deep);
    letter-spacing: 0.1em;
    margin-left: 0.3rem;
  }

  /* ── ABOUT ── */
  .about {
    background: var(--teal);
    padding: 5rem 2rem;
    position: relative;
    overflow: hidden;
  }
  .about-inner {
    max-width: 680px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
  .about h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.7rem, 4vw, 2.2rem);
    font-weight: 300;
    line-height: 1.3;
    color: var(--champagne);
    letter-spacing: 0.03em;
    margin-bottom: 0.4rem;
  }
  .about-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    font-style: italic;
    color: var(--gold);
    letter-spacing: 0.05em;
    margin-bottom: 1.6rem;
    display: block;
  }
  .about-photo-frame {
    position: relative;
    max-width: 320px;
    margin: 0 auto 2.5rem;
  }
  .about-photo-frame::before {
    content: '';
    position: absolute;
    inset: -6px;
    border: 1px solid rgba(196,151,90,0.55);
    pointer-events: none;
  }
  .about-photo {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 3/4;
    object-fit: cover;
    object-position: center top;
    display: block;
    margin: 0;
    filter: grayscale(20%);
    border: 1px solid rgba(196,151,90,0.3);
  }
  .about p {
    color: rgba(232,220,200,0.75);
    font-size: clamp(0.82rem, 2vw, 0.88rem);
    line-height: 2;
    margin-bottom: 1rem;
    letter-spacing: 0.02em;
  }
  .about p:last-of-type { margin-bottom: 2rem; }

  /* Certificate photo inside the "Read my full journey" accordion.
     Centred between paragraphs on phones and tablets; from 1024px up
     it floats right so the text runs alongside it. Uses the same gold
     hairline frame as the portrait above (.about-photo-frame). The
     caption is a <figcaption>, not a <p>, so the ".about p" rules
     (including the :last-of-type bottom margin) don't apply to it. */
  .about-cert {
    max-width: 260px;
    margin: 1.9rem auto 2rem;
  }
  .about-cert-frame { position: relative; }
  .about-cert-frame::before {
    content: '';
    position: absolute;
    inset: -6px;
    border: 1px solid rgba(196,151,90,0.55);
    pointer-events: none;
  }
  .about-cert img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid rgba(196,151,90,0.3);
  }
  .about-cert figcaption {
    margin-top: 1.1rem;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.98rem;
    line-height: 1.5;
    letter-spacing: 0.03em;
    text-align: center;
    color: rgba(232,220,200,0.85);
  }
  @media (min-width: 1024px) {
    .about-cert {
      float: right;
      max-width: 210px;
      margin: 0.6rem 6px 1.4rem 2.2rem;
    }
  }

  /* ── TESTIMONIALS ── */
  .testimonials {
    background: var(--teal-dark);
    padding: 5rem 2rem;
    text-align: center;
    position: relative;
    z-index: 0;
  }
  /* Sized precisely to span from the divider down to just above the
     review cards, and centred horizontally on "What clients say"
     (see positionReviewsRipple() below) — this is just a starting
     size before that runs. */
  .reviews-ripple {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 260px;
    height: 300px;
    opacity: 0.16;
    z-index: -1;
    pointer-events: none;
  }
  .reviews-ripple img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .testimonials h2 {
    position: relative;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.6rem, 4vw, 1.9rem);
    font-weight: 300;
    color: var(--champagne);
    letter-spacing: 0.05em;
    margin-bottom: 3rem;
  }
  .testimonials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
    max-width: 700px;
    margin: 0 auto;
  }
  .testimonial {
    text-align: left;
    padding: 1.5rem;
    border: 1px solid rgba(196,151,90,0.2);
    background: rgba(19,63,62,0.5);
  }
  .stars {
    color: var(--gold-bright);
    font-size: 0.8rem;
    margin-bottom: 1rem;
    letter-spacing: 0.1em;
  }
  .testimonial p {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1rem, 2.5vw, 1.1rem);
    font-style: italic;
    color: rgba(232,220,200,0.85);
    line-height: 1.8;
    margin-bottom: 1.2rem;
    font-weight: 300;
  }
  /* The !important flags here are load-bearing, not decoration: this
     element is also a <p> inside .testimonial, so the more specific
     ".testimonial p" rule above (class + element beats class alone)
     silently overrides plain font-size/margin-bottom here otherwise —
     a real bug we lost time to before adding these. */
  .testimonial-name {
    font-size: 0.62rem !important;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-bright);
    margin-bottom: 0 !important;
  }

  /* ── HOURS ── */
  .hours {
    background: var(--teal);
    padding: 5rem 2rem;
    text-align: center;
  }
  .hours h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.5rem, 4vw, 1.8rem);
    font-weight: 300;
    color: var(--champagne);
    letter-spacing: 0.06em;
    margin-bottom: 3rem;
  }
  .hours-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: 500px;
    margin: 0 auto;
  }
  .hours-item { text-align: center; }
  .hours-day {
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-bright);
    margin-bottom: 0.5rem;
  }
  .hours-time {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    font-weight: 300;
    color: var(--champagne);
    letter-spacing: 0.04em;
  }

  /* ── CONTACT ── */
  .contact {
    background-color: #faf6ef !important;
    background: #faf6ef !important;
    padding: 5rem 2rem;
  }
  .contact-inner {
    max-width: 680px;
    margin: 0 auto;
  }
  .contact h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.6rem, 4vw, 2rem);
    font-weight: 300;
    color: var(--teal);
    margin-bottom: 1rem;
    letter-spacing: 0.04em;
  }
  .contact > .contact-inner > p {
    font-size: 0.83rem;
    color: var(--text-mid);
    line-height: 2;
    margin-bottom: 2rem;
  }
  .contact-detail {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.2rem;
    font-size: 0.85rem;
    color: var(--text-mid);
  }
  .contact-icon {
    width: 38px;
    height: 38px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .contact-detail a {
    color: var(--teal);
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 0.3s;
    font-size: 0.85rem;
  }
  .contact-detail a:hover { color: var(--gold); }
  .contact-quote {
    background: var(--teal);
    padding: 2.5rem;
    margin-top: 3rem;
    border-left: 2px solid var(--gold);
  }
  .contact-quote p {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    font-style: italic;
    font-weight: 300;
    color: var(--champagne);
    line-height: 1.75;
    margin-bottom: 1rem;
  }
  .contact-quote cite {
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    font-style: normal;
  }
  .contact-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
  }
  .contact-buttons .btn {
    padding: 0.85rem 1.3rem;
  }

  /* ── FIXED CONTACT BAR ── */
  /* Visible at every screen width. Icon-only by default (mobile and
     tablet alike) — full text labels only return once there's enough
     room for them, at 1100px+. */
  .fixed-bar {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 150;
    background: var(--teal-deeper);
    border-top: 1px solid rgba(196,151,90,0.25);
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: 0.6rem 1rem;
  }
  .fixed-bar-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: rgba(232,220,200,0.7);
    text-decoration: none;
    transition: color 0.3s;
    white-space: nowrap;
  }
  .fixed-bar-item:hover { color: var(--gold); }
  .fixed-bar-item svg { width: 17px; height: 17px; flex-shrink: 0; }
  .fixed-bar-divider {
    width: 1px;
    height: 18px;
    background: rgba(196,151,90,0.2);
    flex-shrink: 0;
  }
  .fixed-bar-book {
    display: flex;
    align-items: center;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--gold);
    color: var(--gold);
    text-decoration: none;
    transition: all 0.3s;
    white-space: nowrap;
  }
  .fixed-bar-book:hover { background: var(--gold); color: var(--teal-deeper); }
  .fixed-bar-book-icon { display: inline-block; width: 16px; height: 16px; }
  .fixed-bar-text { display: none; }
  body { padding-bottom: 52px; }

  /* Full text labels once there's genuinely enough room for all six
     items plus the Book Now button without crowding. Adding Signal
     pushed this threshold up from where it used to sit. */
  @media (min-width: 1180px) {
    .fixed-bar { gap: 2.5rem; padding: 0.7rem 2rem; }
    .fixed-bar-item svg { width: 13px; height: 13px; }
    .fixed-bar-text { display: inline; }
    .fixed-bar-book { padding: 0.42rem 1.3rem; }
    .fixed-bar-book-icon { display: none; }
    body { padding-bottom: 46px; }
  }

  /* ── FOOTER ── */
  footer {
    background: var(--teal-deeper);
    padding: 1.5rem 2rem;
  }
  .footer-top {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(196,151,90,0.15);
  }
  .footer-logo-main {
    font-family: 'Cormorant Garamond', serif;
    color: var(--champagne);
    font-size: 1.15rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    display: block;
  }
  .footer-logo-sub {
    font-size: 0.55rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.7;
    display: block;
    margin-top: 0.3rem;
  }
  .footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    list-style: none;
  }
  .footer-links a {
    color: rgba(232,220,200,0.35);
    text-decoration: none;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: color 0.3s;
  }
  .footer-links a:hover { color: var(--gold); }
  .footer-bottom {
    text-align: center;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    color: rgba(232,220,200,0.6);
    max-width: 1000px;
    margin: 0 auto;
  }

  /* ── DESKTOP OVERRIDES ── */
  @media (min-width: 768px) {
    nav { padding: 1.2rem 4rem; }
    .hamburger { display: none !important; }
    .nav-links { display: flex !important; }
    .nav-book { display: block !important; }
    .nav-logo-sub { font-size: 0.68rem; }
    .hero-berlin-sub { font-size: 0.55rem; }

    .give-grid { grid-template-columns: repeat(3, 1fr); }
    .give-card { flex-direction: column; }

    .traditions-grid { grid-template-columns: repeat(2, 1fr); max-width:700px; margin:0 auto; }
    .tradition-item.full-width { grid-column: auto; }

    .services-grid { grid-template-columns: repeat(3, 1fr); }
    .services-grid .service-card:last-child:nth-child(3n+2) { grid-column: 2; }
    .service-header { flex-direction: row; }

    .testimonials-grid { grid-template-columns: repeat(2, 1fr); max-width: 900px; }

    .hours-grid { grid-template-columns: repeat(3, 1fr); max-width: 780px; gap: 3rem 2.5rem; }

    .footer-top { flex-direction: row; justify-content: space-between; align-items: center; }

    .welcome-inner, .about-inner, .contact-inner { max-width: 800px; }

    .about-photo-frame { float: right; margin: 0 0 1.5rem 2.5rem; max-width: 240px; }
    .about-photo-clear { clear: both; }
  }

  @media (min-width: 1024px) {
    .welcome, .about { padding: 7rem 4rem; }
    .philosophy, .give-section, .traditions, .services, .testimonials, .hours, .contact { padding: 7rem 4rem; }
    .welcome-inner, .about-inner { max-width: 900px; }
  }

  /* ── MOBILE: hide desktop nav items ── */
  @media (max-width: 767px) {
    .hamburger { display: flex; flex-shrink: 0; }
    .nav-links { display: none; }
    .nav-book { display: none; }
    .nav-right { flex-shrink: 0; gap: 0.6rem; }
    .nav-logo { max-width: 130px; flex-shrink: 1; min-width: 0; }
  }

  /* ── ACCORDION ── */
  .accordion {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .accordion-item {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1px solid rgba(196,151,90,0.2);
    overflow: hidden;
    transition: border-color 0.3s;
  }
  .accordion-item.open { border-color: rgba(196,151,90,0.5); }
  .accordion-header {
    width: 100%;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    padding: 1.3rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    text-align: left;
    gap: 1rem;
    transition: background 0.3s;
  }
  .accordion-header:hover { background: rgba(196,151,90,0.04); }
  .accordion-title { flex: 1; }
  .accordion-title h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--teal);
    letter-spacing: 0.03em;
    margin: 0.3rem 0 0.2rem;
  }
  .service-subtitle {
    font-size: 0.78rem;
    color: var(--stone, #b5a898);
    font-style: italic;
    color: var(--text-mid);
    opacity: 0.75;
  }
  .accordion-icon {
    font-size: 1.4rem;
    color: var(--gold);
    font-weight: 300;
    transition: transform 0.3s;
    flex-shrink: 0;
    line-height: 1;
  }
  .accordion-item.open .accordion-icon { transform: rotate(45deg); }
  /* padding-top must be non-zero: at 0 the opened text sits flush
     against the divider line above it, reading as "too close to the
     top" even though the box itself looks fine. */
  .accordion-body {
    display: none;
    padding: 1.3rem 2rem 2rem;
    border-top: 1px solid rgba(196,151,90,0.15);
  }
  .accordion-item.open .accordion-body { display: block; }
  .accordion-body p {
    font-size: 0.83rem;
    color: var(--text-mid);
    line-height: 1.95;
    margin-bottom: 0.9rem;
  }
  .session-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin: 1.4rem 0;
    padding: 1.4rem;
    background: var(--champagne-pale);
    border-left: 2px solid var(--gold);
  }
  .session-option strong {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 0.4rem;
    font-weight: 500;
  }
  .session-option p {
    font-size: 0.78rem;
    color: var(--text-mid);
    line-height: 1.7;
    margin-bottom: 0 !important;
  }

          .testimonials .accordion-body .testimonial p { color:rgba(232,220,200,0.82) !important; }
          .testimonials .accordion-body .testimonial-name { color:var(--gold-bright) !important; font-size:0.56rem !important; }


    #faq .accordion-body { padding-bottom: 0.9rem; }
    #faq .accordion-body p:last-child { margin-bottom: 0; }


    #impressum .accordion-body p:last-child { margin-bottom: 0; }


  /* ── HERO — LARGER TEXT ON TABLET, NOTEBOOK & DESKTOP ──
     Phones (under 600px) keep the original sizes above. From tablet
     width up, every line of hero text steps up, and the content column
     widens to suit. Kept at the end of the file on purpose so it wins
     over the earlier .hero rules and the 768px .hero-berlin-sub
     override without needing !important. */
  @media (min-width: 600px) {
    .hero-content { max-width: 760px; }
    .hero .section-label { font-size: 0.82rem; }
    .hero-berlin-sub { font-size: 0.64rem; }
    .hero h1 { font-size: clamp(2.7rem, 6.2vw, 3.6rem); }
    .hero-sub {
      font-size: 1.05rem;
      max-width: 520px;
    }
    .hero .btn { font-size: 0.74rem; padding: 0.95rem 2.5rem; }
    .hero-award { font-size: 0.92rem; }
  }
  /* Notebooks and desktop monitors */
  @media (min-width: 1024px) {
    .hero-content { max-width: 880px; }
    .hero .section-label { font-size: 0.92rem; }
    .hero-berlin-sub { font-size: 0.7rem; }
    .hero h1 { font-size: clamp(3.7rem, 4.6vw, 5rem); }
    .hero-sub {
      font-size: clamp(1.12rem, 1.25vw, 1.3rem);
      max-width: 600px;
    }
    .hero .btn { font-size: 0.8rem; padding: 1rem 2.8rem; }
    .hero-award { font-size: 1rem; }
  }

  /* "Read more" toggles are <button>s (crawlable, keyboard-friendly);
     reset browser button styling so they look like the old text links. */
  .read-more-toggle {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    text-align: left;
  }