/* =========================================================
   MELIS AESTÈTICS Academy — Editorial landing page
   Structure & layout modelled on the reference (Rebel Riot):
   cream base, chunky Boldonse display type, bold colour-blocked
   sections, overlapping pills, sticky-heading gallery, wavy
   marquee, giant footer wordmark.
   Loud colour -> MELIS purple #50004F. Base -> warm cream.
   ========================================================= */

:root{
  /* Brand */
  --purple:      #50004F;   /* sampled from logo — the "loud/dark" colour */
  --purple-deep: #37002F;
  --purple-900:  #21001E;
  --mauve:       #9A5C97;
  --lilac:       #E7D9E6;   /* soft alternate block (replaces ref. blue) */
  --lilac-2:     #EFE6EF;

  /* Neutrals (reference cream) */
  --cream:   #F1F2DE;
  --cream-2: #E9EAD2;
  --ink:     #2A0826;       /* deep aubergine text on cream */
  --ink-soft:#6A4E66;
  --line:    #D8CFC2;
  --line-dark: rgba(255,255,255,.16);
  --white:   #FFFFFF;

  /* Pills (tonal, restrained) */
  --pill-a: var(--purple);
  --pill-b: var(--mauve);
  --pill-c: var(--lilac);

  --display: "Boldonse", "Arial Black", system-ui, sans-serif;
  --sans: "Hanken Grotesk", Arial, Helvetica, system-ui, sans-serif;

  --ease: cubic-bezier(0.32,0.72,0,1);
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --pad: clamp(1.15rem, 5vw, 5rem);
  --maxw: 1320px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; font-family:var(--sans); color:var(--ink); background:var(--cream);
  line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0; }

/* Display type helper */
.display{
  font-family:var(--display); font-weight:400; line-height:.92;
  letter-spacing:-0.01em; text-transform:none;
}

