/* ============================================================
   ORENSÈN — École de danse · Divonne-les-Bains
   ============================================================ */

/* ---------- Tokens (default = Éditorial) ---------- */
:root{
  --brand-teal:#43B3AE;
  --teal-deep:#15514E;
  --teal-ink:#0E3331;

  --coral:#FF5A36;
  --accent:var(--coral);

  --paper:#F4EEE2;
  --paper-2:#EBE2D2;
  --card:#FBF7EE;
  --ink:#16201E;
  --ink-soft:#41514E;
  --line:rgba(20,32,30,.16);

  --display:"Bricolage Grotesque", system-ui, sans-serif;
  --head:"Bricolage Grotesque", system-ui, sans-serif;
  --serif:"Instrument Serif", Georgia, serif;
  --body:"Space Grotesk", system-ui, sans-serif;
  --dw:800;

  --r:18px;
  --maxw:1320px;
  --gut:clamp(20px,5vw,72px);

  --ease:cubic-bezier(.22,1,.36,1);
  --reveal-dur:.9s;
}

/* ---------- Direction / mood variants ---------- */
html[data-mood="bold"]{
  --paper:#121311; --paper-2:#1B1C19; --card:#1C1D1A;
  --ink:#F3EFE5; --ink-soft:#B8B3A6; --line:rgba(243,239,229,.16);
  --teal-deep:#43B3AE; --teal-ink:#8FE0DB;
}
html[data-mood="warm"]{
  --paper:#FBEEE3; --paper-2:#F4E0D0; --card:#FFF7F0;
  --ink:#2C1C14; --ink-soft:#6E5043; --line:rgba(44,28,20,.16);
  --coral:#E8623A; --teal-deep:#246F6A;
}
html[data-mood="minimal"]{
  --paper:#FAFAF7; --paper-2:#F0F0EC; --card:#FFFFFF;
  --ink:#141414; --ink-soft:#5A5A56; --line:rgba(20,20,20,.12);
  --coral:#1F6E6A; --accent:var(--teal-deep); --teal-deep:#15514E;
}
html[data-mood="artsy"]{
  --paper:#F1EAD9; --paper-2:#E7D8BE; --card:#FBF6EA;
  --ink:#141E1C; --coral:#FF5A36;
}

/* ---------- Type systems ---------- */
html[data-type="bricolage"]{ --display:"Bricolage Grotesque",system-ui,sans-serif; --head:"Bricolage Grotesque",system-ui,sans-serif; --body:"Space Grotesk",system-ui,sans-serif; --dw:800; }
html[data-type="syne"]{ --display:"Syne",system-ui,sans-serif; --head:"Syne",system-ui,sans-serif; --body:"Syne",system-ui,sans-serif; --dw:800; }
html[data-type="poster"]{ --display:"Big Shoulders Display",system-ui,sans-serif; --head:"Archivo",system-ui,sans-serif; --body:"Schibsted Grotesk",system-ui,sans-serif; --dw:800; }
html[data-type="edito"]{ --display:"DM Serif Display",Georgia,serif; --head:"Schibsted Grotesk",system-ui,sans-serif; --body:"Schibsted Grotesk",system-ui,sans-serif; --dw:400; }
html[data-type="condensed"]{ --display:"Anton",system-ui,sans-serif; --head:"Archivo",system-ui,sans-serif; --body:"Schibsted Grotesk",system-ui,sans-serif; --dw:400; }

.brand,.hero h1,.stat b,.marquee-track span,.tl b,.disc-foot .big,.price .amt,.alma h2,.alma-facts b,.ev .spot,.date b,.foot-big{ font-weight:var(--dw); }

html[data-type="edito"] .hero h1{ text-transform:none; line-height:.94; letter-spacing:-.015em; }
html[data-type="edito"] .hero h1 em{ font-style:italic; }
html[data-type="edito"] .foot-big{ text-transform:none; letter-spacing:-.01em; }
html[data-type="edito"] .alma h2{ letter-spacing:-.01em; }

/* motion toggle */
html[data-motion="off"] *{ animation:none !important; }
html[data-motion="subtle"] .hero-badge{ animation:none; }
html[data-motion="subtle"] .marquee-track{ animation-duration:85s; }
html[data-motion="subtle"] .disc:hover .ph,
html[data-motion="subtle"] .prof:hover .prof-ph .ph{ transform:none; }

