/* =========================================================================
   Practice for the Performing Arts, design system
   Aesthetic: refined editorial / warm luxury. Cream canvas, coral accent,
   Marcellus display + PT Serif body, organic brand shapes, subtle grain.
   All assets self-hosted. No external requests.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Deliberately retained assets (reviewed 2026-09-19)

   Six files in the repo are not used by any page. All six were checked and
   kept on purpose, so please do not treat them as dead weight. They fail
   differently under a cleanup, which is why both cases are spelled out:

   1. assets/fonts/ptserif-700i-latin.woff2 and ptserif-700i-latinext.woff2
      (46 KB). These ARE referenced, by the @font-face rules just below, so
      searching for the filenames finds them. What makes them unused is that
      nothing on the site is both bold and italic in PT Serif, checked across
      all 19 pages, so no browser ever requests them. @font-face is lazy, so
      they cost nothing at runtime. Keeping them means that bold-italic body
      copy added later renders in the real typeface rather than a browser
      synthesised slant, which is a silent, easy-to-miss degradation.

   2. assets/img/flower.webp, gradient.webp, logo.png and shape-pill.png
      (97 KB). These are referenced nowhere at all, so orphan-file scans will
      flag them. No visitor ever downloads them, so removing them would save
      repo size only. logo.png is the standalone brand mark, separate from
      the favicons and app icons; shape-pill.png completes the brand shape
      set alongside star, blob and ring. Both are plausibly wanted later.
      flower.webp and gradient.webp appear to be Squarespace-era leftovers.
   ------------------------------------------------------------------------- */

/* ---------- Fonts (self-hosted) ----------
   Marcellus and PT Serif, both under the SIL Open Font License, self-hosted
   from Google Fonts. The OFL text itself is not shipped in this repo. */