.grain{
  position:fixed; inset:0; z-index:70; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.skip-link{ position:absolute; left:-999px; top:0; z-index:200; background:var(--purple); color:#fff; padding:.7rem 1.1rem; }
.skip-link:focus{ left:0; }
:focus-visible{ outline:2px solid var(--mauve); outline-offset:3px; }

/* ---------- Eyebrow ---------- */
.eyebrow{
  font-family:var(--sans); font-size:.74rem; text-transform:uppercase;
  letter-spacing:.26em; font-weight:700; color:var(--purple); margin:0 0 1.4rem;
}
.eyebrow--light{ color:var(--lilac); }

/* ---------- Buttons (pill w/ nested icon) ---------- */
.btn{
  --bg:var(--purple); --fg:#fff;
  display:inline-flex; align-items:center; gap:.8rem;
  background:var(--bg); color:var(--fg);
  padding:.8rem .8rem .8rem 1.5rem; border:2px solid var(--purple); border-radius:999px;
  font-family:var(--sans); font-weight:700; font-size:.95rem; cursor:pointer;
  transition:transform .5s var(--ease), background-color .4s var(--ease), color .4s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:scale(.98); }
.btn__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:2rem; height:2rem; border-radius:999px; background:rgba(255,255,255,.18);
  font-size:1rem; transition:transform .5s var(--ease), background-color .4s var(--ease);
}
.btn:hover .btn__icon{ transform:translate(3px,-1px) scale(1.06); background:rgba(255,255,255,.3); }
.btn--lg{ padding:1rem 1rem 1rem 1.8rem; font-size:1.05rem; }
.btn--block{ width:100%; justify-content:space-between; }

.btn--light{ --bg:var(--cream); --fg:var(--purple); border-color:var(--cream); }
.btn--light .btn__icon{ background:rgba(80,0,79,.14); }
.btn--light:hover .btn__icon{ background:rgba(80,0,79,.24); }

.btn--outline{ --bg:transparent; --fg:var(--ink); border-color:var(--ink); }
.btn--outline .btn__icon{ background:rgba(42,8,38,.1); }
.btn--outline:hover{ background:var(--purple); color:#fff; border-color:var(--purple); }
.btn--outline:hover .btn__icon{ background:rgba(255,255,255,.2); }

.btn--ghost-light{ --bg:transparent; --fg:#fff; border-color:var(--line-dark); }
.btn--ghost-light .btn__icon{ background:rgba(255,255,255,.14); }
.btn--ghost-light:hover{ background:#fff; color:var(--purple); border-color:#fff; }
.btn--ghost-light:hover .btn__icon{ background:rgba(80,0,79,.14); color:var(--purple); }
.btn--wa{ --bg:#25D366; --fg:#05331b; border-color:#25D366; }
.btn--wa .btn__icon{ background:rgba(255,255,255,.4); color:#0a5c2e; }
.btn--wa:hover{ background:#1ebe5b; border-color:#1ebe5b; }
.btn--wa:hover .btn__icon{ background:rgba(255,255,255,.6); }

.link-arrow{ display:inline-flex; align-items:center; gap:.45rem; font-weight:700; border-bottom:2px solid var(--purple); padding-bottom:2px; transition:gap .4s var(--ease); }
.link-arrow:hover{ gap:.75rem; }

.microcopy{ font-size:.85rem; color:var(--ink-soft); margin-top:1rem; }
.microcopy::before{ content:"✓ "; color:var(--mauve); font-weight:800; }
.microcopy--light{ color:rgba(255,255,255,.75); }

/* ---------- Reveal (progressive enhancement) ----------
   Content is visible by default. It only starts hidden when
   JS is active (.js on <html>), so if JS fails the page still
   shows everything instead of appearing blank. */
.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.js .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } }

/* =========================================================
   NAV — full-width solid bar (reference style)
   ========================================================= */
.nav{ position:sticky; top:0; z-index:100; background:var(--purple); color:#fff; }
.nav__inner{ max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:.6rem var(--pad); }
.nav__brand{ display:flex; align-items:center; gap:.6rem; }
.nav__logo{ height:34px; width:auto; }            /* logo bg == bar bg -> blends to white wordmark */
.nav__tag{ font-size:.62rem; letter-spacing:.34em; font-weight:800; color:var(--lilac); border-left:1px solid var(--line-dark); padding-left:.6rem; }
.nav__links{ display:flex; gap:2rem; margin-left:auto; }
.nav__links a{ font-size:.82rem; text-transform:uppercase; letter-spacing:.12em; font-weight:600; color:rgba(255,255,255,.8); transition:color .3s var(--ease); }
.nav__links a:hover{ color:#fff; }
.nav__cta{ display:inline-flex; align-items:center; gap:.5rem; background:var(--cream); color:var(--purple); font-weight:700; font-size:.82rem; padding:.6rem 1.2rem; border-radius:999px; text-transform:uppercase; letter-spacing:.08em; transition:transform .4s var(--ease); }
.nav__cta:hover{ transform:translateY(-1px); }
@media (max-width:960px){ .nav__links{ display:none; } .nav__tag{ display:none; } }
@media (max-width:520px){ .nav__cta span.full{ display:none; } }

/* =========================================================
   HERO — full-bleed editorial image + overlaid statement
   ========================================================= */
.hero{ position:relative; min-height:80vh; min-height:80dvh; display:flex; align-items:center; overflow:hidden;
  background: radial-gradient(130% 120% at 0% 45%, var(--purple) 0%, var(--purple-deep) 48%, var(--purple-900) 100%); }
.hero__media{ position:absolute; inset:0 0 0 auto; width:62%; z-index:0;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 18%, #000 42%);
          mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 18%, #000 42%); }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 28%; }
.hero__scrim{ position:absolute; inset:0; z-index:1; background:
  linear-gradient(90deg, rgba(33,0,30,.55) 0%, rgba(33,0,30,.32) 30%, rgba(33,0,30,.08) 45%, rgba(33,0,30,0) 60%),
  linear-gradient(180deg, rgba(33,0,30,.4) 0%, rgba(33,0,30,.08) 35%, rgba(33,0,30,.12) 65%, rgba(33,0,30,.5) 100%); }
.hero__inner{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; width:100%; padding:2.2rem var(--pad); color:#fff; }
.hero__eyebrow{ font-size:.7rem; text-transform:uppercase; letter-spacing:.22em; font-weight:700; color:#fff; margin-bottom:.9rem; opacity:.9; }
.hero__title{ font-family:var(--display); font-size:clamp(1.5rem, 3vw, 2.7rem); line-height:1.2; letter-spacing:-0.01em; max-width:14ch; text-shadow:0 2px 30px rgba(0,0,0,.35); }
.hero__title .accent{ color:var(--lilac); }
.hero__sub{ max-width:46ch; font-size:clamp(.92rem,1.15vw,1.06rem); color:rgba(255,255,255,.9); margin:1.1rem 0 1.6rem; }
.hero__actions{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.hero__badge{ position:absolute; top:2rem; right:var(--pad); z-index:2; background:rgba(80,0,79,.7); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.55rem 1rem; border-radius:999px; border:1px solid rgba(255,255,255,.2); }
@media (max-width:860px){
  .hero__media{ width:100%; }
  .hero__media img{ object-position:center 22%; }
  .hero__scrim{ background:
    linear-gradient(180deg, rgba(33,0,30,.6) 0%, rgba(33,0,30,.4) 40%, rgba(33,0,30,.82) 100%),
    linear-gradient(90deg, rgba(33,0,30,.9) 0%, rgba(33,0,30,.45) 60%, rgba(33,0,30,.2) 100%); }
}
@media (max-width:640px){
  .hero{ min-height:0; display:block; }
  .hero__badge{ display:none; }
  .hero__media{ position:static; width:100%; height:auto; aspect-ratio:4/3;
    -webkit-mask-image:none; mask-image:none; }
  .hero__media img{ height:100%; object-position:center 30%; }
  .hero__scrim{ display:none; }
  .hero__inner{ position:static; padding-top:1.8rem; padding-bottom:2.4rem; }
}

/* =========================================================
   MARQUEE (reference "break the rules")
   ========================================================= */
.marquee{ background:var(--purple); color:var(--cream); padding:1.1rem 0; overflow:hidden; border-top:1px solid var(--line-dark); }
.marquee--cream{ background:var(--cream); color:var(--purple); border:none; }
.marquee__track{ display:flex; gap:2.5rem; width:max-content; animation:marquee 32s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track span{ font-family:var(--display); font-size:clamp(1.1rem,2.4vw,1.9rem); display:inline-flex; align-items:center; gap:2.5rem; white-space:nowrap; }
.marquee__track span::after{ content:"✦"; color:var(--mauve); font-size:.7em; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none; } }

/* =========================================================
   STATEMENT — giant type + overlapping pills (ref "We Craft…")
   ========================================================= */
.statement{ background:var(--cream); padding:clamp(4rem,10vw,9rem) var(--pad) clamp(2rem,4.5vw,4rem); text-align:center; }
.statement__inner{ max-width:1100px; margin:0 auto; position:relative; }
.statement__head{ font-family:var(--display); font-size:clamp(1.95rem,5.2vw,4.4rem); line-height:1.22; letter-spacing:-0.015em; position:relative; z-index:1; }
.statement__head .soft{ color:var(--mauve); }
.statement .pill{ position:absolute; z-index:2; }
.statement .pill:nth-of-type(1){ top:26%; left:8%; transform:rotate(-4deg); }
.statement .pill:nth-of-type(2){ top:50%; right:6%; transform:rotate(3deg); }
.statement .pill:nth-of-type(3){ bottom:8%; left:24%; transform:rotate(-2deg); }
.pill{
  display:inline-flex; align-items:center; font-family:var(--sans); font-weight:700; font-size:clamp(.8rem,1.4vw,1.05rem);
  padding:.55rem 1.25rem; border-radius:999px; border:2px solid var(--ink); white-space:nowrap;
  box-shadow:4px 4px 0 rgba(42,8,38,.12);
}
.pill--a{ background:var(--purple); color:#fff; border-color:var(--purple); }
.pill--b{ background:var(--mauve); color:#fff; border-color:var(--ink); }
.pill--c{ background:var(--lilac); color:var(--purple); border-color:var(--ink); }
.statement__cta{ margin-top:clamp(2.5rem,6vw,4.5rem); display:flex; flex-direction:column; align-items:center; gap:.4rem; }
@media (max-width:760px){
  .statement .pill{ position:static; display:inline-flex; transform:none !important; margin:.3rem; box-shadow:3px 3px 0 rgba(42,8,38,.12); }
  .statement__pills{ margin-top:1.8rem; }
}
.statement__pills{ position:static; }
@media (min-width:761px){ .statement__pills{ display:contents; } }

/* =========================================================
   Generic section title
   ========================================================= */
.sec{ padding:clamp(4rem,9vw,8rem) var(--pad); }
.sec__wrap{ max-width:var(--maxw); margin:0 auto; }
.title{ font-family:var(--display); font-size:clamp(1.85rem,4.4vw,3.7rem); line-height:1.22; letter-spacing:-0.015em; }
#melis-title{ font-size:clamp(1.5rem,3.3vw,2.8rem); }
.title .soft{ color:var(--mauve); }
.lead{ font-size:clamp(1.02rem,1.5vw,1.2rem); color:var(--ink-soft); max-width:56ch; }

/* =========================================================
   EDITORIAL SPLIT (heading+text left, video/image right)
   ========================================================= */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.split--reverse .split__media{ order:-1; }
.split__head{ margin-bottom:clamp(2rem,4vw,3rem); }
.cert-list{ margin-top:2.2rem; display:grid; grid-template-columns:1fr 1fr; gap:0 2.5rem; }
.cert-list li{ display:flex; gap:.9rem; align-items:baseline; padding:.8rem 0; border-bottom:1px solid var(--line); font-weight:600; font-size:.97rem; }
.cert-list li b{ font-family:var(--display); color:var(--mauve); font-size:.8rem; min-width:1.7rem; font-weight:400; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; } .split__media{ order:-1; max-width:420px; margin:0 auto clamp(1.5rem,4vw,2.2rem); } .cert-list{ grid-template-columns:1fr; } }

/* ---------- Media frame + video ---------- */
.frame{ border-radius:22px; overflow:hidden; border:2px solid var(--ink); box-shadow:8px 8px 0 rgba(42,8,38,.14); background:#1a0016; }
.frame--tilt{ transform:rotate(1.5deg); }
.frame img{ width:100%; height:100%; object-fit:cover; }
.video{ position:relative; aspect-ratio:9/16; background:#1a0016; cursor:pointer; }
.video .video__poster{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.video:hover .video__poster{ transform:scale(1.03); }
.video video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.video__play{ position:absolute; inset:0; margin:auto; width:76px; height:76px; z-index:3; border:none; border-radius:999px; cursor:pointer; background:rgba(241,242,222,.92); display:flex; align-items:center; justify-content:center; box-shadow:0 14px 40px -12px rgba(0,0,0,.5); transition:transform .5s var(--ease); }
.video__play:hover{ transform:scale(1.08); }
.video__play-icon{ color:var(--purple); font-size:1.5rem; margin-left:4px; }
.video__label{ position:absolute; left:1rem; bottom:1rem; z-index:3; background:rgba(80,0,79,.85); color:#fff; font-size:.75rem; font-weight:700; padding:.45rem .9rem; border-radius:999px; }
.video.is-playing .video__play,.video.is-playing .video__label{ opacity:0; pointer-events:none; }

/* =========================================================
   GALLERY — sticky giant heading + asymmetric grid (ref)
   PURPLE block (replaces reference yellow)
   ========================================================= */
.gallery{ background:var(--purple); color:#fff; padding:clamp(4rem,9vw,8rem) var(--pad); }
.gallery__grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.gallery__grid > div:first-child{ position:sticky; top:6rem; align-self:start; }
.gallery__title{ font-family:var(--display); font-size:clamp(1.85rem,3.6vw,3.3rem); line-height:1.22; margin-bottom:.3rem; }
.gallery__title .accent{ color:var(--lilac); }
.gallery__sub{ color:rgba(255,255,255,.72); margin-top:1.6rem; max-width:34ch; }
/* Vertical auto-scrolling carousel (inspired by the reference gallery) */
.gallery__carousel{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; height:clamp(560px,86vh,900px); overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%); }
.vmarquee{ overflow:hidden; }
.vmarquee__track{ display:flex; flex-direction:column; animation:vscroll 32s linear infinite; will-change:transform; }
.vmarquee--rev .vmarquee__track{ animation-duration:40s; animation-direction:reverse; }
.gallery__carousel:hover .vmarquee__track{ animation-play-state:paused; }
.gallery__carousel .frame{ aspect-ratio:3/4; flex:0 0 auto; margin-bottom:1rem; border-color:rgba(255,255,255,.25); box-shadow:6px 6px 0 rgba(0,0,0,.25); }
@keyframes vscroll{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }
.who-tags{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.8rem; }
.who-tags li{ font-weight:700; font-size:.85rem; padding:.5rem 1.1rem; border-radius:999px; border:2px solid rgba(255,255,255,.35); }
@media (max-width:860px){ .gallery__grid{ grid-template-columns:1fr; } .gallery__grid > div:first-child{ position:static; } .gallery__carousel{ height:clamp(460px,80vh,680px); } }
@media (prefers-reduced-motion: reduce){ .vmarquee__track{ animation:none; } }

/* =========================================================
   PROGRAMS — masterclass cards on lilac
   ========================================================= */
.programs{ background:var(--lilac); padding:clamp(4rem,9vw,8rem) var(--pad); }
.programs__head{ max-width:var(--maxw); margin:0 auto clamp(2.5rem,5vw,3.5rem); }
.programs__note{ color:var(--ink-soft); max-width:62ch; margin-top:1.4rem; }
.cat{ max-width:var(--maxw); margin:0 auto clamp(2rem,4vw,3rem); }
.cat__title{ font-family:var(--display); font-size:clamp(1.7rem,3.4vw,2.8rem); margin-bottom:1.4rem; display:flex; align-items:baseline; gap:.8rem; }
.cat__title .eyebrow{ margin:0; }
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.card{ background:var(--cream); border:2px solid var(--ink); border-radius:20px; padding:1.7rem 1.5rem; display:flex; flex-direction:column; box-shadow:6px 6px 0 rgba(42,8,38,.1); transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.card:hover{ transform:translate(-2px,-2px); box-shadow:9px 9px 0 rgba(42,8,38,.14); }
.card--feature{ background:var(--purple); color:#fff; border-color:var(--purple); }
.card--feature .card__price{ color:#fff; }
.card--feature .card__meta{ color:rgba(255,255,255,.75); }
.card--feature .card__cta{ color:var(--lilac); }
.card__flag{ align-self:flex-start; font-size:.68rem; text-transform:uppercase; letter-spacing:.14em; font-weight:800; background:var(--mauve); color:#fff; padding:.32rem .8rem; border-radius:999px; margin-bottom:1rem; border:1.5px solid var(--ink); }
.card--feature .card__flag{ background:var(--cream); color:var(--purple); border-color:var(--cream); }
.card__flag--soft{ background:var(--lilac); color:var(--purple); }
.card h4{ font-family:var(--sans); font-weight:800; font-size:1.15rem; line-height:1.18; letter-spacing:-0.01em; }
.card__meta{ color:var(--ink-soft); font-size:.9rem; margin:.7rem 0 1.1rem; }
.card__incl{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 1.1rem; }
.card__incl li{ font-size:.74rem; font-weight:700; color:var(--purple); background:rgba(80,0,79,.08); padding:.3rem .65rem; border-radius:999px; }
.card--feature .card__incl li{ background:rgba(255,255,255,.16); color:#fff; }
.card__price{ font-family:var(--display); font-size:1.9rem; color:var(--purple); margin-top:auto; }
.card__cta{ display:inline-flex; align-items:center; gap:.4rem; margin-top:1rem; font-weight:700; font-size:.88rem; color:var(--purple); transition:gap .4s var(--ease); }
.card__cta:hover{ gap:.7rem; }
.card--wide{ grid-column:span 3; }
.card--wide{ display:grid; grid-template-columns:1.5fr 1fr auto; align-items:center; gap:1.8rem; }
.card--wide .card__price{ margin:0; }
@media (max-width:900px){ .cards{ grid-template-columns:1fr 1fr; } .card--wide{ grid-column:span 2; grid-template-columns:1fr; gap:1rem; } }
@media (max-width:600px){ .cards{ grid-template-columns:1fr; } .card--wide{ grid-column:span 1; } }

/* Elite */
.elite{ max-width:var(--maxw); margin:1.1rem auto 0; background:var(--purple); color:#fff; border:2px solid var(--ink); border-radius:24px; box-shadow:8px 8px 0 rgba(42,8,38,.18); padding:clamp(2rem,4vw,3.4rem); display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); }
.elite h3{ font-family:var(--display); font-size:clamp(1.9rem,4vw,3rem); margin:.3rem 0 1rem; }
.elite__desc{ color:rgba(255,255,255,.78); max-width:40ch; margin-bottom:1.4rem; }
.elite__price{ font-family:var(--display); font-size:2.4rem; margin-bottom:1.6rem; }
.elite__price span{ display:block; font-family:var(--sans); font-size:.85rem; font-weight:600; color:var(--lilac); margin-top:.4rem; }
.elite__list{ display:grid; grid-template-columns:1fr 1fr; gap:0 1.4rem; align-content:center; }
.elite__list li{ padding:.6rem 0; border-bottom:1px solid var(--line-dark); font-size:.9rem; font-weight:600; display:flex; gap:.5rem; }
.elite__list li::before{ content:"—"; color:var(--lilac); }
@media (max-width:820px){ .elite{ grid-template-columns:1fr; } .elite__list{ grid-template-columns:1fr; } }
.programs__foot{ text-align:center; margin-top:clamp(3rem,6vw,4.5rem); }
.programs__foot-q{ font-family:var(--display); font-size:clamp(1.6rem,3.4vw,2.6rem); margin-bottom:1.4rem; }

/* =========================================================
   BUSINESS — purple statement block
   ========================================================= */
.business{ background:var(--purple); color:#fff; }
.business .split__head .title{ color:#fff; font-size:clamp(1.5rem,3.4vw,2.8rem); }
.business .lead{ color:rgba(255,255,255,.75); }
.biz-list{ display:grid; grid-template-columns:1fr 1fr; gap:0 1.5rem; }
.biz-list li{ padding:1rem 0; border-bottom:1px solid var(--line-dark); font-family:var(--sans); font-weight:700; font-size:1.15rem; letter-spacing:-0.01em; }
@media (max-width:860px){ .biz-list{ grid-template-columns:1fr; } }

/* =========================================================
   MELIS founder
   ========================================================= */
.melis-points{ margin-top:1.8rem; columns:2; column-gap:2.4rem; }
.melis-points li{ padding:.75rem 0; border-bottom:1px solid var(--line); font-weight:600; font-size:.94rem; break-inside:avoid; display:flex; gap:.6rem; align-items:baseline; }
.melis-points li::before{ content:"✦"; color:var(--mauve); font-size:.7rem; }
@media (max-width:860px){ .melis-points{ columns:1; } }

/* =========================================================
   STEPS
   ========================================================= */
.steps{ background:var(--cream-2); }
.steps__list{ max-width:var(--maxw); margin:clamp(2.5rem,5vw,3.5rem) auto 0; display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.step{ border-top:3px solid var(--purple); padding-top:1.3rem; }
.step__n{ font-family:var(--display); font-size:2.4rem; color:var(--mauve); }
.step h3{ font-family:var(--sans); font-weight:800; font-size:1.2rem; margin:.9rem 0 .6rem; line-height:1.15; letter-spacing:-0.01em; }
.step p{ color:var(--ink-soft); font-size:.93rem; }
.steps__cta{ text-align:center; margin-top:clamp(3rem,6vw,4rem); }
@media (max-width:900px){ .steps__list{ grid-template-columns:1fr 1fr; gap:2rem; } }
@media (max-width:520px){ .steps__list{ grid-template-columns:1fr; } }

/* =========================================================
   EMOTION — dark purple
   ========================================================= */
.emotion{ background:linear-gradient(160deg,var(--purple),var(--purple-deep) 60%,var(--purple-900)); color:#fff; }
.emotion__grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.emotion__small{ font-family:var(--display); font-size:clamp(1.35rem,2.6vw,2rem); line-height:1.24; color:rgba(255,255,255,.82); }
.emotion__big{ font-family:var(--display); font-size:clamp(1.6rem,4vw,3rem); line-height:1.18; color:var(--lilac); margin:1.1rem 0 1.8rem; }
.emotion__body{ color:rgba(255,255,255,.72); max-width:46ch; margin-bottom:1rem; }
.emotion__media{ max-width:330px; margin-left:auto; }
@media (max-width:860px){ .emotion__grid{ grid-template-columns:1fr; } .emotion__media{ order:-1; margin:0 auto clamp(1.5rem,4vw,2rem); } }

/* =========================================================
   FAQ
   ========================================================= */
.faq__list{ max-width:var(--maxw); margin:clamp(2rem,4vw,3rem) auto 0; border-top:2px solid var(--ink); }
.faq__item{ border-bottom:2px solid var(--ink); }
.faq__item summary{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.4rem 0; cursor:pointer; list-style:none; font-family:var(--sans); font-weight:700; font-size:clamp(1.05rem,1.7vw,1.4rem); line-height:1.25; letter-spacing:-0.01em; transition:color .3s var(--ease); }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color:var(--mauve); }
.faq__mark{ position:relative; width:22px; height:22px; flex:none; }
.faq__mark::before,.faq__mark::after{ content:""; position:absolute; background:var(--purple); border-radius:2px; transition:transform .4s var(--ease); }
.faq__mark::before{ top:10px; left:0; width:22px; height:2px; }
.faq__mark::after{ top:0; left:10px; width:2px; height:22px; }
.faq__item[open] .faq__mark::after{ transform:scaleY(0); }
.faq__answer{ padding-bottom:1.5rem; max-width:72ch; }
.faq__answer p{ color:var(--ink-soft); }

/* =========================================================
   CONTACT / FORM
   ========================================================= */
.contact{ background:linear-gradient(160deg,var(--purple),var(--purple-deep)); color:#fff; }
.contact__grid{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,5rem); align-items:start; }
.contact__title{ font-family:var(--display); font-size:clamp(1.7rem,3.4vw,2.7rem); line-height:1.22; }
.contact__lead{ color:rgba(255,255,255,.76); margin:1.4rem 0 2rem; max-width:44ch; }
.contact__assure{ display:flex; flex-direction:column; gap:.85rem; margin-bottom:2.4rem; }
.contact__assure li{ display:flex; gap:.7rem; align-items:center; font-weight:600; }
.contact__assure li::before{ content:"✓"; color:var(--lilac); font-weight:800; }
.contact__alt{ border-top:1px solid var(--line-dark); padding-top:1.7rem; }
.contact__alt p{ color:rgba(255,255,255,.7); margin-bottom:1rem; font-size:.95rem; }

.formwrap{ background:rgba(255,255,255,.05); border:2px solid var(--line-dark); border-radius:22px; padding:clamp(1.6rem,3vw,2.6rem); }
.form__title{ font-family:var(--sans); font-weight:800; font-size:1.3rem; letter-spacing:-0.01em; margin-bottom:1.5rem; }
.form__row{ margin-bottom:1.05rem; display:flex; flex-direction:column; gap:.45rem; }
.form__two{ display:grid; grid-template-columns:1fr 1fr; gap:1.05rem; }
.form label{ font-size:.82rem; font-weight:700; color:rgba(255,255,255,.85); }
.form input,.form select{ width:100%; font-family:var(--sans); font-size:1rem; color:#fff; background:rgba(255,255,255,.07); border:1px solid var(--line-dark); border-radius:13px; padding:.82rem 1rem; transition:border-color .3s var(--ease), background-color .3s var(--ease); }
.form input::placeholder{ color:rgba(255,255,255,.4); }
.form input:focus,.form select:focus{ outline:none; border-color:var(--lilac); background:rgba(255,255,255,.11); }
.form select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23E7D9E6' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.5rem; cursor:pointer; }
.form select option{ color:var(--ink); background:#fff; }
.form__consent{ display:flex; gap:.7rem; align-items:flex-start; margin:.4rem 0 1.5rem; font-size:.8rem; color:rgba(255,255,255,.72); line-height:1.5; }
.form__consent input{ width:auto; margin-top:.2rem; accent-color:var(--mauve); flex:none; }
.form__consent a{ color:var(--lilac); text-decoration:underline; text-underline-offset:2px; }
.form__micro{ text-align:center; font-size:.78rem; color:rgba(255,255,255,.6); margin-top:1rem; }
.form__status{ margin-top:1rem; padding:1rem 1.2rem; border-radius:13px; font-size:.9rem; font-weight:600; }
.form__status.is-success{ background:rgba(154,92,151,.28); border:1px solid var(--lilac); color:#fff; }
.form__status.is-error{ background:rgba(255,120,120,.16); border:1px solid rgba(255,150,150,.5); color:#fff; }
.form input:invalid.touched,.form select:invalid.touched{ border-color:rgba(255,150,150,.7); }
@media (max-width:860px){ .contact__grid{ grid-template-columns:1fr; } }
@media (max-width:480px){ .form__two{ grid-template-columns:1fr; } }

/* =========================================================
   FOOTER — image strip + giant wordmark (reference)
   ========================================================= */
.footer{ background:var(--purple-900); color:#fff; padding:clamp(2.5rem,5vw,4rem) var(--pad) 2rem; overflow:hidden; }
.footer__strip{ max-width:var(--maxw); margin:0 auto 2.5rem; display:grid; grid-template-columns:repeat(5,1fr); gap:.8rem; }
.footer__strip .frame{ aspect-ratio:3/4; border-color:rgba(255,255,255,.2); box-shadow:none; }
.footer__cols{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; padding-bottom:2.5rem; }
.footer__label{ font-size:.7rem; text-transform:uppercase; letter-spacing:.22em; font-weight:800; color:var(--lilac); margin-bottom:1rem; }
.footer address{ font-style:normal; color:rgba(255,255,255,.8); line-height:1.9; font-size:.94rem; }
.footer__nav li{ margin-bottom:.6rem; }
.footer__nav a{ color:rgba(255,255,255,.8); font-size:.94rem; }
.footer__nav a:hover{ color:#fff; }
.footer__word{ max-width:var(--maxw); margin:0 auto; font-family:var(--display); font-size:clamp(1.6rem,8.2vw,7.4rem); line-height:.85; letter-spacing:-0.02em; color:rgba(255,255,255,.12); white-space:nowrap; overflow:hidden; padding-top:1rem; }
.footer__base{ max-width:var(--maxw); margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; padding-top:1.8rem; border-top:1px solid var(--line-dark); color:rgba(255,255,255,.5); font-size:.8rem; }
.footer__credit a{ color:rgba(255,255,255,.82); text-decoration:underline; text-underline-offset:2px; }
.footer__credit a:hover{ color:#fff; }
@media (max-width:860px){ .footer__strip{ grid-template-columns:repeat(3,1fr); } .footer__cols{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer__strip{ grid-template-columns:repeat(2,1fr); } .footer__cols{ grid-template-columns:1fr; } }

/* =========================================================
   STICKY MOBILE CTA
   ========================================================= */
.sticky-cta{ position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:90; display:none; align-items:center; justify-content:center; gap:.7rem; background:var(--purple); color:#fff; font-weight:700; padding:1rem; border-radius:999px; border:2px solid var(--cream); box-shadow:0 16px 40px -12px rgba(0,0,0,.6); transform:translateY(140%); transition:transform .5s var(--ease); }
.sticky-cta .btn__icon{ display:inline-flex; align-items:center; justify-content:center; width:1.8rem; height:1.8rem; border-radius:999px; background:rgba(255,255,255,.18); }
.sticky-cta.is-visible{ transform:none; }
@media (max-width:860px){ .sticky-cta{ display:flex; } }

/* =========================================================
   LEGAL PAGES (Impressum / AGB)
   ========================================================= */
.legal{ max-width:820px; margin:0 auto; padding:clamp(2.2rem,6vw,4.5rem) var(--pad) 4rem; color:var(--ink); }
.legal__back{ display:inline-flex; align-items:center; gap:.5rem; margin-bottom:2rem; font-weight:700; color:var(--purple); }
.legal__back:hover{ text-decoration:underline; }
.legal h1{ font-family:var(--display); font-size:clamp(1.3rem,2.6vw,2rem); line-height:1.2; margin-bottom:1.2rem; color:var(--purple); letter-spacing:-0.01em; overflow-wrap:break-word; }
.legal h2{ font-family:var(--display); font-size:clamp(1.05rem,2vw,1.45rem); line-height:1.25; margin:2.2rem 0 .7rem; color:var(--ink); }
.legal p, .legal li{ font-size:1rem; line-height:1.75; color:var(--ink-soft); margin-bottom:.85rem; }
.legal ul{ padding-left:1.2rem; margin-bottom:.85rem; }
.legal li{ margin-bottom:.4rem; }
.legal strong{ color:var(--ink); font-weight:700; }
.legal a{ color:var(--purple); text-decoration:underline; text-underline-offset:2px; }
.legal address{ font-style:normal; line-height:1.8; color:var(--ink); margin-bottom:1.2rem; }
.legal__meta{ font-size:.9rem; color:var(--ink-soft); margin:1.2rem 0 2rem; }
.legal hr{ border:none; border-top:1px solid var(--line); margin:2.5rem 0; }