/* ---------- Reset ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.5;
  font-size:17px;
  overflow-x:hidden;
  transition:background .5s var(--ease), color .5s var(--ease);
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; border:none; background:none; }
::selection{ background:var(--accent); color:#fff; }

/* ---------- Layout helpers ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
.section{ position:relative; padding-block:clamp(64px,9vw,140px); }
.eyebrow{
  font-family:var(--head); font-weight:700;
  text-transform:uppercase; letter-spacing:.22em; font-size:.74rem;
  color:var(--accent); display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{ content:""; width:34px; height:2px; background:var(--accent); display:inline-block; }
.section-head{ max-width:760px; margin-bottom:clamp(34px,5vw,64px); }
.section-head h2{
  font-family:var(--head); font-weight:800; line-height:.96;
  font-size:clamp(2.4rem,6vw,4.6rem); letter-spacing:-.02em;
  margin-top:.34em; text-wrap:balance;
}
.lead{ font-size:clamp(1.05rem,1.7vw,1.35rem); color:var(--ink-soft); max-width:60ch; text-wrap:pretty; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--head); font-weight:700; font-size:.92rem;
  text-transform:uppercase; letter-spacing:.04em;
  padding:.95em 1.5em; border-radius:100px;
  background:var(--ink); color:var(--paper);
  transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
  will-change:transform;
}
.btn .arr{ transition:transform .35s var(--ease); }
.btn:hover{ transform:translateY(-3px); }
.btn:hover .arr{ transform:translate(4px,-4px); }
.btn:hover .arr.ico{ transform:translate(3px,-3px); }

/* ---------- Icons ---------- */
.ico{ display:inline-flex; align-items:center; justify-content:center; line-height:0; }
.ico svg{ width:1em; height:1em; display:block; }
.btn .ico{ font-size:1.15em; }
.ico--lg svg{ width:1.4em; height:1.4em; }
.btn--accent{ background:var(--accent); color:#fff; }
.btn--teal{ background:var(--teal-deep); color:#fff; }
.btn--ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.6px var(--line); }
.btn--ghost:hover{ box-shadow:inset 0 0 0 1.6px var(--ink); }

/* ---------- Header ---------- */
.head{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gut);
  transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.head.scrolled{
  background:color-mix(in oklab, var(--paper) 86%, transparent);
  backdrop-filter:blur(14px) saturate(1.3);
  padding-block:11px;
  box-shadow:0 1px 0 var(--line);
}
.brand{ display:flex; align-items:baseline; gap:.5ch; font-family:var(--display); font-size:1.6rem; letter-spacing:.02em; line-height:1; }
.brand .dot{ color:var(--accent); }
.nav{ display:flex; align-items:center; gap:clamp(14px,1.8vw,30px); }
.nav a{ font-family:var(--head); font-weight:600; font-size:.86rem; letter-spacing:.01em; position:relative; }
.nav a::after{ content:""; position:absolute; left:0; bottom:-5px; height:2px; width:0; background:var(--accent); transition:width .35s var(--ease); }
.nav a:hover::after{ width:100%; }
.nav .navlinks{ display:flex; gap:clamp(14px,1.8vw,30px); }
.burger{ display:none; }
@media(max-width:960px){
  .nav .navlinks{ display:none; }
  .burger{ display:flex; flex-direction:column; gap:5px; padding:8px; }
  .burger span{ width:26px; height:2.4px; background:var(--ink); border-radius:2px; transition:.3s; }
}

/* ---------- Header variations ---------- */
html[data-header="pill"] .head{
  top:14px; left:50%; right:auto; transform:translateX(-50%);
  width:min(1120px, calc(100% - 2*clamp(12px,4vw,40px)));
  padding:9px 10px 9px 24px; border-radius:100px;
  background:color-mix(in oklab, var(--paper) 82%, transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.5); backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:0 14px 34px -16px rgba(14,51,49,.4), inset 0 0 0 1px var(--line);
}
html[data-header="pill"] .head.scrolled{
  background:color-mix(in oklab, var(--paper) 92%, transparent);
  padding-block:7px; box-shadow:0 12px 28px -16px rgba(14,51,49,.45), inset 0 0 0 1px var(--line);
}
html[data-header="islands"] .head,
html[data-header="islands"] .head.scrolled{
  top:14px; background:none; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none;
  padding-inline:clamp(12px,4vw,44px); padding-block:0;
}
html[data-header="islands"] .brand{
  padding:13px 24px; border-radius:100px;
  background:color-mix(in oklab, var(--paper) 84%, transparent);
  -webkit-backdrop-filter:blur(15px) saturate(1.5); backdrop-filter:blur(15px) saturate(1.5);
  box-shadow:0 12px 30px -16px rgba(14,51,49,.4), inset 0 0 0 1px var(--line);
}
html[data-header="islands"] .nav{
  padding:8px 8px 8px 22px; border-radius:100px;
  background:color-mix(in oklab, var(--paper) 84%, transparent);
  -webkit-backdrop-filter:blur(15px) saturate(1.5); backdrop-filter:blur(15px) saturate(1.5);
  box-shadow:0 12px 30px -16px rgba(14,51,49,.4), inset 0 0 0 1px var(--line);
}
html[data-header="minimal"] .nav .navlinks{ display:none; }
html[data-header="minimal"] .burger{ display:flex; flex-direction:column; gap:5px; padding:8px; }
html[data-header="minimal"] .burger span{ width:26px; height:2.4px; background:var(--ink); border-radius:2px; transition:.3s; }
html[data-header="minimal"] .head{ padding-block:22px; }
html[data-header="minimal"] .head.scrolled{ padding-block:13px; }

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:70; background:var(--ink); color:var(--paper);
  display:flex; flex-direction:column; justify-content:center; gap:6px; padding:var(--gut);
  transform:translateY(-100%); transition:transform .55s var(--ease);
}
.drawer.open{ transform:none; }
.drawer a{ font-family:var(--head); font-weight:800; text-transform:uppercase; font-size:clamp(2rem,9vw,3.4rem); line-height:1.04; }
.drawer a:nth-child(odd){ color:var(--brand-teal); }
.drawer .close{ position:absolute; top:22px; right:var(--gut); font-family:var(--head); text-transform:uppercase; letter-spacing:.1em; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; padding-top:clamp(120px,16vh,190px); padding-bottom:0; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,4vw,56px); align-items:end; }
@media(max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }

.hero-tag{ display:flex; align-items:center; gap:14px; margin-bottom:22px; flex-wrap:wrap; }
.pill{
  font-family:var(--head); font-weight:700; font-size:.74rem; text-transform:uppercase; letter-spacing:.14em;
  padding:.55em 1em; border-radius:100px; background:var(--teal-deep); color:#fff; white-space:nowrap;
}
.pill--out{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line); }

.hero h1{
  font-family:var(--display); font-weight:var(--dw);
  font-size:clamp(3rem,8.4vw,6.8rem); line-height:1.02; letter-spacing:-.01em;
  text-transform:uppercase;
}
.hero h1 .line{ display:block; }
.hero h1 .line > span{ display:block; }
html.can-animate .hero h1{ animation:heroUp 1s var(--ease) both; }
@keyframes heroUp{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
.hero h1 em{ font-style:normal; color:var(--accent); }
.hero h1 .ital{ font-family:var(--serif); font-style:italic; text-transform:none; font-weight:400; color:var(--teal-deep); }

.hero-sub{ margin-top:26px; font-size:clamp(1.05rem,1.5vw,1.3rem); color:var(--ink-soft); max-width:46ch; text-wrap:pretty; }
.hero-cta{ margin-top:30px; display:flex; gap:14px; flex-wrap:wrap; }

.hero-media{ position:relative; }
.hero-figure{
  position:relative; aspect-ratio:3/4; border-radius:var(--r);
  overflow:hidden; box-shadow:0 30px 70px -34px rgba(14,51,49,.55);
}
.hero-figure .ph{ position:absolute; inset:0; }
.hero-badge{
  position:absolute; left:-26px; bottom:34px; z-index:3;
  width:128px; height:128px; border-radius:50%;
  background:var(--accent); color:#fff; display:grid; place-items:center; text-align:center;
  font-family:var(--head); font-weight:800; text-transform:uppercase; font-size:.72rem; letter-spacing:.08em;
  animation:spin-badge 18s linear infinite;
}
.hero-badge span{ line-height:1.2; }
@keyframes spin-badge{ to{ transform:rotate(360deg); } }
@media(max-width:900px){ .hero-badge{ left:auto; right:18px; width:104px; height:104px; } }

/* stat bar */
.stats{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; margin-top:clamp(48px,7vw,86px); border-top:1.6px solid var(--ink); border-bottom:1.6px solid var(--ink); }
.stat{ padding:22px 6px 24px; }
.stat b{ display:block; font-family:var(--display); font-size:clamp(1.9rem,4.4vw,3.1rem); line-height:1; }
.stat span{ font-family:var(--head); font-weight:600; font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft); }
@media(max-width:760px){ .stats{ grid-template-columns:repeat(2,1fr); } .stat:last-child{ grid-column:1/-1; } }