@font-face {
  font-family: 'Marcellus'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/marcellus-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Marcellus'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/marcellus-400-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'PT Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/ptserif-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'PT Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/ptserif-400-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'PT Serif'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/ptserif-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'PT Serif'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/ptserif-700-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'PT Serif'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/ptserif-400i-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'PT Serif'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/ptserif-400i-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'PT Serif'; font-style: italic; font-weight: 700; font-display: swap;
  src: url('../fonts/ptserif-700i-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'PT Serif'; font-style: italic; font-weight: 700; font-display: swap;
  src: url('../fonts/ptserif-700i-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  --cream: #fbeddd;
  --cream-2: #f6e3cf;      /* deeper warm panel */
  --cream-3: #fff7ec;      /* lifted card */
  --coral: #e8421f;        /* decorative + large text; AA on cream */
  --coral-deep: #bd2c12;   /* small text + button bg; AA on all cream panels */
  --coral-on-ink: #fa5537; /* small text on the ink background; AA on --ink */
  --coral-soft: #ffd9cd;
  --ink: #1d1b1a;
  --ink-2: #46403c;        /* secondary text */
  --line: #e4d3bd;         /* hairline on cream */
  --field-line: #9e7a50;   /* form field edges; 3.7:1 on the card and 3.4:1 on
                              the field's own fill, per WCAG 1.4.11 */

  --font-head: 'Marcellus', 'Georgia', 'Times New Roman', serif;
  --font-body: 'PT Serif', 'Georgia', serif;

  --container: 1180px;
  --gutter: clamp(1.1rem, 5vw, 3rem);
  --radius: 18px;
  --radius-lg: 30px;
  --shadow: 0 24px 60px -28px rgba(74, 35, 20, 0.42);
  --shadow-sm: 0 12px 30px -18px rgba(74, 35, 20, 0.4);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: clamp(1.04rem, 0.99rem + 0.26vw, 1.18rem);
  line-height: 1.72;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* warm grain overlay for depth, pure CSS, no external request */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 4px; }

/* ---------- Typography ---------- */
/* hyphens is load-bearing on the German pages, not a nicety. German compounds
   ("Geschäftsbedingungen", "verschreibungspflichtige") are wider than the
   container below ~400px, and body{overflow-x:hidden} clips the overflow
   instead of letting it scroll, so the word was cut off mid-stroke rather
   than wrapping. The dictionary is picked from the page's lang attribute.
   overflow-wrap is the fallback where no German dictionary ships. */
h1, h2, h3, h4, h5 { font-family: var(--font-head); font-weight: 400; line-height: 1.08; letter-spacing: -0.01em;
  overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
h1 { font-size: clamp(2.7rem, 1.7rem + 4.4vw, 5.1rem); }
h2 { font-size: clamp(2.05rem, 1.5rem + 2.4vw, 3.4rem); line-height: 1.12; }
h3 { font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2rem); }
h4 { font-size: clamp(1.18rem, 1.05rem + 0.5vw, 1.45rem); line-height: 1.25; }
p { max-width: 65ch; }
strong { font-weight: 700; }

em { font-style: italic; }
.script { font-family: var(--font-body); font-style: italic; color: var(--coral); }

.eyebrow {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--coral-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--coral);
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: clamp(3.5rem, 2rem + 7vw, 7.5rem); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.section--panel { background: var(--cream-2); }
.section--ink { background: var(--ink); color: var(--cream); }
/* the coral used on cream is too dark on ink, so lift it for small text */
.section--ink .eyebrow { color: var(--coral-on-ink); }
.section--ink .eyebrow::before { background: var(--coral-on-ink); }
/* keep copy above the absolutely positioned .deco shapes in every section type */
.section > *, .hero > *, .page-hero > * { position: relative; z-index: 2; }

.lede { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem); line-height: 1.55; color: var(--ink-2); max-width: 40ch; }

.center { text-align: center; margin-inline: auto; }
.center p { margin-inline: auto; }

.grid { display: grid; gap: clamp(1.4rem, 1rem + 2vw, 3rem); }
@media (min-width: 760px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}
.split { display: grid; gap: clamp(2rem, 1rem + 5vw, 5rem); align-items: center; }
@media (min-width: 880px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--media-left .split__media { order: -1; }
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--coral-deep); --btn-fg: var(--cream); --btn-bd: var(--coral-deep);
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-head); font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.95em 1.7em; border-radius: 100px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-3px); background: #a8250d; border-color: #a8250d; box-shadow: 0 16px 30px -16px rgba(168,37,13,0.6); }
.btn .arrow { transition: transform 0.3s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); box-shadow: none; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--cream); --btn-bd: rgba(251,237,221,0.5); }
.btn--ghost:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); box-shadow: none; }
.btn--lg { font-size: 1.05rem; padding: 1.05em 2em; }

.link-arrow {
  font-family: var(--font-head); letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.92rem;
  display: inline-flex; align-items: center; gap: 0.5rem; color: var(--coral-deep);
  border-bottom: 1.5px solid transparent; padding-bottom: 2px; transition: border-color 0.3s, gap 0.3s;
}
.link-arrow:hover { border-color: var(--coral-deep); gap: 0.85rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background 0.3s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 78px; }

.brand { display: inline-flex; flex-direction: column; line-height: 1; }
.brand__script { font-family: var(--font-body); font-style: italic; font-size: 1.55rem; color: var(--coral); letter-spacing: 0.01em; }
.brand__sub { font-family: var(--font-head); text-transform: uppercase; font-size: 0.62rem; letter-spacing: 0.22em; color: var(--ink); margin-top: 0.18rem; white-space: nowrap; }

/* The nav takes the free space, so it sits beside the language button on the
   right rather than being spread apart from it by the flex distribution.
   The gap is capped at 1rem: the container stops growing at 1180px, so a
   vw-based gap would keep widening past it and push the row into wrapping
   on large screens. Together with the 0.93rem links this leaves room for
   the language button.

   nowrap on the labels is load-bearing, not cosmetic. The row is a flex
   container, so when it runs out of width flex shrinks .nav and the labels
   break mid-phrase: "Über uns" becomes two stacked lines that read like two
   separate nav items, and the CTA splits inside its pill. Because a flex row
   is as tall as its tallest child, that also pushed the header past its 78px
   min-height, and 78px is hardcoded into the mobile panel's inset and
   max-height below. Forbidding the wrap converts the failure into an
   overflow, which the compact band and the burger breakpoint then absorb. */
.nav { order: 2; margin-left: auto; display: flex; align-items: center; gap: clamp(0.85rem, 0.2rem + 1.1vw, 1rem); }
.nav__links { display: flex; align-items: center; gap: clamp(0.85rem, 0.2rem + 1.1vw, 1rem); }
.nav__link { font-size: 0.93rem; position: relative; padding: 0.3rem 0; color: var(--ink); white-space: nowrap; }
.nav .btn { white-space: nowrap; }
.nav__link::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1.5px; background: var(--coral); transform: scaleX(0); transform-origin: right; transition: transform 0.32s var(--ease); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"] { color: var(--coral-deep); }

.nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; }
.nav-toggle span { position: relative; width: 24px; height: 2px; background: var(--ink); transition: background 0.2s; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 24px; height: 2px; background: var(--ink); transition: transform 0.3s var(--ease), top 0.3s var(--ease); }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }

.nav-overlay { display: none; position: fixed; inset: 0; z-index: 40; background: transparent; }

/* ---------- Language switch (header) ----------
   One button, showing the language you can switch TO: the US flag plus "EN"
   on the German pages, the Swiss flag plus "DE" on the English ones. It is
   deliberately narrow (about 62px). With the original nav spacing the German
   header filled the 1084px content box to within ~8px, so anything wider than
   this pushed the row into wrapping at every window size. It sits outside
   .nav so it stays in the header bar on mobile rather than hiding in the
   burger. The footer keeps the spelled-out DE | EN switch. */
.lang-btn { order: 3; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 34px; padding: 0.3rem 0.5rem; border: 1.5px solid var(--line); border-radius: 100px;
  background: var(--cream-3); color: var(--ink);
  font-family: var(--font-head); font-size: 0.82rem; letter-spacing: 0.08em; line-height: 1;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease); }