/* ---------- Marquee ---------- */
.marquee{ overflow:hidden; border-block:1.6px solid var(--ink); padding-block:16px; background:var(--accent); color:#fff; }
.marquee.alt{ background:transparent; color:var(--ink); border-block:none; padding-block:8px; }
.marquee-track{ display:flex; gap:0; width:max-content; animation:scroll-x 32s linear infinite; }
html[data-motion="off"] .marquee-track{ animation:none; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{ font-family:var(--display); font-size:clamp(1.4rem,3vw,2.3rem); text-transform:uppercase; padding-inline:.5em; display:inline-flex; align-items:center; gap:.6em; }
.marquee-track .star{ font-family:var(--body); }
@keyframes scroll-x{ to{ transform:translateX(-50%); } }

/* ============================================================
   HERO VARIATIONS
   ============================================================ */
html[data-hero="centered"] .hero{ text-align:center; }
html[data-hero="centered"] .hero-grid{ grid-template-columns:1fr; justify-items:center; }
html[data-hero="centered"] .hero-tag{ justify-content:center; }
html[data-hero="centered"] .hero h1{ font-size:clamp(3rem,9.6vw,7.6rem); }
html[data-hero="centered"] .hero-sub{ margin-left:auto; margin-right:auto; }
html[data-hero="centered"] .hero-cta{ justify-content:center; }
html[data-hero="centered"] .hero-media{ width:100%; margin-top:clamp(34px,5vw,60px); }
html[data-hero="centered"] .hero-figure{ aspect-ratio:16/7; }
html[data-hero="centered"] .hero-badge{ left:auto; right:34px; bottom:auto; top:-26px; }
@media(max-width:900px){ html[data-hero="centered"] .hero-figure{ aspect-ratio:4/3; } }

html[data-hero="overlay"] .hero{ min-height:90vh; display:flex; align-items:flex-end; padding-bottom:clamp(40px,6vw,84px); }
html[data-hero="overlay"] .hero-grid{ grid-template-columns:1fr; align-items:end; }
html[data-hero="overlay"] .hero-media{ position:absolute; inset:0; z-index:0; width:auto; }
html[data-hero="overlay"] .hero-figure{ position:absolute; inset:0; aspect-ratio:auto; border-radius:0; box-shadow:none; }
html[data-hero="overlay"] .hero::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(8,24,23,.30) 8%,rgba(8,24,23,.40) 45%,rgba(8,22,21,.86)); }
html[data-hero="overlay"] .hero-copy{ position:relative; z-index:2; color:#fff; max-width:920px; }
html[data-hero="overlay"] .hero h1,
html[data-hero="overlay"] .hero h1 .ital{ color:#fff; }
html[data-hero="overlay"] .hero h1 em{ color:var(--accent); }
html[data-hero="overlay"] .hero-sub{ color:rgba(255,255,255,.88); }
html[data-hero="overlay"] .hero-badge{ display:none; }
html[data-hero="overlay"] .pill--out{ color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45); }
html[data-hero="overlay"] .btn--ghost{ color:#fff; box-shadow:inset 0 0 0 1.6px rgba(255,255,255,.55); }
html[data-hero="overlay"] .btn--ghost:hover{ box-shadow:inset 0 0 0 1.6px #fff; }
html[data-hero="overlay"] .stats{ position:relative; z-index:2; border-color:rgba(255,255,255,.5); margin-top:clamp(34px,5vw,56px); }
html[data-hero="overlay"] .stat span{ color:rgba(255,255,255,.72); }
html[data-hero="overlay"] .hero-copy,
html[data-hero="overlay"] .stats{ color:#fff; }

html[data-hero="asym"] .hero-grid{ grid-template-columns:1.32fr .68fr; align-items:start; gap:clamp(20px,3vw,44px); }
html[data-hero="asym"] .hero-copy{ padding-top:clamp(10px,3vw,40px); }
html[data-hero="asym"] .hero h1{ font-size:clamp(3rem,10.5vw,8.4rem); line-height:1; }
html[data-hero="asym"] .hero-media{ transform:translateY(-28px) rotate(2.2deg); }
html[data-hero="asym"] .hero-figure{ aspect-ratio:3/4.3; }
html[data-hero="asym"] .hero-badge{ animation-duration:14s; left:-22px; bottom:20px; }
@media(max-width:900px){ html[data-hero="asym"] .hero-media{ transform:none; } }

html[data-hero="spotlight"] .hero{ min-height:94vh; display:flex; align-items:flex-end; padding-bottom:clamp(38px,5vw,72px); }
html[data-hero="spotlight"] .hero-grid{ grid-template-columns:1fr; align-items:end; }
html[data-hero="spotlight"] .hero-media{ position:absolute; inset:0; z-index:0; width:auto; }
html[data-hero="spotlight"] .hero-figure{ position:absolute; inset:0; aspect-ratio:auto; border-radius:0; box-shadow:none; }
html[data-hero="spotlight"] .hero-figure .ph-img{ object-position:70% 28%; }
html[data-hero="spotlight"] .hero-figure .ph-label{ display:none; }
html[data-hero="spotlight"] .hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(94deg, rgba(7,21,20,.95) 0%, rgba(7,21,20,.88) 26%, rgba(7,21,20,.6) 48%, rgba(7,21,20,.2) 72%, rgba(7,21,20,.04) 100%),
    linear-gradient(0deg, rgba(7,21,20,.94) 0%, rgba(7,21,20,.5) 24%, rgba(7,21,20,0) 52%),
    linear-gradient(180deg, rgba(7,21,20,.55) 0%, rgba(7,21,20,0) 16%);
}
html[data-hero="spotlight"] .hero .wrap{ position:relative; z-index:2; }
html[data-hero="spotlight"] .hero-copy{ color:#fff; max-width:760px; }
html[data-hero="spotlight"] .hero h1,
html[data-hero="spotlight"] .hero h1 .ital{ color:#fff; }
html[data-hero="spotlight"] .hero h1 em{ color:var(--brand-teal); }
html[data-hero="spotlight"] .hero-sub{ color:rgba(255,255,255,.9); }
html[data-hero="spotlight"] .hero-badge{ display:none; }
html[data-hero="spotlight"] .pill{ background:var(--brand-teal); color:#06201E; }
html[data-hero="spotlight"] .pill--out{ background:transparent; color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5); }
html[data-hero="spotlight"] .btn--ghost{ color:#fff; box-shadow:inset 0 0 0 1.6px rgba(255,255,255,.6); }
html[data-hero="spotlight"] .btn--ghost:hover{ box-shadow:inset 0 0 0 1.6px #fff; background:rgba(255,255,255,.08); }
html[data-hero="spotlight"] .stats{ position:relative; z-index:2; border-color:rgba(255,255,255,.28); margin-top:clamp(30px,4vw,52px); }
html[data-hero="spotlight"] .stat b{ color:#fff; }
html[data-hero="spotlight"] .stat span{ color:rgba(255,255,255,.72); }
html[data-hero="spotlight"][data-header="full"] .head:not(.scrolled) .brand,
html[data-hero="spotlight"][data-header="minimal"] .head:not(.scrolled) .brand,
html[data-hero="spotlight"][data-header="full"] .head:not(.scrolled) .nav a,
html[data-hero="spotlight"][data-header="minimal"] .head:not(.scrolled) .nav a{ color:#fff; }
html[data-hero="spotlight"][data-header="full"] .head:not(.scrolled) .burger span,
html[data-hero="spotlight"][data-header="minimal"] .head:not(.scrolled) .burger span{ background:#fff; }
@media(max-width:760px){
  html[data-hero="spotlight"] .hero::after{ background:
    linear-gradient(0deg, rgba(7,21,20,.95) 0%, rgba(7,21,20,.6) 38%, rgba(7,21,20,.25) 70%, rgba(7,21,20,.12) 100%),
    linear-gradient(180deg, rgba(7,21,20,.6) 0%, rgba(7,21,20,0) 18%); }
}

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,5vw,70px); align-items:center; }
@media(max-width:900px){ .about-grid{ grid-template-columns:1fr; } }
.about-media{ position:relative; aspect-ratio:4/5; border-radius:var(--r); overflow:hidden; }
.about-media .play{
  position:absolute; inset:0; margin:auto; width:96px; height:96px; border-radius:50%;
  background:var(--paper); color:var(--ink); display:grid; place-items:center; font-size:1.6rem;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.5); transition:transform .4s var(--ease);
}
.about-media .play:hover{ transform:scale(1.08); }
.timeline{ margin-top:30px; display:grid; gap:0; }
.tl{ display:grid; grid-template-columns:96px 1fr; gap:18px; padding:18px 0; border-top:1px solid var(--line); align-items:baseline; }
.tl:last-child{ border-bottom:1px solid var(--line); }
.tl b{ font-family:var(--display); font-size:1.5rem; color:var(--accent); }
.tl p{ color:var(--ink-soft); }
.tl p strong{ color:var(--ink); font-weight:600; }

/* ============================================================
   DISCIPLINES
   ============================================================ */
.disc-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; }
.disc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:46px; }
@media(max-width:1080px){ .disc-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:760px){ .disc-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .disc-grid{ grid-template-columns:1fr; } }
.disc{
  position:relative; aspect-ratio:1/1.16; border-radius:14px; overflow:hidden;
  cursor:pointer; color:#fff; isolation:isolate;
  transition:transform .5s var(--ease);
}
.disc:hover{ transform:translateY(-6px); }
.disc .ph{ position:absolute; inset:0; z-index:-2; transition:transform .8s var(--ease); }
.disc:hover .ph{ transform:scale(1.07); }
.disc::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(14,51,49,0) 30%,rgba(10,24,23,.86)); }
.disc-inner{ position:absolute; inset:0; padding:18px; display:flex; flex-direction:column; justify-content:space-between; }
.disc-no{ font-family:var(--head); font-weight:700; font-size:.78rem; letter-spacing:.08em; opacity:.85; }
.disc h3{ font-family:var(--head); font-weight:800; text-transform:uppercase; font-size:1.18rem; line-height:1; letter-spacing:-.01em; }
.disc .more{ position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.16); backdrop-filter:blur(4px); display:grid; place-items:center; opacity:0; transform:scale(.7); transition:.4s var(--ease); }
.disc:hover .more{ opacity:1; transform:none; }
.disc-foot{ margin-top:34px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.disc-foot .big{ font-family:var(--display); font-size:clamp(2.2rem,5vw,3.6rem); line-height:.9; max-width:14ch; }
.disc-foot .big em{ font-style:normal; color:var(--accent); }

/* ============================================================
   TEACHERS
   ============================================================ */
.prof-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px 16px; margin-top:46px; }
@media(max-width:1080px){ .prof-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:680px){ .prof-grid{ grid-template-columns:repeat(2,1fr); } }
.prof{ cursor:pointer; }
.prof-ph{ position:relative; aspect-ratio:3/4; border-radius:12px; overflow:hidden; }
.prof-ph .ph{ position:absolute; inset:0; transition:transform .7s var(--ease); }
.prof:hover .prof-ph .ph{ transform:scale(1.06); }
.prof-ph .tagrole{ position:absolute; left:10px; bottom:10px; right:10px; z-index:2; color:#fff; transform:translateY(8px); opacity:0; transition:.4s var(--ease); }
.prof:hover .prof-ph .tagrole{ opacity:1; transform:none; }
.prof-ph::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(10,24,23,.8)); opacity:0; transition:.4s var(--ease); }
.prof:hover .prof-ph::after{ opacity:1; }
.prof-name{ margin-top:12px; font-family:var(--head); font-weight:800; font-size:1.06rem; line-height:1.05; }
.prof-role{ color:var(--ink-soft); font-size:.84rem; margin-top:3px; }
.prof .plus{ font-family:var(--head); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:#fff; display:inline-flex; gap:.5em; }

/* ============================================================
   PLANNING & TARIFS
   ============================================================ */
.plan{ background:var(--ink); color:var(--paper); }
.plan .eyebrow{ color:var(--brand-teal); }
.plan .eyebrow::before{ background:var(--brand-teal); }
.plan .section-head h2{ color:var(--paper); }
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr) 1.1fr; gap:14px; margin-top:18px; }
@media(max-width:980px){ .price-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .price-grid{ grid-template-columns:1fr; } }
.price{ border:1.4px solid rgba(255,255,255,.18); border-radius:16px; padding:26px 22px 24px; display:flex; flex-direction:column; transition:.4s var(--ease); }
.price:hover{ border-color:var(--brand-teal); transform:translateY(-5px); }
.price .dur{ font-family:var(--head); font-weight:600; text-transform:uppercase; letter-spacing:.1em; font-size:.76rem; color:var(--brand-teal); }
.price .amt{ font-family:var(--display); font-size:clamp(2.6rem,6vw,3.6rem); line-height:1; margin:14px 0 6px; }
.price .amt small{ font-size:.34em; vertical-align:top; }
.price p{ color:rgba(243,239,229,.66); font-size:.92rem; margin-top:auto; padding-top:14px; }
.price--cta{ background:var(--brand-teal); color:var(--ink); border-color:var(--brand-teal); justify-content:space-between; }
.price--cta h3{ font-family:var(--head); font-weight:800; font-size:1.5rem; line-height:1.02; }
.price--cta p{ color:var(--teal-ink); }