.lang-btn:hover { background: var(--coral-soft); border-color: var(--coral); }
.lang-btn:focus-visible { border-radius: 100px; }
.lang-btn__code { white-space: nowrap; }
.lang-btn__flag { flex: 0 0 auto; height: 14px; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(29, 27, 26, 0.18); background-size: cover; background-position: center; }
/* flags drawn inline, so they cost no request and stay crisp at any density */
.lang-btn__flag--ch { width: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23d52b1e'/%3E%3Cpath d='M13 6h6v7h7v6h-7v7h-6v-7H6v-6h7z' fill='%23fff'/%3E%3C/svg%3E"); }
.lang-btn__flag--us { width: 21px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 20'%3E%3Crect width='38' height='20' fill='%23fff'/%3E%3Cg fill='%23b22234'%3E%3Crect width='38' height='1.54'/%3E%3Crect y='3.08' width='38' height='1.54'/%3E%3Crect y='6.15' width='38' height='1.54'/%3E%3Crect y='9.23' width='38' height='1.54'/%3E%3Crect y='12.31' width='38' height='1.54'/%3E%3Crect y='15.38' width='38' height='1.54'/%3E%3Crect y='18.46' width='38' height='1.54'/%3E%3C/g%3E%3Crect width='15.2' height='10.77' fill='%233c3b6e'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='2.5' cy='2' r='.7'/%3E%3Ccircle cx='6.5' cy='2' r='.7'/%3E%3Ccircle cx='10.5' cy='2' r='.7'/%3E%3Ccircle cx='4.5' cy='4.6' r='.7'/%3E%3Ccircle cx='8.5' cy='4.6' r='.7'/%3E%3Ccircle cx='12.5' cy='4.6' r='.7'/%3E%3Ccircle cx='2.5' cy='7.2' r='.7'/%3E%3Ccircle cx='6.5' cy='7.2' r='.7'/%3E%3Ccircle cx='10.5' cy='7.2' r='.7'/%3E%3Ccircle cx='4.5' cy='9.5' r='.7'/%3E%3Ccircle cx='8.5' cy='9.5' r='.7'/%3E%3Ccircle cx='12.5' cy='9.5' r='.7'/%3E%3C/g%3E%3C/svg%3E"); }

/* Compact band. Between the burger breakpoint and 1200px the full row fits
   only once it is trimmed: at the base sizes the nowrapped nav overflows the
   container instead of wrapping. Shaving the type and the gaps here buys the
   ~40px needed, so laptops keep the horizontal nav down to 1050px rather than
   dropping to the burger at every width under 1200px. */
@media (min-width: 1050px) and (max-width: 1199px) {
  .nav, .nav__links { gap: 0.7rem; }
  .nav__link { font-size: 0.82rem; }
  .nav .btn { font-size: 0.86rem; padding: 0.8em 1.25em; }
}

/* 1049px, not 940px: German needs 1050px to fit the trimmed row above
   (English clears at 1000px). Keep this number in sync with the matchMedia
   query in main.js, which drops the open state when the nav returns to the
   header. If the two disagree, the menu can be left stuck open at a width
   where it is no longer a panel. */
@media (max-width: 1049px) {
  .nav-toggle { display: inline-flex; }
  .nav-open .nav-overlay { display: block; }
  /* hold the page still while the menu is open */
  .nav-open, .nav-open body { overflow: hidden; }
  /* visibility, not just the transform: translated off-screen alone, the
     panel stayed focusable and screen-reader visible, so tabbing past the
     burger walked through six invisible links with no visible focus ring.
     Transitioning visibility keeps the slide-out animation intact. */
  .nav { position: fixed; inset: 78px 0 auto 0; flex-direction: column; align-items: stretch;
    background: var(--cream); border-bottom: 1px solid var(--line); padding: 1.4rem var(--gutter) 2rem;
    gap: 0.4rem; transform: translateY(-130%); visibility: hidden;
    transition: transform 0.4s var(--ease), visibility 0.4s var(--ease); box-shadow: var(--shadow);
    /* a phone held in landscape is shorter than the panel, so let the panel
       scroll to its CTA rather than run off the bottom of the screen */
    max-height: calc(100vh - 78px);
    max-height: calc(100dvh - 78px);
    overflow-y: auto; overscroll-behavior: contain; }
  .nav-open .nav { transform: translateY(0); visibility: visible; }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; }
  /* full-width tap bands: as an inline element the link was only as wide as
     its own text, so most of each row did nothing when tapped */
  .nav__link { display: flex; align-items: center; min-height: 56px;
    padding: 0.5rem 0; font-size: 1.15rem;
    border-bottom: 1px solid var(--line); }
  .nav__links li:last-child .nav__link { border-bottom: 0; }
  .nav__link:active { background: var(--coral-soft); }
  .nav__link::after { display: none; }
  .nav .btn { margin-top: 1.4rem; justify-content: center; }
  /* the fixed nav leaves the flex flow, so the button takes the free space
     and settles between the brand and the burger */
  .lang-btn { order: 1; margin-left: auto; min-height: 40px; }
  .nav-toggle { order: 2; }
}

@media (max-width: 420px) {
  .site-header__inner { gap: 0.6rem; }
}

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: clamp(3rem, 1.5rem + 8vw, 7rem); overflow: hidden; }
.hero__grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.05fr 0.95fr; } }
.hero h1 { margin-bottom: 1.5rem; }
.hero__lede { margin-bottom: 2rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.hero__media { position: relative; }
.hero__media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); object-fit: cover; aspect-ratio: 4 / 5; }
.hero__badge { position: absolute; bottom: -22px; left: -22px; background: var(--ink); color: var(--cream);
  padding: 1rem 1.3rem; border-radius: 16px; font-family: var(--font-head); line-height: 1.2; box-shadow: var(--shadow-sm); max-width: 60%; }
.hero__badge strong { color: var(--coral-on-ink); font-weight: 400; }
/* the -22px overhang runs past the left viewport edge on narrow phones, where
   body{overflow-x:hidden} clips it rather than letting it scroll. Must sit
   after the rule above, not up in the header's 420px block, or the base
   left/bottom win on order. */