/* ============================================================
   ALMA
   ============================================================ */
.alma{ position:relative; overflow:hidden; background:var(--teal-ink); color:#fff; }
html[data-mood="bold"] .alma{ background:#0E3331; }
.alma .ph-bg{ position:absolute; inset:0; opacity:.32; z-index:0; }
.alma::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(8,30,28,.92),rgba(8,30,28,.55)); z-index:0; }
.alma .wrap{ position:relative; z-index:2; }
.alma-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:center; }
@media(max-width:900px){ .alma-grid{ grid-template-columns:1fr; } }
.alma h2{ font-family:var(--display); font-size:clamp(4rem,14vw,9rem); line-height:.84; }
.alma .lead{ color:rgba(255,255,255,.82); }
.alma-facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:28px 0; }
.alma-facts .f{ border:1px solid rgba(255,255,255,.22); border-radius:12px; padding:16px 14px; }
.alma-facts b{ font-family:var(--display); font-size:1.8rem; display:block; }
.alma-facts span{ font-size:.78rem; color:rgba(255,255,255,.7); }

/* ============================================================
   EVENTS
   ============================================================ */
.ev-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:14px; margin-top:46px; }
.ev{ border-radius:16px; padding:26px; border:1.4px solid var(--line); position:relative; overflow:hidden; transition:.4s var(--ease); min-height:200px; display:flex; flex-direction:column; justify-content:space-between; }
.ev:hover{ transform:translateY(-5px); border-color:var(--accent); }
.ev .k{ font-family:var(--head); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; color:var(--accent); }
.ev h3{ font-family:var(--head); font-weight:800; font-size:1.4rem; line-height:1.04; margin-top:10px; }
.ev p{ color:var(--ink-soft); font-size:.95rem; margin-top:10px; }
.ev--big{ grid-column:span 6; background:var(--ink); color:var(--paper); border-color:var(--ink); }
.ev--big .k{ color:var(--brand-teal); }
.ev--big h3{ font-size:clamp(1.8rem,3.4vw,2.6rem); }
.ev--big p{ color:rgba(243,239,229,.7); }
.ev--med{ grid-column:span 6; }
.ev--s{ grid-column:span 4; }
@media(max-width:860px){ .ev--big,.ev--med{ grid-column:span 12; } .ev--s{ grid-column:span 6; } }
@media(max-width:560px){ .ev--s{ grid-column:span 12; } }
.ev .spot{ font-family:var(--display); font-size:3rem; line-height:.9; color:var(--accent); }