@media (max-width: 430px) {
  .hero__badge { left: 0; bottom: -16px; max-width: 78%; }
}

/* page hero (interior) */
.page-hero { position: relative; padding-block: clamp(3rem, 2rem + 5vw, 6rem) clamp(2rem, 1.5rem + 3vw, 4rem); overflow: hidden; }
.page-hero h1 { max-width: 16ch; }
.page-hero .lede { margin-top: 1.4rem; }

/* ---------- Cards ---------- */
.card {
  background: var(--cream-3); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.6rem, 1.2rem + 1vw, 2.4rem);
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  height: 100%;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.card__icon { width: 64px; height: 64px; margin-bottom: 1.2rem; }
.card__icon img { width: 100%; height: 100%; object-fit: contain; }
.card h3 { margin-bottom: 0.7rem; }
/* the category label carries the card's context, so it needs to be readable:
   uppercase at a small size loses the word shape, hence 0.95rem and less tracking */
.card__kicker { font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.95rem; color: var(--coral-deep); display: block; margin-bottom: 0.6rem; }

/* offering list with check marks */
.ticklist { display: grid; gap: 0.85rem; }
.ticklist li { position: relative; padding-left: 2.1rem; max-width: 46ch; }
.ticklist li::before {
  content: ""; position: absolute; left: 0; top: 0.15em; width: 1.3rem; height: 1.3rem;
  background: var(--coral); border-radius: 50%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9.55 17.05 4.5 12l1.4-1.4 3.65 3.6 8.15-8.15L19.1 7.5z'/%3E%3C/svg%3E") center / 78% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9.55 17.05 4.5 12l1.4-1.4 3.65 3.6 8.15-8.15L19.1 7.5z'/%3E%3C/svg%3E") center / 78% no-repeat;
}

/* media block image */
.media-figure { position: relative; }
.media-figure img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); object-fit: cover; }
.media-figure--tall img { aspect-ratio: 4 / 5; }
.media-figure figcaption { margin-top: 0.7rem; font-style: italic; color: var(--ink-2); font-size: 0.95rem; }

/* ---------- Quote / affirmation ---------- */
.quote { text-align: center; max-width: 760px; margin-inline: auto; }
.quote blockquote { font-family: var(--font-head); font-size: clamp(2rem, 1.3rem + 3vw, 3.6rem); line-height: 1.18; }
.quote .mark { color: var(--coral); }
.affirm-eyebrow { font-style: italic; color: var(--coral-on-ink); font-size: 1.2rem; margin-bottom: 1rem; }

/* ---------- People (bios) ---------- */
.bio { display: grid; gap: clamp(1.5rem, 1rem + 3vw, 3rem); align-items: center; }
@media (min-width: 820px) { .bio { grid-template-columns: 0.8fr 1.2fr; } .bio--rev .bio__photo { order: 2; } }
.bio__photo img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); aspect-ratio: 3/4; object-fit: cover; }
.bio__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.2rem; }
.tag { font-family: var(--font-head); font-size: 0.8rem; letter-spacing: 0.04em; padding: 0.4em 0.9em; border: 1px solid var(--coral); border-radius: 100px; color: var(--coral-deep); }
.langs { margin-top: 1rem; font-style: italic; color: var(--ink-2); }

/* ---------- Pricing / tarifs ---------- */
.price-list { display: grid; gap: 1rem; }
.price-item { background: var(--cream-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.6rem; }
.price-item h3 { margin-bottom: 0.5rem; font-size: clamp(1.18rem, 1.05rem + 0.5vw, 1.45rem); line-height: 1.25; }
.price-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px dashed var(--line); }
.price-row:last-child { border-bottom: 0; }
.price-row .amount { font-family: var(--font-head); color: var(--coral-deep); white-space: nowrap; }