/* ============================================================
   ROOMS
   ============================================================ */
.rooms-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,56px); align-items:center; }
@media(max-width:860px){ .rooms-grid{ grid-template-columns:1fr; } }
.rooms-imgs{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:12px; }
.rooms-imgs .ph{ border-radius:14px; aspect-ratio:1/1; }
.rooms-imgs .ph:first-child{ grid-column:1/-1; aspect-ratio:16/9; }

/* ============================================================
   GALLERY
   ============================================================ */
.gal{ columns:4; column-gap:12px; margin-top:30px; }
@media(max-width:980px){ .gal{ columns:3; } }
@media(max-width:640px){ .gal{ columns:2; } }
.gal .ph{ width:100%; margin-bottom:12px; border-radius:12px; break-inside:avoid; }

/* ============================================================
   INSCRIPTION / CONTACT
   ============================================================ */
.insc{ background:var(--accent); color:#fff; }
.insc .eyebrow{ color:#fff; } .insc .eyebrow::before{ background:#fff; }
.insc .section-head h2{ color:#fff; }
.insc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,64px); }
@media(max-width:880px){ .insc-grid{ grid-template-columns:1fr; } }
.dates{ display:grid; gap:12px; }
.date{ display:flex; gap:16px; align-items:flex-start; background:rgba(255,255,255,.14); border-radius:14px; padding:18px 20px; }
.date b{ font-family:var(--display); font-size:1.5rem; line-height:1; min-width:64px; }
.date span{ font-size:.95rem; }
.modal-list{ list-style:none; margin-top:24px; display:grid; gap:10px; }
.modal-list li{ display:flex; gap:12px; align-items:flex-start; }
.modal-list li::before{ content:"→"; font-family:var(--head); font-weight:800; }
.form{ background:var(--card); color:var(--ink); border-radius:var(--r); padding:clamp(22px,3vw,34px); }
.form h3{ font-family:var(--head); font-weight:800; font-size:1.4rem; }
.form p.sub{ color:var(--ink-soft); margin-top:6px; font-size:.95rem; }
.field{ margin-top:16px; }
.field label{ font-family:var(--head); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); display:block; margin-bottom:6px; }
.field input,.field select,.field textarea{
  width:100%; font:inherit; padding:.8em 1em; border-radius:10px;
  border:1.4px solid var(--line); background:var(--paper); color:var(--ink); transition:.3s;
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--accent); }
.field.two{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:var(--ink); color:var(--paper); padding-top:clamp(60px,8vw,100px); }
.foot-big{ font-family:var(--display); font-size:clamp(3.6rem,16vw,13rem); line-height:.8; letter-spacing:.01em; text-transform:uppercase; padding-bottom:.1em; }
.foot-big .dot{ color:var(--accent); }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px; padding-block:48px; border-top:1px solid rgba(243,239,229,.16); }
@media(max-width:760px){ .foot-grid{ grid-template-columns:1fr; gap:26px; } }
.foot h4{ font-family:var(--head); font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:.76rem; color:var(--brand-teal); margin-bottom:14px; }
.foot a.fl, .foot p.fl{ display:block; color:rgba(243,239,229,.78); padding:5px 0; transition:.3s; }
.foot a.fl:hover{ color:var(--paper); }
.socials{ display:flex; gap:10px; margin-top:14px; }
.socials a{ width:40px; height:40px; border-radius:50%; border:1px solid rgba(243,239,229,.24); display:grid; place-items:center; transition:.3s; font-family:var(--head); font-weight:700; font-size:.8rem; }
.socials a:hover{ background:var(--brand-teal); color:var(--ink); border-color:var(--brand-teal); }
.foot-bar{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-block:22px; border-top:1px solid rgba(243,239,229,.16); font-size:.8rem; color:rgba(243,239,229,.6); }

/* ============================================================
   MODAL
   ============================================================ */
.modal{ position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .4s var(--ease); }
.modal.open{ opacity:1; pointer-events:auto; }
.modal-bg{ position:absolute; inset:0; background:rgba(8,18,17,.62); backdrop-filter:blur(6px); }
.modal-card{
  position:relative; z-index:2; width:min(900px,100%); max-height:88vh; overflow:auto;
  background:var(--card); color:var(--ink); border-radius:var(--r);
  display:grid; grid-template-columns:.85fr 1.15fr; transform:translateY(26px) scale(.98);
  transition:transform .5s var(--ease); box-shadow:0 40px 90px -30px rgba(0,0,0,.6);
}
.modal.open .modal-card{ transform:none; }
@media(max-width:680px){ .modal-card{ grid-template-columns:1fr; max-height:92vh; } }
.modal-ph{ position:relative; min-height:260px; }
.modal-ph .ph{ position:absolute; inset:0; }
.modal-body{ padding:clamp(24px,3vw,40px); }
.modal-body .eyebrow{ margin-bottom:10px; }
.modal-body h3{ font-family:var(--head); font-weight:800; font-size:clamp(1.6rem,3vw,2.4rem); line-height:1; }
.modal-body .role{ color:var(--accent); font-family:var(--head); font-weight:600; margin-top:6px; }
.modal-body .txt{ margin-top:18px; color:var(--ink-soft); }
.modal-body .txt p{ margin-bottom:12px; text-wrap:pretty; }
.modal-close{ position:absolute; top:14px; right:14px; z-index:5; width:42px; height:42px; border-radius:50%; background:var(--paper); display:grid; place-items:center; font-size:1.3rem; box-shadow:0 6px 18px -6px rgba(0,0,0,.4); transition:.3s; }
.modal-close:hover{ transform:rotate(90deg); }