/* ---------- FAQ / accordion ---------- */
.faq { display: grid; gap: 0.9rem; max-width: 760px; }
.faq details { background: var(--cream-3); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: box-shadow 0.3s; }
.faq details[open] { box-shadow: var(--shadow-sm); }
.faq summary { list-style: none; cursor: pointer; padding: 1.25rem 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-family: var(--font-head); font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { position: relative; width: 22px; height: 22px; flex: none; }
.faq summary .plus::before, .faq summary .plus::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--coral); transition: transform 0.3s var(--ease); }
.faq summary .plus::before { width: 22px; height: 2px; }
.faq summary .plus::after { width: 2px; height: 22px; }
.faq details[open] summary .plus::after { transform: rotate(90deg); opacity: 0; }
.faq .faq__body { padding: 0 1.5rem 1.4rem; color: var(--ink-2); }
.faq .faq__body p { max-width: none; }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 18ch; margin-inline: auto; margin-bottom: 1.6rem; }
.cta-band--ink h2 { color: var(--cream); }

/* ---------- Forms ---------- */
.form-card { background: var(--cream-3); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.6rem, 1.2rem + 1.5vw, 2.8rem); box-shadow: var(--shadow); }
.field { margin-bottom: 1.2rem; }
.field label { display: block; font-family: var(--font-head); font-size: 0.92rem; letter-spacing: 0.04em; margin-bottom: 0.45rem; }
.field .req { color: var(--coral-deep); }
/* --line is right for cards and dividers but only reaches 1.38:1 here, and a
   form field's edge is a UI component boundary: WCAG 1.4.11 wants 3:1. The
   cream fill is 1.08:1 against the card, so the border is doing all the work
   of telling you where the field is. */
.field input, .field textarea, .field select {
  width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: var(--cream); border: 1.5px solid var(--field-line); border-radius: 12px; padding: 0.85rem 1rem;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-soft); }
.field-row { display: grid; gap: 1.2rem; }
@media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 0.9rem; color: var(--ink-2); margin-top: 0.4rem; }
/* The status stays rendered and empty rather than display:none. A live region
   that is not rendered when its text changes is not announced, and an empty
   block with no padding or border takes up no space, so nothing moves until
   there is something to say. */
.form-status { margin-top: 1.1rem; border-radius: 12px; font-size: 0.97rem; }
.form-status:empty { margin-top: 0; }
.form-status.is-visible { padding: 0.9rem 1.1rem; }
.form-status.is-success { background: #e8f3ea; color: #1f5130; border: 1px solid #bcd9c3; }
.form-status.is-error { background: #fde8e3; color: #9a2c14; border: 1px solid #f3c3b6; }
/* the failure messages end in a mailto link, the one place the address is
   offered on these pages, so it has to read as a link */
.form-status a { text-decoration: underline; text-underline-offset: 2px; }

/* contact detail blocks */
.detail-list { display: grid; gap: 1.6rem; }
.detail-list h3 { color: var(--coral-deep); margin-bottom: 0.3rem; font-size: clamp(1.18rem, 1.05rem + 0.5vw, 1.45rem); line-height: 1.25; }
.detail-list a { border-bottom: 1px solid var(--coral); }

/* ---------- Decorative shapes ---------- */
.deco { position: absolute; z-index: 1; pointer-events: none; opacity: 0.9; }
.deco--float { animation: float 9s ease-in-out infinite; }
.deco--float2 { animation: float 11s ease-in-out infinite reverse; }
@keyframes float { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-18px) rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .deco--float, .deco--float2 { animation: none; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--cream); padding-block: clamp(3rem, 2rem + 4vw, 5rem) 2rem; position: relative; z-index: 2; }
.footer-grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer__brand .brand__script { color: var(--coral); }
.footer__brand .brand__sub { color: var(--cream); }
.footer__brand p { color: #cdbfae; margin-top: 1rem; max-width: 34ch; }
.site-footer h2 { font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.78rem; color: var(--coral-on-ink); margin-bottom: 1.1rem; }
.site-footer address { font-style: normal; line-height: 1.5; color: #e7dccd; }
.site-footer address + address { margin-top: 1rem; }
.footer-links { display: grid; gap: 0.6rem; }
.footer-links a { color: #e7dccd; width: max-content; border-bottom: 1px solid transparent; transition: color 0.25s, border-color 0.25s; }
.footer-links a:hover { color: var(--cream); border-color: var(--coral); }
/* the phone follows the addresses, so give it the same separation */
.site-footer address + .footer-contact { margin-top: 1rem; }
.footer-contact a { color: var(--cream); border-bottom: 1px solid var(--coral); }

/* WCAG 2.2 target size (2.5.8) wants 24x24. These footer links are standalone
   targets in a nav or on their own line, not words inside a sentence, so the
   inline exception does not cover them: at 375px they measured 20-23px tall.
   (The credit link and the one inside .form-note are genuinely inline in a
   sentence, so they keep the exception and are left alone.)

   The hit area is grown with an overlay rather than padding because all three
   carry a bottom-border underline; padding would detach that underline from
   the text. The overlay adds nothing visible and moves nothing. */
.footer-contact a,
.footer-legal-links a,
.footer-bottom .lang-switch__link { position: relative; }
.footer-contact a::before,
.footer-legal-links a::before,
.footer-bottom .lang-switch__link::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 100%; min-width: 24px; height: 24px; transform: translate(-50%, -50%);
}
.footer-bottom { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); padding-top: 1.6rem; border-top: 1px solid rgba(251,237,221,0.16);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.5rem; justify-content: space-between; font-size: 0.85rem; color: #b6a795; }
.footer-bottom a { color: #b6a795; }
.footer-bottom a:hover { color: var(--cream); }
.footer-legal { display: flex; flex-direction: column; gap: 0.4rem; }
/* 0.6rem row gap, not 0.3rem: the 24px tap overlays above are taller than the
   links, so a tighter pitch would make two wrapped rows overlap */
.footer-legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.7rem; }

.footer-bottom .lang-switch { display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-head); font-size: 1rem; letter-spacing: 0.06em; color: #cdbfae; }
.footer-bottom .lang-switch::before { content: ""; flex: 0 0 auto; width: 1.05em; height: 1.05em;
  background: var(--coral);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M3%2012h18'/%3E%3Cpath%20d='M12%203c3%203%203%2015%200%2018M12%203c-3%203-3%2015%200%2018'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M3%2012h18'/%3E%3Cpath%20d='M12%203c3%203%203%2015%200%2018M12%203c-3%203-3%2015%200%2018'/%3E%3C/svg%3E") center/contain no-repeat; }
.footer-bottom .lang-switch__current { color: var(--cream); font-weight: 600; }
.footer-bottom .lang-switch__sep { color: rgba(251,237,221,0.35); }
.footer-bottom .lang-switch__link { color: #e7dccd; border-bottom: 1px solid transparent; transition: color 0.25s, border-color 0.25s; }
.footer-bottom .lang-switch__link:hover { color: var(--cream); border-bottom-color: var(--coral); }

/* ---------- Scroll reveal (only when JS is present, so no-JS users see all) ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: 0.08s; }
.js .reveal.d2 { transition-delay: 0.16s; }
.js .reveal.d3 { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Prose (legal pages) ---------- */
.prose { max-width: 780px; }
.prose h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); margin-top: 2.8rem; margin-bottom: 0.8rem; }
.prose h3 { font-size: 1.22rem; margin-top: 1.8rem; margin-bottom: 0.5rem; }
.prose p { margin-bottom: 1rem; color: var(--ink-2); max-width: none; }
.prose ul { list-style: disc; padding-left: 1.4rem; margin-bottom: 1.1rem; color: var(--ink-2); display: grid; gap: 0.45rem; }
.prose li { max-width: none; }
.prose a { color: var(--coral-deep); border-bottom: 1px solid var(--coral); }
.prose strong { color: var(--ink); }
.prose .meta { font-style: italic; color: var(--ink-2); margin-bottom: 2rem; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.6rem 0; }

/* ---------- Helpers ---------- */
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 100; background: var(--ink); color: var(--cream); padding: 0.7rem 1.1rem; border-radius: 8px; transition: top 0.2s; }
.skip-link:focus { top: 1rem; }
.text-balance { text-wrap: balance; }