/* ============================================================
   Placeholder visuals
   ============================================================ */
.ph{ background:var(--ph-c, var(--teal-deep)); position:relative; overflow:hidden; }
.ph::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 18% 12%, color-mix(in oklab,var(--ph-c2,var(--brand-teal)) 90%, #fff 12%), transparent 60%),
    linear-gradient(150deg, var(--ph-c, var(--teal-deep)), color-mix(in oklab,var(--ph-c,var(--teal-deep)) 60%, #000 24%));
}
.ph::after{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:repeating-linear-gradient(125deg, rgba(255,255,255,.05) 0 2px, transparent 2px 9px);
  mix-blend-mode:overlay;
}
.ph .ph-label{
  position:absolute; left:12px; bottom:11px; z-index:4;
  font-family:var(--head); font-weight:600; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.92); display:flex; align-items:center; gap:6px;
}
.ph .ph-label::before{ content:""; width:7px; height:7px; border-radius:50%; background:#fff; }

.ph-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; display:block; }
.ph.has-img::before{ opacity:0; }
.ph.has-img::after{ opacity:.16; z-index:2; }
.ph.has-img .ph-label{ z-index:3; }
.disc .ph.has-img, .prof-ph .ph.has-img{ background:var(--ph-c); }

/* ---------- Reveal animation ---------- */
.reveal{ }
html.can-animate .reveal{ opacity:0; transform:translateY(30px); filter:blur(14px); transition:opacity var(--reveal-dur) var(--ease), transform var(--reveal-dur) var(--ease), filter var(--reveal-dur) var(--ease); }
html.can-animate .reveal.in{ opacity:1; transform:none; filter:blur(0); }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
html[data-motion="off"] .reveal{ opacity:1 !important; transform:none !important; }
@media(prefers-reduced-motion:reduce){ .reveal{ opacity:1 !important; transform:none !important; } *{ animation:none !important; } }

html[data-motion="off"] .hero h1{ animation:none; transform:none; opacity:1; }